*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem;color:#333}.dashboard{max-width:1400px;margin:0 auto}.dashboard-header{background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px #0000001a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.header-content h1{font-size:2rem;color:#667eea;margin-bottom:.5rem}.subtitle{color:#666;font-size:1rem}.refresh-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;color:#fff}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px #0000001a;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:0 4px 20px #00000026}.stat-value{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stat-label{color:#666;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.chart-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.chart-card:hover{transform:translateY(-4px);box-shadow:0 6px 30px #00000026}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0}.chart-header h2{font-size:1.25rem;color:#333}.chart-type{font-size:.85rem;color:#667eea;background:#667eea20;padding:.25rem .75rem;border-radius:12px;font-weight:600}.chart-container{position:relative;height:300px;margin-bottom:1rem}.chart-container canvas{max-height:100%}.chart-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding-top:1rem;border-top:1px solid #f0f0f0}.control-btn{padding:.5rem 1rem;background:#f8f9fa;color:#333;border:1px solid #e0e0e0;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-2px)}.info-section{background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px #0000001a}.info-section h3{color:#667eea;margin-bottom:1.5rem;font-size:1.5rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.info-item h4{color:#333;margin-bottom:.5rem;font-size:1.1rem}.info-item p{color:#666;line-height:1.6;font-size:.95rem}.dashboard-footer{text-align:center;color:#fff;opacity:.9;padding:1rem}.dashboard-footer p{font-size:.95rem}.dashboard-footer a{color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.5);transition:border-color .3s ease}.dashboard-footer a:hover{border-bottom-color:#fff}@media (max-width: 1024px){.charts-grid{grid-template-columns:1fr}}@media (max-width: 768px){body{padding:1rem}.dashboard-header{flex-direction:column;text-align:center}.header-content h1{font-size:1.5rem}.refresh-btn{width:100%}.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}.chart-container{height:250px}.info-grid{grid-template-columns:1fr}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}.chart-controls{flex-direction:column}.control-btn{width:100%}}