*{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,#334155,#0d2038);
border:2px solid #64748b;color:#cbd5e1;
}
.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:#7f1d1d}
.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;
max-height:180px;overflow-y:auto;-webkit-overflow-scrolling:touch;
animation:rtUpIn .35s ease;
}
.rt-upd-heading{font-size:9px;font-weight:900;letter-spacing:.04em;opacity:.85;margin-bottom:5px}
.rt-upd-row{padding:5px 0;border-top:1px solid rgba(148,163,184,.2)}
.rt-upd-time{display:block;font-size:9px;opacity:.7;margin-top:3px}
.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:1200px) {
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, #mobilePageAlerts {
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; }
}
#mobilePageAlerts{overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!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 {
display:inline-flex !important;
align-items:center;
justify-content:center;
width:38px;
height:40px;
line-height:1;
transform-origin:center;
will-change:transform,opacity,filter;
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}}
/* Mode selector berada di panel Lainnya/Legenda, bukan di atas peta. */
.wrs-mode-block{margin-top:10px;padding-top:9px;border-top:1px solid rgba(100,140,200,.25)}
.wrs-mode-label{margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a0c0e8}
.wrs-mode-switch{display:flex;gap:5px;padding:4px;border:1px solid rgba(100,205,240,.22);border-radius:11px;background:rgba(5,14,27,.94);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.wrs-mode-switch button{flex:1;border:1px solid transparent;border-radius:8px;padding:8px 9px;background:transparent;color:#9bb0c8;font:750 10px/1.2 system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.wrs-mode-switch button.active[data-wrs-mode="operational"]{color:#a7f3d0;background:rgba(6,95,70,.34);border-color:rgba(52,211,153,.42)}
.wrs-mode-switch button.active[data-wrs-mode="simulation"]{color:#fde68a;background:rgba(146,64,14,.35);border-color:rgba(251,191,36,.45)}
.wrs-mode-switch button:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}
@media(max-width:900px){.wrs-mode-block{margin:12px 0 4px}.wrs-mode-switch button{padding:9px 6px;font-size:10px}}
/* Panel MODE TES mengikuti prinsip WRS: data simulasi terpisah dari operasional. */
.wrs-test-tools[hidden]{display:none!important}
.wrs-test-tools{margin-top:9px;padding:9px;border:1px solid rgba(251,191,36,.3);border-radius:10px;background:rgba(66,42,10,.22)}
.wrs-test-status{font-size:10px;font-weight:850;line-height:1.45;color:#fde68a;margin-bottom:8px}
.wrs-test-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.wrs-test-actions button{min-height:34px;border:1px solid rgba(125,211,252,.28);border-radius:7px;padding:7px 6px;background:rgba(8,47,73,.55);color:#dbeafe;font:750 10px/1.2 system-ui,sans-serif;cursor:pointer}
.wrs-test-actions button:disabled{opacity:.45;cursor:not-allowed}
.wrs-test-actions button:nth-child(1){background:rgba(127,29,29,.6);border-color:rgba(248,113,113,.5);color:#fee2e2}
.wrs-test-actions button:nth-child(5){background:rgba(51,65,85,.55);color:#e2e8f0}
.wrs-test-actions button:nth-child(n+6){background:rgba(51,65,85,.45);color:#cbd5e1}
.wrs-test-actions button:active{transform:scale(.98)}
.wrs-test-actions button[aria-pressed="true"]{border-color:rgba(251,191,36,.7);color:#fde68a;background:rgba(120,53,15,.45)}
.wrs-test-actions button:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}
.wrs-test-log{display:grid;gap:4px;margin-top:8px;font-size:10px;line-height:1.4;color:#cbd5e1}
.wrs-test-log-row{padding:5px 6px;border-radius:6px;background:rgba(15,23,42,.62);overflow-wrap:anywhere}
.wrs-test-log-row.success{color:#a7f3d0;border-left:2px solid #34d399}
.wrs-test-log-row.warning{color:#fde68a;border-left:2px solid #fbbf24}
.wrs-test-note{margin:8px 0 0;color:#94a3b8;font-size:9px;line-height:1.45}
@media(max-width:900px){.wrs-test-tools{padding:8px}.wrs-test-actions button{min-height:36px;font-size:10px}}
/* Kontrol skenario magnitudo dan tsunami khusus Mode Tes */
.wrs-test-form{display:grid;gap:5px;margin:8px 0}
.wrs-test-form>label:not(.wrs-test-check){font-size:10px;font-weight:750;color:#cbd5e1}
.wrs-test-form select{width:100%;min-height:38px;border:1px solid rgba(125,211,252,.3);border-radius:7px;padding:7px 9px;background:#0f172a;color:#f8fafc;font:600 12px system-ui,sans-serif}
.wrs-test-form .wrs-test-check{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:10px;line-height:1.4;color:#fde68a}
.wrs-test-check input{width:18px;height:18px;accent-color:#ef4444;flex-shrink:0}
.wrs-test-actions button:first-child{background:rgba(127,29,29,.6);border-color:rgba(248,113,113,.5);color:#fee2e2}
/* Tahapan peringatan tsunami latihan */
.wrs-tsunami-stage[hidden]{display:none!important}
.wrs-tsunami-stage{margin:10px 0;padding:10px;border:1px solid rgba(245,158,11,.45);border-radius:12px;background:rgba(15,23,42,.94);color:#e5eefc}
.wrs-tsunami-stage-head{display:flex;gap:10px;align-items:flex-start;padding:2px 0 9px}
.wrs-tsunami-stage-head>div{min-width:0;display:grid;gap:4px}
.wrs-tsunami-stage-head strong{font-size:13px;line-height:1.35}
.wrs-tsunami-stage-head small{font-size:11px;line-height:1.45;color:#cbd5e1}
.wrs-tsunami-stage-chip{flex:0 0 auto;padding:5px 7px;border-radius:7px;background:#9a3412;color:#ffedd5;font-size:10px;font-weight:900}
.wrs-tsunami-stage-head.ended .wrs-tsunami-stage-chip{background:#166534;color:#dcfce7}
.wrs-tsunami-stage-head.ended strong{color:#86efac}
.wrs-tsunami-warning-note{font-size:10px;line-height:1.4;color:#fde68a;background:rgba(146,64,14,.22);border-radius:7px;padding:7px;margin-bottom:7px}
.wrs-tsunami-zone-list{display:grid;gap:4px}
.wrs-tsunami-zone-row{display:grid;grid-template-columns:65px minmax(0,1fr) auto;align-items:center;gap:7px;padding:6px 7px;border-radius:7px;background:rgba(148,163,184,.09);font-size:11px}
.wrs-tsunami-zone-row b{font-size:9px}
.wrs-tsunami-zone-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrs-tsunami-zone-row strong{font-variant-numeric:tabular-nums;color:#f8fafc}
.wrs-tsunami-ended-note{padding:9px;border-radius:8px;background:rgba(22,101,52,.3);border:1px solid rgba(74,222,128,.4);color:#bbf7d0;font-size:11px;line-height:1.45}
/* Peta tsunami resmi pada peta satelit */
.wrs-tsunami-map-control{width:min(340px,calc(100vw - 92px));max-height:min(62vh,560px);overflow:auto;background:rgba(8,18,33,.96);color:#e5eefc;border:1px solid rgba(148,163,184,.35);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.4);font:12px/1.35 system-ui,-apple-system,sans-serif}
.wrs-tsunami-map-title{position:sticky;top:0;z-index:2;background:#0b1b30;padding:10px 12px;font-weight:900;letter-spacing:.04em;border-bottom:1px solid #334155}
.wrs-tsu-map-events{padding:7px 9px;display:grid;gap:5px}
.wrs-tsu-map-event{display:flex;gap:8px;align-items:center;padding:5px 3px}
.wrs-tsu-map-event i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;box-shadow:0 0 0 2px #ffffff22}
.wrs-tsu-map-event span{display:grid;gap:2px;min-width:0}
.wrs-tsu-map-event small{font-size:10px;color:#cbd5e1}
.wrs-tsu-map-section{padding:7px 10px;border-top:1px solid #334155;display:grid;gap:5px}
.wrs-tsu-map-section>b{font-size:11px;color:#f8fafc;margin-bottom:2px}
.wrs-tsu-map-area{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;font-size:10px}
.wrs-tsu-map-area>span:nth-child(2){overflow-wrap:anywhere}
.wrs-tsu-map-area small{color:#cbd5e1;font-size:9px}
.wrs-tsu-status{font-size:8px;font-weight:900;padding:3px 5px;border-radius:5px}
.wrs-tsu-status.awas{background:#7f1d1d;color:#fecaca}.wrs-tsu-status.siaga{background:#9a3412;color:#ffedd5}.wrs-tsu-status.waspada{background:#854d0e;color:#fef08a}
.wrs-tsu-height-dot{width:9px;height:9px;border-radius:50%;border:1px solid #fff}
.wrs-tsu-map-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 9px;border-top:1px solid #334155}
.wrs-tsu-map-products a{color:#bae6fd;text-decoration:none;font-size:9px;display:grid;gap:4px;min-width:0}
.wrs-tsu-map-products img{width:100%;height:60px;object-fit:contain;background:#172438;border-radius:5px}
.wrs-tsu-map-note{padding:8px 10px;background:#111f33;color:#cbd5e1;font-size:9px;line-height:1.4;border-top:1px solid #334155}
@media(max-width:600px){.wrs-tsunami-map-control{width:min(275px,calc(100vw - 76px));max-height:44vh}.wrs-tsu-map-products img{height:48px}}
.wrs-tsu-map-timeline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;font-size:10px;padding:4px 0;border-bottom:1px dashed #334155}
.wrs-tsu-map-timeline>span{font-weight:800;color:#fde68a}.wrs-tsu-map-timeline small{font-size:9px;color:#cbd5e1}
/* Polished export result and meaningful loading states */
.wrs-export-result{position:fixed;inset:0;z-index:2500;display:none;align-items:center;justify-content:center;padding:20px}
.wrs-export-result.is-open{display:flex;animation:wrsExportFade .18s ease-out}
.wrs-export-backdrop{position:absolute;inset:0;background:rgba(2,8,18,.78);backdrop-filter:blur(12px)}
.wrs-export-sheet{position:relative;width:min(440px,100%);padding:26px 22px 20px;border:1px solid rgba(100,210,255,.22);border-radius:24px;background:linear-gradient(155deg,#12253b,#091321 78%);box-shadow:0 24px 80px #0009;color:#edf7ff;text-align:center}
.wrs-export-close{position:absolute;right:13px;top:11px;width:34px;height:34px;border:1px solid #ffffff1c;border-radius:50%;background:#ffffff0a;color:#dceaf6;font-size:23px;cursor:pointer}
.wrs-export-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:19px;background:linear-gradient(145deg,#0c9f8a,#08746f);box-shadow:0 8px 28px #0c9f8a44;color:white;font-size:30px;font-weight:900}
.wrs-export-sheet h2{margin:0 0 9px;font-size:21px;line-height:1.25;font-weight:850}
.wrs-export-message{margin:0 auto 20px;max-width:330px;color:#a9bfd2;font-size:13px;line-height:1.65}
.wrs-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.wrs-export-action{min-height:44px;border:1px solid #31506a;border-radius:12px;background:#12243a;color:#dceeff;font-size:12px;font-weight:800;cursor:pointer}
.wrs-export-action.primary{grid-column:1/-1;border-color:#20b8c7;background:linear-gradient(100deg,#0c8e9d,#1477b5);color:white;box-shadow:0 8px 20px #087e9b33}
.wrs-export-action:active{transform:scale(.98)}
.rt-upd-tag.is-expired{display:none!important}
.loading-overlay{background:rgba(3,10,20,.84)!important;backdrop-filter:blur(12px)!important}
.loading-overlay>div:not(.loading-spinner){max-width:min(360px,calc(100vw - 40px));padding:24px 22px;border:1px solid rgba(103,210,255,.2);border-radius:22px;background:linear-gradient(150deg,#12263d,#081321);box-shadow:0 18px 55px #0008}
.loading-spinner{width:46px!important;height:46px!important;border:3px solid #24465e!important;border-top-color:#62d9ff!important;border-right-color:#29b6ad!important;box-shadow:0 0 24px #31c8e522}
.loading-text{margin-top:16px;font-size:14px!important;line-height:1.5;color:#e4f6ff!important;letter-spacing:0!important}
@keyframes wrsExportFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.wrs-export-result{align-items:flex-end;padding:12px}.wrs-export-sheet{padding:25px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 18px 18px}.wrs-export-sheet h2{font-size:19px}}
/* BMKG news page, aligned with WRS navy/cyan surfaces */
.wrs-news-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid rgba(104,192,235,.18);border-radius:12px;background:rgba(8,21,37,.8);color:#93b3c9;font-size:11px}
.wrs-news-toolbar button{border:1px solid #245571;border-radius:9px;padding:8px 10px;background:#10283f;color:#bcecff;font-weight:800}
.wrs-news-filters{display:flex;gap:7px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}
.wrs-news-filters button{flex:0 0 auto;border:1px solid rgba(115,160,200,.24);border-radius:999px;padding:8px 12px;background:#0d1c2e;color:#a7bfd2;font-size:11px;font-weight:750}
.wrs-news-filters button.active{background:linear-gradient(110deg,#0d7189,#155a91);border-color:#35bfd2;color:white}
.wrs-news-list{display:grid;gap:10px}
.wrs-news-card{display:grid;gap:8px;padding:15px;border:1px solid rgba(106,166,205,.2);border-radius:15px;background:linear-gradient(150deg,rgba(15,34,55,.96),rgba(7,18,31,.96));color:#e7f5ff;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.wrs-news-card:active{transform:scale(.995)}
.wrs-news-category{width:max-content;max-width:100%;padding:4px 7px;border:1px solid rgba(56,189,248,.24);border-radius:6px;background:rgba(14,116,144,.18);color:#7dd3fc;font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.wrs-news-card strong{font-size:14px;line-height:1.45;font-weight:800}
.wrs-news-card small{color:#829db3;font-size:10px}
.wrs-news-open{color:#6ddbf5;font-size:11px;font-weight:800}
.wrs-news-loading{padding:24px 16px;border:1px dashed rgba(110,169,207,.25);border-radius:14px;color:#a9bfd2;text-align:center;font-size:12px;line-height:1.7}
.wrs-news-loading a{color:#7dd3fc}
.wrs-news-footnote{margin:15px 0 0;color:#8298ad;font-size:10px;line-height:1.6}
@media(max-width:900px){.mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}.mobile-bottom-nav button{font-size:9px!important;padding-left:1px;padding-right:1px}.mobile-bottom-nav .nav-symbol{font-size:17px!important}#mobilePageNews{padding:10px 12px calc(100px + env(safe-area-inset-bottom,0px))!important}.mobile-page-title{font-size:20px!important}}
.wrs-loading-card{width:min(370px,calc(100vw - 34px));padding:24px 22px;border:1px solid rgba(103,210,255,.22);border-radius:23px;background:radial-gradient(ellipse at 50% 0%,rgba(25,125,166,.2),transparent 60%),linear-gradient(150deg,#12263d,#081321);box-shadow:0 22px 65px #0009;text-align:center;color:#edf7ff}
.wrs-loading-brand{display:flex;justify-content:center;align-items:center;gap:11px;margin-bottom:23px;text-align:left}
.wrs-loading-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #54cde966;border-radius:15px;background:linear-gradient(145deg,#103d58,#0b1a2b);color:#78e6ff;font-size:24px;font-weight:950;box-shadow:0 0 22px #1bc7e522}
.wrs-loading-brand>span:last-child{display:grid;gap:4px}
.wrs-loading-brand strong{font-size:16px;letter-spacing:.04em}
.wrs-loading-brand small{color:#7299b3;font-size:8px;font-weight:850;letter-spacing:.15em}
.wrs-loading-card .loading-spinner{margin:0 auto}
.wrs-loading-card .loading-text{margin:14px 0 17px}
.wrs-loading-stages{display:grid;gap:8px;text-align:left;padding:12px 13px;border:1px solid #ffffff10;border-radius:12px;background:#06101c88}
.wrs-loading-stages span{color:#607c91;font-size:10px;font-weight:750}
.wrs-loading-stages span.active{color:#8de7ff}
.wrs-loading-note{display:block;margin-top:13px;color:#7691a7;font-size:9px;line-height:1.55}
.wrs-export-previews{display:flex;gap:9px;overflow-x:auto;margin:0 -2px 17px;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.wrs-export-preview{flex:0 0 92px;margin:0;scroll-snap-align:start}
.wrs-export-preview img{display:block;width:92px;height:164px;object-fit:cover;border:1px solid #ffffff25;border-radius:8px;background:#f8fafc;box-shadow:0 5px 15px #0005}
.wrs-export-preview figcaption{margin-top:6px;color:#8faec5;font-size:9px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
/* BMKG warnings live inside the existing Notifications tab; no extra navigation item */
.wrs-alert-intro{display:flex;align-items:center;gap:11px;margin:12px 0 14px;padding:13px;border:1px solid rgba(73,188,217,.2);border-radius:14px;background:linear-gradient(135deg,#10263a,#0a1828)}
.wrs-alert-pulse{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#36d6ad;box-shadow:0 0 0 5px #36d6ad18,0 0 14px #36d6ad66}
.wrs-alert-intro>div{display:grid;gap:4px;flex:1;min-width:0}
.wrs-alert-intro strong{font-size:12px;color:#d9f5ff}
.wrs-alert-intro small{font-size:10px;color:#89a9bd}
.wrs-alert-intro button{width:34px;height:34px;border:1px solid #28516a;border-radius:10px;background:#102d43;color:#82e4fa;font-size:19px}
.wrs-alert-list,.wrs-alert-news{display:grid;gap:10px}
.wrs-alert-card{padding:15px;border:1px solid rgba(245,158,11,.28);border-radius:15px;background:linear-gradient(145deg,#2b251b,#171b23);color:#f3e6ca}
.wrs-alert-card.severe{border-color:rgba(248,113,113,.4);background:linear-gradient(145deg,#351d24,#171923)}
.wrs-alert-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.wrs-alert-badge{padding:4px 7px;border:1px solid #d7a84c44;border-radius:6px;color:#f5ca78;font-size:9px;font-weight:900;letter-spacing:.06em}
.wrs-alert-card time{font-size:9px;color:#a79a84}
.wrs-alert-card h3{margin:0 0 7px;font-size:14px;line-height:1.45;color:#fff0d0}
.wrs-alert-card p{margin:0 0 11px;font-size:12px;line-height:1.65;color:#d4c6ae}
.wrs-alert-area{margin-bottom:12px;font-size:11px;line-height:1.5;color:#e5d0a9}
.wrs-alert-card>a{display:inline-flex;padding:8px 10px;border:1px solid #80673b;border-radius:9px;color:#ffda8a;font-size:10px;font-weight:850;text-decoration:none}
.wrs-alert-section-title{margin:22px 0 10px;color:#9bb7ca;font-size:10px;font-weight:900;letter-spacing:.1em}
.wrs-alert-news-card{display:grid;gap:7px;padding:13px;border:1px solid rgba(103,163,202,.19);border-radius:13px;background:linear-gradient(150deg,#102338,#0a1726);color:#e6f5ff;text-decoration:none}
.wrs-alert-news-card>span{color:#75d9ed;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.wrs-alert-news-card strong{font-size:12px;line-height:1.5}
.wrs-alert-news-card small{color:#819bb0;font-size:9px}
.wrs-alert-news-card em{color:#70d7f0;font-size:10px;font-style:normal;font-weight:850}
.wrs-alert-empty{display:grid;gap:8px;justify-items:center;padding:22px 15px;border:1px dashed rgba(110,169,207,.25);border-radius:14px;background:#0b1a2a;color:#a9bfd2;text-align:center;font-size:11px;line-height:1.65}
.wrs-alert-empty strong{color:#cfe5f2;font-size:12px}
.wrs-alert-empty small{color:#839eb3;font-size:10px}
.wrs-alert-empty a{color:#78dff4;font-weight:800}
.wrs-alert-safe{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0c3c32;color:#68edc3;font-size:19px}
.wrs-alert-footnote{margin:14px 0;color:#7f99ae;font-size:9px;line-height:1.6}
@media(max-width:900px){
.mobile-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#mobilePageAlerts{padding:10px 12px calc(100px + env(safe-area-inset-bottom,0px))!important}
.mobile-bottom-nav button{font-size:10px!important}
}
/* BMKG news cards are semantic articles with a separate source link. */
.wrs-alert-news-card{display:grid;gap:8px;padding:13px;border:1px solid rgba(103,163,202,.19);border-radius:13px;background:linear-gradient(150deg,#102338,#0a1726);color:#e6f5ff;text-decoration:none}
.wrs-alert-news-card>span{color:#75d9ed;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.wrs-alert-news-card strong{font-size:12px;line-height:1.5}
.wrs-alert-news-card p{margin:0;color:#b4c9d8;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
.wrs-alert-news-card small{color:#819bb0;font-size:9px}
.wrs-alert-news-card>a{justify-self:start;padding:7px 9px;border:1px solid #28516a;border-radius:8px;color:#70d7f0;font-size:10px;font-weight:850;text-decoration:none}
/* BMKG detail, source attribution and 9:16 share card */
.wrs-alert-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.wrs-alert-actions button{padding:9px 11px;border:1px solid #2b607a;border-radius:9px;background:#0b2c40;color:#91e8ff;font:700 11px Arial,sans-serif;cursor:pointer}
.wrs-alert-source{display:block;margin-top:10px;color:#8298aa;font-size:9px;line-height:1.5;overflow-wrap:anywhere}
.wrs-bmkg-detail{display:none;position:fixed;inset:0;z-index:1400;background:rgba(0,4,12,.82);padding:14px;align-items:center;justify-content:center}
.wrs-bmkg-detail.open{display:flex}
.wrs-bmkg-detail section{width:min(720px,100%);max-height:88dvh;overflow:auto;padding:20px;border:1px solid #25465e;border-radius:18px;background:#081522;color:#e9f5ff;box-shadow:0 22px 80px #0009;-webkit-overflow-scrolling:touch}
.wrs-bmkg-detail .close{float:right;padding:9px 12px;border:1px solid #2d5067;border-radius:9px;background:#10273a;color:#d9f4ff}
.wrs-bmkg-detail .content{clear:both;padding-top:12px}
.wrs-bmkg-detail .content small{color:#7eddf4;font-weight:800}
.wrs-bmkg-detail h2{font-size:clamp(21px,4vw,30px);line-height:1.35}
.wrs-bmkg-detail p{font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#c8d9e8}
.wrs-bmkg-detail .source{padding:12px;border-radius:10px;background:#0c2031;font-size:11px}
.wrs-alert-details{margin:10px 0;padding:10px;border:1px solid #345064;border-radius:9px;background:#0b1c2a}
.wrs-alert-details summary{color:#85e4f7;font-weight:800;font-size:11px;cursor:pointer}
.wrs-alert-details p{margin:10px 0;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
@media(max-width:1200px){
.mobile-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#mobilePageAlerts{padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(100px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important}
}
/* Dual digital clocks: WIB and UTC are always visible on the main map dashboard. */
.world-clock-panel{
position:absolute;z-index:330;top:64px;right:378px;width:min(390px,calc(100vw - 410px));
padding:11px 13px;border:1px solid rgba(87,190,224,.34);border-radius:14px;
color:#e6f6ff;background:linear-gradient(145deg,rgba(7,24,39,.94),rgba(7,15,29,.92));
box-shadow:0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(16px);
}
.world-clock-head{display:flex;align-items:center;gap:7px;color:#8de6f7;font-size:9px;font-weight:900;letter-spacing:.15em;margin-bottom:9px}
.world-clock-led{width:6px;height:6px;border-radius:50%;background:#35e0a1;box-shadow:0 0 9px rgba(53,224,161,.7)}
.world-clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.world-clock-grid>div+div{border-left:1px solid rgba(137,178,209,.2);padding-left:12px}
.world-clock-grid small{display:block;color:#91aabd;font-size:8px;font-weight:800;letter-spacing:.06em}
.world-clock-grid strong{display:block;margin:4px 0 2px;color:#f1fbff;font:800 24px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.world-clock-grid time{display:block;color:#8ba9bd;font-size:9px}
.mobile-more-controls{display:grid;gap:10px;margin:0 0 16px;padding:14px;border:1px solid rgba(103,180,211,.2);border-radius:15px;background:linear-gradient(150deg,rgba(13,34,52,.95),rgba(7,20,33,.96));color:#e2f4ff}
.mobile-more-controls h2{margin:0;color:#82e1f2;font-size:14px;letter-spacing:.08em}
.mobile-more-controls .more-caption{margin:-4px 0 3px;color:#91aabd;font-size:11px;line-height:1.5}
.mobile-more-controls .rp-links{display:flex;flex-wrap:wrap;gap:7px}
.mobile-more-controls .ext-link{margin:0;padding:8px 10px;border:1px solid rgba(106,202,232,.24);border-radius:9px;background:rgba(12,46,65,.65)}
.mobile-more-controls .rp-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mobile-more-controls .qbtn{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 5px;border:1px solid rgba(106,202,232,.23);border-radius:10px;background:#102b3d;color:#d9f5ff}
.mobile-more-controls .rp-quick-opts{display:flex;gap:18px;flex-wrap:wrap}
.mobile-more-controls .rp-quick-status{display:block;padding:8px 9px;border-radius:8px;background:rgba(6,16,27,.65);color:#a9c5d6;font-size:11px;line-height:1.45}
.mobile-more-controls .rp-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border:1px solid rgba(55,203,164,.22);border-radius:9px;background:rgba(7,38,35,.45)}
.mobile-more-controls .rp-foot{font-size:10px;line-height:1.7;color:#91aabd}
.detail-revision-title{margin:12px 12px 5px;padding:10px 11px;border:1px solid rgba(84,192,225,.24);border-radius:10px 10px 0 0;background:rgba(8,43,61,.72);color:#8fe6f5;font-size:10px;font-weight:900;letter-spacing:.06em}
#mobilePageInfo #rtUpdate{margin:0 12px 14px!important;padding:10px!important;border:1px solid rgba(84,192,225,.24)!important;border-top:0!important;border-radius:0 0 10px 10px!important;background:rgba(6,20,33,.88)!important}
.wrs-alert-card-image{display:block;width:100%;max-height:250px;object-fit:contain;border-radius:9px;background:#fff;margin:0 0 7px}
.wrs-bmkg-image{margin:12px 0;padding:8px;border:1px solid rgba(103,163,202,.2);border-radius:12px;background:#f8fafc}
.wrs-bmkg-image img{display:block;width:100%;max-height:420px;object-fit:contain}
.wrs-bmkg-image figcaption{padding:7px 2px 0;color:#516579;font-size:10px}
.wrs-bmkg-summary{padding:11px;border-left:3px solid #44c8e8;background:rgba(36,148,183,.1);border-radius:0 8px 8px 0}
.wrs-bmkg-table-wrap{max-width:100%;overflow-x:auto;margin:12px 0;border:1px solid rgba(103,163,202,.25);border-radius:10px}
.wrs-bmkg-table-wrap table{width:100%;border-collapse:collapse;font-size:12px}
.wrs-bmkg-table-wrap th,.wrs-bmkg-table-wrap td{padding:9px 10px;border-bottom:1px solid rgba(103,163,202,.18);text-align:left;vertical-align:top}
.wrs-bmkg-table-wrap th{background:#12354a;color:#9fe9f8;font-weight:850}
.wrs-bmkg-table-wrap td{color:inherit}
@media(max-width:1200px){
.world-clock-panel{top:calc(62px + env(safe-area-inset-top,0px));right:12px;width:min(320px,calc(100vw - 24px));padding:9px 10px}
.world-clock-grid strong{font-size:21px}
#mobilePageMap .world-clock-panel{position:absolute!important;z-index:35!important}
#mobilePageLegend .mobile-more-controls{margin-bottom:14px}
}
@media(max-width:480px){
.world-clock-panel{width:min(300px,calc(100vw - 24px))}
.world-clock-grid{gap:7px}
.world-clock-grid>div+div{padding-left:8px}
.world-clock-grid strong{font-size:18px}
.world-clock-grid small{font-size:7px}
.world-clock-grid time{font-size:8px}
}
/* Corrected mobile dashboard placement: compact clocks replace the map status pill. */
@media (max-width:1200px){
.world-clock-panel{
position:fixed!important;
z-index:340!important;
top:auto!important;
right:auto!important;
left:50%!important;
bottom:calc(168px + env(safe-area-inset-bottom,0px))!important;
transform:translateX(-50%)!important;
width:min(300px,calc(100vw - 38px))!important;
padding:7px 10px!important;
border-radius:12px!important;
box-shadow:0 6px 18px rgba(0,0,0,.2)!important;
}
.world-clock-head{font-size:8px!important;margin-bottom:5px!important;letter-spacing:.12em!important}
.world-clock-grid{gap:8px!important}
.world-clock-grid>div+div{padding-left:8px!important}
.world-clock-grid small{font-size:7px!important}
.world-clock-grid strong{font-size:17px!important;letter-spacing:.01em!important;margin:3px 0 1px!important}
.world-clock-grid time{font-size:7px!important}
#mobilePageLegend .wrs-health,
.mobile-more-controls .wrs-health{
position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
transform:none!important;width:100%!important;max-width:100%!important;display:flex!important;
flex-wrap:wrap!important;white-space:normal!important;margin:4px 0 8px!important;
padding:10px 11px!important;border-radius:11px!important;box-sizing:border-box!important;
}
.mobile-more-controls .wrs-health time{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important}
#mobilePageMap .world-clock-panel{pointer-events:none}
}
@media (max-width:380px){
.world-clock-panel{width:calc(100vw - 48px)!important;bottom:calc(162px + env(safe-area-inset-bottom,0px))!important}
.world-clock-grid strong{font-size:15px!important}
}
/* Latest card: compact WIB/UTC neon clock embedded in the panel, never floating over the map. */
#cardRealtime #worldClockPanel.world-clock-panel{
position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
transform:none!important;width:calc(100% - 24px)!important;max-width:none!important;
margin:2px 12px 12px!important;padding:7px 9px!important;box-sizing:border-box!important;
border:1px solid rgba(64,213,255,.3)!important;border-radius:10px!important;
background:linear-gradient(135deg,rgba(6,35,54,.86),rgba(5,19,35,.9))!important;
box-shadow:inset 0 0 12px rgba(0,183,255,.045),0 0 8px rgba(0,177,255,.055)!important;
backdrop-filter:blur(8px)!important;
}
#cardRealtime .world-clock-head{
margin:0 0 4px!important;font-size:8px!important;letter-spacing:.13em!important;
color:#68e5ff!important;text-shadow:0 0 7px rgba(0,204,255,.35)!important;
}
#cardRealtime .world-clock-led{
width:5px!important;height:5px!important;background:#39e9ff!important;
box-shadow:0 0 5px #00d9ff,0 0 9px rgba(0,217,255,.55)!important;
}
#cardRealtime .world-clock-grid{gap:8px!important}
#cardRealtime .world-clock-grid>div+div{padding-left:8px!important;border-left-color:rgba(80,202,238,.16)!important}
#cardRealtime .world-clock-grid small{font-size:7px!important;color:#7fa8c0!important;letter-spacing:.045em!important}
#cardRealtime .world-clock-grid strong{
font-size:15px!important;line-height:1.15!important;letter-spacing:.02em!important;
margin:2px 0!important;color:#80eaff!important;
text-shadow:0 0 5px rgba(0,190,255,.28)!important;
}
#cardRealtime .world-clock-grid time{font-size:7px!important;color:#7595ab!important}
#cardRealtime .world-clock-panel{pointer-events:auto!important}
#cardRealtime .eq-radius-ring,.eq-radius-ring{animation:none!important;display:none!important;opacity:0!important;fill-opacity:0!important;stroke-opacity:0!important}
/* Latest earthquake star: crisp red locator, subtle pulse only, without a huge red halo. */
.eq-star{
font-size:27px!important;line-height:34px!important;color:#ff515b!important;
text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 3px rgba(255,45,60,.5)!important;
animation:starPulse 1.8s ease-in-out infinite!important;
transform-origin:center center!important;
}
@keyframes starPulse{
0%,100%{transform:scale(1);opacity:1;filter:none}
50%{transform:scale(1.1);opacity:.9;filter:drop-shadow(0 0 3px rgba(255,52,67,.35))}
}
.eq-star-marker{filter:none!important;box-shadow:none!important}
/* Extra-compact WIB/UTC clock: retain legibility without taking space from quake details. */
#cardRealtime #worldClockPanel.world-clock-panel{padding:5px 7px!important;margin:1px 10px 9px!important;width:calc(100% - 20px)!important;border-radius:8px!important}
#cardRealtime .world-clock-head{font-size:7px!important;letter-spacing:.1em!important;margin-bottom:3px!important}
#cardRealtime .world-clock-led{width:4px!important;height:4px!important}
#cardRealtime .world-clock-grid{gap:6px!important}
#cardRealtime .world-clock-grid>div+div{padding-left:6px!important}
#cardRealtime .world-clock-grid small{font-size:6px!important;line-height:1.15!important}
#cardRealtime .world-clock-grid strong{font-size:12px!important;letter-spacing:0!important;line-height:1.1!important;margin:1px 0!important}
#cardRealtime .world-clock-grid time{font-size:6px!important;line-height:1.1!important}
/* Latest earthquake: compact red pulse rings stay centered on the marker at every zoom. */
.eq-pulse-ring{stroke:#ff354f!important;stroke-linecap:round;fill:none!important;fill-opacity:0!important;pointer-events:none!important;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:wrsQuakeRingPulse 2.15s cubic-bezier(.15,.55,.35,1) infinite;filter:drop-shadow(0 0 2px rgba(255,35,65,.45))}
.eq-pulse-ring-inner{animation-delay:0s;stroke-width:2.1px!important}
.eq-pulse-ring-outer{animation-delay:1.05s;stroke-width:1.6px!important}
@keyframes wrsQuakeRingPulse{
0%{transform:scale(.78);opacity:.95;stroke-width:2.3px}
72%{transform:scale(1.14);opacity:.18;stroke-width:1px}
100%{transform:scale(1.18);opacity:0;stroke-width:.6px}
}
.eq-star{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:40px;line-height:1;transform-origin:center;will-change:transform,opacity,filter;animation:starPulse 1.7s ease-in-out infinite!important}
@keyframes starPulse{
0%,100%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 1px rgba(255,55,70,.3))}
50%{transform:scale(1.13);opacity:.95;filter:drop-shadow(0 0 4px rgba(255,45,65,.72))}
}
#rightPanel.felt-event-pulse .rp-mag-bar{
position:relative;isolation:isolate;
animation:wrsFeltSummaryPulse 2.2s ease-in-out infinite;
}
#rightPanel.felt-event-pulse .rp-mag-bar::after{
content:"";position:absolute;inset:5px;border:1px solid rgba(255,70,80,.45);
border-radius:10px;pointer-events:none;animation:wrsFeltSummaryRing 2.2s ease-out infinite;
}
@keyframes wrsFeltSummaryPulse{
0%,100%{box-shadow:0 0 0 rgba(255,45,65,0)}
50%{box-shadow:0 0 16px rgba(255,45,65,.17)}
}
@keyframes wrsFeltSummaryRing{
0%{opacity:.7;transform:scale(.99)}
85%,100%{opacity:0;transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
.eq-pulse-ring,.eq-star,#rightPanel.felt-event-pulse .rp-mag-bar,#rightPanel.felt-event-pulse .rp-mag-bar::after{animation:none!important}
}
/* Compact first-open alert card: dismissible and deliberately not full-screen sized. */
.wrs-event-popup-overlay {
position: fixed;
inset: 0;
z-index: 2200;
display: flex;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
padding: calc(env(safe-area-inset-top, 0px) + 72px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
background: rgba(2, 7, 18, .42);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.wrs-event-popup-overlay.hidden { display: none !important; }
.wrs-event-popup-card {
position: relative;
width: min(440px, calc(100vw - 28px));
max-height: min(68vh, 560px);
overflow-y: auto;
padding: 18px 18px 14px;
border: 1px solid rgba(91, 196, 240, .48);
border-radius: 20px;
color: #eaf4ff;
background: linear-gradient(155deg, rgba(13, 38, 61, .985), rgba(5, 16, 31, .99) 70%);
box-shadow: 0 18px 45px rgba(0, 0, 0, .42), inset 0 1px rgba(255,255,255,.05);
animation: wrsCompactPopupIn .22s ease-out;
}
.wrs-event-popup-card.wrs-event-popup-tsunami {
border-color: rgba(255, 77, 91, .82);
background: linear-gradient(155deg, rgba(74, 19, 33, .99), rgba(8, 21, 39, .99) 72%);
box-shadow: 0 18px 45px rgba(0, 0, 0, .44), 0 0 22px rgba(248, 48, 65, .12);
}
.wrs-event-popup-close {
position: absolute; right: 10px; top: 10px; width: 34px; height: 34px;
border: 1px solid rgba(148, 163, 184, .23); border-radius: 50%;
color: #eaf4ff; background: rgba(2, 8, 20, .5); font-size: 25px; line-height: 1; cursor: pointer;
}
.wrs-event-popup-eyebrow {
display: flex; align-items: center; gap: 8px; padding-right: 38px;
color: #8bdcf9; font-size: 10px; font-weight: 900; letter-spacing: .15em;
}
.wrs-event-popup-eyebrow span:first-child {
display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px;
border-radius: 9px; color: #071827; background: #74d9fa; font-size: 17px;
}
.wrs-event-popup-tsunami .wrs-event-popup-eyebrow { color: #ffc4cb; }
.wrs-event-popup-tsunami .wrs-event-popup-eyebrow span:first-child { color: #fff; background: #f04457; }
.wrs-event-popup-card h2 {
margin: 13px 0 3px; padding-right: 8px; font-size: clamp(17px, 4.7vw, 21px);
line-height: 1.25; font-weight: 900; letter-spacing: -.02em;
}
.wrs-event-popup-subtitle { color: #94aeca; font-size: 11px; line-height: 1.45; }
.wrs-event-popup-tsunami .wrs-event-popup-subtitle { color: #fecdd3; }
.wrs-event-popup-place { margin: 13px 0 12px; font-size: 15px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.wrs-event-popup-meta {
display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
padding: 8px 0; border-top: 1px solid rgba(135, 170, 205, .13); font-size: 12px;
}
.wrs-event-popup-meta span { color: #8299b4; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.wrs-event-popup-meta strong { text-align: right; font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.wrs-event-popup-message {
margin: 10px 0 13px; padding: 10px 11px; border-radius: 10px; color: #c6d8eb;
background: rgba(4, 15, 29, .66); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere;
}
.wrs-event-popup-tsunami .wrs-event-popup-message {
color: #ffe2e5; border: 1px solid rgba(248, 113, 124, .2); background: rgba(67, 10, 20, .38);
}
.wrs-event-popup-action {
width: 100%; min-height: 44px; border: 1px solid rgba(85, 208, 250, .55);
border-radius: 12px; color: #e5faff; background: linear-gradient(110deg, #155a78, #0c3b56);
font-size: 11px; font-weight: 900; letter-spacing: .04em; cursor: pointer;
}
.wrs-event-popup-tsunami .wrs-event-popup-action {
border-color: rgba(255, 105, 117, .7); background: linear-gradient(110deg, #b91c32, #6e1327);
}
.wrs-event-popup-footnote { margin-top: 10px; color: #71859e; font-size: 9px; text-align: center; line-height: 1.4; }
@keyframes wrsCompactPopupIn {
from { opacity: 0; transform: translateY(-8px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Red star and expanding ring mark the actual epicentre on the detail map. */
.quake-detail-star-wrap { overflow: visible !important; }
.quake-detail-star {
position: relative; display: block; width: var(--quake-star-size, 25px); height: var(--quake-star-size, 25px);
color: #ff3048; font-size: var(--quake-star-size, 25px); line-height: 1; text-align: center;
-webkit-text-stroke: .75px #fff5f5;
text-shadow: 0 0 4px #ff3048, 0 0 10px rgba(255, 40, 70, .9), 0 0 20px rgba(255, 40, 70, .55);
transform-origin: center; animation: wrsDetailStarPulse 1.55s ease-in-out infinite;
}
.quake-detail-star::after {
content: ""; position: absolute; inset: -5px; border: 2px solid rgba(255, 48, 72, .8);
border-radius: 50%; pointer-events: none; animation: wrsDetailStarRing 1.8s ease-out infinite;
}
@keyframes wrsDetailStarPulse {
0%, 100% { transform: scale(.92); filter: brightness(.98); }
50% { transform: scale(1.12); filter: brightness(1.2); }
}
@keyframes wrsDetailStarRing {
0% { transform: scale(.55); opacity: .75; }
100% { transform: scale(1.65); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wrs-event-popup-card, .quake-detail-star, .quake-detail-star::after { animation: none !important; }
}
@media (max-width: 420px) {
.wrs-event-popup-overlay {
padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
padding-left: 10px; padding-right: 10px;
}
.wrs-event-popup-card { padding: 16px 15px 12px; border-radius: 17px; }
}
/* ===== WRS GEMPA · mobile-first polish pass (visual only) ===== */
button, .tb-btn, .qbtn, .stat-btn, .bm-opt, .btn-save, .btn-share,
.btn-detail, .btn-detail-standalone, .wrs-export-action, .wrs-event-popup-action {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
button:focus-visible, a:focus-visible {
outline: 2px solid #67e8f9;
outline-offset: 2px;
}
button:disabled { opacity: .52; cursor: not-allowed !important; }
.tb-btn {
border-color: rgba(114, 190, 230, .32);
background: linear-gradient(145deg, rgba(17, 39, 62, .96), rgba(6, 17, 32, .94));
box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.07);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tb-btn:hover, .tb-btn:focus-visible {
border-color: rgba(103, 232, 249, .78);
background: linear-gradient(145deg, #16425c, #0b253c);
box-shadow: 0 8px 22px rgba(8,145,178,.22);
}
.tb-btn[data-on="1"] {
border-color: rgba(251, 146, 60, .78);
background: linear-gradient(145deg, rgba(124,45,18,.82), rgba(67,20,7,.92));
box-shadow: 0 0 0 1px rgba(251,146,60,.12), 0 8px 22px rgba(249,115,22,.19);
}
.basemap-menu {
min-width: 166px;
padding: 7px;
border-color: rgba(103, 201, 238, .3);
border-radius: 15px;
box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}
.bm-opt {
min-height: 40px;
padding: 10px 12px;
border-radius: 10px;
font-size: 12px;
font-weight: 750;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.bm-opt.active {
color: #dffaff;
background: linear-gradient(105deg, rgba(8,145,178,.38), rgba(14,116,144,.16));
box-shadow: inset 0 0 0 1px rgba(103,232,249,.24);
}
.rp-quick { gap: 9px; }
.qbtn {
min-height: 64px;
border-color: rgba(107, 177, 222, .27);
background: linear-gradient(150deg, rgba(19, 41, 65, .95), rgba(7, 18, 33, .95));
box-shadow: inset 0 1px rgba(255,255,255,.045), 0 5px 12px rgba(0,0,0,.12);
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.qbtn:active, .stat-btn:active, .btn-save:active, .btn-share:active { transform: translateY(1px); }
.qbtn.on {
border-color: rgba(74,222,128,.64);
background: linear-gradient(145deg, rgba(20,83,45,.58), rgba(6,42,30,.72));
box-shadow: inset 0 0 0 1px rgba(74,222,128,.1), 0 5px 16px rgba(34,197,94,.12);
}
.btn-save, .btn-share, .btn-detail, .btn-detail-standalone, .btn-close-ts {
min-height: 42px;
border-radius: 12px;
font-weight: 800;
letter-spacing: .01em;
box-shadow: 0 5px 15px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.1);
transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-save:hover, .btn-share:hover, .btn-detail:hover, .btn-detail-standalone:hover, .btn-close-ts:hover {
filter: brightness(1.12);
box-shadow: 0 7px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.12);
}
.modal-overlay, .tsunami-overlay {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal-card, .tsunami-card {
box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.035);
}
.hist-card {
overflow-x: hidden;
border: 1px solid rgba(105, 180, 225, .22);
}
.hist-header {
gap: 12px;
flex-wrap: wrap;
background: linear-gradient(120deg, rgba(16, 39, 62, .96), rgba(7, 18, 33, .96));
}
.hist-header h2 { font-size: clamp(15px, 3.7vw, 18px); line-height: 1.3; }
.hist-header span {
padding: 5px 9px;
border: 1px solid rgba(103,232,249,.16);
border-radius: 999px;
background: rgba(8,145,178,.1);
white-space: nowrap;
}
.hist-table-wrap {
max-width: 100%;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #31556d #0a1727;
}
.hist-table {
min-width: 470px;
table-layout: auto;
font-size: 12px;
}
.hist-table th {
z-index: 1;
padding: 11px 10px;
color: #b8cbdc;
background: #102237;
white-space: nowrap;
}
.hist-table td {
padding: 10px;
line-height: 1.4;
vertical-align: top;
}
.hist-table td:nth-child(1), .hist-table td:nth-child(2), .hist-table td:nth-child(4) {
white-space: nowrap;
}
.hist-table td:nth-child(3) {
min-width: 160px;
white-space: normal;
overflow-wrap: anywhere;
}
.hist-table tbody tr:active td { background: rgba(56,189,248,.12); }
.hist-tsunami-banner, .global-tsunami-panel {
margin-left: 10px;
margin-right: 10px;
border-radius: 14px;
}
.tsunami-card {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.tsunami-header { padding-right: 58px; }
.tsunami-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #67313c #170e18;
}
.tsunami-meta, .tsunami-meta div, .tsunami-pot-text, .tz-name { overflow-wrap: anywhere; }
.tsunami-map-box { min-width: 0; }
.tsunami-map-box img { max-width: 100%; }
.tsunami-actions {
position: sticky;
bottom: 0;
z-index: 3;
background: linear-gradient(180deg, rgba(8,18,31,.94), rgba(5,12,23,.99));
backdrop-filter: blur(14px);
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.tsunami-actions a { overflow-wrap: anywhere; }
.tsunami-zone-table {
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.tz-row, .tz-head { min-width: 360px; }
.global-tsunami-items { min-width: 0; }
.wrs-export-result .wrs-export-sheet {
max-height: min(92dvh, 900px);
overflow-y: auto;
overscroll-behavior: contain;
}
.wrs-export-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.wrs-export-action {
min-height: 42px;
border: 1px solid rgba(103, 201, 238, .28);
border-radius: 12px;
padding: 10px 14px;
color: #dffaff;
background: linear-gradient(135deg, #123149, #0a2135);
font-weight: 800;
}
.wrs-export-action.primary {
border-color: rgba(103,232,249,.42);
color: #05131f;
background: linear-gradient(110deg, #67e8f9, #38bdf8);
}
.wrs-export-action:focus-visible { outline-color: #67e8f9; }
@media (max-width: 640px) {
.hist-card {
width: 100% !important;
max-width: 100% !important;
max-height: 100dvh !important;
border-radius: 18px 18px 0 0 !important;
}
.hist-body {
display: flex;
flex-direction: column;
min-height: 0;
}
.hist-map {
width: 100%;
height: clamp(170px, 24dvh, 230px);
flex: 0 0 auto;
}
.hist-table-wrap {
max-height: 35dvh;
border-top: 1px solid rgba(100,160,200,.16);
}
.hist-table { min-width: 460px; font-size: 11px; }
.hist-table th, .hist-table td { padding: 9px 8px; }
.hist-header { padding: 12px 48px 12px 13px; }
.hist-tsunami-banner, .global-tsunami-panel { margin: 8px; }
.tsunami-card {
width: 100% !important;
max-width: 100% !important;
height: 100dvh;
max-height: 100dvh !important;
border-radius: 18px 18px 0 0 !important;
border-bottom: 0;
}
.tsunami-header { padding: 14px 52px 14px 14px; gap: 10px; }
.tsunami-header h2 { font-size: clamp(15px, 4.2vw, 18px); line-height: 1.25; }
.tsunami-header .ts-sub { font-size: 11px; line-height: 1.4; }
.tsunami-wave-icon { width: 44px; height: 44px; font-size: 23px; }
.tsunami-body { padding: 11px 12px; flex: 1 1 auto; }
.tsunami-mag { width: 60px; height: 60px; font-size: 23px; }
.tsunami-meta { min-width: 0; font-size: 12px; }
.tsunami-status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
.tsunami-status { min-width: 0; padding: 9px 3px; font-size: 10px; overflow-wrap: anywhere; }
.tsunami-status span { font-size: 8px; line-height: 1.25; }
.tsunami-areas h4 { line-height: 1.4; }
.tsunami-area-item { align-items: flex-start; font-size: 11px; }
.tsunami-area-item .badge { min-width: 48px; }
.tsunami-maps { grid-template-columns: 1fr; }
.tsunami-map-box img { max-height: min(34dvh, 270px); object-fit: contain; }
.tsunami-instr { padding: 11px 12px; line-height: 1.6; }
.tsunami-zone-table { max-height: 220px; }
.tz-head { display: none !important; }
.tz-row {
min-width: 0;
grid-template-columns: 68px minmax(0, 1fr);
gap: 5px 9px;
padding: 10px;
}
.tz-badge { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.tz-name { grid-column: 2; grid-row: 1; font-size: 11px; }
.tz-meta { grid-column: 2; grid-row: 2; text-align: left; font-size: 10px; }
.tz-h { grid-column: 2; grid-row: 3; text-align: left; font-size: 10px; }
.tsunami-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.tsunami-actions .btn-save, .tsunami-actions .btn-share, .tsunami-actions .btn-close-ts { width: 100%; margin: 0; }
.tsunami-actions a { grid-column: 1 / -1; margin: 2px 0 0 !important; text-align: center; }
.modal-actions { padding: 12px; gap: 8px; }
.modal-actions .btn-save, .modal-actions .btn-share { flex: 1 1 calc(50% - 8px); }
.modal-actions a { flex: 1 1 100%; margin: 2px 0 0; text-align: center; }
.btn-save, .btn-share, .btn-detail, .btn-detail-standalone, .btn-close-ts { min-height: 44px; }
.wrs-export-result .wrs-export-sheet {
width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
padding: 18px 14px;
border-radius: 18px;
}
.wrs-export-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wrs-export-preview img { width: 100%; height: auto; aspect-ratio: 156 / 278; object-fit: contain; }
.wrs-export-actions { display: grid; grid-template-columns: 1fr; }
.wrs-export-action { width: 100%; }
.basemap-menu { min-width: 158px; }
}
@media (max-width: 390px) {
.hist-table { min-width: 440px; }
.tsunami-body { padding-left: 10px; padding-right: 10px; }
.tsunami-status { letter-spacing: -.02em; }
.tsunami-actions { grid-template-columns: 1fr 1fr; }
.tsunami-header { padding-left: 12px; }
.tsunami-wave-icon { width: 40px; height: 40px; flex-basis: 40px; }
}
/* Alternating clock / earthquake-parameter revision view inside the realtime card. */
#worldClockContent[hidden],
#worldClockRevision[hidden] { display:none !important; }
#worldClockRevision {
width:100%;
min-width:0;
min-height:58px;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
gap:2px;
}
#worldClockRevision .world-clock-head {
margin:0 0 3px;
color:#67e8f9;
font-size:8px;
line-height:1.2;
letter-spacing:.1em;
}
#worldClockRevision .revision-led {
background:#fbbf24;
box-shadow:0 0 7px rgba(251,191,36,.6);
}
#worldClockRevision .clock-revision-main {
color:#e9faff;
font:800 16px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;
letter-spacing:.01em;
overflow-wrap:anywhere;
}
#worldClockRevision .clock-revision-detail {
color:#b3ccdc;
font-size:9px;
line-height:1.35;
overflow-wrap:anywhere;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
#worldClockRevision .clock-revision-meta {
margin-top:2px;
color:#7fa8c0;
font-size:7px;
line-height:1.25;
overflow-wrap:anywhere;
}
#cardRealtime #worldClockPanel #worldClockRevision .world-clock-head {
font-size:7px !important;
letter-spacing:.08em !important;
margin:0 0 3px !important;
}
#cardRealtime #worldClockPanel #worldClockRevision .clock-revision-main {
font-size:15px !important;
line-height:1.15 !important;
color:#effcff !important;
}
#cardRealtime #worldClockPanel #worldClockRevision .clock-revision-detail {
font-size:8px !important;
line-height:1.3 !important;
color:#9ec4d8 !important;
}
#cardRealtime #worldClockPanel #worldClockRevision .clock-revision-meta {
font-size:7px !important;
color:#7198b1 !important;
}
/* WRS simulation-only map animation. Clearly labelled so decorative rings cannot be mistaken for official hazard zones. */
.wrs-sim-map-tag {
display: flex !important;
align-items: center;
gap: 8px;
max-width: min(292px, calc(100vw - 100px));
margin: 10px 10px 0 0 !important;
padding: 8px 10px;
border: 1px solid rgba(248, 113, 113, .55);
border-radius: 9px;
background: rgba(5, 13, 27, .94);
color: #ffe4e6;
box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
font: 850 9px/1.4 system-ui, sans-serif;
letter-spacing: .025em;
white-space: normal;
pointer-events: none;
}
.wrs-sim-map-tag.tsunami {
color: #dff6ff;
border-color: rgba(56, 189, 248, .65);
}
.wrs-sim-map-tag-dot {
display: inline-block;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #fb3651;
box-shadow: 0 0 10px rgba(251, 54, 81, .8);
animation: wrsSimTagBlink 1.25s ease-in-out infinite;
}
.wrs-sim-map-tag.tsunami .wrs-sim-map-tag-dot {
background: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, .85);
}
.wrs-sim-map-tag-label { display: block; }
@keyframes wrsSimTagBlink { 0%,100% { opacity: 1; } 50% { opacity: .42; } }
/* Leaflet SVG paths remain independent of the Canvas renderer used by live catalogue markers. */
path.wrs-sim-impact,
path.wrs-sim-wave,
path.wrs-sim-orbit,
path.wrs-sim-coast-target {
transform-box: fill-box;
transform-origin: center center;
pointer-events: none !important;
vector-effect: non-scaling-stroke;
}
path.wrs-sim-impact {
animation: wrsSimImpactBloom 3.1s ease-out infinite;
}
path.wrs-sim-impact-quake {
stroke: #fb3651 !important;
fill: #ef233c !important;
}
path.wrs-sim-impact-tsunami {
stroke: #38bdf8 !important;
fill: #0284c7 !important;
animation-duration: 3.3s;
}
@keyframes wrsSimImpactBloom {
0% { transform: scale(.22); opacity: .88; fill-opacity: .34; stroke-opacity: .9; }
72% { opacity: .3; fill-opacity: .12; stroke-opacity: .38; }
100% { transform: scale(4.15); opacity: 0; fill-opacity: 0; stroke-opacity: 0; }
}
path.wrs-sim-wave {
fill: none !important;
stroke-linecap: round !important;
animation: wrsSimWaveExpand 2.9s cubic-bezier(.12,.48,.4,1) infinite;
}
path.wrs-sim-wave-0 { animation-delay: 0s !important; }
path.wrs-sim-wave-1 { animation-delay: -.96s !important; }
path.wrs-sim-wave-2 { animation-delay: -1.92s !important; }
path.wrs-sim-wave-quake { stroke: #ff435d !important; }
path.wrs-sim-wave-tsunami {
stroke: #38bdf8 !important;
animation-duration: 3.15s;
}
@keyframes wrsSimWaveExpand {
0% { transform: scale(.2); opacity: .96; stroke-width: 2.7px; }
74% { opacity: .25; stroke-width: 1.5px; }
100% { transform: scale(3.3); opacity: 0; stroke-width: .6px; }
}
path.wrs-sim-orbit {
fill: none !important;
stroke-dasharray: 3 5 !important;
animation: wrsSimOrbitPulse 2.5s ease-in-out infinite;
}
path.wrs-sim-orbit-quake { stroke: #e2e8f0 !important; }
path.wrs-sim-orbit-tsunami { stroke: #7dd3fc !important; }
@keyframes wrsSimOrbitPulse {
0%, 100% { opacity: .5; stroke-width: 1.1px; }
50% { opacity: .98; stroke-width: 1.8px; }
}
path.wrs-sim-coast-target {
fill: #0ea5e9 !important;
stroke: #e0f2fe !important;
animation: wrsSimCoastPulse 1.8s ease-in-out infinite;
}
path.wrs-sim-coast-target-0 { animation-delay: -.2s; }
path.wrs-sim-coast-target-1 { animation-delay: -.65s; }
path.wrs-sim-coast-target-2 { animation-delay: -1.1s; }
path.wrs-sim-coast-target-3 { animation-delay: -1.5s; }
@keyframes wrsSimCoastPulse {
0%,100% { transform: scale(.82); opacity: .7; fill-opacity: .24; }
50% { transform: scale(1.3); opacity: 1; fill-opacity: .8; }
}
.wrs-sim-coast-tooltip {
background: rgba(3, 20, 39, .94) !important;
border: 1px solid rgba(56, 189, 248, .7) !important;
border-radius: 6px !important;
color: #e0f2fe !important;
box-shadow: 0 3px 12px rgba(0, 0, 0, .35) !important;
font: 800 9px/1.2 system-ui, sans-serif !important;
padding: 4px 6px !important;
}
.wrs-sim-coast-tooltip::before { border-top-color: rgba(56, 189, 248, .7) !important; }
@media (prefers-reduced-motion: reduce) {
.wrs-sim-map-tag-dot,
path.wrs-sim-impact,
path.wrs-sim-wave,
path.wrs-sim-orbit,
path.wrs-sim-coast-target {
animation: none !important;
}
path.wrs-sim-impact { transform: scale(1) !important; opacity: .4 !important; }
path.wrs-sim-wave { transform: scale(1.5) !important; opacity: .6 !important; }
}
.wrs-sim-map-tag.ended {
color: #dcfce7;
border-color: rgba(34, 197, 94, .62);
}
.wrs-sim-map-tag.ended .wrs-sim-map-tag-dot {
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, .7);
animation: none;
}
/* Export-page-only epicentre mark: fixed PNG rings fade visually, with no label at the centre. */
.wrs-export-epicenter {
position:absolute;
z-index:7;
width:0;
height:0;
transform:translate(-50%,-50%);
pointer-events:none;
}
.wrs-export-epicenter-fade {
position:absolute;
left:50%;
top:50%;
width:74px;
height:74px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,rgba(255,35,58,.35) 0%,rgba(255,35,58,.19) 28%,rgba(255,35,58,.07) 52%,rgba(255,35,58,0) 74%);
}
.wrs-export-epicenter-ring {
position:absolute;
left:50%;
top:50%;
border:2px solid rgba(255,51,72,.9);
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 4px rgba(255,34,55,.48);
}
.wrs-export-epicenter-ring.ring-a { width:36px;height:36px;opacity:.9; }
.wrs-export-epicenter-ring.ring-b { width:52px;height:52px;border-width:1.5px;opacity:.56; }
.wrs-export-epicenter-star {
position:absolute;
left:50%;
top:50%;
display:flex;
align-items:center;
justify-content:center;
transform:translate(-50%,-50%);
box-sizing:border-box;
border:2px solid #fff;
border-radius:50%;
color:#fff;
box-shadow:0 0 0 3px rgba(255,53,79,.24),0 2px 8px rgba(0,0,0,.5),inset 0 0 7px rgba(255,255,255,.18);
font:900 15px/1 system-ui,sans-serif;
text-shadow:0 1px 3px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion: reduce) {
.wrs-export-epicenter-fade { opacity:.85; }
}
/* Magnitude-scaled epicentre pulse; each ring is a screen-space visual, never a hazard radius. */
.eq-pulse-ring-mag{
animation:wrsQuakeRingPulseMagnitude 2.35s cubic-bezier(.15,.55,.35,1) infinite!important;
stroke-linecap:round;
vector-effect:non-scaling-stroke;
filter:drop-shadow(0 0 2px rgba(255,35,65,.42));
}
.eq-pulse-ring-mag-1{animation-delay:0s!important;stroke-width:2.15px!important}
.eq-pulse-ring-mag-2{animation-delay:.24s!important;stroke-width:2px!important}
.eq-pulse-ring-mag-3{animation-delay:.48s!important;stroke-width:1.85px!important}
.eq-pulse-ring-mag-4{animation-delay:.72s!important;stroke-width:1.7px!important}
.eq-pulse-ring-mag-5{animation-delay:.96s!important;stroke-width:1.55px!important}
.eq-pulse-ring-mag-6{animation-delay:1.2s!important;stroke-width:1.4px!important}
.eq-pulse-ring-mag-7{animation-delay:1.44s!important;stroke-width:1.3px!important}
.eq-pulse-ring-mag-8{animation-delay:1.68s!important;stroke-width:1.2px!important}
@keyframes wrsQuakeRingPulseMagnitude{
0%{transform:scale(.42);opacity:.96;stroke-width:2.2px}
68%{transform:scale(1.06);opacity:.25;stroke-width:1px}
100%{transform:scale(1.22);opacity:0;stroke-width:.55px}
}
@media(prefers-reduced-motion:reduce){
.eq-pulse-ring-mag{animation:none!important;opacity:.42!important;transform:none!important}
}