*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  overflow:hidden;background:#05080f;color:#e8f0ff;
}
#map{position:absolute;inset:0;z-index:1}
.map-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(0,40,80,.12),transparent 55%);
}

/* Vertical toolbar */
.v-toolbar{
  position:absolute;z-index:550;right:370px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;
}
.tb-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(120,160,220,.3);
  background:rgba(12,18,32,.85);backdrop-filter:blur(12px);
  color:#e2e8f0;font-size:18px;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:background .15s,transform .15s;
}
.tb-btn:hover{background:rgba(30,50,90,.95);transform:scale(1.06)}
.tb-btn[data-on="1"]{border-color:rgba(249,115,22,.7);box-shadow:0 0 12px rgba(249,115,22,.35)}
.basemap-menu{
  position:absolute;z-index:560;right:420px;top:50%;transform:translateY(-50%);
  background:rgba(12,18,32,.95);backdrop-filter:blur(14px);
  border:1px solid rgba(120,160,220,.25);border-radius:12px;
  padding:8px;display:flex;flex-direction:column;gap:4px;min-width:140px;
}
.basemap-menu.hidden{display:none}
.bm-opt{
  border:0;background:transparent;color:#cbd5e1;padding:8px 12px;
  border-radius:8px;text-align:left;cursor:pointer;font-size:12px;
}
.bm-opt:hover,.bm-opt.active{background:rgba(56,189,248,.2);color:#7dd3fc}

.glass-panel{
  background:rgba(12,18,32,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(120,160,220,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:16px;color:#e8f0ff;
}

.left-top{position:absolute;z-index:500;left:14px;top:14px;width:min(310px,92vw);padding:0;overflow:hidden}
.panel-header{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,rgba(0,80,140,.55),rgba(20,40,90,.4));
  padding:11px 14px;font-weight:700;font-size:12px;letter-spacing:.8px;
  border-bottom:1px solid rgba(100,150,220,.2);
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:#00e5ff;
  box-shadow:0 0 8px #00e5ff;animation:livePulse 1.6s infinite;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.5}}
.panel-sub{padding:4px 14px;font-size:10px;color:#8aa0c0;background:rgba(0,0,0,.15)}
.rt-filter{padding:3px 14px 2px;font-size:9px;color:#64748b;background:rgba(0,0,0,.2)}
.rt-row{display:flex;gap:12px;padding:12px 14px;align-items:center}
.rt-mag{
  width:68px;height:68px;display:grid;place-items:center;
  font-size:26px;font-weight:900;border-radius:12px;flex-shrink:0;
  background:linear-gradient(145deg,#1a3a5c,#0d2038);
  border:2px solid rgba(0,200,255,.35);color:#7ef9ff;
}
.rt-meta{font-size:13px;line-height:1.4}
.rt-ago{color:#ff6b6b;font-weight:700;margin-top:4px;font-size:12px}
.rt-coord{padding:0 14px 4px;font-size:12px;font-weight:600;color:#a8c4e8}
.rt-place{padding:0 14px 6px;font-size:12px;color:#c8d8f0}
.rt-src{padding:0 14px 12px;font-size:10px;color:#6a8098}

.left-bottom{position:absolute;z-index:500;left:14px;bottom:14px;width:min(340px,94vw);padding:12px 14px;font-size:11px}
.disc{color:#7ec8a0;line-height:1.45;margin-bottom:10px;font-size:10px}
.disc b{color:#ff8a80}
.leg-h{font-weight:700;margin-bottom:6px;border-bottom:1px solid rgba(100,140,200,.25);padding-bottom:4px;font-size:11px;color:#a0c0e8}
.leg-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;margin:5px 0;font-size:10px;color:#b0c4e0}
.leg-lab{font-weight:600;margin-right:2px;color:#8aa0c0}
.m-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;border:1px solid rgba(255,255,255,.3)}
.m1{background:#6b7280}.m2{background:#60a5fa}.m3{background:#fbbf24}
.m4{background:#f59e0b}.m5{background:#ef4444}.m6{background:#dc2626}
.m7{background:#b91c1c}.m8{background:#7c3aed}
.dbox{display:inline-block;width:11px;height:11px;margin-right:3px;vertical-align:middle;border-radius:2px;border:1px solid rgba(255,255,255,.2)}
.d50{background:#ef4444}.d100{background:#eab308}.d250{background:#86efac}
.d600{background:#16a34a}.ddeep{background:#1e3a8a}
.star-legend{font-size:14px;color:#ff1a1a;filter:drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 8px rgba(255,0,0,.8));margin-right:2px}
.fault-line-leg{display:inline-block;width:22px;height:2px;background:#ef4444;border-radius:2px;margin-right:4px;vertical-align:middle}
.brand-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(100,140,200,.2)}
.brand-box{padding:4px 9px;font-size:10px;font-weight:800;border:1px solid rgba(0,180,255,.4);color:#7dd3fc;border-radius:8px;background:rgba(0,80,140,.25)}
.brand-box.accent{border-color:rgba(168,85,247,.5);color:#d8b4fe;background:rgba(80,20,120,.3)}
.brand-clock{margin-left:auto;font-size:11px;font-weight:700;color:#94a3b8}

.right-panel{
  position:absolute;z-index:500;right:0;top:0;bottom:0;width:min(360px,100%);
  border-radius:0;border-right:0;border-top:0;border-bottom:0;
  display:flex;flex-direction:column;overflow-y:auto;font-size:12px;
  background:rgba(8,12,22,.88);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:-8px 0 40px rgba(0,0,0,.5);
}
.rp-mag-bar{display:flex;min-height:80px;background:linear-gradient(135deg,#7f1d1d,#450a0a);border-bottom:1px solid rgba(255,100,100,.25)}
.rp-mag{width:100px;display:grid;place-items:center;font-size:42px;font-weight:900;line-height:1;background:rgba(0,0,0,.35);color:#fecaca;text-shadow:0 0 20px rgba(255,80,80,.5)}
.rp-mag-info{padding:12px 14px;display:flex;flex-direction:column;justify-content:center}
.rp-mag-info b{font-size:12px;letter-spacing:.6px;color:#fecaca}
.rp-mag-info span{font-size:13px;font-weight:700;margin-top:3px;color:#fff}
.rp-mag-info small{font-size:10px;opacity:.8;margin-top:3px;color:#fca5a5}
.rp-mode{background:linear-gradient(90deg,#0c4a6e,#075985);color:#e0f2fe;text-align:center;font-weight:800;font-size:11px;padding:8px;letter-spacing:1.4px}
.rp-mini-map{height:130px;background:#0a1525;border-bottom:1px solid rgba(80,120,180,.2);position:relative}
.rp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid rgba(80,120,180,.15)}
.rp-stats>div{padding:10px 6px;text-align:center;border-right:1px solid rgba(80,120,180,.12)}
.rp-stats>div:last-child{border-right:0}
.rp-stats small{display:block;font-size:9px;color:#64748b;margin-bottom:3px}
.rp-stats b{font-size:11px;line-height:1.3;color:#e2e8f0}
.rp-desc{padding:12px 14px;line-height:1.5;font-size:12px;color:#cbd5e1;background:rgba(16,40,30,.4);border-bottom:1px solid rgba(60,120,80,.2)}
.hidden{display:none!important}
.rp-shakemap{margin:10px 12px;border:1px solid rgba(100,140,200,.25);border-radius:10px;overflow:visible;background:#000}
.rp-shakemap-h{background:rgba(15,23,42,.9);color:#94a3b8;font-size:10px;font-weight:700;padding:6px 10px}
.rp-shakemap img{display:block;width:100%;max-height:none;height:auto;object-fit:contain;background:#0a1525}
.btn-detail{display:block;width:100%;border:0;padding:10px;background:linear-gradient(90deg,#0c4a6e,#075985);color:#e0f2fe;font-weight:700;font-size:12px;cursor:pointer;margin:8px 0 0;border-radius:8px}
.btn-detail:hover{background:linear-gradient(90deg,#075985,#0ea5e9)}
.btn-detail-standalone{
  display:block;width:calc(100% - 24px);margin:0 12px 10px;border:0;padding:11px;
  background:linear-gradient(90deg,#0c4a6e,#0369a1);color:#e0f2fe;font-weight:800;font-size:12px;
  cursor:pointer;border-radius:10px;text-align:center;letter-spacing:.3px;
  box-shadow:0 2px 12px rgba(14,165,233,.25);
}
.btn-detail-standalone:hover{background:linear-gradient(90deg,#075985,#0ea5e9)}
.rp-pot{margin:0 12px 8px;padding:10px 12px;background:linear-gradient(135deg,#3f0a0a,#1a0505);border:1px solid rgba(220,50,50,.45);border-radius:10px;color:#fecaca;font-weight:600;font-size:12px;box-shadow:0 0 18px rgba(180,30,30,.25);animation:glowRed 2.4s ease-in-out infinite alternate}
@keyframes glowRed{from{box-shadow:0 0 12px rgba(180,30,30,.2)}to{box-shadow:0 0 22px rgba(220,40,40,.45)}}
.rp-instr{margin:0 12px 10px;padding:10px 12px;background:linear-gradient(135deg,#3a1f0a,#1a0e05);border:1px solid rgba(245,158,11,.4);border-radius:10px;color:#fde68a;font-size:11px;line-height:1.45}
.rp-instr b{display:block;margin-bottom:4px;color:#fbbf24;font-size:11px}
.rp-links{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.rp-links a{font-size:10px;padding:5px 10px;border-radius:8px;background:rgba(30,58,100,.5);color:#93c5fd;border:1px solid rgba(96,165,250,.3);text-decoration:none}
.rp-links a:hover{background:rgba(30,80,140,.7)}
.rp-alarm{margin:0 12px 8px;padding:10px;background:rgba(15,23,42,.5);border-radius:12px;border:1px solid rgba(80,120,180,.2)}
.btn-alarm{width:100%;border:0;background:linear-gradient(90deg,#b91c1c,#dc2626);color:#fff;font-weight:800;padding:12px;border-radius:10px;cursor:pointer;font-size:12px;box-shadow:0 4px 16px rgba(180,30,30,.4)}
.btn-alarm.on{background:linear-gradient(90deg,#15803d,#22c55e)}
.alarm-opts{display:flex;gap:14px;margin-top:8px;font-size:11px;color:#94a3b8}
.alarm-opts input{accent-color:#38bdf8}
.alarm-status{margin-top:6px;font-size:10px;color:#64748b}
.rp-push{margin:0 12px 8px;padding:10px;background:rgba(15,23,42,.5);border-radius:12px;border:1px solid rgba(80,120,180,.2)}
.btn-push{width:100%;border:0;background:linear-gradient(90deg,#1e40af,#2563eb);color:#fff;font-weight:800;padding:12px;border-radius:10px;cursor:pointer;font-size:12px}
.btn-push.on{background:linear-gradient(90deg,#15803d,#22c55e)}
.btn-push:disabled{opacity:.5;cursor:not-allowed}
.push-status{margin-top:6px;font-size:10px;color:#64748b}
.rp-live{padding:8px 14px;font-size:10px;display:flex;align-items:center;gap:7px;color:#94a3b8}
.rp-live i{width:8px;height:8px;border-radius:50%;background:#eab308;display:inline-block}
.rp-live i.ok{background:#22c55e;box-shadow:0 0 8px #22c55e}
.rp-live i.bad{background:#ef4444;box-shadow:0 0 8px #ef4444}
.rp-foot{margin-top:auto;padding:12px 14px;font-size:9px;color:#64748b;border-top:1px solid rgba(80,120,180,.15);line-height:1.5;background:rgba(0,0,0,.25)}
.rp-foot b{color:#93c5fd}

.popup-new{position:absolute;z-index:800;left:50%;top:70px;transform:translateX(-50%);background:rgba(20,8,8,.92);backdrop-filter:blur(16px);border:2px solid rgba(220,50,50,.6);border-radius:16px;padding:18px 22px;min-width:280px;max-width:92vw;box-shadow:0 12px 48px rgba(0,0,0,.6);text-align:center;animation:popIn .3s ease}
.popup-new.hidden{display:none}
.popup-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:24px;cursor:pointer;color:#94a3b8}
.popup-label{font-size:11px;font-weight:800;color:#f87171;letter-spacing:1.2px}
.popup-mag{font-size:48px;font-weight:900;color:#fecaca;line-height:1.1;text-shadow:0 0 24px rgba(255,80,80,.5)}
.popup-place{font-size:13px;font-weight:700;margin-top:4px;color:#e2e8f0}
.popup-meta{font-size:11px;color:#94a3b8;margin-top:6px}.popup-distance{font-size:12px;color:#fecaca;font-weight:800;margin-top:10px}.popup-location{font-size:10px;color:#94a3b8;margin-top:4px;line-height:1.4}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) scale(.88)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* Markers */
.eq-dot{border-radius:50%;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 1px 6px rgba(0,0,0,.5)}
.eq-star-marker{background:transparent!important;border:0!important}
.eq-star{
  display:block;font-size:32px;line-height:36px;text-align:center;color:#ff1a1a;
  text-shadow:0 0 6px #ff0000,0 0 14px rgba(255,0,0,.9),0 0 28px rgba(255,40,40,.6),0 1px 4px rgba(0,0,0,.9);
  animation:starPulse 1.1s ease-in-out infinite;
  transform-origin:center center;
}
@keyframes starPulse{
  0%,100%{transform:scale(1);opacity:1;filter:brightness(1)}
  50%{transform:scale(1.45);opacity:.85;filter:brightness(1.5) drop-shadow(0 0 12px #ff2222)}
}
/* Expanding rings like BMKG/WRS — needs SVG renderer */
@keyframes ringExpand{
  0%{opacity:.9;stroke-opacity:.9}
  70%{opacity:.35;stroke-opacity:.4}
  100%{opacity:0;stroke-opacity:0}
}
.eq-radius-ring{
  animation:ringExpand 2.8s ease-out infinite;
  fill-opacity:0.08!important;
}
.leaflet-interactive.eq-radius-ring,
path.eq-radius-ring{
  animation:ringExpand 2.8s ease-out infinite;
}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay.hidden{display:none}
.modal-card{width:min(520px,96vw);max-height:90vh;overflow-y:auto;padding:0;position:relative;animation:modalIn .25s ease;background:#0a1525}
@keyframes modalIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;right:12px;top:10px;z-index:2;border:0;background:rgba(0,0,0,.4);color:#e2e8f0;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}
.modal-header{display:flex;gap:14px;padding:18px 18px 14px}
.modal-header.bmkg-style{background:linear-gradient(90deg,#b91c1c 0%,#b91c1c 28%,#eab308 28%,#eab308 100%);color:#0f172a;align-items:center}
.modal-header.bmkg-style .modal-mag-badge{background:#7f1d1d;color:#fecaca;border:2px solid rgba(254,202,202,.4);width:90px;height:90px;font-size:36px;border-radius:0;display:grid;place-items:center;font-weight:900;flex-shrink:0}
.modal-header.bmkg-style .modal-label{color:#7f1d1d;font-size:14px;font-weight:900}
.modal-header.bmkg-style .modal-time{color:#1e293b;font-size:12px;font-weight:700;margin-top:4px}
.modal-header.bmkg-style .modal-sent{color:#b45309;font-size:11px;margin-top:2px}
.modal-bmkg-logo{margin-left:auto;padding:6px 10px;background:#fff;border-radius:50%;font-size:10px;font-weight:900;color:#0c4a6e;border:2px solid #0c4a6e;width:48px;height:48px;display:grid;place-items:center;flex-shrink:0}
.modal-body-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:12px 14px}
@media(max-width:560px){.modal-body-grid{grid-template-columns:1fr}}
.modal-shakemap{overflow:visible}
.modal-shakemap img{width:100%;max-height:none;height:auto;object-fit:contain;border-radius:10px;border:1px solid rgba(100,140,200,.25);background:#0a1525}
.mmi-h{font-size:11px;font-weight:700;color:#94a3b8;margin-bottom:8px}
.mmi-list{display:flex;flex-direction:column;gap:6px}
.mmi-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(15,23,42,.6);border:1px solid rgba(80,120,180,.2);font-size:12px}
.mmi-badge{min-width:42px;text-align:center;padding:3px 6px;border-radius:6px;font-weight:800;font-size:11px;color:#0f172a;background:#fbbf24}
.param-row{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:4px 0;background:rgba(254,240,138,.15);border:1px solid rgba(234,179,8,.3);border-radius:8px;font-size:12px;color:#e2e8f0}
.param-icon{color:#fbbf24}
.modal-tsunami{margin:10px 0;padding:12px 14px;background:linear-gradient(135deg,#450a0a,#1a0505);border:1px solid rgba(220,50,50,.5);border-radius:12px;color:#fecaca;font-weight:600;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 0 20px rgba(180,30,30,.3);animation:glowRed 2.2s ease-in-out infinite alternate}
.modal-tsunami.safe{background:linear-gradient(135deg,#052e16,#021a0c);border-color:rgba(34,197,94,.4);color:#bbf7d0;box-shadow:0 0 16px rgba(30,140,60,.2);animation:none}
.ts-icon{font-size:20px}
.modal-instr{margin:0 0 10px;padding:12px 14px;background:linear-gradient(135deg,#3a1f0a,#1a0e05);border:1px solid rgba(245,158,11,.45);border-radius:12px;color:#fde68a;font-size:12px;line-height:1.5}
.modal-instr b{display:block;margin-bottom:4px;color:#fbbf24}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 16px;border-top:1px solid rgba(80,120,180,.15);align-items:center}
.btn-save,.btn-share{border:0;padding:9px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;color:#fff}
.btn-save{background:linear-gradient(90deg,#15803d,#22c55e)}
.btn-share{background:linear-gradient(90deg,#1d4ed8,#3b82f6)}
.modal-actions a{margin-left:auto;color:#38bdf8;font-size:12px;text-decoration:none}

/* History modal */
.hist-card{width:min(720px,96vw);max-height:88vh}
.hist-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(80,120,180,.2)}
.hist-header h2{margin:0;font-size:16px;color:#e2e8f0}
.hist-header span{font-size:12px;color:#94a3b8}
.hist-body{display:grid;grid-template-columns:1fr 1.3fr;gap:0;min-height:320px}
@media(max-width:640px){.hist-body{grid-template-columns:1fr}}
.hist-map{height:320px;background:#0a1525}
.hist-table-wrap{overflow-y:auto;max-height:320px}
.hist-table{width:100%;border-collapse:collapse;font-size:11px}
.hist-table th{position:sticky;top:0;background:rgba(15,23,42,.95);color:#94a3b8;text-align:left;padding:8px 10px;font-weight:600}
.hist-table td{padding:7px 10px;border-bottom:1px solid rgba(80,120,180,.12);color:#cbd5e1}
.hist-table tr:hover td{background:rgba(56,189,248,.08);cursor:pointer}
.hist-mag{font-weight:800;color:#fca5a5}

.leaflet-control-zoom{margin-top:12px!important;margin-left:12px!important}
.leaflet-control-zoom a{background:rgba(12,18,32,.85)!important;color:#e2e8f0!important;border-color:rgba(100,140,200,.3)!important}
.leaflet-control-attribution{font-size:9px!important;background:rgba(8,12,22,.7)!important;color:#64748b!important}
.leaflet-popup-content-wrapper{background:rgba(12,18,32,.92)!important;color:#e2e8f0!important;border-radius:12px!important;border:1px solid rgba(100,140,200,.25)}
.leaflet-popup-tip{background:rgba(12,18,32,.92)!important}

/* Loading overlay */
.loading-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(5,8,15,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  transition:opacity .2s;
}
.loading-overlay.hidden{display:none!important;opacity:0;pointer-events:none}
.loading-spinner{
  width:48px;height:48px;border:4px solid rgba(56,189,248,.2);
  border-top-color:#38bdf8;border-radius:50%;animation:spin .7s linear infinite;
}
.loading-text{font-size:13px;font-weight:700;color:#7dd3fc;letter-spacing:.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* External link loading hint */
a.ext-loading{opacity:.6;pointer-events:none;position:relative}
a.ext-loading::after{content:"…";margin-left:4px}

@media(max-width:900px){
  .right-panel{width:100%;height:48vh;top:auto;bottom:0;border-radius:16px 16px 0 0}
  .left-top{width:min(280px,90vw)}
  .left-bottom{display:none}
  #map{bottom:48vh}
  .v-toolbar{right:10px;top:auto;bottom:52vh;transform:none}
  .basemap-menu{right:58px;top:auto;bottom:52vh;transform:none}
}
@media(max-width:560px){
  .left-top{left:8px;top:8px;width:min(260px,92vw)}
  .rt-mag{width:56px;height:56px;font-size:22px}
}

/* V2 performance/monitoring additions */
.map-stats{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:700;display:flex;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);}
.map-stats .stat-btn{
  min-width:70px;text-align:center;padding:6px 8px;border-radius:10px;background:rgba(8,15,27,.78);
  border:1px solid transparent;color:inherit;cursor:pointer;font:inherit;
  transition:background .15s,border-color .15s,transform .12s;
}
.map-stats .stat-btn:hover{background:rgba(30,50,90,.95);border-color:rgba(56,189,248,.4);transform:translateY(-1px)}
.map-stats .stat-btn.stat-tsunami:hover{border-color:rgba(239,68,68,.5);background:rgba(60,15,15,.9)}
.map-stats b{display:block;font-size:15px}.map-stats span{display:block;font-size:8px;opacity:.65;letter-spacing:.08em;margin-top:2px}
.filter-card{max-width:560px}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 0}.filter-grid label{font-size:11px;opacity:.8}.filter-grid select{display:block;width:100%;margin-top:6px;padding:10px;border-radius:10px;background:#0b1322;color:#fff;border:1px solid rgba(255,255,255,.12)}.filter-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
@media(max-width:700px){.map-stats{bottom:10px;max-width:calc(100vw - 20px);width:max-content}.map-stats .stat-btn{min-width:58px}.map-stats span{font-size:7px}.filter-grid{grid-template-columns:1fr}.filter-card{width:calc(100vw - 24px)}}

.rp-location{padding:8px 12px 4px}
.btn-location{
  width:100%;border:0;padding:11px 14px;border-radius:12px;font-weight:800;font-size:12px;cursor:pointer;
  background:linear-gradient(90deg,#0e7490,#0891b2);color:#fff;letter-spacing:.3px;
}
.btn-location.on{background:linear-gradient(90deg,#15803d,#22c55e)}
.loc-status{font-size:10px;color:#94a3b8;margin-top:6px;line-height:1.35}
.hist-tsunami-banner{
  display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:0 12px 8px;
  background:linear-gradient(135deg,rgba(127,29,29,.45),rgba(20,8,8,.6));
  border:1px solid rgba(239,68,68,.4);border-radius:12px;font-size:11px;color:#fecaca;line-height:1.4;
}
.hist-tsunami-banner.hidden{display:none}
.hist-tsunami-banner .htb-icon{font-size:22px;flex-shrink:0}
.hist-tsunami-banner b{display:block;margin-bottom:2px;color:#fff}
.hist-table .ts-badge{
  display:inline-block;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:800;margin-left:4px;
  background:#dc2626;color:#fff;
}
.hist-table .ts-pd{font-size:10px;color:#fca5a5;font-weight:700}

/* ===== Tsunami Alert Modal ===== */
.tsunami-overlay{
  position:fixed;inset:0;z-index:950;background:rgba(20,0,0,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.tsunami-overlay.hidden{display:none}
.tsunami-card{
  width:min(560px,96vw);max-height:92vh;overflow-y:auto;border-radius:18px;
  background:linear-gradient(160deg,#1a0505 0%,#0a1525 55%,#05101a 100%);
  border:2px solid rgba(239,68,68,.55);box-shadow:0 0 40px rgba(220,30,30,.35),0 16px 48px rgba(0,0,0,.6);
  animation:modalIn .28s ease;position:relative;
}
.tsunami-header{
  background:linear-gradient(90deg,#7f1d1d,#b91c1c 40%,#991b1b);
  padding:16px 18px;display:flex;align-items:center;gap:14px;color:#fff;
}
.tsunami-wave-icon{
  width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.25);
  display:grid;place-items:center;font-size:28px;flex-shrink:0;
  animation:waveBob 1.4s ease-in-out infinite;
}
@keyframes waveBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.tsunami-header h2{margin:0;font-size:18px;font-weight:900;letter-spacing:.5px}
.tsunami-header .ts-sub{font-size:12px;opacity:.9;margin-top:2px}
.tsunami-body{padding:14px 16px}
.tsunami-mag-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tsunami-mag{
  width:72px;height:72px;background:#7f1d1d;border:2px solid #fecaca;border-radius:12px;
  display:grid;place-items:center;font-size:28px;font-weight:900;color:#fecaca;flex-shrink:0;
}
.tsunami-meta{font-size:13px;line-height:1.5;color:#e2e8f0}
.tsunami-meta b{color:#fca5a5}
.tsunami-status-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.tsunami-status{
  text-align:center;padding:10px 6px;border-radius:10px;font-weight:800;font-size:12px;
  border:1px solid transparent;
}
.tsunami-status.awas{background:rgba(127,29,29,.5);border-color:rgba(239,68,68,.6);color:#fecaca}
.tsunami-status.siaga{background:rgba(154,52,18,.45);border-color:rgba(249,115,22,.55);color:#fed7aa}
.tsunami-status.waspada{background:rgba(113,63,18,.45);border-color:rgba(234,179,8,.5);color:#fde68a}
.tsunami-status span{display:block;font-size:10px;font-weight:600;opacity:.85;margin-top:2px}
.tsunami-areas{margin:10px 0}
.tsunami-areas h4{margin:0 0 8px;font-size:12px;color:#fca5a5}
.tsunami-area-list{display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto}
.tsunami-area-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  background:rgba(15,23,42,.55);border:1px solid rgba(239,68,68,.25);font-size:12px;color:#e2e8f0;
}
.tsunami-area-item .badge{
  min-width:52px;text-align:center;padding:3px 6px;border-radius:6px;font-weight:800;font-size:10px;
}
.badge-awas{background:#dc2626;color:#fff}
.badge-siaga{background:#ea580c;color:#fff}
.badge-waspada{background:#ca8a04;color:#fff}
.tsunami-maps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
@media(max-width:480px){.tsunami-maps{grid-template-columns:1fr}.tsunami-status-grid{grid-template-columns:1fr}}
.tsunami-map-box{
  background:rgba(10,20,40,.6);border:1px solid rgba(100,140,200,.25);border-radius:10px;overflow:hidden;
}
.tsunami-map-box .mmi-h{padding:8px 10px 4px;margin:0}
.tsunami-map-box img{width:100%;height:auto;display:block;max-height:180px;object-fit:contain;background:#0a1525}
.tsunami-instr{
  margin:10px 0;padding:12px 14px;background:linear-gradient(135deg,#3a1f0a,#1a0e05);
  border:1px solid rgba(245,158,11,.45);border-radius:12px;color:#fde68a;font-size:12px;line-height:1.55;
}
.tsunami-instr b{display:block;margin-bottom:4px;color:#fbbf24}
.tsunami-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 16px;border-top:1px solid rgba(239,68,68,.2)}
.tsunami-actions .btn-save{background:linear-gradient(90deg,#15803d,#22c55e)}
.tsunami-actions .btn-close-ts{
  border:0;padding:9px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;
  background:rgba(80,80,100,.5);color:#e2e8f0;
}
.tsunami-guide-table{margin:10px 0 4px;display:flex;flex-direction:column;gap:6px}
.tg-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:11px;line-height:1.4;color:#fff}
.tg-lvl{font-weight:900;min-width:64px;flex-shrink:0;letter-spacing:.3px}
.tg-awas{background:#b91c1c}.tg-siaga{background:#c2410c}.tg-waspada{background:#a16207;color:#fffbeb}

/* Watermark for saved image */
.save-watermark{
  position:absolute;bottom:0;left:0;right:0;padding:8px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#94a3b8;font-size:10px;font-weight:600;text-align:center;pointer-events:none;
  z-index:5;
}

/* Status berakhir → tema hijau */
.tsunami-card.tsunami-ended{
  border-color:rgba(34,197,94,.55)!important;
  box-shadow:0 0 36px rgba(34,197,94,.25),0 16px 48px rgba(0,0,0,.5)!important;
}
.tsunami-card.tsunami-ended .tsunami-header{
  background:linear-gradient(90deg,#14532d,#15803d 45%,#166534)!important;
}
.tsunami-card.tsunami-ended .tsunami-mag{
  background:#14532d;border-color:#86efac;color:#bbf7d0;
}
.tsunami-card.tsunami-ended .ts-sub{color:#bbf7d0;font-weight:700}

/* Quick controls compact */
.rp-quick{display:flex;gap:8px;padding:8px 12px 4px}
.qbtn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid rgba(100,140,200,.3);background:rgba(12,18,32,.85);
  color:#e2e8f0;border-radius:12px;padding:8px 4px;cursor:pointer;font-size:16px;
}
.qbtn span{font-size:10px;font-weight:700;letter-spacing:.2px}
.qbtn.on{border-color:rgba(34,197,94,.6);background:rgba(20,80,40,.35);box-shadow:0 0 12px rgba(34,197,94,.25)}
.qbtn:hover{background:rgba(30,50,90,.95)}
.rp-quick-opts{display:flex;gap:12px;padding:2px 14px;font-size:11px;color:#94a3b8}
.rp-quick-status{font-size:10px;color:#64748b;padding:1px 14px;line-height:1.35}

/* Realtime distance */
.rt-dist{padding:0 14px 6px;font-size:11px;color:#94a3b8}
.rt-dist.has-loc{color:#7dd3fc;font-weight:600}

/* User location pin */
.user-loc-marker{background:transparent!important;border:0!important}
.user-pin{position:relative;width:28px;height:28px}
.user-pin-dot{
  position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:#38bdf8;border:2px solid #fff;border-radius:50%;
  box-shadow:0 0 8px #38bdf8,0 2px 6px rgba(0,0,0,.5);z-index:2;
}
.user-pin-ring{
  position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:2px solid rgba(56,189,248,.7);border-radius:50%;
  animation:userRing 1.6s ease-out infinite;
}
@keyframes userRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.user-leg-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#38bdf8;border:2px solid #fff;margin-right:4px;vertical-align:middle;
  box-shadow:0 0 6px #38bdf8;
}

/* Tsunami zone table */
.tsunami-zone-wrap{margin:8px 0 4px}
.tsunami-zone-table{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.tz-head,.tz-row{
  display:grid;grid-template-columns:64px 1fr 72px 52px;gap:6px;align-items:center;
  font-size:11px;padding:6px 8px;border-radius:8px;
}
.tz-head{color:#94a3b8;font-weight:700;font-size:10px;opacity:.8}
.tz-row{background:rgba(15,23,42,.55);border:1px solid rgba(80,120,180,.2);color:#e2e8f0}
.tz-badge{font-weight:900;font-size:10px;text-align:center;padding:3px 4px;border-radius:5px}
.tz-awas .tz-badge{background:#dc2626;color:#fff}
.tz-siaga .tz-badge{background:#ea580c;color:#fff}
.tz-waspada .tz-badge{background:#ca8a04;color:#fff}
.tz-name{font-weight:600;line-height:1.25}
.tz-meta,.tz-h{font-size:10px;color:#94a3b8;text-align:right}
.tz-empty{font-size:11px;color:#94a3b8;padding:10px;line-height:1.4;background:rgba(15,23,42,.4);border-radius:8px}

/* ========== V7 Mobile-first: nyaman HP & responsif ========== */
button,a,.stat-btn,.tb-btn,.qbtn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
html{height:100%;height:100dvh}
body{height:100%;height:100dvh;overscroll-behavior:none}

.rp-sheet-handle{
  display:none;width:100%;border:0;background:transparent;padding:10px 0 4px;cursor:pointer;
}
.rp-handle-bar{
  display:block;width:40px;height:4px;border-radius:4px;margin:0 auto;
  background:rgba(148,163,184,.55);
}

/* Tablet / HP landscape & portrait */
@media (max-width:900px){
  .right-panel{
    width:100%!important;left:0!important;right:0!important;
    top:auto!important;bottom:0!important;
    height:auto!important;
    max-height:46dvh;
    border-radius:18px 18px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom,8px);
    transition:max-height .28s ease,transform .28s ease;
    z-index:650;
  }
  .right-panel.sheet-collapsed{
    max-height:72px;
    overflow:hidden;
  }
  .right-panel.sheet-collapsed .rp-mode,
  .right-panel.sheet-collapsed .rp-mini-map,
  .right-panel.sheet-collapsed .rp-stats,
  .right-panel.sheet-collapsed .rp-desc,
  .right-panel.sheet-collapsed .rp-shakemap,
  .right-panel.sheet-collapsed .rp-pot,
  .right-panel.sheet-collapsed .rp-instr,
  .right-panel.sheet-collapsed .rp-links,
  .right-panel.sheet-collapsed .rp-quick,
  .right-panel.sheet-collapsed .rp-quick-opts,
  .right-panel.sheet-collapsed .rp-quick-status,
  .right-panel.sheet-collapsed .rp-live,
  .right-panel.sheet-collapsed .rp-foot{display:none!important}
  .rp-sheet-handle{display:block}
  #map{
    bottom:0!important;
    height:100%!important;
  }
  body.sheet-open #map{/* map full; sheet overlays */}
  .left-top{
    left:8px;top:max(8px,env(safe-area-inset-top));
    width:min(268px,calc(100vw - 64px));
    max-height:min(42vh,320px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    font-size:12px;
  }
  .left-bottom{display:none!important}
  .v-toolbar{
    right:8px;left:auto;
    top:max(10px,env(safe-area-inset-top));
    bottom:auto;transform:none;
    flex-direction:column;gap:5px;
  }
  .tb-btn{width:44px;height:44px;font-size:17px;border-radius:14px}
  .basemap-menu{
    right:56px;top:max(10px,env(safe-area-inset-top));
    bottom:auto;transform:none;max-height:50vh;overflow-y:auto;
  }
  .map-stats{
    bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
    left:50%;transform:translateX(-50%);
    padding:5px;gap:4px;
    max-width:calc(100vw - 16px);
  }
  body:not(.sheet-collapsed) .map-stats{
    bottom:calc(46dvh + 6px)!important;
  }
  .map-stats .stat-btn{
    min-width:56px;min-height:48px;padding:8px 6px;
  }
  .map-stats b{font-size:16px}
  .map-stats span{font-size:8px;letter-spacing:.06em}
  .popup-new{
    top:max(56px,env(safe-area-inset-top));
    max-width:calc(100vw - 24px);
    padding:14px 16px;
  }
  .modal-card,.tsunami-card{
    width:100%!important;max-width:100%!important;
    max-height:100dvh!important;
    border-radius:16px 16px 0 0!important;
    margin:0!important;
  }
  .modal-overlay,.tsunami-overlay{
    align-items:flex-end!important;
    padding:0!important;
  }
  .rt-row{padding:8px 10px;gap:8px}
  .rt-mag{width:52px;height:52px;font-size:20px}
  .rt-dist{font-size:10px;padding:0 10px 6px}
  .rp-mag-bar{padding:4px 12px 10px}
  .qbtn{min-height:48px;padding:10px 4px}
  .rp-quick{gap:6px;padding:6px 10px}
}

@media (max-width:560px){
  .left-top{
    width:calc(100vw - 62px);
    max-height:38vh;
  }
  .panel-sub,.rt-filter{font-size:10px}
  .rt-place{font-size:12px;padding:0 10px 2px}
  .rt-src{font-size:10px;padding:0 10px 8px}
  .map-stats .stat-btn{min-width:52px;padding:6px 4px}
  .map-stats b{font-size:14px}
  .v-toolbar{gap:4px}
  .tb-btn{width:42px;height:42px}
}

/* Landscape HP: sheet lebih rendah, peta lebih luas */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .right-panel{max-height:38dvh}
  .right-panel.sheet-collapsed{max-height:56px}
  .left-top{max-height:70vh;width:min(240px,40vw)}
  body:not(.sheet-collapsed) .map-stats{bottom:calc(38dvh + 4px)!important}
}

/* Smooth sheet + prevent scroll bleed */
.right-panel{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* Badge pemutakhiran parameter di panel realtime */
.rt-update{
  margin:0 10px 6px;padding:6px 8px;border-radius:8px;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);
  font-size:10px;line-height:1.35;color:#bae6fd;
  animation:rtUpIn .35s ease;
}
.rt-update.rev-big{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);color:#fde68a;
}
.rt-upd-tag{
  display:inline-block;font-weight:900;font-size:9px;letter-spacing:.04em;
  padding:2px 5px;border-radius:4px;margin-right:4px;
  background:rgba(14,165,233,.35);color:#e0f2fe;
}
.rt-update.rev-big .rt-upd-tag{background:rgba(234,88,12,.5);color:#fff}
.rt-upd-txt{font-weight:600}
@keyframes rtUpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}