:root{
  --bg:#0b0f17; --panel:#141a26; --panel2:#1b2433; --line:#27324a;
  --txt:#e7edf6; --muted:#8aa0c0; --accent:#3da9fc; --accent2:#0fb98a;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt)}
header{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
header h1{font-size:18px;margin:0}
.sub{color:var(--muted);font-size:12.5px}
a{color:var(--accent)}

.layout{display:grid;grid-template-columns:300px 1fr;gap:16px;padding:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
fieldset{border:1px solid var(--line);border-radius:10px;margin:0;padding:10px 12px}
legend{color:var(--muted);font-size:12px;padding:0 6px;text-transform:uppercase;letter-spacing:.05em}
select,input[type=number]{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.slabel{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
.slabel b{color:var(--txt)}
.slabel.inline{display:flex;align-items:center;gap:8px;margin:0}
input[type=range]{width:100%;accent-color:var(--accent)}
.row{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.presets button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer}
.presets button:hover{border-color:var(--accent)}
.hint{color:var(--muted);font-size:11.5px;margin:8px 0 0}
button.primary{background:var(--accent);border:none;color:#06121f;font-weight:700;padding:11px;border-radius:10px;cursor:pointer;font-size:14px}
button.primary:hover{filter:brightness(1.08)}

.progress{position:relative;height:20px;background:var(--panel2);border-radius:6px;overflow:hidden}
.progress .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .1s}
.progress span{position:relative;display:block;text-align:center;font-size:11px;line-height:20px}

.stage{display:flex;flex-direction:column;gap:12px}
.viewer{position:relative;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;justify-content:center}
#view{display:block;max-width:100%;height:auto;background:#000}
.overlay{position:absolute;left:10px;bottom:10px;font:12px/1.3 ui-monospace,monospace;color:#cfe;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:6px;pointer-events:none}

.controls{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.controls button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 12px;cursor:pointer;font-size:14px}
.controls button:not(:disabled):hover{border-color:var(--accent)}
.controls button:disabled{opacity:.4;cursor:default}
#scrub{flex:1;min-width:160px}
.stamp{font:12.5px ui-monospace,monospace;color:var(--accent2);min-width:155px}
#exportWebm.recording{background:#c0392b;color:#fff;border-color:#c0392b}

.locator{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:inline-flex;flex-direction:column;gap:8px;width:max-content}
.loclabel{color:var(--muted);font-size:12px}
.locwrap{position:relative;width:240px;height:240px}
#locator{display:block;border-radius:50%;background:#05080f;cursor:crosshair}
.locbox{position:absolute;border:1.5px solid var(--accent);box-shadow:0 0 0 9999px rgba(0,0,0,.0);pointer-events:none}

footer{padding:14px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media (max-width:820px){.layout{grid-template-columns:1fr}.panel{position:static}}

/* ===== Rainfall map app ===== */
body.mapapp{overflow:hidden}
#map{position:fixed;inset:0;background:#0b0f17;z-index:0}
.leaflet-container{font:13px system-ui}
.basemap-pane{transition:filter .2s}

.topbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:10px 16px;background:linear-gradient(180deg,rgba(8,12,20,.92),rgba(8,12,20,.55) 80%,transparent);color:var(--txt)}
.topbar .brand{font-size:15px}
.topbar .brand .sub{color:var(--muted);font-size:12px;margin-left:6px}
.areas{display:flex;align-items:center;gap:10px}
.areas label{color:var(--muted);font-size:12px;display:flex;gap:6px;align-items:center}
.areas select{background:rgba(20,26,38,.95);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.ghost{color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px}
.ghost:hover{border-color:var(--accent)}

.leftpanel{position:fixed;top:64px;left:16px;z-index:1000;width:240px;background:rgba(15,20,30,.92);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;backdrop-filter:blur(6px)}
.leftpanel h3{margin:6px 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.leftpanel h3:first-child{margin-top:0}
.leftpanel .row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.leftpanel select{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.leftpanel .slabel{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11.5px;margin:8px 0}

.legend{position:fixed;right:16px;bottom:84px;z-index:1000;background:rgba(15,20,30,.92);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;width:230px}
.legend .ltitle{font-size:12px;color:var(--muted)}
.legend .lbar{display:flex;height:12px;border-radius:4px;overflow:hidden;margin:6px 0 4px}
.legend .lbar i{flex:1}
.legend .lscale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}

.timebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(12,16,24,.94);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.rbtn{background:var(--accent);color:#06121f;border:none;border-radius:50%;width:38px;height:38px;font-size:15px;cursor:pointer;font-weight:700;display:grid;place-items:center}
.rbtn:disabled{opacity:.4;cursor:default}
#prev,#next,#reload{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.timebar #scrub{flex:1;min-width:160px;accent-color:var(--accent)}
.timebar .stamp{min-width:230px}
.slabel.inline{flex-direction:row;align-items:center;gap:6px}

.expbtns{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.expbtns button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;font-size:12.5px;text-align:left}
.expbtns button:hover{border-color:var(--accent)}
.expbtns button:disabled{opacity:.5;cursor:default}
.imergpopup{font:12.5px system-ui}
.imergpopup b{font-size:15px;color:#1b6}

/* ===== sites & alert ===== */
.sitelist{display:flex;flex-direction:column;gap:5px;margin:4px 0}
.siteitem{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12.5px}
.siteitem .dot{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid #0006}
.siteitem .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.siteitem button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px}
.siteitem button:hover{color:var(--accent)}
.siteitem input[type=checkbox]{margin:0}
.addbtn{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;font-size:12.5px;margin-top:6px}
.addbtn:hover{border-color:var(--accent)}

.editor{position:fixed;top:80px;left:272px;z-index:1200;width:250px;background:rgba(18,24,34,.97);border:1px solid var(--line);
  border-radius:12px;padding:14px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.editor h4{margin:0 0 8px;font-size:13px}
.editor label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);margin:6px 0}
.editor input[type=text],.editor input[type=number]{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 7px}
.editor .grid2,.editor .grid3{display:grid;gap:7px}
.editor .grid2{grid-template-columns:1fr 1fr}.editor .grid3{grid-template-columns:1fr 1fr 1fr}
.editor .rowc{flex-direction:row;align-items:center;gap:8px}
.editor .ebtns{display:flex;gap:6px;margin-top:10px}
.editor .ebtns button{flex:1;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;font-size:12.5px}
.editor .ebtns .primary2{background:var(--accent);color:#06121f;border:none;font-weight:700}
.editor #seDel{color:#ff6b6b}

.alertbanner{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:1300;max-width:70vw;
  background:linear-gradient(90deg,#b3261e,#e0533f);color:#fff;border-radius:10px;padding:10px 16px;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(200,0,0,.45);display:flex;gap:10px;align-items:center}
.alertbanner.lvl1{background:linear-gradient(90deg,#0a7ea4,#27a3c4)}
.alertbanner.lvl2{background:linear-gradient(90deg,#1f9d57,#2ebd6b)}
.alertbanner.lvl3{background:linear-gradient(90deg,#c9920a,#e0a917);color:#241c00}
.alertbanner small{font-weight:400;opacity:.9}
.mine-label{font:600 11px system-ui;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000;white-space:nowrap}

/* ===== Dashboard layout (overrides fullscreen map) ===== */
body.dashapp{overflow:hidden;height:100vh}
.dashapp .app{display:grid;grid-template-columns:1fr 400px;height:100vh}
.dashapp .mapcol{position:relative;overflow:hidden}
.dashapp #map{position:absolute;inset:0;width:100%;height:100%}
.dash{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}

.maptop{position:absolute;top:10px;left:10px;z-index:600;display:flex;gap:10px;align-items:center;background:rgba(10,14,22,.82);border:1px solid var(--line);border-radius:10px;padding:6px 10px;backdrop-filter:blur(6px)}
.maptop .mtitle{font-weight:700;font-size:14px}
.maptop label{color:var(--muted);font-size:12px;display:flex;gap:5px;align-items:center}
.maptop select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:5px 7px}

.mapcol .legend{position:absolute;right:12px;bottom:78px;left:auto;top:auto;z-index:600;width:200px}
.mapcol .timebar{position:absolute;left:12px;right:12px;bottom:12px;top:auto;z-index:600}

.dashhead{display:flex;gap:8px;align-items:center}
.dashhead select{flex:1;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:14px;font-weight:600}
.dashsub{color:var(--muted);font-size:12px;margin-top:-4px}

.consensus{border-radius:12px;padding:14px;text-align:center;background:#16361f;border:1px solid #1f5c33}
.consensus.alert{background:linear-gradient(180deg,#5a1a16,#7a241d);border-color:#b3382c;animation:pulse 1.4s infinite}
.consensus.warn{background:#3a3413;border-color:#7a6a17}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,60,40,.5)}50%{box-shadow:0 0 0 9px rgba(220,60,40,0)}}
.consensus .cbig{font-size:17px;font-weight:800}
.consensus .csub{font-size:12px;color:#dde;margin-top:4px;line-height:1.4}

.srccards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.srccard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.srccard .sh{font-size:11px;color:var(--muted)}
.srccard .sv{font-size:15px;font-weight:700;margin-top:3px}
.srccard .sm{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
.srccard.rain{border-color:#e0533f;background:#3a1f1c}
.srccard.norain{border-color:#1f5c33}
.srccard.nodata{opacity:.5}

.dash details{border:1px solid var(--line);border-radius:10px;padding:2px 10px 8px;background:rgba(255,255,255,.02)}
.dash details summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:8px 0;font-weight:600;list-style-position:inside}
.dash details .slabel{margin:7px 0}
.dash details select{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.dash hr{border:none;border-top:1px solid var(--line);margin:9px 0}
.dash .slabel input[type=text],.dash .slabel input[type=password]{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 7px;width:100%}
.editor #seAdm4{width:100%}

@media (max-width:900px){.dashapp .app{grid-template-columns:1fr;grid-template-rows:52vh 1fr}.dash{border-left:none;border-top:1px solid var(--line)}}

/* edit button in dashboard head + center the editor as a modal */
.hbtn{background:var(--accent);color:#06121f;border:none;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;font-size:13px;white-space:nowrap}
.hbtn:hover{filter:brightness(1.08)}
.dashapp #siteEditor{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:300px;z-index:2600}
.dashapp #siteEditor::before{content:"";position:fixed;inset:0;left:-50vw;top:-50vh;width:200vw;height:200vh;background:rgba(0,0,0,.45);z-index:-1}

/* ---- histori / replay modal ---- */
.dashapp #historyPanel{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:470px;max-width:94vw;max-height:88vh;overflow:auto;z-index:2000}
.dashapp #historyPanel::before{content:"";position:fixed;inset:0;left:-50vw;top:-50vh;width:200vw;height:200vh;background:rgba(0,0,0,.5);z-index:-1}
#historyPanel .histhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#historyPanel .histhd h4{margin:0}
#historyPanel #hClose{padding:4px 10px;font-size:13px}
#historyPanel input[type=date]{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 7px}
#historyPanel select{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 7px}
.histsum{margin-top:10px;font-size:12.5px;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;line-height:1.5}
.histsum b{color:var(--accent)}
.histspark{width:100%;height:90px;margin-top:8px;background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.histtable{max-height:190px;overflow:auto;margin-top:8px;border:1px solid var(--line);border-radius:9px}
.histtable table{width:100%;border-collapse:collapse;font-size:11.5px}
.histtable th,.histtable td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--line);color:var(--muted)}
.histtable th{position:sticky;top:0;background:var(--panel);color:var(--txt);z-index:1}
.histtable td.rain{color:#74e3ff;font-weight:600}

/* ---- prakiraan cuaca (modal) ---- */
.dashapp #forecastPanel{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:470px;max-width:94vw;max-height:88vh;overflow:auto;z-index:2000}
.dashapp #forecastPanel::before{content:"";position:fixed;inset:0;left:-50vw;top:-50vh;width:200vw;height:200vh;background:rgba(0,0,0,.5);z-index:-1}
#forecastPanel .histhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
#forecastPanel .histhd h4{margin:0}
#forecastPanel #fcClose{padding:4px 10px;font-size:13px}
.fcmeta{font-size:11.5px;color:var(--muted);margin:6px 0 12px;line-height:1.55}
.fcmeta b{color:var(--txt)}
.fcbody{display:flex;flex-direction:column;gap:3px}
.fcday{position:sticky;top:-1px;background:linear-gradient(180deg,var(--panel),var(--panel) 70%,transparent);
  padding:9px 2px 5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:700;z-index:1}
.fcrow{display:grid;grid-template-columns:42px 24px minmax(0,1fr) auto auto auto;align-items:center;gap:9px;
  padding:8px 10px;border-radius:10px;font-size:12px;background:rgba(255,255,255,.022);border:1px solid transparent}
.fcrow.rain{background:radial-gradient(130% 130% at 100% 0%,rgba(116,227,255,.12),transparent 60%),rgba(255,255,255,.022);border-color:rgba(116,227,255,.2)}
.fct{font-variant-numeric:tabular-nums;color:var(--muted)}
.fcic{font-size:16px;text-align:center;line-height:1}
.fcd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcv{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fcrow.rain .fcv.rn{color:#74e3ff;font-weight:600}
.fcempty{color:var(--muted);padding:16px 10px;text-align:center;font-size:12.5px;line-height:1.6}

/* ---- drawer pengaturan (kanan) ---- */
.drawerbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2400}
.drawerbackdrop[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;height:100vh;width:370px;max-width:92vw;z-index:2500;
  background:var(--panel);border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawerhd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.drawerhd b{font-size:14px}
.drawerhd #settingsClose{padding:4px 11px;font-size:14px}
.drawerbody{padding:12px 16px 24px;overflow:auto;flex:1 1 auto}
.drawerbody details{margin-bottom:8px}

/* ============================================================
   CORPORATE REDESIGN — dark professional + Vendoura orange
   ============================================================ */
:root{
  --bg:#0a0e16; --panel:#0e1420; --panel2:#141c2b; --elev:#1a2333;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --txt:#eef2f8; --muted:#8394ac;
  --accent:#ff7a1a; --accent2:#ffa35c;
  --ok:#2fd39a; --warn:#f5b400; --danger:#ff5468;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.4);
}
body.dashapp{font-family:Inter,system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--txt)}
.dashapp *{scrollbar-width:thin;scrollbar-color:#2a3650 transparent}
.shell{display:flex;flex-direction:column;height:100vh}

/* ---- app bar ---- */
.appbar{height:56px;flex:none;display:flex;align-items:center;gap:16px;padding:0 18px;
  background:linear-gradient(180deg,#0d1420,#0a0e17);border-bottom:1px solid var(--line);z-index:1500}
.appbar .brand{display:flex;align-items:center;gap:11px}
.appbar .logo{color:var(--accent);font-size:22px;line-height:1;text-shadow:0 0 12px rgba(255,122,26,.5)}
.appbar .bt{display:flex;flex-direction:column;line-height:1.2}
.appbar .bt b{font-size:14px;letter-spacing:.06em;font-weight:800}
.appbar .bt span{font-size:11px;color:var(--muted)}
.abstatus{margin-inline:auto;font-weight:700;font-size:13px;padding:6px 16px;border-radius:999px;
  background:rgba(34,201,138,.12);color:var(--ok);border:1px solid rgba(34,201,138,.35);transition:.25s}
.abstatus.warn{background:rgba(245,180,0,.12);color:var(--warn);border-color:rgba(245,180,0,.4)}
.abstatus.alert{background:rgba(239,68,68,.16);color:#ff9b9b;border-color:rgba(239,68,68,.5);animation:pulse 1.4s infinite}
.abright{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted)}
.abarea{display:flex;align-items:center;gap:6px}
.abright select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.live{display:flex;align-items:center;gap:6px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(34,201,138,.6);animation:pulse 2s infinite}
.clock{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:600}

/* ---- layout ---- */
.dashapp .app{flex:1;min-height:0;display:grid;grid-template-columns:1fr 420px;height:auto}
.dash{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px}

/* ---- dashboard head ---- */
.dashhead{display:flex;gap:8px}
.dashhead select{flex:1;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;font-weight:700}
.dashsub{color:var(--muted);font-size:12px;margin-top:-3px}
.hbtn{background:var(--accent);color:#0a0e17;border:none;border-radius:10px;padding:0 13px;font-weight:800;cursor:pointer;font-size:14px}
.hbtn:hover{filter:brightness(1.08)}

/* ---- hero status ---- */
.hero{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 18px;border:1px solid var(--line);transition:.3s}
.hero[data-level=ok]{background:linear-gradient(135deg,#0e2a1f,#0f1623);border-color:rgba(34,201,138,.35)}
.hero[data-level=warn]{background:linear-gradient(135deg,#2e2710,#0f1623);border-color:rgba(245,180,0,.4)}
.hero[data-level=alert]{background:linear-gradient(135deg,#3a1412,#160d12);border-color:rgba(239,68,68,.55);animation:pulse 1.5s infinite}
.hero-ic{font-size:32px;line-height:1}
.hero .cbig{font-size:19px;font-weight:800;letter-spacing:.01em}
.hero .csub{font-size:12.5px;color:#c7d3e6;margin-top:5px;line-height:1.5}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}

/* ---- consensus meter ---- */
.meterwrap{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted)}
.meter{display:flex;gap:4px;flex:1}
.meter i{flex:1;height:8px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);transition:.25s}
.meter i.on{background:var(--accent);border-color:var(--accent)}
.meter i.rain{background:var(--danger);border-color:var(--danger)}
.mval{font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}

/* ---- signal tiles ---- */
.srccards{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.srccard{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;position:relative;transition:.2s}
.srccard .sh{font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.srccard .sv{font-size:16px;font-weight:800;margin-top:4px}
.srccard .sm{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.srccard::after{content:"";position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;background:#3a475c}
.srccard.rain{border-color:rgba(239,68,68,.5);background:linear-gradient(180deg,#2a1518,var(--panel2))}
.srccard.rain::after{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.srccard.norain::after{background:var(--ok)}
.srccard.nodata{opacity:.45}

/* ---- generic card / event log ---- */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.cardhd{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:7px}
.eventlog{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto;font-size:11.5px}
.eventlog .ev{display:flex;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03);border-left:3px solid var(--accent)}
.eventlog .ev.alert{border-left-color:var(--danger)}
.eventlog .ev .et{color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.emptylog{color:var(--muted);font-size:11.5px;padding:4px 2px}

/* ---- details sections ---- */
.dash details{border:1px solid var(--line);border-radius:12px;padding:2px 12px 9px;background:rgba(255,255,255,.015)}
.dash details summary{cursor:pointer;font-size:12.5px;color:var(--txt);padding:9px 0;font-weight:600}
.dash details summary::marker{color:var(--accent)}
.dash details select,.dash details .slabel input[type=text],.dash details .slabel input[type=password]{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:8px}
.addbtn{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px;cursor:pointer;font-size:12.5px;margin-top:6px;transition:.15s}
.addbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ---- timeline (sleeker) ---- */
.mapcol .timebar{position:absolute;left:14px;right:14px;bottom:14px;top:auto;z-index:600;background:rgba(10,14,22,.9);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px)}
.rbtn{background:var(--accent);color:#0a0e17;border:none}
#prev,#next,#reload{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.timebar #scrub{accent-color:var(--accent)}
.mapcol .legend{background:rgba(10,14,22,.9);backdrop-filter:blur(8px)}

/* ---- toast ---- */
.toastwrap{position:fixed;right:18px;bottom:18px;z-index:3000;display:flex;flex-direction:column;gap:10px}
.toast{min-width:260px;max-width:340px;background:linear-gradient(135deg,#b3261e,#e0533f);color:#fff;border-radius:12px;
  padding:12px 14px;box-shadow:0 12px 30px rgba(220,40,30,.4);font-size:13px;animation:toastin .3s ease}
.toast b{display:block;font-size:13.5px;margin-bottom:2px}
.toast small{opacity:.9}
@keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* alert tint on app bar */
.shell.alerting .appbar{border-bottom-color:rgba(239,68,68,.5);box-shadow:0 1px 0 rgba(239,68,68,.3)}

.meter i.has{background:#2c3a52;border-color:#3a4a66}

.datawarn{font-size:11.5px;font-weight:700;color:#241c00;background:var(--warn);border-radius:999px;padding:4px 10px;animation:pulse 1.6s infinite}

/* ===== drone cloud-seeding sim ===== */
.dronecard .droneinfo{font-size:12px;line-height:1.55;color:var(--txt);margin-bottom:8px}
.dronecard .droneinfo .ok{color:#37d6a0;font-weight:700}
.dronecard .droneinfo .bad{color:#ff7a7a;font-weight:700}
.dronecard .droneinfo .warn{color:#f5b400;font-weight:700}
.dronecard .droneinfo b{color:var(--accent2)}
.dronebtns{display:flex;gap:6px}
.dronebtns .addbtn{margin-top:0}
.drone-icon{font-size:22px;filter:drop-shadow(0 1px 3px #000);transition:transform .1s linear}
.seed-pulse{animation:seedpulse 1s infinite}
@keyframes seedpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* ============================================================
   REFINED DARK — elegan: hairline, lapang, aksen hemat
   (di-append terakhir supaya menang cascade)
   ============================================================ */
body.dashapp{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.005em}
.dashapp ::-webkit-scrollbar{width:10px;height:10px}
.dashapp ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px;border:3px solid transparent;background-clip:content-box}
.dashapp ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:content-box}

/* micro-typography helper untuk label */
.dashapp .cardhd,.dashapp .srccard .sh,.dashapp .meterwrap,.dashapp .abstatus,.dashapp .drawerhd b{
  text-transform:uppercase;letter-spacing:.07em}

/* ---- app bar ---- */
.dashapp .appbar{height:60px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel);
  border-bottom:1px solid var(--line)}
.dashapp .appbar .logo{text-shadow:0 0 18px rgba(255,122,26,.4)}
.dashapp .appbar .bt b{font-size:13px;letter-spacing:.13em;font-weight:800}
.dashapp .appbar .bt span{font-size:10.5px;letter-spacing:.04em}
.dashapp .abstatus{font-size:11px;font-weight:700;padding:6px 16px;border-radius:999px;box-shadow:none}
.dashapp .abright{gap:16px}
.dashapp .ghost{border:1px solid var(--line);color:var(--muted);background:transparent;border-radius:10px;
  padding:7px 13px;font-size:12px;font-family:inherit;cursor:pointer;transition:.16s;letter-spacing:.02em}
.dashapp .ghost:hover{border-color:rgba(255,122,26,.5);color:var(--accent);background:rgba(255,122,26,.06)}
.dashapp .clock{font-size:12px}

/* ---- unified form controls ---- */
.dashapp select,.dashapp input[type=text],.dashapp input[type=password],
.dashapp input[type=number],.dashapp input[type=date]{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-family:inherit;font-size:13px;transition:.15s;appearance:none}
.dashapp select:hover,.dashapp input:hover{border-color:var(--line2)}
.dashapp select:focus,.dashapp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,.16)}
.dashapp input[type=range]{accent-color:var(--accent)}

/* ---- dash column rhythm ---- */
.dashapp .dash{padding:16px 16px 24px;gap:14px}
.dashapp .dashhead select{border-radius:12px;padding:11px 13px;font-weight:700}
.dashapp .hbtn{border-radius:12px;font-weight:700;box-shadow:0 4px 12px rgba(255,122,26,.2)}
.dashapp .hbtn:hover{filter:brightness(1.07)}
.dashapp .dashsub{margin-top:3px;letter-spacing:.02em;font-size:11.5px}

/* ---- hero status: tint halus di atas panel netral ---- */
.dashapp .hero{border-radius:18px;padding:18px 20px;gap:15px;border:1px solid var(--line);box-shadow:var(--shadow)}
.dashapp .hero[data-level=ok]{background:radial-gradient(130% 150% at 0% 0%,rgba(47,211,154,.13),transparent 58%),var(--panel2);border-color:rgba(47,211,154,.26)}
.dashapp .hero[data-level=warn]{background:radial-gradient(130% 150% at 0% 0%,rgba(245,180,0,.15),transparent 58%),var(--panel2);border-color:rgba(245,180,0,.3)}
.dashapp .hero[data-level=alert]{background:radial-gradient(130% 150% at 0% 0%,rgba(255,84,104,.2),transparent 58%),var(--panel2);border-color:rgba(255,84,104,.42)}
.dashapp .hero-ic{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:rgba(255,255,255,.05);font-size:26px}
.dashapp .hero .cbig{font-size:20px;letter-spacing:.005em}
.dashapp .hero .csub{color:var(--muted);margin-top:6px;font-size:12.5px}

/* ---- meter tipis tanpa kotak ---- */
.dashapp .meterwrap{gap:10px;font-size:10px;color:var(--muted)}
.dashapp .meter{gap:5px}
.dashapp .meter i{height:6px;border-radius:3px;background:rgba(255,255,255,.07);border:none}
.dashapp .meter i.on{background:var(--accent)}
.dashapp .meter i.rain{background:var(--danger)}
.dashapp .meter i.has{background:rgba(255,255,255,.17)}
.dashapp .mval{font-size:11.5px;letter-spacing:0}

/* ---- signal tiles ---- */
.dashapp .srccards{gap:10px}
.dashapp .srccard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.dashapp .srccard .sh{font-size:9.5px;color:var(--muted)}
.dashapp .srccard .sv{font-size:16px;font-weight:800;margin-top:6px;letter-spacing:.01em}
.dashapp .srccard .sm{font-size:10.5px;margin-top:4px}
.dashapp .srccard::after{top:13px;right:13px;width:7px;height:7px;box-shadow:none}
.dashapp .srccard.rain{border-color:rgba(255,84,104,.35);
  background:radial-gradient(130% 130% at 100% 0%,rgba(255,84,104,.12),transparent 55%),var(--panel2)}

/* ---- cards + event log ---- */
.dashapp .card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.dashapp .cardhd{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:10px}
.dashapp .eventlog .ev{background:rgba(255,255,255,.025);border-left:2px solid var(--accent);border-radius:9px;padding:7px 10px}
.dashapp .eventlog .ev.alert{border-left-color:var(--danger)}

/* ---- primary action ---- */
.dashapp #refreshDash{background:var(--accent);color:#0a0e16;border:none;font-weight:700;border-radius:11px;
  padding:11px;box-shadow:0 6px 16px rgba(255,122,26,.22);margin-top:2px}
.dashapp #refreshDash:hover{filter:brightness(1.06);color:#0a0e16}
.dashapp .addbtn{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:10px;transition:.16s}
.dashapp .addbtn:hover{border-color:rgba(255,122,26,.5);color:var(--accent);background:rgba(255,122,26,.06)}

/* ---- details + drawer ---- */
.dashapp .dash details,.dashapp .drawerbody details{border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.018);padding:2px 15px 13px}
.dashapp details summary{font-size:12.5px;font-weight:600;color:var(--txt);padding:12px 0;letter-spacing:.01em}
.dashapp details summary::marker{color:var(--accent)}
.dashapp .drawer{background:var(--panel);border-left:1px solid var(--line);box-shadow:-24px 0 70px rgba(0,0,0,.5)}
.dashapp .drawerhd{padding:16px 18px;border-bottom:1px solid var(--line)}
.dashapp .drawerhd b{font-size:12.5px}
.dashapp .drawerbody{padding:16px 18px 30px}
.dashapp .drawerbody details{background:transparent;border-color:var(--line)}
.dashapp .expbtns button{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;transition:.16s}
.dashapp .expbtns button:hover{border-color:rgba(255,122,26,.5);color:var(--accent)}
.dashapp #tgSave,.dashapp #tgTest{background:rgba(255,255,255,.03);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:9px;cursor:pointer;transition:.16s}
.dashapp #tgSave:hover,.dashapp #tgTest:hover{border-color:rgba(255,122,26,.5);color:var(--accent)}
.dashapp .siteitem{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:10px}

/* ---- floating: timebar, legend, modals ---- */
.dashapp .mapcol .timebar{border-radius:14px;background:rgba(11,16,25,.8);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);padding:9px 13px;box-shadow:var(--shadow)}
.dashapp .rbtn{width:36px;height:36px;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.dashapp .stamp{color:var(--accent2);font-variant-numeric:tabular-nums}
.dashapp .mapcol .legend{border-radius:14px;background:rgba(11,16,25,.8);border:1px solid var(--line);
  backdrop-filter:blur(16px);box-shadow:var(--shadow);padding:11px 13px}
.dashapp .legend .ltitle{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.dashapp .editor{border-radius:16px;border:1px solid var(--line);background:rgba(15,21,33,.98);
  backdrop-filter:blur(12px);box-shadow:0 26px 70px rgba(0,0,0,.6);padding:18px}
.dashapp .editor .ebtns .primary2{border-radius:9px}
.dashapp .histsum{border-radius:11px}
.dashapp .datawarn{border-radius:999px;font-weight:700}

/* custom caret untuk select (appearance:none menghilangkan panah bawaan) */
.dashapp select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238394ac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px;padding-right:32px}
.dashapp input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}

/* ---- toast: lebih kalem ---- */
.dashapp .toast{border-radius:14px;background:linear-gradient(135deg,#3a1620,#5a2130);
  border:1px solid rgba(255,84,104,.4);box-shadow:0 18px 44px rgba(0,0,0,.5)}