*{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)}
  /* legend is displayed using the mobile override below */
  #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:block!important;
    position:fixed!important;
    left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;max-height:24vh;overflow:auto;
    padding:8px 10px!important;font-size:10px!important;z-index:650!important;
    border-radius:12px;background:rgba(8,15,28,.88);backdrop-filter:blur(12px);
  }
  .left-bottom .legend-row,.left-bottom .legend-item{gap:5px!important;margin:2px 0!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}}


/* Final mobile safety override: keep the seismic legend accessible above the bottom sheet. */
@media (max-width: 900px) {
  .left-bottom { display:block !important; position:fixed !important; left:8px !important; right:8px !important; bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important; width:auto !important; max-width:none !important; max-height:22vh !important; overflow:auto !important; z-index:650 !important; padding:8px 10px !important; font-size:10px !important; background:rgba(8,15,28,.90) !important; backdrop-filter:blur(12px); border-radius:12px !important; }
}


/* WRS GEMPA v3 fix: show map legend on mobile above bottom navigation */
@media (max-width: 900px) {
  .left-bottom {
    display: block !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 20vh !important;
    overflow: auto !important;
    z-index: 650 !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
    background: rgba(8, 15, 28, .92) !important;
    backdrop-filter: blur(12px);
    border-radius: 12px !important;
  }
}

/* WRS GEMPA mobile layout fix: separate the legend from the map stats and bottom sheet. */
@media (max-width: 900px) {
  .left-bottom {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 18vh !important;
  }

  body:not(.sheet-collapsed) .left-bottom {
    bottom: calc(46dvh + 58px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 16vh !important;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body:not(.sheet-collapsed) .left-bottom {
    bottom: calc(38dvh + 48px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 14vh !important;
  }
}


/* WRS GEMPA mobile-first refresh: safer spacing, clearer hierarchy, no floating legend overlap. */
:root { color-scheme: dark; --panel-border: rgba(133,166,215,.22); }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #67e8f9; outline-offset:2px; }
.glass-panel { border-color:var(--panel-border); }
.panel-header { font-size:13px; letter-spacing:.06em; }
.tb-btn { display:grid; place-items:center; font-size:19px; }
.qicon { display:grid; place-items:center; width:25px; height:25px; font-size:21px; line-height:1; color:#7dd3fc; }
.rp-quick .qbtn { min-height:68px; justify-content:center; }
.rp-quick .qbtn span:last-child { font-size:11px; }
.left-bottom { max-height:min(46vh,360px); overflow:auto; scrollbar-width:thin; }
.left-bottom .leg-row { line-height:1.5; }
@media (max-width:900px) {
 .right-panel { width:100%; height:48dvh; max-height:68dvh; min-height:250px; top:auto; bottom:0; border-radius:20px 20px 0 0; border:1px solid rgba(125,170,225,.22); border-bottom:0; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(7,12,23,.97); box-shadow:0 -14px 42px rgba(0,0,0,.45); overscroll-behavior:contain; }
 .right-panel .rp-sheet-handle { position:sticky; top:0; z-index:4; flex-shrink:0; }
 .left-bottom.legend-in-panel { position:relative; inset:auto; width:auto; max-width:none; max-height:none; overflow:visible; margin:8px 12px 12px; padding:12px; background:rgba(15,25,43,.88); border-radius:14px; box-shadow:none; font-size:12px; }
 .legend-in-panel .disc { font-size:11px; }
 .legend-in-panel .leg-h { font-size:12px; }
 .legend-in-panel .leg-row { font-size:11px; gap:6px 8px; }
 .legend-in-panel .m-dot { width:21px; height:21px; font-size:10px; }
 .legend-in-panel .brand-row { margin-top:8px; }
 #map { bottom:48dvh; }
 .map-stats { bottom:calc(48dvh + 10px + env(safe-area-inset-bottom,0px)); max-width:calc(100vw - 20px); gap:4px; padding:5px; }
 .map-stats .stat-btn { min-width:0; flex:1; padding:7px 5px; }
 .map-stats b { font-size:14px; } .map-stats span { font-size:8px; }
 .v-toolbar { right:8px; bottom:calc(48dvh + 58px); top:auto; gap:5px; }
 .tb-btn { width:40px; height:40px; border-radius:13px; }
 .basemap-menu { right:54px; bottom:calc(48dvh + 58px); top:auto; }
 .left-top { top:8px; left:8px; width:min(270px,calc(100vw - 70px)); }
 .rt-row { gap:9px; padding:10px 12px; } .rt-mag { width:54px; height:54px; font-size:22px; }
 .rt-meta { font-size:12px; } .rt-coord,.rt-place,.rt-dist { font-size:11px; }
}
@media (max-width:560px) {
 .right-panel { height:46dvh; }
 #map { bottom:46dvh; }
 .map-stats { bottom:calc(46dvh + 8px + env(safe-area-inset-bottom,0px)); }
 .v-toolbar { bottom:calc(46dvh + 54px); } .basemap-menu { bottom:calc(46dvh + 54px); }
 .left-top { width:min(260px,calc(100vw - 64px)); }
 .panel-header { padding:10px 12px; } .rp-links { gap:5px; } .rp-links a { padding:7px 9px; }
 .rp-quick { gap:6px; padding:8px 10px 4px; } .rp-quick-opts { padding:5px 12px; } .rp-live { padding:8px 12px; }
 .legend-in-panel .leg-row { gap:6px; }
}
@media (max-height:650px) and (max-width:900px) {
 .right-panel { height:43dvh; min-height:210px; } #map { bottom:43dvh; }
 .map-stats { bottom:calc(43dvh + 8px); } .v-toolbar { bottom:calc(43dvh + 48px); } .basemap-menu { bottom:calc(43dvh + 48px); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }


/* Hotfix: the legend is moved into #rightPanel on mobile, so it must re-enter normal flex flow.
   These rules intentionally override older fixed-position legend experiments above. */
@media (max-width:900px) {
  .left-bottom.legend-in-panel {
    display:block !important;
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    z-index:auto !important;
    flex:0 0 auto;
    margin:8px 12px 12px !important;
    padding:12px !important;
    background:rgba(15,25,43,.94) !important;
    border-radius:14px !important;
  }
  .right-panel.sheet-collapsed .left-bottom.legend-in-panel {
    display:none !important;
  }
  body.sheet-collapsed .map-stats {
    bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.sheet-collapsed .v-toolbar {
    bottom:calc(80px + 48px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.sheet-collapsed .basemap-menu {
    bottom:calc(80px + 48px + env(safe-area-inset-bottom,0px)) !important;
  }
}


/* MOBILE REBUILD 2026-10: single scrollable bottom sheet, no floating legend/stat overlap.
   Keep this block last so it supersedes legacy mobile experiments above. */
@media (max-width: 900px) {
  html, body { height:100%; height:100dvh; overflow:hidden; }
  #map { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }
  .map-overlay { pointer-events:none; }

  /* Realtime card stays compact in the upper-left; toolbar stays at upper-right. */
  .left-top {
    position:fixed !important;
    left:8px !important; top:8px !important;
    width:min(270px, calc(100vw - 70px)) !important;
    max-height:40dvh !important; overflow:auto !important;
    z-index:620 !important;
  }
  .v-toolbar {
    position:fixed !important;
    top:8px !important; bottom:auto !important;
    right:8px !important; left:auto !important;
    transform:none !important;
    display:flex !important; flex-direction:column !important;
    gap:5px !important; z-index:625 !important;
  }
  .tb-btn { width:42px !important; height:42px !important; }

  /* The panel is the only home for details, instructions, controls and legend. */
  .right-panel {
    position:fixed !important;
    left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
    display:flex !important; flex-direction:column !important;
    width:100% !important; height:54dvh !important;
    min-height:190px !important; max-height:72dvh !important;
    padding:0 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x:hidden !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    border-radius:20px 20px 0 0 !important;
    border:1px solid rgba(125,170,225,.24) !important;
    border-bottom:0 !important;
    background:rgba(7,12,23,.98) !important;
    box-shadow:0 -12px 36px rgba(0,0,0,.42) !important;
    z-index:700 !important;
    transition:height .22s ease, max-height .22s ease !important;
  }
  .right-panel.sheet-collapsed {
    height:78px !important; min-height:78px !important; max-height:78px !important;
    overflow:hidden !important;
  }
  .rp-sheet-handle {
    display:block !important; position:sticky !important; top:0 !important;
    flex:0 0 28px !important; height:28px !important;
    padding:7px 0 5px !important; margin:0 !important;
    background:rgba(7,12,23,.98) !important; z-index:5 !important;
  }
  .rp-handle-bar { width:42px !important; height:4px !important; }
  .rp-mag-bar {
    flex:0 0 auto !important; min-height:76px !important;
    margin:0 !important; padding:9px 12px !important;
    border-radius:0 !important; cursor:pointer;
  }
  .rp-mag { min-width:82px !important; font-size:clamp(30px,8vw,44px) !important; }
  .rp-mag-info { min-width:0 !important; }
  .rp-mag-info b { font-size:12px !important; }
  .rp-mag-info span { font-size:13px !important; }
  .rp-mag-info small { font-size:10px !important; }

  .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 .btn-detail-standalone,
  .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,
  .right-panel.sheet-collapsed .left-bottom { display:none !important; }

  /* Never leave the legend fixed over map content after it is moved into the sheet. */
  .left-bottom.legend-in-panel {
    display:block !important; position:relative !important;
    inset:auto !important; top:auto !important; right:auto !important;
    bottom:auto !important; left:auto !important; transform:none !important;
    width:auto !important; max-width:none !important; max-height:none !important;
    overflow:visible !important; flex:0 0 auto !important;
    margin:10px 12px 12px !important; padding:12px !important;
    z-index:auto !important; float:none !important;
    background:rgba(15,25,43,.96) !important;
    border:1px solid rgba(133,166,215,.2) !important;
    border-radius:14px !important; box-shadow:none !important;
    font-size:11px !important;
  }
  .left-bottom.legend-in-panel .disc { line-height:1.45 !important; margin-bottom:10px !important; }
  .left-bottom.legend-in-panel .leg-row { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:6px !important; line-height:1.5 !important; }
  .left-bottom.legend-in-panel .brand-row { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:10px !important; }

  /* Statistics only float above the collapsed handle; hide them when sheet is open. */
  .map-stats {
    position:fixed !important; display:flex !important;
    left:50% !important; right:auto !important; top:auto !important;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%) !important;
    max-width:calc(100vw - 18px) !important;
    gap:4px !important; padding:5px !important;
    z-index:630 !important;
  }
  body:not(.sheet-collapsed) .map-stats { display:none !important; }
  .map-stats .stat-btn { min-width:0 !important; flex:1 1 0 !important; min-height:46px !important; padding:6px 7px !important; }
  .map-stats b { font-size:15px !important; }
  .map-stats span { font-size:8px !important; white-space:nowrap !important; }

  .basemap-menu {
    position:fixed !important; top:8px !important; bottom:auto !important;
    right:56px !important; transform:none !important; z-index:630 !important;
    max-height:45dvh !important; overflow:auto !important;
  }
  .popup-new { z-index:680 !important; }
  .rp-quick { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; padding:10px 12px 4px !important; }
  .rp-quick .qbtn { min-width:0 !important; min-height:64px !important; }
  .rp-quick-opts { display:flex !important; gap:18px !important; padding:8px 14px !important; }
  .rp-quick-status { padding:4px 14px !important; font-size:11px !important; overflow-wrap:anywhere !important; }
  .rp-live { display:flex !important; flex-wrap:wrap !important; gap:6px !important; padding:10px 14px !important; }
  .rp-foot { padding:10px 14px !important; font-size:10px !important; line-height:1.5 !important; }
}
@media (max-width:560px) {
  .left-top { width:min(260px, calc(100vw - 66px)) !important; max-height:38dvh !important; }
  .rt-row { gap:8px !important; padding:8px 10px !important; }
  .rt-mag { width:52px !important; height:52px !important; font-size:22px !important; }
  .rt-meta { font-size:11px !important; }
  .rt-coord,.rt-place,.rt-dist { font-size:11px !important; line-height:1.4 !important; }
  .panel-header { padding:9px 10px !important; font-size:12px !important; }
  .panel-sub,.rt-filter { padding-left:10px !important; padding-right:10px !important; }
  .map-stats { bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape) {
  .right-panel { height:62dvh !important; max-height:82dvh !important; }
  .right-panel.sheet-collapsed { height:72px !important; min-height:72px !important; max-height:72px !important; }
  .left-top { max-height:65dvh !important; }
}


/* MOBILE APP SHELL: dedicated full-page screens, replacing the overlapping bottom-sheet layout. */
@media (max-width:900px) {
  body { overflow:hidden !important; }
  .mobile-page {
    display:none !important; position:fixed !important; inset:0 !important;
    width:100% !important; height:100dvh !important;
    overflow:hidden !important; background:#070c17 !important;
  }
  .mobile-page.active { display:block !important; }
  #mobilePageMap { z-index:10 !important; }
  #mobilePageInfo, #mobilePageLegend {
    z-index:40 !important; overflow-y:auto !important; overflow-x:hidden !important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(86px + env(safe-area-inset-bottom,0px)) !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  #mobilePageMap #map {
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  }
  #mobilePageMap .map-overlay { position:absolute !important; inset:0 !important; pointer-events:none !important; }
  #mobilePageMap .left-top {
    position:fixed !important; top:calc(8px + env(safe-area-inset-top,0px)) !important;
    left:8px !important; width:min(260px,calc(100vw - 66px)) !important;
    max-height:34dvh !important; overflow:auto !important; z-index:15 !important;
  }
  #mobilePageMap .v-toolbar {
    position:fixed !important; top:calc(8px + env(safe-area-inset-top,0px)) !important;
    right:8px !important; left:auto !important; bottom:auto !important;
    display:flex !important; flex-direction:column !important; gap:5px !important; z-index:16 !important;
  }
  #mobilePageMap .tb-btn { width:40px !important; height:40px !important; }
  #mobilePageMap .map-stats {
    position:fixed !important; left:50% !important; top:auto !important;
    bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateX(-50%) !important; z-index:17 !important;
    display:flex !important; max-width:calc(100vw - 20px) !important;
    padding:5px !important; gap:3px !important;
  }
  #mobilePageMap .map-stats .stat-btn { min-width:0 !important; flex:1 1 0 !important; padding:5px !important; }
  #mobilePageMap .map-stats b { font-size:14px !important; }
  #mobilePageMap .map-stats span { font-size:8px !important; white-space:nowrap !important; }
  #mobilePageMap .basemap-menu { position:fixed !important; top:calc(8px + env(safe-area-inset-top,0px)) !important; bottom:auto !important; right:54px !important; z-index:20 !important; }

  /* Full-page earthquake information: no floating card, no overlapping map or legend. */
  #mobilePageInfo .right-panel,
  #mobilePageInfo .right-panel.sheet-collapsed {
    position:relative !important; inset:auto !important; display:flex !important;
    flex-direction:column !important; width:100% !important; height:auto !important;
    min-height:0 !important; max-height:none !important; overflow:visible !important;
    padding:0 0 16px !important; margin:0 !important; border-radius:16px !important;
    border:1px solid rgba(125,170,225,.22) !important;
    background:rgba(10,17,31,.98) !important; box-shadow:none !important;
  }
  #mobilePageInfo .rp-sheet-handle { display:none !important; }
  #mobilePageInfo .rp-mag-bar { min-height:100px !important; padding:14px !important; border-radius:15px 15px 0 0 !important; }
  #mobilePageInfo .rp-mag { min-width:96px !important; font-size:44px !important; }
  #mobilePageInfo .rp-mag-info b { font-size:13px !important; }
  #mobilePageInfo .rp-mag-info span { font-size:15px !important; }
  #mobilePageInfo .rp-mag-info small { font-size:11px !important; }
  #mobilePageInfo .rp-mode, #mobilePageInfo .rp-stats, #mobilePageInfo .rp-desc,
  #mobilePageInfo .rp-shakemap, #mobilePageInfo .btn-detail-standalone,
  #mobilePageInfo .rp-pot, #mobilePageInfo .rp-instr, #mobilePageInfo .rp-links,
  #mobilePageInfo .rp-quick, #mobilePageInfo .rp-quick-opts,
  #mobilePageInfo .rp-quick-status, #mobilePageInfo .rp-live, #mobilePageInfo .rp-foot {
    display:block !important; position:relative !important; inset:auto !important;
    width:auto !important; max-width:none !important; transform:none !important;
    margin:10px 12px !important; overflow-wrap:anywhere !important;
  }
  #mobilePageInfo .rp-stats { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  #mobilePageInfo .rp-quick { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; padding:0 !important; }
  #mobilePageInfo .rp-quick .qbtn { min-width:0 !important; min-height:64px !important; }
  #mobilePageInfo .rp-quick-opts { display:flex !important; flex-wrap:wrap !important; gap:16px !important; padding:8px !important; }
  #mobilePageInfo .rp-quick-status { font-size:12px !important; padding:4px 0 !important; }
  #mobilePageInfo .rp-live { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
  #mobilePageInfo .rp-foot { font-size:11px !important; line-height:1.5 !important; }
  #mobilePageInfo .rp-mini-map { min-height:180px !important; width:auto !important; margin:10px 12px !important; }
  #mobilePageInfo .rp-shakemap img { max-width:100% !important; height:auto !important; }
  #mobilePageInfo .rp-links { display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
  #mobilePageInfo .ext-link { margin:0 !important; }

  /* Dedicated legend page. */
  .mobile-page-title {
    position:relative !important; padding:10px 4px 18px !important;
    color:#e7f2ff !important; font-size:22px !important; font-weight:800 !important;
  }
  .mobile-page-title small { display:block !important; margin-top:5px !important; color:#8ea7c8 !important; font-size:12px !important; font-weight:500 !important; }
  #mobilePageLegend .left-bottom.legend-in-panel {
    display:block !important; position:relative !important; inset:auto !important;
    width:100% !important; max-width:none !important; max-height:none !important;
    overflow:visible !important; margin:0 !important; padding:14px !important;
    border-radius:16px !important; background:rgba(15,25,43,.96) !important;
    box-shadow:none !important; border:1px solid rgba(133,166,215,.2) !important;
    font-size:12px !important;
  }
  #mobilePageLegend .leg-row { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:7px !important; line-height:1.7 !important; margin:10px 0 !important; }
  #mobilePageLegend .m-dot { width:28px !important; height:28px !important; line-height:28px !important; }
  #mobilePageLegend .brand-row { display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:16px !important; }
  #mobilePageLegend .disc { line-height:1.6 !important; margin-bottom:14px !important; }

  .mobile-bottom-nav {
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    height:calc(64px + env(safe-area-inset-bottom,0px)) !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important;
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important; background:rgba(5,10,20,.97) !important;
    border-top:1px solid rgba(123,158,209,.2) !important;
    z-index:1000 !important; backdrop-filter:blur(18px) !important;
  }
  .mobile-bottom-nav button {
    display:flex !important; flex-direction:column !important; justify-content:center !important;
    align-items:center !important; gap:3px !important; border:0 !important;
    border-radius:12px !important; background:transparent !important; color:#90a4c0 !important;
    font-size:11px !important; font-weight:700 !important; min-width:0 !important;
  }
  .mobile-bottom-nav button.active { color:#72d8ff !important; background:rgba(24,112,168,.2) !important; }
  .mobile-bottom-nav .nav-symbol { font-size:20px !important; line-height:1.1 !important; }
  #filterModal, #historyModal, #detailModal, #tsunamiModal, #loadingOverlay { z-index:1200 !important; }
}


/* Four-tab mobile navigation: consistent with the approved navy/cyan/red visual system. */
@media (max-width:900px) {
  .mobile-bottom-nav {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
    height:calc(68px + env(safe-area-inset-bottom,0px)) !important;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px)) !important;
  }
  .mobile-bottom-nav button {
    font-family:inherit !important;
    font-size:10px !important;
    letter-spacing:.01em !important;
    gap:4px !important;
  }
  .mobile-bottom-nav button.active {
    color:#78dcff !important;
    background:linear-gradient(180deg,rgba(27,135,190,.24),rgba(18,75,115,.14)) !important;
    box-shadow:inset 0 0 0 1px rgba(75,190,240,.12) !important;
  }
  .mobile-bottom-nav button[data-page="alerts"] .nav-symbol {
    display:grid !important; place-items:center !important;
    width:20px !important; height:20px !important;
    border:1.5px solid currentColor !important; border-radius:50% !important;
    font-size:14px !important; font-weight:800 !important;
  }
  #mobilePageMap .map-stats {
    bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
  }
  #mobilePageInfo, #mobilePageLegend {
    padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)) !important;
  }
}


/* Gempa: marker bulat berwarna, bintang merah berdenyut untuk event terbaru. */
.eq-star-marker,.eq-marker-wrap,.quake-marker-wrap,.quake-cluster-wrap {
  background:transparent !important;
  border:0 !important;
}
.eq-star-marker { overflow:visible !important; }
.eq-star { animation:starPulse 1.1s ease-in-out infinite !important; }
.eq-radius-ring { animation:ringExpand 2.8s ease-out infinite !important; }
.quake-diamond {
  display:block;
  width:var(--quake-size,12px);
  height:var(--quake-size,12px);
  background:var(--quake-fill,#43d6ff);
  border:2px solid var(--quake-edge,#f4f8ff);
  border-radius:2px;
  transform:rotate(45deg);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
  transition:transform .12s ease, filter .12s ease;
}
.quake-diamond.is-latest {
  border-color:#ffffff;
  box-shadow:0 0 0 2px rgba(76,213,255,.24),0 0 8px rgba(76,213,255,.45);
}
.quake-marker-wrap:hover .quake-diamond {
  transform:rotate(45deg) scale(1.18);
  filter:brightness(1.12);
}
.quake-cluster {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid rgba(105,218,255,.85);
  border-radius:11px;
  color:#e8f8ff;
  background:linear-gradient(145deg,rgba(13,79,112,.97),rgba(8,24,44,.98));
  box-shadow:0 3px 12px rgba(0,0,0,.45);
  font:800 12px/1 system-ui,sans-serif;
}
.quake-cluster.md { border-color:rgba(105,218,255,.8); }
.quake-cluster.lg { background:linear-gradient(145deg,rgba(126,76,18,.98),rgba(54,31,12,.98)); border-color:#f4b94b; }
.quake-cluster.xl { background:linear-gradient(145deg,rgba(135,31,42,.98),rgba(55,13,20,.98)); border-color:#ff6b75; }
#miniFocus .quake-diamond { box-shadow:none; }
@media (prefers-reduced-motion:reduce) {
  .quake-diamond { transition:none !important; }
}


/* Unified line-icon system; avoid emoji rendering differences between Android browsers. */
.v-toolbar .tb-btn svg,
.rp-quick .qicon svg {
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.v-toolbar .tb-btn { display:grid; place-items:center; }
.rp-quick .qicon { display:grid; place-items:center; }


.quake-marker-wrap,
.quake-cluster-wrap {
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}


/* WRS health strip and focused monitoring mode */
.wrs-health {
  position:fixed;
  z-index:620;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  max-width:min(430px,calc(100vw - 180px));
  padding:8px 12px;
  border:1px solid rgba(100,205,240,.2);
  border-radius:10px;
  background:rgba(7,17,30,.86);
  color:#d9edf7;
  box-shadow:0 6px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
  font:700 10px/1.2 system-ui,sans-serif;
  letter-spacing:.06em;
}
.wrs-health .health-led {
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#4ad6a0;box-shadow:0 0 0 3px rgba(74,214,160,.12);
}
.wrs-health time { color:#8fa9bb;font-weight:500;letter-spacing:0;white-space:nowrap; }
.wrs-health.is-error { border-color:rgba(255,95,110,.5); }
.wrs-health.is-error .health-led { background:#ff5f6e;box-shadow:0 0 0 3px rgba(255,95,110,.13); }
body.monitoring-mode .left-bottom,
body.monitoring-mode .map-stats { opacity:.18; transition:opacity .18s ease; }
body.monitoring-mode .left-top { max-width:300px; }
body.monitoring-mode .wrs-health { top:10px; }
@media (max-width:900px) {
 .wrs-health {
   top:calc(8px + env(safe-area-inset-top,0px));
   left:50%; max-width:calc(100vw - 126px);
   padding:7px 9px; gap:7px;
   font-size:9px;
 }
 .wrs-health time { display:none; }
 body.monitoring-mode .left-top { display:none; }
 body.monitoring-mode .map-stats { opacity:0; pointer-events:none; }
}
@media (prefers-reduced-motion:reduce) {
 .wrs-health, body.monitoring-mode .left-bottom, body.monitoring-mode .map-stats { transition:none; }
}


/* Utilities, timeline and mobile-safe layout refinements */
.wrs-utility-bar{position:fixed;z-index:625;top:62px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.utility-btn{border:1px solid rgba(90,180,220,.25);background:rgba(8,17,30,.9);color:#d9edf7;border-radius:9px;padding:8px 11px;font:600 11px system-ui;box-shadow:0 5px 18px rgba(0,0,0,.22);cursor:pointer;white-space:nowrap}
.utility-btn[aria-pressed="true"]{border-color:#4ad6a0;color:#9ff4ce;background:rgba(5,46,35,.92)}
.weather-card{position:fixed;z-index:700;top:104px;left:50%;transform:translateX(-50%);width:min(360px,calc(100vw - 24px));padding:16px;border:1px solid rgba(90,180,220,.28);border-radius:15px;background:rgba(7,17,30,.96);box-shadow:0 12px 40px rgba(0,0,0,.4);color:#e6f4ff}
.weather-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#cbd5e1;font-size:22px}
.weather-kicker{font-size:9px;letter-spacing:.12em;color:#7dd3fc;font-weight:800}
.weather-place{font-size:11px;color:#9fb4c8;margin-top:7px}
.weather-main{display:flex;align-items:center;gap:12px;margin:10px 0}
.weather-main strong{font-size:34px;line-height:1;font-weight:800;color:#fff}
.weather-main span{font-size:13px;font-weight:650}
.weather-extra{font-size:10px;line-height:1.5;color:#a8bdcf}
.hist-timeline{margin:12px 14px;padding:12px;border:1px solid rgba(90,180,220,.18);border-radius:12px;background:rgba(5,15,28,.65)}
.timeline-title{font-size:11px;font-weight:800;color:#d7ecff;margin-bottom:8px}
.timeline-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;align-items:end}
.timeline-day{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:4px;min-width:0;border:0;background:transparent;color:#9fb4c8;padding:2px;cursor:pointer}
.timeline-count{font-size:10px;font-weight:800;color:#e2f2ff}
.timeline-bar{width:min(22px,70%);min-height:4px;background:linear-gradient(180deg,#67e8f9,#0e7490);border-radius:5px 5px 2px 2px}
.timeline-label{font-size:9px;white-space:nowrap}
.timeline-day:hover .timeline-bar,.timeline-day:focus-visible .timeline-bar{background:linear-gradient(180deg,#bef264,#16a34a)}
.timeline-note{margin-top:8px;font-size:9px;line-height:1.4;color:#7f98ad}
body.battery-saver .pulse-dot{animation:none;box-shadow:none}
body.battery-saver *,body.battery-saver *::before,body.battery-saver *::after{scroll-behavior:auto!important;animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important}
@media(max-width:900px){
 .wrs-utility-bar{top:calc(43px + env(safe-area-inset-top,0px));gap:5px}
 .utility-btn{padding:7px 8px;font-size:10px}
 .weather-card{top:calc(84px + env(safe-area-inset-top,0px))}
 .left-bottom{max-height:32vh;overflow:auto}
 .map-stats{max-width:calc(100vw - 20px)}
 .right-panel{max-height:100dvh}
}

@media(max-width:900px){
  .wrs-utility-bar{
    top:auto;bottom:calc(48vh + 8px);left:auto;right:62px;transform:none;
    flex-direction:column;align-items:flex-end;gap:5px;
  }
  .utility-btn{font-size:9px;padding:7px 8px}
  .weather-card{top:calc(70px + env(safe-area-inset-top,0px))}
}
@media(max-width:560px){
  .wrs-health{max-width:calc(100vw - 18px);left:9px;right:9px;transform:none;justify-content:center}
  .wrs-utility-bar{right:58px;bottom:calc(48vh + 8px)}
  .left-bottom{width:min(280px,calc(100vw - 16px));bottom:58px;max-height:24vh}
  .map-stats{bottom:8px}
}


/* Action controls on every earthquake history row */
.hist-actions{white-space:nowrap;display:flex;gap:6px;align-items:center}
.hist-actions button{border:1px solid #334155;border-radius:7px;padding:6px 8px;background:#0f172a;color:#e2e8f0;font-size:11px;font-weight:700;cursor:pointer}
.hist-actions .hist-action-download{border-color:#0e7490;color:#a5f3fc}
.hist-actions .hist-action-share{border-color:#4f46e5;color:#c7d2fe}
.hist-actions button:active{transform:scale(.97)}
@media(max-width:700px){.hist-actions{flex-wrap:wrap}.hist-actions button{padding:5px 6px;font-size:10px}}