html,body{margin:0;padding:0;overscroll-behavior:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#060e20}
::-webkit-scrollbar-thumb{background:#1e3a8a66;border-radius:4px}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;display:inline-block;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
body{background-image:radial-gradient(rgba(6,182,212,.055) 1px,transparent 1px);background-size:26px 26px}
.glow-panel{box-shadow:0 8px 32px rgba(6,182,212,.06)}
.inflow-arrow{animation:flowX 1.6s linear infinite}
@keyframes flowX{0%{transform:translateX(0);opacity:.4}50%{opacity:1}100%{transform:translateX(26px);opacity:0}}
.phase-btn.active,.chart-filter-btn.active,.tbl-filter.active,.int-btn.active{background:#06b6d4;color:#00424f;font-weight:700}
/* v2.12: KPI mengecil, strip LIVE membesar sebagai bintang utama */
#kpi-elv,#kpi-vol,#kpi-qout,#kpi-qin{font-size:1.45rem !important;line-height:1.15 !important;}
div:has(> #kpi-elv),div:has(> #kpi-vol),div:has(> #kpi-qout),div:has(> #kpi-qin){padding:.7rem .9rem !important;}
#kpi-elv-sub,#kpi-vol-sub,#kpi-qout-sub,#kpi-qin-sub{font-size:.58rem !important;}
#kpi-elv-sub,#kpi-vol-sub,#kpi-qout-sub,#kpi-qin-sub{letter-spacing:.02em;}
#live-strip{font-size:1.05rem !important;border:1px solid rgba(76,215,246,.55) !important;box-shadow:0 0 22px rgba(76,215,246,.18);border-radius:.75rem;}
#live-in-jam,#live-in-tma,#live-in-q,#live-out-jam,#live-out-tma,#live-out-q,#live-elv,#live-vol,#live-qout,#live-red{font-size:1.35rem !important;}
#live-strip b{font-size:1.05rem !important;}
#live-badge{font-size:.78rem !important;padding:4px 12px !important;}
#live-saved,#live-update-time{font-size:.95rem !important;} #live-status{font-size:.9rem !important;padding:3px 10px !important;}
#kpi-elv,#kpi-vol,#kpi-qout,#kpi-qin{font-size:1.05rem !important;}
div:has(> #kpi-elv),div:has(> #kpi-vol),div:has(> #kpi-qout),div:has(> #kpi-qin){padding:.45rem .7rem !important;}
#kpi-elv-sub,#kpi-vol-sub,#kpi-qout-sub,#kpi-qin-sub{font-size:.5rem !important;}
div:has(> #kpi-elv) h3,div:has(> #kpi-vol) h3,div:has(> #kpi-qout) h3,div:has(> #kpi-qin) h3{font-size:.55rem !important;}
#live-strip{font-size:1.25rem !important;}
#live-in-jam,#live-in-tma,#live-in-q,#live-out-jam,#live-out-tma,#live-out-q,#live-elv,#live-vol,#live-qout,#live-red{font-size:1.8rem !important;}
#live-strip b{font-size:1.3rem !important;}
#live-badge{font-size:.95rem !important;}
#live-saved,#live-update-time{font-size:1.05rem !important;}
#live-in-jam,#live-in-tma,#live-in-q,#live-out-jam,#live-out-tma,#live-out-q{font-size:2.3rem !important;}
div:has(> #live-in-tma),div:has(> #live-out-tma){font-size:1.7rem !important;padding:.9rem 1.4rem !important;}
div:has(> #live-in-tma) b,div:has(> #live-out-tma) b{font-size:1.7rem !important;}
#dry-dam-svg text{font-size:15px !important;}
#dry-dam-svg #wl-live-line{stroke-width:3 !important;} #dry-dam-svg #water-level-line{stroke-width:2 !important;}
#dry-dam-svg #dam-inflow path{stroke-width:8 !important;}
#dry-dam-svg #flow-particles circle{r:4;}
#dry-dam-svg text{font-size:18px !important;}
html.light body{background:#eef2f8 !important;background-image:radial-gradient(rgba(6,182,212,.10) 1px,transparent 1px) !important;}
html.light [class*="bg-surface"]{background-color:#eef2f8 !important;} html.light [class*="bg-surface-container"]{background-color:#dfe6f0 !important;} html.light [class*="bg-surface-container-high"]{background-color:#d3dcea !important;}
html.light [class*="bg-surface-container-low"]{background-color:#eaeff7 !important;} html.light [class*="bg-surface-container-lowest"]{background-color:#e3e9f2 !important;} html.light [class*="bg-surface-card"]{background-color:#ffffff !important;}
html.light [class*="text-on-surface"]{color:#101828 !important;} html.light [class*="text-on-surface-variant"]{color:#4a5568 !important;}
html.light [class*="border-surface-container"],html.light [class*="border-outline-variant"],html.light [class*="divide-surface-container"]{border-color:#c3cedd !important;}
html.light [class*="text-primary"]{color:#0e7490 !important;} html.light [class*="text-secondary"]{color:#1d4ed8 !important;}
html.light ::-webkit-scrollbar-track{background:#e3e9f2;} html.light ::-webkit-scrollbar-thumb{background:#94a3b8;} html.light .glow-panel{box-shadow:0 8px 32px rgba(30,60,90,.10);}
@keyframes alarmBlink{0%,100%{opacity:1}50%{opacity:.22}}
#alarm-banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:9998;display:none;align-items:center;gap:12px;padding:9px 16px;border-radius:10px;border:2px solid;background:rgba(11,19,38,.94);font-weight:800;font-size:13px;letter-spacing:.05em;box-shadow:0 10px 34px rgba(0,0,0,.55);}
#alarm-panel{position:fixed;right:12px;bottom:12px;z-index:9998;display:flex;gap:6px;} #alarm-panel button{background:rgba(11,19,38,.9);border:1px solid rgba(76,215,246,.4);color:#e6edf7;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;cursor:pointer;}
@keyframes neonPulse{0%,100%{box-shadow:0 0 6px rgba(76,215,246,.25),0 0 18px rgba(76,215,246,.12)}50%{box-shadow:0 0 10px rgba(76,215,246,.45),0 0 26px rgba(76,215,246,.2)}}
@keyframes neonText{0%,100%{text-shadow:0 0 6px rgba(76,215,246,.55)}50%{text-shadow:0 0 12px rgba(76,215,246,.85),0 0 22px rgba(76,215,246,.35)}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes scanline{0%{background-position:-200% 0}100%{background-position:200% 0}} @keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.55}}
.bg-surface-card{animation:riseIn .5s ease-out both;transition:box-shadow .3s,transform .3s,border-color .3s;} .bg-surface-card:hover{transform:translateY(-2px);border-color:rgba(76,215,246,.45);box-shadow:0 0 0 1px rgba(76,215,246,.35),0 0 18px rgba(76,215,246,.18),0 10px 30px rgba(0,0,0,.45);}
#kpi-elv,#kpi-vol,#kpi-qout,#kpi-qin{animation:neonText 3.2s ease-in-out infinite;} #dam-live-status{animation:neonText 2.8s ease-in-out infinite;}
header{position:relative;} header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#4cd7f6,transparent);background-size:200% 100%;animation:scanline 4s linear infinite;}
.int-btn.active,.tbl-filter.active,.chart-filter-btn.active{animation:neonPulse 2.6s ease-in-out infinite;} #dam-water-path{filter:drop-shadow(0 0 8px rgba(76,215,246,.45));}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}
html.light .bg-surface-card:hover{transform:none;box-shadow:0 8px 24px rgba(30,60,90,.12);} html.light #kpi-elv,html.light #kpi-vol,html.light #kpi-qout,html.light #kpi-qin,html.light #dam-live-status{animation:none;text-shadow:none;} html.light header::after{display:none;} html.light .int-btn.active,html.light .tbl-filter.active,html.light .chart-filter-btn.active{animation:none;box-shadow:none;}