/* WRS Gempa — visual refresh v3 */
:root {
  color-scheme: dark;
  --wrs-bg: #07111f;
  --wrs-surface: rgba(11, 22, 38, .94);
  --wrs-surface-2: rgba(15, 30, 50, .92);
  --wrs-border: rgba(148, 183, 219, .16);
  --wrs-muted: #8ea5bf;
  --wrs-text: #edf5ff;
  --wrs-cyan: #55d6f5;
  --wrs-blue: #2c8ed0;
  --wrs-red: #ff6c78;
  --wrs-green: #4fd1a1;
  --wrs-shadow: 0 18px 55px rgba(0, 0, 0, .32);
}
html, body {
  background: var(--wrs-bg);
  color: var(--wrs-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--wrs-cyan);
  outline-offset: 2px;
}
#map { background: #0a1524; }
.map-overlay {
  background:
    linear-gradient(180deg, rgba(4, 12, 22, .26), transparent 22%, transparent 68%, rgba(4, 12, 22, .24)),
    radial-gradient(ellipse at 42% 42%, rgba(24, 73, 108, .10), transparent 58%);
}
.leaflet-container { background: #091624; font: inherit; }
.leaflet-control-zoom {
  border: 1px solid rgba(166, 194, 222, .2) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
}
.leaflet-control-zoom a {
  background: rgba(9, 23, 40, .94) !important;
  color: #d8efff !important;
  border-bottom-color: rgba(166,194,222,.12) !important;
}
.leaflet-control-zoom a:hover { background: #123452 !important; }
.leaflet-control-attribution {
  background: rgba(6, 16, 28, .72) !important;
  color: #91a9c2 !important;
  border-radius: 7px 0 0 0;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: #8edff4 !important; }
.glass-panel {
  background: var(--wrs-surface);
  border: 1px solid var(--wrs-border);
  border-radius: 20px;
  box-shadow: var(--wrs-shadow), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  color: var(--wrs-text);
}
.wrs-health {
  position: fixed;
  z-index: 620;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 40px);
  padding: 9px 13px;
  border: 1px solid rgba(116, 171, 205, .2);
  border-radius: 13px;
  background: rgba(7, 19, 33, .9);
  color: #dcecff;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  font: 750 10px/1.15 Inter, system-ui, sans-serif;
  letter-spacing: .07em;
  white-space: nowrap;
}
.wrs-health .health-led {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%; background: var(--wrs-green);
  box-shadow: 0 0 0 4px rgba(79,209,161,.12);
}
.health-brand {
  color: var(--wrs-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.health-divider { width: 1px; height: 14px; background: rgba(148,183,219,.23); }
.wrs-health time { color: var(--wrs-muted); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.wrs-health.is-error { border-color: rgba(255,108,120,.42); }
.wrs-health.is-error .health-led { background: var(--wrs-red); box-shadow: 0 0 0 4px rgba(255,108,120,.12); }
.wrs-health.is-warning { border-color: rgba(245, 190, 75, .48); }
.wrs-health.is-warning .health-led { background: #f5be4b; box-shadow: 0 0 0 4px rgba(245, 190, 75, .15); }

.left-top {
  top: 72px; left: 18px;
  width: min(326px, calc(100vw - 40px));
  border-radius: 20px;
  border-color: rgba(111,175,214,.2);
}
.panel-header {
  padding: 13px 16px 11px;
  gap: 10px;
  border-bottom: 1px solid rgba(125,173,211,.13);
  background: linear-gradient(105deg, rgba(24,103,148,.21), rgba(22,42,70,.2));
  color: #e7f7ff;
  font-size: 11px;
  letter-spacing: .13em;
}
.pulse-dot {
  width: 7px; height: 7px;
  background: var(--wrs-green);
  box-shadow: 0 0 0 4px rgba(79,209,161,.10);
}
.panel-sub {
  padding: 8px 16px 3px;
  background: transparent;
  color: #92aac4;
  font-size: 10px;
  letter-spacing: .02em;
}
.rt-filter {
  padding: 3px 16px 0;
  color: #718ba8;
  background: transparent;
  font-size: 9px;
}
.rt-row { padding: 12px 16px 9px; gap: 13px; }
.rt-mag {
  width: 70px; height: 70px;
  border-radius: 17px;
  font-size: 25px; letter-spacing: -.04em;
  background: linear-gradient(145deg, #334155, #0d2038);
  border: 1px solid #64748b;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.16);
}
.rt-meta { color: #d6e7f7; font-size: 12px; line-height: 1.45; }
.rt-ago { color: #ffb36e; font-size: 11px; }
.rt-coord { padding: 0 16px 7px; color: #9cb5cd; font-size: 11px; }
.rt-place {
  padding: 0 16px 7px;
  color: #f1f7ff;
  font-size: 12px; font-weight: 650; line-height: 1.5;
  overflow-wrap: anywhere;
}
.rt-dist { padding: 0 16px 6px; color: #a8bed3; font-size: 10px; }
.rt-src { padding: 0 16px 14px; color: #7892ad; font-size: 10px; }
.rt-update { margin: 0 16px 8px; font-size: 10px; }

.map-stats {
  position: fixed; left: 50%; bottom: 18px; z-index: 700;
  transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px;
  background: rgba(7,18,31,.89);
  border: 1px solid rgba(147,183,217,.17);
  border-radius: 17px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  backdrop-filter: blur(20px);
}
.map-stats .stat-btn {
  min-width: 79px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(19,38,60,.55);
  color: #dcecff;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.map-stats .stat-btn:hover {
  background: rgba(34,75,106,.7);
  border-color: rgba(85,214,245,.28);
  transform: translateY(-1px);
}
.map-stats .stat-btn.stat-tsunami { background: rgba(83,28,39,.38); }
.map-stats .stat-btn.stat-tsunami:hover { background: rgba(112,34,46,.52); border-color: rgba(255,108,120,.32); }
.map-stats b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.map-stats span { display: block; margin-top: 4px; color: #91a9c2; font-size: 8px; font-weight: 750; letter-spacing: .1em; }

.v-toolbar {
  right: 397px;
  top: 50%;
  gap: 7px;
  padding: 7px;
  transform: translateY(-50%);
  border: 1px solid rgba(148,183,219,.12);
  border-radius: 17px;
  background: rgba(8,19,32,.72);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
}
.tb-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(148,183,219,.12);
  border-radius: 12px;
  background: rgba(19,39,62,.7);
  color: #d3e9fa;
  box-shadow: none;
  font-size: 17px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.tb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn:hover { background: rgba(29,81,113,.85); color: #fff; transform: translateY(-1px); }
.tb-btn[data-on="1"] { border-color: rgba(255,108,120,.42); box-shadow: inset 0 0 0 1px rgba(255,108,120,.08); }
.basemap-menu {
  z-index: 720;
  right: 454px;
  top: 50%;
  padding: 7px;
  min-width: 164px;
  border: 1px solid var(--wrs-border);
  border-radius: 15px;
  background: rgba(8,19,32,.97);
  box-shadow: var(--wrs-shadow);
  backdrop-filter: blur(20px);
}
.bm-opt { padding: 10px 12px; border-radius: 10px; color: #b9cee2; font-size: 11px; }
.bm-opt:hover, .bm-opt.active { background: rgba(49,145,190,.17); color: #8ee8ff; }

.left-bottom {
  left: 18px; bottom: 18px;
  width: min(350px, calc(100vw - 40px));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(8,19,32,.91);
  border-color: rgba(139,177,211,.16);
}
.disc { color: #98b4c9; margin-bottom: 12px; font-size: 10px; line-height: 1.55; }
.disc b { color: #ffbc8b; }
.leg-h { border-bottom-color: rgba(139,177,211,.14); padding-bottom: 8px; color: #e3f0ff; font-size: 11px; letter-spacing: .04em; }
.leg-row { gap: 6px 8px; margin: 7px 0; color: #a6bdd2; font-size: 9px; line-height: 1.55; }
.leg-lab { color: #8aa3bd; }
.m-dot { width: 19px; height: 19px; border: 1px solid rgba(255,255,255,.24); }
.star-legend { color: #ff7b83; filter: drop-shadow(0 0 4px rgba(255,89,100,.5)); }
.brand-row { margin-top: 12px; padding-top: 10px; border-top-color: rgba(139,177,211,.14); }
.brand-box { padding: 6px 9px; border-radius: 9px; background: rgba(38,113,151,.15); border-color: rgba(85,214,245,.24); color: #8ce8fa; }
.brand-box.accent { background: rgba(86,112,158,.14); border-color: rgba(139,161,212,.2); color: #bdcaff; }
.brand-clock { color: #9db4ca; font-size: 10px; }

.right-panel {
  z-index: 500;
  top: 16px; right: 16px; bottom: 16px;
  width: 358px;
  border: 1px solid rgba(148,183,219,.17);
  border-radius: 22px;
  background: rgba(7,18,32,.96);
  box-shadow: 0 20px 58px rgba(0,0,0,.38);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(107,151,188,.38) transparent;
}
.rp-mag-bar {
  min-height: 87px;
  background: linear-gradient(120deg, rgba(119,32,43,.94), rgba(41,20,35,.97));
  border-bottom: 1px solid rgba(255,128,139,.19);
}
.rp-mag {
  width: 100px;
  font-size: 40px;
  color: #ffe3e6;
  text-shadow: none;
  background: rgba(5,10,20,.22);
}
.rp-mag-info { padding: 12px 14px; }
.rp-mag-info b { color: #ffd7dc; font-size: 10px; letter-spacing: .12em; }
.rp-mag-info span { color: #fff; font-size: 13px; line-height: 1.35; }
.rp-mag-info small { color: #edb7bf; font-size: 10px; }
.rp-mode {
  padding: 9px 12px;
  background: rgba(24,102,140,.25);
  color: #8bdef5;
  border-bottom: 1px solid rgba(95,164,197,.12);
  font-size: 9px; letter-spacing: .11em;
}
.rp-mini-map {
  height: 145px;
  border-bottom: 1px solid rgba(122,160,198,.13);
  background: #0b1726;
}
.rp-stats { border-bottom-color: rgba(122,160,198,.13); }
.rp-stats>div { padding: 11px 7px; border-right-color: rgba(122,160,198,.12); }
.rp-stats small { color: #8ba4bf; font-size: 9px; }
.rp-stats b { color: #e5f0fc; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.rp-desc {
  padding: 12px 14px;
  color: #b7cbe0;
  background: rgba(17,37,58,.42);
  border-bottom-color: rgba(122,160,198,.1);
  font-size: 11px; line-height: 1.6;
}
.rp-shakemap, .rp-pot, .rp-instr {
  margin: 10px 12px;
  border-radius: 13px;
  box-shadow: none;
  animation: none !important;
}
.rp-shakemap { border-color: rgba(139,177,211,.18); overflow: hidden; background: #0b1625; }
.rp-shakemap-h { padding: 9px 11px; background: rgba(22,43,66,.9); color: #b7ccdf; font-size: 10px; letter-spacing: .03em; }
.rp-shakemap img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.btn-detail-standalone {
  margin: 8px 12px 11px;
  width: calc(100% - 24px);
  padding: 12px;
  border: 1px solid rgba(85,214,245,.2);
  border-radius: 12px;
  background: linear-gradient(110deg, #187ca8, #14618d);
  box-shadow: none;
  color: #effaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.btn-detail-standalone:hover { background: linear-gradient(110deg, #2396c4, #1878a8); }
.rp-pot {
  background: rgba(11,81,57,.34);
  border: 1px solid rgba(79,209,161,.22);
  color: #a9f0d3;
  font-size: 11px; line-height: 1.55;
}
.rp-instr {
  background: rgba(102,69,24,.21);
  border: 1px solid rgba(247,185,90,.18);
  color: #f5d79d;
  font-size: 10px; line-height: 1.6;
}
.rp-instr b { color: #ffd181; font-size: 10px; }
.rp-links { gap: 6px; padding: 0 12px 10px; }
.rp-links a {
  border-radius: 9px;
  background: rgba(27,62,91,.42);
  border: 1px solid rgba(113,162,198,.17);
  color: #9fdaf4;
  padding: 7px 10px;
  font-size: 10px;
}
.rp-links a:hover { background: rgba(30,92,125,.38); }
.rp-quick { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 4px 12px 7px; }
.rp-quick .qbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-width: 0; min-height: 60px; padding: 8px 5px;
  border: 1px solid rgba(137,171,203,.16); border-radius: 12px;
  background: rgba(20,40,61,.65); color: #c9e3f5;
  font-size: 10px; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.rp-quick .qbtn:hover, .rp-quick .qbtn.on {
  background: rgba(24,100,137,.28); border-color: rgba(85,214,245,.32);
}
.rp-quick .qicon { color: var(--wrs-cyan); font-size: 18px; line-height: 1; }
.rp-quick-opts {
  display: flex; gap: 15px; align-items: center;
  padding: 3px 14px 8px; color: #9ab0c7; font-size: 10px;
}
.rp-quick-opts input { accent-color: var(--wrs-cyan); }
.rp-quick-status { margin: 0 14px 5px; color: #829bb4; font-size: 9px; line-height: 1.45; }
.rp-live {
  padding: 9px 14px;
  gap: 8px;
  color: #8fa8c0;
  border-top: 1px solid rgba(132,169,202,.1);
  font-size: 9px;
}
.rp-live i { flex: 0 0 7px; width: 7px; height: 7px; }
.rp-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top-color: rgba(132,169,202,.13);
  background: rgba(4,12,23,.28);
  color: #7f97af;
  font-size: 9px; line-height: 1.6;
}
.rp-foot b { color: #a8d9f2; }

.modal-overlay {
  padding: 18px;
  background: rgba(2,7,14,.77);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card {
  border: 1px solid rgba(149,184,216,.19);
  border-radius: 20px;
  background: #0b1727;
  box-shadow: 0 26px 80px rgba(0,0,0,.5);
  color: #e7f2ff;
}
.modal-close {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(6,16,29,.7);
  border: 1px solid rgba(148,183,219,.16);
  color: #d8e7f5;
}
.modal-close:hover { background: rgba(39,68,97,.8); color: #fff; }
.hist-header {
  padding: 18px 18px 8px;
  align-items: center;
}
.hist-header h2 { font-size: 18px; letter-spacing: -.02em; color: #f0f7ff; }
.hist-header > span { color: #8fa9c1; font-size: 10px; }
.filter-grid label { color: #a7bfd5; font-weight: 650; line-height: 1.45; }
.filter-grid select {
  background: #102239;
  border: 1px solid rgba(148,183,219,.2);
  color: #e7f2ff;
}
.filter-actions button, .modal-actions button, .modal-actions a {
  border-radius: 11px;
  min-height: 39px;
  padding: 10px 14px;
  font-weight: 750;
}
.btn-save { background: rgba(18,51,78,.7); border: 1px solid rgba(99,169,211,.24); color: #d3eeff; }
.btn-share { background: linear-gradient(110deg,#197ba8,#17658f); border: 1px solid rgba(85,214,245,.18); color: #fff; }
.modal-header.bmkg-style { border-radius: 18px 18px 0 0; background: linear-gradient(115deg,#102943,#15253a); }
.modal-actions { gap: 9px; }
.modal-actions a { display: inline-flex; align-items: center; color: #8edff4; text-decoration: none; }
.modal-tsunami { box-shadow: none; animation: none; }
.modal-tsunami.safe { box-shadow: none; }
.hist-card { max-width: 1100px; }
.hist-tsunami-banner { border-radius: 13px; }
.hist-table-wrap { scrollbar-width: thin; scrollbar-color: rgba(107,151,188,.4) transparent; }
.hist-table th { color: #8ba8c5; font-size: 10px; letter-spacing: .04em; }
.hist-table td { color: #d7e6f5; font-size: 11px; }
.hist-table tbody tr:hover { background: rgba(52,123,163,.12); }
.hist-actions { gap: 5px; }
.hist-actions button { border-radius: 9px; padding: 7px 9px; }
.popup-new {
  border: 1px solid rgba(255,108,120,.45);
  border-radius: 18px;
  background: rgba(21,14,24,.96);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(20px);
}
.popup-label { letter-spacing: .12em; }
.loading-overlay { background: rgba(3,9,17,.7); backdrop-filter: blur(7px); }
.loading-spinner { border-top-color: var(--wrs-cyan); }
.loading-text { color: #a4eaff; }

.mobile-page-title span { letter-spacing: -.03em; }
.nav-symbol { font-weight: 700; }

/* Medium screens: preserve a useful map area between the panels. */
@media (min-width: 901px) and (max-width: 1240px) {
  .right-panel { width: 330px; right: 10px; top: 10px; bottom: 10px; }
  .v-toolbar { right: 354px; gap: 5px; padding: 5px; }
  .tb-btn { width: 36px; height: 36px; }
  .basemap-menu { right: 402px; }
  .left-top { width: 295px; left: 10px; top: 69px; }
  .left-bottom { width: 295px; left: 10px; bottom: 10px; padding: 11px 12px; }
  .map-stats .stat-btn { min-width: 65px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .left-bottom { max-height: 39vh; overflow: auto; }
  .rp-mini-map { height: 112px; }
  .rp-shakemap img { max-height: 185px; }
}

/* Mobile screens: deliberate page hierarchy, no detached utilities floating over the map. */
@media (max-width: 900px) {
  .wrs-health {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(143px + env(safe-area-inset-bottom,0px));
    width: max-content;
    max-width: calc(100vw - 24px);
    margin-inline: auto;
    transform: none;
    justify-content: center;
    padding: 8px 10px;
    gap: 7px;
    font-size: 9px;
  }
  .wrs-health time { font-size: 9px; }
  .health-brand { font-size: 10px; }
  .left-top {
    top: calc(10px + env(safe-area-inset-top,0px));
    left: 10px;
    width: min(270px, calc(100vw - 78px));
    max-height: 35dvh;
    overflow: auto;
    border-radius: 17px;
  }
  .panel-header { padding: 10px 12px 9px; font-size: 10px; }
  .panel-sub { padding: 7px 12px 2px; font-size: 9px; }
  .rt-filter { padding: 3px 12px 0; font-size: 8px; }
  .rt-row { gap: 9px; padding: 9px 12px 7px; }
  .rt-mag { width: 55px; height: 55px; border-radius: 13px; font-size: 21px; }
  .rt-meta { font-size: 10px; }
  .rt-ago { font-size: 10px; }
  .rt-coord { padding: 0 12px 5px; font-size: 9px; }
  .rt-place { padding: 0 12px 5px; font-size: 10px; }
  .rt-dist { display: none; }
  .rt-src { padding: 0 12px 10px; font-size: 9px; }
  #mobilePageMap .map-stats {
    top: auto !important;
    bottom: calc(77px + env(safe-area-inset-bottom,0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 18px);
    max-width: 440px !important;
    padding: 5px !important;
    gap: 4px !important;
    border-radius: 15px;
  }
  #mobilePageMap .map-stats .stat-btn {
    min-width: 0 !important;
    padding: 7px 3px !important;
    border-radius: 10px;
  }
  #mobilePageMap .map-stats b { font-size: 15px !important; }
  #mobilePageMap .map-stats span { font-size: 7px !important; letter-spacing: .05em; }
  #mobilePageMap .v-toolbar {
    top: calc(10px + env(safe-area-inset-top,0px)) !important;
    right: 9px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 15px;
  }
  #mobilePageMap .tb-btn { width: 35px !important; height: 35px !important; border-radius: 10px; }
  #mobilePageMap .tb-btn svg { width: 15px; height: 15px; }
  #mobilePageMap .basemap-menu {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top,0px)) !important;
    right: 55px !important;
    bottom: auto !important;
    z-index: 30 !important;
  }
  #mobilePageInfo .right-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    overflow: visible !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    border: 1px solid var(--wrs-border) !important;
    background: rgba(10,22,38,.97) !important;
    box-shadow: none !important;
  }
  #mobilePageInfo .rp-sheet-handle { display: none !important; }
  #mobilePageInfo .rp-mag-bar { min-height: 88px !important; border-radius: 17px 17px 0 0 !important; }
  #mobilePageInfo .rp-mag { width: 88px !important; min-width: 88px !important; font-size: 35px !important; }
  #mobilePageInfo .rp-mag-info { padding: 10px 12px !important; }
  #mobilePageInfo .rp-mode { font-size: 9px !important; }
  #mobilePageInfo .rp-mini-map { height: 180px !important; min-height: 180px !important; margin: 10px 12px !important; border-radius: 13px; overflow: hidden; }
  #mobilePageInfo .rp-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; padding: 10px 12px; }
  #mobilePageInfo .rp-stats>div { background: rgba(17,37,58,.48); border: 1px solid rgba(132,169,202,.12); border-radius: 11px; padding: 10px !important; }
  #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;
    width: auto !important;
    max-width: none !important;
    inset: auto !important;
    transform: none !important;
    margin: 10px 12px !important;
    overflow-wrap: anywhere !important;
  }
  #mobilePageInfo .rp-quick { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 7px !important; padding: 0 !important; }
  #mobilePageInfo .rp-quick .qbtn { min-width: 0 !important; min-height: 65px !important; }
  #mobilePageInfo .rp-quick-opts { display:flex !important; flex-wrap: wrap !important; gap: 16px !important; padding: 9px !important; }
  #mobilePageInfo .rp-live { display:flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  #mobilePageInfo .rp-foot { font-size: 10px !important; line-height: 1.6 !important; }
  #mobilePageInfo .rp-links { display:flex !important; flex-wrap: wrap !important; gap: 7px !important; }
  #mobilePageInfo .ext-link { margin: 0 !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: 18px !important; background: rgba(10,22,38,.97) !important;
    box-shadow: none !important; border: 1px solid var(--wrs-border) !important;
  }
  .mobile-page-title { padding: 10px 3px 16px !important; color: #f1f7ff !important; font-size: 22px !important; }
  .mobile-page-title small { display: block !important; margin-top: 5px !important; color: #8fa9c1 !important; font-size: 11px !important; font-weight: 550 !important; }
  .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;
    background: rgba(5,13,23,.97) !important;
    border-top: 1px solid rgba(132,169,202,.16) !important;
    backdrop-filter: blur(20px) !important;
  }
  .mobile-bottom-nav button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #859eb7 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    min-width: 0 !important;
  }
  .mobile-bottom-nav button.active {
    color: #78ddff !important;
    background: linear-gradient(180deg,rgba(27,135,190,.22),rgba(18,75,115,.12)) !important;
    box-shadow: inset 0 0 0 1px rgba(75,190,240,.12) !important;
  }
  .mobile-bottom-nav .nav-symbol { font-size: 19px !important; line-height: 1.1 !important; }
  #filterModal, #modalHistory, #modalDetail, #modalTsunamiAlert, #loadingOverlay { z-index: 1200 !important; }
}
@media (max-width: 560px) {
  .wrs-health { gap: 6px; padding: 7px 9px; letter-spacing: .04em; }
  .wrs-health time { display: none; }
  #mobilePageMap .map-stats span { font-size: 6.5px !important; }
  #mobilePageMap .map-stats .stat-btn { padding-inline: 1px !important; }
  .modal-overlay { padding: 8px; align-items: flex-start; overflow-y: auto; }
  .modal-card { width: 100%; max-height: calc(100dvh - 16px); overflow-y: auto; border-radius: 16px; }
  .modal-body-grid { grid-template-columns: 1fr !important; }
  .hist-header { padding: 14px 14px 8px; }
  .hist-card { width: 100%; }
  .hist-body { grid-template-columns: 1fr !important; }
  .hist-map { min-height: 220px; }
  .hist-table-wrap { overflow-x: auto; }
  .hist-table { min-width: 590px; }
  .filter-grid { grid-template-columns: 1fr !important; }
  .modal-actions { display: flex; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Operational diagnostics panel: compact, readable, and safe on mobile layouts. */
.wrs-diagnostics{margin-top:10px;border:1px solid rgba(148,163,184,.22);border-radius:10px;background:rgba(7,17,31,.55);color:#dbe7f5;font-size:11px}
.wrs-diagnostics summary{cursor:pointer;padding:10px 11px;font-weight:700;letter-spacing:.02em}
.wrs-diagnostics dl{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr);gap:7px 10px;margin:0;padding:0 11px 10px}
.wrs-diagnostics dt{color:#9fb0c6}
.wrs-diagnostics dd{margin:0;overflow-wrap:anywhere;color:#e5edf7}
.wrs-diagnostics p{margin:0;padding:0 11px 10px;color:#9fb0c6;line-height:1.45}


/* International tsunami-center messages: supplemental and explicitly non-authoritative for Indonesia. */
.global-tsunami-panel {
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid rgba(96, 204, 235, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 30, 48, .96), rgba(8, 20, 35, .96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  color: #e8f7ff;
}
.global-tsunami-heading { display:flex; align-items:center; gap:11px; }
.global-tsunami-emblem {
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border:1px solid rgba(104, 220, 248, .4);
  border-radius:12px; background:rgba(28, 117, 151, .18);
  color:#82e8ff; font-size:25px; font-weight:900;
}
.global-tsunami-heading b { display:block; font-size:13px; font-weight:900; letter-spacing:.02em; }
.global-tsunami-heading span:not(.global-tsunami-emblem) { display:block; margin-top:4px; color:#9eb9ca; font-size:11px; line-height:1.5; }
.global-tsunami-status { margin:12px 0 9px; color:#9bdcef; font-size:10px; font-weight:800; letter-spacing:.045em; }
.global-tsunami-items { display:grid; gap:9px; }
.global-tsunami-item {
  min-width:0; padding:11px 12px; border:1px solid rgba(139, 177, 202, .18);
  border-radius:12px; background:rgba(4, 15, 28, .68);
}
.global-tsunami-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.global-tsunami-badge {
  display:inline-flex; align-items:center; border:1px solid rgba(103, 218, 242, .36);
  border-radius:999px; padding:3px 7px; color:#9decff; background:rgba(27, 116, 148, .15);
  font-size:9px; font-weight:900; letter-spacing:.08em;
}
.global-tsunami-item time { color:#91aabd; font-size:10px; text-align:right; }
.global-tsunami-item h4 { margin:9px 0 5px; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.global-tsunami-item p { margin:0 0 7px; color:#c1d3e1; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.global-tsunami-item small { display:block; color:#8faabc; font-size:10px; line-height:1.5; }
.global-tsunami-item a { display:inline-block; margin-top:9px; color:#75e2fa; font-size:11px; font-weight:850; text-decoration:none; }
.global-tsunami-item a:hover { text-decoration:underline; }
.global-tsunami-empty { padding:12px; border:1px dashed rgba(148, 179, 200, .28); border-radius:11px; color:#b5c9d8; font-size:11px; line-height:1.65; }
.global-tsunami-caveat { margin:12px 0 0; color:#e8c98f; font-size:10px; line-height:1.65; }
.global-tsunami-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.global-tsunami-links a { display:inline-flex; align-items:center; border:1px solid rgba(125, 163, 192, .27); border-radius:9px; padding:7px 9px; color:#c5e7f6; font-size:10px; font-weight:800; text-decoration:none; background:rgba(8, 24, 39, .72); }
.global-tsunami-links a:hover { border-color:rgba(93, 218, 247, .54); }
@media (max-width: 640px) {
  .global-tsunami-panel { padding:11px; border-radius:13px; }
  .global-tsunami-item { padding:10px; }
  .global-tsunami-item h4 { font-size:12px; }
  .global-tsunami-links { display:grid; grid-template-columns:1fr; }
  .global-tsunami-links a { justify-content:center; }
}

/* USGS tsunami flag is supplemental metadata, never an official all-clear or active local warning. */
.modal-tsunami.usgs-neutral {
  background: linear-gradient(135deg, #3c2a07, #1d180b) !important;
  border-color: rgba(236, 185, 72, .45) !important;
  color: #ffdf9c !important;
  box-shadow: none !important;
  animation: none !important;
}


/* Accessible day/night UI theme. The map imagery stays independent from chrome. */
html[data-wrs-theme="light"] {
  color-scheme: light;
  --wrs-bg: #f3f6fb;
  --wrs-surface: rgba(255, 255, 255, .96);
  --wrs-surface-2: rgba(247, 250, 255, .97);
  --wrs-border: rgba(34, 65, 96, .16);
  --wrs-muted: #5c6f84;
  --wrs-text: #122337;
  --wrs-cyan: #087eaa;
  --wrs-blue: #1464a0;
  --wrs-shadow: 0 14px 38px rgba(28, 52, 78, .14);
}
html[data-wrs-theme="light"] body {
  color-scheme: light;
  background: #f3f6fb;
  color: #122337;
}
html[data-wrs-theme="light"] .map-overlay {
  background: linear-gradient(180deg, rgba(241,247,253,.16), transparent 24%, transparent 72%, rgba(241,247,253,.08));
  pointer-events: none;
}
html[data-wrs-theme="light"] .glass-panel,
html[data-wrs-theme="light"] .wrs-health,
html[data-wrs-theme="light"] .map-stats,
html[data-wrs-theme="light"] .mobile-bottom-nav,
html[data-wrs-theme="light"] .mobile-page,
html[data-wrs-theme="light"] #rightPanel,
html[data-wrs-theme="light"] .modal-card,
html[data-wrs-theme="light"] .modal-content {
  color: #122337 !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(47,79,112,.18) !important;
  box-shadow: 0 10px 28px rgba(25,47,70,.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
}
html[data-wrs-theme="light"] .panel-header,
html[data-wrs-theme="light"] .panel-sub,
html[data-wrs-theme="light"] .rt-meta,
html[data-wrs-theme="light"] .rt-ago,
html[data-wrs-theme="light"] .rt-coord,
html[data-wrs-theme="light"] .rt-dist,
html[data-wrs-theme="light"] .rt-src,
html[data-wrs-theme="light"] .mobile-page-title small,
html[data-wrs-theme="light"] .more-caption,
html[data-wrs-theme="light"] .world-clock-panel small,
html[data-wrs-theme="light"] .world-clock-panel time {
  color: #566b80 !important;
}
html[data-wrs-theme="light"] .rt-place,
html[data-wrs-theme="light"] .world-clock-panel strong,
html[data-wrs-theme="light"] .mobile-page-title,
html[data-wrs-theme="light"] .mobile-page h2,
html[data-wrs-theme="light"] .mobile-page h3,
html[data-wrs-theme="light"] .left-bottom,
html[data-wrs-theme="light"] .rp-title,
html[data-wrs-theme="light"] .rp-mag-bar,
html[data-wrs-theme="light"] .stat-btn,
html[data-wrs-theme="light"] .mobile-bottom-nav button {
  color: #122337 !important;
}
html[data-wrs-theme="light"] .stat-btn,
html[data-wrs-theme="light"] .mobile-bottom-nav button {
  background: rgba(245,249,253,.94) !important;
  border-color: rgba(62,91,120,.18) !important;
}
html[data-wrs-theme="light"] .mobile-bottom-nav button.active,
html[data-wrs-theme="light"] .mobile-bottom-nav button[aria-current="page"] {
  color: #075985 !important;
  background: #dceff9 !important;
}
html[data-wrs-theme="light"] .v-toolbar .tb-btn,
html[data-wrs-theme="light"] #vToolbar .tb-btn,
html[data-wrs-theme="light"] .basemap-menu,
html[data-wrs-theme="light"] .bm-opt {
  color: #17314a !important;
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(52,82,111,.20) !important;
  box-shadow: 0 6px 18px rgba(26,48,70,.12) !important;
}
html[data-wrs-theme="light"] .bm-opt.active,
html[data-wrs-theme="light"] .bm-opt:hover {
  color: #075985 !important;
  background: #e4f4fc !important;
}
html[data-wrs-theme="light"] .leaflet-control-zoom a {
  color: #15324d !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(52,82,111,.18) !important;
}
html[data-wrs-theme="light"] .leaflet-control-attribution {
  color: #526a80 !important;
  background: rgba(255,255,255,.84) !important;
}
html[data-wrs-theme="light"] .leaflet-control-attribution a { color: #075985 !important; }
html[data-wrs-theme="light"] .leaflet-popup-content-wrapper,
html[data-wrs-theme="light"] .leaflet-popup-tip {
  color: #13283c !important;
  background: #fff !important;
  border-color: rgba(52,82,111,.18) !important;
}
html[data-wrs-theme="light"] input,
html[data-wrs-theme="light"] select,
html[data-wrs-theme="light"] textarea {
  color: #122337;
  background: #fff;
  border-color: #c7d4e1;
}
html[data-wrs-theme="light"] .wrs-alert-card,
html[data-wrs-theme="light"] .wrs-alert-news-card,
html[data-wrs-theme="light"] .wrs-news-card,
html[data-wrs-theme="light"] .wrs-news-toolbar {
  color: #122337 !important;
  background: linear-gradient(145deg,#fff,#f2f7fc) !important;
  border-color: rgba(47,79,112,.17) !important;
  box-shadow: 0 5px 16px rgba(25,47,70,.08) !important;
}
html[data-wrs-theme="light"] .wrs-alert-card p,
html[data-wrs-theme="light"] .wrs-alert-news-card p,
html[data-wrs-theme="light"] .wrs-alert-news-card small,
html[data-wrs-theme="light"] .wrs-news-card small,
html[data-wrs-theme="light"] .wrs-news-footnote {
  color: #50657a !important;
}
html[data-wrs-theme="light"] .wrs-alert-card a,
html[data-wrs-theme="light"] .wrs-alert-news-card a,
html[data-wrs-theme="light"] .wrs-news-open {
  color: #075985 !important;
}
html[data-wrs-theme="light"] .wrs-health {
  color: #17324b !important;
}
html[data-wrs-theme="light"] #loadingOverlay {
  color: #17324b;
  background: rgba(245,249,253,.92);
}
@media (prefers-reduced-transparency: reduce) {
  html[data-wrs-theme="light"] .glass-panel,
  html[data-wrs-theme="light"] .wrs-health,
  html[data-wrs-theme="light"] .map-stats,
  html[data-wrs-theme="light"] .mobile-bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Consistent outline icons for mobile navigation and map controls. */
.mobile-bottom-nav .nav-symbol {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-bottom-nav .nav-symbol svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-wrs-theme="light"] .app-topbar {
  color: #122337 !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(47,79,112,.18) !important;
  box-shadow: 0 8px 24px rgba(25,47,70,.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
}
html[data-wrs-theme="light"] .app-topbar *,
html[data-wrs-theme="light"] .panel-header,
html[data-wrs-theme="light"] .wrs-alert-intro,
html[data-wrs-theme="light"] .wrs-alert-section-title {
  color: #17314a;
}
html[data-wrs-theme="light"] .wrs-mode-switch button,
html[data-wrs-theme="light"] .wrs-test-actions button {
  color: #17314a !important;
  background: #f0f6fb !important;
  border-color: #c6d7e5 !important;
}


/* Keep map interaction responsive on mid-range Android WebViews. */
@media (max-width: 900px) {
  .glass-panel,
  .wrs-health,
  .map-stats,
  .mobile-bottom-nav,
  .basemap-menu,
  .modal-card,
  .modal-content {
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }
  .tb-btn,
  .mobile-bottom-nav button,
  .stat-btn {
    transition-duration: .12s;
  }
}


/* Keep the health indicator readable on small screens without covering controls. */
.wrs-health { min-width: 0; }
#wrsHealthText { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wrs-health time { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .wrs-health {
    left: 8px;
    right: 8px;
    width: fit-content;
    max-width: calc(100vw - 16px);
    margin-inline: auto;
    justify-content: flex-start;
  }
  #wrsHealthText {
    max-width: calc(100vw - 135px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wrs-health time { display: none; }
}


/* ===== Detail modal polish: safe mobile viewport and MMI legend palette ===== */
.mmi-list { display: grid; gap: 8px; }
.mmi-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 11px; border: 1px solid rgba(136,170,203,.17);
  border-radius: 12px; background: linear-gradient(115deg, rgba(22,42,64,.72), rgba(9,22,37,.78));
  color: #e5effb; font-size: 12px; line-height: 1.4;
}
.mmi-badge {
  display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto;
  min-width: 54px; min-height: 32px; padding: 5px 9px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.27); color: #102033; font-size: 11px;
  line-height: 1.1; font-weight: 900; letter-spacing: -.01em;
  box-shadow: inset 0 1px rgba(255,255,255,.26), 0 4px 10px rgba(0,0,0,.13);
}
.mmi-place { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.mmi-level-i { background: linear-gradient(145deg,#e5e7eb,#cbd5e1); color:#334155; }
.mmi-level-ii-iii { background: linear-gradient(145deg,#dbeafe,#93c5fd); color:#183a62; }
.mmi-level-iv { background: linear-gradient(145deg,#dcfce7,#86efac); color:#14532d; }
.mmi-level-v { background: linear-gradient(145deg,#d9f99d,#a3e635); color:#365314; }
.mmi-level-vi { background: linear-gradient(145deg,#fef08a,#facc15); color:#713f12; }
.mmi-level-vii { background: linear-gradient(145deg,#fed7aa,#fb923c); color:#7c2d12; }
.mmi-level-viii { background: linear-gradient(145deg,#fdba74,#f97316); color:#7c2d12; }
.mmi-level-ix { background: linear-gradient(145deg,#fca5a5,#ef4444); color:#7f1d1d; }
.mmi-level-x-plus { background: linear-gradient(145deg,#f87171,#b91c1c); color:#fff7f7; }
.mmi-level-unknown { background: linear-gradient(145deg,#cbd5e1,#64748b); color:#0f172a; }

.modal-mmi, .modal-params { min-width: 0; }
.modal-params .mmi-h, .modal-mmi .mmi-h {
  margin: 0 0 10px; color: #9db1c7; font-size: 10px; line-height: 1.5;
  font-weight: 850; letter-spacing: .075em; text-transform: uppercase;
}
.param-row {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0;
  margin: 6px 0; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(147,172,196,.2);
  background: linear-gradient(120deg, rgba(25,43,58,.94), rgba(13,29,44,.95));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  color: #b7c6d6; font-size: 12px; line-height: 1.45;
}
.param-icon { flex: 0 0 16px; color: #8bdaf0; font-size: 14px; line-height: 1.25; }
.param-row b {
  flex: 1 1 auto; min-width: 0; margin-left: auto; color: #edf6ff;
  font-size: 12px; font-weight: 800; text-align: right; overflow-wrap: anywhere;
}
.param-row:has(#modalRegion) { align-items: center; }
.param-row #modalRegion { width: 100%; margin-left: 0; text-align: left; }
.modal-tsunami {
  display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  align-items: center; gap: 12px; margin: 13px 0 10px; padding: 14px;
  border-radius: 16px; line-height: 1.5;
}
.modal-tsunami .ts-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 950; letter-spacing: .03em; text-align: center;
}
#modalTsunamiText { min-width: 0; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.modal-instr {
  margin: 10px 0 4px; padding: 15px; border-radius: 16px;
  border: 1px solid rgba(244,183,91,.24);
  background: linear-gradient(135deg, rgba(75,47,19,.5), rgba(24,22,24,.92));
  color: #ecd9b2; font-size: 12px; line-height: 1.7;
}
.modal-instr b { display: block; margin-bottom: 8px; color: #ffd27d; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.modal-instr p { margin: 0; color: #f2e4c5; overflow-wrap: anywhere; }

#wrsPullRefreshIndicator {
  position: fixed; z-index: 3000; top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%; display: flex; align-items: center; gap: 9px; min-height: 42px;
  max-width: calc(100vw - 30px); padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(104,205,237,.29); background: rgba(7,21,36,.97);
  box-shadow: 0 12px 32px rgba(0,0,0,.38); color: #d9f5ff;
  font: 750 11px/1.25 Inter,system-ui,sans-serif; white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translate(-50%,-150%) scale(.96);
  transition: transform .22s ease, opacity .2s ease;
}
#wrsPullRefreshIndicator.is-pulling { opacity: 1; transform: translate(-50%,0) scale(1); }
.wrs-pull-spinner {
  display: block; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  border: 2px solid rgba(103,232,249,.22); border-top-color: #67e8f9; border-right-color: #38bdf8;
}
#wrsPullRefreshIndicator.is-pulling .wrs-pull-spinner { animation: wrsPullSpin .7s linear infinite; }
#wrsPullRefreshIndicator.is-ready { border-color: rgba(74,222,128,.42); }
#wrsPullRefreshIndicator.is-ready .wrs-pull-spinner { border-top-color: #4ade80; border-right-color: #86efac; }
#wrsPullRefreshIndicator.is-done .wrs-pull-spinner { border-color: #4ade80; border-top-color: #4ade80; animation: none; }
#wrsPullRefreshIndicator.is-error .wrs-pull-spinner { border-color: #fb7185; border-top-color: #fb7185; animation: none; }
@keyframes wrsPullSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  #modalDetail, #modalHistory, #filterModal, #modalTsunamiAlert {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-right: 0; padding-left: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch; overscroll-behavior: contain;
  }
  #modalDetail .modal-card {
    display: flex; flex-direction: column; width: 100%; max-width: none;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px);
    min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; scrollbar-width: thin; scrollbar-color: rgba(91,142,177,.42) transparent;
  }
  #modalDetail .modal-header { position: relative; flex: 0 0 auto; min-height: 108px; padding: 15px 58px 14px 14px; border-radius: 17px 17px 0 0; }
  #modalDetail .modal-mag-badge { width: 72px; min-width: 72px; height: 76px; flex: 0 0 72px; font-size: 30px; }
  #modalDetail .modal-title-block { min-width: 0; flex: 1 1 auto; }
  #modalDetail .modal-label { font-size: 11px; line-height: 1.35; }
  #modalDetail .modal-time { margin-top: 5px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
  #modalDetail .modal-sent { margin-top: 5px; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
  #modalDetail .modal-bmkg-logo { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; }
  #modalDetail .modal-body-grid { display: flex; flex-direction: column; gap: 13px; padding: 12px; min-height: 0; }
  #modalDetail .modal-left, #modalDetail .modal-right { display: block; width: 100%; min-width: 0; }
  #modalDetail .modal-shakemap { margin: 0; border-radius: 14px; overflow: hidden; }
  #modalDetail .modal-shakemap .mmi-h { padding: 10px 12px; }
  #modalDetail .modal-shakemap img { display: block; width: 100%; max-height: min(37dvh, 330px); object-fit: contain; background: #f8fafc; }
  #modalDetail .modal-right { display: flex; flex-direction: column; gap: 12px; }
  #modalDetail .modal-mmi, #modalDetail .modal-params { padding: 0; }
  #modalDetail .mmi-list { gap: 7px; }
  #modalDetail .mmi-item { min-height: 48px; padding: 8px 10px; }
  #modalDetail .modal-tsunami { grid-template-columns: minmax(86px, auto) minmax(0, 1fr); gap: 10px; margin: 0; padding: 12px; }
  #modalDetail .modal-tsunami .ts-icon { min-height: 36px; padding: 6px; font-size: 11px; }
  #modalDetail #modalTsunamiText { font-size: 12px; }
  #modalDetail .modal-instr { margin: 0; padding: 13px; }
  #modalDetail .modal-actions {
    position: sticky; bottom: 0; z-index: 8; flex: 0 0 auto;
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: auto;
    padding: 11px 12px calc(12px + env(safe-area-inset-bottom,0px));
    border-top: 1px solid rgba(122,166,198,.14);
    background: linear-gradient(180deg, rgba(8,19,32,.95), rgba(5,14,25,.99));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  #modalDetail .modal-actions .btn-save, #modalDetail .modal-actions .btn-share { width: 100%; min-width: 0; }
  #modalDetail .modal-actions a { grid-column: 1 / -1; justify-content: center; margin: 0; }
  .param-row { gap: 8px; padding: 10px; font-size: 11px; }
  .param-row b { font-size: 11px; }
  .modal-tsunami { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #wrsPullRefreshIndicator, .wrs-pull-spinner { transition: none !important; animation-duration: .01ms !important; }
}


/* Regional/magnitude push preferences in the mobile "Lainnya" page. */
.wrs-push-filter-card {
  margin: 10px 0 16px; padding: 17px; border-radius: 20px;
  border: 1px solid rgba(72,190,225,.25);
  background: linear-gradient(145deg, rgba(13,37,58,.97), rgba(7,21,37,.98));
  box-shadow: 0 14px 32px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
  color: #e9f5ff; min-width: 0;
}
.wrs-push-filter-kicker {
  color: #6ed9f4; font-size: 9px; font-weight: 900; letter-spacing: .16em;
}
#wrsPushFilterTitle { margin: 5px 0 7px; font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.wrs-push-filter-desc { margin: 0 0 14px; color: #a6bacd; font-size: 12px; line-height: 1.6; }
.wrs-push-region-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.wrs-push-region-grid label {
  display: flex; align-items: center; gap: 9px; min-height: 43px; min-width: 0;
  padding: 9px 10px; border-radius: 12px;
  border: 1px solid rgba(126,166,197,.2);
  background: rgba(15,33,51,.84); color: #dbe9f7;
  font-size: 11px; font-weight: 700; line-height: 1.3;
}
.wrs-push-region-grid label:has(input:checked) {
  border-color: rgba(64,211,170,.58);
  background: linear-gradient(120deg,rgba(11,96,77,.45),rgba(17,49,62,.84));
  color: #f0fff9;
}
.wrs-push-region-grid input {
  flex: 0 0 16px; width: 16px; height: 16px; margin: 0;
  accent-color: #34d399;
}
.wrs-push-region-grid span { min-width: 0; overflow-wrap: anywhere; }
.wrs-push-mag-label { display: grid; gap: 7px; margin: 14px 0 10px; color: #a9bfd2; font-size: 11px; font-weight: 800; }
#wrsSmallPushMinMagnitude {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(90,190,222,.3); background: #0a1b2d; color: #eaf8ff;
  font: 800 13px/1.3 Inter,system-ui,sans-serif;
}
.wrs-push-save {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 45px;
  padding: 11px 14px; border: 1px solid rgba(73,223,184,.4); border-radius: 13px;
  background: linear-gradient(135deg,#087d70,#159e81); color: #f0fffb;
  font: 850 12px/1.3 Inter,system-ui,sans-serif; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 7px 17px rgba(4,120,87,.18);
}
.wrs-push-save:active { transform: scale(.985); }
.wrs-push-pref-status { margin: 9px 0 0; color: #8dd8ec; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.wrs-push-safety-note {
  margin: 12px 0 0; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(251,191,36,.24); background: rgba(97,64,12,.16);
  color: #e7d6b3; font-size: 10px; line-height: 1.6;
}
.wrs-push-safety-note strong { color: #ffd27b; }
@media(max-width:420px) {
  .wrs-push-filter-card { padding: 14px; border-radius: 17px; }
  #wrsPushFilterTitle { font-size: 17px; }
  .wrs-push-region-grid { gap: 7px; }
  .wrs-push-region-grid label { padding: 8px; font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .wrs-push-save { transition:none; } }


/* FINAL MOBILE SHEET FIX: scroll only the content area; footer never overlays details. */
@media (max-width: 640px) {
  #modalDetail.modal-overlay:not(.hidden), #modalHistory.modal-overlay:not(.hidden),
  #filterModal.modal-overlay:not(.hidden), #modalTsunamiAlert.tsunami-overlay:not(.hidden) {
    position:fixed!important; inset:0!important; box-sizing:border-box!important;
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    justify-content:flex-start!important;
    padding-top:calc(env(safe-area-inset-top,0px) + 8px)!important;
    padding-right:0!important; padding-left:0!important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px)!important;
    overflow:hidden!important; overscroll-behavior:none!important;
  }
  #modalDetail .modal-card {
    display:flex!important; flex:1 1 auto!important; flex-direction:column!important;
    width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important;
    min-height:0!important; margin:0!important; padding:0!important; overflow:hidden!important;
    border-radius:18px 18px 0 0!important; animation:none!important; overscroll-behavior:none!important;
  }
  #modalDetail .modal-header { position:relative!important; flex:0 0 auto!important; }
  #modalDetail .modal-body-grid {
    display:flex!important; flex:1 1 auto!important; flex-direction:column!important;
    min-height:0!important; height:auto!important; overflow-x:hidden!important; overflow-y:auto!important;
    overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important; scrollbar-gutter:stable;
  }
  #modalDetail .modal-left, #modalDetail .modal-right {
    flex:0 0 auto!important; min-height:auto!important; overflow:visible!important;
  }
  #modalDetail .modal-actions {
    position:relative!important; inset:auto!important; flex:0 0 auto!important; margin:0!important;
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid rgba(122,166,198,.18)!important;
    background:rgba(5,14,25,.99)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
    box-shadow:0 -8px 22px rgba(0,0,0,.24)!important;
  }
  #modalDetail .modal-actions .btn-save, #modalDetail .modal-actions .btn-share {
    width:100%!important; min-width:0!important; min-height:46px!important;
  }
  #modalDetail .modal-actions a {
    grid-column:1/-1!important; margin:0!important; padding:7px 0 2px!important; text-align:center!important;
  }
  #modalTsunamiAlert .tsunami-card {
    display:flex!important; flex:1 1 auto!important; flex-direction:column!important;
    width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important;
    min-height:0!important; margin:0!important; padding:0!important; overflow:hidden!important;
    border-radius:18px 18px 0 0!important; animation:none!important; overscroll-behavior:none!important;
  }
  #modalTsunamiAlert .tsunami-header { flex:0 0 auto!important; padding-top:12px!important; }
  #modalTsunamiAlert .tsunami-body {
    flex:1 1 auto!important; min-height:0!important; height:auto!important;
    overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important;
  }
  #modalTsunamiAlert .tsunami-actions {
    position:relative!important; inset:auto!important; flex:0 0 auto!important; margin:0!important;
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(5,12,23,.99)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  }
  #modalTsunamiAlert .tsunami-actions .btn-save, #modalTsunamiAlert .tsunami-actions .btn-share,
  #modalTsunamiAlert .tsunami-actions .btn-close-ts {
    width:100%!important; min-width:0!important; margin:0!important;
  }
  #modalTsunamiAlert .tsunami-actions a { grid-column:1/-1!important; margin:0!important; text-align:center!important; }
  body.wrs-detail-sheet-open { overflow:hidden!important; overscroll-behavior:none!important; }
}


/* Hidden sheets must remain hidden; active layout rules must not reopen them. */
@media (max-width: 640px) {
  #modalDetail.modal-overlay.hidden,
  #modalHistory.modal-overlay.hidden,
  #filterModal.modal-overlay.hidden,
  #modalTsunamiAlert.tsunami-overlay.hidden {
    display: none !important;
    pointer-events: none !important;
  }
}


/* Modern status diagnostics and on-device push-history panels. */
.wrs-diagnostic-card,.wrs-notification-history-card {
  margin:12px 0 16px;padding:17px;min-width:0;border-radius:20px;color:#eaf5ff;
  border:1px solid rgba(83,164,210,.24);
  background:radial-gradient(circle at 100% 0%,rgba(16,110,155,.16),transparent 45%),linear-gradient(145deg,rgba(12,31,49,.98),rgba(6,18,32,.99));
  box-shadow:0 14px 30px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
}
.wrs-observer-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#wrsDiagnosticsTitle,#wrsPushHistoryTitle{margin:5px 0 7px;font-size:19px;line-height:1.24;letter-spacing:-.025em}
.wrs-observer-heading .wrs-push-filter-desc{max-width:260px;margin-bottom:10px}
.wrs-diagnostic-orb{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:15px;border:1px solid rgba(72,211,243,.24);background:linear-gradient(145deg,rgba(18,102,132,.33),rgba(9,36,60,.7))}
.wrs-diagnostic-orb span{width:10px;height:10px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 5px rgba(94,234,212,.12),0 0 18px rgba(94,234,212,.38)}
.wrs-diagnostic-state{margin:8px 0 11px;padding:11px 12px;border-radius:12px;border:1px solid rgba(108,165,201,.2);background:rgba(8,22,37,.78);color:#c1d4e5;font-size:11px;line-height:1.55}
.wrs-diagnostic-state.is-working{color:#a5f3fc;border-color:rgba(34,211,238,.28)}
.wrs-diagnostic-state.is-ok{color:#a7f3d0;border-color:rgba(52,211,153,.27);background:rgba(6,78,59,.19)}
.wrs-diagnostic-state.is-warning{color:#fde68a;border-color:rgba(251,191,36,.3);background:rgba(120,53,15,.16)}
.wrs-diagnostic-state.is-error{color:#fecaca;border-color:rgba(248,113,113,.32);background:rgba(127,29,29,.18)}
.wrs-diagnostic-rows{display:grid;gap:7px}
.wrs-diagnostic-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:10px 11px;border-radius:12px;border:1px solid rgba(127,161,190,.13);background:rgba(14,31,48,.68)}
.wrs-diagnostic-row-main{display:grid;gap:3px;min-width:0}
.wrs-diagnostic-row-label{color:#dceaf6;font-size:11px;font-weight:800}
.wrs-diagnostic-row-note{color:#8fa6bc;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.wrs-diagnostic-pill{flex:0 0 auto;max-width:46%;padding:5px 8px;border-radius:9px;font-size:9px;font-weight:900;text-align:center;overflow-wrap:anywhere;border:1px solid rgba(148,163,184,.17);background:rgba(51,65,85,.34);color:#dbeafe}
.wrs-diagnostic-pill.ok{color:#a7f3d0;border-color:rgba(52,211,153,.24);background:rgba(6,95,70,.22)}
.wrs-diagnostic-pill.warn{color:#fde68a;border-color:rgba(251,191,36,.24);background:rgba(120,53,15,.2)}
.wrs-diagnostic-pill.info{color:#bae6fd;border-color:rgba(56,189,248,.19);background:rgba(7,89,133,.18)}
.wrs-diagnostic-empty{padding:14px 10px;border:1px dashed rgba(128,164,195,.22);border-radius:12px;color:#8ea5bb;font-size:11px;line-height:1.5;text-align:center}
.wrs-diagnostic-refresh{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:44px;margin-top:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(52,211,153,.3);background:linear-gradient(135deg,#075f56,#0e8d77);color:#edfffb;font:850 11px/1.3 Inter,system-ui,sans-serif;cursor:pointer}
.wrs-diagnostic-refresh span{font-size:18px;line-height:1}
.wrs-diagnostic-refresh.is-loading span{animation:wrsDiagSpin .7s linear infinite}
.wrs-diagnostic-refresh:disabled{opacity:.65;cursor:wait}
@keyframes wrsDiagSpin{to{transform:rotate(360deg)}}
.wrs-diagnostic-footnote{margin:10px 0 0;color:#8098ad;font-size:9px;line-height:1.55}
.wrs-diagnostic-errors{margin-top:9px;padding:10px;border-radius:11px;background:rgba(92,28,28,.17);border:1px solid rgba(248,113,113,.2);color:#fecaca;font-size:10px;line-height:1.5}
.wrs-diagnostic-errors summary{cursor:pointer;font-weight:850}
.wrs-diagnostic-errors ul{margin:8px 0 0;padding-left:18px}
.wrs-diagnostic-errors li{margin:4px 0;overflow-wrap:anywhere}
.wrs-history-toolbar{display:flex;gap:8px;margin:11px 0}
.wrs-history-action{display:flex;justify-content:center;align-items:center;flex:1 1 0;min-height:38px;border-radius:10px;padding:8px 10px;border:1px solid rgba(61,175,216,.24);background:rgba(9,66,91,.25);color:#bdeeff;font:800 10px/1.25 Inter,system-ui,sans-serif;cursor:pointer}
.wrs-history-action.is-quiet{border-color:rgba(148,163,184,.17);background:rgba(30,41,59,.45);color:#b8c6d6}
.wrs-history-status{margin-bottom:8px;color:#9bb1c5;font-size:10px;line-height:1.45}
.wrs-history-list{display:grid;gap:8px}
.wrs-history-item{padding:11px;border-radius:13px;background:rgba(12,29,46,.8);border:1px solid rgba(125,162,192,.16);min-width:0}
.wrs-history-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wrs-history-heading strong{min-width:0;color:#e4f3ff;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.wrs-history-heading time{flex:0 0 auto;color:#87a1b8;font-size:9px;white-space:nowrap}
.wrs-history-item p{margin:7px 0 8px;color:#b4c5d6;font-size:10px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.wrs-history-tags{display:flex;flex-wrap:wrap;gap:5px}
.wrs-history-tags span{padding:4px 6px;border-radius:7px;border:1px solid rgba(75,165,203,.19);background:rgba(13,74,101,.19);color:#9dddf2;font-size:8px;line-height:1.35;font-weight:800}
@media(max-width:420px){.wrs-diagnostic-card,.wrs-notification-history-card{padding:14px;border-radius:17px}#wrsDiagnosticsTitle,#wrsPushHistoryTitle{font-size:17px}.wrs-diagnostic-row{padding:9px}.wrs-diagnostic-pill{max-width:42%}.wrs-history-heading{flex-direction:column;gap:3px}}
@media(prefers-reduced-motion:reduce){.wrs-diagnostic-refresh.is-loading span{animation:none}}


/* One-tap copy for the on-demand source report. */
.wrs-diagnostic-copy {
  display:flex; align-items:center; justify-content:center; width:100%; min-height:42px;
  margin-top:8px; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(91,190,225,.32);
  background:linear-gradient(135deg,rgba(17,68,102,.54),rgba(10,35,58,.8));
  color:#dff5ff; font:800 11px/1.35 Inter,system-ui,sans-serif; cursor:pointer;
}
.wrs-diagnostic-copy:focus-visible { outline:2px solid rgba(91,210,240,.75); outline-offset:2px; }
.wrs-diagnostic-copy:active { transform:translateY(1px); }
.wrs-diagnostic-copy-status { margin:7px 0 0; color:#829bb2; font-size:9px; line-height:1.5; overflow-wrap:anywhere; }


/* Responsive map-detail loading state: show an intentional placeholder while MMI imagery arrives. */
#modalShakemapBox{position:relative;min-width:0}
#modalShakemapBox.wrs-map-loading{
  min-height:150px;border-radius:12px;overflow:hidden;
  background:linear-gradient(110deg,rgba(14,34,51,.96) 20%,rgba(30,66,88,.96) 36%,rgba(14,34,51,.96) 52%);
  background-size:220% 100%;
  animation:wrsMapSkeleton 1.3s ease-in-out infinite;
}
#modalShakemapBox.wrs-map-loading::after{
  content:"Memuat peta intensitas gempa…";
  position:absolute;inset:auto 10px 12px;
  display:block;text-align:center;color:#a8d9ed;
  font-size:11px;font-weight:750;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
#modalShakemapBox.wrs-map-loading img{opacity:0;min-height:125px}
#modalShakemapBox:not(.wrs-map-loading) img{opacity:1;transition:opacity .16s ease}
@keyframes wrsMapSkeleton{to{background-position-x:-220%}}
@media(prefers-reduced-motion:reduce){#modalShakemapBox.wrs-map-loading{animation:none;background:#0e2233}}