/* 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); }

.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, rgba(30,88,126,.9), rgba(10,32,55,.96));
  border: 1px solid rgba(85,214,245,.35);
  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; }
}