body { font-family: 'Inter', sans-serif; background: #f1f5f9; }
.card { background:#fff; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.bar { background: linear-gradient(90deg, #1d4ed8, #0891b2); border-radius:6px; min-width:4px; transition: width .6s ease; }
.stat-number { font-size:2rem; font-weight:900; color:#0a1628; line-height:1; }
.stat-label { font-size:.75rem; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.tab-btn { padding:8px 16px; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .2s; border:none; }
.tab-btn.active { background:#0a1628; color:#fff; }
.tab-btn:not(.active) { background:transparent; color:#64748b; }
.tab-btn:not(.active):hover { background:#e2e8f0; color:#334155; }
.chart-mode-btn { padding:4px 12px; border-radius:6px; font-size:.7rem; font-weight:700; cursor:pointer; border:1px solid #e2e8f0; transition:all .2s; background:#fff; color:#64748b; }
.chart-mode-btn.active { background:#0a1628; color:#fff; border-color:#0a1628; }
.chart-mode-btn:not(.active):hover { background:#f1f5f9; }
#loading { display:flex; align-items:center; justify-content:center; min-height:400px; }
.spinner { width:32px; height:32px; border:3px solid #e2e8f0; border-top-color:#1d4ed8; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }