:root{
  --void:#060a12;
  --panel:#0b1220;
  --panel-raised:#101a2c;
  --line:#1e2a42;
  --line-soft:#131f34;
  --ink:#e8eef7;
  --ink-dim:#93a5c2;
  --ink-faint:#54637f;
  --accent:#2ad9f0;
  --accent-dim:rgba(42,217,240,.14);
  --accent-glow:rgba(42,217,240,.5);
  --good:#33d17f;
  --good-dim:rgba(51,209,127,.14);
  --watch:#f2c94c;
  --watch-dim:rgba(242,201,76,.14);
  --siaga:#f2994a;
  --siaga-dim:rgba(242,153,74,.14);
  --awas:#f0475a;
  --awas-dim:rgba(240,71,90,.16);
  --mag-1:#8fe9f2;
  --mag-2:#3fc7dd;
  --mag-3:#1f93a8;
  --font-display:"Segoe UI Semibold","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,"Liberation Mono",monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:
    radial-gradient(ellipse 1200px 700px at 18% -10%, rgba(42,217,240,.07), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 10%, rgba(240,71,90,.05), transparent 55%),
    var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.dash{
  max-width:1400px;
  margin:0 auto;
  padding:22px 22px 60px;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  background-position:-1px -1px;
}

a{color:inherit;}

/* ---------- HUD top bar ---------- */
.hud-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
  background:linear-gradient(180deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{
  width:38px;height:38px;flex:none;
  border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.brand-mark svg{width:20px;height:20px;stroke:var(--accent);}
.brand-mark::after{
  content:"";position:absolute;inset:-5px;border:1px solid rgba(42,217,240,.25);
}
.brand-text h1{
  margin:0;font-family:var(--font-display);font-size:16px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);
}
.brand-text p{
  margin:2px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-faint);text-transform:uppercase;
}

/* ---------- KPI strip ---------- */
.kpi-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:1px;
}
.kpi{
  position:relative;
  background:var(--panel);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;
}
.kpi-icon{
  position:absolute;top:14px;right:14px;width:30px;height:30px;flex:none;opacity:.85;
}
.kpi .lbl{max-width:calc(100% - 40px);font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;color:var(--ink-faint);text-transform:uppercase;}
.kpi .row{display:flex;align-items:baseline;gap:8px;}
.kpi .num{font-family:var(--font-mono);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;}
.kpi .unit{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);}
.kpi .tag{font-size:10px;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;}
.kpi .tag.good{color:var(--good);}
.kpi .tag.siaga{color:var(--siaga);}
.kpi .tag.watch{color:var(--watch);}

/* ---------- panel frame w/ corner brackets ---------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  padding:0;
}
.panel::before,.panel::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}

.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.panel-head .ph-left{display:flex;align-items:center;gap:10px;}
.panel-head svg{width:16px;height:16px;stroke:var(--accent);flex:none;}
.panel-head h2{
  margin:0;font-family:var(--font-display);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}
.panel-head .ph-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);letter-spacing:.04em;}
.panel-body{padding:16px;}

/* ---------- primary grid ---------- */
.grid-primary{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-top:none;
}
.grid-primary .panel{border:none;min-width:0;}
.grid-primary .panel::before,.grid-primary .panel::after{display:none;}

.data-readout{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:16px;}
.data-readout .field .k{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;}
.data-readout .field .v{font-family:var(--font-mono);font-size:14px;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums;}
.data-readout .field .v.accent{color:var(--accent);}

.storm-name{
  text-align:center;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-top:10px;
}
.storm-cat{
  text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--watch);letter-spacing:.08em;
  text-transform:uppercase;margin-top:2px;
}

.storm-narrative{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.storm-narrative .sn-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:6px;
}
.storm-narrative .sn-text{
  margin:0;font-size:12px;line-height:1.65;color:var(--ink-dim);
}

.cyclone-empty-msg{display:flex;align-items:flex-start;gap:12px;padding:4px;}
.cyclone-empty-msg .ce-icon{font-size:20px;line-height:1;flex:none;}
.cyclone-empty-msg .ce-text{margin:0;font-size:12px;line-height:1.65;color:var(--ink-dim);}

/* Embeds (Windy radar / Looker map) */
.embed-frame{
  position:relative;width:100%;height:220px;border:1px solid var(--line-soft);background:var(--panel-raised);
  overflow:hidden;
}
.embed-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(1.05);
}
/* Box is pinned to 220px to stay flush with the Windy embed-frame above it. The
   report's native ratio (~3.538:1) doesn't match that box, so filling it completely
   means letting the iframe stretch to the box's actual proportions rather than
   preserving the report's aspect ratio. */
.report-embed{
  position:relative;width:100%;height:220px;overflow:hidden;border:1px solid var(--line-soft);background:var(--panel-raised);
}
.iframe-container{
  position:relative;overflow:hidden;width:100%;height:100%;
}
.iframe-container iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.embed-caption{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;
  font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);letter-spacing:.04em;
}
.embed-caption .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}

/* Earthquake plot */
.quake-mark{
  position:absolute;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 currentColor;
  animation:quake-pulse 2.4s ease-out infinite;
}
.quake-mark::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;background:currentColor;
}
@keyframes quake-pulse{
  0%{box-shadow:0 0 0 0 currentColor,0 0 0 0 rgba(0,0,0,0);opacity:1;}
  70%{box-shadow:0 0 0 10px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

.quake-list{
  margin-top:14px;display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  max-height:420px;overflow-y:auto;
}
.quake-list::-webkit-scrollbar{width:6px;}
.quake-list::-webkit-scrollbar-track{background:var(--panel);}
.quake-list::-webkit-scrollbar-thumb{background:var(--line);}
.quake-row{
  background:var(--panel);display:grid;grid-template-columns:44px 1fr auto;gap:12px;padding:10px 4px;align-items:start;
}
.mag-badge{
  width:40px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:#04141a;font-weight:600;
}
.mag-badge.mag-awas{background:var(--awas);}
.mag-badge.mag-siaga{background:var(--siaga);}
.mag-badge.mag-watch{background:var(--watch);}
.quake-row .qr-loc{font-size:12px;color:var(--ink);line-height:1.5;}
.quake-row .qr-loc b{font-weight:600;}
.quake-row .qr-felt{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-top:3px;}
.quake-row .qr-time{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);text-align:right;white-space:nowrap;}

/* Volcano ladder */
.alert-ladder{
  display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  max-height:480px;overflow-y:auto;
}
.alert-ladder::-webkit-scrollbar{width:6px;}
.alert-ladder::-webkit-scrollbar-track{background:var(--panel);}
.alert-ladder::-webkit-scrollbar-thumb{background:var(--line);}
.alert-tier{background:var(--panel);padding:12px 14px;}
.alert-tier .tier-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.alert-tier .tier-name{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.alert-tier .tier-count{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);}
.tier-siaga .tier-name{color:var(--siaga);}
.tier-awas .tier-name{color:var(--awas);}
.tier-erupsi .tier-name{color:var(--awas);}
.volc-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;}
.volc-item svg{width:14px;height:14px;flex:none;margin-top:1px;}
.volc-item .vi-name{font-size:12px;color:var(--ink);}
.volc-item .vi-name span{display:block;font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-top:1px;}
.nil-row{font-family:var(--font-mono);font-size:11px;color:var(--good);display:flex;align-items:center;gap:6px;padding:5px 0;}

/* ---------- secondary grid ---------- */
.grid-secondary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:none;
}
.grid-secondary .panel{border:none;}
.grid-secondary .panel::before,.grid-secondary .panel::after{display:none;}
.hazard-card .panel-body{min-height:340px;max-height:340px;display:flex;flex-direction:column;padding:0;}
.hazard-card .panel-body > .embed-caption{padding:0 16px;}

/* Scrollable hazard list (dasarian bulletins) */
.scroll-list-wrap{flex:1;overflow-y:auto;background:var(--line-soft);}
.scroll-list-wrap::-webkit-scrollbar{width:6px;}
.scroll-list-wrap::-webkit-scrollbar-track{background:var(--panel);}
.scroll-list-wrap::-webkit-scrollbar-thumb{background:var(--line);}
.scroll-list{display:flex;flex-direction:column;gap:1px;}
.scroll-row{
  background:var(--panel);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.scroll-row .sr-loc{font-size:11px;color:var(--ink);line-height:1.4;}
.scroll-row .sr-loc b{font-weight:600;display:block;}
.scroll-row .sr-loc span{display:block;font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);margin-top:2px;}
.sr-badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;white-space:nowrap;flex:none;border:1px solid transparent;
}
.sr-badge.watch{color:var(--watch);border-color:var(--watch);background:var(--watch-dim);}
.sr-badge.siaga{color:var(--siaga);border-color:var(--siaga);background:var(--siaga-dim);}
.sr-badge.awas{color:var(--awas);border-color:var(--awas);background:var(--awas-dim);}
.scroll-list-note{
  padding:8px 16px;font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);border-top:1px solid var(--line-soft);
}

.wave-list{display:flex;flex-direction:column;gap:9px;padding:16px;overflow-y:auto;flex:1;}
.wave-row{display:flex;flex-direction:column;gap:4px;}
.wave-row .wr-top{display:flex;align-items:center;justify-content:space-between;}
.wave-row .wr-loc{font-size:11px;color:var(--ink);line-height:1.35;}
.wave-row .wr-val{font-family:var(--font-mono);font-size:11px;color:var(--siaga);font-variant-numeric:tabular-nums;}
.wave-bar{height:3px;background:var(--line-soft);position:relative;}
.wave-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--siaga);}
.pltu-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:2px;}
.pltu-row .pr-lbl{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.pltu-chip{
  font-family:var(--font-mono);font-size:9px;color:var(--ink-dim);border:1px solid var(--line);
  padding:2px 7px;background:var(--panel-raised);
}
.pltu-chip.none{color:var(--ink-faint);border-style:dashed;font-style:italic;}

/* Empty-state (banjir dasarian: belum ada sumber data) */
.empty-note{
  flex:1;display:flex;align-items:center;justify-content:center;padding:16px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);text-align:center;line-height:1.6;
}

/* ---------- footer ---------- */
.hud-footer{
  margin-top:1px;padding:12px 18px;border:1px solid var(--line);border-top:none;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);letter-spacing:.04em;background:var(--panel);
}

@media (max-width:1080px){
  .grid-primary{grid-template-columns:1fr;}
  .grid-secondary{grid-template-columns:repeat(2,1fr);}
  .kpi-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-secondary{grid-template-columns:1fr;}
  .kpi-strip{grid-template-columns:1fr;}
  .data-readout{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .quake-mark{animation:none;}
}