/* WRS GEMPA — unified dark visual system v1.11.6
   Presentation-only refresh: no API, feed, notification transport, or polling changes. */
:root {
  color-scheme: dark !important;
  --wrs-bg-deep: #050b14;
  --wrs-bg: #07111f;
  --wrs-panel: rgba(10, 25, 40, .97);
  --wrs-panel-raised: rgba(15, 35, 53, .98);
  --wrs-line: rgba(91, 181, 218, .23);
  --wrs-line-strong: rgba(66, 202, 242, .52);
  --wrs-text: #eef7ff;
  --wrs-text-muted: #a1b6ca;
  --wrs-cyan: #65def7;
  --wrs-blue: #329de0;
  --wrs-red: #ff8594;
}
html, body {
  color-scheme: dark !important;
  background: var(--wrs-bg-deep) !important;
  color: var(--wrs-text) !important;
}
html[data-wrs-theme="light"] {
  color-scheme: dark !important;
  background: var(--wrs-bg-deep) !important;
  color: var(--wrs-text) !important;
}
html[data-wrs-theme="light"] body,
html[data-wrs-theme="light"] .mobile-page,
html[data-wrs-theme="light"] .mobile-more-controls,
html[data-wrs-theme="light"] .notification-center-panel,
html[data-wrs-theme="light"] .notification-center-item,
html[data-wrs-theme="light"] .notification-center-dialog {
  background-color: var(--wrs-bg) !important;
  color: var(--wrs-text) !important;
}
button, input, select, textarea { color-scheme: dark !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wrs-cyan) !important;
  outline-offset: 2px !important;
}
#map { background: #081725 !important; }
.leaflet-control-attribution {
  background: rgba(4, 12, 21, .78) !important;
  color: #a7c4d8 !important;
  border: 1px solid rgba(103, 191, 222, .15) !important;
  border-radius: 7px 0 0 0 !important;
}
.leaflet-control-attribution a { color: #7bdff8 !important; }

/* Main map overlays and controls */
.glass-panel {
  color: var(--wrs-text) !important;
  background: linear-gradient(155deg, rgba(8, 24, 39, .96), rgba(5, 15, 27, .96)) !important;
  border: 1px solid var(--wrs-line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.035) !important;
}
.panel-header {
  color: #e7f7ff !important;
  background: linear-gradient(100deg, rgba(19, 55, 79, .96), rgba(10, 27, 43, .96)) !important;
  border-bottom: 1px solid rgba(105, 189, 222, .18) !important;
}
.rt-mag {
  /* Neutral until a real magnitude arrives; renderRealtime applies the legend color inline. */
  background: linear-gradient(145deg, #334155, #0b1727) !important;
  border: 1px solid #64748b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
  color: #cbd5e1 !important;
}
.world-clock-panel {
  background: linear-gradient(145deg, rgba(8, 32, 49, .98), rgba(7, 21, 35, .98)) !important;
  border: 1px solid rgba(77, 198, 229, .3) !important;
  border-radius: 14px !important;
}
.v-toolbar .tb-btn {
  background: linear-gradient(145deg, rgba(10, 25, 41, .98), rgba(5, 14, 25, .98)) !important;
  border: 1px solid rgba(107, 158, 194, .23) !important;
  color: #e7f5ff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}
.v-toolbar .tb-btn:hover, .v-toolbar .tb-btn:focus-visible {
  border-color: var(--wrs-line-strong) !important;
  color: var(--wrs-cyan) !important;
}
.basemap-menu {
  padding: 7px !important;
  border: 1px solid var(--wrs-line) !important;
  border-radius: 15px !important;
  background: rgba(5, 16, 28, .97) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.44) !important;
  backdrop-filter: blur(18px) !important;
}
.basemap-menu .bm-opt {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #afc5d8 !important;
  text-align: left !important;
  padding: 10px 13px !important;
}
.basemap-menu .bm-opt.active {
  background: rgba(34, 152, 205, .2) !important;
  border-color: rgba(91, 210, 243, .31) !important;
  color: #e9fbff !important;
}

/* Four-screen mobile shell: Peta, Detail, Notifikasi, Lainnya */
@media (max-width: 1200px) {
  .mobile-page {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(22, 75, 111, .20), transparent 43%),
      linear-gradient(180deg, #07111f 0%, #050c15 100%) !important;
    color: var(--wrs-text) !important;
  }
  .mobile-page-title {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 4px 16px !important;
    color: #f2f8ff !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
  }
  .mobile-page-title span { color: #f2f8ff !important; }
  .mobile-page-title small {
    display: block !important;
    margin-top: 7px !important;
    color: #91abc4 !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }
  .mobile-page-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 13px;
    border-radius: 4px;
    background: linear-gradient(90deg, #59dcf8, rgba(49,157,224,.12));
  }
  .mobile-bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom,0px)) !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important;
    gap: 5px !important;
    background: linear-gradient(180deg, rgba(8, 20, 33, .98), rgba(4, 11, 19, .99)) !important;
    border-top: 1px solid rgba(95, 183, 220, .2) !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.23) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
  }
  .mobile-bottom-nav button {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #829bb5 !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    box-shadow: none !important;
  }
  .mobile-bottom-nav button.active {
    color: #7de4ff !important;
    background: linear-gradient(145deg, rgba(24, 71, 99, .62), rgba(9, 34, 53, .52)) !important;
    border-color: rgba(83, 201, 237, .22) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 4px 15px rgba(0,0,0,.15) !important;
  }
  .mobile-bottom-nav .nav-symbol svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }
  #mobilePageInfo, #mobilePageLegend, #mobilePageAlerts {
    padding: calc(10px + env(safe-area-inset-top,0px)) 16px calc(92px + env(safe-area-inset-bottom,0px)) !important;
    background:
      radial-gradient(ellipse at 90% 0%, rgba(18, 75, 112, .16), transparent 34%),
      linear-gradient(180deg, #07111f 0%, #050c15 100%) !important;
  }
  .mobile-more-controls {
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 13px !important;
    border-radius: 20px !important;
    border: 1px solid var(--wrs-line) !important;
    background: linear-gradient(145deg, rgba(11, 29, 46, .97), rgba(6, 17, 29, .99)) !important;
    color: var(--wrs-text) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
  }
  #mobileMoreControls h2 { color: #82e6ff !important; }
  #mobileMoreControls .more-caption { color: #96aec5 !important; }

  .wrs-diagnostic-card, .wrs-notification-history-card {
    margin: 0 0 12px !important;
    padding: 15px !important;
    border-radius: 17px !important;
    border: 1px solid var(--wrs-line) !important;
    background: linear-gradient(145deg, rgba(12, 31, 48, .98), rgba(6, 17, 29, .99)) !important;
    color: #eaf5ff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.2) !important;
  }
  .wrs-diagnostic-card h3, .wrs-notification-history-card h3 { color: #eef8ff !important; }
  .wrs-push-filter-kicker { color: #68d8f3 !important; letter-spacing: .12em !important; }
  .wrs-push-filter-desc, .wrs-diagnostic-footnote { color: #98aec3 !important; }

  .wrs-alert-intro {
    margin: 8px 0 14px !important;
    padding: 14px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(80, 188, 222, .24) !important;
    background: linear-gradient(145deg, rgba(14, 39, 58, .98), rgba(7, 22, 36, .98)) !important;
    color: #eaf8ff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  }
  .wrs-alert-intro strong { color: #e4f8ff !important; font-size: 13px !important; }
  .wrs-alert-intro small { color: #9cb8cb !important; font-size: 12px !important; }
  .wrs-alert-intro button {
    width: 42px !important; height: 42px !important; flex: 0 0 42px !important;
    border: 1px solid rgba(100, 206, 239, .25) !important;
    border-radius: 12px !important;
    background: rgba(20, 61, 83, .8) !important;
    color: #79e5ff !important;
  }
  .wrs-alert-section-title {
    margin: 20px 0 10px !important;
    color: #74dff9 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
  }
  .wrs-alert-list, .wrs-alert-news { display: grid !important; gap: 12px !important; }
  .wrs-alert-card, .wrs-alert-news-card, .wrs-news-card {
    min-width: 0 !important;
    padding: 15px !important;
    border: 1px solid rgba(245, 184, 83, .28) !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg, rgba(37, 34, 27, .97), rgba(17, 23, 32, .99)) !important;
    color: #f3ead7 !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.19) !important;
  }
  .wrs-alert-card.severe, .wrs-alert-card.high, .wrs-alert-card.critical {
    border-color: rgba(255, 117, 129, .36) !important;
    background: linear-gradient(150deg, rgba(51, 27, 35, .98), rgba(17, 20, 31, .99)) !important;
  }
  .wrs-alert-card h3, .wrs-alert-news-card h3, .wrs-news-card h3 {
    color: #fff1d9 !important; font-size: 16px !important; line-height: 1.35 !important;
  }
  .wrs-alert-card p, .wrs-alert-news-card p, .wrs-news-card p {
    color: #d7d2c6 !important; font-size: 13px !important; line-height: 1.65 !important;
  }
  .wrs-alert-card time { color: #bdad8d !important; font-size: 10px !important; }
  .wrs-alert-badge {
    border-radius: 8px !important; padding: 5px 8px !important;
    color: #ffd688 !important; background: rgba(130, 88, 25, .18) !important;
  }
  .wrs-alert-area { color: #e0d5bd !important; line-height: 1.55 !important; }
  .wrs-alert-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; }
  .wrs-alert-actions button, .wrs-alert-news-card button, .wrs-news-card button {
    min-width: 0 !important; min-height: 39px !important; padding: 7px 5px !important;
    border: 1px solid rgba(94, 198, 231, .29) !important; border-radius: 11px !important;
    background: linear-gradient(145deg, rgba(16, 54, 76, .92), rgba(8, 29, 46, .98)) !important;
    color: #8de8ff !important; font-size: 11px !important; font-weight: 750 !important;
  }
}

/* Notification center: explicit dark colors prevent inherited white cards/low-contrast text. */
.notification-center-tabs {
  border: 1px solid rgba(89, 184, 222, .24) !important;
  border-radius: 16px !important;
  padding: 5px !important;
  background: rgba(5, 16, 28, .97) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;
}
.notification-center-tab {
  min-height: 43px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #8fa9c2 !important;
}
.notification-center-tab.is-active {
  background: linear-gradient(135deg, rgba(28, 126, 169, .42), rgba(16, 59, 86, .78)) !important;
  color: #effbff !important;
  box-shadow: inset 0 0 0 1px rgba(93, 211, 244, .32), 0 4px 12px rgba(0,0,0,.18) !important;
}
.notification-center-panel, [data-nc-panel] {
  color: var(--wrs-text) !important;
  background: transparent !important;
}
.notification-center-push-head h3 { color: #f0f8ff !important; font-size: 20px !important; }
.notification-center-push-head p { color: #9db2c7 !important; }
.notification-center-actions button, .notification-center-filter button, .notification-center-read-all {
  min-height: 38px !important;
  border: 1px solid rgba(94, 182, 219, .24) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(15, 41, 60, .96), rgba(7, 24, 39, .98)) !important;
  color: #aeeaff !important;
}
.notification-center-actions button.danger {
  border-color: rgba(252, 111, 121, .32) !important;
  background: rgba(83, 26, 36, .44) !important;
  color: #ffb0b9 !important;
}
.notification-center-filter { background: rgba(5, 16, 28, .8) !important; border-color: rgba(89,184,222,.2) !important; }
.notification-center-filter button.is-active {
  background: rgba(22, 112, 151, .44) !important;
  border-color: rgba(102, 216, 244, .36) !important;
  color: #effbff !important;
}
.notification-center-status { color: #9bb1c6 !important; line-height: 1.5 !important; }
.notification-center-list { gap: 10px !important; }
.notification-center-item {
  padding: 14px !important;
  border: 1px solid rgba(92, 161, 197, .25) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #0c1e2f 0%, #071523 100%) !important;
  color: #eaf5ff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025) !important;
}
.notification-center-item.is-unread {
  border-color: rgba(77, 204, 238, .52) !important;
  background: linear-gradient(145deg, #10283b 0%, #081827 100%) !important;
  box-shadow: inset 3px 0 #46c9ed, 0 10px 25px rgba(0,0,0,.2) !important;
}
.notification-center-item-title strong { color: #f0f8ff !important; line-height: 1.4 !important; }
.notification-center-item time { color: #9db2c5 !important; font-size: 10px !important; }
.notification-center-item-body {
  color: #c0d0df !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 4 !important;
}
.notification-center-tags { margin-top: 8px !important; gap: 6px !important; }
.notification-center-tag {
  background: rgba(20, 71, 94, .52) !important;
  border: 1px solid rgba(96, 177, 211, .22) !important;
  color: #a9e2f6 !important;
  font-size: 10px !important;
}
.notification-center-item-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; }
.notification-center-item-actions button {
  min-width: 0 !important; min-height: 39px !important; padding: 7px 5px !important;
  border: 1px solid rgba(91, 183, 218, .27) !important;
  border-radius: 10px !important;
  background: rgba(15, 45, 64, .9) !important;
  color: #afeaff !important;
  font-size: 11px !important;
}
.notification-center-item-actions button.delete {
  border-color: rgba(246, 110, 122, .26) !important;
  background: rgba(81, 26, 36, .42) !important;
  color: #ffadb4 !important;
}
.notification-center-empty {
  padding: 28px 18px !important;
  border: 1px dashed rgba(99, 177, 211, .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(10, 27, 43, .8), rgba(6, 17, 29, .8)) !important;
  color: #a3b9cd !important;
}
.notification-center-empty strong { color: #eef8ff !important; }
.notification-center-empty span { color: #9cb2c7 !important; line-height: 1.6 !important; }
.notification-center-modal {
  background: rgba(1, 7, 13, .82) !important;
  backdrop-filter: blur(12px) !important;
}
.notification-center-dialog {
  border: 1px solid rgba(89, 183, 222, .28) !important;
  border-radius: 22px 22px 15px 15px !important;
  background: #091725 !important;
  color: #eef8ff !important;
}
.notification-center-dialog-head, .notification-center-dialog-foot { background: #07131f !important; border-color: rgba(99,173,207,.18) !important; }
.notification-center-dialog-head h3 { color: #f0f8ff !important; }
.notification-center-dialog-head small { color: #91aac1 !important; }
.notification-center-detail-cell { background: #10273a !important; border-color: rgba(103,184,218,.2) !important; }
.notification-center-detail-cell span { color: #91aac0 !important; }
.notification-center-detail-cell strong { color: #f0f8ff !important; }
.notification-center-detail-text { color: #c8d9e7 !important; font-size: 13px !important; line-height: 1.7 !important; }
.notification-center-dialog-foot button { background: #103149 !important; color: #b9edff !important; min-height: 44px !important; }
.notification-center-dialog-foot .danger { background: #3b202a !important; color: #ffb2b9 !important; }
@media (max-width: 420px) {
  .notification-center-item-top { flex-direction: column !important; gap: 5px !important; }
  .notification-center-item time { white-space: normal !important; }
  .notification-center-item-actions button { font-size: 10px !important; }
  .wrs-alert-actions { gap: 5px !important; }
}


/* WRS GEMPA education screen, consistent magnitude circles, and restrained page motion. */
.m-dot {
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  border-radius:50%!important;
  color:#fff!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.28)!important;
}
.m-dot.m1{width:16px!important;height:16px!important;font-size:8px!important}
.m-dot.m2{width:19px!important;height:19px!important;font-size:8px!important}
.m-dot.m3{width:22px!important;height:22px!important;font-size:9px!important;color:#253044!important}
.m-dot.m4{width:25px!important;height:25px!important;font-size:9px!important;color:#253044!important}
.m-dot.m5{width:28px!important;height:28px!important;font-size:10px!important}
.m-dot.m6{width:31px!important;height:31px!important;font-size:10px!important}
.m-dot.m7{width:34px!important;height:34px!important;font-size:10px!important}
.m-dot.m8{width:37px!important;height:37px!important;font-size:10px!important}
.leg-row{align-items:center!important;flex-wrap:wrap!important}
.leg-row .leg-lab{flex:0 0 auto!important}

@media (max-width:1200px) {
  #mobilePageEducation {
    z-index:45!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(96px + env(safe-area-inset-bottom,0px))!important;
    background:radial-gradient(ellipse at 88% 0%,rgba(17,91,131,.2),transparent 36%),linear-gradient(180deg,#07111f,#050c15)!important;
    color:#eaf5ff!important;
  }
  .wrs-education-intro {
    padding:18px;border:1px solid rgba(86,202,236,.28);border-radius:22px;
    background:linear-gradient(140deg,rgba(15,53,78,.98),rgba(6,19,34,.99));
    box-shadow:0 16px 35px rgba(0,0,0,.2);margin:0 0 14px;
  }
  .wrs-education-eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#71dff8}
  .wrs-education-intro h2{font-size:23px;line-height:1.16;margin:8px 0;color:#f2f9ff;letter-spacing:-.03em}
  .wrs-education-intro p{font-size:13px;line-height:1.65;color:#b4cadd;margin:0}
  .wrs-education-badge{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 10px;border-radius:999px;background:#102d40;border:1px solid #22516a;color:#afeaff;font-size:10px;font-weight:800}
  .wrs-education-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
  .wrs-education-card{min-width:0;padding:15px;border:1px solid rgba(99,166,202,.23);border-radius:18px;background:linear-gradient(145deg,#0d2235,#081624);box-shadow:0 10px 24px rgba(0,0,0,.16);color:#e5f2ff}
  .wrs-education-card h3{font-size:15px;line-height:1.35;margin:0 0 8px;color:#f1f8ff}
  .wrs-education-card p,.wrs-education-card li{font-size:12px;line-height:1.65;color:#b6c9da}
  .wrs-education-card ul{padding-left:19px;margin:8px 0}
  .wrs-education-svg{display:block;width:100%;height:auto;max-height:180px;margin:4px auto 12px;border-radius:12px;background:linear-gradient(135deg,#091b2b,#0f3046)}
  .wrs-education-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
  .wrs-education-step{padding:10px 7px;text-align:center;border:1px solid rgba(91,190,224,.22);border-radius:12px;background:#0b1c2c}
  .wrs-education-step b{display:block;font-size:11px;color:#7de8ff;margin-bottom:4px}
  .wrs-education-step span{font-size:10px;color:#adc2d3;line-height:1.45}
  .wrs-education-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:10px;padding:11px 12px;border:1px solid rgba(76,199,235,.32);border-radius:13px;background:linear-gradient(135deg,#123d56,#0a263b);color:#bcefff;font-size:12px;font-weight:800;text-decoration:none;text-align:center}
  .wrs-education-source{margin:15px 0 0;padding:12px;border-radius:14px;background:#081522;border:1px solid rgba(118,160,190,.16);font-size:10px;line-height:1.65;color:#92adc2}
  .wrs-education-source a{color:#7ddcf5;text-decoration:underline;text-underline-offset:3px}
  .mobile-page.active:not(#mobilePageMap){animation:wrsScreenIn .20s cubic-bezier(.2,.8,.2,1) both}
  @keyframes wrsScreenIn{from{opacity:.55;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  .mobile-bottom-nav button{transition:background .18s ease,color .18s ease,transform .12s ease!important}
  .mobile-bottom-nav button:active{transform:scale(.95)!important}
  button,.tb-btn,.stat-btn,.notification-center-item-actions button,.wrs-education-action{touch-action:manipulation}
}
@media (prefers-reduced-motion:reduce) {
  .mobile-page.active:not(#mobilePageMap){animation:none!important}
  .mobile-bottom-nav button{transition:none!important}
}


/* Shared magnitude legend sizing: progressively larger circles, matching the map symbols. */
.leg .leg-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.leg .leg-row .m-dot{
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  line-height:1!important;
  border-radius:50%!important;
  font-weight:850!important;
  text-align:center!important;
  padding:0!important;
}
.leg .leg-row .m-dot.m1{width:15px!important;height:15px!important;font-size:7px!important}
.leg .leg-row .m-dot.m2{width:20px!important;height:20px!important;font-size:8px!important}
.leg .leg-row .m-dot.m3{width:25px!important;height:25px!important;font-size:9px!important}
.leg .leg-row .m-dot.m4{width:30px!important;height:30px!important;font-size:10px!important}
.leg .leg-row .m-dot.m5{width:35px!important;height:35px!important;font-size:10px!important}
.leg .leg-row .m-dot.m6{width:40px!important;height:40px!important;font-size:11px!important}
.leg .leg-row .m-dot.m7{width:45px!important;height:45px!important;font-size:11px!important}
.leg .leg-row .m-dot.m8{width:50px!important;height:50px!important;font-size:10px!important}
@media(max-width:480px){
  .leg .leg-row{column-gap:5px;row-gap:7px}
  .leg .leg-lab{flex:0 0 100%;margin-bottom:1px}
}
.mobile-bottom-nav button,.tb-btn,.stat-btn,.wrs-education-action,.wrs-history-action{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.wrs-education-card,.wrs-diagnostic-card,.wrs-notification-history-card{
  animation:wrs-card-enter .22s ease-out both;
}
@keyframes wrs-card-enter{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .wrs-education-card,.wrs-diagnostic-card,.wrs-notification-history-card{animation:none!important}
}


/* Rebuilt education and interface polish (visual only; data/polling untouched). */
.wrs-mmi-scale{display:grid;gap:7px;margin:12px 0}
.wrs-mmi-level{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:10px;min-height:43px;padding:8px 10px;border:1px solid rgba(132,175,205,.22);border-radius:11px;background:#071827}
.wrs-mmi-level b{display:grid;place-items:center;min-height:28px;padding:4px;border-radius:8px;background:#15384e;color:#8fe6ff;font-size:12px;font-weight:900;letter-spacing:.03em}
.wrs-mmi-level:nth-child(1) b{background:#1d3549;color:#b3d6e9}
.wrs-mmi-level:nth-child(2) b{background:#164762;color:#a3e5ff}
.wrs-mmi-level:nth-child(3) b{background:#735111;color:#ffe19a}
.wrs-mmi-level:nth-child(4) b{background:#873d21;color:#ffd0a8}
.wrs-mmi-level:nth-child(5) b{background:#76232f;color:#ffc2cc}
.wrs-mmi-level span{color:#c2d4e2;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.wrs-education-note{margin:10px 0 0;padding:10px 11px;border-left:3px solid #45c8e7;border-radius:0 9px 9px 0;background:rgba(10,50,72,.45);color:#a9c8dc;font-size:10px;line-height:1.6}

/* Progressively scaled legend dots: compact on mobile while preserving clear magnitude hierarchy. */
.leg .leg-row .m-dot.m1{width:13px!important;height:13px!important;font-size:7px!important}
.leg .leg-row .m-dot.m2{width:17px!important;height:17px!important;font-size:8px!important}
.leg .leg-row .m-dot.m3{width:21px!important;height:21px!important;font-size:9px!important}
.leg .leg-row .m-dot.m4{width:25px!important;height:25px!important;font-size:10px!important}
.leg .leg-row .m-dot.m5{width:29px!important;height:29px!important;font-size:10px!important}
.leg .leg-row .m-dot.m6{width:33px!important;height:33px!important;font-size:10px!important}
.leg .leg-row .m-dot.m7{width:37px!important;height:37px!important;font-size:10px!important}
.leg .leg-row .m-dot.m8{width:41px!important;height:41px!important;font-size:10px!important}

/* Keep the compact event popup clear of the right-side map toolbar and tsunami control.
   The map remains interactive outside the card; only the card itself captures taps. */
@media(max-width:640px){
  .wrs-event-popup-overlay:not(.hidden){
    inset:auto 78px auto 8px!important;
    top:calc(env(safe-area-inset-top,0px) + 64px)!important;
    bottom:auto!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    max-height:48dvh!important;
    overflow:visible!important;
    padding:0!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    pointer-events:none!important;
  }
  .wrs-event-popup-card{
    width:100%!important;
    max-height:min(44dvh,420px)!important;
    overflow-y:auto!important;
    padding:14px 13px 12px!important;
    pointer-events:auto!important;
  }
  .wrs-event-popup-card h2{font-size:16px!important;line-height:1.25!important}
  .wrs-event-popup-place{font-size:13px!important;line-height:1.4!important;margin:9px 0!important}
}

/* Uniform professional bottom navigation icon weight and safer tap feedback. */
.mobile-bottom-nav .nav-symbol{display:grid;place-items:center;min-width:24px;min-height:24px}
.mobile-bottom-nav .nav-symbol svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mobile-bottom-nav button{min-height:60px;transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease}
.mobile-bottom-nav button.active{box-shadow:inset 0 0 0 1px rgba(95,211,243,.12)}
.mobile-bottom-nav button:active{transform:scale(.97)}
@media(max-width:480px){.mobile-bottom-nav button{min-height:56px}.wrs-mmi-level{grid-template-columns:58px minmax(0,1fr);gap:8px}}
@media(prefers-reduced-motion:reduce){.mobile-bottom-nav button,.mobile-page.active{transition:none!important;animation:none!important}}


/* 1.11.6 interaction polish: reliable tap feedback and safe-area spacing. */
button, .tb-btn, .stat-btn, .qbtn, .utility-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled, .tb-btn:disabled, .stat-btn:disabled {
  cursor: not-allowed !important;
  opacity: .58;
}
@media (max-width: 900px) {
  .map-stats .stat-btn { min-height: 44px; }
  .mobile-page, .mobile-more-controls {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-page button, .mobile-more-controls button,
  .mobile-page a[role="button"], .mobile-more-controls a[role="button"] {
    scroll-margin-block: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}


/* WRS GEMPA mobile navigation overhaul — compact, grouped screens and thumb-friendly controls. */
@media(max-width:1200px){
  #mobilePageChat,#mobilePageSettingDetail{
    z-index:45!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(92px + env(safe-area-inset-bottom,0px))!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;
    background:radial-gradient(ellipse at 90% 0%,rgba(18,75,112,.16),transparent 34%),linear-gradient(180deg,#07111f,#050c15)!important;
  }
  #mobilePageChat .mobile-page-title{padding:8px 4px 14px!important}
  .wrs-ai-mobile-host{width:100%;min-width:0;min-height:0}
  #mobilePageChat #wrsAiPanel.wrs-ai-panel{
    position:relative!important;inset:auto!important;margin:0 auto!important;
    width:100%!important;max-width:620px!important;height:min(66dvh,720px)!important;
    min-height:380px!important;max-height:none!important;border-radius:20px!important;
    box-shadow:0 18px 48px rgba(0,0,0,.34)!important;
  }
  #mobilePageChat #wrsAiPanel .wrs-ai-head{padding:13px!important}
  #mobilePageChat #wrsAiPanel .wrs-ai-title strong{font-size:14px!important}
  #mobilePageChat #wrsAiPanel .wrs-ai-title span{font-size:11px!important}
  #mobilePageChat #wrsAiPanel .wrs-ai-msg{font-size:13px!important;line-height:1.55!important}
  #mobilePageChat #wrsAiPanel .wrs-ai-notice{font-size:10px!important}
  #mobilePageChat #wrsAiPanel .wrs-ai-quick-prompts button{min-height:38px!important;font-size:10px!important}
  .settings-home{display:flex;flex-direction:column;gap:15px;max-width:760px;margin:0 auto}
  .settings-overview{
    display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid rgba(93,190,222,.24);
    border-radius:20px;background:linear-gradient(135deg,rgba(15,49,71,.98),rgba(8,24,40,.98));
    box-shadow:0 10px 28px rgba(0,0,0,.16)
  }
  .settings-overview-mark{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:15px;color:#74e5ff;background:linear-gradient(145deg,#174b69,#0b2438);border:1px solid rgba(94,216,246,.3)}
  .settings-overview-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .settings-eyebrow{display:block;color:#69d8f5;font-size:9px;font-weight:900;letter-spacing:.15em}
  .settings-overview h2{margin:5px 0 6px;color:#eff9ff;font-size:17px;line-height:1.25;font-weight:850}
  .settings-overview p{margin:0;color:#a1b6ca;font-size:11px;line-height:1.55}
  .settings-group-title{margin:6px 4px 0;color:#7894ad;font-size:10px;font-weight:900;letter-spacing:.13em}
  .settings-card-grid,.settings-card-list{display:grid;gap:10px}
  .settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-card{
    position:relative;display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;
    min-height:78px!important;width:100%!important;padding:12px!important;text-align:left!important;
    border:1px solid rgba(130,164,204,.18)!important;border-radius:18px!important;
    background:linear-gradient(145deg,rgba(17,29,49,.98),rgba(10,18,33,.98))!important;
    color:#eaf3ff!important;box-shadow:0 8px 20px rgba(0,0,0,.13)!important;
    transition:border-color .16s ease,transform .16s ease,background .16s ease!important
  }
  .settings-card:active{transform:scale(.985)!important;border-color:rgba(100,209,239,.46)!important}
  .settings-card>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
  .settings-card b{color:#eaf5ff;font-size:11px;font-weight:800;line-height:1.35}
  .settings-card small{color:#91a7bf;font-size:9px;font-weight:500;line-height:1.4}
  .settings-card-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;border:1px solid rgba(147,180,224,.18);background:linear-gradient(145deg,#203a5a,#102139);color:#85baff}
  .settings-card-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .settings-card-icon.cyan{background:linear-gradient(145deg,#124d60,#0c293b);color:#75e6fa}
  .settings-card-icon.green{background:linear-gradient(145deg,#134839,#0d2b28);color:#8af0bc}
  .settings-card-icon.red{background:linear-gradient(145deg,#63252d,#301722);color:#ff9ba5}
  .settings-card-icon.amber{background:linear-gradient(145deg,#61421a,#2f2719);color:#ffd184}
  .settings-chevron{flex:0 0 auto;color:#7995ad;font-size:22px;line-height:1;font-weight:400}
  .settings-card-list .settings-card{min-height:69px!important}
  .settings-footnote{margin:2px 4px 12px;color:#8199af;font-size:10px;line-height:1.55}
  .settings-detail-header{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto 16px;padding:4px 0 15px;border-bottom:1px solid rgba(120,160,196,.14)}
  .settings-detail-header>button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(120,178,211,.2);border-radius:14px;background:#0d2235;color:#aeeeff}
  .settings-detail-header svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .settings-detail-header small{display:block;color:#67d5f1;font-size:9px;font-weight:850;letter-spacing:.12em}
  .settings-detail-header h1{margin:4px 0;color:#f0f8ff;font-size:19px;font-weight:850}
  .settings-detail-header p{margin:0;color:#92aac0;font-size:11px;line-height:1.5}
  .settings-detail-body{max-width:760px;margin:0 auto}
  .settings-detail-view[hidden]{display:none!important}
  .settings-detail-intro{padding:13px 15px;margin-bottom:12px;border:1px solid rgba(92,183,218,.18);border-radius:15px;background:rgba(10,31,47,.72)}
  .settings-detail-intro p{margin:5px 0 0;color:#b4c5d5;font-size:12px;line-height:1.55}
  .settings-info-panel{padding:15px;margin:0 0 11px;border:1px solid rgba(126,159,198,.17);border-radius:17px;background:linear-gradient(145deg,rgba(17,29,49,.98),rgba(8,18,32,.98));color:#dfeaf6}
  .settings-info-panel h3{margin:0 0 8px;color:#edf8ff;font-size:13px;font-weight:850}
  .settings-info-panel p,.settings-info-panel li{color:#a8bbce;font-size:12px;line-height:1.65}
  .settings-info-panel p{margin:6px 0}
  .settings-info-panel ul{padding-left:20px;margin:7px 0}
  .settings-live-controls{display:grid;gap:10px}
  .settings-live-controls .settings-info-panel{margin:0}
  .settings-live-controls .qbtn,.settings-live-controls .btn-share,.settings-live-controls .btn-save{min-height:42px;margin:5px 4px 4px 0}
  .settings-live-controls .rp-links{display:flex;flex-wrap:wrap;gap:8px}
  .settings-live-controls .ext-link{margin:0!important}
  .settings-link-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .settings-link-row a{display:inline-flex;align-items:center;min-height:38px;padding:8px 11px;border:1px solid rgba(94,185,220,.22);border-radius:11px;background:#0b283b;color:#85e5ff;font-size:11px;font-weight:750;text-decoration:none}
  .settings-primary-action{min-height:42px;padding:10px 13px;border:1px solid rgba(74,199,237,.35);border-radius:12px;background:linear-gradient(135deg,#14617a,#0e3b55);color:#e5faff;font-size:12px;font-weight:850}
  .settings-note{color:#8ea6bc;font-size:10px;line-height:1.5}
  .wrs-bag-checks{display:grid;gap:8px}
  .wrs-bag-checks label{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid rgba(126,159,198,.13);border-radius:11px;background:rgba(10,24,39,.85);color:#c3d2e1;font-size:11px;line-height:1.5}
  .wrs-bag-checks input{flex:0 0 auto;accent-color:#22c5e9;margin-top:2px}
  .mobile-notification-button{
    position:fixed!important;top:calc(8px + env(safe-area-inset-top,0px))!important;right:58px!important;z-index:25!important;
    display:grid!important;place-items:center!important;width:42px!important;height:42px!important;min-width:42px!important;
    padding:0!important;border:1px solid rgba(116,190,220,.24)!important;border-radius:14px!important;
    background:rgba(5,17,30,.91)!important;color:#dff7ff!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(15px)!important
  }
  .mobile-notification-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-notification-badge,.notification-nav-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid #07111f;border-radius:999px;background:#ef4444;color:#fff;font:800 9px/1 system-ui;box-shadow:0 2px 8px #0008}
  .mobile-notification-badge[hidden]{display:none!important}
  #mobilePageMap .wrs-health{max-width:calc(100vw - 190px)!important;left:8px!important;transform:none!important;top:calc(8px + env(safe-area-inset-top,0px))!important;padding:8px!important;gap:6px!important}
  #mobilePageMap .wrs-health time{display:none!important}
  #mobilePageMap .v-toolbar{max-height:min(65dvh,560px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
  #mobilePageMap .v-toolbar::-webkit-scrollbar{display:none}
  #mobilePageMap .v-toolbar.is-collapsed{width:44px!important;padding:4px!important;gap:0!important;overflow:hidden!important}
  #mobilePageMap .v-toolbar.is-collapsed .tb-btn:not(#tbRailToggle){display:none!important}
  #mobilePageMap .v-toolbar .tb-rail-toggle{min-width:36px!important;width:36px!important;height:40px!important;border-radius:11px!important}
  #mobilePageMap .map-stats{flex-wrap:wrap!important;max-width:calc(100vw - 24px)!important}
  #mobilePageMap .map-stats-toggle{display:flex!important;align-items:center;justify-content:center;gap:7px;flex:0 0 100%;min-height:22px;padding:0!important;border:0!important;border-radius:8px;background:transparent!important;color:#8fdff4!important;font-size:9px!important;font-weight:800!important;letter-spacing:.04em}
  #mobilePageMap .stats-toggle-chevron{font-size:16px;line-height:1}
  #mobilePageMap .map-stats.is-collapsed{padding:4px 8px!important}
  #mobilePageMap .map-stats.is-collapsed .stat-btn{display:none!important}
  #mobilePageMap .map-stats.is-collapsed .map-stats-toggle{flex-basis:auto;min-width:100px}
  .wrs-event-popup-overlay:not(.hidden){position:fixed!important;inset:0!important;display:grid!important;place-items:center!important;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))!important;z-index:7000!important}
  .wrs-event-popup-card{width:min(460px,calc(100vw - 28px))!important;max-height:calc(100dvh - 36px)!important;margin:0!important;overflow-y:auto!important;align-self:center!important}
}
@media(max-width:430px){
  .settings-card-grid{grid-template-columns:1fr!important}
  .settings-overview{padding:14px!important}
  .settings-overview h2{font-size:16px!important}
  .mobile-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;padding-left:4px!important;padding-right:4px!important}
  .mobile-bottom-nav button{font-size:9px!important;letter-spacing:0!important}
  .mobile-bottom-nav .nav-symbol svg{width:22px!important;height:22px!important}
}
@media(max-height:620px){
  #mobilePageChat #wrsAiPanel.wrs-ai-panel{height:calc(100dvh - 190px)!important;min-height:270px!important}
}
@media(prefers-reduced-motion:reduce){.settings-card,.mobile-bottom-nav button{transition:none!important}}


/* Keep the notification bell global across the four mobile destinations. */
@media(max-width:1200px){
  .mobile-notification-button{z-index:60!important}
  .mobile-page:not(#mobilePageMap){
    padding-top:calc(58px + env(safe-area-inset-top,0px))!important;
  }
}


/* Mobile guard: keep the realtime status chip off the map and prevent inactive
   full-screen panels from intercepting touches. Connection details remain under
   Settings > Koneksi & sumber. */
@media (max-width:1200px) {
  body[data-mobile-page="map"] #wrsHealth,
  #mobilePageMap #wrsHealth {
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body[data-mobile-page="map"] #rightPanel,
  body[data-mobile-page="map"] #mobilePageInfo,
  body[data-mobile-page="map"] #mobilePageChat,
  body[data-mobile-page="map"] #mobilePageLegend,
  body[data-mobile-page="map"] #mobilePageAlerts,
  body[data-mobile-page="map"] #mobilePageEducation,
  body[data-mobile-page="map"] #mobilePageSettingDetail {
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body[data-mobile-page="map"] #mobilePageMap {
    display:block!important;
    visibility:visible!important;
    pointer-events:auto!important;
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    transform:none!important;
    filter:none!important;
  }
  body[data-mobile-page="map"] #wrsAiPanel.wrs-ai-panel {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* Compact, touch-friendly earthquake search for the seven-day event catalogue. */
.hist-search-bar {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 5px;
  width:100%;
}
.hist-search-field {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
  min-height:46px;
  padding:0 13px;
  border:1px solid rgba(111,154,190,.28);
  border-radius:14px;
  background:rgba(7,20,36,.82);
  color:#d8e8f8;
}
.hist-search-field>span {font-size:25px;line-height:1;color:#70d9ee}
.hist-search-field input {
  min-width:0;width:100%;border:0;outline:0;background:transparent;
  color:#f2f7ff;font:inherit;font-size:14px;
}
.hist-search-field input::placeholder {color:#8196ab}
.hist-period-field {
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  min-height:46px;padding:0 10px;border:1px solid rgba(111,154,190,.28);
  border-radius:14px;background:rgba(7,20,36,.82);color:#9fb5ca;font-size:12px;
}
.hist-period-field select {
  max-width:78px;border:0;outline:0;background:transparent;color:#e8f5ff;
  font:inherit;font-size:13px;
}
.hist-period-field option {background:#0b1727;color:#e8f5ff}
.hist-search-status {min-height:18px;margin:3px 2px 9px;color:#8ca6bd;font-size:11px}
.hist-table tbody tr[hidden] {display:none!important}
@media(max-width:520px) {
  .hist-search-bar {gap:7px}
  .hist-search-field {padding:0 10px;min-height:44px}
  .hist-period-field {gap:4px;padding:0 7px;min-height:44px}
  .hist-period-field>span {display:none}
  .hist-period-field select {max-width:72px}
}


/* Seven-day catalogue search — compact courier-style search and result cards. */
@media(max-width:1200px){
  #mobilePageInfo{padding-top:calc(12px + env(safe-area-inset-top,0px))!important}
  #wrsCatalogSearch{
    display:flex;flex-direction:column;gap:13px;width:100%;max-width:760px;margin:0 auto 15px;
    padding:15px;border:1px solid rgba(112,177,213,.20);border-radius:23px;
    background:linear-gradient(155deg,rgba(9,29,47,.98),rgba(5,16,29,.99));
    box-shadow:0 14px 36px rgba(0,0,0,.22);color:#eaf5ff
  }
  .wrs-catalog-search-heading{display:flex;align-items:center;gap:11px;min-width:0}
  .wrs-catalog-search-brand{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border:1px solid rgba(87,212,243,.28);border-radius:15px;background:linear-gradient(145deg,#164b68,#0b263a);color:#7be8ff}
  .wrs-catalog-search-brand svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .wrs-catalog-search-heading>div:nth-child(2){flex:1;min-width:0}
  .wrs-catalog-kicker{display:block;color:#68d9f5;font-size:9px;font-weight:900;letter-spacing:.16em}
  .wrs-catalog-search-heading h2{margin:4px 0 3px;color:#f2faff;font-size:18px;font-weight:900;line-height:1.2}
  .wrs-catalog-search-heading p{margin:0;color:#93adc3;font-size:10px;line-height:1.45}
  .wrs-catalog-days{flex:0 0 auto;padding:7px 8px;border:1px solid rgba(89,196,224,.2);border-radius:10px;background:#0a2b40;color:#7ddff6;font-size:8px;font-weight:900;letter-spacing:.08em}
  .wrs-catalog-searchbox{display:flex;align-items:center;gap:9px;width:100%;min-height:50px;padding:0 13px;border:1px solid rgba(135,170,202,.22);border-radius:15px;background:#f7fafc;color:#1c344a;box-shadow:inset 0 1px 0 #fff}
  .wrs-catalog-searchbox:focus-within{border-color:#40c8ed;box-shadow:0 0 0 3px rgba(64,200,237,.13)}
  .wrs-catalog-searchbox svg{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:#55718b;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .wrs-catalog-searchbox input{min-width:0;flex:1;height:48px;margin:0;padding:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#132a3e!important;font-size:13px!important;font-weight:650}
  .wrs-catalog-searchbox input::placeholder{color:#8595a6;font-weight:500}
  .wrs-catalog-searchbox button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:#e6edf3;color:#405a72;font-size:21px;line-height:1}
  .wrs-catalog-searchbox button[hidden]{display:none!important}
  .wrs-catalog-filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .wrs-catalog-filters label{display:flex;flex-direction:column;gap:6px;min-width:0}
  .wrs-catalog-filters label>span{color:#8da6bb;font-size:9px;font-weight:800}
  .wrs-catalog-filters select{width:100%;min-width:0;min-height:40px;padding:0 8px;border:1px solid rgba(119,160,195,.23);border-radius:11px;outline:none;background:#0e263b;color:#d8eaf7;font-size:10px;font-weight:800}
  .wrs-catalog-results-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:1px}
  .wrs-catalog-results-header>div{display:flex;flex-direction:column;gap:4px;min-width:0}
  .wrs-catalog-results-header b{color:#e9f6ff;font-size:12px;font-weight:900}
  .wrs-catalog-results-header small{color:#829db4;font-size:9px;line-height:1.4}
  .wrs-catalog-results-header button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(81,198,225,.25);border-radius:12px;background:#0b2a3d;color:#80e6fa;font-size:24px;line-height:1}
  .wrs-catalog-results-header button:disabled{opacity:.5}
  .wrs-catalog-results-header button.is-loading{animation:wrs-catalog-spin .8s linear infinite}
  @keyframes wrs-catalog-spin{to{transform:rotate(360deg)}}
  .wrs-catalog-results{display:grid;gap:8px;min-width:0}
  .wrs-catalog-event{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:11px;border:1px solid rgba(126,162,197,.16);border-radius:16px;background:linear-gradient(140deg,rgba(18,34,54,.95),rgba(9,20,34,.97));cursor:pointer;transition:border-color .15s ease,transform .15s ease}
  .wrs-catalog-event:active{transform:scale(.99);border-color:rgba(76,207,237,.45)}
  .wrs-catalog-mag{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border:2px solid var(--wrs-mag-color,#60a5fa);border-radius:15px;background:color-mix(in srgb,var(--wrs-mag-color,#60a5fa) 19%,#0a1b2b);color:#fff;font-size:20px;font-weight:950;letter-spacing:-.04em}
  .wrs-catalog-event-detail{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
  .wrs-catalog-event-detail>b{color:#edf8ff;font-size:12px;font-weight:850;line-height:1.4;overflow-wrap:anywhere}
  .wrs-catalog-event-detail>span{color:#bdd0df;font-size:10px;line-height:1.4}
  .wrs-catalog-event-detail>small{color:#829bb2;font-size:9px;line-height:1.4}
  .wrs-catalog-event-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}
  .wrs-catalog-event-footer>span{color:#6f9cb7;font-size:8px;font-weight:850;letter-spacing:.04em}
  .wrs-catalog-open{flex:0 0 auto;min-height:29px;padding:5px 8px;border:1px solid rgba(87,201,231,.2);border-radius:9px;background:#0b2d43;color:#8fe9fb;font-size:9px;font-weight:850}
  .wrs-catalog-empty{padding:19px 13px;border:1px dashed rgba(127,163,194,.23);border-radius:15px;color:#94abc0;text-align:center;font-size:11px;line-height:1.6}
  .wrs-catalog-footer{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:3px}
  .wrs-catalog-footer button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:43px;padding:0 12px;border:1px solid rgba(81,205,236,.26);border-radius:13px;background:linear-gradient(135deg,#12425c,#0b2a40);color:#c8f5ff;font-size:11px;font-weight:900;text-align:left}
  .wrs-catalog-footer button span{font-size:18px}
  .wrs-catalog-footer>span{color:#7e98af;font-size:9px;line-height:1.45}
}
@media(max-width:390px){
  #wrsCatalogSearch{padding:12px;border-radius:19px;gap:11px}
  .wrs-catalog-search-heading h2{font-size:16px}
  .wrs-catalog-search-heading p{font-size:9px}
  .wrs-catalog-mag{flex-basis:46px;width:46px;height:48px;font-size:18px}
  .wrs-catalog-filters{gap:6px}
  .wrs-catalog-filters select{font-size:9px;padding:0 5px}
}


/* Keep the live source-status chip out of the mobile map viewport.
   It remains accessible in Settings > Koneksi & sumber. */
@media (max-width:1200px) {
  body[data-mobile-page="map"] #wrsHealth,
  body[data-mobile-page="map"] .wrs-health,
  #mobilePageMap #wrsHealth,
  #mobilePageMap .wrs-health {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  #settingsDetailBody #wrsHealth,
  #settingsDetailBody .wrs-health {
    position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    inset:auto!important;transform:none!important;z-index:auto!important;
    display:flex!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    margin:10px 0!important;padding:10px 12px!important;
    border-radius:13px!important;box-sizing:border-box!important;
    flex-wrap:wrap!important;overflow-wrap:anywhere!important;
    background:rgba(7,25,40,.9)!important;
    border:1px solid rgba(104,177,210,.23)!important;
    box-shadow:none!important;backdrop-filter:none!important;
  }
  #settingsDetailBody #wrsHealth #wrsLastUpdated {
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
}


/* Hard layout boundary for Android WebView: the realtime status never overlays the map. */
@media(max-width:1200px) {
  body:not([data-mobile-page="setting-detail"]) #wrsHealth,
  #mobilePageMap #wrsHealth {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  #settingsDetailBody .settings-connection-health {
    display:flex!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    max-width:100%!important;
    margin:8px 0 10px!important;
    box-sizing:border-box!important;
    visibility:visible!important;
    opacity:1!important;
    overflow:visible!important;
    white-space:normal!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #settingsDetailBody .settings-connection-health #wrsHealthText {
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
  #settingsDetailBody .settings-connection-health time {
    display:inline-flex!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .wrs-catalog-map-note {
    margin:4px 2px 10px;
    padding:8px 10px;
    border:1px solid rgba(89,169,205,.14);
    border-radius:10px;
    color:#8ea8bf;
    background:rgba(8,22,36,.6);
    font-size:10px;
    line-height:1.45;
  }
}


/* WRS GEMPA 1.12 preview — 5-tab mobile shell, searchable Help Center, and top-down map menu. */
@media(max-width:1200px){
  .mobile-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:2px!important;
    padding-left:3px!important;padding-right:3px!important;
  }
  .mobile-bottom-nav button{
    min-width:0!important;
    min-height:58px!important;
    padding:5px 2px!important;
    gap:4px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  .mobile-bottom-nav button>span:last-child{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-bottom-nav .nav-symbol{min-width:22px!important;min-height:22px!important}
  .mobile-bottom-nav .nav-symbol svg{width:21px!important;height:21px!important}
  #mobilePageDetail #rightPanel{
    position:relative!important;inset:auto!important;transform:none!important;
    width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;
    margin:0 0 16px!important;overflow:visible!important;
  }
  #mobilePageDetail #rightPanel .rp-sheet-handle{display:none!important}
  /* WRS_DETAIL_PAGE_SCROLL_RECOVERY: the mobile shell uses overflow:hidden by default;
     Detail must own its vertical scroll area so long summaries and ShakeMaps remain reachable. */
  #mobilePageDetail{
    position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;
    z-index:45!important;box-sizing:border-box!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(100px + env(safe-area-inset-bottom,0px))!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;
  }
  #mobilePageDetail.active{display:block!important;}
  #mobilePageDetail #rightPanel{min-height:max-content!important;overflow:visible!important;}

  #mobilePageInfo #wrsCatalogSearch{margin-bottom:14px!important}
  #mobilePageInfo #wrsCatalogSearch .wrs-catalog-search-heading h2{font-size:20px!important}
  #mobilePageInfo #wrsCatalogResults{padding-bottom:10px}
  #mobilePageChat #wrsAiPanel.wrs-ai-panel{
    min-height:320px!important;
    height:calc(100dvh - 205px)!important;
    max-height:none!important;
  }
  #mobilePageMap .v-toolbar{
    transform-origin:top right!important;
    transition:max-height .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),width .2s ease!important;
    opacity:1;
  }
  #mobilePageMap .v-toolbar.is-collapsed{
    max-height:48px!important;
    overflow:hidden!important;
    transform:translateY(0) scaleY(1)!important;
    opacity:1!important;
  }
  #mobilePageMap .v-toolbar:not(.is-collapsed){
    max-height:min(68dvh,590px)!important;
    transform:translateY(0) scaleY(1)!important;
    opacity:1!important;
    overflow-y:auto!important;
  }
  #mobilePageMap .v-toolbar .tb-rail-toggle{
    background:rgba(6,19,32,.98)!important;
    color:#8be8ff!important;
    box-shadow:0 7px 22px rgba(0,0,0,.32)!important;
  }
  .help-center-shell{display:grid;gap:13px;max-width:760px;margin:0 auto}
  .help-center-welcome{padding:17px;border:1px solid rgba(87,188,222,.24);border-radius:20px;background:linear-gradient(140deg,#103249,#091a2b)}
  .help-center-eyebrow{font-size:9px;font-weight:900;letter-spacing:.15em;color:#78e3ff}
  .help-center-welcome h2{margin:6px 0;color:#edfaff;font-size:20px;line-height:1.25}
  .help-center-welcome p{margin:0;color:#a5bdcf;font-size:12px;line-height:1.55}
  .help-ai-hero{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:13px!important;border:1px solid rgba(71,211,241,.35)!important;border-radius:18px!important;background:linear-gradient(115deg,#124c65,#0b283c)!important;color:#e5fbff!important;text-align:left!important}
  .help-ai-hero-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:#0a2336;border:1px solid rgba(105,222,248,.26);color:#8be9ff}
  .help-ai-hero-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .help-ai-hero>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}
  .help-ai-hero b{font-size:13px;font-weight:850}
  .help-ai-hero small{font-size:10px;color:#9fd4e8}
  .help-chevron{color:#79a6bc;font-size:18px}
  .help-search-wrap{display:flex;align-items:center;gap:10px;padding:0 12px;min-height:46px;border:1px solid rgba(126,164,196,.23);border-radius:13px;background:#091827}
  .help-search-wrap svg{width:20px;height:20px;fill:none;stroke:#83dff5;stroke-width:1.8;stroke-linecap:round}
  .help-search-wrap input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#edf8ff!important;font-size:12px!important;box-shadow:none!important}
  .help-search-wrap input::placeholder{color:#7792a9}
  .help-topic-chips{display:flex;gap:7px;overflow-x:auto;padding:1px 0 4px;scrollbar-width:none}
  .help-topic-chips::-webkit-scrollbar{display:none}
  .help-topic-chips button{flex:0 0 auto;min-height:33px;padding:7px 11px!important;border:1px solid rgba(126,164,196,.2)!important;border-radius:999px!important;background:#0b1a2a!important;color:#9bb2c6!important;font-size:10px!important}
  .help-topic-chips button.active{border-color:rgba(83,213,243,.55)!important;background:#103c52!important;color:#a9efff!important}
  .help-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 2px 0}
  .help-section-heading h3{margin:0;color:#eaf6ff;font-size:13px;font-weight:850}
  .help-section-heading>span{color:#73dff5;font-size:9px;font-weight:850;letter-spacing:.1em}
  .help-faq-list{display:grid;gap:8px}
  .help-faq-item{border:1px solid rgba(124,160,194,.16);border-radius:14px;background:linear-gradient(135deg,#101e31,#091625);overflow:hidden}
  .help-faq-item[hidden]{display:none!important}
  .help-faq-item summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:11px;list-style:none;cursor:pointer;color:#deebf7;font-size:11px;font-weight:750;line-height:1.4}
  .help-faq-item summary::-webkit-details-marker{display:none}
  .help-faq-number{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:1px solid rgba(106,188,219,.22);border-radius:8px;background:#102b42;color:#77dff8;font-size:10px;font-weight:900}
  .help-faq-item summary>span:nth-child(2){flex:1}
  .help-faq-answer{padding:0 13px 13px 46px;color:#a8bdcf;font-size:11px;line-height:1.65}
  .help-faq-item[open] .help-chevron{transform:rotate(180deg)}
  .help-emergency-card{padding:14px;border:1px solid rgba(239,104,104,.22);border-radius:17px;background:linear-gradient(145deg,rgba(46,22,34,.72),rgba(14,22,34,.98))}
  .help-emergency-card>p{color:#a8bacb;font-size:10px;line-height:1.6}
  .help-emergency-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .help-emergency-item{display:flex;flex-direction:column;gap:4px;min-height:74px;padding:11px;border:1px solid rgba(239,113,113,.2);border-radius:12px;background:rgba(18,25,39,.92);text-decoration:none}
  .help-emergency-item b{color:#ff9d9d;font-size:22px;line-height:1;font-weight:900}
  .help-emergency-item span{color:#ecf4fb;font-size:10px;font-weight:800}
  .help-emergency-item small{color:#95a9bc;font-size:9px;line-height:1.4}
  .help-disclaimer{padding:10px 2px 0;color:#8299ae;font-size:9px;line-height:1.6}
}
@media(max-width:420px){
  .mobile-bottom-nav button{font-size:8px!important}
  .mobile-bottom-nav .nav-symbol svg{width:19px!important;height:19px!important}
  .help-emergency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  #mobilePageMap .v-toolbar{transition:none!important}
}


/* Unified mobile catalogue: switch between earthquake records and official BMKG tsunami bulletins. */
.wrs-catalog-kind-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px;border:1px solid rgba(119,160,195,.2);border-radius:13px;background:rgba(7,19,32,.78)}
.wrs-catalog-kind-switch button{min-width:0;min-height:39px;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9db4c8;font-size:11px;font-weight:850}
.wrs-catalog-kind-switch button.is-active{border-color:rgba(231,42,80,.4);background:linear-gradient(135deg,rgba(195,31,66,.2),rgba(28,48,69,.9));color:#fff;box-shadow:inset 0 0 0 1px rgba(239,68,90,.08)}
.wrs-catalog-filters[hidden]{display:none!important}
.wrs-catalog-tsunami-event{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:12px;border:1px solid rgba(126,162,197,.17);border-radius:15px;background:linear-gradient(140deg,rgba(18,34,54,.96),rgba(9,20,34,.98))}
.wrs-catalog-tsunami-stage{display:grid;place-items:center;flex:0 0 58px;min-height:54px;padding:5px;border:1px solid rgba(239,68,90,.32);border-radius:13px;background:rgba(127,29,50,.2);color:#ff9eae;font-size:12px;font-weight:950;text-align:center}
.wrs-catalog-tsunami-stage.is-ended{border-color:rgba(34,197,94,.3);background:rgba(21,128,61,.15);color:#86efac}
.wrs-catalog-tsunami-stage.is-check{border-color:rgba(245,158,11,.32);background:rgba(146,64,14,.17);color:#fcd34d}
.wrs-catalog-tsunami-detail{display:grid;gap:5px;flex:1;min-width:0}
.wrs-catalog-tsunami-detail strong{color:#edf6ff;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.wrs-catalog-tsunami-detail span{color:#b5c8d9;font-size:10px;line-height:1.45}
.wrs-catalog-tsunami-detail small{color:#8ea8bd;font-size:9px;line-height:1.4}
.wrs-catalog-tsunami-status{display:inline-flex!important;align-items:center;justify-self:start;width:max-content;max-width:100%;padding:4px 7px;border:1px solid rgba(148,163,184,.2);border-radius:999px;background:rgba(71,85,105,.16);color:#cbd5e1!important;font-size:8px!important;font-weight:900}
.wrs-catalog-tsunami-status.is-active{border-color:rgba(248,113,113,.3);background:rgba(185,28,28,.15);color:#fca5a5!important}
.wrs-catalog-tsunami-status.is-ended{border-color:rgba(34,197,94,.3);background:rgba(21,128,61,.15);color:#86efac!important}
.wrs-catalog-tsunami-status.is-check{border-color:rgba(245,158,11,.3);background:rgba(146,64,14,.15);color:#fcd34d!important}
.wrs-catalog-tsunami-open{justify-self:start;margin-top:2px;padding:7px 10px;border:1px solid rgba(116,161,198,.24);border-radius:9px;background:#14283e;color:#d8e8f7;font-size:9px;font-weight:850}
@media(max-width:420px){.wrs-catalog-tsunami-event{gap:8px;padding:10px}.wrs-catalog-tsunami-stage{flex-basis:52px;min-height:50px;font-size:10px}}