:root{--bg:#0b0e14;--surface:#151a23;--surface-2:#1b212c;--border:#262b36;--text:#e6e8ee;--text-muted:#9aa3b2;--accent:#8b5cf6;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 80% -10%, #8b5cf61a, transparent 60%), var(--bg);min-height:100vh;margin:0}.dashboard{max-width:1200px;margin:0 auto;padding:36px 24px 64px}.dashboard-header h1{letter-spacing:-.3px;margin:0 0 6px;font-size:32px;font-weight:600}.dashboard-header p{color:var(--text-muted);margin:0 0 28px;font-size:14px}.state{color:var(--text-muted);padding:16px 0}.state-error{color:#f87171}.grid{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);align-items:start;gap:20px;display:grid}.grid>*{min-width:0}@media (width<=900px){.grid{grid-template-columns:minmax(0,1fr)}}.card{background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:inset 0 1px #ffffff08,0 10px 30px #00000059}.card-title{letter-spacing:.2px;color:var(--text);margin:0 0 16px;font-size:14px;font-weight:600}.card-state{color:var(--text-muted);text-align:center;padding:20px 4px;font-size:14px}.card-state-error{color:#f87171;font-size:16px;font-weight:600}.gauge-wrap{position:relative}.gauge-center{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gauge-value{color:var(--text);font-size:48px;font-weight:700;line-height:1}.gauge-label{color:var(--text-muted);margin-top:6px;font-size:13px}.chart-scroll{overflow-x:auto}.chart-scroll-inner{min-width:640px}@media (width<=640px){.dashboard{padding:20px 14px 40px}.dashboard-header h1{font-size:22px}.dashboard-header p{font-size:13px}.card{padding:16px 14px}}.topnav{border-bottom:1px solid var(--border);align-items:center;gap:6px;margin-bottom:24px;padding-bottom:14px;display:flex}.topnav-link{color:var(--text-muted);border-radius:8px;padding:8px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.topnav-link:hover,.topnav-link.is-active{color:var(--text);background:var(--surface-2)}.daily-controls{flex-wrap:wrap;align-items:center;gap:16px;margin:28px 0 24px;display:flex}.date-pick{color:var(--text-muted);align-items:center;gap:8px;font-size:14px;display:inline-flex}.date-pick input[type=date]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px}.badge-berjalan{color:#f59e0b;background:#f59e0b1f;border:1px solid #f59e0b4d;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:600}.monthly-section{margin-top:32px}.section-title{color:var(--text);margin:0 0 16px;font-size:20px;font-weight:600}.trend-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px;display:flex}.trend-head .section-title{margin:0}.month-pick{color:var(--text-muted);align-items:center;gap:8px;font-size:14px;display:inline-flex}.month-pick input[type=month]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px}.kpi-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px;display:grid}@media (width<=640px){.kpi-row{grid-template-columns:1fr 1fr}}.kpi-card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px}.kpi-label{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:15px;display:flex}.kpi-label-solid{color:var(--text)}.kpi-value{color:var(--text);font-size:28px;font-weight:700;line-height:1}.trend-legend{color:var(--text-muted);flex-wrap:wrap;gap:18px;margin-bottom:14px;font-size:12px;display:flex}.trend-legend span{align-items:center;gap:6px;display:inline-flex}.trend-legend .lg-line{border-radius:2px;width:16px;height:3px;display:inline-block}.trend-legend .lg-dash{border-top:3px dashed;width:16px;height:0;display:inline-block}.trend-legend .lg-ring{background:#12161d;border:2px solid #6b7280;border-radius:50%;width:11px;height:11px;display:inline-block}.trend-charts,.stack{flex-direction:column;gap:20px;display:flex}.dashboard-overview{padding-bottom:0}.trend-wide{max-width:none;margin:0 auto;padding:24px 24px 64px}.trend-wide .monthly-section{margin-top:0}@media (width<=640px){.trend-wide{padding:20px 14px 40px}}