.dashboard{min-height:100vh;background:#f5f7fa;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 8px #0000001a}.header-content h1{font-size:28px;margin-bottom:5px;color:#1a202c}.header-content p{color:#718096;font-size:14px}.btn-refresh{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:background .3s}.btn-refresh:hover{background:#2563eb}.alert{background:#fed7d7;border:1px solid #fc8181;color:#c53030;padding:15px;border-radius:6px;margin-bottom:20px}.loading{text-align:center;padding:60px 20px;font-size:18px;color:#718096}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.metric-card{display:flex;align-items:center;background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #0000001a;transition:transform .3s,box-shadow .3s}.metric-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px #00000026}.metric-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:8px;margin-right:20px;color:#fff}.metric-icon.revenue{background:linear-gradient(135deg,#667eea,#764ba2)}.metric-icon.users{background:linear-gradient(135deg,#f093fb,#f5576c)}.metric-icon.engagement{background:linear-gradient(135deg,#4facfe,#00f2fe)}.metric-icon.activity{background:linear-gradient(135deg,#43e97b,#38f9d7)}.metric-content{flex:1}.metric-label{font-size:13px;color:#718096;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:24px;font-weight:700;color:#1a202c}.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px}.chart-container{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #0000001a}.chart-container h2{font-size:18px;margin-bottom:20px;color:#1a202c}@media (max-width: 768px){.header{flex-direction:column;align-items:flex-start;gap:20px}.metrics,.charts{grid-template-columns:1fr}.chart-container{min-height:300px}}