:root {
  color-scheme: dark;
  --bg: #020405;
  --panel: #071013;
  --line: rgba(255, 255, 255, 0.18);
  --text: #f4fbff;
  --muted: #a8bac3;
  --accent: #26d9ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Segoe UI",
    "Hiragino Sans",
    "Yu Gothic UI",
    sans-serif;
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 540px) and (max-width: 1000px) {
  body.unsupported-screen-active .sim-panel,
  body.unsupported-screen-active .intensity-legend,
  body.unsupported-screen-active .source-info-control,
  body.unsupported-screen-active .source-info-button {
    display: none !important;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(4px);
    pointer-events: auto;
  }

  body::after {
    content: "この画面サイズは対応しておりません。\Aスマートフォンは縦画面でご利用ください。";
    position: fixed;
    left: max(24px, env(safe-area-inset-left));
    right: max(24px, env(safe-area-inset-right));
    top: 50%;
    z-index: 10001;
    color: #ffffff;
    font-size: clamp(1.05rem, 4vw, 1.45rem);
    font-weight: 900;
    line-height: 1.8;
    text-align: center;
    white-space: pre-line;
    transform: translateY(-50%);
    pointer-events: auto;
  }
}

/* NERV pass 2: red play/stop trigger, half-open default sheet, full-page tables. */
#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, 50%) !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(50% + var(--sheet-drag-y, 0px))) !important;
}

.sheet-handle {
  width: 86px !important;
  height: 16px !important;
}

.sheet-handle::after {
  top: 4px !important;
  width: 58px !important;
  height: 5px !important;
}

#simulation-start {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    #e61946 !important;
  box-shadow:
    0 12px 28px rgba(230, 25, 70, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

#simulation-start::before {
  border-left-color: #fff !important;
}

body.simulation-running #simulation-start::before {
  width: 13px;
  height: 13px;
  margin-left: 0;
  border: 0;
  border-radius: 2px;
  background: #fff;
}

#simulation-start:disabled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(94, 52, 64, 0.82) !important;
}

.preset-picker-head,
.settings-menu-head,
.nerv-full-head {
  display: none !important;
}

.preset-picker-dialog,
.settings-menu-sheet,
.nerv-full-panel {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}

.preset-picker-table-wrap {
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 24px) !important;
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 24px) !important;
}

.preset-picker-table {
  width: 100% !important;
  table-layout: auto !important;
}

.preset-picker-table thead {
  display: none !important;
}

.preset-picker-table th,
.preset-picker-table td {
  padding-block: 12px !important;
}

.preset-picker-table td:first-child {
  width: 48px !important;
  min-width: 48px !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(2) {
  width: 150px !important;
  min-width: 126px !important;
}

.preset-picker-table td:nth-child(3) {
  width: auto !important;
}

.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  width: 72px !important;
  min-width: 62px !important;
  text-align: center !important;
}

.preset-intensity-badge {
  display: inline-grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  place-items: center !important;
  border-radius: 7px !important;
  padding: 0 !important;
  font-size: 0.86rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.bottom-tab-icon {
  position: relative !important;
  font-size: 0 !important;
}

.bottom-tab-icon::before,
.bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  color: currentColor;
  background: currentColor;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 6px !important;
  width: 20px !important;
  height: 12px !important;
  border: 0 !important;
  background: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: linear-gradient(
    135deg,
    transparent 0 18%,
    currentColor 18% 26%,
    transparent 26% 38%,
    currentColor 38% 46%,
    transparent 46% 58%,
    currentColor 58% 66%,
    transparent 66% 100%
  ) !important;
}

#earthquake-tab .bottom-tab-icon::after {
  content: none !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 5px !important;
  width: 17px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 8px !important;
  top: 9px !important;
  width: 9px !important;
  height: 2px !important;
  border: 0 !important;
  background: currentColor !important;
  box-shadow: 0 4px 0 currentColor !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  inset: 3px !important;
  width: auto !important;
  height: auto !important;
  border: 2.4px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  left: 11px !important;
  top: 10px !important;
  width: 3px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -5px 0 -1px currentColor !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 5px !important;
  width: 18px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 2px 6px 6px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 12px !important;
  top: 6px !important;
  width: 2px !important;
  height: 14px !important;
  border: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 4px !important;
  width: 17px !important;
  height: 17px !important;
  border: 2.4px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .preset-picker-table td:first-child {
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 10px !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 112px !important;
    min-width: 104px !important;
  }

  .preset-picker-table td:nth-child(4),
  .preset-picker-table td:nth-child(5) {
    width: 54px !important;
    min-width: 48px !important;
  }

  .preset-intensity-badge {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 0.78rem !important;
  }
}

/* NERV pass 3: draggable sheet, inline settings pages, cleaner icons. */
.sim-panel {
  width: min(840px, calc(100vw - 16px)) !important;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, 52%) !important;
}

.sim-panel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.sheet-handle {
  width: 92px !important;
  height: 22px !important;
  cursor: grab;
}

.sheet-handle::after {
  top: 6px !important;
  width: 62px !important;
}

#setup-panel .settings-section[data-settings-section="display"] {
  order: 1;
}

#setup-panel .settings-section[data-settings-section="source"] {
  order: 2;
}

#setup-panel .settings-section[data-settings-section="source"] h3 {
  display: block !important;
}

#setup-panel .settings-section[data-settings-section="source"] .field,
#setup-panel .settings-section[data-settings-section="source"] .field-grid {
  display: grid !important;
}

#setup-panel .settings-section[data-settings-section="source"] {
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.settings-menu-list {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 20px);
  overflow-y: auto;
}

.settings-notification-card {
  order: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.settings-notification-row {
  display: contents;
}

.settings-notification-row span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.settings-notification-row strong {
  color: #f5f5f5;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.settings-switch {
  grid-column: 2;
  justify-self: end;
  min-width: 74px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  cursor: pointer;
}

.settings-switch.is-on {
  border-color: rgba(21, 214, 237, 0.58);
  background: rgba(21, 214, 237, 0.22);
  color: #23e1f5;
}

#settings-push-button {
  order: 2;
}

#settings-source-button {
  order: 3;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#settings-source-panel {
  order: 4;
}

#settings-feedback-button {
  order: 5;
}

#settings-feedback-panel {
  order: 6;
}

.settings-inline-panel {
  padding: 12px 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
}

.settings-inline-panel.hidden {
  display: none !important;
}

/* Remove the divider above logout and reclaim its vertical space. */
.community-account-danger-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.settings-inline-panel .source-info-overlay-content {
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
}

.settings-inline-panel .source-info-header,
.settings-inline-panel .source-info-footer {
  display: none;
}

.settings-inline-panel .source-info-tabs {
  margin: 0 0 12px;
}

.settings-inline-panel .source-info-sections {
  display: grid;
  gap: 12px;
}

.settings-inline-panel .source-info-section,
.settings-inline-panel .source-link-card {
  background: rgba(255, 255, 255, 0.035);
}

.settings-feedback-form {
  display: grid;
  gap: 12px;
}

.settings-feedback-form .feedback-submit {
  justify-self: end;
  min-width: 96px;
  min-height: 40px;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 4px !important;
  width: 19px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  background-image: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 6px !important;
  top: 8px !important;
  width: 13px !important;
  height: 8px !important;
  border: 0 !important;
  background: none !important;
  background-image: linear-gradient(
    135deg,
    transparent 0 18%,
    currentColor 18% 26%,
    transparent 26% 38%,
    currentColor 38% 46%,
    transparent 46% 58%,
    currentColor 58% 66%,
    transparent 66% 100%
  ) !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .sim-panel {
    width: calc(100vw - 10px) !important;
  }
}

/* Absolute final settings pass: detail pages fill to bottom tab and never overflow sideways. */
.settings-menu-sheet {
  position: fixed !important;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.settings-menu-list {
  height: calc(100% - 66px) !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.settings-inline-panel.settings-detail-panel {
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 28px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .source-info-tab-panel,
.settings-detail-panel .source-info-sections,
.settings-detail-panel .source-info-section,
.settings-detail-panel .source-link-card,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .push-history-list,
.settings-detail-panel .push-history-item,
.settings-detail-panel .admin-mode-dialog,
.settings-detail-panel .admin-mode-field,
.settings-detail-panel .admin-notification-panel {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.settings-detail-panel .source-info-section,
.settings-detail-panel .source-info-section *,
.settings-detail-panel .source-link-card,
.settings-detail-panel .source-link-card *,
.settings-detail-panel .push-history-item,
.settings-detail-panel .push-history-item *,
.settings-detail-panel .admin-mode-dialog,
.settings-detail-panel .admin-mode-dialog *,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .settings-feedback-form * {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#settings-push-button { order: 2 !important; }
#settings-push-history-button { order: 3 !important; }
#settings-source-button { order: 4 !important; }
#settings-privacy-button { order: 5 !important; }
#settings-feedback-button { order: 6 !important; }
#settings-admin-button { order: 7 !important; }
#settings-push-panel { order: 8 !important; }
#settings-push-history-panel { order: 9 !important; }
#settings-source-panel { order: 10 !important; }
#settings-privacy-panel { order: 11 !important; }
#settings-feedback-panel { order: 12 !important; }
#settings-admin-panel { order: 13 !important; }

.settings-admin-embedded {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.settings-admin-embedded .admin-mode-dialog {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-admin-embedded .admin-mode-dialog h2 {
  display: none !important;
}

#setup-panel.sim-panel {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
}

#setup-panel.sim-panel:focus-within {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 72px)) !important;
}

/* Final settings/detail sizing: bottom tab is the hard floor. */
.settings-menu-sheet {
  position: fixed !important;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.settings-menu-list {
  height: calc(100% - 66px) !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.settings-inline-panel.settings-detail-panel {
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 28px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .source-info-tab-panel,
.settings-detail-panel .source-info-sections,
.settings-detail-panel .source-info-section,
.settings-detail-panel .source-link-card,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .push-history-list,
.settings-detail-panel .push-history-item,
.settings-detail-panel .admin-mode-dialog,
.settings-detail-panel .admin-mode-field,
.settings-detail-panel .admin-notification-panel {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.settings-detail-panel .source-info-section,
.settings-detail-panel .source-info-section *,
.settings-detail-panel .source-link-card,
.settings-detail-panel .source-link-card *,
.settings-detail-panel .push-history-item,
.settings-detail-panel .push-history-item *,
.settings-detail-panel .admin-mode-dialog,
.settings-detail-panel .admin-mode-dialog *,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .settings-feedback-form * {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#settings-admin-button { order: 7 !important; }
#settings-push-panel { order: 8 !important; }
#settings-push-history-panel { order: 9 !important; }
#settings-source-panel { order: 10 !important; }
#settings-privacy-panel { order: 11 !important; }
#settings-feedback-panel { order: 12 !important; }
#settings-admin-panel { order: 13 !important; }

.settings-admin-embedded {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.settings-admin-embedded .admin-mode-dialog {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-admin-embedded .admin-mode-dialog h2 {
  display: none !important;
}

#setup-panel.sim-panel {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
  will-change: transform !important;
}

#setup-panel.sim-panel:focus-within {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 72px)) !important;
}

/* Final layout alignment: settings order, vertical legend on tablet/PC, attached sheet. */
#settings-push-button { order: 2 !important; }
#settings-push-history-button { order: 3 !important; }
#settings-source-button {
  order: 4 !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}
#settings-privacy-button { order: 5 !important; }
#settings-feedback-button { order: 6 !important; }
#settings-push-panel { order: 7 !important; }
#settings-push-history-panel { order: 8 !important; }
#settings-source-panel { order: 9 !important; }
#settings-privacy-panel { order: 10 !important; }
#settings-feedback-panel { order: 11 !important; }

#setup-panel.sim-panel {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 72px)) !important;
}

.bottom-tabs {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#setup-panel .settings-section[data-settings-section="source"] .field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: end !important;
}

#setup-panel .settings-section[data-settings-section="source"] .field-grid .field {
  min-width: 0 !important;
  margin: 0 !important;
}

#setup-panel .settings-section[data-settings-section="source"] .field-grid input,
#setup-panel .settings-section[data-settings-section="source"] .field-grid select {
  width: 100% !important;
  min-width: 0 !important;
}

@media (min-width: 721px) {
  .intensity-legend,
  body .intensity-legend {
    top: calc(env(safe-area-inset-top) + 72px) !important;
    right: calc(env(safe-area-inset-right) + 14px) !important;
    left: auto !important;
    width: 42px !important;
    max-width: 42px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .intensity-scale {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 42px !important;
  }

  .intensity-scale span {
    width: 42px !important;
    height: 32px !important;
    min-width: 42px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.28) !important;
    font-size: 0.82rem !important;
  }

  #simulation-start,
  body #simulation-start {
    top: calc(env(safe-area-inset-top) + 24px) !important;
    right: calc(env(safe-area-inset-right) + 14px) !important;
  }
}

@media (max-width: 720px) {
  #setup-panel .settings-section[data-settings-section="source"] .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Settings detail pages: vertical scroll only, split source/privacy. */
#settings-push-button { order: 2 !important; }
#settings-push-history-button { order: 3 !important; }
#settings-source-button { order: 4 !important; }
#settings-privacy-button { order: 5 !important; }
#settings-feedback-button { order: 6 !important; }
#settings-push-panel { order: 7 !important; }
#settings-push-history-panel { order: 8 !important; }
#settings-source-panel { order: 9 !important; }
#settings-privacy-panel { order: 10 !important; }
#settings-feedback-panel { order: 11 !important; }

.settings-menu-sheet,
.settings-menu-list,
.settings-inline-panel.settings-detail-panel {
  overflow-x: hidden !important;
}

.settings-inline-panel.settings-detail-panel {
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .source-info-sections,
.settings-detail-panel .source-info-tab-panel,
.settings-detail-panel .source-info-section,
.settings-detail-panel .source-link-card,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .push-history-list {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.settings-detail-panel .source-info-section,
.settings-detail-panel .source-info-section p,
.settings-detail-panel .source-info-section li,
.settings-detail-panel .source-info-section a,
.settings-detail-panel .source-link-card,
.settings-detail-panel .feedback-field,
.settings-detail-panel textarea {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.settings-detail-panel .source-info-tabs {
  display: none !important;
}

/* Interaction polish: remove preset artifacts, prevent text selection, quake tab icon. */
html,
body,
button,
input,
select,
textarea,
.app-shell,
.panel,
.map-layout,
.sim-panel,
.preset-picker,
.settings-menu-sheet,
.bottom-tabs {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

input,
textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.preset-picker-table thead,
.preset-sort-head,
.preset-sort-button {
  display: none !important;
}

.preset-picker-table td,
.preset-picker-table td::before,
.preset-picker-table td::after,
.preset-picker-table tr::before,
.preset-picker-table tr::after,
.preset-intensity-stack::before,
.preset-intensity-stack::after {
  content: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.preset-picker-table td:first-child {
  position: relative !important;
  overflow: hidden !important;
}

.preset-sort-buttons {
  position: relative !important;
  border: 0 !important;
  background: transparent !important;
}

.preset-sort-buttons::before,
.preset-sort-buttons::after,
.preset-sort-choice::before,
.preset-sort-choice::after {
  content: none !important;
  display: none !important;
}

.preset-sort-choice {
  position: relative !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  border: 0 !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 4px !important;
  width: 18px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
}

#earthquake-tab .bottom-tab-icon::after {
  left: 6px !important;
  top: 13px !important;
  width: 13px !important;
  height: 9px !important;
  background: currentColor !important;
  clip-path: polygon(0 45%, 14% 45%, 22% 0, 34% 100%, 46% 0, 58% 100%, 70% 0, 82% 45%, 100% 45%, 100% 70%, 76% 70%, 68% 100%, 56% 10%, 44% 100%, 32% 10%, 24% 70%, 0 70%) !important;
}

/* Absolute final pass EOF: depth/intensity preset cells and settings detail pages. */
.preset-picker-table-wrap { overflow-x: auto !important; }
.preset-picker-table, .preset-picker-table tbody { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-collapse: collapse !important; }
.preset-picker-table tr { display: table-row !important; height: 66px !important; }
.preset-picker-table td { display: table-cell !important; height: 66px !important; padding: 6px !important; vertical-align: middle !important; white-space: nowrap !important; border-right: 0 !important; }
.preset-picker-table td:first-child { width: 58px !important; min-width: 58px !important; text-align: center !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; }
.preset-picker-table td:nth-child(2) { width: 108px !important; min-width: 108px !important; }
.preset-picker-table td:nth-child(3) { width: auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.25 !important; }
.preset-picker-table td:nth-child(4), .preset-picker-table td:nth-child(5) { display: none !important; }
.preset-intensity-stack { display: inline-grid !important; place-items: center !important; gap: 2px !important; width: 44px !important; }
.preset-depth-over, .preset-magnitude-under { color: rgba(255, 255, 255, 0.74) !important; font-size: 0.56rem !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; }
.preset-intensity-badge { width: 30px !important; height: 24px !important; min-width: 30px !important; font-size: 0.86rem !important; line-height: 24px !important; }
.settings-menu-sheet { overflow: hidden !important; }
.settings-menu-list { position: relative !important; overflow-x: hidden !important; }
.settings-menu-sheet.settings-detail-open .settings-notification-card, .settings-menu-sheet.settings-detail-open .settings-menu-row { opacity: 0 !important; pointer-events: none !important; transform: translateX(-16px) !important; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important; }
.settings-inline-panel.settings-detail-panel { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; overflow-y: auto !important; padding: 0 0 24px !important; border: 0 !important; background: linear-gradient(180deg, rgba(18, 19, 20, 0.98), rgba(8, 9, 10, 0.99)), rgba(8, 9, 10, 0.99) !important; transform: translateX(100%) !important; transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important; touch-action: pan-y !important; }
.settings-inline-panel.settings-detail-panel.is-active { transform: translateX(0) !important; }
.settings-inline-panel.settings-detail-panel.is-leaving { transform: translateX(100%) !important; }
.settings-detail-head { position: sticky !important; top: 0 !important; z-index: 2 !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 52px !important; align-items: center !important; min-height: 56px !important; padding: calc(env(safe-area-inset-top) + 4px) 10px 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(14, 15, 16, 0.96) !important; backdrop-filter: blur(12px) !important; }
.settings-detail-head h3 { margin: 0 !important; color: #f6f6f6 !important; font-size: 1.02rem !important; font-weight: 900 !important; text-align: center !important; }
.settings-detail-back { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.86) !important; font-size: 1.8rem !important; line-height: 1 !important; }
.settings-detail-panel > :not(.settings-detail-head) { margin-left: 18px !important; margin-right: 18px !important; }
.settings-detail-panel .push-confirm-panel, .settings-detail-panel .source-info-overlay-content, .settings-detail-panel .settings-feedback-form { margin-top: 18px !important; }
@media (max-width: 720px) { .preset-picker-table-wrap { overflow-x: hidden !important; } .preset-picker-table td:first-child { width: 52px !important; min-width: 52px !important; padding-left: 4px !important; padding-right: 4px !important; } .preset-picker-table td:nth-child(2) { width: 88px !important; min-width: 88px !important; font-size: 0.68rem !important; } .preset-picker-table td:nth-child(3) { font-size: 0.74rem !important; } .preset-depth-over, .preset-magnitude-under { font-size: 0.54rem !important; } }
@media (prefers-reduced-motion: reduce) { .settings-inline-panel.settings-detail-panel, .settings-menu-sheet.settings-detail-open .settings-notification-card, .settings-menu-sheet.settings-detail-open .settings-menu-row { transition: none !important; } }

/* Absolute final pass: depth/intensity preset cells and settings detail pages. */
.preset-picker-table-wrap {
  overflow-x: auto !important;
}

.preset-picker-table,
.preset-picker-table tbody {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.preset-picker-table tr {
  display: table-row !important;
  height: 66px !important;
}

.preset-picker-table td {
  display: table-cell !important;
  height: 66px !important;
  padding: 6px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.preset-picker-table td:first-child {
  width: 58px !important;
  min-width: 58px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(2) {
  width: 108px !important;
  min-width: 108px !important;
}

.preset-picker-table td:nth-child(3) {
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  display: none !important;
}

.preset-intensity-stack {
  display: inline-grid !important;
  place-items: center !important;
  gap: 2px !important;
  width: 44px !important;
}

.preset-depth-over,
.preset-magnitude-under {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.preset-intensity-badge {
  width: 30px !important;
  height: 24px !important;
  min-width: 30px !important;
}

.settings-menu-sheet {
  overflow: hidden !important;
}

.settings-menu-list {
  position: relative !important;
  overflow-x: hidden !important;
}

.settings-menu-sheet.settings-detail-open .settings-notification-card,
.settings-menu-sheet.settings-detail-open .settings-menu-row {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-16px) !important;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
}

.settings-inline-panel.settings-detail-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(18, 19, 20, 0.98), rgba(8, 9, 10, 0.99)), rgba(8, 9, 10, 0.99) !important;
  transform: translateX(100%) !important;
  transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
  touch-action: pan-y !important;
}

.settings-inline-panel.settings-detail-panel.is-active {
  transform: translateX(0) !important;
}

.settings-inline-panel.settings-detail-panel.is-leaving {
  transform: translateX(100%) !important;
}

.settings-detail-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: calc(env(safe-area-inset-top) + 4px) 10px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(14, 15, 16, 0.96) !important;
  backdrop-filter: blur(12px) !important;
}

.settings-detail-head h3 {
  margin: 0 !important;
  color: #f6f6f6 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.settings-detail-back {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}

.settings-detail-panel > :not(.settings-detail-head) {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .settings-feedback-form {
  margin-top: 18px !important;
}

@media (max-width: 720px) {
  .preset-picker-table-wrap {
    overflow-x: hidden !important;
  }

  .preset-picker-table td:first-child {
    width: 52px !important;
    min-width: 52px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 88px !important;
    min-width: 88px !important;
    font-size: 0.68rem !important;
  }

  .preset-picker-table td:nth-child(3) {
    font-size: 0.74rem !important;
  }

  .preset-depth-over,
  .preset-magnitude-under {
    font-size: 0.54rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-inline-panel.settings-detail-panel,
  .settings-menu-sheet.settings-detail-open .settings-notification-card,
  .settings-menu-sheet.settings-detail-open .settings-menu-row {
    transition: none !important;
  }
}

/* Absolute final pass: current request wins. */
.preset-picker-table-wrap {
  overflow-x: auto !important;
}

.preset-picker-table,
.preset-picker-table tbody {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.preset-picker-table tr {
  display: table-row !important;
  height: 66px !important;
  min-height: 66px !important;
}

.preset-picker-table td {
  display: table-cell !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 6px 6px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.preset-picker-table td:first-child {
  width: 58px !important;
  min-width: 58px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(2) {
  width: 108px !important;
  min-width: 108px !important;
  font-variant-numeric: tabular-nums !important;
}

.preset-picker-table td:nth-child(3) {
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  display: none !important;
}

.preset-intensity-stack {
  display: inline-grid !important;
  place-items: center !important;
  gap: 2px !important;
  width: 44px !important;
}

.preset-depth-over,
.preset-magnitude-under {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.preset-intensity-badge {
  width: 30px !important;
  height: 24px !important;
  min-width: 30px !important;
  border-radius: 6px !important;
}

.settings-menu-sheet {
  overflow: hidden !important;
}

.settings-menu-list {
  position: relative !important;
  overflow-x: hidden !important;
}

.settings-menu-sheet.settings-detail-open .settings-notification-card,
.settings-menu-sheet.settings-detail-open .settings-menu-row {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-16px) !important;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
}

.settings-inline-panel.settings-detail-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(18, 19, 20, 0.98), rgba(8, 9, 10, 0.99)),
    rgba(8, 9, 10, 0.99) !important;
  transform: translateX(100%) !important;
  transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
  touch-action: pan-y !important;
}

.settings-inline-panel.settings-detail-panel.is-active {
  transform: translateX(0) !important;
}

.settings-inline-panel.settings-detail-panel.is-leaving {
  transform: translateX(100%) !important;
}

.settings-detail-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: calc(env(safe-area-inset-top) + 4px) 10px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(14, 15, 16, 0.96) !important;
  backdrop-filter: blur(12px) !important;
}

.settings-detail-head h3 {
  margin: 0 !important;
  color: #f6f6f6 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.settings-detail-back {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}

.settings-detail-panel > :not(.settings-detail-head) {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .settings-feedback-form {
  margin-top: 18px !important;
}

@media (max-width: 720px) {
  .preset-picker-table-wrap {
    overflow-x: hidden !important;
  }

  .preset-picker-table td:first-child {
    width: 52px !important;
    min-width: 52px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 88px !important;
    min-width: 88px !important;
    font-size: 0.68rem !important;
  }

  .preset-picker-table td:nth-child(3) {
    font-size: 0.74rem !important;
  }

  .preset-depth-over,
  .preset-magnitude-under {
    font-size: 0.54rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-inline-panel.settings-detail-panel,
  .settings-menu-sheet.settings-detail-open .settings-notification-card,
  .settings-menu-sheet.settings-detail-open .settings-menu-row {
    transition: none !important;
  }
}

/* Final pass: preset table density + settings detail pages. */
.preset-picker-table-wrap {
  overflow-x: auto !important;
}

.preset-picker-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}

.preset-picker-table tr {
  min-height: 66px !important;
}

.preset-picker-table td {
  height: 66px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  vertical-align: middle !important;
}

.preset-picker-table td:first-child {
  width: 58px !important;
  min-width: 58px !important;
  padding-left: 6px !important;
  padding-right: 4px !important;
}

.preset-picker-table td:nth-child(2) {
  width: 116px !important;
  min-width: 116px !important;
}

.preset-picker-table td:nth-child(3) {
  width: auto !important;
}

.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  display: none !important;
}

.preset-intensity-stack {
  display: inline-grid !important;
  place-items: center !important;
  gap: 2px !important;
  width: 44px !important;
}

.preset-depth-over {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.preset-intensity-badge {
  width: 30px !important;
  height: 24px !important;
  min-width: 30px !important;
  border-radius: 6px !important;
}

.preset-magnitude-under {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .preset-picker-table-wrap {
    overflow-x: hidden !important;
  }

  .preset-picker-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .preset-picker-table td:first-child {
    width: 52px !important;
    min-width: 52px !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 88px !important;
    min-width: 88px !important;
    font-size: 0.68rem !important;
  }

  .preset-picker-table td:nth-child(3) {
    font-size: 0.74rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .preset-depth-over,
  .preset-magnitude-under {
    font-size: 0.54rem !important;
  }
}

.settings-menu-sheet {
  overflow: hidden !important;
}

.settings-menu-list {
  position: relative !important;
  overflow-x: hidden !important;
}

.settings-menu-sheet.settings-detail-open .settings-notification-card,
.settings-menu-sheet.settings-detail-open .settings-menu-row {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-16px) !important;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
}

.settings-inline-panel.settings-detail-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(18, 19, 20, 0.98), rgba(8, 9, 10, 0.99)),
    rgba(8, 9, 10, 0.99) !important;
  transform: translateX(100%) !important;
  transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
  touch-action: pan-y !important;
}

.settings-inline-panel.settings-detail-panel.is-active {
  transform: translateX(0) !important;
}

.settings-inline-panel.settings-detail-panel.is-leaving {
  transform: translateX(100%) !important;
}

.settings-detail-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: calc(env(safe-area-inset-top) + 4px) 10px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(14, 15, 16, 0.96) !important;
  backdrop-filter: blur(12px) !important;
}

.settings-detail-head h3 {
  margin: 0 !important;
  color: #f6f6f6 !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.settings-detail-back {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}

.settings-detail-panel > :not(.settings-detail-head) {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.settings-detail-panel .push-confirm-panel {
  margin-top: 18px !important;
}

.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .settings-feedback-form {
  margin-top: 18px !important;
}

@media (prefers-reduced-motion: reduce) {
  .settings-inline-panel.settings-detail-panel,
  .settings-menu-sheet.settings-detail-open .settings-notification-card,
  .settings-menu-sheet.settings-detail-open .settings-menu-row {
    transition: none !important;
  }
}

/* Absolute final UI stabilization: visible legend, smooth sheet, compact forms/tables. */
.intensity-legend {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 8px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  z-index: 10020 !important;
  display: flex !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

#simulation-start {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 48px) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  z-index: 10021 !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body:not([data-active-bottom-tab="earthquake-tab"]) .intensity-legend,
body:not([data-active-bottom-tab="earthquake-tab"]) #simulation-start {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sim-panel {
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 28px 28px 0 0 !important;
  transform: translate(-50%, 0) !important;
  transition:
    height 240ms cubic-bezier(0.2, 0.85, 0.2, 1),
    max-height 240ms cubic-bezier(0.2, 0.85, 0.2, 1),
    box-shadow 180ms ease !important;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  height: min(46svh, 440px) !important;
  max-height: min(46svh, 440px) !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-open,
.sim-panel[data-sheet-state="open"] {
  height: min(70svh, 680px) !important;
  max-height: min(70svh, 680px) !important;
  transform: translate(-50%, 0) !important;
}

.sim-panel.is-dragging {
  height: var(--sheet-drag-height, min(46svh, 440px)) !important;
  max-height: var(--sheet-drag-height, min(46svh, 440px)) !important;
  transition: none !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel .field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#setup-panel .field {
  min-width: 0 !important;
  width: 100% !important;
}

#setup-panel .field input,
#setup-panel .field select {
  width: 100% !important;
  min-width: 0 !important;
}

.preset-picker-head,
.preset-picker-close,
.preset-picker-description {
  display: none !important;
}

.preset-picker-dialog {
  padding: 0 !important;
}

.preset-picker-table-wrap {
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.preset-picker-table,
.preset-picker-table tbody {
  display: block !important;
  width: 100% !important;
}

.preset-picker-table thead {
  display: none !important;
}

.preset-picker-table tr {
  display: grid !important;
  grid-template-columns: 40px 92px minmax(100px, 1fr) 52px 48px !important;
  column-gap: 4px !important;
  align-items: center !important;
  width: 100% !important;
}

.preset-picker-table td {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 12px 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.preset-picker-table td:first-child {
  padding-left: 8px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(3) {
  white-space: normal !important;
  line-height: 1.35 !important;
}

.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  text-align: center !important;
}

.settings-notification-card {
  grid-template-columns: 1fr auto !important;
  padding: 14px 18px !important;
}

.settings-notification-row span {
  align-self: center !important;
}

.settings-notification-row strong,
#settings-push-status {
  display: inline-grid !important;
  min-width: 82px !important;
  min-height: 32px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.08em !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 6px !important;
  width: 14px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 2px 5px 5px 2px !important;
  background: transparent !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 15px !important;
  top: 3px !important;
  width: 5px !important;
  height: 20px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: rotate(28deg) !important;
  clip-path: polygon(50% 0, 100% 14%, 72% 88%, 50% 100%, 28% 88%, 0 14%) !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 5px !important;
  width: 19px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
}

#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 6px !important;
  top: 8px !important;
  width: 14px !important;
  height: 10px !important;
  border: 0 !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1 8 H4 L6 3 L9 13 L12 5 L15 11 L18 2 L21 14 L24 8 H27' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1 8 H4 L6 3 L9 13 L12 5 L15 11 L18 2 L21 14 L24 8 H27' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .intensity-scale span {
    width: clamp(27px, 8.7vw, 33px) !important;
  }

  .preset-picker-table tr {
    grid-template-columns: 36px 76px minmax(76px, 1fr) 44px 42px !important;
  }

  .sim-panel {
    width: 100vw !important;
  }
}

/* Final pass 2: NERV sheet motion, top legend row, compact preset table. */
.zoom-only-control {
  display: none !important;
}

.intensity-legend {
  top: calc(env(safe-area-inset-top) + 6px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  width: auto !important;
  max-width: none !important;
  justify-content: center !important;
  z-index: 920 !important;
}

.intensity-legend h2 {
  flex: 0 0 40px !important;
  min-width: 40px !important;
  height: 32px !important;
}

.intensity-scale span {
  width: clamp(30px, 4.6vw, 42px) !important;
  height: 32px !important;
}

#simulation-start {
  top: calc(env(safe-area-inset-top) + 46px) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  width: 44px !important;
  height: 34px !important;
  z-index: 930 !important;
}

.sim-panel {
  width: min(820px, calc(100vw - 18px)) !important;
  max-height: min(64svh, 620px) !important;
  overflow: hidden !important;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 48%) !important;
}

#setup-panel.setup-menu-open,
.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

.sim-panel.is-dragging {
  transition: none !important;
  cursor: grabbing !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(48% + var(--sheet-drag-y, 0px))) !important;
}

.sim-panel.is-dragging[data-sheet-state="open"] {
  transform: translate(-50%, var(--sheet-drag-y, 0px)) !important;
}

.sheet-handle {
  width: 100px !important;
  height: 26px !important;
  cursor: grab !important;
}

.sheet-handle::after {
  top: 8px !important;
  width: 70px !important;
  height: 5px !important;
}

.preset-picker-head,
.preset-picker-description {
  display: none !important;
}

.preset-picker-dialog {
  padding: 0 !important;
}

.preset-picker-table-wrap {
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
  padding-top: 0 !important;
  overflow-x: hidden !important;
}

.preset-picker-table {
  width: 100% !important;
  table-layout: fixed !important;
}

.preset-picker-table thead {
  display: none !important;
}

.preset-picker-table td {
  padding: 12px 8px !important;
}

.preset-picker-table td:first-child {
  width: 44px !important;
  min-width: 44px !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
}

.preset-picker-table td:nth-child(2) {
  width: 116px !important;
  min-width: 116px !important;
  white-space: normal !important;
}

.preset-picker-table td:nth-child(3) {
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.preset-picker-table td:nth-child(4) {
  width: 58px !important;
  min-width: 58px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(5) {
  width: 54px !important;
  min-width: 54px !important;
  padding-left: 4px !important;
  padding-right: 8px !important;
  text-align: center !important;
}

.preset-intensity-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 6px !important;
}

.bottom-tab-icon {
  font-size: 0 !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  inset: 3px !important;
  width: auto !important;
  height: auto !important;
  border: 2.4px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  content: "i" !important;
  left: 0 !important;
  top: 1px !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 24px !important;
  text-align: center !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 6px !important;
  width: 15px !important;
  height: 14px !important;
  border: 2px solid currentColor !important;
  border-radius: 2px 5px 5px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 13px !important;
  top: 4px !important;
  width: 9px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: rotate(25deg) !important;
  clip-path: polygon(45% 0, 70% 0, 80% 82%, 58% 100%, 36% 82%) !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  content: "⚙" !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  font-size: 22px !important;
  line-height: 24px !important;
  text-align: center !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  content: none !important;
}

@media (max-width: 720px) {
  .intensity-legend {
    top: calc(env(safe-area-inset-top) + 5px) !important;
  }

  .intensity-legend h2 {
    flex-basis: 36px !important;
    min-width: 36px !important;
  }

  .intensity-scale span {
    width: clamp(27px, 9vw, 34px) !important;
    height: 30px !important;
  }

  #simulation-start {
    top: calc(env(safe-area-inset-top) + 42px) !important;
    width: 40px !important;
    height: 32px !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 96px !important;
    min-width: 96px !important;
  }

  .preset-picker-table td:nth-child(4) {
    width: 50px !important;
    min-width: 50px !important;
  }

  .preset-picker-table td:nth-child(5) {
    width: 46px !important;
    min-width: 46px !important;
  }
}

.sim-panel[data-sheet-state="collapsed"] > :not(.sheet-handle),
#setup-panel.setup-menu-closed > :not(.sheet-handle) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sim-panel[data-sheet-state="collapsed"] .sim-panel-head,
.sim-panel[data-sheet-state="collapsed"] .sim-panel-scroll,
#setup-panel.setup-menu-closed .sim-panel-head,
#setup-panel.setup-menu-closed .sim-panel-scroll {
  display: flex !important;
}

#setup-panel.setup-menu-closed .sim-panel-scroll,
.sim-panel[data-sheet-state="collapsed"] .sim-panel-scroll {
  display: block !important;
}

/* Final pass 3: no title bars, bottom-attached sheet, notification rows. */
.preset-picker-head,
.preset-picker-close,
.settings-menu-head,
.settings-menu-close {
  display: none !important;
}

.preset-picker-dialog,
.settings-menu-sheet,
.nerv-full-panel {
  padding-top: 0 !important;
}

.preset-picker-table-wrap {
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom)) !important;
}

.sim-panel {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  height: min(68svh, 660px) !important;
  max-height: min(68svh, 660px) !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  height: min(44svh, 430px) !important;
  max-height: min(44svh, 430px) !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-open,
.sim-panel[data-sheet-state="open"] {
  height: min(68svh, 660px) !important;
  max-height: min(68svh, 660px) !important;
  transform: translate(-50%, 0) !important;
}

.sim-panel.is-dragging {
  height: var(--sheet-drag-height, min(44svh, 430px)) !important;
  max-height: var(--sheet-drag-height, min(44svh, 430px)) !important;
  transform: translate(-50%, 0) !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"],
.sim-panel.is-dragging[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

.sim-panel-scroll {
  min-height: 0 !important;
}

.settings-switch {
  display: none !important;
}

.settings-notification-card {
  order: 1 !important;
  grid-template-columns: 1fr auto !important;
  padding-block: 14px !important;
}

#settings-push-button {
  order: 2 !important;
}

#settings-push-history-button {
  order: 3 !important;
}

#settings-source-button {
  order: 4 !important;
}

#settings-source-panel {
  order: 5 !important;
}

#settings-feedback-button {
  order: 6 !important;
}

#settings-feedback-panel {
  order: 7 !important;
}

.preset-picker-table td:nth-child(2) {
  width: 104px !important;
  min-width: 104px !important;
}

.preset-picker-table td:nth-child(4) {
  width: 50px !important;
  min-width: 50px !important;
}

.preset-picker-table td:nth-child(5) {
  width: 48px !important;
  min-width: 48px !important;
}

@media (max-width: 720px) {
  .sim-panel {
    height: min(68svh, 620px) !important;
    max-height: min(68svh, 620px) !important;
  }

  #setup-panel.setup-menu-closed,
  .sim-panel[data-sheet-state="collapsed"] {
    height: min(44svh, 390px) !important;
    max-height: min(44svh, 390px) !important;
  }

  .preset-picker-table td:nth-child(2) {
    width: 88px !important;
    min-width: 88px !important;
  }
}

/* Final pass 5: notification settings live inside Settings menu. */
.settings-notification-row strong,
#settings-push-status {
  display: inline-grid !important;
  min-width: 54px !important;
  min-height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.settings-switch,
#settings-push-toggle {
  display: none !important;
}

#settings-push-button {
  order: 2 !important;
}

#settings-push-panel {
  order: 3 !important;
}

#settings-push-history-button {
  order: 4 !important;
}

#settings-push-history-panel {
  order: 5 !important;
}

#settings-source-button {
  order: 6 !important;
}

#settings-source-panel {
  order: 7 !important;
}

#settings-feedback-button {
  order: 8 !important;
}

#settings-feedback-panel {
  order: 9 !important;
}

.settings-push-inline-panel .push-confirm-panel,
.settings-push-history-inline-panel .push-confirm-panel {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
}

.settings-push-inline-panel .push-confirm-panel h2,
.settings-push-history-inline-panel .push-history-head {
  display: none !important;
}

.settings-push-inline-panel .push-confirm-panel p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

.settings-push-inline-panel .push-confirm-actions {
  justify-content: flex-end !important;
}

.settings-push-history-inline-panel .push-history-list {
  max-height: 42svh !important;
  overflow-y: auto !important;
}

#setup-panel #settings-push-history-button {
  display: none !important;
}

/* Deploy fix: legend and simulation trigger must always be visible above map UI. */
.intensity-legend,
body .intensity-legend,
body:not([data-active-bottom-tab="earthquake-tab"]) .intensity-legend {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 8px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  z-index: 2147483000 !important;
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

#simulation-start,
body #simulation-start,
body:not([data-active-bottom-tab="earthquake-tab"]) #simulation-start {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 48px) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  z-index: 2147483001 !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Final deploy polish: compact legend, centered red play/stop, stable preset rows. */
.intensity-legend,
body .intensity-legend {
  left: max(6px, env(safe-area-inset-left)) !important;
  right: max(58px, calc(env(safe-area-inset-right) + 58px)) !important;
  justify-content: flex-start !important;
  border-radius: 999px !important;
}

.intensity-legend h2 {
  flex: 0 0 32px !important;
  min-width: 32px !important;
  height: 28px !important;
  padding: 0 4px !important;
  font-size: 0.58rem !important;
}

.intensity-scale span {
  width: clamp(24px, 3.7vw, 34px) !important;
  height: 28px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

#simulation-start,
body #simulation-start {
  width: 42px !important;
  min-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    #e61946 !important;
  box-shadow:
    0 10px 24px rgba(230, 25, 70, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

#simulation-start::before,
body #simulation-start::before {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 0 0 3px !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 13px solid #fff !important;
}

body.simulation-running #simulation-start::before {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #fff !important;
}

.preset-picker-table {
  table-layout: fixed !important;
}

.preset-picker-table tr {
  grid-template-columns: 38px 92px minmax(0, 1fr) 48px 44px !important;
  min-height: 58px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.preset-picker-table td {
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 8px 4px !important;
  border-bottom: 0 !important;
}

.preset-picker-table td:first-child,
.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  justify-content: center !important;
}

.preset-picker-table td:nth-child(2) {
  justify-content: flex-start !important;
  font-variant-numeric: tabular-nums;
}

.preset-picker-table td:nth-child(3) {
  justify-content: flex-start !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 720px) {
  .intensity-legend,
  body .intensity-legend {
    right: max(54px, calc(env(safe-area-inset-right) + 54px)) !important;
  }

  .intensity-legend h2 {
    flex-basis: 28px !important;
    min-width: 28px !important;
    font-size: 0.52rem !important;
  }

  .intensity-scale span {
    width: clamp(22px, 7vw, 29px) !important;
    height: 26px !important;
    font-size: 0.66rem !important;
  }

  #simulation-start,
  body #simulation-start {
    width: 38px !important;
    min-width: 38px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .preset-picker-table tr {
    grid-template-columns: 34px 74px minmax(0, 1fr) 42px 38px !important;
  }
}

/* Preset table: allow horizontal scroll, keep row height, show magnitude under intensity. */
.preset-picker-table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.preset-picker-table,
.preset-picker-table tbody {
  display: table !important;
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.preset-picker-table tr {
  display: table-row !important;
  height: 58px !important;
  min-height: 58px !important;
}

.preset-picker-table td {
  display: table-cell !important;
  height: 58px !important;
  min-height: 58px !important;
  vertical-align: middle !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
}

.preset-picker-table td:first-child {
  width: 48px !important;
  min-width: 48px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(2) {
  width: 108px !important;
  min-width: 108px !important;
}

.preset-picker-table td:nth-child(3) {
  width: 176px !important;
  min-width: 176px !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

.preset-picker-table td:nth-child(4) {
  width: 48px !important;
  min-width: 48px !important;
  text-align: center !important;
}

.preset-picker-table td:nth-child(5) {
  display: none !important;
}

.preset-intensity-stack {
  display: inline-grid !important;
  place-items: center !important;
  gap: 2px !important;
  width: 34px !important;
}

.preset-intensity-badge {
  width: 30px !important;
  height: 26px !important;
  min-width: 30px !important;
  border-radius: 6px !important;
}

.preset-magnitude-under {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

/* Preset toolbar: replace title with compact search and sort controls. */
.preset-picker-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(10, 11, 12, 0.96) !important;
}

.preset-picker-head h2,
.preset-picker-close,
.preset-picker-description {
  display: none !important;
}

.preset-filter-input,
.preset-sort-select {
  min-width: 0 !important;
  height: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9px !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  outline: none !important;
}

.preset-filter-input::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.preset-sort-select {
  width: 128px !important;
  cursor: pointer !important;
}

.preset-picker-table-wrap {
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 44px) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 44px) !important;
}

@media (max-width: 720px) {
  .preset-picker-head {
    height: 40px !important;
    min-height: 40px !important;
    padding: 5px 8px !important;
  }

  .preset-filter-input,
  .preset-sort-select {
    height: 30px !important;
    font-size: 0.8rem !important;
  }

  .preset-sort-select {
    width: 104px !important;
  }

  .preset-picker-table-wrap {
    height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 40px) !important;
    max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 40px) !important;
  }
}

/* Final pass 4: keep legend/start visible and refine bottom icons. */
.intensity-legend {
  top: calc(env(safe-area-inset-top) + 8px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  z-index: 3600 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#simulation-start {
  top: calc(env(safe-area-inset-top) + 48px) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  z-index: 3610 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not([data-active-bottom-tab="earthquake-tab"]) .intensity-legend,
body:not([data-active-bottom-tab="earthquake-tab"]) #simulation-start {
  opacity: 0 !important;
  pointer-events: none !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 4px !important;
  width: 19px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 6px !important;
  top: 9px !important;
  width: 13px !important;
  height: 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow:
    0 0 0 1.5px transparent,
    0 -3px 0 -1px currentColor,
    2px 2px 0 -1px currentColor,
    4px -4px 0 -1px currentColor,
    6px 3px 0 -1px currentColor,
    8px -3px 0 -1px currentColor,
    10px 2px 0 -1px currentColor,
    12px -2px 0 -1px currentColor !important;
  clip-path: none !important;
}

body.community-map-mode #map::after {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) - 12px) !important;
}

.maintenance-mode-badge,
.local-server-badge,
.parent-terminal-badge {
  display: none !important;
}

/* Community post dots: keep them tiny and flat so many posts can accumulate. */
.community-post-marker {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2ea7ff !important;
  box-shadow: none !important;
  opacity: 0.95 !important;
}

.community-post-marker[data-community-tag="weather"] {
  background: #2ea7ff !important;
}

.community-post-marker[data-community-tag="disaster"] {
  background: #ff304f !important;
}

.community-post-marker[data-community-tag="earthquake"] {
  background: #34d06f !important;
}

.community-post-marker[data-community-tag="safety"] {
  background: #ffd84a !important;
}

#history-full-panel .history-stats-sort-row {
  grid-template-columns: auto minmax(0, 1fr) 14px minmax(0, 1fr) 58px !important;
  column-gap: 6px !important;
}

#history-full-panel .history-stats-sort-row label {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

#history-full-panel .history-stats-sort-row label:nth-of-type(2) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#history-full-panel .history-stats-sort-row label + span {
  width: 14px !important;
  min-width: 14px !important;
  text-align: center !important;
}

#history-full-panel .history-stats-sort-row select,
#history-start-year,
#history-end-year {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border: 2.4px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  content: "i" !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Final final: notification rows stay in the settings page, not overlays. */
.settings-notification-row strong,
#settings-push-status {
  display: inline-grid !important;
  min-width: 54px !important;
  min-height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.settings-switch,
#settings-push-toggle {
  display: none !important;
}

#settings-push-button {
  order: 2 !important;
}

#settings-push-panel {
  order: 3 !important;
}

#settings-push-history-button {
  order: 4 !important;
}

#settings-push-history-panel {
  order: 5 !important;
}

#settings-source-button {
  order: 6 !important;
}

#settings-source-panel {
  order: 7 !important;
}

#settings-feedback-button {
  order: 8 !important;
}

#settings-feedback-panel {
  order: 9 !important;
}

.settings-push-inline-panel .push-confirm-panel,
.settings-push-history-inline-panel .push-confirm-panel {
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
}

.settings-push-inline-panel .push-confirm-panel h2,
.settings-push-history-inline-panel .push-history-head {
  display: none !important;
}

.settings-push-inline-panel .push-confirm-panel p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

.settings-push-inline-panel .push-confirm-actions {
  justify-content: flex-end !important;
}

.settings-push-history-inline-panel .push-history-list {
  max-height: 42svh !important;
  overflow-y: auto !important;
}

button {
  font: inherit;
}

input,
select {
  font: inherit;
}

.app-shell {
  height: var(--app-height, 100vh);
  height: var(--app-height, 100dvh);
  min-height: min(520px, var(--app-height, 100vh));
  background:
    radial-gradient(circle at 24% 18%, rgba(38, 217, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #071013 0%, #020405 100%);
}

.panel {
  display: none;
  height: 100%;
  padding: 22px;
}

.panel-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#earthquake-panel.panel-active {
  gap: 0;
  padding: 0;
}

#earthquake-panel .topbar {
  display: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.status {
  flex: 0 0 auto;
  max-width: 46vw;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  background: rgba(2, 4, 5, 0.68);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 0;
  background: #061a3a;
}

#map {
  position: relative;
  width: 100%;
  height: 100%;
  background: #061a3a;
}

.maplibregl-map {
  background: #061a3a;
  font: inherit;
}

.maplibregl-ctrl-attrib {
  border-radius: 4px 0 0 0;
  background: rgba(0, 0, 0, 0.58);
  color: #b8c7ce;
}

.maplibregl-ctrl-attrib a {
  color: #8eeaff;
}

.maplibregl-control-container {
  z-index: 900;
}

.maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-left {
  z-index: 920;
}

.maplibregl-ctrl-group {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 4, 5, 0.72);
}

.maplibregl-ctrl-group button {
  filter: invert(1);
}

.maplibregl-ctrl-top-right {
  right: 8px;
}

@media (min-width: 721px) {
  .maplibregl-ctrl-top-right {
    right: 3px;
  }
}

.zoom-only-control button {
  display: grid;
  width: 38px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  filter: none;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.zoom-only-control button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.source-info-control {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.source-info-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(82, 87, 92, 0.92);
  box-shadow: inset 0 0 0 999px rgba(82, 87, 92, 0.92);
  color: transparent;
  cursor: pointer;
  font-size: 0;
  font-style: normal;
  font-weight: 700;
  position: relative;
  filter: none;
  opacity: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

.maplibregl-ctrl .source-info-button,
.maplibregl-ctrl .source-info-button:hover,
.maplibregl-ctrl .source-info-button:focus,
.maplibregl-ctrl .source-info-button:focus-visible,
.maplibregl-ctrl .source-info-button:active,
.maplibregl-ctrl .source-info-button[aria-expanded="true"] {
  appearance: none;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(82, 87, 92, 0.92) !important;
  background-color: rgba(82, 87, 92, 0.92) !important;
  box-shadow: inset 0 0 0 999px rgba(82, 87, 92, 0.92) !important;
  color: transparent;
  filter: none !important;
  opacity: 1 !important;
}

.source-info-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 21px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  opacity: 1;
  transform: translate(calc(-50% - 0.6px), -50%);
}

.source-info-button::after {
  content: "i";
  position: absolute;
  left: calc(50% - 0.5px);
  top: calc(50% - 1px);
  color: #ffffff;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  opacity: 1;
  transform: translate(-50%, -47%);
}

.source-info-button:hover,
.source-info-button:focus-visible,
.source-info-button:active {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(82, 87, 92, 0.92);
  color: transparent;
  box-shadow: inset 0 0 0 999px rgba(82, 87, 92, 0.92);
  filter: none;
  opacity: 1;
  outline: none;
}

.source-info-button:hover::before,
.source-info-button:focus-visible::before,
.source-info-button:active::before,
.source-info-button:hover::after,
.source-info-button:focus-visible::after,
.source-info-button:active::after {
  opacity: 1;
}

.feedback-info-button::before {
  left: calc(50% - 0.15px);
  top: calc(50% + 1px);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: center / 32px 32px no-repeat
    url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.4%205.8H22.6C24.0912%205.8%2025.3%207.00883%2025.3%208.5V17.4C25.3%2018.8912%2024.0912%2020.1%2022.6%2020.1H16.05L10.5%2024.3V20.1H7.4C5.90883%2020.1%204.7%2018.8912%204.7%2017.4V8.5C4.7%207.00883%205.90883%205.8%207.4%205.8Z%22%20stroke%3D%22white%22%20stroke-width%3D%222.55%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M10.6%2011.5H19.4M10.6%2014.5H19.4%22%20stroke%3D%22white%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  transform: translate(-50%, -50%);
}

.feedback-info-button::after {
  content: "";
  display: none;
}

.speech-info-button::before {
  width: 34.5px;
  height: 34.5px;
  border: 0;
  border-radius: 0;
  background: center / 34.5px 34.5px no-repeat
    url("data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.5%2010.2H8.5L14.1%205.9V20.1L8.5%2015.8H4.5V10.2Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M17.1%209.2C18.05%2010.1%2018.6%2011.45%2018.6%2013C18.6%2014.55%2018.05%2015.9%2017.1%2016.8%22%20stroke%3D%22white%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M19.5%206.7C21.25%208.35%2022.3%2010.6%2022.3%2013C22.3%2015.4%2021.25%2017.65%2019.5%2019.3%22%20stroke%3D%22white%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  transform: translate(calc(-50% - 0.6px), -50%);
}

.speech-info-button.is-muted::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.5%2010.2H8.5L14.1%205.9V20.1L8.5%2015.8H4.5V10.2Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
  transform: translate(calc(-50% - 0.6px), -50%);
}

.speech-info-button::after {
  content: "";
  display: none;
}

.speech-info-button.is-muted::after {
  content: "";
  position: absolute;
  left: calc(50% + 8.1px);
  top: 50%;
  display: block;
  width: 11px;
  height: 11px;
  background: center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2%202L9%209M9%202L2%209%22%20stroke%3D%22white%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  transform: translate(-50%, -50%);
}

.push-info-button::before {
  left: 50%;
  top: 50%;
  width: 23px;
  height: 25px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  clip-path: polygon(
    43% 5%,
    57% 5%,
    61% 13%,
    70% 18%,
    78% 30%,
    80% 57%,
    88% 72%,
    78% 82%,
    61% 82%,
    57% 93%,
    43% 93%,
    39% 82%,
    22% 82%,
    12% 72%,
    20% 57%,
    22% 30%,
    30% 18%,
    39% 13%
  );
  transform: translate(-50%, -50%);
}

.push-info-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 0.5px);
  display: block;
  width: 29px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 0.75px rgba(0, 0, 0, 0.72),
    0 0.5px 0 0.75px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%) rotate(-48deg);
  transform-origin: center;
}

.push-info-button.is-enabled {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.push-info-button.has-unread-history {
  background: rgba(82, 87, 92, 0.96) !important;
  background-color: rgba(82, 87, 92, 0.96) !important;
}

.push-info-unread-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 2;
  display: none;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #ff123b;
  pointer-events: none;
}

.push-info-button.has-unread-history .push-info-unread-dot {
  display: block;
}

.source-menu-button::before {
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    -7px 0 0 #ffffff,
    7px 0 0 #ffffff;
  transform: translate(-50%, -50%);
}

.source-menu-button::after {
  content: "";
  display: none;
}

.source-info-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  display: grid;
  gap: 6px;
  min-width: 132px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(2, 8, 17, 0.92);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.source-info-menu.hidden {
  display: none;
}

.source-info-menu-item {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #edf7ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: left;
}

.source-info-menu-item:hover,
.source-info-menu-item:focus-visible {
  border-color: rgba(125, 211, 252, 0.42);
  outline: none;
  background: rgba(14, 165, 233, 0.16);
}

.push-info-button.is-enabled::after {
  display: none;
}

.source-info-panel {
  display: grid;
  gap: 6px;
  min-width: 156px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 9px 10px;
  background: rgba(82, 87, 92, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.source-info-panel a {
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.35;
  text-decoration: none;
}

.source-info-panel a:hover,
.source-info-panel a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.source-overlay-open {
  overflow: hidden;
}

.speech-confirm-open {
  overflow: hidden;
}

.push-confirm-open {
  overflow: hidden;
}

.speech-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  backdrop-filter: blur(3px);
}

.source-info-overlay.push-confirm-overlay {
  z-index: 3100;
}

.feedback-overlay.from-maintenance,
.push-confirm-overlay.from-maintenance {
  z-index: 5200;
}

.feedback-overlay.from-source {
  z-index: 3200;
}

.speech-confirm-overlay.hidden,
.push-confirm-overlay.hidden {
  display: none;
}

.speech-confirm-dialog {
  display: grid;
  gap: 16px;
  width: min(460px, calc(100vw - 48px));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  padding: 22px 20px 16px;
  background: rgba(2, 4, 5, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.push-confirm-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  border: 0;
  border-radius: 0;
  padding-bottom: clamp(22px, 5vw, 48px);
  background: transparent;
  box-shadow: none;
}

.push-confirm-overlay[data-push-tab="settings"] .push-confirm-dialog {
  overflow-y: hidden;
  scrollbar-gutter: auto;
}

.push-confirm-overlay[data-push-tab="history"] .push-confirm-dialog {
  overflow: hidden;
}

.push-confirm-header {
  margin-bottom: clamp(20px, 4vw, 34px);
}

.push-confirm-panel[data-push-panel="settings"] {
  align-self: start;
  width: 100%;
}

.push-confirm-tabs {
  width: min(560px, 100%);
}

.push-confirm-tab {
  color: rgba(255, 255, 255, 0.72);
}

.push-confirm-tab.is-active {
  background: rgba(38, 217, 255, 0.18);
  color: #ffffff;
}

.push-confirm-panel {
  display: grid;
  min-height: 0;
  gap: 12px;
}

.push-confirm-panel[data-push-panel="history"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  gap: 4px;
  overflow: hidden;
}

.push-confirm-panel.hidden {
  display: none;
}

.push-confirm-dialog h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  line-height: 1.25;
  text-align: left;
}

.push-confirm-panel[data-push-panel="settings"] h2,
.push-confirm-panel[data-push-panel="settings"] p {
  text-align: left;
}

.push-confirm-panel[data-push-panel="settings"] {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  min-height: clamp(200px, 28vh, 288px);
  padding: clamp(14px, 2.8vw, 22px);
  background: rgba(255, 255, 255, 0.06);
  overflow: visible;
}

.speech-confirm-dialog p,
.push-confirm-dialog p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(0.9rem, 1.7vw, 1.02rem);
  font-weight: 800;
  line-height: 1.7;
  text-align: left;
  overflow-wrap: anywhere;
}

.push-confirm-mobile-break {
  display: none;
}

.speech-confirm-actions,
.push-confirm-actions {
  display: flex;
  justify-content: flex-start;
  align-self: end;
  gap: 10px;
  margin-top: 4px;
}

.speech-confirm-actions {
  justify-content: flex-end;
}

.push-confirm-actions {
  justify-content: flex-end;
  align-self: end;
  order: 4;
  margin-top: auto;
}

.speech-confirm-actions button,
.push-confirm-actions button {
  min-width: 68px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
}

.speech-confirm-actions .speech-confirm-yes,
.push-confirm-actions .push-confirm-yes {
  border-color: rgba(255, 255, 255, 0.32);
  background: #e51b45;
  color: #ffffff;
}

.speech-confirm-actions button:hover,
.speech-confirm-actions button:focus-visible,
.push-confirm-actions button:hover,
.push-confirm-actions button:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  background: rgba(38, 217, 255, 0.16);
  outline: none;
}

.push-confirm-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.push-confirm-status {
  order: 3;
  min-height: 1.35em;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  white-space: pre-line;
}

.push-confirm-status-error {
  color: #ffb4c2 !important;
}

.push-history-head h2 {
  margin-bottom: 0;
  text-align: left;
}

.push-history-list {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  min-height: 0;
  max-height: 100%;
  margin-top: 6px;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 4px 0 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.push-history-item {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 58px 6px 10px;
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
  outline: none;
}

.push-history-item:focus,
.push-history-item:focus-within,
.push-history-item:hover {
  border-color: rgba(142, 234, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.push-history-content {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.push-history-heading,
.push-history-content h3,
.push-history-content p {
  margin: 0;
  text-align: left;
}

.push-history-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.push-history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.push-history-title {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.push-history-meta time {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.push-history-read-state {
  appearance: none;
  align-self: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 5px 2px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  opacity: 1;
  white-space: nowrap;
  text-shadow: none;
}

.push-history-read-state.is-unread {
  cursor: pointer;
}

.push-history-read-state:focus-visible {
  outline: 2px solid rgba(142, 234, 255, 0.78);
  outline-offset: 2px;
}

.push-history-read-state.is-unread {
  color: #ff234f;
  background: rgba(255, 35, 79, 0.14);
}

.push-history-read-state.is-read {
  color: #2fdf72;
  background: rgba(47, 223, 114, 0.14);
}

.push-history-content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: calc(1.32em + 2px);
  white-space: pre-wrap;
  word-break: break-word;
}

.push-history-delete {
  position: absolute;
  bottom: 6px;
  right: 6px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 9px;
  background: rgba(225, 29, 72, 0.18);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  transition: opacity 120ms ease;
}

.push-history-item:focus .push-history-delete,
.push-history-item:focus-within .push-history-delete,
.push-history-item:hover .push-history-delete {
  opacity: 1;
  pointer-events: auto;
}

.push-history-status {
  min-height: 1.35em;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

.push-history-status.is-empty {
  grid-row: 2;
  align-self: center;
  margin-top: clamp(24px, 8vh, 86px);
}

.source-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  padding: clamp(58px, 7vw, 84px) clamp(18px, 5vw, 72px) clamp(72px, 8vw, 98px);
  background: rgba(0, 0, 0, 0.76);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.source-info-overlay.hidden {
  display: none;
}

.source-info-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 3001;
  display: grid;
  width: clamp(40px, 7vw, 52px);
  height: clamp(40px, 7vw, 52px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.74);
  color: transparent;
  cursor: pointer;
  font-size: 0;
  line-height: 1;
}

.source-info-close::before,
.source-info-close::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

.source-info-close::before {
  transform: rotate(45deg);
}

.source-info-close::after {
  transform: rotate(-45deg);
}

.source-info-close:hover,
.source-info-close:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  background: rgba(18, 26, 32, 0.92);
  outline: none;
}

.source-info-overlay-content {
  width: min(980px, 100%);
  height: 100%;
  max-height: 100%;
  min-width: 0;
  margin: 0 auto;
  padding-bottom: clamp(22px, 5vw, 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  contain: layout paint;
}

@media (min-width: 721px) {
  .push-confirm-overlay[data-push-tab="history"] {
    padding-bottom: clamp(32px, 4vh, 56px);
  }

  .push-confirm-overlay[data-push-tab="history"] .source-info-overlay-content,
  .push-confirm-overlay[data-push-tab="history"] .push-confirm-dialog {
    padding-bottom: clamp(8px, 2vh, 20px);
  }
}

.source-info-header {
  margin-bottom: clamp(20px, 4vw, 34px);
}

.source-info-header p {
  margin: 0 0 6px;
  color: #78dfff;
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  font-weight: 900;
  letter-spacing: 0;
}

.source-info-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.source-info-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: min(560px, 100%);
  margin: 0 0 clamp(16px, 3vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.source-info-tab {
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 9px clamp(6px, 2vw, 12px);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.86rem, 1.8vw, 1rem);
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.source-info-tab.is-active {
  background: rgba(91, 199, 255, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(91, 199, 255, 0.5);
}

.source-info-tab:focus-visible {
  outline: 2px solid rgba(142, 234, 255, 0.8);
  outline-offset: 2px;
}

.source-info-tab-panel {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}

.source-info-sections {
  display: grid;
  gap: clamp(14px, 2.8vw, 22px);
  max-width: 100%;
  overflow-x: hidden;
}

.source-info-section {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: clamp(14px, 2.8vw, 22px);
  background: rgba(255, 255, 255, 0.06);
}

.source-info-section h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.25;
}

.source-info-section p,
.source-info-section li,
.source-link-card p,
.source-link-card a,
.source-citation-note {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.9rem, 1.7vw, 1.02rem);
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
}

.source-info-section p {
  margin: 0 0 10px;
}

.source-info-section ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 1.25em;
}

.source-link-list {
  display: grid;
  gap: 9px;
}

.source-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 11px 12px;
  background: rgba(0, 0, 0, 0.16);
}

.source-link-label {
  margin: 0 0 3px;
  color: #ffffff;
  font-size: clamp(0.92rem, 1.8vw, 1.06rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.source-link-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.source-link-url {
  overflow-wrap: anywhere;
}

.source-info-section a {
  color: #5bc7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.source-info-section a:hover,
.source-info-section a:focus-visible {
  color: #9ee7ff;
  outline: none;
}

.source-citation-note {
  margin: 14px 0 0;
  white-space: pre-wrap;
  font-family: inherit;
}

.source-info-footer {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.source-info-updated {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.76rem, 1.5vw, 0.92rem);
  font-weight: 700;
  text-align: right;
}

.source-admin-mode-button {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-size: clamp(0.76rem, 1.5vw, 0.92rem);
  font-weight: 700;
  line-height: 1.4;
}

body:not(.community-admin-account) .source-admin-mode-button,
body:not(.community-admin-account) [data-settings-target="admin"],
body:not(.community-admin-account) #settings-admin-button {
  display: none !important;
}

.community-account-panel button:disabled,
.community-account-panel button.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.source-admin-mode-button:hover,
.source-admin-mode-button:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  color: #ffffff;
  outline: none;
}

.admin-mode-overlay {
  z-index: 3100;
  display: grid;
  place-items: center;
}

.admin-mode-dialog {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 22px;
  background: rgba(2, 4, 5, 0.88);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
}

.admin-mode-dialog h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.admin-mode-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 800;
}

.admin-mode-field input {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.42);
  color: #ffffff;
  font: inherit;
  outline: none;
}

.admin-mode-field textarea {
  min-width: 0;
  min-height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
  background: rgba(0, 0, 0, 0.42);
  color: #ffffff;
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.admin-mode-field input:focus {
  border-color: rgba(91, 199, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(91, 199, 255, 0.18);
}

.admin-mode-field textarea:focus {
  border-color: rgba(91, 199, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(91, 199, 255, 0.18);
}

.admin-mode-field input:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-mode-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-mode-actions button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
  background: #172027;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
  white-space: pre-line;
}

.admin-mode-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-mode-login {
  background: #0068b7 !important;
}

.admin-mode-maintenance {
  background: #e11d48 !important;
}

.admin-notification-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 14px;
}

.admin-notification-panel.hidden {
  display: none;
}

.admin-notification-panel h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.admin-notification-token-field.hidden {
  display: none;
}

.admin-notification-send {
  width: 100%;
  border: 1px solid rgba(38, 217, 255, 0.44);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(38, 217, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
}

.admin-notification-send:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-notification-status {
  min-height: 1.4em;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-mode-status {
  min-height: 1.4em;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.5;
}

.admin-mode-status-error {
  color: #ffb4c2;
}

.maintenance-reason-overlay {
  z-index: 3300;
  display: grid;
  place-items: center;
}

.maintenance-reason-dialog {
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 22px;
  background: rgba(2, 4, 5, 0.9);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

.maintenance-reason-dialog h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.maintenance-reason-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  font-weight: 800;
}

.maintenance-reason-field textarea {
  min-height: 130px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  padding: 12px 14px;
  resize: vertical;
  background: rgba(3, 8, 12, 0.78);
  color: #ffffff;
  font: inherit;
  line-height: 1.55;
  outline: none;
}

.maintenance-reason-field textarea:focus {
  border-color: rgba(91, 199, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(91, 199, 255, 0.18);
}

.maintenance-reason-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.maintenance-reason-actions button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 11px 12px;
  background: #172027;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
}

.maintenance-reason-submit {
  background: #e11d48 !important;
}

.maintenance-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
  text-align: center;
  backdrop-filter: blur(2px);
}

.maintenance-mode-overlay.hidden {
  display: none;
}

.maintenance-mode-badge,
.local-server-badge,
.parent-terminal-badge {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 6000;
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  width: max-content;
  max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: #7b1fa2;
  color: #ffffff;
  font-size: clamp(0.8rem, 1.7vw, 0.98rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.local-server-badge {
  z-index: 7000;
}

.parent-terminal-badge {
  z-index: 6500;
}

.maintenance-mode-badge,
.parent-terminal-badge {
  min-height: 58px;
  padding: 0 18px;
  font-size: clamp(0.98rem, 2.2vw, 1.12rem);
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: keep-all;
}

.maintenance-mode-badge.hidden,
.local-server-badge.hidden,
.parent-terminal-badge.hidden {
  display: none;
}

.maintenance-mode-dialog {
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 48px));
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 22px 24px;
  background: rgba(2, 4, 5, 0.88);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.36);
}

.maintenance-mode-dialog h2 {
  margin: 0;
  font-size: clamp(1.24rem, 4vw, 1.7rem);
  line-height: 1.2;
}

.maintenance-mode-dialog p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.92rem, 2.5vw, 1.08rem);
  line-height: 1.6;
}

.maintenance-mode-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  pointer-events: auto;
}

.maintenance-mode-dialog a {
  color: #5bc7ff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: auto;
}

.maintenance-mode-dialog a:hover,
.maintenance-mode-dialog a:focus-visible {
  color: #9ee7ff;
  outline: none;
}

.feedback-overlay {
  overflow: hidden;
  padding-bottom: clamp(58px, 6vw, 78px);
  touch-action: none;
}

.feedback-form {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 8px;
  height: 100%;
  max-height: 100%;
  padding-bottom: clamp(54px, 6vw, 72px);
  overflow: hidden;
  scrollbar-gutter: auto;
  touch-action: none;
}

.feedback-form .source-info-header {
  margin-bottom: clamp(12px, 2.2vw, 20px);
}

.feedback-field {
  display: grid;
  gap: 6px;
}

.feedback-field span {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 800;
}

.feedback-field textarea {
  height: clamp(132px, 24vh, 220px);
  min-height: 0;
  max-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  padding: 10px 12px;
  resize: none;
  background: rgba(3, 8, 12, 0.78);
  color: #ffffff;
  font: inherit;
  line-height: 1.38;
  outline: none;
}

.feedback-field textarea:focus {
  border-color: rgba(91, 199, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(91, 199, 255, 0.18);
}

.feedback-status,
.feedback-sheet-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.82rem, 1.6vw, 0.95rem);
  line-height: 1.45;
}

.feedback-status-error {
  color: #ffb4c2;
}

.feedback-actions {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  z-index: 3001;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.feedback-submit {
  width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 11px 18px;
  background: #e60033;
  color: #ffffff;
  cursor: pointer;
  font-size: clamp(0.96rem, 2vw, 1.08rem);
  font-weight: 900;
  line-height: 1.2;
  pointer-events: auto;
}

.feedback-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.maplibregl-canvas.epicenter-edit-enabled {
  cursor: crosshair;
}

body.app-loading #map .maplibregl-canvas {
  pointer-events: none;
}

body.app-loading #map {
  cursor: wait;
}

.map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  background: #061a3a;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

body.map-core-loading .map-wrap::after {
  opacity: 0;
}

body.map-core-loading .maplibregl-marker {
  visibility: hidden;
}

body.app-loading .epicenter-marker-shell {
  visibility: hidden;
}

.sim-panel {
  position: absolute;
  left: 14px;
  top: 10px;
  z-index: 760;
  width: min(360px, calc(100% - 28px));
  max-height: calc(var(--app-height, 100vh) - 20px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(2, 4, 5, 0.84);
  backdrop-filter: blur(10px);
  overflow: visible;
  transition: transform 180ms ease;
}

.sheet-handle {
  position: absolute;
  top: 50%;
  right: -22px;
  left: auto;
  display: block;
  width: 32px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(38, 217, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(2, 4, 5, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
  color: #d8e5eb;
  cursor: pointer;
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  touch-action: none;
  transform: translateY(-50%);
}

.sheet-handle::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 2px;
  height: 28px;
  border-radius: 999px;
  background: rgba(216, 229, 235, 0.26);
  transform: translateY(-50%);
}

.sheet-handle::after {
  content: "‹";
  position: absolute;
  top: 50%;
  right: 7px;
  color: #e9fbff;
  font-size: 1.4rem;
  line-height: 1;
  transform: translateY(-54%);
}

.sim-panel[data-sheet-state="collapsed"] .sheet-handle::after {
  content: "›";
}

.sim-panel[data-sheet-state="collapsed"] {
  transform: translateX(calc(-100% + 34px));
}

.sim-panel[data-sheet-state="open"] {
  transform: translateX(0);
}

.sim-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.setup-panel-title {
  display: flex;
  min-height: calc(0.76rem * 1.2 + 5px + 1.25rem * 1.1);
  align-items: center;
}

.sim-panel-scroll {
  display: contents;
}

#setup-panel {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#setup-panel .sim-panel-head,
#setup-panel .simulation-start {
  flex: 0 0 auto;
}

#setup-panel .sim-panel-scroll {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-gutter: auto;
}

#simulation-panel {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#simulation-panel.hidden {
  display: none !important;
}

#simulation-panel .sim-panel-scroll {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-gutter: auto;
}

#setup-panel .sim-panel-scroll,
#simulation-panel .sim-panel-scroll {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

#setup-panel .sim-panel-scroll.is-scrolling,
#simulation-panel .sim-panel-scroll.is-scrolling {
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

#setup-panel .sim-panel-scroll::-webkit-scrollbar,
#simulation-panel .sim-panel-scroll::-webkit-scrollbar {
  width: 7px;
}

#setup-panel .sim-panel-scroll::-webkit-scrollbar-track,
#simulation-panel .sim-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

#setup-panel .sim-panel-scroll::-webkit-scrollbar-thumb,
#simulation-panel .sim-panel-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  background-clip: content-box;
}

#setup-panel .sim-panel-scroll.is-scrolling::-webkit-scrollbar-thumb,
#simulation-panel .sim-panel-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.55);
}

.sim-panel.has-scrollbar-offset .sim-panel-scroll {
  margin-right: -3px;
  padding-right: 10px;
}

#setup-panel.has-scrollbar-offset .sim-panel-head,
#simulation-panel.has-scrollbar-offset .simulation-sheet-toggle,
#setup-panel.has-scrollbar-offset .simulation-start,
#simulation-panel.has-scrollbar-offset .simulation-actions {
  width: calc(100% - 7px);
}

#simulation-panel .simulation-actions {
  flex: 0 0 auto;
}

.sim-panel h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
}

.hidden {
  display: none !important;
}

.icon-button {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  outline: none;
}

#reset-epicenter {
  flex: 0 0 auto;
  width: auto;
  height: calc(0.76rem * 1.2 + 5px + 1.25rem * 1.1);
  min-width: 42px;
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 900;
}

.mobile-sheet-toggle {
  display: none;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.field input,
.field select {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 9px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
}

.preset-picker-button {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-picker-button:hover,
.preset-picker-button:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  outline: none;
}

.preset-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(2, 4, 5, 0.72);
  backdrop-filter: blur(10px);
}

.preset-picker-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(980px, 100%);
  max-height: min(720px, calc(var(--app-height, 100vh) - 28px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(2, 4, 5, 0.86);
  color: #f8fafc;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
}

.preset-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 12px 16px;
  background: rgba(2, 4, 5, 0.88);
}

.preset-picker-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.2;
}

.preset-picker-close {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.preset-picker-close::before,
.preset-picker-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
}

.preset-picker-close::before {
  transform: rotate(45deg);
}

.preset-picker-close::after {
  transform: rotate(-45deg);
}

.preset-picker-close:hover,
.preset-picker-close:focus-visible {
  border-color: rgba(142, 234, 255, 0.72);
  outline: none;
}

.preset-picker-description {
  margin: 0;
  overflow-x: auto;
  padding: 10px 16px;
  color: rgba(248, 250, 252, 0.82);
  font-size: 0.86rem;
  line-height: 1.35;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.preset-picker-description span + span::before {
  content: "、";
}

.preset-picker-table-wrap {
  position: relative;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.preset-picker-table {
  width: 100%;
  min-width: 760px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.98rem;
}

.preset-picker-table th,
.preset-picker-table td {
  border-bottom: 2px solid rgba(255, 255, 255, 0.16);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}

.preset-picker-table th:last-child,
.preset-picker-table td:last-child {
  border-right: 0;
}

.preset-picker-table th:nth-child(1),
.preset-picker-table td:nth-child(1) {
  min-width: 170px;
}

.preset-picker-table th:nth-child(2),
.preset-picker-table td:nth-child(2) {
  min-width: 176px;
}

.preset-picker-table th:nth-child(3),
.preset-picker-table th:nth-child(4),
.preset-picker-table th:nth-child(5),
.preset-picker-table td:nth-child(3),
.preset-picker-table td:nth-child(4),
.preset-picker-table td:nth-child(5) {
  min-width: 130px;
}

.preset-picker-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 22, 28, 0.98);
  color: #ffffff;
  font-weight: 900;
  line-height: 1.2;
}

.preset-sort-head {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.preset-sort-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 22px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 5px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.04;
  white-space: pre-line;
}

.preset-sort-button[data-sort-state="asc"],
.preset-sort-button[data-sort-state="desc"] {
  font-size: 0.78rem;
  line-height: 1;
}

.preset-sort-button.is-active {
  border-color: rgba(142, 234, 255, 0.72);
  background: rgba(91, 199, 255, 0.18);
  color: #ffffff;
}

.preset-sort-button:hover,
.preset-sort-button:focus-visible {
  border-color: rgba(142, 234, 255, 0.86);
  outline: none;
}

.preset-picker-table tbody tr {
  cursor: pointer;
}

.preset-picker-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.preset-picker-table tbody tr:focus-within {
  background: rgba(142, 234, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .preset-picker-table tbody tr:hover {
    background: rgba(142, 234, 255, 0.12);
  }
}

.preset-picker-table tbody tr.selected {
  background: rgba(142, 234, 255, 0.18);
}

.preset-intensity-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--preset-intensity-color, #d7d5e3);
  color: var(--preset-intensity-text, #22242b);
  font-weight: 800;
  white-space: nowrap;
}

.preset-intensity-badge {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: var(--preset-intensity-color, #d7d5e3);
  color: var(--preset-intensity-text, #22242b);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 4px 0 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}

.toggle-row.layer-toggle-full {
  grid-column: 1 / -1;
}

.toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.toggle-row:has(input:disabled),
.toggle-row.is-disabled {
  color: rgba(216, 229, 235, 0.42);
  cursor: not-allowed;
}

.toggle-row:has(input:disabled) input,
.toggle-row.is-disabled input {
  accent-color: rgba(216, 229, 235, 0.32);
  opacity: 0.55;
}

.control-separator {
  height: 1px;
  margin: 2px 0 10px;
  background: rgba(255, 255, 255, 0.14);
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.settings-tab {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(226, 236, 244, 0.7);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.settings-tab.is-active {
  border-color: rgba(125, 211, 252, 0.48);
  background: rgba(14, 165, 233, 0.16);
  color: #e8fbff;
}

.settings-section {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

.settings-section[hidden] {
  display: none !important;
}

.settings-section h3 {
  margin: 0;
  color: rgba(216, 229, 235, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.settings-section .field:last-child,
.settings-section .field-grid:last-child,
.settings-section .toggle-grid:last-child,
.settings-section .result-list:last-child {
  margin-bottom: 0;
}

.toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.toggle-grid .toggle-row {
  margin: 0;
}

.toggle-row:has(#eew-warning-toggle) {
  grid-column: 1 / -1;
}

.toggle-row:has(#eew-warning-toggle) span {
  white-space: nowrap;
}

.result-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.result-list div {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 8px;
}

.result-list dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.result-list dd {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.35;
}

.simulation-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #ff6b7f;
  border-radius: 6px;
  padding: 11px 12px;
  background: #e11d48;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 800;
}

.simulation-start:disabled {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
}

.simulation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 2px;
}

.simulation-stop,
.simulation-pause {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
  background: #172027;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.simulation-stop {
  border-color: #ff6b7f;
  background: #e11d48;
  color: #ffffff;
}

.simulation-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.max-shindo-card,
.magnitude-card {
  display: grid;
  min-height: 92px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.max-shindo-card span,
.magnitude-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.max-shindo-card strong,
.magnitude-card strong {
  color: #ffffff;
  font-size: 3rem;
  line-height: 0.95;
}

.wave-readout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.wave-readout div:has(#simulation-epicenter) {
  display: none;
}

.wave-readout div:has(#simulation-time) {
  order: 1;
}

.wave-readout div:has(#simulation-depth) {
  order: 2;
}

.wave-readout div:has(#simulation-region-name) {
  order: 3;
  grid-column: 1 / -1;
}

.wave-readout div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.wave-readout dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.wave-readout dd {
  margin: 0;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
}

.current-location-panel {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.current-location-toggle {
  margin: 0;
}

.current-location-name {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.current-location-forecast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.current-location-forecast div {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  padding: 8px 10px;
  text-align: center;
}

.current-location-forecast div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.current-location-forecast span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.current-location-forecast strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.simulation-layer-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}

.simulation-layer-toggles .toggle-row {
  margin: 0;
}

.simulation-layer-toggles .toggle-row:has(#simulation-eew-warning-toggle) {
  grid-column: 1 / -1;
}

.max-stations-block {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
}

.max-stations-block h2,
.max-stations-block summary {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.max-stations-block summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.max-stations-block summary::-webkit-details-marker {
  display: none;
}

.max-stations-block summary::after {
  content: "⌄";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(216, 229, 235, 0.86);
  font-size: 1rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.max-stations-block[open] summary::after {
  transform: rotate(180deg);
}

.max-stations-block:not([open]) {
  padding-bottom: 0;
}

.max-stations-block:not([open]) summary {
  margin-bottom: 0;
}

#max-station-list {
  display: block;
  height: clamp(72px, calc(var(--app-height, 100vh) - 485px), 230px);
  list-style: none;
  margin: 0;
  padding: 0 8px 0 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  color: #ffffff;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: left;
}

#max-station-list li {
  display: grid;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 27px;
  grid-template-columns: minmax(3.5em, max-content) minmax(0, 1fr);
  column-gap: 1px;
  padding: 4px 0 4px 2px;
  text-align: left;
}

#max-station-list li[data-rank]::before {
  content: attr(data-rank) ".";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

@media (min-width: 721px) and (max-height: 680px) {
  .max-shindo-card,
  .magnitude-card {
    min-height: 76px;
  }

  .max-shindo-card strong {
    font-size: 2.4rem;
  }

  .magnitude-card strong {
    font-size: 2.4rem;
  }

  .simulation-stop,
  .simulation-pause,
  .simulation-start {
    padding-block: 9px;
  }
}

@media (min-width: 721px) and (max-height: 920px) {
  #setup-panel .simulation-start {
    margin-top: 6px;
    padding-block: 10px;
  }
}

@media (min-width: 721px) and (max-width: 1180px) {
  #setup-panel .sim-panel-scroll {
    max-height: calc(var(--app-height, 100vh) - 154px);
  }

  #setup-panel .simulation-start {
    margin-top: 8px;
  }

  .simulation-stop,
  .simulation-pause {
    padding-inline: 8px;
    font-size: 0.84rem;
  }
}

.intensity-legend {
  position: absolute;
  right: 14.8px;
  bottom: 8px;
  z-index: 740;
  width: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: #020405;
  color: #9aa8b0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.intensity-legend h2 {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 0;
  background: #020405;
  color: #9aa8b0;
  font-size: 0.74rem;
  line-height: 1;
  text-align: center;
  text-orientation: mixed;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.intensity-scale {
  display: grid;
  gap: 0;
}

.intensity-scale span {
  display: grid;
  width: 100%;
  height: 34px;
  place-items: center;
  border-bottom: 1px solid rgba(17, 24, 39, 0.32);
  background: var(--color);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  color: var(--text-color, #ffffff);
  font-size: calc(0.9rem + 2px);
  font-weight: 700;
  line-height: 1;
}

.intensity-scale span:last-child {
  border-bottom: 0;
}

@media (min-width: 721px) and (max-width: 1180px) and (pointer: coarse) {
  .intensity-scale span {
    font-size: calc(0.9rem + 1.7px);
    font-weight: 630;
    text-shadow: 0.3px 0 currentColor;
  }
}

.eew-forecast-panel {
  position: absolute;
  right: 52px;
  bottom: 8px;
  z-index: 730;
  width: min(300px, calc(100vw - 340px));
  min-width: 252px;
  max-height: min(320px, 48vh);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(18, 8, 10, 0.86);
  color: #ffffff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}

.eew-forecast-panel h2 {
  margin: 0 0 8px;
  color: #ffccd4;
  font-size: 0.86rem;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.eew-forecast-message {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
}

.eew-forecast-panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eew-forecast-panel li {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  padding: 4px 6px;
  background: #e60012;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  word-break: keep-all;
}

.epicenter-marker-shell {
  display: grid;
  position: relative;
  z-index: 600 !important;
  width: 38px;
  height: 38px;
  place-items: center;
}

.epicenter-marker-shell.locked {
  cursor: pointer;
}

.epicenter-marker-shell:focus-visible {
  outline: none;
}

.epicenter-marker {
  display: block;
  width: 38px;
  height: 38px;
  fill: #e11d48;
  stroke: #fff000;
  stroke-linejoin: round;
  stroke-width: 5px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.36));
}

.current-location-marker {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #2ee9ff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  font-size: 1.45rem;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-7px);
}

.current-location-marker::before {
  content: "📍";
}

.station-popup {
  z-index: 620;
}

.station-popup .maplibregl-popup-content {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(2, 6, 12, 0.88);
  color: #f8fbff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  line-height: 1.35;
}

.station-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: rgba(2, 6, 12, 0.88);
  margin-top: -1px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.24));
}

.station-popup strong,
.station-popup span {
  display: block;
  white-space: nowrap;
}

.station-popup strong {
  margin-bottom: 3px;
  font-size: 0.84rem;
}

.empty-state {
  display: grid;
  flex: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.bottom-tabs {
  position: fixed;
  inset: auto 0 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  height: 76px;
  border-top: 1px solid var(--line);
  background: rgba(2, 4, 5, 0.96);
}

.tab {
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
}

.tab:last-child {
  border-right: 0;
}

.tab:hover,
.tab:focus-visible {
  color: var(--text);
  outline: none;
}

.tab.active {
  background: linear-gradient(180deg, rgba(38, 217, 255, 0.16), rgba(38, 217, 255, 0.04));
  color: var(--text);
  box-shadow: inset 0 3px 0 var(--accent);
}

@media (max-width: 720px) {
  body {
    overflow: hidden;
  }

  .maplibregl-ctrl-top-right {
    right: 6px;
  }

  .app-shell {
    height: var(--app-height, 100svh);
    height: var(--app-height, 100dvh);
    min-height: min(540px, 100dvh);
  }

  .map-wrap {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .field input,
  .field select {
    font-size: 16px;
  }

  .preset-picker-button {
    min-height: 0;
    border-radius: 6px;
    padding: 8px 9px;
    font-size: 16px;
  }

  .admin-mode-actions button {
    padding: 10px 8px;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .preset-picker-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .preset-picker-dialog {
    max-height: calc(var(--app-height, 100vh) - 16px);
  }

  .preset-picker-head {
    padding: 9px 10px;
  }

  .preset-picker-description {
    white-space: normal;
  }

  .preset-picker-description span {
    display: block;
  }

  .preset-picker-description span + span::before {
    content: "";
  }

  .preset-picker-table {
    width: 642px;
    min-width: 642px;
    table-layout: fixed;
    font-size: 0.76rem;
  }

  .preset-picker-table th,
  .preset-picker-table td {
    border-right-color: rgba(255, 255, 255, 0.045);
    padding: 8px 6px;
  }

  .preset-picker-table th:nth-child(1),
  .preset-picker-table td:nth-child(1) {
    width: 150px;
    min-width: 150px;
  }

  .preset-picker-table th:nth-child(2),
  .preset-picker-table td:nth-child(2) {
    width: 132px;
    min-width: 132px;
  }

  .preset-picker-table th:nth-child(3),
  .preset-picker-table th:nth-child(5),
  .preset-picker-table td:nth-child(3),
  .preset-picker-table td:nth-child(5) {
    width: 116px;
    min-width: 116px;
  }

  .preset-picker-table th:nth-child(4),
  .preset-picker-table td:nth-child(4) {
    width: 128px;
    min-width: 128px;
  }

  .preset-picker-table td:nth-child(3),
  .preset-picker-table td:nth-child(4),
  .preset-picker-table td:nth-child(5) {
    font-variant-numeric: tabular-nums;
  }

  .preset-picker-table-wrap::after {
    display: none;
  }

  .preset-intensity-pill {
    min-width: 52px;
    padding: 5px 6px;
    font-size: 0.7rem;
  }

  .source-info-button:not(.feedback-info-button):not(.speech-info-button)::after {
    top: calc(50% - 1.05px);
  }

  .panel {
    padding: 14px;
  }

  #earthquake-panel.panel-active {
    padding: 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .status {
    max-width: 100%;
    width: 100%;
  }

  .sim-panel {
    display: flex;
    flex-direction: column;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: min(calc(var(--app-height, 100svh) * 0.7), 560px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    padding: 8px 14px 6px;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: auto;
    transition: transform 120ms ease-out;
  }

  #simulation-panel {
    overflow: hidden;
  }

  .sim-panel-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 8px;
    scrollbar-gutter: auto;
  }

  .sim-panel-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    flex: 0 0 auto;
    z-index: 6;
    margin: -8px -14px 6px;
    padding: 8px 14px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 4, 5, 0.94);
    backdrop-filter: blur(10px);
  }

  #setup-panel .sim-panel-head {
    gap: 6px;
  }

  #setup-panel .sim-panel-head .mobile-sheet-toggle,
  #setup-panel #reset-epicenter {
    min-height: 38px;
    height: 38px;
  }

  #setup-panel #reset-epicenter {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 56px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
  }

  #setup-panel .simulation-start {
    flex: 0 0 auto;
    z-index: 6;
    margin: 6px 0 0;
    width: 100%;
    border-radius: 6px;
    min-height: 42px;
    padding: 8px 12px;
    margin-bottom: max(4px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 16px rgba(2, 4, 5, 0.6);
    text-align: center;
  }

  #simulation-panel .simulation-sheet-toggle {
    flex: 0 0 auto;
    z-index: 6;
    margin: 0 0 6px;
    box-shadow: 0 8px 14px rgba(2, 4, 5, 0.62);
  }

  #simulation-panel .simulation-actions {
    flex: 0 0 auto;
    z-index: 6;
    margin: 6px 0 0;
    padding: 0 0 max(2px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    backdrop-filter: none;
  }

  .sim-panel[data-sheet-state="collapsed"] {
    overflow: hidden;
    transform: translateY(calc(100% - 64px));
  }

  .sim-panel[data-sheet-state="collapsed"] > :not(.sheet-handle) {
    pointer-events: none;
  }

  .sim-panel[data-sheet-state="collapsed"] .mobile-sheet-toggle {
    z-index: 2;
    pointer-events: auto;
  }

  .sim-panel[data-sheet-state="open"] {
    transform: translateY(0);
  }

  .sheet-handle {
    display: none;
  }

  .mobile-sheet-toggle {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(142, 234, 255, 0.42);
    border-radius: 7px;
    padding: 8px 11px;
    background: rgba(3, 18, 28, 0.88);
    color: #e9fbff;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
  }

  #setup-panel .mobile-sheet-toggle {
    grid-column: 2;
    justify-self: end;
  }

  .sim-panel[data-sheet-state="collapsed"] > :not(.sim-panel-head):not(.simulation-sheet-toggle):not(.sheet-handle) {
    opacity: 0;
  }

  .sim-panel[data-sheet-state="collapsed"] .sim-panel-head {
    margin-bottom: 0;
    border-bottom-color: transparent;
    pointer-events: auto;
  }

  .sim-panel[data-sheet-state="collapsed"] .sim-panel-head > div,
  .sim-panel[data-sheet-state="collapsed"] #reset-epicenter {
    opacity: 0;
    pointer-events: none;
  }

  #setup-panel[data-sheet-state="collapsed"] .sim-panel-head {
    grid-template-columns: 1fr auto;
  }

  #setup-panel[data-sheet-state="collapsed"] .setup-panel-title,
  #setup-panel[data-sheet-state="collapsed"] #reset-epicenter {
    display: none;
  }

  .simulation-sheet-toggle {
    width: 100%;
  }

  .wave-readout {
    grid-template-columns: repeat(2, 1fr);
  }

  #max-station-list {
    height: 160px;
  }

  .intensity-legend {
    left: 8px;
    right: auto;
    top: calc(env(safe-area-inset-top) + 8px);
    bottom: auto;
    display: flex;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  .intensity-legend h2 {
    display: grid;
    flex: 0 0 34px;
    min-width: 34px;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 0;
    padding: 0 5px;
    font-size: 0.68rem;
  }

  .intensity-scale {
    display: flex;
  }

  .eew-forecast-panel {
    left: 8px;
    right: auto;
    top: calc(env(safe-area-inset-top) + 48px);
    bottom: auto;
    width: min(320px, calc(100vw - 16px));
    min-width: 0;
    max-height: 180px;
  }

  .intensity-scale span {
    width: 30px;
    height: 30px;
    border-right: 1px solid rgba(17, 24, 39, 0.32);
    border-bottom: 0;
    font-size: 0.8rem;
  }

  .bottom-tabs {
    height: 70px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .push-confirm-mobile-break {
    display: block;
  }
}

@media (max-width: 720px) and (max-height: 820px) {
  .sim-panel {
    max-height: clamp(260px, calc(var(--app-height, 100svh) - 330px), 440px);
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  .sim-panel {
    max-height: clamp(220px, calc(var(--app-height, 100svh) - 340px), 330px);
  }
}

@media (min-width: 721px) and (max-width: 1180px) and (max-height: 820px) {
  .sim-panel {
    top: auto;
    bottom: 0;
    max-height: clamp(300px, calc(var(--app-height, 100vh) - 260px), 520px);
  }
}

@media (orientation: landscape) and (min-width: 721px) and (max-width: 1180px) and (min-height: 721px) and (max-height: 920px) {
  .sim-panel {
    top: max(10px, env(safe-area-inset-top));
    bottom: max(10px, env(safe-area-inset-bottom));
    max-height: none;
  }
}

@media (orientation: landscape) and (max-width: 1180px) and (max-height: 720px) {
  .map-wrap {
    --landscape-panel-left: max(12px, env(safe-area-inset-left));
    --landscape-panel-width: clamp(300px, calc(100vw - 458px - env(safe-area-inset-left) - env(safe-area-inset-right)), 400px);
  }

  .sim-panel {
    left: var(--landscape-panel-left);
    right: auto;
    top: calc(max(8px, env(safe-area-inset-top)) + 1px);
    bottom: max(8px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    width: var(--landscape-panel-width);
    max-height: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    overflow: hidden;
  }

  .sim-panel[data-sheet-state="collapsed"] {
    transform: translateX(calc(-100% + 34px));
  }

  .sim-panel[data-sheet-state="open"] {
    transform: translateX(0);
  }

  .sheet-handle {
    top: 50%;
    right: -22px;
    left: auto;
    display: block;
    width: 32px;
    height: 76px;
  }

  .mobile-sheet-toggle {
    display: none;
  }

  .sim-panel-head {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    margin: 0 0 8px;
    padding: 0;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
  }

  #setup-panel .sim-panel-scroll,
  #simulation-panel .sim-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 8px;
  }

  #setup-panel .simulation-start,
  #simulation-panel .simulation-actions {
    flex: 0 0 auto;
  }

  .preset-picker-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .preset-picker-dialog {
    max-height: calc(var(--app-height, 100vh) - 16px);
  }

  .preset-picker-table {
    font-size: 0.82rem;
  }

  .preset-picker-table th,
  .preset-picker-table td {
    border-right-color: rgba(255, 255, 255, 0.045);
    padding: 8px 8px;
  }

  .preset-intensity-pill {
    padding: 5px 8px;
  }

  .intensity-legend {
    left: auto;
    right: calc(env(safe-area-inset-right) + 59px);
    top: calc(env(safe-area-inset-top) + 9.8px);
    bottom: auto;
    z-index: 740;
    display: flex;
    width: 304px;
    max-width: none;
  }

  .intensity-legend h2 {
    display: grid;
    flex: 0 0 34px;
    min-width: 34px;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 0;
    padding: 0 4px;
    font-size: 0.68rem;
  }

  .intensity-scale {
    display: flex;
  }

  .intensity-scale span {
    width: 30px;
    height: 30px;
    border-right: 1px solid rgba(17, 24, 39, 0.32);
    border-bottom: 0;
    font-size: 0.8rem;
  }

  .intensity-scale span:last-child {
    border-right: 0;
  }
}

@media (orientation: landscape) and (max-width: 980px) and (max-height: 720px) and (hover: none) and (pointer: coarse) {
  .intensity-legend {
    right: calc(env(safe-area-inset-right) + 9px);
    top: calc(env(safe-area-inset-top) + 9.8px);
  }
}

@media (orientation: landscape) and (max-width: 820px) and (min-height: 760px) {
  .intensity-legend {
    left: auto;
    right: max(4px, env(safe-area-inset-right));
    top: calc(env(safe-area-inset-top) + 268px);
    bottom: auto;
    display: block;
    width: 34px;
  }

  .intensity-legend h2 {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding: 6px 0;
  }

  .intensity-scale {
    display: grid;
  }

  .intensity-scale span {
    width: 100%;
    height: 30px;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.32);
  }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 720px) {
  .map-wrap {
    --landscape-panel-width: clamp(250px, calc(100vw - 452px - env(safe-area-inset-left) - env(safe-area-inset-right)), 330px);
  }
}

/* Modern glass UI experiment */
:root {
  --glass-bg: rgba(13, 20, 31, 0.91);
  --glass-bg-strong: rgba(11, 17, 27, 0.96);
  --glass-line: rgba(255, 255, 255, 0.13);
  --glass-line-strong: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 20px 58px rgba(0, 0, 0, 0.34);
  --glass-radius: 24px;
  --control-radius: 16px;
  --pill-radius: 999px;
}

.sim-panel,
.intensity-legend,
.eew-forecast-panel,
.preset-picker-dialog,
.status,
.maplibregl-ctrl-group,
.source-info-button {
  border-color: var(--glass-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    var(--glass-bg);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.sim-panel {
  border-radius: var(--glass-radius);
  padding: 14px;
}

.sim-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--glass-radius) - 1px);
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.075), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%);
  pointer-events: none;
}

.sim-panel > * {
  position: relative;
}

.sim-panel h2 {
  color: #f8fbff;
  letter-spacing: -0.02em;
}

.sheet-handle {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(13, 20, 31, 0.94);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

.field {
  gap: 7px;
}

.field input,
.field select,
.preset-picker-button,
.current-location-name,
.wave-readout div,
.settings-section {
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--control-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.02)),
    rgba(2, 8, 17, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.13);
}

.settings-section {
  border: 1px solid rgba(255, 255, 255, 0.105);
  padding: 11px;
}

.settings-section h3 {
  color: rgba(226, 236, 244, 0.62);
}

.field input:focus,
.field select:focus,
.preset-picker-button:focus-visible,
.mobile-sheet-toggle:focus-visible,
.simulation-start:focus-visible,
.simulation-stop:focus-visible,
.simulation-pause:focus-visible,
.icon-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.72);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(38, 217, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.toggle-grid,
.simulation-layer-toggles {
  gap: 9px;
}

.settings-tabs {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--pill-radius);
  padding: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(2, 8, 17, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.settings-tab {
  border-color: transparent;
  background: transparent;
  transition:
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.settings-tab:hover,
.settings-tab:focus-visible {
  outline: none;
  color: #ffffff;
}

.settings-tab.is-active {
  border-color: rgba(125, 211, 252, 0.34);
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.22), rgba(14, 165, 233, 0.1)),
    rgba(14, 165, 233, 0.12);
  box-shadow:
    0 8px 20px rgba(14, 165, 233, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.toggle-grid .toggle-row,
.simulation-layer-toggles .toggle-row,
.current-location-toggle {
  position: relative;
  min-height: 38px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pill-radius);
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.055);
  color: rgba(226, 236, 244, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.toggle-grid .toggle-row:hover,
.simulation-layer-toggles .toggle-row:hover,
.current-location-toggle:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.toggle-grid .toggle-row:has(input:focus-visible),
.simulation-layer-toggles .toggle-row:has(input:focus-visible),
.current-location-toggle:has(input:focus-visible) {
  border-color: rgba(125, 211, 252, 0.72);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(38, 217, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.toggle-grid .toggle-row input,
.simulation-layer-toggles .toggle-row input,
.current-location-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-grid .toggle-row span,
.simulation-layer-toggles .toggle-row span,
.current-location-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toggle-grid .toggle-row:has(input:checked),
.simulation-layer-toggles .toggle-row:has(input:checked),
.current-location-toggle:has(input:checked) {
  border-color: rgba(125, 211, 252, 0.48);
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.28), rgba(14, 165, 233, 0.13)),
    rgba(14, 165, 233, 0.1);
  color: #e8fbff;
  box-shadow:
    0 8px 22px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.toggle-grid .toggle-row:has(input:checked)::before,
.simulation-layer-toggles .toggle-row:has(input:checked)::before,
.current-location-toggle:has(input:checked)::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7dd3fc;
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.78);
}

.toggle-row:has(input:disabled),
.toggle-row.is-disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(216, 229, 235, 0.38);
  transform: none;
}

.simulation-start,
.simulation-stop,
.simulation-pause,
.mobile-sheet-toggle,
.icon-button,
.preset-sort-button,
.preset-picker-close {
  border-radius: var(--pill-radius);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    filter 140ms ease;
}

.simulation-start,
.simulation-stop {
  border-color: rgba(255, 139, 163, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)),
    linear-gradient(135deg, #fb7185, #e11d48 54%, #be123c);
}

.simulation-pause,
.mobile-sheet-toggle,
.icon-button {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.08);
}

.simulation-start:not(:disabled):hover,
.simulation-stop:hover,
.simulation-pause:hover,
.mobile-sheet-toggle:hover,
.icon-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.simulation-start:disabled {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.max-shindo-card,
.magnitude-card,
.current-location-forecast {
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.085), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.16);
}

.max-shindo-card strong,
.magnitude-card strong {
  letter-spacing: -0.06em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.intensity-legend,
.eew-forecast-panel {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    var(--glass-bg-strong);
}

.intensity-legend {
  overflow: hidden;
}

.intensity-legend h2 {
  background: rgba(2, 8, 16, 0.36);
}

.intensity-scale span {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.eew-forecast-panel li,
.preset-intensity-pill {
  border-radius: var(--pill-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.max-stations-block summary {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--control-radius);
  padding: 8px 10px 8px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.02)),
    rgba(2, 8, 17, 0.76);
  color: rgba(226, 236, 244, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 24px rgba(0, 0, 0, 0.13);
}

.max-stations-block summary:hover,
.max-stations-block summary:focus-visible {
  border-color: rgba(125, 211, 252, 0.46);
  outline: none;
  color: #ffffff;
}

.station-popup .maplibregl-popup-content {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028)),
    rgba(2, 6, 12, 0.92);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

.maplibregl-ctrl-group,
.source-info-button {
  border-radius: 14px;
}

.maplibregl-ctrl-group {
  overflow: hidden;
}

@media (max-width: 720px) {
  .sim-panel {
    border-radius: 26px 26px 0 0;
    padding: 10px 14px 8px;
  }

  .sim-panel-head {
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.018)),
      rgba(13, 20, 31, 0.82);
  }

  .toggle-grid .toggle-row,
  .simulation-layer-toggles .toggle-row,
  .current-location-toggle {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 0.84rem;
  }

  .settings-tabs {
    gap: 4px;
  }

  .settings-tab {
    padding-inline: 6px;
    font-size: 0.76rem;
  }

  .intensity-legend,
  .eew-forecast-panel {
    border-radius: 16px;
  }
}

.settings-menu-button {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 780;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(178, 205, 220, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 20%, rgba(125, 211, 252, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(28, 39, 55, 0.94), rgba(7, 12, 20, 0.92));
  color: #f1fbff;
  cursor: pointer;
  font-size: 1.32rem;
  line-height: 1;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(9px) saturate(1.06);
  -webkit-backdrop-filter: blur(9px) saturate(1.06);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease,
    background 150ms ease;
}

.settings-menu-button:hover,
.settings-menu-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.58);
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    0 0 0 3px rgba(38, 217, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.settings-menu-button.is-active {
  border-color: rgba(125, 211, 252, 0.74);
  background:
    radial-gradient(circle at 35% 20%, rgba(125, 211, 252, 0.32), transparent 45%),
    linear-gradient(180deg, rgba(30, 62, 82, 0.96), rgba(7, 18, 30, 0.94));
}

.settings-menu-button.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
}

#setup-panel.setup-menu-closed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-14px) scale(0.985);
}

#setup-panel.setup-menu-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#setup-panel.setup-menu-open .sim-panel-head {
  min-height: 0;
  align-items: flex-end;
  padding: 56px 0 6px;
}

#setup-panel.setup-menu-open .setup-panel-title {
  min-height: 0;
}

#setup-panel.setup-menu-open .setup-panel-title h2 {
  margin: 0;
  line-height: 1.08;
}

.settings-note {
  margin: 0;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: var(--control-radius);
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(2, 8, 17, 0.5);
  color: rgba(226, 236, 244, 0.72);
  font-size: 0.84rem;
  line-height: 1.55;
}

.maplibregl-ctrl-top-right {
  top: 12px;
  right: 12px;
}

.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 0 0 7px 0;
}

.zoom-only-control button {
  width: 34px;
  height: 30px;
  font-size: 1.15rem;
}

.source-info-control {
  gap: 6px;
  margin-top: 8px;
}

.source-info-button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.source-info-button::before {
  width: 18px;
  height: 18px;
}

.source-info-button::after {
  font-size: 0.92rem;
}

.feedback-info-button::before {
  width: 27px;
  height: 27px;
  background-size: 27px 27px;
}

.speech-info-button::before {
  width: 29px;
  height: 29px;
  background-size: 29px 29px;
}

.source-menu-button::before {
  width: 4px;
  height: 4px;
  border: 0;
  background: #ffffff;
  box-shadow:
    -7px 0 0 #ffffff,
    7px 0 0 #ffffff;
}

.source-menu-button::after {
  content: "";
  display: none;
}

@media (max-width: 720px) {
  .settings-menu-button {
    top: calc(env(safe-area-inset-top) + 12px);
    left: 12px;
    width: 48px;
    height: 48px;
    font-size: 1.18rem;
  }

  #setup-panel.setup-menu-closed {
    transform: translateY(18px) scale(0.985);
  }

  #setup-panel.setup-menu-open .sim-panel-head {
    min-height: 0;
    padding: 50px 0 6px;
  }

  .sim-panel {
    max-height: min(58svh, 560px);
  }

  .source-info-menu {
    top: 0;
    right: calc(100% + 8px);
    min-width: 126px;
  }
}

@media (max-width: 720px) and (max-height: 820px) {
  .sim-panel {
    max-height: min(56svh, 430px);
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  .sim-panel {
    max-height: min(54svh, 340px);
  }
}

/* Final responsive contract: phone UI or iPad/PC UI only. */
@media (min-width: 721px) {
  .bottom-tabs {
    display: none !important;
  }

  .settings-menu-button {
    display: grid;
  }

  .sim-panel {
    left: 14px !important;
    right: auto !important;
    top: 10px !important;
    bottom: auto !important;
    width: min(360px, calc(100% - 28px)) !important;
    max-height: calc(var(--app-height, 100vh) - 20px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    padding: 14px !important;
    overflow: visible;
  }

  .sim-panel[data-sheet-state="collapsed"] {
    transform: translateX(calc(-100% + 34px)) !important;
  }

  .sim-panel[data-sheet-state="open"] {
    transform: translateX(0) !important;
  }

  .sim-panel-head {
    display: flex !important;
    align-items: flex-end !important;
    margin: 0 0 10px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #setup-panel.setup-menu-open .sim-panel-head {
    padding: 56px 0 6px !important;
  }

  .mobile-sheet-toggle {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
    background: #111111;
  }

  .bottom-tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: 1100;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(78px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
      rgba(15, 16, 16, 0.98);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
  }

  .tab {
    display: grid;
    grid-template-rows: 28px 1fr;
    gap: 2px;
    place-items: center;
    min-width: 0;
    border: 0;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.54);
    font-size: clamp(0.56rem, 2.45vw, 0.68rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-align: center;
  }

  .bottom-tab-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.32rem;
    font-weight: 900;
    line-height: 1;
  }

  .tab.active {
    background: transparent;
    color: #19d8ef;
    box-shadow: none;
  }

  .tab.active .bottom-tab-icon {
    color: #19d8ef;
    text-shadow: 0 0 18px rgba(25, 216, 239, 0.35);
  }

  .settings-menu-button {
    display: none !important;
  }

  .sim-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    max-height: min(58svh, 560px) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 30px 30px 0 0 !important;
    padding: 12px 16px 10px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
      rgba(7, 8, 9, 0.95) !important;
    box-shadow: 0 -26px 70px rgba(0, 0, 0, 0.46);
    overflow: hidden;
  }

  .sim-panel::before {
    content: "";
    display: block;
    width: 46px;
    height: 5px;
    flex: 0 0 auto;
    align-self: center;
    border-radius: 999px;
    margin: 0 auto 10px;
    background: rgba(255, 255, 255, 0.24);
  }

  #setup-panel.setup-menu-closed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(calc(100% - 34px)) !important;
  }

  #setup-panel.setup-menu-open,
  .sim-panel[data-sheet-state="open"] {
    transform: translateY(0) !important;
  }

  .sim-panel[data-sheet-state="collapsed"] {
    transform: translateY(calc(100% - 34px)) !important;
  }

  .sim-panel-head,
  #setup-panel.setup-menu-open .sim-panel-head {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .setup-panel-title h2 {
    font-size: 1.55rem;
    letter-spacing: -0.04em;
  }

  .mobile-sheet-toggle {
    display: none !important;
  }

  .simulation-start {
    border-radius: 18px !important;
    min-height: 54px !important;
  }
}

@media (max-width: 720px) and (max-height: 820px) {
  .sim-panel {
    max-height: min(56svh, 430px) !important;
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  .sim-panel {
    max-height: min(54svh, 340px) !important;
  }
}

/* NERV-like common bottom navigation and pull-up sheet. */
body {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

.bottom-tabs {
  position: fixed;
  inset: auto 0 0;
  z-index: 1100;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(82px + env(safe-area-inset-bottom));
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(15, 16, 16, 0.985);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.tab {
  display: grid;
  grid-template-rows: 30px 1fr;
  gap: 2px;
  place-items: center;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  cursor: pointer;
  font-size: clamp(0.56rem, 1.25vw, 0.72rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
}

.bottom-tab-icon {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: currentColor;
  font-size: 0;
}

.bottom-tab-icon::before,
.bottom-tab-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 7px;
  top: 5px;
  width: 16px;
  height: 20px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 3px 3px 5px 5px;
  transform: skewX(-12deg);
}

#earthquake-tab .bottom-tab-icon::after {
  left: 12px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(-45deg);
}

#bottom-history-tab .bottom-tab-icon::before {
  width: 25px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 999px;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 14px;
  top: 8px;
  width: 8px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

#bottom-info-tab .bottom-tab-icon::before {
  width: 25px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 999px;
}

#bottom-info-tab .bottom-tab-icon::after {
  width: 3px;
  height: 13px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -8px 0 -0.5px currentColor;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 2px;
  top: 14px;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 -8px 0 currentColor,
    0 8px 0 currentColor;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 8px;
  top: 7px;
  width: 14px;
  height: 16px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: skewX(-16deg);
}

#bottom-settings-tab .bottom-tab-icon::before {
  width: 25px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 -8px 0 currentColor,
    0 8px 0 currentColor;
}

.tab.active {
  background: transparent;
  color: #19d8ef;
  box-shadow: none;
}

.tab.active .bottom-tab-icon {
  color: #19d8ef;
  text-shadow: 0 0 18px rgba(25, 216, 239, 0.35);
}

.settings-menu-button {
  display: none !important;
}

.sim-panel {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(860px, 100vw) !important;
  max-height: min(62svh, 620px) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 30px 30px 0 0 !important;
  padding: 14px 18px 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 7, 0.955) !important;
  box-shadow: 0 -28px 74px rgba(0, 0, 0, 0.5);
  overflow: hidden !important;
  touch-action: pan-y;
  transform: translate(-50%, 0) !important;
  transition: transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1);
}

.sim-panel.is-dragging {
  transition: none !important;
}

.sim-panel::before {
  content: none !important;
  display: none !important;
}

.sheet-handle {
  top: 6px !important;
  right: auto !important;
  left: 50% !important;
  z-index: 5;
  display: block !important;
  width: 148px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  cursor: grab;
}

.sheet-handle::before {
  display: none !important;
}

.sheet-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  display: block !important;
  width: 112px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(170, 170, 170, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateX(-50%);
}

.sim-panel.is-dragging .sheet-handle {
  cursor: grabbing;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, calc(100% - 38px)) !important;
}

#setup-panel.setup-menu-open,
.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

.sim-panel.is-dragging {
  transform: translate(-50%, var(--sheet-drag-y, 0)) !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 38px + var(--sheet-drag-y, 0px))) !important;
}

.sim-panel-head,
#setup-panel.setup-menu-open .sim-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.setup-panel-title {
  display: none !important;
}

.mobile-sheet-toggle {
  display: none !important;
}

#setup-panel .sim-panel-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 10px !important;
}

.settings-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-bottom: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(16, 18, 19, 0.94) !important;
}

.simulation-start {
  flex: 0 0 auto !important;
  min-height: 56px !important;
  border-radius: 18px !important;
}

@media (max-width: 720px) {
  .sim-panel {
    width: 100vw !important;
    max-height: min(60svh, 560px) !important;
    padding: 12px 16px 10px !important;
  }

  .tab {
    font-size: clamp(0.56rem, 2.45vw, 0.68rem);
  }
}

/* Single-sheet simulation mode and preset sheet. */
#setup-panel .settings-tabs {
  display: none !important;
}

#setup-panel .control-separator {
  display: none !important;
}

#setup-panel [data-settings-section] {
  display: grid !important;
}

#setup-panel .setup-result-section {
  display: none !important;
}

#setup-panel .settings-section {
  margin-bottom: 10px !important;
}

#setup-panel .settings-section h3 {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.02em !important;
}

#setup-panel .sim-panel-head {
  justify-content: center !important;
  min-height: 30px !important;
  margin-bottom: 4px !important;
}

#setup-panel #reset-epicenter {
  position: absolute;
  top: 30px;
  right: 16px;
  min-height: 38px;
  border-radius: 999px;
}

#setup-panel .sheet-handle {
  top: 5px !important;
}

#setup-panel::before {
  content: none !important;
  display: none !important;
}

#setup-panel .settings-section-primary .field,
#historical-earthquake-button {
  display: none !important;
}

.preset-picker-overlay {
  position: fixed !important;
  inset: auto 0 calc(82px + env(safe-area-inset-bottom)) 0 !important;
  z-index: 1050 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

.preset-picker-overlay.hidden {
  display: none !important;
}

.preset-picker-dialog {
  position: relative;
  width: min(860px, 100vw) !important;
  max-width: none !important;
  max-height: min(64svh, 640px) !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 30px 30px 0 0 !important;
  padding: 18px 18px 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 7, 0.965) !important;
  box-shadow: 0 -28px 74px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.preset-picker-dialog::before {
  content: "";
  display: block;
  width: 112px;
  height: 8px;
  border-radius: 999px;
  margin: 0 auto 12px;
  background: rgba(170, 170, 170, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.preset-picker-head {
  margin-bottom: 10px !important;
}

.preset-picker-head h2 {
  font-size: 1.2rem !important;
}

.preset-picker-description {
  display: none !important;
}

.preset-picker-table-wrap {
  max-height: min(48svh, 460px) !important;
}

.settings-menu-sheet {
  position: fixed;
  inset: auto 0 calc(82px + env(safe-area-inset-bottom)) 0;
  z-index: 1050;
  width: min(860px, 100vw);
  max-height: min(64svh, 640px);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px 30px 0 0;
  padding: 18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 13, 13, 0.975);
  box-shadow: 0 -28px 74px rgba(0, 0, 0, 0.52);
  color: #f5f5f5;
  overflow: hidden;
}

.settings-menu-sheet.hidden {
  display: none;
}

.settings-menu-grabber {
  width: 112px;
  height: 8px;
  border-radius: 999px;
  margin: 0 auto 18px;
  background: rgba(170, 170, 170, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.settings-menu-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin: 0 -18px 14px;
  padding: 0 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.settings-menu-head h2 {
  grid-column: 2;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
}

.settings-menu-close {
  grid-column: 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  font-size: 1.25rem;
}

.settings-menu-list {
  display: grid;
  gap: 0;
  margin: 0 -18px;
}

.settings-menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.025);
  color: #ededed;
  cursor: pointer;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: left;
}

#settings-appearance-button {
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
}

.settings-menu-row:hover,
.settings-menu-row:focus-visible {
  outline: none;
  background: rgba(25, 216, 239, 0.1);
}

#setup-panel .settings-section,
#setup-panel .field input,
#setup-panel .field select,
#setup-panel .toggle-row,
#setup-panel .preset-picker-button,
#setup-panel .current-location-name,
#setup-panel .wave-readout div {
  border-color: transparent !important;
  box-shadow: none !important;
}

#setup-panel .settings-section {
  padding-inline: 0 !important;
  background: transparent !important;
}

#setup-panel .toggle-row,
#setup-panel .field input,
#setup-panel .field select {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045) !important;
}

@media (max-width: 720px) {
  .preset-picker-dialog {
    width: 100vw !important;
    max-height: min(64svh, 620px) !important;
  }

  .settings-menu-sheet {
    width: 100vw;
    max-height: min(64svh, 620px);
  }
}

/* Final compact bottom menu / sheet alignment polish. */
:root {
  --bottom-nav-height: 68px;
}

body {
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

.source-info-control {
  display: none !important;
}

#reset-epicenter {
  display: none !important;
}

.bottom-tabs {
  z-index: 3000 !important;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  padding: 5px 7px calc(5px + env(safe-area-inset-bottom)) !important;
}

.tab {
  grid-template-rows: 24px 1fr !important;
  gap: 1px !important;
  border-radius: 12px !important;
  font-size: clamp(0.54rem, 1.05vw, 0.64rem) !important;
  letter-spacing: -0.05em !important;
}

.bottom-tab-icon {
  width: 24px !important;
  height: 24px !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 6px;
  top: 5px;
  width: 12px;
  height: 15px;
  border-width: 2.4px;
}

#earthquake-tab .bottom-tab-icon::after {
  left: 10px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-width: 2.4px;
}

#bottom-history-tab .bottom-tab-icon::before,
#bottom-info-tab .bottom-tab-icon::before {
  width: 21px;
  height: 21px;
  border-width: 2.4px;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 12px;
  top: 7px;
  width: 7px;
  height: 9px;
  border-width: 2.4px;
}

#bottom-info-tab .bottom-tab-icon::after {
  width: 2.6px;
  height: 11px;
  box-shadow: 0 -7px 0 -0.5px currentColor;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 2px;
  top: 12px;
  width: 20px;
  height: 2.6px;
  box-shadow:
    0 -6px 0 currentColor,
    0 6px 0 currentColor;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 7px;
  top: 6px;
  width: 10px;
  height: 12px;
  border-width: 2.4px;
}

#bottom-settings-tab .bottom-tab-icon::before {
  width: 22px;
  height: 2.6px;
  box-shadow:
    0 -7px 0 currentColor,
    0 7px 0 currentColor;
}

.sim-panel,
.preset-picker-overlay,
.settings-menu-sheet {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  z-index: 2400 !important;
}

.sheet-handle {
  top: 5px !important;
  width: 142px !important;
  height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.sheet-handle::before {
  content: none !important;
  display: none !important;
}

.sheet-handle::after {
  top: 4px !important;
  width: 112px !important;
  height: 8px !important;
  background: linear-gradient(180deg, rgba(188, 188, 188, 0.95), rgba(148, 148, 148, 0.92)) !important;
  box-shadow: none !important;
}

.sheet-handle:focus,
.sheet-handle:focus-visible,
.sheet-handle:hover,
.sheet-handle:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.preset-picker-dialog,
.settings-menu-sheet {
  border-radius: 30px 30px 0 0 !important;
}

@media (max-width: 720px) {
  :root {
    --bottom-nav-height: 66px;
  }

  .tab {
    font-size: clamp(0.52rem, 2.3vw, 0.62rem) !important;
  }
}

/* Full-screen NERV-like pages except simulation sheet. */
.preset-picker-overlay {
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  z-index: 2400 !important;
  background: rgba(14, 15, 15, 0.995) !important;
  pointer-events: auto !important;
}

.preset-picker-dialog {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: max(22px, env(safe-area-inset-top)) 18px 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preset-picker-dialog::before {
  display: none !important;
}

.preset-picker-head {
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  margin: 0 -18px 18px !important;
  padding: 0 18px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.preset-picker-head h2 {
  grid-column: 2;
  text-align: center;
  font-size: 1.45rem !important;
}

.preset-picker-close {
  grid-column: 3;
}

.preset-picker-table-wrap {
  max-height: calc(100% - 76px) !important;
}

.settings-menu-sheet,
.nerv-full-panel {
  position: fixed;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  z-index: 2400 !important;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: max(22px, env(safe-area-inset-top)) 0 18px !important;
  background: rgba(14, 15, 15, 0.995) !important;
  box-shadow: none !important;
  overflow-y: auto;
  color: #f5f5f5;
}

.settings-menu-grabber {
  display: none !important;
}

.nerv-full-panel.hidden {
  display: none !important;
}

.settings-menu-head,
.nerv-full-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.settings-menu-head h2,
.nerv-full-head h2 {
  grid-column: 2;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
}

.settings-menu-list,
.nerv-full-list {
  margin: 0 !important;
}

.nerv-empty-state {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 28px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
}

/* Final NERV menu sizing and legacy handle cleanup. */
.settings-menu-head,
.nerv-full-head {
  margin-bottom: 12px !important;
  padding-bottom: 14px !important;
}

.settings-menu-head h2,
.nerv-full-head h2 {
  font-size: 1.22rem !important;
  letter-spacing: 0.03em !important;
}

.settings-menu-list {
  width: 100% !important;
}

.settings-menu-row {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.settings-menu-row span:last-child {
  color: rgba(255, 255, 255, 0.28);
  font-size: 1.15rem;
  font-weight: 500;
}

.sheet-handle::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.sheet-handle::after {
  content: "" !important;
  display: block !important;
}

.sim-panel[data-sheet-state="collapsed"] .sheet-handle::after {
  content: "" !important;
  display: block !important;
  transform: translateX(-50%) !important;
}

/* NERV-like top legend and compact simulation trigger. */
.sheet-handle {
  width: 98px !important;
  height: 18px !important;
}

.sheet-handle::after {
  top: 4px !important;
  width: 66px !important;
  height: 5px !important;
}

.intensity-legend {
  position: absolute !important;
  top: calc(env(safe-area-inset-top) + 30px) !important;
  right: calc(env(safe-area-inset-right) + 62px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 920 !important;
  display: flex !important;
  width: auto !important;
  max-width: calc(100vw - 92px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  overflow: hidden;
  border-radius: 999px !important;
}

body:not([data-active-bottom-tab="earthquake-tab"]) .intensity-legend,
body:not([data-active-bottom-tab="earthquake-tab"]) #simulation-start {
  opacity: 0 !important;
  pointer-events: none !important;
}

.intensity-legend h2 {
  display: grid !important;
  flex: 0 0 42px !important;
  min-width: 42px !important;
  place-items: center !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-bottom: 0 !important;
  padding: 0 6px !important;
  font-size: 0.68rem !important;
}

.intensity-scale {
  display: flex !important;
}

.intensity-scale span {
  width: 38px !important;
  height: 34px !important;
  border-right: 1px solid rgba(17, 24, 39, 0.28) !important;
  border-bottom: 0 !important;
  font-size: 0.86rem !important;
}

#simulation-start {
  position: absolute !important;
  top: calc(env(safe-area-inset-top) + 30px) !important;
  right: calc(env(safe-area-inset-right) + 12px) !important;
  z-index: 930 !important;
  display: grid !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  border-radius: 999px !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(19, 216, 239, 0.88) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#simulation-start::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid rgba(5, 8, 10, 0.9);
}

#simulation-start:disabled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(92, 100, 104, 0.8) !important;
  opacity: 0.72;
}

#simulation-start:disabled::before {
  border-left-color: rgba(255, 255, 255, 0.55);
}

#simulation-start:not(:disabled):hover,
#simulation-start:not(:disabled):focus-visible {
  outline: none !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .intensity-legend {
    top: calc(env(safe-area-inset-top) + 24px) !important;
    right: calc(env(safe-area-inset-right) + 58px) !important;
    max-width: calc(100vw - 86px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  }

  .intensity-legend h2 {
    flex-basis: 38px !important;
    min-width: 38px !important;
    font-size: 0.64rem !important;
  }

  .intensity-scale span {
    width: 33px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  #simulation-start {
    top: calc(env(safe-area-inset-top) + 24px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Final pass: make the current UI decisions win over earlier experimental layers. */
/* Final interaction polish: no selection, no preset artifacts, quake icon. */
html, body, button, input, select, textarea, .app-shell, .panel, .map-layout, .sim-panel, .preset-picker, .settings-menu-sheet, .bottom-tabs {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
input, textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}
.preset-picker-table thead, .preset-sort-head, .preset-sort-button {
  display: none !important;
}
.preset-picker-table td::before, .preset-picker-table td::after, .preset-picker-table tr::before, .preset-picker-table tr::after, .preset-intensity-stack::before, .preset-intensity-stack::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
.preset-picker-table td:first-child {
  overflow: hidden !important;
}
.preset-sort-buttons, .preset-sort-choice {
  position: relative !important;
  overflow: hidden !important;
}
.preset-sort-buttons::before, .preset-sort-buttons::after, .preset-sort-choice::before, .preset-sort-choice::after {
  content: none !important;
  display: none !important;
}
#earthquake-tab .bottom-tab-icon::before, #earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 4px !important;
  width: 18px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
}
#earthquake-tab .bottom-tab-icon::after {
  left: 6px !important;
  top: 13px !important;
  width: 13px !important;
  height: 9px !important;
  background: currentColor !important;
  clip-path: polygon(0 45%, 14% 45%, 22% 0, 34% 100%, 46% 0, 58% 100%, 70% 0, 82% 45%, 100% 45%, 100% 70%, 76% 70%, 68% 100%, 56% 10%, 44% 100%, 32% 10%, 24% 70%, 0 70%) !important;
}

/* Absolute final pass near EOF: depth/intensity preset cells and settings detail pages. */
.preset-picker-table-wrap { overflow-x: auto !important; }
.preset-picker-table, .preset-picker-table tbody { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-collapse: collapse !important; }
.preset-picker-table tr { display: table-row !important; height: 66px !important; }
.preset-picker-table td { display: table-cell !important; height: 66px !important; padding: 6px !important; vertical-align: middle !important; white-space: nowrap !important; }
.preset-picker-table td:first-child { width: 58px !important; min-width: 58px !important; text-align: center !important; }
.preset-picker-table td:nth-child(2) { width: 108px !important; min-width: 108px !important; }
.preset-picker-table td:nth-child(3) { width: auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.25 !important; }
.preset-picker-table td:nth-child(4), .preset-picker-table td:nth-child(5) { display: none !important; }
.preset-intensity-stack { display: inline-grid !important; place-items: center !important; gap: 2px !important; width: 44px !important; }
.preset-depth-over, .preset-magnitude-under { color: rgba(255, 255, 255, 0.74) !important; font-size: 0.56rem !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; }
.preset-intensity-badge { width: 30px !important; height: 24px !important; min-width: 30px !important; }
.settings-menu-sheet { overflow: hidden !important; }
.settings-menu-list { position: relative !important; overflow-x: hidden !important; }
.settings-menu-sheet.settings-detail-open .settings-notification-card, .settings-menu-sheet.settings-detail-open .settings-menu-row { opacity: 0 !important; pointer-events: none !important; transform: translateX(-16px) !important; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important; }
.settings-inline-panel.settings-detail-panel { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; overflow-y: auto !important; padding: 0 0 24px !important; border: 0 !important; background: linear-gradient(180deg, rgba(18, 19, 20, 0.98), rgba(8, 9, 10, 0.99)), rgba(8, 9, 10, 0.99) !important; transform: translateX(100%) !important; transition: transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important; touch-action: pan-y !important; }
.settings-inline-panel.settings-detail-panel.is-active { transform: translateX(0) !important; }
.settings-inline-panel.settings-detail-panel.is-leaving { transform: translateX(100%) !important; }
.settings-detail-head { position: sticky !important; top: 0 !important; z-index: 2 !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 52px !important; align-items: center !important; min-height: 56px !important; padding: calc(env(safe-area-inset-top) + 4px) 10px 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(14, 15, 16, 0.96) !important; backdrop-filter: blur(12px) !important; }
.settings-detail-head h3 { margin: 0 !important; color: #f6f6f6 !important; font-size: 1.02rem !important; font-weight: 900 !important; text-align: center !important; }
.settings-detail-back { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.86) !important; font-size: 1.8rem !important; line-height: 1 !important; }
.settings-detail-panel > :not(.settings-detail-head) { margin-left: 18px !important; margin-right: 18px !important; }
.settings-detail-panel .push-confirm-panel, .settings-detail-panel .source-info-overlay-content, .settings-detail-panel .settings-feedback-form { margin-top: 18px !important; }
@media (max-width: 720px) { .preset-picker-table-wrap { overflow-x: hidden !important; } .preset-picker-table td:first-child { width: 52px !important; min-width: 52px !important; padding-left: 4px !important; padding-right: 4px !important; } .preset-picker-table td:nth-child(2) { width: 88px !important; min-width: 88px !important; font-size: 0.68rem !important; } .preset-picker-table td:nth-child(3) { font-size: 0.74rem !important; } .preset-depth-over, .preset-magnitude-under { font-size: 0.54rem !important; } }
@media (prefers-reduced-motion: reduce) { .settings-inline-panel.settings-detail-panel, .settings-menu-sheet.settings-detail-open .settings-notification-card, .settings-menu-sheet.settings-detail-open .settings-menu-row { transition: none !important; } }

.sim-panel {
  width: min(840px, calc(100vw - 16px)) !important;
}

#setup-panel.setup-menu-closed,
.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, 52%) !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(52% + var(--sheet-drag-y, 0px))) !important;
}

/* Current UI polish: compact top controls, attached sheet, compact preset toolbar. */
.preset-picker-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 30px 30px !important;
  gap: 5px !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 4px 10px 9px !important;
  align-content: start !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.preset-filter-input {
  width: 100% !important;
  height: 30px !important;
}

.preset-sort-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.preset-sort-choice {
  min-width: 0 !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding-right: 18px !important;
}

.preset-sort-choice.is-active {
  border-color: rgba(21, 214, 237, 0.62) !important;
  background: rgba(21, 214, 237, 0.2) !important;
  color: #25e2f6 !important;
}

.preset-sort-choice::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  color: currentColor !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

.preset-sort-choice[data-sort-state="asc"]::after {
  content: "↑" !important;
}

.preset-sort-choice[data-sort-state="desc"]::after {
  content: "↓" !important;
}

.preset-picker-table-wrap {
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 78px) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 78px) !important;
  padding-top: 4px !important;
}

/* Bottom tabs are the floor: preset list must never go under them. */
.preset-picker-overlay {
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  place-items: stretch !important;
}

.preset-picker-dialog {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  display: grid !important;
  grid-template-rows: 78px minmax(0, 1fr) !important;
}

.preset-picker-table-wrap {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
}

.preset-depth-over,
.preset-magnitude-under {
  display: block !important;
  width: 44px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.intensity-legend,
body .intensity-legend {
  left: max(6px, env(safe-area-inset-left)) !important;
  right: calc(env(safe-area-inset-right) + 54px) !important;
  max-width: none !important;
  width: auto !important;
}

.intensity-legend h2 {
  display: none !important;
}

.intensity-scale {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}

.intensity-scale span {
  width: auto !important;
  min-width: 0 !important;
  height: 30px !important;
  font-size: 0.74rem !important;
}

/* Legend readability tweak. */
.intensity-legend,
body .intensity-legend {
  top: calc(env(safe-area-inset-top) + 18px) !important;
}

.intensity-scale span {
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

#simulation-start,
body #simulation-start {
  background: #e61946 !important;
}

#simulation-start::before,
body #simulation-start::before {
  border-left-color: #fff !important;
}

#setup-panel.sim-panel {
  left: 50% !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  max-height: min(58svh, 560px) !important;
}

#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 72px)) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  transform: translate(-50%, 0) !important;
}

#setup-panel.sim-panel.is-dragging {
  height: var(--sheet-drag-height, auto) !important;
}

#setup-panel .sim-panel-scroll {
  max-height: calc(min(58svh, 560px) - 78px) !important;
}

#setup-panel .sheet-handle {
  height: 20px !important;
  margin-bottom: 4px !important;
}

#setup-panel .settings-section {
  gap: 8px !important;
  margin: 0 !important;
}

#setup-panel .settings-section[data-settings-section="display"] {
  padding-top: 2px !important;
}

#setup-panel #set-epicenter,
#setup-panel .control-button {
  min-height: 42px !important;
}

.settings-menu-row {
  width: 100% !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 2px !important;
  top: 11px !important;
  width: 22px !important;
  height: 2px !important;
  background: currentColor !important;
  clip-path: polygon(0 50%, 12% 50%, 18% 0, 28% 100%, 38% 0, 48% 100%, 58% 0, 68% 100%, 78% 0, 88% 50%, 100% 50%, 100% 100%, 0 100%) !important;
}

#bottom-learning-tab .bottom-tab-icon::before,
#bottom-learning-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  box-shadow: none !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 5px !important;
  top: 3px !important;
  width: 14px !important;
  height: 18px !important;
  border: 2px solid currentColor !important;
  border-left-width: 4px !important;
  border-radius: 2px 4px 4px 2px !important;
  background: transparent !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 12px !important;
  top: 7px !important;
  width: 10px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-55deg) !important;
}

@media (max-width: 720px) {
  .preset-picker-head {
    height: 78px !important;
    min-height: 78px !important;
  }

  .preset-sort-choice {
    font-size: 0.68rem !important;
    padding: 0 4px !important;
  }

  .intensity-legend,
  body .intensity-legend {
    top: calc(env(safe-area-inset-top) + 14px) !important;
    left: calc(env(safe-area-inset-left) + 6px) !important;
    right: calc(env(safe-area-inset-right) + 50px) !important;
  }

  .intensity-scale span {
    height: 28px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
  }

  #setup-panel.sim-panel {
    width: 100vw !important;
    max-height: 58svh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  #setup-panel .sim-panel-scroll {
    max-height: calc(58svh - 78px) !important;
  }
}

.sheet-handle {
  width: 92px !important;
  height: 22px !important;
  cursor: grab !important;
  touch-action: none !important;
}

.sheet-handle::after {
  top: 6px !important;
  width: 62px !important;
  height: 5px !important;
}

#setup-panel .settings-section[data-settings-section="display"] {
  order: 1 !important;
}

#setup-panel .settings-section[data-settings-section="source"] {
  order: 2 !important;
  display: grid !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#setup-panel .settings-section[data-settings-section="source"] h3,
#setup-panel .settings-section[data-settings-section="source"] .field,
#setup-panel .settings-section[data-settings-section="source"] .field-grid {
  display: grid !important;
}

.settings-menu-list {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 20px) !important;
  overflow-y: auto !important;
}

.settings-notification-card {
  order: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px 14px !important;
  align-items: center !important;
  padding: 12px 18px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.settings-notification-row {
  display: contents !important;
}

.settings-notification-row span {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.92rem !important;
}

.settings-notification-row strong {
  color: #f5f5f5 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
}

.settings-switch {
  grid-column: 2 !important;
  justify-self: end !important;
  min-width: 74px !important;
  min-height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 800 !important;
}

.settings-switch.is-on {
  border-color: rgba(21, 214, 237, 0.58) !important;
  background: rgba(21, 214, 237, 0.22) !important;
  color: #23e1f5 !important;
}

#settings-push-button {
  order: 2 !important;
}

#settings-source-button {
  order: 3 !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#settings-source-panel {
  order: 4 !important;
}

#settings-feedback-button {
  order: 5 !important;
}

#settings-feedback-panel {
  order: 6 !important;
}

.settings-inline-panel {
  padding: 12px 18px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.settings-inline-panel.hidden {
  display: none !important;
}

.settings-inline-panel .source-info-overlay-content {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.settings-inline-panel .source-info-header,
.settings-inline-panel .source-info-footer {
  display: none !important;
}

.settings-inline-panel .source-info-tabs {
  margin: 0 0 12px !important;
}

.settings-inline-panel .source-info-section,
.settings-inline-panel .source-link-card {
  background: rgba(255, 255, 255, 0.035) !important;
}

.settings-feedback-form {
  display: grid !important;
  gap: 12px !important;
}

.settings-feedback-form .feedback-submit {
  justify-self: end !important;
  min-width: 96px !important;
  min-height: 40px !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 4px !important;
  width: 19px !important;
  height: 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 6px !important;
  top: 8px !important;
  width: 13px !important;
  height: 8px !important;
  border: 0 !important;
  background: none !important;
  background-image: linear-gradient(
    135deg,
    transparent 0 18%,
    currentColor 18% 26%,
    transparent 26% 38%,
    currentColor 38% 46%,
    transparent 46% 58%,
    currentColor 58% 66%,
    transparent 66% 100%
  ) !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .sim-panel {
    width: calc(100vw - 10px) !important;
  }
}

/* Absolute final settings pass EOF: detail pages fill to bottom tab and never overflow sideways. */
.settings-menu-sheet { position: fixed !important; inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important; height: auto !important; max-height: none !important; overflow: hidden !important; }
.settings-menu-list { height: calc(100% - 66px) !important; max-height: none !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; }
.settings-inline-panel.settings-detail-panel { inset: 0 !important; height: 100% !important; max-height: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; padding-bottom: 28px !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; }
.settings-detail-panel .source-info-overlay-content, .settings-detail-panel .source-info-tab-panel, .settings-detail-panel .source-info-sections, .settings-detail-panel .source-info-section, .settings-detail-panel .source-link-card, .settings-detail-panel .settings-feedback-form, .settings-detail-panel .push-confirm-panel, .settings-detail-panel .push-history-list, .settings-detail-panel .push-history-item, .settings-detail-panel .admin-mode-dialog, .settings-detail-panel .admin-mode-field, .settings-detail-panel .admin-notification-panel { width: auto !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
.settings-detail-panel .source-info-section, .settings-detail-panel .source-info-section *, .settings-detail-panel .source-link-card, .settings-detail-panel .source-link-card *, .settings-detail-panel .push-history-item, .settings-detail-panel .push-history-item *, .settings-detail-panel .admin-mode-dialog, .settings-detail-panel .admin-mode-dialog *, .settings-detail-panel .settings-feedback-form, .settings-detail-panel .settings-feedback-form * { overflow-wrap: anywhere !important; word-break: break-word !important; }
#settings-push-button { order: 2 !important; } #settings-push-history-button { order: 3 !important; } #settings-source-button { order: 4 !important; } #settings-privacy-button { order: 5 !important; } #settings-feedback-button { order: 6 !important; } #settings-admin-button { order: 7 !important; } #settings-push-panel { order: 8 !important; } #settings-push-history-panel { order: 9 !important; } #settings-source-panel { order: 10 !important; } #settings-privacy-panel { order: 11 !important; } #settings-feedback-panel { order: 12 !important; } #settings-admin-panel { order: 13 !important; }
.settings-admin-embedded { position: static !important; inset: auto !important; display: block !important; width: 100% !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; backdrop-filter: none !important; }
.settings-admin-embedded .admin-mode-dialog { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.settings-admin-embedded .admin-mode-dialog h2 { display: none !important; }
#setup-panel.sim-panel { position: fixed !important; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important; margin-bottom: 0 !important; }
#setup-panel.sim-panel:focus-within { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important; }
#setup-panel.setup-menu-open, #setup-panel.sim-panel[data-sheet-state="open"] { transform: translate(-50%, 0) !important; }
#setup-panel.setup-menu-closed, #setup-panel.sim-panel[data-sheet-state="collapsed"] { transform: translate(-50%, calc(100% - 72px)) !important; }

/* Absolute final settings overflow/scrollbar pass EOF. */
.settings-inline-panel.settings-detail-panel,
.settings-inline-panel.settings-detail-panel * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.settings-inline-panel.settings-detail-panel input,
.settings-inline-panel.settings-detail-panel textarea,
.settings-inline-panel.settings-detail-panel select,
.settings-inline-panel.settings-detail-panel button {
  min-width: 0 !important;
  max-width: 100% !important;
}

.settings-inline-panel.settings-detail-panel .push-confirm-actions,
.settings-inline-panel.settings-detail-panel .admin-mode-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.settings-inline-panel.settings-detail-panel .push-confirm-actions button,
.settings-inline-panel.settings-detail-panel .admin-mode-actions button,
.settings-inline-panel.settings-detail-panel .admin-notification-send,
.settings-inline-panel.settings-detail-panel .feedback-submit {
  width: 100% !important;
}

.settings-detail-panel .push-confirm-panel p,
.settings-detail-panel .push-confirm-status,
.settings-detail-panel .admin-mode-status,
.settings-detail-panel .admin-notification-status {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.settings-admin-embedded .admin-notification-panel {
  padding: 12px !important;
}

.settings-menu-list,
.settings-inline-panel.settings-detail-panel {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

.settings-menu-list.is-scrolling,
.settings-inline-panel.settings-detail-panel.is-scrolling {
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent !important;
}

.settings-menu-list::-webkit-scrollbar,
.settings-inline-panel.settings-detail-panel::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.settings-menu-list::-webkit-scrollbar-thumb,
.settings-inline-panel.settings-detail-panel::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
}

.settings-menu-list.is-scrolling::-webkit-scrollbar-thumb,
.settings-inline-panel.settings-detail-panel.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45) !important;
}

/* Final blocking and settings document scroll pass. */
body.unsupported-screen-active #simulation-start,
body.maintenance-screen-blocking #simulation-start {
  pointer-events: none !important;
}

body.unsupported-screen-active::before,
body.unsupported-screen-active::after {
  z-index: 2147483006 !important;
}

.maintenance-mode-overlay:not(.hidden) {
  z-index: 2147483005 !important;
  pointer-events: auto !important;
}

.maintenance-mode-overlay:not(.hidden)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: auto;
}

.settings-detail-panel .settings-privacy-content,
.settings-detail-panel .source-info-overlay-content {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.settings-detail-panel .source-info-tab-panel,
.settings-detail-panel .source-info-sections,
.settings-detail-panel .privacy-policy-sections {
  display: grid !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 2px !important;
}

.settings-inline-panel.settings-detail-panel {
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

/* Settings detail final viewport pass: use the full area above bottom tabs and prevent sideways overflow. */
.settings-menu-sheet {
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.settings-menu-list {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.settings-inline-panel.settings-detail-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

.settings-detail-head {
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  justify-items: center !important;
}

.settings-detail-head h3 {
  grid-column: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

.settings-detail-panel > :not(.settings-detail-head) {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 32px) !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
}

.settings-detail-panel .settings-privacy-content,
.settings-detail-panel .source-info-overlay-content {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 32px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  padding-bottom: 18px !important;
  overflow: visible !important;
  contain: none !important;
}

.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .source-info-overlay-content *,
.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .push-confirm-panel *,
.settings-detail-panel .settings-feedback-form,
.settings-detail-panel .settings-feedback-form *,
.settings-detail-panel .settings-admin-embedded,
.settings-detail-panel .settings-admin-embedded *,
.settings-detail-panel .admin-mode-dialog,
.settings-detail-panel .admin-mode-dialog *,
.settings-detail-panel .admin-notification-panel,
.settings-detail-panel .admin-notification-panel *,
.settings-detail-panel .push-history-list,
.settings-detail-panel .push-history-list * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.settings-detail-panel input,
.settings-detail-panel textarea,
.settings-detail-panel select,
.settings-detail-panel button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.settings-detail-panel .settings-detail-back {
  width: 42px !important;
  max-width: 42px !important;
}

.settings-admin-embedded .admin-mode-dialog {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  overflow-x: hidden !important;
}

.settings-admin-embedded .admin-mode-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  gap: 10px !important;
}

.settings-admin-embedded .admin-mode-field,
.settings-admin-embedded .admin-notification-panel {
  width: 100% !important;
  overflow-x: hidden !important;
}

.settings-admin-embedded textarea {
  resize: vertical !important;
}

.settings-detail-panel p,
.settings-detail-panel li,
.settings-detail-panel a,
.settings-detail-panel strong,
.settings-detail-panel span,
.settings-detail-panel label {
  overflow-wrap: anywhere !important;
}

/* History tab and sheet position pass. */
#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 56px)) !important;
}

.sim-panel.is-dragging[data-sheet-state="collapsed"] {
  transform: translate(-50%, calc(100% - 56px + var(--sheet-drag-y, 0px))) !important;
}

.settings-detail-panel .push-confirm-panel[data-push-panel="history"] {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: calc(100% - 74px) !important;
  height: calc(100% - 74px) !important;
  max-height: none !important;
  overflow: hidden !important;
}

.settings-detail-panel .push-history-list {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

.history-full-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.history-full-panel.hidden {
  display: none !important;
}

.history-stats-toolbar {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
}

.history-stats-toolbar input {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  font: inherit !important;
  font-weight: 800 !important;
  outline: none !important;
}

.history-stats-toolbar input:focus {
  border-color: rgba(38, 217, 255, 0.64) !important;
  box-shadow: 0 0 0 3px rgba(38, 217, 255, 0.14) !important;
}

.history-stats-list {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 2px calc(18px + env(safe-area-inset-bottom)) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent !important;
}

.history-stats-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 13px 14px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
  overflow: hidden !important;
}

.history-stats-card-main {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.history-stats-card-main strong {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.history-stats-card-main span {
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.history-stats-count {
  display: grid !important;
  place-items: center !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: rgba(38, 217, 255, 0.18) !important;
  color: #5ee8ff !important;
  font-size: 1.2rem !important;
  font-weight: 950 !important;
}

.history-epicenter-list {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.history-epicenter-list li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.history-epicenter-list li span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.history-epicenter-more {
  color: rgba(255, 255, 255, 0.55) !important;
}

.history-stats-empty {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  min-height: 42vh !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-align: center !important;
}

.history-stats-empty strong {
  color: #fff !important;
  font-size: 1.05rem !important;
}

/* Settings status, appearance menu, centered legend and simulation start placement. */
.settings-status-group {
  display: grid !important;
  gap: 10px !important;
  order: 1 !important;
  margin: 0 14px 14px !important;
}

.settings-status-card,
.settings-notification-card.settings-status-card {
  display: grid !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
  overflow: hidden !important;
}

.settings-status-card .settings-notification-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 10px 14px !important;
}

.settings-status-card .settings-notification-row span {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.settings-status-card .settings-notification-row strong {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 58px !important;
  height: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.84rem !important;
  font-weight: 950 !important;
}

.settings-status-card .settings-notification-row strong[data-state="on"] {
  border-color: rgba(38, 217, 255, 0.52) !important;
  background: rgba(38, 217, 255, 0.18) !important;
  color: #5ee8ff !important;
}

#settings-appearance-button { order: 4 !important; }
#settings-push-history-button { order: 3 !important; }
#settings-push-button { order: 2 !important; }
#settings-source-button { order: 5 !important; }
#settings-privacy-button { order: 6 !important; }
#settings-feedback-button { order: 7 !important; }
#settings-admin-button { order: 8 !important; }
#settings-push-panel { order: 9 !important; }
#settings-appearance-panel { order: 10 !important; }
#settings-push-history-panel { order: 11 !important; }
#settings-source-panel { order: 12 !important; }
#settings-privacy-panel { order: 13 !important; }
#settings-feedback-panel { order: 14 !important; }
#settings-admin-panel { order: 15 !important; }

.settings-appearance-section {
  display: grid !important;
  gap: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.settings-appearance-section + .settings-appearance-section {
  margin-top: 12px !important;
}

.settings-appearance-section h4 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 0.98rem !important;
}

.settings-theme-options {
  display: grid !important;
  gap: 8px !important;
}

.settings-theme-options label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 9px 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 850 !important;
}

.settings-appearance-color-host .field {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.settings-appearance-color-host select {
  width: 100% !important;
}

html[data-resolved-theme="light"] {
  color-scheme: light;
}

html[data-resolved-theme="light"] body {
  background: #eef2f5 !important;
  color: #111827 !important;
}

html[data-resolved-theme="light"] .settings-menu-sheet,
html[data-resolved-theme="light"] .nerv-full-panel,
html[data-resolved-theme="light"] .settings-inline-panel.settings-detail-panel {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(229, 235, 240, 0.98)) !important;
  color: #111827 !important;
}

html[data-resolved-theme="light"] .settings-menu-row,
html[data-resolved-theme="light"] .settings-status-card,
html[data-resolved-theme="light"] .settings-appearance-section,
html[data-resolved-theme="light"] .settings-theme-options label {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #111827 !important;
}

.intensity-legend,
body .intensity-legend {
  left: 50% !important;
  right: auto !important;
  width: min(520px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
}

#simulation-start,
body #simulation-start {
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px) !important;
  left: max(18px, env(safe-area-inset-left) + 18px) !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 42px !important;
  min-height: 42px !important;
  z-index: 940 !important;
}

/* History map sheet, CSS gear icon, centered info icon, station/history polish. */
body.history-map-mode .history-full-panel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  z-index: 910 !important;
  display: grid !important;
  width: min(560px, 100vw) !important;
  height: min(48svh, 430px) !important;
  max-height: min(48svh, 430px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  padding: 14px 14px 12px !important;
  background: linear-gradient(180deg, rgba(18, 20, 22, 0.96), rgba(8, 9, 10, 0.98)) !important;
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.38) !important;
  transform: translateX(-50%) !important;
}

body.history-map-mode .history-full-panel::before {
  display: none !important;
  content: none !important;
}

body.history-map-mode .history-stats-toolbar {
  margin-top: 0 !important;
}

.history-stats-sheet-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 2px !important;
  color: #fff !important;
}

.history-stats-sheet-head strong {
  min-width: 0 !important;
  font-size: 0.98rem !important;
  overflow-wrap: anywhere !important;
}

.history-stats-sheet-head span {
  grid-column: 1 / -1 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
}

.history-stats-sheet-head button {
  border: 1px solid rgba(38, 217, 255, 0.36) !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  background: rgba(38, 217, 255, 0.13) !important;
  color: #5ee8ff !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}

#bottom-settings-tab .bottom-tab-icon {
  position: relative !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 50% !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  border: 3px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  clip-path: polygon(45% 0,55% 0,58% 20%,66% 23%,82% 11%,89% 18%,77% 34%,80% 42%,100% 45%,100% 55%,80% 58%,77% 66%,89% 82%,82% 89%,66% 77%,58% 80%,55% 100%,45% 100%,42% 80%,34% 77%,18% 89%,11% 82%,23% 66%,20% 58%,0 55%,0 45%,20% 42%,23% 34%,11% 18%,18% 11%,34% 23%,42% 20%);
}

#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  left: 50% !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
}

.source-info-button::after,
body .source-info-button::after {
  left: 50% !important;
  top: 50% !important;
  line-height: 1 !important;
  transform: translate(-50%, -52%) !important;
}

.source-info-button::before,
body .source-info-button::before {
  transform: translate(-50%, -50%) !important;
}

/* Current pass: default dark polish, sheet start button, station info tab, readable light mode. */
.simulation-start-sheet-host {
  display: grid !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
  padding: 0 0 8px !important;
}

#simulation-start.sheet-simulation-start,
body #simulation-start.sheet-simulation-start {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  z-index: auto !important;
  background: linear-gradient(180deg, #ff315d, #c91545) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 28px rgba(233, 30, 82, 0.24) !important;
}

#simulation-start.sheet-simulation-start::before {
  position: static !important;
  display: inline-block !important;
  margin-right: 8px !important;
  vertical-align: -0.08em !important;
}

.station-info-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 14px 14px 10px !important;
  background: rgba(8, 9, 10, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.station-info-toolbar input {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 11px 13px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
}

.station-info-toolbar span {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.station-info-list {
  display: grid !important;
  gap: 8px !important;
  padding: 10px 14px 22px !important;
}

.station-info-card {
  display: grid !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f8fafc !important;
}

.station-info-card-main {
  display: grid !important;
  gap: 3px !important;
}

.station-info-card-main strong {
  font-size: 0.96rem !important;
  font-weight: 950 !important;
}

.station-info-card-main span,
.station-info-card dl {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.78rem !important;
}

.station-info-card dl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.station-info-card dt,
.station-info-card dd {
  margin: 0 !important;
}

.station-info-card dt {
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 0.68rem !important;
}

.station-info-card dd {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.station-info-empty,
.station-info-more {
  padding: 18px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.68) !important;
  text-align: center !important;
  font-weight: 800 !important;
}

html[data-resolved-theme="light"] .settings-menu-sheet,
html[data-resolved-theme="light"] .settings-menu-list,
html[data-resolved-theme="light"] .settings-inline-panel.settings-detail-panel,
html[data-resolved-theme="light"] .nerv-full-panel,
html[data-resolved-theme="light"] .history-full-panel,
html[data-resolved-theme="light"] .history-stats-list,
html[data-resolved-theme="light"] .station-info-toolbar {
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(235, 240, 245, 0.98)) !important;
  color: #111827 !important;
}

html[data-resolved-theme="light"] .settings-menu-sheet *,
html[data-resolved-theme="light"] .settings-inline-panel.settings-detail-panel *,
html[data-resolved-theme="light"] .nerv-full-panel *,
html[data-resolved-theme="light"] .history-full-panel *,
html[data-resolved-theme="light"] .station-info-card *,
html[data-resolved-theme="light"] .station-info-toolbar *,
html[data-resolved-theme="light"] .settings-appearance-section *,
html[data-resolved-theme="light"] .settings-theme-options label * {
  color: #111827 !important;
}

html[data-resolved-theme="light"] .settings-menu-row,
html[data-resolved-theme="light"] .settings-status-card,
html[data-resolved-theme="light"] .settings-appearance-section,
html[data-resolved-theme="light"] .settings-theme-options label,
html[data-resolved-theme="light"] .history-stats-card,
html[data-resolved-theme="light"] .station-info-card,
html[data-resolved-theme="light"] .station-info-empty,
html[data-resolved-theme="light"] .station-info-more {
  border-color: rgba(15, 23, 42, 0.14) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: #111827 !important;
}

html[data-resolved-theme="light"] input,
html[data-resolved-theme="light"] select,
html[data-resolved-theme="light"] textarea {
  border-color: rgba(15, 23, 42, 0.18) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #111827 !important;
}

html[data-resolved-theme="light"] .settings-status-card .settings-notification-row strong[data-state="on"],
html[data-resolved-theme="light"] .source-info-button,
html[data-resolved-theme="light"] .tab.active,
html[data-resolved-theme="light"] .bottom-tabs .tab.active span {
  color: #00bcd4 !important;
}

html[data-resolved-theme="light"] .feedback-submit,
html[data-resolved-theme="light"] #simulation-start.sheet-simulation-start {
  color: #fff !important;
}

@media (max-width: 520px) {
  .station-info-card dl {
    grid-template-columns: 1fr 1fr !important;
  }
}

body[data-active-bottom-tab="bottom-history-tab"] #setup-panel,
body[data-active-bottom-tab="bottom-info-tab"] #setup-panel,
body[data-active-bottom-tab="bottom-learning-tab"] #setup-panel,
body[data-active-bottom-tab="bottom-settings-tab"] #setup-panel {
  display: none !important;
  pointer-events: none !important;
}

body[data-active-bottom-tab="bottom-history-tab"] .epicenter-marker-shell {
  display: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, currentColor 30% 43%, transparent 45%),
    conic-gradient(
      from 10deg,
      transparent 0 6deg,
      currentColor 6deg 18deg,
      transparent 18deg 36deg,
      currentColor 36deg 48deg,
      transparent 48deg 66deg,
      currentColor 66deg 78deg,
      transparent 78deg 96deg,
      currentColor 96deg 108deg,
      transparent 108deg 126deg,
      currentColor 126deg 138deg,
      transparent 138deg 156deg,
      currentColor 156deg 168deg,
      transparent 168deg 186deg,
      currentColor 186deg 198deg,
      transparent 198deg 216deg,
      currentColor 216deg 228deg,
      transparent 228deg 246deg,
      currentColor 246deg 258deg,
      transparent 258deg 276deg,
      currentColor 276deg 288deg,
      transparent 288deg 306deg,
      currentColor 306deg 318deg,
      transparent 318deg 336deg,
      currentColor 336deg 348deg,
      transparent 348deg 360deg
    ) !important;
  clip-path: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  width: 8px !important;
  height: 8px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

.learning-content {
  display: grid !important;
  gap: 14px !important;
  padding: 18px 16px calc(var(--bottom-nav-height) + 34px) !important;
  color: #f8fafc !important;
}

.learning-hero,
.learning-card,
.learning-intensity-item {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

.learning-hero {
  padding: 18px !important;
}

.learning-kicker {
  color: #26d9ff !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
}

.learning-hero h2,
.learning-card h3 {
  margin: 6px 0 8px !important;
  color: #fff !important;
  font-size: 1rem !important;
}

.learning-hero p,
.learning-card p,
.learning-intensity-item p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  line-height: 1.65 !important;
  font-size: 0.84rem !important;
}

.learning-card {
  padding: 16px !important;
}

.learning-card a {
  display: block !important;
  margin-top: 10px !important;
  color: #5ee8ff !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

.learning-intensity-list {
  display: grid !important;
  gap: 8px !important;
}

.learning-intensity-item {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
}

.learning-intensity-badge {
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  background: var(--learning-intensity-color, rgba(38, 217, 255, 0.15)) !important;
  color: var(--learning-intensity-text, #5ee8ff) !important;
  font-weight: 950 !important;
}

html[data-resolved-theme="light"] .learning-content,
html[data-resolved-theme="light"] .learning-hero h2,
html[data-resolved-theme="light"] .learning-card h3 {
  color: #111827 !important;
}

html[data-resolved-theme="light"] .learning-hero,
html[data-resolved-theme="light"] .learning-card,
html[data-resolved-theme="light"] .learning-intensity-item {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

html[data-resolved-theme="light"] .learning-kicker,
html[data-resolved-theme="light"] .learning-card a,
html[data-resolved-theme="light"] .learning-intensity-badge {
  color: #008aa3 !important;
}

/* Current refinement: compact toolbars, scoped scrolling, lighter simulation button. */
.history-full-panel,
.nerv-full-panel {
  overflow: hidden !important;
}

.history-stats-toolbar,
.station-info-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  background: rgba(8, 9, 10, 0.98) !important;
  backdrop-filter: blur(14px) !important;
}

.history-stats-toolbar {
  padding: 8px 12px 7px !important;
}

.station-info-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) auto !important;
  padding: 8px 12px 7px !important;
}

.history-stats-toolbar input,
.station-info-toolbar input,
.station-info-toolbar .station-info-search-wrap,
.station-info-toolbar select {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
  padding: 5px 9px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

.history-stats-sort-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: center !important;
  margin-top: 7px !important;
}

.history-stats-sort-row label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
}

.history-stats-sort-row select,
.history-stats-sort-row button {
  min-height: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 11px !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

.history-stats-sort-row button {
  background: rgba(38, 217, 255, 0.16) !important;
  color: #5ee8ff !important;
}

.history-stats-empty-static {
  align-self: start !important;
  min-height: 0 !important;
}

.history-stats-list,
.station-info-list {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-top: 10px !important;
}

body.history-map-mode .history-full-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.history-map-mode .history-stats-list {
  min-height: 0 !important;
}

.simulation-preset-sheet-host,
.simulation-start-sheet-host {
  padding-inline: 0 !important;
}

.simulation-preset-sheet-host #historical-earthquake-button {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 15px !important;
}

#simulation-start.sheet-simulation-start,
body #simulation-start.sheet-simulation-start {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  font-size: 0.92rem !important;
}

#simulation-start.sheet-simulation-start::before,
body #simulation-start.sheet-simulation-start::before {
  display: none !important;
}

.settings-detail-panel .push-confirm-panel {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-detail-panel .push-history-list {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 0 24px !important;
  background: transparent !important;
}

.settings-detail-panel .push-history-item {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.settings-detail-panel .push-history-head {
  display: none !important;
}

.settings-admin-embedded,
.settings-admin-embedded .admin-mode-dialog {
  min-height: 0 !important;
  overflow: visible !important;
}

.settings-inline-panel.settings-detail-panel {
  scrollbar-width: thin !important;
}

.settings-inline-panel.settings-detail-panel .admin-notification-panel,
.settings-inline-panel.settings-detail-panel .admin-mode-dialog {
  padding-bottom: 28px !important;
}

html[data-resolved-theme="light"] .history-stats-toolbar,
html[data-resolved-theme="light"] .station-info-toolbar {
  background: rgba(248, 250, 252, 0.98) !important;
}

html[data-resolved-theme="light"] .settings-detail-panel .push-history-item {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

@media (max-width: 520px) {
  .station-info-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .station-info-toolbar input {
    grid-column: 1 / -1 !important;
  }

  .station-info-toolbar .station-info-search-wrap {
    grid-column: 1 / -1 !important;
  }

  .station-info-toolbar span {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }
}

/* Current refinement: robust full-panel scrolling and compact app chrome. */
#info-full-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#learning-full-panel {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#learning-full-panel .learning-content {
  min-height: 0 !important;
  padding-bottom: calc(var(--bottom-nav-height) + 96px) !important;
}

#info-full-panel .station-info-list,
.settings-detail-panel .push-history-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: calc(var(--bottom-nav-height) + 86px) !important;
  scrollbar-width: thin !important;
}

.history-full-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.history-stats-list {
  min-height: 0 !important;
  padding-bottom: calc(var(--bottom-nav-height) + 84px) !important;
}

.history-stats-empty-static {
  overflow: hidden !important;
}

.statistics-confirm-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(8px) !important;
}

.statistics-confirm-dialog {
  width: min(420px, 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  background: rgba(12, 15, 18, 0.96) !important;
  color: #f8fafc !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38) !important;
}

.statistics-confirm-dialog h2 {
  margin: 0 0 10px !important;
  font-size: 1.05rem !important;
}

.statistics-confirm-dialog p {
  margin: 0 !important;
  color: rgba(248, 250, 252, 0.78) !important;
  line-height: 1.7 !important;
}

.statistics-confirm-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.statistics-confirm-actions button {
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-weight: 900 !important;
}

.statistics-confirm-actions [data-statistics-confirm-continue] {
  background: #00bcd4 !important;
  color: #041116 !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  width: 21px !important;
  height: 21px !important;
  border: 4px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow:
    0 -8px 0 -5px currentColor,
    0 8px 0 -5px currentColor,
    8px 0 0 -5px currentColor,
    -8px 0 0 -5px currentColor,
    6px 6px 0 -5px currentColor,
    -6px -6px 0 -5px currentColor,
    6px -6px 0 -5px currentColor,
    -6px 6px 0 -5px currentColor !important;
  clip-path: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  width: 7px !important;
  height: 7px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

.learning-long-period-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.learning-long-period-item {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.learning-long-period-item span {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: var(--long-period-color) !important;
  color: #081018 !important;
  font-weight: 950 !important;
}

.learning-long-period-item p {
  margin: 0 !important;
}

html[data-resolved-theme="light"] .statistics-confirm-dialog,
html[data-resolved-theme="light"] .learning-long-period-item {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #111827 !important;
}

/* Current refinement: final safety overrides for tab isolation and settings/history UI. */
.history-full-panel.hidden,
#history-full-panel.hidden,
#info-full-panel.hidden,
#learning-full-panel.hidden,
.nerv-full-panel.hidden {
  display: none !important;
  pointer-events: none !important;
}

body:not([data-active-bottom-tab="bottom-history-tab"]) #history-full-panel {
  display: none !important;
  pointer-events: none !important;
}

body:not([data-active-bottom-tab="bottom-info-tab"]) #info-full-panel {
  display: none !important;
  pointer-events: none !important;
}

body:not([data-active-bottom-tab="bottom-learning-tab"]) #learning-full-panel {
  display: none !important;
  pointer-events: none !important;
}

.station-info-search-wrap {
  position: relative !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.station-info-search-wrap input {
  width: 100% !important;
}

.station-info-suggestions {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(8, 10, 13, 0.98) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36) !important;
  padding: 6px !important;
}

.station-info-suggestions.hidden {
  display: none !important;
}

.station-info-suggestions button {
  width: 100% !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 9px 10px !important;
  background: transparent !important;
  color: #f8fafc !important;
  text-align: left !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

.station-info-suggestions button:hover,
.station-info-suggestions button:focus-visible {
  background: rgba(38, 217, 255, 0.16) !important;
  outline: none !important;
}

.station-info-card dl {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.station-info-card dl > div:first-child {
  grid-column: 1 / -1 !important;
}

body.history-map-mode .history-stats-list {
  padding-bottom: calc(var(--bottom-nav-height) + 128px) !important;
}

body.history-map-mode .history-stats-card {
  min-height: 0 !important;
  overflow: visible !important;
}

body.history-map-mode .history-full-panel {
  max-height: calc(100dvh - var(--bottom-nav-height)) !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  content: "⚙" !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-family: "Segoe UI Symbol", "Apple Color Emoji", system-ui, sans-serif !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  display: none !important;
}

/* Final icon/status override. Keep this block at EOF. */
[data-history-clear-area],
#settings-push-button {
  display: none !important;
}

.settings-status-card {
  cursor: pointer !important;
  user-select: none !important;
}

.settings-status-card .settings-notification-row strong {
  display: inline-grid !important;
  min-width: 58px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
}

.settings-status-card .settings-notification-row strong[data-state="on"] {
  border-color: rgba(34, 197, 94, 0.48) !important;
  background: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
}

.settings-status-card .settings-notification-row strong[data-state="off"] {
  border-color: rgba(244, 63, 94, 0.48) !important;
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fda4af !important;
}

.source-info-button,
body .source-info-button {
  width: 42px !important;
  height: 42px !important;
}

.source-info-button::before,
body .source-info-button::before {
  inset: 9px !important;
  border-width: 2px !important;
}

.source-info-button::after,
body .source-info-button::after {
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -6px 0 -1px currentColor !important;
  transform: translate(-50%, -28%) !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after,
#bottom-settings-tab .bottom-tab-icon::before,
#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 7px !important;
  top: 2px !important;
  width: 10px !important;
  height: 21px !important;
  border: 0 !important;
  border-radius: 62% 38% 56% 44% / 46% 54% 46% 54% !important;
  background: currentColor !important;
  clip-path: polygon(48% 0, 78% 12%, 67% 29%, 90% 45%, 68% 57%, 78% 78%, 44% 100%, 26% 84%, 43% 66%, 18% 52%, 36% 38%, 24% 22%) !important;
  box-shadow: -5px 8px 0 -3px currentColor, 6px 17px 0 -4px currentColor !important;
}

#earthquake-tab .bottom-tab-icon::after {
  left: 4px !important;
  top: 19px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 14px -16px 0 -1px currentColor, 16px -12px 0 -1px currentColor !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 4px !important;
  width: 17px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, currentColor 27% 43%, transparent 44%),
    conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 42deg, currentColor 42deg 54deg, transparent 54deg 84deg, currentColor 84deg 96deg, transparent 96deg 126deg, currentColor 126deg 138deg, transparent 138deg 168deg, currentColor 168deg 180deg, transparent 180deg 210deg, currentColor 210deg 222deg, transparent 222deg 252deg, currentColor 252deg 264deg, transparent 264deg 294deg, currentColor 294deg 306deg, transparent 306deg 336deg, currentColor 336deg 360deg) !important;
  box-shadow: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
}

#setup-panel .simulation-quick-actions,
#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}

.history-stats-count {
  box-shadow: none !important;
}

/* Current refinement: separate statistics map, CSS-only tab icons and status toggles. */
[data-history-clear-area] {
  display: none !important;
}

#settings-push-button {
  display: none !important;
}

.settings-status-card {
  cursor: pointer !important;
  user-select: none !important;
}

.settings-status-card .settings-notification-row strong {
  display: inline-grid !important;
  min-width: 58px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
}

.settings-status-card .settings-notification-row strong[data-state="on"] {
  border-color: rgba(34, 197, 94, 0.48) !important;
  background: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
}

.settings-status-card .settings-notification-row strong[data-state="off"] {
  border-color: rgba(244, 63, 94, 0.48) !important;
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fda4af !important;
}

.source-info-button,
body .source-info-button {
  width: 42px !important;
  height: 42px !important;
}

.source-info-button::before,
body .source-info-button::before {
  inset: 9px !important;
  border-width: 2px !important;
}

.source-info-button::after,
body .source-info-button::after {
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -6px 0 -1px currentColor !important;
  transform: translate(-50%, -28%) !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after,
#bottom-settings-tab .bottom-tab-icon::before,
#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 7px !important;
  top: 2px !important;
  width: 10px !important;
  height: 21px !important;
  border: 0 !important;
  border-radius: 62% 38% 56% 44% / 46% 54% 46% 54% !important;
  background: currentColor !important;
  clip-path: polygon(48% 0, 78% 12%, 67% 29%, 90% 45%, 68% 57%, 78% 78%, 44% 100%, 26% 84%, 43% 66%, 18% 52%, 36% 38%, 24% 22%) !important;
  box-shadow: -5px 8px 0 -3px currentColor, 6px 17px 0 -4px currentColor !important;
}

#earthquake-tab .bottom-tab-icon::after {
  left: 4px !important;
  top: 19px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 14px -16px 0 -1px currentColor, 16px -12px 0 -1px currentColor !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 4px !important;
  width: 17px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, currentColor 27% 43%, transparent 44%),
    conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 42deg, currentColor 42deg 54deg, transparent 54deg 84deg, currentColor 84deg 96deg, transparent 96deg 126deg, currentColor 126deg 138deg, transparent 138deg 168deg, currentColor 168deg 180deg, transparent 180deg 210deg, currentColor 210deg 222deg, transparent 222deg 252deg, currentColor 252deg 264deg, transparent 264deg 294deg, currentColor 294deg 306deg, transparent 306deg 336deg, currentColor 336deg 360deg) !important;
  box-shadow: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
}

#setup-panel .simulation-quick-actions,
#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}

.history-stats-count {
  box-shadow: none !important;
}

/* Current refinement: simulation sheet quick actions and compact preset table. */
#setup-panel .setup-intensity-color-field {
  display: none !important;
}

#setup-panel .simulation-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 4px 0 8px !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.065)) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12) !important;
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button span,
#setup-panel .simulation-quick-actions .sheet-speech-toggle strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#setup-panel .simulation-quick-actions .sheet-speech-toggle.is-muted {
  color: rgba(248, 250, 252, 0.58) !important;
}

#setup-panel .simulation-quick-actions .sheet-speech-toggle.is-muted span::after {
  content: "/" !important;
  margin-left: -7px !important;
  color: #ff5c7a !important;
  font-weight: 950 !important;
}

#setup-panel .toggle-row input[type="checkbox"] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
}

#setup-panel .toggle-row::before,
#setup-panel .toggle-row::after,
#setup-panel .preset-picker-button::before,
#setup-panel .preset-picker-button::after {
  box-shadow: none !important;
}

.preset-picker-table-wrap {
  overflow-x: hidden !important;
}

.preset-picker-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}

.preset-picker-table td:nth-child(2),
.preset-picker-table th:nth-child(2) {
  width: 128px !important;
  min-width: 128px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.22 !important;
  font-size: 0.72rem !important;
}

.preset-picker-table td:nth-child(3),
.preset-picker-table th:nth-child(3) {
  width: auto !important;
  min-width: 0 !important;
}

@media (max-width: 520px) {
  .preset-picker-table td:first-child,
  .preset-picker-table th:first-child {
    width: 48px !important;
    min-width: 48px !important;
  }

  .preset-picker-table td:nth-child(2),
  .preset-picker-table th:nth-child(2) {
    width: 116px !important;
    min-width: 116px !important;
    font-size: 0.66rem !important;
  }

  .preset-picker-table td:nth-child(3),
  .preset-picker-table th:nth-child(3) {
    font-size: 0.7rem !important;
  }
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    top: max(16px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: 58px !important;
    padding: 6px !important;
    gap: 3px !important;
    border-radius: 16px !important;
  }

  .intensity-legend h2 {
    display: block !important;
    margin: 0 0 4px !important;
    writing-mode: horizontal-tb !important;
    text-align: center !important;
    font-size: 0.72rem !important;
  }

  .intensity-legend .legend-item,
  .intensity-legend li {
    width: 40px !important;
    min-width: 40px !important;
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
  }
}

#settings-appearance-button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: auto !important;
}

#settings-appearance-button > * {
  pointer-events: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  width: 22px !important;
  height: 22px !important;
  border: 4px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  width: 7px !important;
  height: 7px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow:
    0 -12px 0 -3px currentColor,
    0 12px 0 -3px currentColor,
    12px 0 0 -3px currentColor,
    -12px 0 0 -3px currentColor !important;
}

.settings-detail-panel .push-history-list {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 0 calc(var(--bottom-nav-height) + 80px) !important;
}

.settings-detail-panel .push-history-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 12px !important;
}

.settings-detail-panel .push-history-content {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

#settings-push-history-panel.settings-detail-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#settings-push-history-panel.settings-detail-panel > .push-confirm-panel[data-push-panel="history"] {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#settings-push-history-panel.settings-detail-panel .push-history-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

.settings-detail-panel .push-history-heading {
  display: grid !important;
  gap: 6px !important;
}

.settings-detail-panel .push-history-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.settings-detail-panel .push-history-title,
.settings-detail-panel .push-history-content p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.55 !important;
}

.settings-detail-panel .push-history-read-state {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 48px !important;
  max-width: 64px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

.settings-detail-panel .push-history-delete {
  position: static !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 110px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  opacity: 1 !important;
  transform: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 4px !important;
  top: 4px !important;
  width: 17px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, currentColor 27% 43%, transparent 44%),
    conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 42deg, currentColor 42deg 54deg, transparent 54deg 84deg, currentColor 84deg 96deg, transparent 96deg 126deg, currentColor 126deg 138deg, transparent 138deg 168deg, currentColor 168deg 180deg, transparent 180deg 210deg, currentColor 210deg 222deg, transparent 222deg 252deg, currentColor 252deg 264deg, transparent 264deg 294deg, currentColor 294deg 306deg, transparent 306deg 336deg, currentColor 336deg 360deg) !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
}

/* Final current-turn overrides. */
.history-epicenter-list,
.history-epicenter-more {
  display: none !important;
}

.history-stats-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.history-stats-count {
  align-self: center !important;
}

.learning-intensity-badge {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
}

.learning-intensity-item {
  grid-template-columns: 38px minmax(0, 1fr) !important;
}

#setup-panel .simulation-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 12px 0 10px !important;
  order: 50 !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  display: inline-grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 42px !important;
}

#setup-panel .simulation-start-sheet-host {
  order: 60 !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 12px !important;
  width: 20px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  clip-path: polygon(0 50%, 10% 50%, 17% 0, 26% 100%, 35% 0, 44% 100%, 53% 0, 62% 100%, 71% 0, 80% 100%, 90% 50%, 100% 50%, 100% 100%, 0 100%) !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  display: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 2px !important;
  top: 2px !important;
  width: 21px !important;
  height: 21px !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 10px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: none !important;
    padding: 7px !important;
    gap: 4px !important;
    border-radius: 18px !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend .legend-item,
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend li {
    width: 46px !important;
    min-width: 46px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.92rem !important;
  }

  #info-full-panel .station-info-toolbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: start !important;
  }
}

#bottom-info-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  inset: 5px !important;
  width: auto !important;
  height: auto !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -5px 0 -1px currentColor !important;
  transform: translate(-50%, -25%) !important;
}

/* Current turn: preset picker spacing, quick buttons, and unified tab icons. */
#setup-panel .simulation-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 12px 0 10px !important;
  order: 50 !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(38, 217, 255, 0.34) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(38, 217, 255, 0.22), rgba(38, 217, 255, 0.08)) !important;
  color: #8ff4ff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 0 18px rgba(38, 217, 255, 0.12) !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button span,
#setup-panel .simulation-quick-actions .sheet-speech-toggle strong {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#setup-panel .simulation-quick-actions .sheet-speech-toggle > span,
#setup-panel .simulation-quick-actions .sheet-speech-toggle > span::after {
  display: none !important;
  content: "" !important;
}

#setup-panel .simulation-quick-actions .sheet-speech-toggle.is-muted {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)) !important;
  color: rgba(248, 250, 252, 0.72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11) !important;
}

.preset-picker-overlay {
  align-items: flex-start !important;
  padding-top: max(78px, env(safe-area-inset-top) + 72px) !important;
}

.preset-picker-dialog {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 62px !important;
  max-height: calc(100dvh - 104px - env(safe-area-inset-bottom)) !important;
}

.preset-picker-head {
  position: static !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.preset-picker-head h2,
.preset-picker-description {
  display: none !important;
}

.preset-picker-close {
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  z-index: 5 !important;
}

.preset-picker-table-wrap {
  margin-top: 0 !important;
  max-height: calc(100dvh - 190px - env(safe-area-inset-bottom)) !important;
}

.bottom-tab-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after,
#bottom-history-tab .bottom-tab-icon::before,
#bottom-history-tab .bottom-tab-icon::after,
#bottom-info-tab .bottom-tab-icon::before,
#bottom-info-tab .bottom-tab-icon::after,
#bottom-learning-tab .bottom-tab-icon::before,
#bottom-learning-tab .bottom-tab-icon::after,
#bottom-settings-tab .bottom-tab-icon::before,
#bottom-settings-tab .bottom-tab-icon::after {
  position: absolute !important;
  display: block !important;
  content: "" !important;
  font-size: 0 !important;
  font-family: inherit !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 11px !important;
  width: 18px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  clip-path: polygon(0 50%, 10% 50%, 17% 0, 26% 100%, 35% 0, 44% 100%, 53% 0, 62% 100%, 71% 0, 80% 100%, 90% 50%, 100% 50%, 100% 100%, 0 100%) !important;
  box-shadow: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  display: none !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 5px !important;
  width: 16px !important;
  height: 14px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 8px !important;
  top: 9px !important;
  width: 8px !important;
  height: 2px !important;
  background: currentColor !important;
  box-shadow: 0 4px 0 currentColor !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -5px 0 -1px currentColor !important;
  transform: translate(-50%, -25%) !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 2px !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 25%, currentColor 26% 42%, transparent 43%),
    conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 42deg, currentColor 42deg 54deg, transparent 54deg 84deg, currentColor 84deg 96deg, transparent 96deg 126deg, currentColor 126deg 138deg, transparent 138deg 168deg, currentColor 168deg 180deg, transparent 180deg 210deg, currentColor 210deg 222deg, transparent 222deg 252deg, currentColor 252deg 264deg, transparent 264deg 294deg, currentColor 294deg 306deg, transparent 306deg 336deg, currentColor 336deg 360deg) !important;
  box-shadow: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 9px !important;
  top: 9px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
}

/* Current turn final fixes: disabled wait, info toolbar sizing, in-sheet quick buttons. */
#simulation-start.sheet-simulation-start:disabled,
body #simulation-start.sheet-simulation-start:disabled {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.44), rgba(30, 41, 59, 0.58)) !important;
  color: rgba(203, 213, 225, 0.58) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.82 !important;
  filter: saturate(0.45) !important;
}

#setup-panel .simulation-quick-actions {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  margin: 12px 0 10px !important;
  transform: none !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  grid-template-columns: 1fr !important;
  place-items: center !important;
  text-align: center !important;
}

#setup-panel .simulation-quick-actions .sheet-speech-toggle:not(.is-muted) {
  border-color: rgba(38, 217, 255, 0.48) !important;
  background: linear-gradient(180deg, rgba(38, 217, 255, 0.28), rgba(38, 217, 255, 0.1)) !important;
  color: #8ff4ff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 0 20px rgba(38, 217, 255, 0.2) !important;
}

#info-full-panel .station-info-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding-inline: 20px !important;
}

#info-full-panel #station-info-region,
#info-full-panel #station-info-affiliation {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 16px !important;
}

#info-full-panel .station-info-search-wrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

#info-full-panel #station-info-filter {
  width: 100% !important;
}

#info-full-panel #station-info-count {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 1px !important;
  top: 1px !important;
  width: 22px !important;
  height: 22px !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 9px !important;
  top: 9px !important;
}

/* Preset picker / compact info toolbar follow-up fixes. */
.preset-picker-overlay {
  padding-top: max(106px, env(safe-area-inset-top) + 96px) !important;
}

.preset-picker-dialog {
  width: min(92vw, 680px) !important;
  padding: 64px 14px 14px !important;
  max-height: calc(100dvh - 128px - env(safe-area-inset-bottom)) !important;
}

.preset-picker-close {
  left: 14px !important;
  top: 12px !important;
  width: 40px !important;
  height: 40px !important;
}

.preset-picker-head {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 2px 8px !important;
}

.preset-filter-input {
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 15px !important;
  font-size: 0.9rem !important;
}

.preset-sort-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.preset-sort-choice {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 6px !important;
  border-radius: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.preset-picker-table-wrap {
  margin-top: 6px !important;
  max-height: calc(100dvh - 244px - env(safe-area-inset-bottom)) !important;
}

@media (max-width: 720px) {
  .preset-picker-overlay {
    padding-top: max(104px, env(safe-area-inset-top) + 94px) !important;
  }

  .preset-picker-dialog {
    width: calc(100vw - 18px) !important;
    padding-inline: 10px !important;
  }

  .preset-sort-choice {
    font-size: 0.68rem !important;
  }
}

#setup-panel .simulation-quick-actions,
#setup-panel .simulation-start-sheet-host {
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
}

#setup-panel .simulation-quick-actions {
  margin: 14px 0 10px !important;
}

#info-full-panel .station-info-toolbar {
  gap: 8px 10px !important;
  padding: 10px 18px 8px !important;
}

#info-full-panel #station-info-region,
#info-full-panel #station-info-affiliation {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  font-size: 0.86rem !important;
}

#info-full-panel #station-info-filter {
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 0.84rem !important;
}

#info-full-panel #station-info-count {
  margin-top: -2px !important;
  line-height: 1 !important;
}

/* Follow-up: keep simulation legend independent, refine preset picker spacing and tab icons. */
body[data-active-bottom-tab="earthquake-tab"] .intensity-legend,
body[data-active-bottom-tab="earthquake-tab"] body .intensity-legend {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 14000 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  width: min(calc(100vw - 22px), 560px) !important;
  max-width: calc(100vw - 22px) !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body[data-active-bottom-tab="earthquake-tab"] .intensity-legend h2 {
  display: none !important;
}

body[data-active-bottom-tab="earthquake-tab"] .intensity-scale {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 0 !important;
  font-size: 0.88rem !important;
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: 46px !important;
    max-width: 46px !important;
    transform: none !important;
    border-radius: 14px !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale {
    grid-template-columns: 1fr !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 0.82rem !important;
  }
}

.preset-picker-overlay {
  z-index: 13000 !important;
  align-items: flex-start !important;
  padding-top: max(58px, env(safe-area-inset-top) + 54px) !important;
}

.preset-picker-dialog {
  width: min(calc(100vw - 28px), 620px) !important;
  margin-top: 0 !important;
  padding: 58px 12px 12px !important;
  max-height: calc(100dvh - 72px - env(safe-area-inset-bottom)) !important;
}

.preset-picker-close {
  left: 14px !important;
  top: 12px !important;
  width: 38px !important;
  height: 38px !important;
}

.preset-picker-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 0 0 8px !important;
}

.preset-filter-input {
  height: 39px !important;
  min-height: 39px !important;
}

.preset-sort-buttons {
  gap: 8px !important;
}

.preset-sort-choice {
  min-height: 36px !important;
}

.preset-picker-table-wrap {
  max-height: calc(100dvh - 226px - env(safe-area-inset-bottom)) !important;
}

@media (max-width: 520px) {
  .preset-picker-table td:nth-child(2),
  .preset-picker-table th:nth-child(2) {
    width: 104px !important;
    min-width: 104px !important;
  }
}

#setup-panel .simulation-quick-actions {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 14px 0 12px !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle {
  min-height: 48px !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

.bottom-tabs .bottom-tab-icon {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
}

#earthquake-tab .bottom-tab-icon::before,
#earthquake-tab .bottom-tab-icon::after,
#bottom-info-tab .bottom-tab-icon::before,
#bottom-info-tab .bottom-tab-icon::after,
#bottom-settings-tab .bottom-tab-icon::before,
#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  background: transparent !important;
  clip-path: none !important;
}

#earthquake-tab .bottom-tab-icon::before {
  left: 2px !important;
  top: 5px !important;
  width: 20px !important;
  height: 14px !important;
  border: 0 !important;
  background:
    linear-gradient(currentColor, currentColor) 0 8px / 4px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 8px / 3px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 7px 4px / 3px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 12px / 3px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 13px 2px / 3px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 8px / 4px 2px no-repeat !important;
  transform: none !important;
}

#earthquake-tab .bottom-tab-icon::after {
  display: none !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  left: 4px !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border: 2.2px solid currentColor !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  left: 11px !important;
  top: 9px !important;
  width: 2.6px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -5px 0 -0.7px currentColor !important;
  transform: none !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border: 3px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow:
    0 -4px 0 -2px currentColor,
    0 4px 0 -2px currentColor,
    4px 0 0 -2px currentColor,
    -4px 0 0 -2px currentColor !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  left: 9px !important;
  top: 9px !important;
  width: 6px !important;
  height: 6px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Current request: status pills, non-fixed simulation controls, preset close, stats card cleanup. */
.settings-status-card .settings-notification-row strong,
#settings-push-status,
#settings-location-status {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 32px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.settings-status-card .settings-notification-row strong[data-state="off"],
#settings-push-status[data-state="off"],
#settings-location-status[data-state="off"] {
  border-color: rgba(255, 69, 96, 0.64) !important;
  background: rgba(255, 69, 96, 0.18) !important;
  color: #ff6b7f !important;
}

.settings-status-card .settings-notification-row strong[data-state="on"],
#settings-push-status[data-state="on"],
#settings-location-status[data-state="on"] {
  border-color: rgba(36, 211, 112, 0.62) !important;
  background: rgba(36, 211, 112, 0.18) !important;
  color: #6df29b !important;
}

#setup-panel .simulation-quick-actions,
#setup-panel .simulation-start-sheet-host,
#setup-panel #simulation-start.sheet-simulation-start {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
}

#setup-panel .simulation-quick-actions,
#setup-panel .simulation-start-sheet-host {
  width: 100% !important;
  margin-inline: 0 !important;
}

.preset-picker-overlay {
  justify-content: center !important;
  align-items: flex-start !important;
}

.preset-picker-dialog {
  margin-inline: auto !important;
}

.preset-picker-close,
#preset-picker-close {
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: max(94px, calc(env(safe-area-inset-top) + 94px)) !important;
  width: 38px !important;
  height: 38px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  z-index: 15050 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(10, 12, 16, 0.92) !important;
}

.preset-picker-close::before,
.preset-picker-close::after {
  background: rgba(255, 255, 255, 0.92) !important;
}

.history-stats-sheet-head,
.history-stats-card::before,
.history-stats-card-main::before {
  display: none !important;
  content: none !important;
}

.history-stats-card-main span {
  color: rgba(255, 255, 255, 0.7) !important;
}

#bottom-history-tab .bottom-tab-icon {
  opacity: 1 !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  background: transparent !important;
  border-color: currentColor !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Info tab compact toolbar: restore small dropdowns and keep count clear. */
#info-full-panel .station-info-toolbar {
  grid-template-columns: auto auto !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 8px 10px !important;
  padding: 10px 14px 8px !important;
}

#info-full-panel #station-info-region,
#info-full-panel #station-info-affiliation {
  width: auto !important;
  min-width: 128px !important;
  max-width: 184px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 32px 0 12px !important;
  border-radius: 14px !important;
  font-size: 0.82rem !important;
}

#info-full-panel .station-info-search-wrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#info-full-panel #station-info-filter {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
}

#info-full-panel #station-info-count {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  width: auto !important;
  margin-top: 0 !important;
  padding-right: 2px !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

#history-statistics-load:disabled,
#history-statistics-load[aria-disabled="true"] {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: rgba(226, 232, 240, 0.42) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  filter: saturate(0.45) !important;
}

.history-stats-empty.history-stats-empty-static {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
}

.preset-picker-head {
  gap: 8px !important;
  padding-top: 34px !important;
}

.preset-filter-input {
  height: 30px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

.preset-sort-buttons {
  gap: 8px !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

.preset-sort-choice {
  height: 30px !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

.history-stats-card {
  min-height: 112px !important;
  align-items: center !important;
  padding: 18px 18px 24px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.history-stats-card-main {
  align-self: center !important;
}

.history-stats-count {
  align-self: center !important;
}

@media (max-width: 420px) {
  #info-full-panel .station-info-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #info-full-panel #station-info-region,
  #info-full-panel #station-info-affiliation {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Strong final fix: info tab controls match history search height and count never overlaps. */
#info-full-panel .station-info-toolbar {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas:
    "region affiliation"
    "search search"
    "count count" !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 7px 9px !important;
  padding: 8px 12px 7px !important;
}

#info-full-panel #station-info-region {
  grid-area: region !important;
}

#info-full-panel #station-info-affiliation {
  grid-area: affiliation !important;
}

#info-full-panel #station-info-region,
#info-full-panel #station-info-affiliation {
  width: auto !important;
  min-width: 120px !important;
  max-width: 168px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 5px 28px 5px 9px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

#info-full-panel .station-info-search-wrap {
  grid-area: search !important;
  position: relative !important;
  display: block !important;
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
}

#info-full-panel #station-info-filter {
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
  box-sizing: border-box !important;
}

#info-full-panel #station-info-count {
  grid-area: count !important;
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 5px 2px 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  z-index: auto !important;
  transform: none !important;
}

@media (max-width: 420px) {
  #info-full-panel .station-info-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #info-full-panel #station-info-region,
  #info-full-panel #station-info-affiliation {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #info-full-panel .station-info-search-wrap {
    width: 100% !important;
  }
}

/* Strong final statistics card frame: enclose the whole row, not just the upper half. */
#history-full-panel #history-stats-list .history-stats-card,
body.history-map-mode #history-full-panel #history-stats-list .history-stats-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  align-items: center !important;
  column-gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 116px !important;
  min-height: 116px !important;
  max-height: none !important;
  padding: 20px 18px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.034)) !important;
  overflow: hidden !important;
}

#history-full-panel #history-stats-list .history-stats-card-main,
body.history-map-mode #history-full-panel #history-stats-list .history-stats-card-main {
  align-self: center !important;
  justify-self: stretch !important;
}

#history-full-panel #history-stats-list .history-stats-count,
body.history-map-mode #history-full-panel #history-stats-list .history-stats-count {
  align-self: center !important;
  justify-self: end !important;
}

/* Statistics selected-card view should fit on one screen without inner bottom scroll. */
body.history-map-mode #history-full-panel #history-stats-list {
  overflow-y: hidden !important;
  padding-bottom: 8px !important;
  max-height: none !important;
}

body.history-map-mode #history-full-panel {
  overflow: hidden !important;
}

/* Current request: lift preset controls only, and use a CSS globe for the info tab. */
.preset-picker-head {
  transform: translateY(-30px) !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.preset-sort-buttons,
.preset-sort-choice {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.preset-sort-buttons::before,
.preset-sort-buttons::after,
.preset-sort-choice::before,
.preset-sort-choice::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.preset-picker-table-wrap {
  border-top: 0 !important;
}

.preset-picker-table {
  border-top: 0 !important;
}

.preset-picker-table tbody tr:first-child td {
  border-top: 0 !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

#bottom-info-tab .bottom-tab-icon::after {
  left: 7px !important;
  top: 3px !important;
  width: 10px !important;
  height: 18px !important;
  border: 1.5px solid currentColor !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Empty-state polish: remove info empty frame; center history prompt between controls and tabs. */
#info-full-panel .station-info-empty {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 8px !important;
}

body.history-map-mode #history-full-panel .history-stats-empty.history-stats-empty-static {
  min-height: calc(100% - 44px) !important;
  align-self: stretch !important;
  place-content: center !important;
  transform: translateY(10px) !important;
}

/* Current request: pencil learning icon, easier appearance-row hit target, and single preset close glyph. */
#bottom-learning-tab .bottom-tab-icon::before {
  left: 11px !important;
  top: 2px !important;
  width: 5px !important;
  height: 20px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px 3px 1px 1px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(38deg) !important;
  clip-path: none !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 9px !important;
  top: 19px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 7px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(38deg) !important;
}

.settings-menu-row,
#settings-appearance-button {
  position: relative !important;
  z-index: 6 !important;
}

#settings-appearance-button {
  min-height: 52px !important;
  cursor: pointer !important;
}

.settings-inline-panel.hidden {
  pointer-events: none !important;
}

/* Current request: move preset close 20px up, restore book icon, and draw a single CSS gear. */
.preset-picker-close,
#preset-picker-close {
  top: max(74px, calc(env(safe-area-inset-top) + 74px)) !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 5px !important;
  width: 18px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 2px 6px 6px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
}

/* Final community-post placement and tag polish. */
body.community-map-mode #map::after {
  position: fixed !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 4px) !important;
  z-index: 12490 !important;
}

body.community-map-mode .community-post-button {
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 28px) !important;
  gap: 8px !important;
  min-width: 92px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-color: rgba(64, 224, 255, 0.78) !important;
  background: linear-gradient(180deg, rgba(20, 92, 104, 0.96), rgba(3, 24, 31, 0.96)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.44), inset 0 1px rgba(255, 255, 255, 0.2) !important;
}

.community-post-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid currentColor !important;
  border-radius: 6px !important;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat !important;
  box-sizing: border-box !important;
}

.preset-picker-close,
#preset-picker-close,
.community-post-close,
.community-post-detail-close {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.community-post-custom-tag {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 169, 64, 0.34) !important;
  border-radius: 14px !important;
  background: rgba(255, 169, 64, 0.08) !important;
  color: #fff !important;
  padding: 9px 12px !important;
  font: 800 0.9rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.community-post-optional-tags label:has(input:checked) {
  border-color: rgba(255, 169, 64, 0.88) !important;
  background: rgba(168, 92, 18, 0.72) !important;
  color: #ffd3a0 !important;
}

.community-post-detail-tags span[data-community-tag-pill="optional"],
.community-post-popup-tags span[data-community-tag-pill="optional"] {
  background: rgba(255, 169, 64, 0.22) !important;
  color: #ffd3a0 !important;
}

/* Settings detail scroll isolation: keep the page fixed and let only each detail body scroll. */
.settings-menu-sheet.settings-detail-open .settings-menu-list {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.settings-menu-sheet.settings-detail-open .settings-inline-panel.settings-detail-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  padding: 0 !important;
  scroll-padding-bottom: 0 !important;
}

.settings-menu-sheet.settings-detail-open .settings-detail-panel > :not(.settings-detail-head) {
  align-self: stretch !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.settings-menu-sheet.settings-detail-open .settings-detail-panel .source-info-overlay-content,
.settings-menu-sheet.settings-detail-open .settings-detail-panel .settings-privacy-content,
.settings-menu-sheet.settings-detail-open .settings-detail-panel .settings-feedback-form,
.settings-menu-sheet.settings-detail-open .settings-detail-panel .push-confirm-panel:not([data-push-panel="history"]),
.settings-menu-sheet.settings-detail-open .settings-detail-panel .settings-admin-embedded,
.settings-menu-sheet.settings-detail-open .settings-detail-panel .settings-appearance-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch !important;
}

#settings-push-history-panel.settings-detail-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  overscroll-behavior: none !important;
}

#settings-push-history-panel.settings-detail-panel > .push-confirm-panel[data-push-panel="history"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#settings-push-history-panel.settings-detail-panel .push-history-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Community post sheet: keep the whole overlay fixed; only the form body scrolls. */
.community-post-overlay {
  place-items: stretch center !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  padding: max(8px, env(safe-area-inset-top)) 14px 10px !important;
}

.community-post-sheet {
  align-self: stretch !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(560px, 100%) !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.community-post-head {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
}

.community-post-form {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch !important;
}

/* App-wide back buttons: replace close-X visuals with a larger chevron. */
.source-info-close,
.preset-picker-close,
#preset-picker-close,
.settings-menu-close,
.community-post-close,
.community-post-detail-close,
.settings-detail-back,
.tool-page-back,
.community-account-screen-back {
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
}

.source-info-close::before,
.source-info-close::after,
.preset-picker-close::before,
.preset-picker-close::after,
#preset-picker-close::before,
#preset-picker-close::after {
  content: none !important;
  display: none !important;
}

.preset-picker-close,
#preset-picker-close {
  width: 42px !important;
  height: 42px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 2.3rem !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

.settings-detail-back,
.tool-page-back,
.community-account-screen-back {
  font-size: 2.35rem !important;
}

.community-post-close,
.community-post-detail-close,
.settings-menu-close,
.source-info-close {
  font-size: 2.3rem !important;
}

/* Preset/post back buttons are chevrons only, without the old circular frame. */
.preset-picker-close,
#preset-picker-close,
.community-post-close,
.community-post-detail-close {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Community optional tags: orange secondary chips. */
.community-post-custom-tag {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 169, 64, 0.34) !important;
  border-radius: 14px !important;
  background: rgba(255, 169, 64, 0.08) !important;
  color: #fff !important;
  padding: 9px 12px !important;
  font: 800 0.9rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.community-post-optional-tags label:has(input:checked) {
  border-color: rgba(255, 169, 64, 0.88) !important;
  background: rgba(168, 92, 18, 0.72) !important;
  color: #ffd3a0 !important;
}

.community-post-detail-tags span[data-community-tag-pill="optional"],
.community-post-popup-tags span[data-community-tag-pill="optional"] {
  background: rgba(255, 169, 64, 0.22) !important;
  color: #ffd3a0 !important;
}

body.community-map-mode #map::after {
  position: fixed !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 4px) !important;
  z-index: 12490 !important;
}

body.community-map-mode .community-post-button {
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 28px) !important;
  gap: 8px !important;
  min-width: 92px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-color: rgba(64, 224, 255, 0.78) !important;
  background: linear-gradient(180deg, rgba(20, 92, 104, 0.96), rgba(3, 24, 31, 0.96)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.44), inset 0 1px rgba(255, 255, 255, 0.2) !important;
}

.community-post-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid currentColor !important;
  border-radius: 6px !important;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat !important;
  box-sizing: border-box !important;
}

/* Simulation sheet: default peek is about one third of max, with a smooth closed state. */
#setup-panel.sim-panel {
  height: min(72svh, 700px) !important;
  max-height: min(72svh, 700px) !important;
  transform: translate(-50%, 0) !important;
  transition:
    height 220ms cubic-bezier(0.22, 0.9, 0.24, 1),
    max-height 220ms cubic-bezier(0.22, 0.9, 0.24, 1),
    transform 220ms cubic-bezier(0.22, 0.9, 0.24, 1) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  height: min(72svh, 700px) !important;
  max-height: min(72svh, 700px) !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.setup-menu-closed,
#setup-panel.sim-panel[data-sheet-state="collapsed"] {
  height: min(24svh, 233px) !important;
  max-height: min(24svh, 233px) !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.sim-panel[data-sheet-state="closed"] {
  height: 56px !important;
  max-height: 56px !important;
  transform: translate(-50%, 0) !important;
}

#setup-panel.sim-panel.is-dragging {
  height: var(--sheet-drag-height, min(24svh, 233px)) !important;
  max-height: var(--sheet-drag-height, min(24svh, 233px)) !important;
  transform: translate(-50%, 0) !important;
  transition: none !important;
}

#setup-panel.sim-panel[data-sheet-state="closed"] .sim-panel-scroll {
  overflow: hidden !important;
}

#setup-panel .sim-panel-scroll {
  max-height: calc(100% - 32px) !important;
}

.preset-sort-buttons {
  align-items: stretch !important;
}

.preset-sort-choice {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.preset-sort-choice[data-preset-sort^="magnitude"] {
  padding-inline: 2px !important;
  font-size: 0.72rem !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
}

/* Final tab role: 投稿.  Lightweight CSS-only post icon. */
#bottom-history-tab .bottom-tab-icon {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 4px !important;
  width: 18px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
}

#bottom-history-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 7px !important;
  width: 2px !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: -4px 4px 0 -1px currentColor, 4px 4px 0 -1px currentColor, 0 0 0 0 currentColor !important;
  transform: rotate(90deg) !important;
  clip-path: none !important;
}

#bottom-history-tab .bottom-tab-icon {
  background:
    linear-gradient(currentColor, currentColor) 12px 8px / 2px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 8px 12px / 10px 2px no-repeat !important;
}

/* Current request: compact community post UI and bottom-sheet post viewer. */
body.community-map-mode #map::after {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) - 6px) !important;
}

.community-post-button {
  min-width: 64px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 64px) !important;
}

body.community-post-detail-open .community-post-button {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + min(48vh, 390px) + 18px) !important;
}

.community-post-sheet {
  max-height: calc(100vh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 18px) !important;
}

.community-post-form {
  gap: 12px !important;
}

.community-post-location-preview {
  position: relative;
  min-height: 74px;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 38px 38px,
    radial-gradient(circle at 68% 36%, rgba(74, 223, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(32, 38, 41, 0.96), rgba(8, 11, 13, 0.96));
}

.community-post-location-preview::before {
  content: "";
  position: absolute;
  inset: 16px -20px auto -20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    60px 24px 0 rgba(255, 255, 255, 0.10),
    170px 42px 0 rgba(255, 255, 255, 0.08),
    270px 12px 0 rgba(255, 255, 255, 0.08);
  transform: rotate(-8deg);
}

.community-post-location-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(0.76);
  opacity: 0.42;
}

.community-post-location-dot.is-set {
  border-color: #ffffff;
  background: #38bdf8;
  box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.18);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.community-post-location-dot.is-set.is-vague {
  box-shadow: 0 0 0 18px rgba(64, 224, 255, 0.14);
}

.community-post-location-preview-text {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.community-post-location-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.community-post-location-actions button {
  min-height: 36px !important;
  border-radius: 999px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

.community-post-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.community-post-tags label {
  min-height: 32px !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

.community-post-retention-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.community-post-retention-options label {
  position: relative;
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.community-post-retention-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.community-post-retention-options label:has(input:checked) {
  border-color: rgba(56, 189, 248, 0.86);
  background: rgba(14, 116, 144, 0.72);
  color: #ffffff;
}

html[data-resolved-theme="light"] .community-post-retention-options label {
  border-color: #94a3b8;
  background: #e8eef4;
  color: #334155;
}

html[data-resolved-theme="light"] .community-post-retention-options label:has(input:checked) {
  border-color: #0284c7;
  background: #0e7490;
  color: #ffffff;
}

.community-media-picker {
  min-height: 118px !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  gap: 5px;
  text-align: center;
}

.community-media-picker span {
  font-size: 14px;
}

.community-media-picker small {
  display: block;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
}

.community-post-detail-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  z-index: 25500;
  height: min(48vh, 390px);
  overflow: auto;
  padding: 38px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(10, 12, 13, 0.96), rgba(0, 0, 0, 0.98));
  color: #fff;
  box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.58);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.community-post-detail-sheet.hidden {
  display: none;
}

.community-post-detail-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 800 20px/1 system-ui, sans-serif;
  display: grid;
  place-items: center;
  padding: 0;
}

.community-post-detail-body {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}

.community-post-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-post-detail-tags span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(64, 224, 255, 0.16);
  color: #8ff6ff;
  font-size: 12px;
  font-weight: 900;
}

.community-post-detail-body img,
.community-post-detail-body video {
  width: 100%;
  max-height: 180px;
  border-radius: 16px;
  object-fit: cover;
}

.community-post-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.community-post-detail-meta div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.community-post-detail-meta dt {
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  font-weight: 800;
}

.community-post-detail-meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
}

.community-post-detail-body p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.65;
}

.community-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.community-post-author > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  font-size: 20px;
}

.community-profile-icon img,
.community-post-author-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.community-post-author-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  font-size: 18px;
  font-weight: 900;
}

.community-post-author strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.community-post-author-actions {
  margin-left: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.community-post-like-button,
.community-post-follow-button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0 11px;
  font: 900 12px/1 system-ui, sans-serif;
}

.community-post-like-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffb5c2;
  font-size: 20px;
}

.community-post-like-button span {
  width: auto;
  height: auto;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.community-post-like-button.is-liked {
  border-color: rgba(255, 91, 122, 0.55);
  background: rgba(142, 24, 53, 0.4);
  color: #ff5b7a;
}

.community-post-follow-button {
  border-color: rgba(64, 224, 255, 0.5);
  color: #8ff6ff;
}

.community-post-follow-button.is-following {
  background: rgba(17, 111, 126, 0.48);
}

.community-post-like-button:disabled,
.community-post-follow-button:disabled {
  opacity: 0.55;
}

.community-account-required {
  position: fixed;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0;
  z-index: 11800;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(28, 105, 122, 0.25), transparent 44%),
    rgba(0, 0, 0, 0.72);
  color: #fff;
}

.community-account-required.hidden {
  display: none;
}

.community-account-required-card {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 28px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(21, 24, 26, 0.96), rgba(5, 7, 8, 0.97));
  text-align: center;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.46);
}

.community-account-required-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(64, 224, 255, 0.18);
  color: #7ff4ff;
  font-size: 30px;
  font-weight: 900;
}

.community-account-required-card h2,
.community-account-required-card p {
  margin: 0;
}

.community-account-required-card h2 {
  font-size: 22px;
}

.community-account-required-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.community-account-required-card button,
.community-account-panel button {
  min-height: 42px;
  border: 1px solid rgba(64, 224, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 83, 95, 0.72);
  color: #8ff6ff;
  padding: 0 18px;
  font-weight: 900;
}

.community-account-panel {
  order: -10;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.community-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 20%, rgba(64, 224, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

.community-profile-card.is-empty {
  border-style: dashed;
}

.community-profile-icon {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 28px;
  font-weight: 900;
}

.community-profile-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.community-profile-main span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 800;
}

.community-profile-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
}

.community-profile-follow-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}

.community-profile-main .community-profile-follow-counts button {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  padding: 2px 0;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.community-profile-follow-counts b {
  color: #fff;
  font-size: 13px;
}

.community-profile-follow-counts button:active {
  color: #8ff6ff;
}

.community-profile-follow-counts button:disabled {
  color: #fff;
  opacity: 1;
  cursor: default;
  text-decoration: none;
}

.community-account-create-form,
.community-account-login-form,
.community-account-edit-form {
  display: grid;
  gap: 10px;
}

.community-account-create-form label,
.community-account-login-form label,
.community-account-edit-form label {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.community-account-create-form input,
.community-account-login-form input,
.community-account-edit-form input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  padding: 0 12px;
  font: 800 14px/1 system-ui, sans-serif;
}

.community-account-confirm {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.community-account-confirm input {
  width: 18px;
  min-height: 18px;
}

.community-account-login-form {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.community-account-note,
.community-account-status {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.6;
}

.community-profile-main em {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(64, 224, 255, 0.16);
  color: #8ff6ff;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.community-account-button-row,
.community-account-danger-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.community-account-wide-button {
  width: 100%;
}

.community-account-danger-actions {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.community-account-danger-actions button:last-child {
  border-color: rgba(255, 76, 98, 0.54);
  background: rgba(120, 18, 35, 0.62);
  color: #ffb7c2;
}

.community-account-screen {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: #050607;
  color: #fff;
  overscroll-behavior: contain;
}

.community-account-screen.hidden {
  display: none;
}

.community-account-screen-back {
  position: static;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 900 32px/1 system-ui, sans-serif;
}

.community-account-screen-head h2 {
  margin: 0;
  color: inherit;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 900;
}

.community-account-screen-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.settings-menu-sheet.community-account-screen-open .settings-menu-list > :not(#community-account-screen) {
  visibility: hidden;
}

.settings-menu-sheet.community-account-screen-open > :not(#community-account-screen) {
  visibility: hidden;
}

.community-account-wide-button::after,
#settings-admin-button span:first-child::after {
  content: " [管理者のみ]";
  display: inline-block;
  margin-left: 0.45em;
  color: #8ff6ff;
  font-size: 0.74em;
  font-weight: 900;
  vertical-align: middle;
}

.community-account-screen-form {
  display: grid;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}

.community-account-screen-form label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.community-account-screen-form input[type="text"],
.community-account-screen-form input[type="password"] {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  padding: 0 13px;
  font: 900 15px/1 system-ui, sans-serif;
}

.community-icon-picker {
  min-height: 118px;
  place-items: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.community-icon-picker input {
  max-width: 100%;
}

.community-account-screen-form button,
.community-post-delete-button {
  min-height: 44px;
  border: 1px solid rgba(64, 224, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 83, 95, 0.72);
  color: #8ff6ff;
  font-weight: 900;
}

.community-post-delete-button {
  border-color: rgba(255, 76, 98, 0.56);
  background: rgba(120, 18, 35, 0.68);
  color: #ffb7c2;
}

.community-account-screen-status {
  max-width: 520px;
  margin: 14px auto 0;
  color: #8ff6ff;
  font-size: 13px;
}

.community-account-list {
  display: grid;
  gap: 9px;
  max-width: 620px;
  margin: 0 auto;
}

.community-account-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.community-account-list-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-account-list-item span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.community-account-list-item em {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(64, 224, 255, 0.16);
  color: #8ff6ff;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.community-connection-list {
  display: grid;
  gap: 9px;
  max-width: 620px;
  margin: 0 auto;
}

.community-connection-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.community-connection-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  font-size: 22px;
  font-weight: 900;
}

.community-connection-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-connection-name {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
}

.community-connection-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-connection-name span {
  width: max-content;
  color: #8ff6ff;
  font-size: 10px;
  font-weight: 900;
}

.community-connection-follow {
  min-height: 36px;
  flex: 0 0 auto;
  border: 1px solid rgba(64, 224, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 83, 95, 0.72);
  color: #8ff6ff;
  padding: 0 13px;
  font-weight: 900;
}

.community-connection-follow.is-following {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}

.community-connection-follow:disabled {
  opacity: 0.55;
}

.community-connection-empty {
  margin: 24px 0;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

/* Current request fixes: source-search dropdown layout, single post tag, colored post markers, icon preview. */
body.community-map-mode #map::after {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) - 12px) !important;
}

#history-full-panel .history-stats-toolbar {
  overflow: visible !important;
}

#history-full-panel .history-stats-sort-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 112px) 20px minmax(0, 112px) minmax(64px, auto) !important;
  align-items: center !important;
  column-gap: 6px !important;
}

#history-full-panel .history-stats-sort-row label {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 112px) !important;
  align-items: center !important;
}

#history-full-panel .history-stats-sort-row label:nth-of-type(2) {
  grid-template-columns: minmax(0, 112px) !important;
}

#history-full-panel .history-stats-sort-row label + span {
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
}

#history-full-panel .history-stats-sort-row select,
#history-start-year,
#history-end-year {
  width: 112px !important;
  min-width: 0 !important;
  max-width: 112px !important;
}

#history-statistics-load {
  min-width: 64px !important;
  padding-inline: 10px !important;
}

.community-post-tags label {
  user-select: none;
}

.community-post-tags input[type="radio"] + span::before,
.community-post-tags input[type="checkbox"] + span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  vertical-align: 1px;
}

.community-post-tags label:has(input[value="weather"]:checked) {
  border-color: rgba(70, 190, 255, 0.82) !important;
  background: rgba(12, 94, 139, 0.72) !important;
  color: #aee8ff !important;
}

.community-post-tags label:has(input[value="disaster"]:checked) {
  border-color: rgba(255, 86, 98, 0.82) !important;
  background: rgba(126, 25, 32, 0.72) !important;
  color: #ffc6cc !important;
}

.community-post-tags label:has(input[value="earthquake"]:checked) {
  border-color: rgba(86, 230, 142, 0.82) !important;
  background: rgba(24, 109, 57, 0.72) !important;
  color: #c3ffd9 !important;
}

.community-post-tags label:has(input[value="safety"]:checked) {
  border-color: rgba(255, 222, 80, 0.86) !important;
  background: rgba(128, 101, 18, 0.72) !important;
  color: #fff0a8 !important;
}

.community-post-tags label:has(input:checked) {
  color: #fff !important;
}

.community-post-custom-tag-editor {
  display: grid;
  gap: 9px;
}

.community-post-custom-tag-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 286px;
}

.community-post-custom-tag-entry .community-post-custom-tag {
  min-width: 0;
  width: min(204px, calc(100% - 72px)) !important;
  min-height: 36px !important;
  flex: 1 1 204px;
  padding: 6px 10px !important;
}

.community-post-custom-tag-entry button,
.community-post-custom-tag-chip {
  min-height: 42px;
  border: 1px solid rgba(255, 169, 64, 0.7);
  border-radius: 14px;
  background: rgba(168, 92, 18, 0.72);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.community-post-custom-tag-entry button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 13px;
  border-radius: 12px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  line-height: 1;
}

.community-post-custom-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.community-post-custom-tag-chip {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
}

.community-post-marker[data-community-tag="weather"] {
  background: radial-gradient(circle at 34% 30%, #ffffff 0 12%, #7bdcff 13% 42%, #138ed3 43% 100%) !important;
}

.community-post-marker[data-community-tag="disaster"] {
  background: radial-gradient(circle at 34% 30%, #ffffff 0 12%, #ff8a95 13% 42%, #d6263c 43% 100%) !important;
}

.community-post-marker[data-community-tag="earthquake"] {
  background: radial-gradient(circle at 34% 30%, #ffffff 0 12%, #87f2ad 13% 42%, #26a85c 43% 100%) !important;
}

.community-post-marker[data-community-tag="safety"] {
  background: radial-gradient(circle at 34% 30%, #ffffff 0 12%, #fff089 13% 42%, #d8ae18 43% 100%) !important;
}

.community-icon-preview {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
}

.community-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 420px) {
  #history-full-panel .history-stats-sort-row {
    grid-template-columns: auto minmax(0, 94px) 16px minmax(0, 94px) minmax(56px, auto) !important;
    column-gap: 4px !important;
  }

  #history-full-panel .history-stats-sort-row label {
    grid-template-columns: auto minmax(0, 94px) !important;
  }

  #history-full-panel .history-stats-sort-row label:nth-of-type(2) {
    grid-template-columns: minmax(0, 94px) !important;
  }

  #history-full-panel .history-stats-sort-row select,
  #history-start-year,
  #history-end-year {
    width: 94px !important;
    max-width: 94px !important;
  }
}

@media (max-width: 720px) {
  .community-post-button {
    min-width: 58px !important;
    min-height: 36px !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 58px) !important;
  }

  body.community-post-detail-open .community-post-button {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + min(48vh, 390px) + 12px) !important;
  }
}

/* Current request: slightly larger/even bottom tabs and centered settings back button. */
.bottom-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  padding: 4px 4px calc(5px + env(safe-area-inset-bottom)) !important;
}

.bottom-tabs .tab,
.tab {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-rows: 27px 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 2px !important;
  padding-inline: 1px !important;
  font-size: clamp(0.6rem, 1.15vw, 0.72rem) !important;
  letter-spacing: -0.035em !important;
}

.bottom-tabs .bottom-tab-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  transform: scale(1.04) !important;
  transform-origin: center !important;
}

#earthquake-tab span:last-child {
  white-space: nowrap !important;
  transform: scaleX(0.88) !important;
  transform-origin: center !important;
  letter-spacing: -0.11em !important;
  max-width: 100% !important;
}

@media (max-width: 520px) {
  .bottom-tabs .tab,
  .tab {
    font-size: clamp(0.57rem, 2.55vw, 0.66rem) !important;
  }

  #earthquake-tab span:last-child {
    transform: scaleX(0.78) !important;
    letter-spacing: -0.16em !important;
  }
}

.settings-detail-panel .settings-detail-back,
.settings-detail-back {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 2rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-detail-back {
  transform: none !important;
  padding-bottom: 3px !important;
}

/* Current request: hide the faint preset-sort separator without moving layout. */
.preset-sort-buttons,
.preset-sort-choice {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.preset-picker-head,
.preset-picker-table-wrap,
.preset-picker-table {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

#settings-push-status,
#settings-location-status {
  cursor: pointer !important;
  user-select: none !important;
}

/* Current request: allow the simulation sheet to be pulled higher and layer it above the legend. */
#setup-panel.sim-panel {
  z-index: 14500 !important;
  max-height: min(72svh, 700px) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  height: min(72svh, 700px) !important;
  max-height: min(72svh, 700px) !important;
}

#setup-panel.sim-panel.is-dragging {
  max-height: var(--sheet-drag-height, min(72svh, 700px)) !important;
}

#setup-panel .sim-panel-scroll {
  max-height: calc(min(72svh, 700px) - 78px) !important;
}

.preset-picker-overlay {
  z-index: 16000 !important;
}

.preset-picker-close,
#preset-picker-close {
  z-index: 17000 !important;
}

/* Tools tab: source-search and station-search pages live under the Tools tab. */
body[data-active-bottom-tab="bottom-info-tab"].tool-source-search-mode #history-full-panel {
  display: grid !important;
  pointer-events: auto !important;
}

body[data-active-bottom-tab="bottom-info-tab"].tool-source-search-mode #info-full-panel {
  display: none !important;
  pointer-events: none !important;
}

#info-full-panel .tool-home-page,
#info-full-panel .tool-station-page {
  min-height: 0 !important;
}

#info-full-panel .tool-home-page.hidden,
#info-full-panel .tool-station-page.hidden {
  display: none !important;
}

.tool-menu-list {
  display: grid !important;
  gap: 0 !important;
  padding: max(18px, env(safe-area-inset-top)) 0 0 !important;
}

/* Keep a small top breathing room while bringing the Learning and Tools content upward. */
#info-full-panel,
#learning-full-panel {
  padding-top: max(10px, env(safe-area-inset-top)) !important;
}

#info-full-panel .tool-home-page .tool-menu-list,
#learning-full-panel .learning-content {
  padding-top: 10px !important;
}

.tool-menu-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
}

.tool-menu-row span:first-child {
  font-weight: 900 !important;
}

.tool-menu-row span:last-child {
  opacity: 0.72 !important;
  font-size: 1.35rem !important;
}

.tool-page-head {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: max(6px, env(safe-area-inset-top)) 14px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
}

.tool-page-head h2 {
  margin: 0 !important;
  text-align: center !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
}

.tool-page-back {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  padding: 0 0 3px !important;
}

#history-full-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

#history-full-panel .history-stats-toolbar {
  min-width: 0 !important;
}

#history-full-panel .history-stats-sort-row select,
#history-start-year,
#history-end-year {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

#bottom-history-tab .bottom-tab-icon::before,
#bottom-history-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 5px !important;
  width: 18px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg, transparent 0 32%, currentColor 32% 38%, transparent 38% 62%, currentColor 62% 68%, transparent 68%) !important;
  box-shadow: none !important;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 6px !important;
  top: 8px !important;
  width: 12px !important;
  height: 9px !important;
  border: 0 !important;
  border-top: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.community-map-mode #map::after {
  content: "© OpenStreetMap contributors © CARTO";
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 2px);
  z-index: 1200;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.48);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

/* Current request: legend below simulation sheet, compact year range, no epicenter X in source search, fixed bottom tabs. */
body[data-active-bottom-tab="earthquake-tab"] .intensity-legend,
.intensity-legend,
body .intensity-legend {
  z-index: 13900 !important;
}

#setup-panel.sim-panel {
  z-index: 14500 !important;
}

/* Keep the speech confirmation above the simulation sheet and intensity legend. */
.speech-confirm-overlay {
  z-index: 15000 !important;
}

body.tool-source-search-mode .epicenter-marker-shell {
  display: none !important;
  pointer-events: none !important;
}

#history-full-panel .history-stats-sort-row {
  grid-template-columns: auto minmax(0, 104px) 18px minmax(0, 104px) auto !important;
  column-gap: 4px !important;
  justify-content: start !important;
}

#history-full-panel .history-stats-sort-row label {
  grid-template-columns: auto minmax(0, 104px) !important;
  gap: 5px !important;
}

#history-full-panel .history-stats-sort-row label + span {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
}

#history-full-panel .history-stats-sort-row label:nth-of-type(2) {
  display: block !important;
}

#history-full-panel .history-stats-sort-row select,
#history-start-year,
#history-end-year {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

.bottom-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto !important;
  z-index: 30000 !important;
}

/* Community map posting UI. */
body.community-map-mode #map::after {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 2px) !important;
}

.community-post-button {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 92px);
  z-index: 12500;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(64, 224, 255, 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 56, 64, 0.92), rgba(3, 16, 20, 0.94));
  color: #7ff4ff;
  font: 800 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.18);
}

body.community-map-mode .community-post-button {
  display: inline-flex;
}

body.community-pick-mode .community-post-button {
  outline: 2px solid rgba(255, 255, 255, 0.78);
}

.community-post-overlay {
  position: fixed;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0;
  z-index: 26000;
  display: grid;
  place-items: end center;
  padding: 18px 14px 14px;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(3px);
}

.community-post-overlay.hidden {
  display: none;
}

.community-post-sheet {
  width: min(560px, 100%);
  max-height: calc(100vh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 30px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(180deg, rgba(20, 23, 24, 0.96), rgba(4, 6, 7, 0.97));
  color: #f7f7f7;
  box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.56);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.community-post-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 8px;
  background: linear-gradient(180deg, rgba(20, 23, 24, 0.98), rgba(20, 23, 24, 0.84));
}

.community-post-head h2 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
}

.community-post-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 700 24px/1 system-ui, sans-serif;
}

.community-post-form {
  display: grid;
  gap: 14px;
  padding: 8px 18px 18px;
}

.community-post-section {
  display: grid;
  gap: 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.community-post-section h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.community-post-location-actions,
.community-post-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.community-post-location-actions button,
.community-post-tags label,
.community-media-picker,
.community-post-submit {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  color: #fff;
  font-weight: 800;
}

.community-post-tags label {
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.community-post-tags input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.community-post-tags label:has(input:checked) {
  border-color: rgba(64, 224, 255, 0.68);
  background: rgba(8, 83, 95, 0.72);
  color: #8ff6ff;
}

.community-post-location {
  min-height: 20px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.community-media-picker {
  display: grid;
  place-items: center;
  padding: 0 14px;
  cursor: pointer;
}

.community-media-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.community-post-preview {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.community-post-preview img,
.community-post-preview video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.community-post-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  padding: 12px 14px;
  font: 700 15px/1.6 system-ui, sans-serif;
}

.community-post-status {
  min-height: 20px;
  margin: 0;
  color: #7ff4ff;
  font-size: 13px;
}

.community-post-submit {
  min-height: 50px;
  border-color: rgba(255, 43, 89, 0.72);
  background: linear-gradient(180deg, #ff315f, #c70c40);
  font-size: 16px;
}

.community-post-submit:disabled {
  opacity: 0.58;
  filter: grayscale(0.35);
  cursor: not-allowed;
}

.community-media-remove {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}

.community-post-marker {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(5, 15, 18, 0.68);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 12%, #72f0ff 13% 42%, #069fb7 43% 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.34), 0 8px 16px rgba(0, 0, 0, 0.42);
}

.community-post-popup .maplibregl-popup-content {
  width: min(280px, 74vw);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(7, 9, 10, 0.94);
  color: #fff;
  padding: 12px;
}

.community-post-popup-card {
  display: grid;
  gap: 8px;
}

.community-post-popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.community-post-popup-tags span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(64, 224, 255, 0.18);
  color: #8ff6ff;
  font-size: 12px;
  font-weight: 800;
}

.community-post-popup-card img,
.community-post-popup-card video {
  width: 100%;
  max-height: 180px;
  border-radius: 12px;
  object-fit: cover;
}

.community-post-popup-card p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
}

.community-post-popup-card time {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

@media (max-width: 720px) {
  .community-post-button {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 74px);
    min-width: 86px;
  }

  .community-post-overlay {
    padding: 10px 10px 8px;
  }
}

/* Current request: make the bottom tab area 4px taller and keep panels/tables clear of it. */
:root {
  --bottom-nav-height: 72px !important;
}

@media (max-width: 720px) {
  :root {
    --bottom-nav-height: 70px !important;
  }
}

.bottom-tabs {
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 11px !important;
  top: 6px !important;
  width: 2px !important;
  height: 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}

#bottom-settings-tab .bottom-tab-icon {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 2px !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center, transparent 0 4px, currentColor 4.5px 7px, transparent 7.5px),
    conic-gradient(
      currentColor 0 16deg,
      transparent 16deg 30deg,
      currentColor 30deg 46deg,
      transparent 46deg 75deg,
      currentColor 75deg 105deg,
      transparent 105deg 134deg,
      currentColor 134deg 150deg,
      transparent 150deg 164deg,
      currentColor 164deg 196deg,
      transparent 196deg 210deg,
      currentColor 210deg 226deg,
      transparent 226deg 255deg,
      currentColor 255deg 285deg,
      transparent 285deg 314deg,
      currentColor 314deg 330deg,
      transparent 330deg 344deg,
      currentColor 344deg 360deg
    ) !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 9px !important;
  top: 9px !important;
  width: 6px !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
}

/* Compact settings headings so the menu controls can use more vertical space. */
.settings-menu-sheet {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
}

.settings-detail-head {
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  min-height: 48px !important;
  padding: 3px 8px 5px !important;
}

.settings-detail-back {
  width: 34px !important;
  height: 34px !important;
}

.settings-detail-panel .push-confirm-panel,
.settings-detail-panel .source-info-overlay-content,
.settings-detail-panel .settings-feedback-form {
  margin-top: 10px !important;
}

/* Bottom navigation sizing aligned with the visual weight of the reference. */
:root {
  --bottom-nav-height: 73px !important;
}

@media (max-width: 720px) {
  :root {
    --bottom-nav-height: 71px !important;
  }
}

.bottom-tabs {
  padding: 6px 4px calc(5px + env(safe-area-inset-bottom)) !important;
}

.bottom-tabs .tab,
.tab {
  grid-template-rows: 32px auto !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 2px 1px 0 !important;
  font-size: clamp(0.7rem, 1.35vw, 0.82rem) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  transform: translateY(-3px) !important;
}

.bottom-tabs .bottom-tab-icon {
  left: 2px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  transform: scale(1.22) !important;
  transform-origin: 12px 12px !important;
}

/* Compact feedback action and predictable post-detail navigation. */
.settings-inline-panel.settings-detail-panel .settings-feedback-form .feedback-submit {
  width: auto !important;
  min-width: 76px !important;
  min-height: 36px !important;
  justify-self: end !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
}

.community-post-detail-close {
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: 0 !important;
}

/* Keep the source-search year range and load action in four non-overlapping tracks. */
#history-full-panel .history-stats-sort-row {
  grid-template-columns: max-content 18px 104px 64px !important;
  column-gap: 6px !important;
  justify-content: start !important;
}

#history-full-panel .history-stats-sort-row label:first-of-type {
  grid-template-columns: auto 104px !important;
  gap: 6px !important;
}

#history-full-panel .history-stats-sort-row label:nth-of-type(2) {
  display: block !important;
  width: 104px !important;
}

#history-full-panel #history-statistics-load {
  width: 64px !important;
  min-width: 64px !important;
  padding-inline: 8px !important;
}

@media (max-width: 420px) {
  #history-full-panel .history-stats-sort-row {
    grid-template-columns: max-content 16px 88px 56px !important;
    column-gap: 4px !important;
  }

  #history-full-panel .history-stats-sort-row label:first-of-type {
    grid-template-columns: auto 88px !important;
    gap: 4px !important;
  }

  #history-full-panel .history-stats-sort-row label:nth-of-type(2),
  #history-full-panel #history-start-year,
  #history-full-panel #history-end-year {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  #history-full-panel #history-statistics-load {
    width: 56px !important;
    min-width: 56px !important;
    padding-inline: 6px !important;
  }
}

/* Preset earthquakes: compact bottom sheet with an independently scrolling table. */
.preset-picker-overlay {
  position: fixed !important;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  z-index: 16000 !important;
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.preset-picker-overlay.hidden {
  display: none !important;
}

.preset-picker-dialog {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(860px, 100vw) !important;
  height: min(60dvh, 620px) !important;
  max-height: min(60dvh, 620px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: linear-gradient(180deg, rgba(17, 19, 20, 0.985), rgba(5, 6, 7, 0.995)) !important;
  box-shadow: 0 -20px 52px rgba(0, 0, 0, 0.54) !important;
  animation: preset-picker-sheet-in 220ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.preset-picker-head {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 34px 34px !important;
  gap: 7px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 12px 10px 56px !important;
  transform: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(12, 14, 15, 0.98) !important;
}

.preset-filter-input {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
}

.preset-sort-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

.preset-sort-choice {
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
}

.preset-picker-close,
#preset-picker-close {
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  top: 9px !important;
  z-index: 4 !important;
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 2.25rem !important;
  line-height: 1 !important;
  background: transparent !important;
}

.preset-picker-description {
  display: none !important;
}

.preset-picker-table-wrap {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 6px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

@keyframes preset-picker-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preset-picker-dialog {
    animation: none !important;
  }
}

/* Clearer bottom-tab metaphors: compose a post and learn from an open book. */
#bottom-history-tab .bottom-tab-icon {
  background: none !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  left: 3px !important;
  top: 3px !important;
  width: 17px !important;
  height: 19px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#bottom-history-tab .bottom-tab-icon::after {
  left: 11px !important;
  top: 5px !important;
  width: 13px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%) !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
}

#bottom-learning-tab .bottom-tab-icon::before,
#bottom-learning-tab .bottom-tab-icon::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 4px !important;
  width: 11px !important;
  height: 17px !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  left: 1px !important;
  border-right-width: 1px !important;
  border-radius: 4px 1px 5px 3px !important;
  transform: skewY(7deg) !important;
}

#bottom-learning-tab .bottom-tab-icon::after {
  left: 12px !important;
  border-left-width: 1px !important;
  border-radius: 1px 4px 3px 5px !important;
  transform: skewY(-7deg) !important;
}

/* Keep the account divider clearly above the notification settings card. */
.community-account-panel {
  margin-bottom: 10px !important;
}

/* Legible vector icons for simulation, posting and learning at small sizes. */
#earthquake-tab .bottom-tab-icon::before,
#bottom-history-tab .bottom-tab-icon::before,
#bottom-learning-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 1px !important;
  top: 1px !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
}

#earthquake-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l2.2-6 3.2 12 3-9 2.2 6H22'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l2.2-6 3.2 12 3-9 2.2 6H22'/%3E%3C/svg%3E") !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='m10 16 1-4 8-8 3 3-8 8-4 1Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='m10 16 1-4 8-8 3 3-8 8-4 1Z'/%3E%3C/svg%3E") !important;
}

#bottom-learning-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5c3-.5 6 .5 9 3v13c-3-2.5-6-3.5-9-3V5Z'/%3E%3Cpath d='M21 5c-3-.5-6 .5-9 3v13c3-2.5 6-3.5 9-3V5Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5c3-.5 6 .5 9 3v13c-3-2.5-6-3.5-9-3V5Z'/%3E%3Cpath d='M21 5c-3-.5-6 .5-9 3v13c3-2.5 6-3.5 9-3V5Z'/%3E%3C/svg%3E") !important;
}

#earthquake-tab .bottom-tab-icon::after,
#bottom-history-tab .bottom-tab-icon::after,
#bottom-learning-tab .bottom-tab-icon::after {
  content: none !important;
  display: none !important;
}

/* Precisely align every bottom-tab icon and label on the same visual grid. */
.bottom-tabs .tab,
.tab {
  align-content: center !important;
  justify-items: center !important;
}

.bottom-tabs .tab > .bottom-tab-icon {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  place-self: center !important;
  transform: scale(1.1) !important;
  transform-origin: center !important;
}

.bottom-tabs .tab > span:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

#earthquake-tab .bottom-tab-icon::before,
#bottom-history-tab .bottom-tab-icon::before,
#bottom-learning-tab .bottom-tab-icon::before {
  left: 2px !important;
  top: 2px !important;
}

/* A compact, conventional gear that stays recognizable at tab size. */
#bottom-settings-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 2px !important;
  top: 2px !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1'/%3E%3C/svg%3E") !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1'/%3E%3C/svg%3E") !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
}

#bottom-settings-tab .bottom-tab-icon::after {
  content: none !important;
  display: none !important;
}

/* Runtime earthquake HUD: simulation results live on the map, never in a pull-up sheet. */
.simulation-runtime-hud {
  display: none;
}

body.simulation-session-active #setup-panel,
body.simulation-session-active #settings-menu-button {
  display: none !important;
}

body.simulation-session-active .simulation-runtime-hud {
  position: absolute;
  z-index: 10000;
  right: auto;
  bottom: 12px;
  left: 50%;
  display: block;
  width: min(460px, calc(100% - 48px));
  max-width: 460px;
  transform: translateX(-50%);
  pointer-events: none;
}

.simulation-runtime-hud .setup-result-section {
  display: grid !important;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(150, 176, 255, 0.22);
  border-radius: 24px;
  background: rgba(4, 9, 25, 0.94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}

.simulation-runtime-hud .setup-result-section > h3,
.simulation-runtime-hud .simulation-sheet-toggle,
.simulation-runtime-hud .simulation-legacy-output,
.simulation-runtime-hud .current-location-panel,
.simulation-runtime-hud .simulation-section-title,
.simulation-runtime-hud .simulation-layer-toggles,
.simulation-runtime-hud .max-stations-block {
  display: none !important;
}

.simulation-runtime-hud .simulation-progress-panel {
  position: relative !important;
  z-index: 3 !important;
  order: 4;
  margin: 0 !important;
  padding: 0 !important;
}

.simulation-runtime-hud .simulation-progress-head {
  padding-inline: 4px;
  font-size: 0.78rem !important;
}

.simulation-runtime-hud .simulation-progress-track {
  height: 108px !important;
  border-radius: 14px !important;
}

.simulation-runtime-hud .simulation-progress-canvas {
  height: 96px !important;
}

.simulation-runtime-hud .simulation-progress-canvas::before,
.simulation-runtime-hud .simulation-progress-track i {
  top: 82px !important;
}

.simulation-runtime-hud .simulation-timeline-event {
  top: 3px !important;
  height: 82px !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-lower {
  top: 3px !important;
  height: 82px !important;
}

.simulation-runtime-hud .simulation-timeline-event b {
  max-width: 170px !important;
  padding: 4px 7px !important;
  font-size: 0.68rem !important;
}

.simulation-runtime-hud .simulation-timeline-event small {
  top: 31px !important;
  font-size: 0.62rem !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-lower b {
  top: 35px !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-lower small {
  top: 61px !important;
}

.simulation-runtime-hud .simulation-summary {
  position: relative;
  z-index: 4;
  order: 1;
  display: grid !important;
  grid-template-columns: minmax(104px, 0.78fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto;
  gap: 2px 14px !important;
  margin: 0 !important;
  padding: 14px 16px;
  border: 1px solid rgba(69, 117, 255, 0.4);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(14, 45, 132, 0.98), rgba(11, 29, 86, 0.98));
  color: #fff;
}

.simulation-runtime-hud .simulation-summary > * {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid !important;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 0 !important;
}

.simulation-runtime-hud .max-shindo-card > span,
.simulation-runtime-hud .magnitude-card > span,
.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card span {
  color: rgba(230, 238, 255, 0.76) !important;
  font-size: 0.76rem !important;
  font-weight: 800;
  line-height: 1.1;
}

.simulation-runtime-hud .max-shindo-card strong {
  min-width: 82px !important;
  min-height: 72px !important;
  padding: 8px 14px !important;
  border-radius: 15px !important;
  font-size: 3rem !important;
}

.simulation-runtime-hud .magnitude-card {
  grid-column: 2;
  grid-row: 1;
  display: grid !important;
  align-content: center;
  gap: 2px;
  padding: 0 !important;
}

.simulation-runtime-hud .magnitude-card strong,
.simulation-runtime-hud .simulation-summary dd {
  margin: 0;
  color: #fff !important;
  font-size: 1.9rem !important;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-depth) {
  grid-column: 3;
  grid-row: 1;
  align-content: center;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.simulation-runtime-hud #simulation-region-name {
  overflow: hidden;
  font-size: 1.6rem !important;
  text-overflow: ellipsis;
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-column: 2 / 4;
  grid-row: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  overflow: hidden;
  color: rgba(244, 247, 255, 0.88);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulation-runtime-hud .simulation-timeline-controls {
  position: relative;
  z-index: 4;
  order: 2;
}

.simulation-runtime-hud .simulation-actions {
  position: relative !important;
  z-index: 4;
  order: 3;
  margin: 0 !important;
  padding: 0 !important;
}

.simulation-runtime-hud .simulation-timeline-controls button,
.simulation-runtime-hud .simulation-stop {
  min-height: 42px !important;
  border-radius: 12px !important;
}

body.simulation-session-complete .simulation-runtime-hud .simulation-actions {
  display: none !important;
}

@media (max-width: 560px) {
  body.simulation-session-active .simulation-runtime-hud {
    right: auto;
    bottom: 7px;
    left: 50%;
    width: min(420px, calc(100% - 40px));
  }

  .simulation-runtime-hud .setup-result-section {
    gap: 6px;
    padding: 7px;
    border-radius: 20px;
  }

  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 0.86fr) !important;
    gap: 2px 9px !important;
    padding: 11px 12px;
    border-radius: 17px;
  }

  .simulation-runtime-hud .max-shindo-card strong {
    min-width: 70px !important;
    min-height: 64px !important;
    font-size: 2.6rem !important;
  }

  .simulation-runtime-hud .magnitude-card strong,
  .simulation-runtime-hud .simulation-summary dd {
    font-size: 1.55rem !important;
  }

  .simulation-runtime-hud #simulation-region-name {
    font-size: 1.28rem !important;
  }
}

/* Final compact layout: foldable handle, prescribed information rows, no timeline seconds. */
.simulation-runtime-hud {
  grid-template-rows: 22px auto;
  align-items: end;
}

body.simulation-session-active .simulation-runtime-hud {
  display: grid;
}

.simulation-runtime-handle {
  position: relative;
  z-index: 10002;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  border: 1px solid rgba(150, 176, 255, 0.22);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 0;
  background: rgba(4, 9, 25, 0.94);
  cursor: pointer;
}

.simulation-runtime-handle::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 72px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.simulation-runtime-hud.is-collapsed .setup-result-section {
  display: none !important;
}

.simulation-runtime-hud.is-collapsed .simulation-runtime-handle {
  border-bottom: 1px solid rgba(150, 176, 255, 0.22);
  border-radius: 16px;
}

.simulation-runtime-hud .setup-result-section {
  border-radius: 0 0 18px 18px !important;
}

.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: 24px 24px 18px !important;
  gap: 2px 10px !important;
  padding: 7px 10px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  align-content: center !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  min-width: 60px !important;
  min-height: 48px !important;
  font-size: 2rem !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) dt::after,
.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth) dt::after,
.simulation-runtime-hud .simulation-origin-time-card span::after {
  content: "：";
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
  display: none !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong {
  display: inline-flex !important;
  align-items: baseline !important;
  font-size: 1rem !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before {
  content: "M";
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
  gap: 4px !important;
}

.simulation-runtime-hud .max-shindo-card > span,
.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card span {
  flex: 0 0 auto;
  font-size: 0.7rem !important;
}

.simulation-runtime-hud #simulation-region-name,
.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud #simulation-magnitude {
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.simulation-runtime-hud .simulation-progress-head strong,
.simulation-runtime-hud .simulation-timeline-event small {
  display: none !important;
}

.simulation-runtime-hud .simulation-progress-head {
  justify-content: flex-start !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned {
  border-left-color: #fb7185 !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned b {
  color: #fecdd3 !important;
}

/* Replace the setup sheet with the live simulation menu while a run is active. */
body.simulation-session-active #setup-panel .sim-panel-head,
body.simulation-session-active #setup-panel .settings-tabs,
body.simulation-session-active #setup-panel .simulation-quick-actions,
body.simulation-session-active #setup-panel .simulation-start-sheet-host,
body.simulation-session-active #setup-panel .settings-menu-row,
body.simulation-session-active #setup-panel [data-settings-section] {
  display: none !important;
}

body.simulation-session-active #simulation-start {
  display: none !important;
}

body.simulation-session-active #setup-panel .setup-result-section {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
}

body.simulation-session-active #setup-panel .setup-result-section > h3,
body.simulation-session-active #setup-panel .simulation-sheet-toggle {
  display: none !important;
}

.simulation-legacy-output {
  display: none !important;
}

.simulation-progress-panel {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
  padding: 10px 2px 4px !important;
  background: transparent !important;
}

.simulation-progress-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
}

.simulation-progress-head strong {
  color: #e8fbff !important;
  font-variant-numeric: tabular-nums !important;
}

.simulation-progress-track {
  position: relative !important;
  height: 176px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.48) !important;
  scrollbar-width: none !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  cursor: default !important;
  pointer-events: none !important;
  touch-action: pan-y !important;
}

.simulation-progress-track::-webkit-scrollbar {
  display: none !important;
}

.simulation-progress-canvas {
  position: relative !important;
  height: 158px !important;
  min-width: 100% !important;
}

.simulation-progress-canvas::before {
  content: "" !important;
  position: absolute !important;
  top: 68px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55) !important;
}

.simulation-progress-track i {
  position: absolute !important;
  top: 68px !important;
  left: 0 !important;
  height: 3px !important;
  width: 0;
  min-width: 0 !important;
  background: linear-gradient(90deg, #08a9c6, #26d9ff 72%, #e4fdff) !important;
  box-shadow: 0 0 12px rgba(38, 217, 255, 0.9) !important;
  transition: width 90ms linear !important;
}

.simulation-progress-events {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.simulation-timeline-event {
  position: absolute !important;
  top: 8px !important;
  width: 1px !important;
  height: 122px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.48) !important;
  color: #f8fafc !important;
}

.simulation-timeline-event.is-lower {
  top: 68px !important;
  height: 62px !important;
}

.simulation-timeline-event b {
  position: absolute !important;
  top: 5px !important;
  left: 8px !important;
  display: block !important;
  max-width: 220px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  background: rgba(8, 12, 15, 0.92) !important;
  color: #f8fafc !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.simulation-timeline-event.is-lower b {
  top: 9px !important;
}

.simulation-timeline-event small {
  position: absolute !important;
  top: 39px !important;
  left: 9px !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.72rem !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.simulation-timeline-event.is-lower small {
  top: 42px !important;
}

.simulation-timeline-event.is-eew {
  border-left-color: #fbbf24 !important;
}

.simulation-timeline-event.is-eew-planned {
  border-left: 2px dashed rgba(251, 191, 36, 0.78) !important;
}

.simulation-timeline-event.is-intensity {
  border-left-color: #fb7185 !important;
}

.simulation-timeline-event.is-eew b {
  color: #fde68a !important;
}

.simulation-timeline-event.is-eew-planned b {
  border-color: rgba(251, 191, 36, 0.34) !important;
  background: rgba(61, 42, 4, 0.94) !important;
  color: #fde68a !important;
}

.simulation-timeline-event.is-intensity b {
  color: #fecdd3 !important;
}

.simulation-progress-now {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 3px !important;
  transform: translateX(-1px) !important;
  background: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.9) !important;
  transition: none !important;
  will-change: auto !important;
}

.simulation-progress-now::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform: translate(-50%, -1px) !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 12px solid #ef4444 !important;
}

.simulation-timeline-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.simulation-timeline-controls button {
  min-height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f8fafc !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.simulation-timeline-controls button:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

body.simulation-session-active #setup-panel .simulation-summary {
  gap: 8px !important;
  margin: 0 !important;
}

body.simulation-session-active #setup-panel .max-shindo-card,
body.simulation-session-active #setup-panel .magnitude-card {
  min-height: 104px !important;
  gap: 7px !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body.simulation-session-active #setup-panel .max-shindo-card strong,
body.simulation-session-active #setup-panel .magnitude-card strong {
  display: inline-flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.15rem !important;
  line-height: 1 !important;
}

body.simulation-session-active #setup-panel .magnitude-card strong {
  font-size: 2.15rem !important;
  letter-spacing: -0.025em !important;
}

.simulation-intensity-card {
  min-width: 82px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 9px !important;
  padding: 7px 13px !important;
  background: var(--simulation-intensity-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--simulation-intensity-text, #ffffff) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14) !important;
}

body.simulation-session-active #setup-panel .wave-readout {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.simulation-session-active #setup-panel .wave-readout div {
  min-height: 64px !important;
  align-content: center !important;
  padding: 10px 12px !important;
}

body.simulation-session-active #setup-panel .wave-readout dd {
  font-size: 1.1rem !important;
}

body.simulation-session-active #setup-panel .wave-readout dt,
body.simulation-session-active #setup-panel .max-shindo-card > span,
body.simulation-session-active #setup-panel .magnitude-card > span {
  font-size: 0.88rem !important;
}

body.simulation-session-active #setup-panel .wave-readout div:has(#simulation-region-name) {
  grid-column: auto !important;
  order: 0 !important;
}

body.simulation-session-active #setup-panel .wave-readout div:has(#simulation-depth) {
  order: 0 !important;
}

.simulation-section-title {
  margin: 4px 0 -2px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

#simulation-max-area-list {
  display: grid !important;
  max-height: 220px !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
  overflow-y: auto !important;
  list-style: none !important;
}

#simulation-max-area-list li {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 36px !important;
  color: #f8fafc !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
}

#simulation-max-area-list .simulation-area-empty {
  display: block !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.simulation-list-intensity-card {
  display: inline-grid !important;
  min-width: 42px !important;
  min-height: 28px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  background: var(--simulation-intensity-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--simulation-intensity-text, #ffffff) !important;
  font-size: 0.94rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#max-station-list li {
  grid-template-columns: 2.3em 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

body.simulation-session-active #setup-panel .max-stations-block {
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.simulation-session-active #setup-panel .max-stations-block summary {
  min-height: 42px !important;
  margin: 0 0 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  padding: 0 2px 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(236, 244, 249, 0.82) !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
}

body.simulation-session-active #setup-panel .max-stations-block summary::after {
  width: 28px !important;
  height: 28px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

#current-location-intensity.has-intensity {
  display: inline-grid !important;
  min-width: 64px !important;
  min-height: 30px !important;
  place-items: center !important;
  justify-self: center !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  background: var(--simulation-intensity-color) !important;
  color: var(--simulation-intensity-text) !important;
}

body.simulation-session-active #setup-panel .simulation-actions {
  position: relative !important;
  bottom: auto !important;
  z-index: 1 !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.simulation-session-active #setup-panel .simulation-stop {
  min-height: 50px !important;
  border-radius: 18px !important;
  font-size: 0.96rem !important;
}

body.simulation-session-active #setup-panel .simulation-layer-toggles .toggle-row span,
body.simulation-session-active #setup-panel .current-location-toggle span {
  font-size: 0.9rem !important;
}

body.simulation-session-active #setup-panel .current-location-name {
  font-size: 0.96rem !important;
}

body.simulation-session-active #setup-panel .current-location-forecast span {
  font-size: 0.8rem !important;
}

body.simulation-session-active #setup-panel .current-location-forecast strong {
  font-size: 1rem !important;
}

body.simulation-session-complete #setup-panel .simulation-actions {
  display: none !important;
}

.simulation-timeline-event.is-complete {
  border-left-color: #fb7185 !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-complete {
  top: 0 !important;
  height: 80px !important;
}

.simulation-timeline-event.is-complete b {
  border-color: rgba(251, 113, 133, 0.32) !important;
  background: rgba(66, 12, 24, 0.94) !important;
  color: #fecdd3 !important;
}

html[data-resolved-theme="light"] .simulation-progress-head {
  color: #475569 !important;
}

html[data-resolved-theme="light"] .simulation-progress-head strong {
  color: #0f172a !important;
}

/* Typhoon learning guide and forecast-track diagram. */
.learning-typhoon-section {
  display: grid !important;
  min-width: 0 !important;
  gap: 14px !important;
}

.learning-typhoon-fact-grid,
.learning-typhoon-scale-grid,
.learning-typhoon-symbol-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

.learning-typhoon-fact-grid article,
.learning-typhoon-symbol-list article,
.learning-typhoon-action-list article {
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.learning-typhoon-fact-grid article {
  display: grid !important;
  gap: 5px !important;
  padding: 12px !important;
  border-color: rgba(69, 220, 241, 0.18) !important;
  background: rgba(36, 177, 200, 0.055) !important;
}

.learning-typhoon-fact-grid strong,
.learning-typhoon-scale-grid h4 {
  color: #8ff4ff !important;
  font-size: 0.84rem !important;
}

.learning-typhoon-fact-grid span {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
}

.learning-typhoon-route-diagram {
  width: 100% !important;
  max-width: 680px !important;
  margin: 14px auto 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(117, 229, 245, 0.2) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(rgba(98, 208, 224, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(98, 208, 224, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 18% 84%, rgba(25, 116, 132, 0.18), transparent 36%),
    #081216 !important;
}

.learning-typhoon-route-diagram svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.learning-typhoon-route-diagram path,
.learning-typhoon-route-diagram circle,
.learning-typhoon-route-diagram ellipse,
.learning-typhoon-route-diagram rect {
  vector-effect: non-scaling-stroke !important;
}

.learning-typhoon-route-diagram text {
  fill: rgba(255, 255, 255, 0.72) !important;
  font: 700 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.typhoon-warning-envelope {
  fill: none !important;
  stroke: #ff334f !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.typhoon-past-route {
  fill: none !important;
  stroke: #38bdf8 !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
}

.typhoon-forecast-route {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.86) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6 6 !important;
  stroke-linecap: round !important;
}

.typhoon-forecast-guide,
.typhoon-forecast-circle-links {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.58) !important;
  stroke-width: 1.25 !important;
  stroke-linecap: round !important;
}

.typhoon-forecast-circle-links {
  stroke: rgba(255, 255, 255, 0.72) !important;
}

.typhoon-strong-wind-area {
  fill: rgba(250, 204, 21, 0.17) !important;
  stroke: #facc15 !important;
  stroke-width: 2.2 !important;
}

.typhoon-storm-area {
  fill: rgba(255, 55, 85, 0.18) !important;
  stroke: #ff405f !important;
  stroke-width: 3 !important;
}

.typhoon-forecast-circle {
  fill: rgba(255, 255, 255, 0.025) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5 5 !important;
}

.typhoon-current-mark {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
}

.typhoon-forecast-center {
  fill: #fff !important;
  stroke: #071216 !important;
  stroke-width: 1.5 !important;
}

.learning-typhoon-symbol-list article {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
  padding: 10px !important;
}

.learning-typhoon-symbol-list article > span {
  position: relative !important;
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  box-sizing: border-box !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
}

.learning-typhoon-symbol-list .is-strong-wind,
.learning-typhoon-symbol-list .is-storm,
.learning-typhoon-symbol-list .is-forecast,
.learning-typhoon-symbol-list .is-warning-area {
  border-radius: 50% !important;
}

.learning-typhoon-symbol-list .is-strong-wind { border: 2px solid #facc15 !important; }
.learning-typhoon-symbol-list .is-storm { border: 3px solid #ff405f !important; }
.learning-typhoon-symbol-list .is-forecast { border: 2px dashed rgba(255, 255, 255, 0.92) !important; }
.learning-typhoon-symbol-list .is-warning-area {
  border: 2px solid #ff526d !important;
  background: rgba(255, 82, 109, 0.08) !important;
}

.learning-typhoon-symbol-list .is-center-line::before {
  content: "" !important;
  width: 28px !important;
  border-top: 2px dashed rgba(255, 255, 255, 0.9) !important;
}

.learning-typhoon-symbol-list strong,
.learning-typhoon-action-list strong {
  display: block !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.79rem !important;
  line-height: 1.4 !important;
}

.learning-typhoon-symbol-list p,
.learning-typhoon-action-list p {
  margin: 3px 0 0 !important;
  color: rgba(255, 255, 255, 0.67) !important;
  font-size: 0.73rem !important;
  line-height: 1.57 !important;
}

.learning-typhoon-scale-grid > div {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 13px !important;
}

.learning-typhoon-scale-grid h4 {
  margin: 0 !important;
  padding: 10px 11px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.learning-typhoon-scale-grid table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.72rem !important;
}

.learning-typhoon-scale-grid th,
.learning-typhoon-scale-grid td {
  padding: 9px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.learning-typhoon-scale-grid th {
  width: 42% !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.learning-typhoon-action-list {
  display: grid !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

.learning-typhoon-action-list article {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 11px 12px !important;
}

.learning-typhoon-action-list article > span {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(38, 217, 255, 0.14) !important;
  color: #8ff4ff !important;
  font-size: 0.8rem !important;
  font-weight: 950 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-fact-grid span,
html[data-resolved-theme="light"] .learning-typhoon-symbol-list p,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid th,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid td,
html[data-resolved-theme="light"] .learning-typhoon-action-list p {
  color: rgba(15, 23, 42, 0.74) !important;
}

html[data-resolved-theme="light"] .learning-typhoon-symbol-list strong,
html[data-resolved-theme="light"] .learning-typhoon-action-list strong,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid th {
  color: #111827 !important;
}

@media (max-width: 640px) {
  .learning-typhoon-fact-grid,
  .learning-typhoon-scale-grid,
  .learning-typhoon-symbol-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Community-map refresh and current-location controls. */
.community-map-controls {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px);
  z-index: 12520;
  display: none;
  flex-direction: column;
  gap: 8px;
}

body.community-map-mode .community-map-controls {
  display: flex;
}

body.community-pick-mode .community-map-controls {
  display: none !important;
}

.community-map-control {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(118, 224, 240, 0.48);
  border-radius: 12px;
  background: rgba(8, 18, 22, 0.94);
  color: #b7f7ff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.community-map-control:hover,
.community-map-control:focus-visible {
  border-color: rgba(89, 231, 250, 0.9);
  color: #54eaff;
  outline: none;
}

.community-map-control:active {
  transform: scale(0.95);
}

.community-map-control:disabled {
  cursor: wait;
  opacity: 0.82;
}

.community-map-control.is-success {
  border-color: rgba(67, 222, 154, 0.92);
  color: #5ff0ad;
}

.community-map-control.is-error {
  border-color: rgba(255, 92, 118, 0.92);
  color: #ff718a;
}

.community-map-control > span {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.community-map-refresh > span {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.1A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.1A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z'/%3E%3C/svg%3E");
}

.community-map-current-location > span {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M11 1h2v2.06A9 9 0 0 1 20.94 11H23v2h-2.06A9 9 0 0 1 13 20.94V23h-2v-2.06A9 9 0 0 1 3.06 13H1v-2h2.06A9 9 0 0 1 11 3.06V1Zm1 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M11 1h2v2.06A9 9 0 0 1 20.94 11H23v2h-2.06A9 9 0 0 1 13 20.94V23h-2v-2.06A9 9 0 0 1 3.06 13H1v-2h2.06A9 9 0 0 1 11 3.06V1Zm1 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/%3E%3C/svg%3E");
}

.community-map-current-location.is-marker-hidden {
  color: #94a3b8;
}

.community-map-current-location.is-marker-hidden::after {
  position: absolute;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: rotate(-45deg);
  pointer-events: none;
}

.community-map-control.is-loading > span {
  animation: community-map-control-spin 700ms linear infinite;
}

@keyframes community-map-control-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .community-map-controls {
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 14px);
  }

  .community-map-control {
    width: 42px;
    height: 42px;
  }
}

/* Keep the EEW area list on the simulation map only. */
body:not([data-active-bottom-tab="earthquake-tab"]) .eew-forecast-panel,
body.community-map-mode .eew-forecast-panel,
body.history-map-mode .eew-forecast-panel,
body.tool-source-search-mode .eew-forecast-panel {
  display: none !important;
}

.eew-forecast-panel h2 {
  color: #fff !important;
}

/* On iPad and desktop, place the list at the upper-left of the visible map area. */
@media (min-width: 721px) {
  body[data-active-bottom-tab="earthquake-tab"] .eew-forecast-panel {
    left: 388px !important;
    right: auto !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }
}

/* Compact runtime HUD: keep every control above the bottom navigation. */
body.simulation-session-active .simulation-runtime-hud {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
}

/* The tablet map already ends above the bottom navigation. Position the runtime
   menu against the viewport so the navigation height is not counted twice. */
@media (min-width: 561px) and (max-width: 1366px) {
  body.simulation-session-active .simulation-runtime-hud {
    position: fixed !important;
  }
}

.simulation-runtime-hud .simulation-timeline-controls {
  display: none !important;
}

.simulation-runtime-hud .setup-result-section {
  gap: 6px !important;
  padding: 7px !important;
  border-radius: 18px !important;
}

.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 0.85fr) !important;
  grid-template-rows: 38px 25px 18px !important;
  gap: 1px 8px !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

.simulation-runtime-hud .max-shindo-card {
  gap: 3px !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  min-width: 62px !important;
  min-height: 55px !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 2.25rem !important;
}

.simulation-runtime-hud .max-shindo-card > span,
.simulation-runtime-hud .magnitude-card > span,
.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card span {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .magnitude-card strong,
.simulation-runtime-hud .simulation-summary dd {
  font-size: 1.32rem !important;
  line-height: 1 !important;
}

.simulation-runtime-hud #simulation-magnitude,
.simulation-runtime-hud #simulation-depth {
  font-size: 1.32rem !important;
  font-weight: 900 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  gap: 6px !important;
}

.simulation-runtime-hud #simulation-region-name {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-origin-time-card {
  gap: 6px !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.simulation-runtime-hud .simulation-stop {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 0.84rem !important;
}

.simulation-runtime-hud .simulation-progress-panel {
  gap: 4px !important;
}

.simulation-runtime-hud .simulation-progress-head {
  font-size: 0.72rem !important;
}

.simulation-runtime-hud .simulation-progress-track {
  height: 88px !important;
}

.simulation-runtime-hud .simulation-progress-canvas {
  height: 80px !important;
}

.simulation-runtime-hud .simulation-progress-canvas::before,
.simulation-runtime-hud .simulation-progress-track i {
  top: 68px !important;
}

.simulation-runtime-hud .simulation-timeline-event,
.simulation-runtime-hud .simulation-timeline-event.is-lower {
  top: 2px !important;
  height: 69px !important;
}

.simulation-runtime-hud .simulation-timeline-event b {
  font-size: 0.64rem !important;
}

.simulation-runtime-hud .simulation-timeline-event small {
  top: 28px !important;
  font-size: 0.58rem !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-lower b {
  top: 27px !important;
}

.simulation-runtime-hud .simulation-timeline-event.is-lower small {
  top: 51px !important;
}

@media (max-width: 560px) {
  body.simulation-session-active .simulation-runtime-hud {
    position: fixed !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
  }

  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.82fr) !important;
    padding: 7px 8px !important;
  }
}

/* The prescribed two-column information ticket wins over earlier HUD sizing. */
.simulation-runtime-hud .setup-result-section {
  border-radius: 0 0 18px 18px !important;
}

.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: 24px 24px 18px !important;
  gap: 2px 10px !important;
  padding: 7px 10px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  min-width: 60px !important;
  min-height: 48px !important;
  padding: 4px 8px !important;
  font-size: 2rem !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 4px !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
  gap: 4px !important;
}

.simulation-runtime-hud #simulation-region-name,
.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud #simulation-magnitude,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 0.78rem !important;
}

@media (max-width: 560px) {
  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    padding: 7px 8px !important;
  }
}

/* Runtime HUD interaction and final stacking order. */
body:not([data-active-bottom-tab="earthquake-tab"]) .simulation-runtime-hud {
  display: none !important;
}

body.simulation-session-active .simulation-runtime-hud {
  transition: transform 260ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

body.simulation-session-active .simulation-runtime-hud.is-collapsed {
  transform: translate(-50%, calc(100% - 22px)) !important;
}

body.simulation-session-active .simulation-runtime-hud.is-dragging {
  transform: translate(-50%, var(--runtime-hud-drag-y, 0px)) !important;
  transition: none !important;
}

.simulation-runtime-hud.is-collapsed .setup-result-section {
  display: grid !important;
}

.simulation-runtime-handle {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.simulation-runtime-hud .setup-result-section {
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 54px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.simulation-runtime-hud .simulation-progress-panel {
  order: 4 !important;
}

.simulation-runtime-hud .simulation-actions {
  order: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin-top: 1px !important;
}

body.simulation-session-complete .simulation-runtime-hud .simulation-actions {
  display: grid !important;
}

.simulation-runtime-hud .simulation-stop {
  width: 100% !important;
}

.simulation-runtime-hud .max-shindo-card {
  justify-items: center !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  width: 100%;
  text-align: center;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::after {
  content: none !important;
}

/* Compact intensity legend in both horizontal and vertical layouts. */
body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
  width: min(calc(100vw - 18px), 420px) !important;
  max-width: calc(100vw - 18px) !important;
  border-radius: 12px !important;
}

body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    width: 34px !important;
    max-width: 34px !important;
    border-radius: 10px !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
    height: 23px !important;
    min-height: 23px !important;
    font-size: 0.68rem !important;
  }
}

/* Keep the timeline cursor visually fixed while the timeline moves beneath it. */
.simulation-runtime-hud .simulation-progress-panel {
  isolation: isolate;
}

.simulation-runtime-hud .simulation-progress-now {
  position: absolute !important;
  z-index: 8 !important;
  top: var(--simulation-progress-now-top, 22px) !important;
  bottom: var(--simulation-progress-now-bottom, 0px) !important;
  left: 64px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  contain: layout paint !important;
  will-change: auto !important;
  pointer-events: none !important;
}

.simulation-runtime-hud .simulation-progress-now::before {
  animation: none !important;
}

/* Align every item in the compact simulation information ticket. */
.simulation-runtime-hud .max-shindo-card {
  display: grid !important;
  grid-template-rows: 16px 48px !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  box-sizing: border-box !important;
  align-self: center !important;
  margin: 0 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) dt {
  font-size: 0.76rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.9fr) !important;
}

/* Completion state: stop the run, clear waves, and replace cancel with two black actions. */
.simulation-runtime-hud .simulation-summary {
  padding: 7px 14px 7px 6px !important;
}

.simulation-runtime-hud .max-stations-block summary::after,
body.simulation-session-active .max-stations-block summary::after {
  content: none !important;
  display: none !important;
}

body.simulation-session-complete .simulation-runtime-hud .simulation-actions {
  display: none !important;
}

body.simulation-session-complete .simulation-runtime-hud .simulation-timeline-controls {
  position: relative !important;
  z-index: 4 !important;
  order: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.simulation-session-complete .simulation-runtime-hud .simulation-timeline-controls button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 11px !important;
  background: #17191d !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
}

@media (max-width: 420px) {
  .simulation-runtime-hud .simulation-summary {
    padding: 6px 10px 6px 4px !important;
  }
}

.simulation-runtime-hud #simulation-region-name {
  margin: 0 !important;
  font-size: 0.96rem !important;
  line-height: 1 !important;
}

/* Final proportions for the simulation information ticket. */
.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-rows: 28px 28px 22px !important;
  gap: 2px 10px !important;
  padding: 9px 12px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-template-rows: 18px 64px !important;
  align-content: center !important;
  gap: 2px !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  width: 78px !important;
  min-width: 78px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  place-self: center !important;
  font-size: 2.6rem !important;
  line-height: 64px !important;
  text-align: center !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
.simulation-runtime-hud .simulation-origin-time-card {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  display: grid !important;
  grid-template-columns: 70px max-content max-content !important;
  align-items: baseline !important;
  column-gap: 10px !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth) {
  display: contents !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) dt,
.simulation-runtime-hud .simulation-depth-magnitude-row dt,
.simulation-runtime-hud .simulation-origin-time-card > span {
  width: auto !important;
  color: rgba(230, 238, 255, 0.76) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud #simulation-region-name {
  font-size: 1.08rem !important;
}

.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  font-size: 1.04rem !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

@media (max-width: 420px) {
  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    padding-inline: 8px !important;
  }

  .simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
  .simulation-runtime-hud .simulation-origin-time-card {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  .simulation-runtime-hud .simulation-depth-magnitude-row {
    grid-template-columns: 62px max-content max-content !important;
    column-gap: 7px !important;
  }
}

/* Ten-second guide lines, measured from the earthquake origin. */
.simulation-progress-guides {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.simulation-progress-guides > span {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.simulation-progress-guides > span::after {
  content: attr(data-label);
  position: absolute;
  top: 71px;
  left: 5px;
  color: rgba(225, 234, 246, 0.58);
  font-size: 0.6rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.simulation-runtime-hud .simulation-progress-guides > span::after {
  top: 74px;
}

/* Give source setup the same bottom-sheet shell as the runtime HUD. */
#setup-panel.sim-panel {
  left: 50% !important;
  width: min(460px, calc(100% - 48px)) !important;
  max-width: 460px !important;
  padding: 24px 7px 7px !important;
  border: 1px solid rgba(150, 176, 255, 0.22) !important;
  border-radius: 16px 16px 18px 18px !important;
  background: rgba(4, 9, 25, 0.94) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

#setup-panel .sheet-handle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(150, 176, 255, 0.16) !important;
  border-radius: 16px 16px 0 0 !important;
  background: rgba(4, 9, 25, 0.96) !important;
  transform: none !important;
}

#setup-panel .sheet-handle::after {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  left: 50% !important;
  width: 72px !important;
  height: 5px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

#setup-panel .sim-panel-scroll {
  max-height: calc(100% - 48px) !important;
}

/* The standalone layer button replaces the layer section inside source setup. */
#setup-panel [data-settings-tab="display"],
#setup-panel .setup-layer-state-storage {
  display: none !important;
}

/* Keep source setup attached above the tabs with a small gap. */
#setup-panel.sim-panel {
  top: auto !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px) !important;
}

#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
  height: auto !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px) !important;
}

#setup-panel.sim-panel.is-dragging {
  top: auto !important;
  height: var(--sheet-drag-height, min(24svh, 233px)) !important;
  max-height: var(--sheet-drag-height, calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px)) !important;
}

#setup-panel .sim-panel-scroll {
  max-height: calc(100% - 48px) !important;
  padding-bottom: 6px !important;
}

/* Keep the bright progress segment fixed against the fixed red cursor. */
.simulation-runtime-hud .simulation-progress-track i,
.simulation-runtime-hud #simulation-progress-fill {
  position: sticky !important;
  z-index: 7 !important;
  top: 68px !important;
  left: 0 !important;
  display: block !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Compact right-aligned legend with a persistent layer control at its left. */
body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
  top: max(8px, env(safe-area-inset-top)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  left: auto !important;
  width: min(310px, calc(100vw - 66px)) !important;
  max-width: calc(100vw - 66px) !important;
  transform: none !important;
}

.map-layer-control-button {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  z-index: 14010;
  display: grid;
  width: 42px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  padding: 0;
  background: rgba(4, 9, 25, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
  color: #eaf3ff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.map-layer-control-button > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
}

.map-layer-control-button > span::before,
.map-layer-control-button > span::after {
  content: none !important;
  display: none !important;
}

.map-layer-control-button svg {
  display: block;
  width: 21px;
  height: 21px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-layer-control-button[aria-expanded="true"] {
  border-color: rgba(38, 217, 255, 0.72);
  color: #26d9ff;
}

.map-layer-control-panel {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + 37px);
  left: max(8px, env(safe-area-inset-left));
  z-index: 14020;
  display: grid;
  width: min(250px, calc(100vw - 16px));
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(150, 176, 255, 0.22);
  border-radius: 13px;
  background: rgba(4, 9, 25, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
  color: #f4f7ff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.map-layer-control-panel.hidden {
  display: none !important;
}

.map-layer-control-panel > strong {
  margin-bottom: 2px;
  font-size: 0.82rem;
}

.map-layer-control-panel > label {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.78rem;
  font-weight: 750;
}

.map-layer-control-panel input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #26d9ff;
}

body:not([data-active-bottom-tab="earthquake-tab"]) .map-layer-control-button,
body:not([data-active-bottom-tab="earthquake-tab"]) .map-layer-control-panel {
  display: none !important;
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    width: 28px !important;
    max-width: 28px !important;
  }
}

/* Information ticket layout: large intensity column and three structured detail rows. */
.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: 34px 32px 34px !important;
  gap: 5px 12px !important;
  min-height: 120px !important;
  padding: 10px 12px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-rows: 20px minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  align-self: end !important;
  font-size: 0.76rem !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  width: 88px !important;
  min-width: 88px !important;
  height: 78px !important;
  min-height: 78px !important;
  align-self: start !important;
  padding: 0 !important;
  font-size: 3rem !important;
  line-height: 78px !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.72fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth) {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  align-items: baseline !important;
  gap: 7px !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.simulation-runtime-hud #simulation-region-name {
  overflow: hidden !important;
  font-size: 1.12rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  font-size: 1.06rem !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  overflow: hidden !important;
  font-size: 0.86rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 420px) {
  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    grid-template-rows: 32px 30px 32px !important;
    gap: 4px 8px !important;
    min-height: 112px !important;
    padding: 8px !important;
  }

  .simulation-runtime-hud .max-shindo-card strong {
    width: 80px !important;
    min-width: 80px !important;
    height: 72px !important;
    min-height: 72px !important;
    font-size: 2.7rem !important;
    line-height: 72px !important;
  }

  .simulation-runtime-hud .simulation-depth-magnitude-row {
    grid-template-columns: minmax(0, 1fr) minmax(66px, 0.68fr) !important;
    gap: 7px !important;
  }
}

/* Shorter information ticket while preserving the requested two-column layout. */
.simulation-runtime-hud .simulation-summary {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: 28px 25px 28px !important;
  gap: 3px 10px !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-template-rows: 17px minmax(0, 1fr) !important;
  gap: 2px !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  width: 78px !important;
  min-width: 78px !important;
  height: 61px !important;
  min-height: 61px !important;
  font-size: 2.6rem !important;
  line-height: 61px !important;
}

@media (max-width: 420px) {
  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: 27px 24px 27px !important;
    gap: 2px 7px !important;
    padding: 6px 7px !important;
  }

  .simulation-runtime-hud .max-shindo-card strong {
    width: 72px !important;
    min-width: 72px !important;
    height: 58px !important;
    min-height: 58px !important;
    font-size: 2.45rem !important;
    line-height: 58px !important;
  }
}

/* Collapse source setup to its grab handle and keep the start action near the expanded lower edge. */
#setup-panel.sim-panel[data-sheet-state="collapsed"],
#setup-panel.sim-panel[data-sheet-state="closed"] {
  height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

#setup-panel.sim-panel[data-sheet-state="collapsed"] .sim-panel-head,
#setup-panel.sim-panel[data-sheet-state="collapsed"] .sim-panel-scroll,
#setup-panel.sim-panel[data-sheet-state="closed"] .sim-panel-head,
#setup-panel.sim-panel[data-sheet-state="closed"] .sim-panel-scroll {
  visibility: hidden !important;
  pointer-events: none !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] .sim-panel-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 4px 5px !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] .sim-panel-head {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] .simulation-quick-actions {
  flex: 0 0 auto !important;
  gap: 12px !important;
  margin: auto 0 0 !important;
  padding-top: 10px !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] .simulation-start-sheet-host {
  flex: 0 0 auto !important;
  margin-top: 7px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] #simulation-start.sheet-simulation-start {
  margin-bottom: 0 !important;
}

/* Magnitude uses the compact "規模：M3.5" notation. */
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
  display: inline !important;
  color: rgba(230, 238, 255, 0.76) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span::after {
  content: "：";
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.9fr) !important;
}

/* Align the right edge and place the maximum-intensity label inside its card. */
.simulation-runtime-hud .simulation-summary {
  padding: 7px 14px 7px 6px !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-template-rows: minmax(0, 1fr) !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  display: none !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 14px 0 0 !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .max-shindo-card strong::before {
  content: "最大震度" !important;
  position: absolute !important;
  top: 5px !important;
  right: 0 !important;
  left: 0 !important;
  color: inherit !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  justify-self: end !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  width: auto !important;
  max-width: 100% !important;
  justify-self: end !important;
  text-align: right !important;
}

@media (max-width: 420px) {
  .simulation-runtime-hud .simulation-summary {
    padding: 6px 10px 6px 4px !important;
  }
}

/* Keep the information ticket geometry stable at every viewport width. */
.simulation-runtime-hud .simulation-summary {
  container-type: inline-size;
  grid-template-columns: clamp(78px, 22%, 106px) minmax(0, 1fr) !important;
  grid-template-rows: repeat(3, minmax(21px, auto)) !important;
  column-gap: clamp(6px, 2vw, 12px) !important;
  row-gap: 1px !important;
  min-height: 0 !important;
  padding: 4px clamp(8px, 2.4vw, 13px) !important;
}

.simulation-runtime-hud .max-shindo-card {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-rows: 15px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  display: block !important;
  align-self: end !important;
  font-size: clamp(0.65rem, 2.7cqw, 0.78rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  position: relative !important;
  display: grid !important;
  width: clamp(70px, 20cqw, 90px) !important;
  min-width: 0 !important;
  height: clamp(50px, 13.5cqw, 64px) !important;
  min-height: 0 !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  font-size: clamp(2.35rem, 10cqw, 3rem) !important;
  line-height: 1 !important;
}

.simulation-runtime-hud .max-shindo-card strong::before {
  content: none !important;
  display: none !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
.simulation-runtime-hud .simulation-depth-magnitude-row,
.simulation-runtime-hud .simulation-origin-time-card {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: clamp(4px, 1.5cqw, 8px) !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-template-columns: max-content max-content !important;
  justify-content: start !important;
  gap: clamp(5px, 2cqw, 12px) !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth) {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: clamp(4px, 1.5cqw, 7px) !important;
  min-width: 0 !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  justify-self: start !important;
  margin-left: 0 !important;
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: clamp(4px, 1.5cqw, 8px) !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  width: auto !important;
  max-width: none !important;
  justify-self: start !important;
  overflow: visible !important;
  font-size: clamp(0.78rem, 3.5cqw, 1rem) !important;
  font-variant-numeric: tabular-nums;
  text-align: left !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud #simulation-region-name {
  font-size: clamp(1.02rem, 4.6cqw, 1.34rem) !important;
}

.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  font-size: clamp(0.98rem, 4.15cqw, 1.22rem) !important;
  font-variant-numeric: tabular-nums;
}

.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card > span,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
  font-size: clamp(0.78rem, 3.25cqw, 0.94rem) !important;
}

@media (max-width: 350px) {
  .simulation-runtime-hud .simulation-summary {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding-right: 7px !important;
    padding-left: 5px !important;
  }

  .simulation-runtime-hud .max-shindo-card strong {
    width: 66px !important;
    height: 50px !important;
  }
}

/* Smooth source-sheet tracking and settling. */
#setup-panel.sim-panel {
  will-change: height, max-height;
  transition:
    height 260ms cubic-bezier(0.2, 0.82, 0.2, 1),
    max-height 260ms cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.82, 0.2, 1) !important;
}

#setup-panel .sheet-handle {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#setup-panel.sim-panel.is-dragging {
  height: var(--sheet-drag-height, 42px) !important;
  max-height: var(--sheet-drag-height, calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px)) !important;
  transition: none !important;
}

#setup-panel.sim-panel.is-dragging[data-sheet-state="collapsed"] > :not(.sheet-handle),
#setup-panel.sim-panel.is-dragging[data-sheet-state="closed"] > :not(.sheet-handle) {
  opacity: 1 !important;
  visibility: visible !important;
}

#setup-panel.sim-panel.is-dragging .sim-panel-scroll {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Slightly larger legend numerals and a slimmer desktop vertical legend. */
body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    box-sizing: border-box !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale {
    box-sizing: border-box !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    flex: 0 0 22px !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
    box-sizing: border-box !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 0.78rem !important;
  }
}

/* Match the information ticket to the timeline width and remove its legacy 92px floor. */
.simulation-runtime-hud .simulation-summary,
.simulation-runtime-hud .simulation-progress-panel {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

.simulation-runtime-hud .simulation-summary {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.simulation-runtime-hud .max-shindo-card {
  height: auto !important;
  min-height: 0 !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  font-size: 0.84rem !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  font-size: 2.85rem !important;
}

.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card > span,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
  font-size: 0.88rem !important;
}

.simulation-runtime-hud #simulation-region-name {
  font-size: 1.38rem !important;
  font-weight: 900 !important;
}

.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  font-size: 1.22rem !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 1rem !important;
  font-weight: 900 !important;
}

@media (max-width: 350px) {
  .simulation-runtime-hud .simulation-summary dt,
  .simulation-runtime-hud .simulation-origin-time-card > span,
  .simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
    font-size: 0.78rem !important;
  }

  .simulation-runtime-hud #simulation-region-name {
    font-size: 1.15rem !important;
  }

  .simulation-runtime-hud #simulation-depth,
  .simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
  .simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
  .simulation-runtime-hud #simulation-magnitude {
    font-size: 1.05rem !important;
  }

  .simulation-runtime-hud .simulation-origin-time-card strong {
    font-size: 0.82rem !important;
  }
}

/* Refine the runtime information ticket without changing the intensity-card footprint. */
.simulation-runtime-hud .simulation-summary {
  grid-template-rows: repeat(3, minmax(23px, auto)) !important;
  row-gap: 2px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.simulation-runtime-hud .max-shindo-card strong {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 2.65rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

.simulation-runtime-hud .max-shindo-card > span {
  font-size: 0.78rem !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth),
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card,
.simulation-runtime-hud .simulation-origin-time-card {
  align-items: baseline !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  gap: clamp(18px, 5cqw, 28px) !important;
}

.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-origin-time-card > span,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.simulation-runtime-hud #simulation-region-name {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-magnitude {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.simulation-runtime-hud .simulation-origin-time-card strong {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

@media (max-width: 350px) {
  .simulation-runtime-hud .max-shindo-card strong {
    font-size: 2.4rem !important;
  }

  .simulation-runtime-hud .simulation-depth-magnitude-row {
    gap: 12px !important;
  }
}

/* Use one typographic system for every information-ticket label/value pair. */
.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-summary dd,
.simulation-runtime-hud .simulation-origin-time-card > span,
.simulation-runtime-hud .simulation-origin-time-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card strong::before,
.simulation-runtime-hud #simulation-region-name,
.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud #simulation-magnitude {
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth),
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card,
.simulation-runtime-hud .simulation-origin-time-card {
  align-items: baseline !important;
}

/* Keep the existing card dimensions and optically lock the numeral to its center. */
.simulation-runtime-hud .max-shindo-card strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-stretch: normal !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.simulation-runtime-hud .max-shindo-card strong::before,
.simulation-runtime-hud .max-shindo-card strong::after {
  content: none !important;
  display: none !important;
}

.simulation-runtime-hud .max-shindo-card strong:is(
  [data-intensity-rank="5"],
  [data-intensity-rank="6"],
  [data-intensity-rank="7"],
  [data-intensity-rank="8"]
) {
  font-size: 1.8rem !important;
  letter-spacing: -0.08em !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .max-shindo-card strong[data-intensity-rank="0"] {
  font-size: 0 !important;
}

.simulation-runtime-hud .max-shindo-card strong[data-intensity-rank="0"]::after {
  content: "−" !important;
  display: block !important;
  margin: 0 !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Tint the information ticket with a diluted version of the observed intensity color. */
.simulation-runtime-hud .simulation-summary.has-observed-intensity {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--simulation-ticket-intensity-color) 30%, #17223d 70%),
      color-mix(in srgb, var(--simulation-ticket-intensity-color) 16%, #071126 84%)
    ) !important;
  border-color: color-mix(in srgb, var(--simulation-ticket-intensity-color) 42%, rgba(255, 255, 255, 0.18)) !important;
}

/* Extend the navigation backdrop beyond its box so nothing can show below it. */
.bottom-tabs {
  box-sizing: border-box !important;
  bottom: 0 !important;
  overflow: visible !important;
  background-color: #0f1010 !important;
}

.bottom-tabs::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: max(48px, env(safe-area-inset-bottom));
  background: #0f1010;
  pointer-events: none;
}

/* Learning content category switcher. */
.learning-category-switch {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 8px;
  background: rgba(14, 15, 15, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.learning-category-switch button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.66);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 850;
  cursor: pointer;
}

.learning-category-switch button[aria-selected="true"] {
  border-color: rgba(38, 217, 255, 0.72);
  background: rgba(38, 217, 255, 0.13);
  color: #5ee8ff;
}

.learning-category-panel {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.learning-category-panel.hidden {
  display: none !important;
}

.learning-category-panel > .learning-weather-section:first-child > .learning-section-heading {
  padding: 4px 2px 2px !important;
}

/* Use the phone pull-up limit at every viewport width. */
#setup-panel.setup-menu-open,
#setup-panel.sim-panel[data-sheet-state="open"] {
  top: auto !important;
  height: min(67svh, calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px)) !important;
  max-height: min(67svh, calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 16px)) !important;
}

#setup-panel.sim-panel.is-dragging {
  max-height: min(67svh, var(--sheet-drag-height, 67svh)) !important;
}

html[data-resolved-theme="light"] .learning-category-switch {
  background: rgba(248, 250, 252, 0.98);
}

html[data-resolved-theme="light"] .learning-category-switch button {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.62);
}

html[data-resolved-theme="light"] .learning-category-switch button[aria-selected="true"] {
  border-color: rgba(0, 138, 163, 0.58);
  background: rgba(0, 138, 163, 0.1);
  color: #007b91;
}

/* Keep learning content inside narrow mobile viewports. */
#learning-full-panel,
#learning-full-panel .learning-content,
#learning-full-panel .learning-content > *,
#learning-full-panel .learning-card,
#learning-full-panel .learning-intensity-list,
#learning-full-panel .learning-intensity-item,
#learning-full-panel .learning-weather-section,
#learning-full-panel .learning-typhoon-section,
#learning-full-panel .learning-warning-kind-table-wrap,
#learning-full-panel .learning-level-table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#learning-full-panel {
  width: 100% !important;
  overflow-x: hidden !important;
}

#learning-full-panel .learning-content {
  width: 100% !important;
}

#learning-full-panel .learning-intensity-item p,
#learning-full-panel .learning-card p,
#learning-full-panel .learning-section-heading p {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#learning-full-panel .learning-level-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
}

#learning-full-panel .learning-level-table thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#learning-full-panel .learning-level-table thead th:not(:first-child) {
  text-align: left !important;
}

#learning-full-panel .learning-level-table tbody th {
  text-align: center !important;
  vertical-align: middle !important;
}

#learning-full-panel .learning-level-table tbody td {
  text-align: left !important;
  vertical-align: middle !important;
}

/* Compact tool detail headers and give the content below more height. */
body.tool-station-search-mode #info-full-panel .tool-page-head,
body.tool-weather-quiz-mode #info-full-panel .tool-page-head {
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  min-height: 44px !important;
  padding: max(2px, env(safe-area-inset-top)) 12px 3px !important;
}

body.tool-station-search-mode #info-full-panel .tool-page-head h2,
body.tool-weather-quiz-mode #info-full-panel .tool-page-head h2 {
  font-size: 0.98rem !important;
}

body.tool-weather-quiz-mode #info-full-panel .tool-page-head h2 {
  white-space: nowrap !important;
}

body.tool-station-search-mode #info-full-panel .tool-page-back,
body.tool-weather-quiz-mode #info-full-panel .tool-page-back {
  width: 36px !important;
  height: 36px !important;
  font-size: 1.75rem !important;
}

body.tool-source-search-mode #history-full-panel .tool-page-head {
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  min-height: 48px !important;
  padding: max(3px, env(safe-area-inset-top)) 10px 5px !important;
}

body.tool-source-search-mode #history-full-panel .tool-page-head h2 {
  font-size: 1rem !important;
}

body.tool-source-search-mode #history-full-panel .tool-page-back {
  width: 38px !important;
  height: 38px !important;
  font-size: 1.8rem !important;
}

body.tool-source-search-mode #history-full-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.tool-source-search-mode #history-full-panel .history-stats-list {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px) !important;
}

@media (max-width: 640px) {
  #learning-full-panel .learning-content {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #learning-full-panel .learning-card,
  #learning-full-panel .learning-intensity-item {
    border-radius: 16px !important;
  }

  #learning-full-panel .learning-intensity-item {
    gap: 10px !important;
    padding: 10px !important;
  }
}

/* Tool directory descriptions and weather-forecaster quick quiz. */
#info-full-panel .tool-weather-quiz-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#info-full-panel .tool-weather-quiz-page.hidden {
  display: none !important;
}

.tool-menu-row {
  min-height: 76px !important;
  padding: 11px 22px !important;
}

.tool-menu-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
  padding-right: 14px !important;
}

.tool-menu-copy strong {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.tool-menu-row[data-tool-page="weather-quiz"] .tool-menu-copy strong {
  white-space: nowrap !important;
}

.tool-menu-copy small {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

.weather-quiz-content {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  width: min(720px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
  padding: 18px 0 calc(34px + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.weather-quiz-overview {
  display: grid !important;
  gap: 7px !important;
  border: 1px solid rgba(38, 217, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background: rgba(38, 217, 255, 0.055) !important;
}

.weather-quiz-overview.hidden {
  display: none !important;
}

.weather-quiz-overview strong {
  color: #8ff4ff !important;
  font-size: 0.82rem !important;
}

.weather-quiz-overview p,
.weather-quiz-loading {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.76rem !important;
  line-height: 1.65 !important;
}

.weather-quiz-loading {
  padding: 18px 4px !important;
  text-align: center !important;
}

.weather-quiz-loading.hidden,
.weather-quiz-card.hidden,
.weather-quiz-actions.hidden {
  display: none !important;
}

.learning-weather-section {
  display: grid !important;
  gap: 14px !important;
}

.learning-section-heading {
  padding: 18px 2px 2px !important;
}

.learning-section-heading h2 {
  margin: 6px 0 8px !important;
  color: #fff !important;
  font-size: 1.08rem !important;
}

.learning-section-heading p,
.learning-safety-note {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.8rem !important;
  line-height: 1.65 !important;
}

.learning-alert-grid {
  display: grid !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

/* Pull the three tsunami alert cards slightly closer to their introduction. */
.learning-tsunami-card > .learning-alert-grid {
  margin-top: 7px !important;
}

.learning-alert-item {
  display: grid !important;
  gap: 5px !important;
  border: 1px solid color-mix(in srgb, var(--learning-alert-color, #38bdf8) 42%, transparent) !important;
  border-left-width: 5px !important;
  border-radius: 14px !important;
  padding: 12px 13px !important;
  background: color-mix(in srgb, var(--learning-alert-color, #38bdf8) 9%, transparent) !important;
}

.learning-alert-item strong {
  color: #fff !important;
  font-size: 0.9rem !important;
}

.learning-alert-item span {
  color: var(--learning-alert-color, #7dd3fc) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

.learning-alert-item p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
}

.learning-alert-item.is-tsunami-advisory,
.learning-alert-item.is-level-2 { --learning-alert-color: #facc15; }
.learning-alert-item.is-tsunami-warning,
.learning-alert-item.is-level-3 { --learning-alert-color: #ef3340; }
.learning-alert-item.is-level-4 { --learning-alert-color: #c084fc; }
.learning-alert-item.is-major-tsunami,
.learning-alert-item.is-level-5 { --learning-alert-color: #a855f7; }

.learning-safety-note {
  margin-top: 12px !important;
}

.learning-level-table-wrap {
  margin-top: 12px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
}

.learning-warning-kind-table-wrap {
  margin-top: 12px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
}

.learning-warning-kind-table {
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: collapse !important;
  font-size: 0.76rem !important;
}

.learning-warning-kind-table th,
.learning-warning-kind-table td {
  padding: 12px 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.65 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.learning-warning-kind-table thead th {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.learning-warning-kind-table tbody th {
  width: 132px !important;
  text-align: center !important;
}

.learning-warning-kind-table tbody th span,
.learning-warning-kind-table tbody th small {
  display: block !important;
}

.learning-warning-kind-table tbody th span {
  color: var(--learning-warning-kind-color, #e2e8f0) !important;
  font-size: 0.84rem !important;
  font-weight: 950 !important;
}

.learning-warning-kind-table tbody th small {
  margin-top: 2px !important;
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 0.65rem !important;
  font-weight: 750 !important;
}

.learning-warning-kind-table tr.is-early { --learning-warning-kind-color: #dbeafe; }
.learning-warning-kind-table tr.is-advisory { --learning-warning-kind-color: #facc15; }
.learning-warning-kind-table tr.is-warning { --learning-warning-kind-color: #fb7185; }
.learning-warning-kind-table tr.is-danger { --learning-warning-kind-color: #c084fc; }
.learning-warning-kind-table tr.is-special { --learning-warning-kind-color: #d8b4fe; }

.learning-warning-kind-table tbody tr:last-child th,
.learning-warning-kind-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.learning-level-table {
  width: 100% !important;
  min-width: 940px !important;
  border-collapse: collapse !important;
  font-size: 0.76rem !important;
}

.learning-level-table th,
.learning-level-table td {
  padding: 11px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-align: left !important;
  vertical-align: top !important;
}

.learning-level-table thead th {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.learning-level-table tbody th {
  width: 58px !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  text-align: center !important;
}

.learning-level-table tbody tr.is-level-5 th { color: #d8b4fe !important; }
.learning-level-table tbody tr.is-level-4 th { color: #c084fc !important; }
.learning-level-table tbody tr.is-level-3 th { color: #fb7185 !important; }
.learning-level-table tbody tr.is-level-2 th { color: #facc15 !important; }
.learning-level-table tbody tr.is-level-1 th { color: #f8fafc !important; }

.learning-level-table tbody tr:last-child th,
.learning-level-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

html[data-resolved-theme="light"] .weather-quiz-overview p,
html[data-resolved-theme="light"] .weather-quiz-loading,
html[data-resolved-theme="light"] .learning-section-heading p,
html[data-resolved-theme="light"] .learning-safety-note,
html[data-resolved-theme="light"] .learning-alert-item p,
html[data-resolved-theme="light"] .learning-warning-kind-table th,
html[data-resolved-theme="light"] .learning-warning-kind-table td,
html[data-resolved-theme="light"] .learning-level-table th,
html[data-resolved-theme="light"] .learning-level-table td {
  color: rgba(15, 23, 42, 0.76) !important;
}

html[data-resolved-theme="light"] .learning-section-heading h2,
html[data-resolved-theme="light"] .learning-alert-item strong,
html[data-resolved-theme="light"] .learning-warning-kind-table thead th,
html[data-resolved-theme="light"] .learning-level-table thead th,
html[data-resolved-theme="light"] .learning-level-table tbody th {
  color: #111827 !important;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tbody th small {
  color: rgba(15, 23, 42, 0.56) !important;
}

/* Learning headings and focus-only slim scrollbar. */
#learning-full-panel {
  scrollbar-width: none !important;
}

#learning-full-panel:hover,
#learning-full-panel:focus-within {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(38, 217, 255, 0.48) transparent !important;
}

#learning-full-panel::-webkit-scrollbar {
  width: 0 !important;
}

#learning-full-panel:hover::-webkit-scrollbar,
#learning-full-panel:focus-within::-webkit-scrollbar {
  width: 4px !important;
}

#learning-full-panel::-webkit-scrollbar-track {
  background: transparent !important;
}

#learning-full-panel::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(38, 217, 255, 0.48) !important;
}

.learning-hero {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 2px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Weather forecaster quiz setup, self-grading, and results. */
#weather-quiz-stage {
  display: grid !important;
  gap: 14px !important;
}

.weather-quiz-setup {
  display: grid !important;
  gap: 14px !important;
}

.weather-quiz-setup fieldset {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 17px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.weather-quiz-setup legend,
.weather-quiz-count-field > span {
  padding: 0 5px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.weather-quiz-setup fieldset > small,
.weather-quiz-count-field > small {
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 0.69rem !important;
}

.weather-quiz-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.weather-quiz-year-grid {
  grid-template-columns: 1fr !important;
}

.weather-quiz-choice-grid.weather-quiz-category-grid label > span {
  justify-content: flex-start !important;
  text-align: left !important;
}

.weather-quiz-choice-grid.weather-quiz-mode-grid label > span {
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.weather-quiz-choice-grid.weather-quiz-mode-grid label > span > b {
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: left !important;
}

.weather-quiz-choice-grid label {
  position: relative !important;
  min-width: 0 !important;
  cursor: pointer !important;
}

.weather-quiz-choice-grid input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.weather-quiz-choice-grid label > span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 13px !important;
  padding: 9px 11px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.8rem !important;
  font-weight: 850 !important;
}

.weather-quiz-choice-grid label > span::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 5px !important;
}

.weather-quiz-choice-grid input:checked + span {
  border-color: rgba(38, 217, 255, 0.52) !important;
  background: rgba(38, 217, 255, 0.11) !important;
  color: #eaffff !important;
}

.weather-quiz-choice-grid input:checked + span::before {
  border-color: #26d9ff !important;
  background: #26d9ff !important;
  box-shadow: inset 0 0 0 3px #08232a !important;
}

.weather-quiz-choice-grid span small {
  margin-left: auto !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-size: 0.66rem !important;
}

.weather-quiz-count-field {
  display: grid !important;
  grid-template-columns: 1fr 84px auto !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 17px !important;
  padding: 13px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.weather-quiz-count-field input {
  width: 84px !important;
  height: 40px !important;
  border: 1px solid rgba(38, 217, 255, 0.32) !important;
  border-radius: 12px !important;
  padding: 0 10px !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.weather-quiz-start,
.weather-quiz-next,
.weather-quiz-restart {
  min-height: 44px !important;
  border: 1px solid rgba(38, 217, 255, 0.42) !important;
  border-radius: 14px !important;
  padding: 9px 16px !important;
  background: linear-gradient(180deg, rgba(38, 217, 255, 0.28), rgba(38, 217, 255, 0.14)) !important;
  color: #dffcff !important;
  font-weight: 900 !important;
}

.weather-quiz-start:disabled {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.32) !important;
  cursor: not-allowed !important;
}

.weather-quiz-count-field input:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

.weather-quiz-leave-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30050 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 22px !important;
  background: rgba(0, 5, 8, 0.76) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.weather-quiz-leave-dialog {
  width: min(100%, 390px) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(80, 224, 245, 0.28) !important;
  border-radius: 20px !important;
  padding: 22px 20px 18px !important;
  background: linear-gradient(160deg, rgba(23, 31, 35, 0.98), rgba(8, 12, 14, 0.99)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.56) !important;
  color: #fff !important;
}

.weather-quiz-leave-dialog h2 {
  margin: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
}

.weather-quiz-leave-dialog p {
  margin: 10px 0 18px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.86rem !important;
  line-height: 1.7 !important;
}

.weather-quiz-leave-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.weather-quiz-leave-actions button {
  min-height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 900 !important;
}

.weather-quiz-leave-actions [data-weather-quiz-leave-yes] {
  border-color: rgba(255, 82, 109, 0.48) !important;
  background: rgba(255, 65, 93, 0.14) !important;
  color: #ffb3bf !important;
}

body.weather-quiz-leave-open {
  overflow: hidden !important;
}

.weather-quiz-setup-error {
  min-height: 1em !important;
  margin: -5px 3px !important;
  color: #ff8da1 !important;
  font-size: 0.73rem !important;
}

.weather-quiz-progress-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

.weather-quiz-progress {
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.weather-quiz-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #26d9ff !important;
}

.weather-quiz-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.weather-quiz-meta span {
  border: 1px solid rgba(38, 217, 255, 0.24) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  background: rgba(38, 217, 255, 0.075) !important;
  color: #8ff4ff !important;
  font-size: 0.67rem !important;
  font-weight: 850 !important;
}

.weather-quiz-judgment {
  display: grid !important;
  gap: 8px !important;
}

.weather-quiz-judgment > p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.73rem !important;
  text-align: center !important;
}

.weather-quiz-judgment > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.weather-quiz-judgment button {
  min-height: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 900 !important;
}

.weather-quiz-judgment button b {
  margin-right: 5px !important;
  font-size: 1.25rem !important;
}

.weather-quiz-judgment button.is-correct b { color: #35e09a !important; }
.weather-quiz-judgment button.is-wrong b { color: #ff667f !important; }
.weather-quiz-judgment button.is-selected.is-correct { border-color: #35e09a !important; background: rgba(53, 224, 154, 0.12) !important; }
.weather-quiz-judgment button.is-selected.is-wrong { border-color: #ff667f !important; background: rgba(255, 102, 127, 0.12) !important; }
.weather-quiz-judgment button:disabled { opacity: 0.68 !important; }

.weather-quiz-fill-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.weather-quiz-fill-options button {
  min-height: 56px !important;
  padding: 9px 12px !important;
  line-height: 1.4 !important;
}

.weather-quiz-fill-options button.is-correct-answer {
  border-color: #35e09a !important;
  background: rgba(53, 224, 154, 0.12) !important;
  color: #b9ffdf !important;
  opacity: 1 !important;
}

.weather-quiz-fill-options button.is-selected.is-wrong {
  border-color: #ff667f !important;
  background: rgba(255, 102, 127, 0.12) !important;
  color: #ffc1cb !important;
  opacity: 1 !important;
}

@media (max-width: 520px) {
  .weather-quiz-fill-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.weather-quiz-judgment.hidden,
.weather-quiz-next.hidden,
.weather-quiz-actions button.hidden {
  display: none !important;
}

.weather-quiz-results {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  border: 1px solid rgba(38, 217, 255, 0.24) !important;
  border-radius: 20px !important;
  padding: 22px 16px !important;
  background: rgba(38, 217, 255, 0.065) !important;
}

.weather-quiz-results > span,
.weather-quiz-results > p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 0.76rem !important;
}

.weather-quiz-results > strong {
  color: #8ff4ff !important;
  font-size: 2.25rem !important;
}

.weather-quiz-results > strong small {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.82rem !important;
}

.weather-quiz-history {
  display: grid !important;
  gap: 8px !important;
}

.weather-quiz-history h3 {
  margin: 3px 0 !important;
  color: #fff !important;
  font-size: 0.92rem !important;
}

.weather-quiz-history article {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 11px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.weather-quiz-history article > b {
  color: #35e09a !important;
  font-size: 1.25rem !important;
  text-align: center !important;
}

.weather-quiz-history article.is-wrong > b { color: #ff667f !important; }
.weather-quiz-history article span { color: rgba(255, 255, 255, 0.52) !important; font-size: 0.66rem !important; }
.weather-quiz-history article p { margin: 5px 0 !important; color: rgba(255, 255, 255, 0.88) !important; font-size: 0.78rem !important; line-height: 1.55 !important; }
.weather-quiz-history article small { color: #9ceef8 !important; font-size: 0.72rem !important; line-height: 1.5 !important; }

html[data-resolved-theme="light"] .weather-quiz-setup legend,
html[data-resolved-theme="light"] .weather-quiz-count-field > span,
html[data-resolved-theme="light"] .weather-quiz-choice-grid label > span,
html[data-resolved-theme="light"] .weather-quiz-count-field input,
html[data-resolved-theme="light"] .weather-quiz-history h3,
html[data-resolved-theme="light"] .weather-quiz-history article p {
  color: #111827 !important;
}

html[data-resolved-theme="light"] .weather-quiz-setup fieldset,
html[data-resolved-theme="light"] .weather-quiz-count-field,
html[data-resolved-theme="light"] .weather-quiz-history article {
  border-color: rgba(15, 23, 42, 0.13) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.weather-quiz-category {
  justify-self: start !important;
  margin: 0 !important;
  border: 1px solid rgba(38, 217, 255, 0.35) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  background: rgba(38, 217, 255, 0.12) !important;
  color: #7ceeff !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
}

.weather-quiz-card {
  display: grid !important;
  gap: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2) !important;
}

.weather-quiz-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
}

.weather-quiz-question,
.weather-quiz-answer-text {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(0.98rem, 2.8vw, 1.12rem) !important;
  font-weight: 850 !important;
  line-height: 1.75 !important;
  overflow-wrap: anywhere !important;
}

.weather-quiz-question {
  white-space: pre-line;
}

.weather-quiz-answer {
  display: grid !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 14px !important;
}

.weather-quiz-proposed-answer {
  display: grid !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 14px !important;
}

.weather-quiz-answer strong {
  color: #35e09a !important;
  font-size: 0.9rem !important;
}

.weather-quiz-answer.is-wrong strong {
  color: #ff667f !important;
}

.weather-quiz-answer span {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
}

.weather-quiz-answer p {
  margin: 0 !important;
  color: #a4f5ff !important;
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  white-space: pre-line !important;
}

.weather-quiz-answer.hidden {
  display: none !important;
}

.weather-quiz-answer-text {
  color: #a4f5ff !important;
}

.weather-quiz-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.weather-quiz-actions button {
  min-height: 44px !important;
  border: 1px solid rgba(38, 217, 255, 0.34) !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  background: rgba(38, 217, 255, 0.12) !important;
  color: #e8fbff !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
}

.weather-quiz-actions button:last-child {
  background: linear-gradient(180deg, rgba(38, 217, 255, 0.28), rgba(38, 217, 255, 0.14)) !important;
  color: #8ff4ff !important;
}

.weather-quiz-actions button:disabled {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

.weather-quiz-note {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 0.68rem !important;
  line-height: 1.6 !important;
}

html[data-resolved-theme="light"] .tool-menu-copy strong,
html[data-resolved-theme="light"] .weather-quiz-question,
html[data-resolved-theme="light"] .weather-quiz-answer-text {
  color: rgba(15, 23, 42, 0.94) !important;
}

html[data-resolved-theme="light"] .tool-menu-copy small,
html[data-resolved-theme="light"] .weather-quiz-label,
html[data-resolved-theme="light"] .weather-quiz-note {
  color: rgba(15, 23, 42, 0.58) !important;
}

/* The question view has one primary reveal action. */
.weather-quiz-actions {
  grid-template-columns: 1fr !important;
}

/* Flat required-tag colors with a clear marker outline. */
.community-post-marker {
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  background: #069fb7 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72), 0 5px 12px rgba(0, 0, 0, 0.38) !important;
}

.community-post-marker[data-community-tag="weather"] {
  background: #138ed3 !important;
}

.community-post-marker[data-community-tag="disaster"] {
  background: #d6263c !important;
}

.community-post-marker[data-community-tag="earthquake"] {
  background: #26a85c !important;
}

.community-post-marker[data-community-tag="safety"] {
  background: #d8ae18 !important;
}

.community-post-marker.is-count {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.community-post-marker.is-count.is-tag-group {
  width: auto !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.community-post-marker-count {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: #069fb7;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72), 0 5px 12px rgba(0, 0, 0, 0.38);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.community-post-marker-count[data-community-tag="weather"] {
  background: #138ed3;
}

.community-post-marker-count[data-community-tag="disaster"] {
  background: #d6263c;
}

.community-post-marker-count[data-community-tag="earthquake"] {
  background: #26a85c;
}

.community-post-marker-count[data-community-tag="safety"] {
  background: #d8ae18;
}

/* Place one divider exactly halfway between account actions and status cards. */
.community-account-panel {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.community-account-status:empty {
  display: none !important;
}

.settings-status-group {
  position: relative !important;
  margin-top: 28px !important;
}

.settings-status-group::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* Optically center the three long settings pages within the visible viewport. */
.settings-menu-sheet.settings-detail-open #settings-source-panel .source-info-overlay-content,
.settings-menu-sheet.settings-detail-open #settings-privacy-panel .settings-privacy-content,
.settings-menu-sheet.settings-detail-open #settings-admin-panel .settings-admin-embedded {
  width: calc(100% - 32px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transform: translateX(3px) !important;
}

/* Keep the first admin action clear of the detail header. */
.settings-menu-sheet.settings-detail-open #settings-admin-panel .settings-admin-embedded {
  padding-top: 16px !important;
}

/* Use a short, clearly horizontal feedback action. */
.settings-inline-panel.settings-detail-panel .settings-feedback-form .feedback-submit {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 26px !important;
  justify-self: end !important;
  line-height: 1 !important;
}

/* Single clean vectors: no fallback glyphs or overlapping icon layers on iOS. */
#bottom-history-tab .bottom-tab-icon,
#bottom-info-tab .bottom-tab-icon,
#bottom-settings-tab .bottom-tab-icon {
  font-size: 0 !important;
  line-height: 0 !important;
}

#bottom-history-tab .bottom-tab-icon::before,
#bottom-info-tab .bottom-tab-icon::before,
#bottom-settings-tab .bottom-tab-icon::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  inset: auto !important;
  left: 2px !important;
  top: 2px !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
}

#bottom-history-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") !important;
}

#bottom-info-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18'/%3E%3C/svg%3E") !important;
}

#bottom-settings-tab .bottom-tab-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7M14 6h7M3 12h3M10 12h11M3 18h9M16 18h5'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Ccircle cx='14' cy='18' r='2'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7M14 6h7M3 12h3M10 12h11M3 18h9M16 18h5'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Ccircle cx='14' cy='18' r='2'/%3E%3C/svg%3E") !important;
}

#bottom-history-tab .bottom-tab-icon::after,
#bottom-info-tab .bottom-tab-icon::after,
#bottom-settings-tab .bottom-tab-icon::after {
  content: none !important;
  display: none !important;
}

/* Keep all three information-ticket rows on an even vertical rhythm. */
.simulation-runtime-hud .simulation-summary {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  row-gap: 0 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name),
.simulation-runtime-hud .simulation-depth-magnitude-row,
.simulation-runtime-hud .simulation-origin-time-card {
  align-self: center !important;
  margin-block: 0 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) dt,
.simulation-runtime-hud #simulation-region-name {
  font-size: 0.96rem !important;
}

/* Keep the EEW warning list directly below the persistent layer control. */
body[data-active-bottom-tab="earthquake-tab"] .eew-forecast-panel {
  position: fixed !important;
  z-index: 14000 !important;
  top: calc(max(8px, env(safe-area-inset-top)) + 37px) !important;
  right: auto !important;
  bottom: auto !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  width: min(300px, calc(100vw - 16px)) !important;
  min-width: 0 !important;
  max-height: min(320px, calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 62px)) !important;
}

.map-layer-control-button {
  z-index: 14610 !important;
}

.map-layer-control-panel {
  z-index: 14620 !important;
}

/* Running controls: black pause and red cancel, split into equal halves. */
body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .setup-result-section {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-summary,
body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-progress-panel {
  grid-column: 1 / -1 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-summary {
  grid-row: 1 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-progress-panel {
  grid-row: 2 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-timeline-controls {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud #simulation-rewind {
  display: none !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-actions {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  margin: 0 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-pause,
body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-stop {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-pause {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: #17191d !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-stop {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, #f13462, #c91849) !important;
  color: #ffffff !important;
}

/* Give each epicenter action a full row below the source-settings heading. */
#setup-panel .setup-epicenter-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

#setup-panel .setup-epicenter-actions .toggle-row {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#setup-panel .setup-epicenter-actions .setup-current-location-button {
  grid-column: 1 / -1 !important;
}

#setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle) {
  color: #e8f1f8 !important;
  font-weight: 900 !important;
}

html[data-resolved-theme="light"]
  #setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle) {
  color: #1e293b !important;
}

#setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle) > span {
  font-weight: 900 !important;
}

#setup-panel .setup-current-location-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--pill-radius) !important;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)), rgba(255, 255, 255, 0.055) !important;
  color: rgba(226, 236, 244, 0.74) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease !important;
}

#setup-panel .setup-current-location-button:hover,
#setup-panel .setup-current-location-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.58) !important;
  color: #ffffff !important;
  outline: none !important;
}

#setup-panel .setup-current-location-button[aria-busy="true"] {
  border-color: rgba(125, 211, 252, 0.42) !important;
  color: #e8fbff !important;
}

#setup-panel .setup-current-location-button.is-error {
  border-color: rgba(251, 113, 133, 0.48) !important;
  color: #fecdd3 !important;
}

#setup-panel .setup-current-location-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
  transform: none !important;
}

/* Current-position marker shared by the simulation and community maps. */
.current-location-marker {
  z-index: 500 !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #168cff !important;
  box-shadow: 0 0 0 5px rgba(22, 140, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.42) !important;
  color: transparent !important;
  filter: none !important;
}

.current-location-marker::before {
  content: "" !important;
}

/* Completed simulation: green result action and an in-menu report page. */
body.simulation-session-complete .simulation-runtime-hud #simulation-result {
  border-color: rgba(74, 222, 128, 0.58) !important;
  background: linear-gradient(180deg, #22c55e, #15803d) !important;
  color: #ffffff !important;
}

body.simulation-session-active.simulation-result-report-visible .map-wrap > .simulation-runtime-hud {
  display: none !important;
}

body.simulation-session-active.simulation-result-report-visible #setup-panel {
  display: block !important;
}

#setup-panel.simulation-result-report-open .sim-panel-scroll > :not(.simulation-result-report-page) {
  display: none !important;
}

#setup-panel.simulation-result-report-open .sim-panel-head {
  display: none !important;
}

#setup-panel.simulation-result-report-open {
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
  height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  padding-top: 7px !important;
  transform: translate(-50%, 0) !important;
  transition: none !important;
}

#setup-panel.simulation-result-report-open .sheet-handle {
  display: none !important;
}

#setup-panel.simulation-result-report-open .sim-panel-scroll {
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

#setup-panel .simulation-result-report-page {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 0 2px 8px;
}

#setup-panel .simulation-result-report-page.hidden {
  display: none !important;
}

.simulation-result-report-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.simulation-result-report-head h3 {
  margin: 0;
  text-align: center;
  font-size: 1rem;
}

.simulation-result-report-head button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 1.8rem;
  cursor: pointer;
}

.simulation-result-report-content {
  display: grid;
  min-width: 0;
  gap: 12px;
}

/* Use the actual live HUD ticket without keeping its map-fixed positioning. */
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-result-report-runtime-hud {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.simulation-result-report-summary-host .simulation-summary {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  align-self: start !important;
  align-content: stretch !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

/* Prevent setup-menu card rules from stretching the live ticket after it is mounted here. */
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-summary {
  column-gap: clamp(6px, 2vw, 12px) !important;
  row-gap: 0 !important;
}

/* Keep the result ticket's depth/magnitude row on the same baseline as the live ticket. */
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-depth-magnitude-row {
  align-self: center !important;
  min-height: 0 !important;
  line-height: 1.15 !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-depth-magnitude-row > div,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-depth-magnitude-row .magnitude-card,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-depth-magnitude-row .magnitude-card strong {
  align-items: baseline !important;
  line-height: 1.15 !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-summary > * {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .magnitude-card {
  height: auto !important;
  min-height: 0 !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card strong {
  font-size: 2.65rem !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card strong:is(
    [data-intensity-rank="5"],
    [data-intensity-rank="6"],
    [data-intensity-rank="7"],
    [data-intensity-rank="8"]
  ) {
  font-size: 1.8rem !important;
  letter-spacing: -0.08em !important;
  white-space: nowrap !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .magnitude-card strong {
  height: auto !important;
  min-height: 0 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card > span,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .magnitude-card > span {
  font-size: 0.8rem !important;
}

.simulation-result-report-summary,
.simulation-result-report-stations {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.simulation-result-report-summary {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
}

.simulation-result-report-intensity {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
}

.simulation-result-report-intensity span,
.simulation-result-report-summary dt {
  color: rgba(226, 236, 244, 0.72);
  font-size: 0.75rem;
  font-weight: 800;
}

.simulation-result-report-intensity strong {
  display: grid;
  min-width: 68px;
  min-height: 58px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 2rem;
}

.simulation-result-report-summary dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.simulation-result-report-summary dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.simulation-result-report-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.simulation-result-report-stations h4 {
  margin: 0 0 9px;
  font-size: 0.9rem;
}

.simulation-result-station-groups {
  display: grid;
  gap: 12px;
}

.simulation-result-station-group {
  display: grid;
  gap: 8px;
}

.simulation-result-station-group + .simulation-result-station-group {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.simulation-result-station-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.simulation-result-station-group header b {
  display: inline-grid;
  min-width: 62px;
  min-height: 30px;
  place-items: center;
  border-radius: 8px;
  padding: 4px 9px;
  background: var(--simulation-intensity-color);
  color: var(--simulation-intensity-text);
  font-size: 0.82rem;
}

.simulation-result-station-group header span {
  color: rgba(226, 236, 244, 0.7);
  font-size: 0.75rem;
  font-weight: 800;
}

.simulation-result-station-group ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.84rem;
}

.simulation-result-station-group li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.simulation-result-stations-empty {
  margin: 0;
  color: rgba(226, 236, 244, 0.7);
  font-size: 0.84rem;
}

.simulation-result-report-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.simulation-result-report-actions button {
  min-height: 46px;
  border: 1px solid rgba(74, 222, 128, 0.48);
  border-radius: 14px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 420px) {
  .simulation-result-report-summary {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 10px;
  }

  .simulation-result-report-summary dl > div {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}

@media print {
  body.printing-simulation-result * {
    visibility: hidden !important;
  }

  body.printing-simulation-result #simulation-result-report-page,
  body.printing-simulation-result #simulation-result-report-page * {
    visibility: visible !important;
  }

  body.printing-simulation-result #simulation-result-report-page {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    align-content: start !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12mm !important;
    background: #ffffff !important;
    color: #111827 !important;
  }

  body.printing-simulation-result #setup-panel,
  body.printing-simulation-result #setup-panel .sim-panel-scroll {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.printing-simulation-result .simulation-result-report-head button,
  body.printing-simulation-result .simulation-result-report-actions {
    display: none !important;
  }

  body.printing-simulation-result .simulation-result-report-summary,
  body.printing-simulation-result .simulation-result-report-stations {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
  }

  body.printing-simulation-result .simulation-result-report-intensity span,
  body.printing-simulation-result .simulation-result-report-summary dt {
    color: #475569 !important;
  }
}

/* Startup geolocation permission request. */
.startup-location-permission-overlay {
  position: fixed;
  inset: 0;
  z-index: 32000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(1, 5, 14, 0.78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.startup-location-permission-dialog {
  display: grid;
  width: min(100%, 390px);
  gap: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 20px;
  padding: 22px;
  background: rgba(6, 12, 29, 0.98);
  color: #f8fbff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.startup-location-permission-icon {
  justify-self: center;
  width: 24px;
  height: 24px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: #168cff;
  box-shadow: 0 0 0 9px rgba(22, 140, 255, 0.2);
}

.startup-location-permission-dialog h2 {
  margin: 4px 0 0;
  font-size: 1.12rem;
}

.startup-location-permission-dialog p {
  margin: 0;
  color: rgba(226, 236, 244, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}

.startup-location-permission-dialog .startup-location-permission-status {
  min-height: 1.35em;
  color: #bae6fd;
  font-size: 0.78rem;
}

.startup-location-permission-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 9px;
  margin-top: 2px;
}

.startup-location-permission-actions button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
}

.startup-location-permission-actions [data-location-permission-allow] {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(180deg, #168cff, #0865c7);
}

.startup-location-permission-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

/* Show the current magnitude status inline without expanding the information ticket. */
.simulation-magnitude-status {
  display: none !important;
}

/* Lift the maximum-intensity label and card together without moving the other fields. */
.simulation-runtime-hud .max-shindo-card {
  transform: translateY(-3px) !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  gap: 2px !important;
}

body.simulation-session-active:not(.simulation-session-complete) .simulation-runtime-hud .simulation-magnitude-preliminary,
body.simulation-session-complete .simulation-runtime-hud .simulation-magnitude-confirmed {
  display: inline !important;
  flex: 0 0 auto !important;
  margin-left: 1px !important;
  font-size: 0.86em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

/* Information ticket: epicenter on row one, then depth and magnitude on row two. */
.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  display: block !important;
  min-width: 0 !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) dt,
.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth) dt,
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card > span,
.simulation-runtime-hud .simulation-origin-time-card > span {
  display: none !important;
}

.simulation-runtime-hud #simulation-region-name {
  display: block !important;
  overflow: hidden !important;
  font-size: clamp(1.1rem, 4.6cqw, 1.3rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row {
  grid-row: 2 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.simulation-runtime-hud .simulation-summary > div:has(#simulation-region-name) {
  grid-row: 1 !important;
  align-self: center !important;
}

.simulation-runtime-hud .simulation-origin-time-card {
  grid-row: 3 !important;
  align-self: center !important;
}

.simulation-runtime-hud .simulation-depth-magnitude-row > div:has(#simulation-depth),
.simulation-runtime-hud .simulation-depth-magnitude-row .magnitude-card {
  gap: 0 !important;
}

/* Center the intensity numeral optically as well as geometrically. */
.simulation-runtime-hud .max-shindo-card strong,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card strong {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 0 3px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Light frosted surfaces for source setup and the running simulation menu. */
#setup-panel.sim-panel:not(.simulation-result-report-open) {
  border-color: rgba(51, 65, 85, 0.22) !important;
  background: rgba(241, 245, 249, 0.95) !important;
  color: #172033 !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.28) !important;
}

#setup-panel.sim-panel:not(.simulation-result-report-open)::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(226, 232, 240, 0.16) 45%) !important;
}

#setup-panel:not(.simulation-result-report-open) .sheet-handle,
.simulation-runtime-handle {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: rgba(241, 245, 249, 0.97) !important;
}

#setup-panel:not(.simulation-result-report-open) .sheet-handle::after,
.simulation-runtime-handle::after {
  background: rgba(71, 85, 105, 0.72) !important;
  box-shadow: none !important;
}

#setup-panel:not(.simulation-result-report-open) .settings-section,
#setup-panel:not(.simulation-result-report-open) .field input,
#setup-panel:not(.simulation-result-report-open) .field select,
#setup-panel:not(.simulation-result-report-open) .preset-picker-button,
#setup-panel:not(.simulation-result-report-open) .settings-tabs,
#setup-panel:not(.simulation-result-report-open) .toggle-grid .toggle-row {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1e293b !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 5px 16px rgba(15, 23, 42, 0.06) !important;
}

#setup-panel:not(.simulation-result-report-open) .field,
#setup-panel:not(.simulation-result-report-open) .settings-section h3,
#setup-panel:not(.simulation-result-report-open) .settings-tab {
  color: rgba(30, 41, 59, 0.7) !important;
}

#setup-panel:not(.simulation-result-report-open) .settings-tab.is-active {
  border-color: rgba(2, 132, 199, 0.3) !important;
  background: rgba(14, 165, 233, 0.13) !important;
  color: #075985 !important;
}

#setup-panel:not(.simulation-result-report-open) .setup-current-location-button {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #334155 !important;
}

#setup-panel:not(.simulation-result-report-open) .control-separator {
  background: rgba(51, 65, 85, 0.16) !important;
}

.simulation-runtime-hud .setup-result-section {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: rgba(241, 245, 249, 0.96) !important;
  color: #172033 !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.3) !important;
}

.simulation-runtime-hud .simulation-summary,
.simulation-runtime-hud .simulation-progress-track {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: #1e293b !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9) !important;
}

.simulation-runtime-hud .simulation-summary dt,
.simulation-runtime-hud .simulation-summary dd,
.simulation-runtime-hud .simulation-progress-head,
.simulation-runtime-hud .simulation-progress-head strong,
.simulation-runtime-hud #simulation-region-name,
.simulation-runtime-hud #simulation-depth,
.simulation-runtime-hud #simulation-magnitude,
.simulation-runtime-hud .simulation-origin-time-card strong {
  color: #1e293b !important;
}

.simulation-runtime-hud .simulation-progress-canvas::before {
  background: rgba(71, 85, 105, 0.3) !important;
  box-shadow: none !important;
}

.simulation-runtime-hud .simulation-timeline-event {
  color: #334155 !important;
}

/* Balance the light sheets with stronger contrast and wider inner content. */
#setup-panel.sim-panel:not(.simulation-result-report-open) {
  background: rgba(211, 221, 231, 0.96) !important;
}

#setup-panel.sim-panel:not(.simulation-result-report-open)::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(238, 244, 248, 0.5), rgba(148, 163, 184, 0.1) 58%) !important;
}

#setup-panel:not(.simulation-result-report-open) .sheet-handle {
  background: rgba(211, 221, 231, 0.98) !important;
}

#setup-panel.sim-panel[data-sheet-state="open"] .sim-panel-scroll,
#setup-panel:not(.simulation-result-report-open) .sim-panel-scroll {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#setup-panel:not(.simulation-result-report-open) .settings-section {
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  background: rgba(235, 241, 246, 0.78) !important;
}

#setup-panel:not(.simulation-result-report-open) .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#setup-panel:not(.simulation-result-report-open) .field,
#setup-panel:not(.simulation-result-report-open) .field input,
#setup-panel:not(.simulation-result-report-open) .field select {
  min-width: 0 !important;
  max-width: 100% !important;
}

#setup-panel:not(.simulation-result-report-open) .field input,
#setup-panel:not(.simulation-result-report-open) .field select {
  border-color: rgba(51, 65, 85, 0.24) !important;
  background: rgba(248, 250, 252, 0.92) !important;
  color: #172033 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 23, 42, 0.07) !important;
}

#setup-panel:not(.simulation-result-report-open) .simulation-quick-actions,
#setup-panel:not(.simulation-result-report-open) .simulation-start-sheet-host {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

#setup-panel:not(.simulation-result-report-open)
  .simulation-quick-actions #historical-earthquake-button {
  border-color: rgba(30, 64, 175, 0.42) !important;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(29, 78, 216, 0.22), inset 0 1px rgba(255, 255, 255, 0.24) !important;
}

#setup-panel:not(.simulation-result-report-open)
  .simulation-quick-actions .sheet-speech-toggle {
  border-color: rgba(14, 116, 144, 0.42) !important;
  background: linear-gradient(180deg, #1594ad, #0e7490) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(14, 116, 144, 0.2), inset 0 1px rgba(255, 255, 255, 0.2) !important;
}

#setup-panel:not(.simulation-result-report-open)
  .simulation-quick-actions .sheet-speech-toggle.is-muted {
  border-color: rgba(71, 85, 105, 0.42) !important;
  background: linear-gradient(180deg, #64748b, #475569) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(51, 65, 85, 0.18), inset 0 1px rgba(255, 255, 255, 0.18) !important;
}

#setup-panel:not(.simulation-result-report-open) .setup-current-location-button,
#setup-panel:not(.simulation-result-report-open) .toggle-grid .toggle-row {
  border-color: rgba(51, 65, 85, 0.26) !important;
  background: rgba(248, 250, 252, 0.84) !important;
  color: #1e293b !important;
}

.simulation-runtime-handle,
.simulation-runtime-hud .setup-result-section {
  background: rgba(211, 221, 231, 0.96) !important;
}

.simulation-runtime-hud .simulation-summary,
.simulation-runtime-hud .simulation-progress-track {
  background: rgba(238, 243, 247, 0.86) !important;
}

/* Admin notification spacing. */
.settings-admin-embedded .admin-mode-field:has(#admin-notification-body),
.admin-notification-panel .admin-mode-field:has(#admin-notification-body) {
  margin-bottom: 8px !important;
}

/* Match the information-ticket text to the active intensity color. */
.simulation-runtime-hud .simulation-summary.has-observed-intensity,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--simulation-ticket-intensity-color) 78%, #f1f5f9 22%),
      color-mix(in srgb, var(--simulation-ticket-intensity-color) 62%, #e2e8f0 38%)
    ) !important;
  border-color: color-mix(in srgb, var(--simulation-ticket-intensity-color) 72%, #475569 28%) !important;
  color: var(--simulation-ticket-intensity-text, #1f2937) !important;
}

/* Keep the information ticket frame continuous on every edge. */
.simulation-runtime-hud .simulation-summary,
.simulation-result-report-summary-host .simulation-summary {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  box-shadow: none !important;
}

.simulation-runtime-hud .simulation-summary.has-observed-intensity dt,
.simulation-runtime-hud .simulation-summary.has-observed-intensity dd,
.simulation-runtime-hud .simulation-summary.has-observed-intensity #simulation-region-name,
.simulation-runtime-hud .simulation-summary.has-observed-intensity #simulation-depth,
.simulation-runtime-hud .simulation-summary.has-observed-intensity #simulation-magnitude,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .simulation-origin-time-card strong,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .simulation-magnitude-status,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity dt,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity dd,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity #simulation-region-name,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity #simulation-depth,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity #simulation-magnitude,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .simulation-origin-time-card strong,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .simulation-magnitude-status {
  color: var(--simulation-ticket-intensity-text, #1f2937) !important;
}

/* Orange current-time cursor. */
.simulation-progress-now,
.simulation-runtime-hud .simulation-progress-now {
  background: #f97316 !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.86) !important;
}

.simulation-progress-now::before,
.simulation-runtime-hud .simulation-progress-now::before {
  border-top-color: #f97316 !important;
}

/* Completed simulation: show the source-setting and result actions side by side. */
body.simulation-session-complete .simulation-runtime-hud #simulation-pause {
  grid-column: 1 !important;
  border-color: rgba(37, 99, 235, 0.58) !important;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(29, 78, 216, 0.24) !important;
}

body.simulation-session-complete .simulation-runtime-hud #simulation-result {
  grid-column: 2 !important;
  border-color: rgba(74, 222, 128, 0.58) !important;
  background: linear-gradient(180deg, #22c55e, #15803d) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 18px rgba(21, 128, 61, 0.24) !important;
}

/* Use the same light-gray basis for the result/PDF export menu. */
#setup-panel.simulation-result-report-open {
  border-color: rgba(51, 65, 85, 0.22) !important;
  background: rgba(211, 221, 231, 0.97) !important;
  color: #172033 !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.28) !important;
}

#setup-panel.simulation-result-report-open .simulation-result-report-head {
  border-bottom-color: rgba(51, 65, 85, 0.18) !important;
}

#setup-panel.simulation-result-report-open .simulation-result-report-head button {
  color: #1e293b !important;
}

#setup-panel.simulation-result-report-open .simulation-result-report-summary,
#setup-panel.simulation-result-report-open .simulation-result-report-stations {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(238, 243, 247, 0.86) !important;
  color: #1e293b !important;
}

#setup-panel.simulation-result-report-open .simulation-result-report-intensity span,
#setup-panel.simulation-result-report-open .simulation-result-report-summary dt,
#setup-panel.simulation-result-report-open .simulation-result-station-group header span,
#setup-panel.simulation-result-report-open .simulation-result-stations-empty {
  color: rgba(30, 41, 59, 0.7) !important;
}

#setup-panel.simulation-result-report-open .simulation-result-station-group + .simulation-result-station-group {
  border-top-color: rgba(51, 65, 85, 0.14) !important;
}

/* Old JMA-scale legend: keep the seven cells flush to the right with no spare inset. */
@media (max-width: 767px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend.is-old-jma-scale {
    justify-content: flex-end !important;
    width: min(242px, calc(100vw - 66px)) !important;
    max-width: calc(100vw - 66px) !important;
    padding: 0 !important;
  }

  body[data-active-bottom-tab="earthquake-tab"]
    .intensity-legend.is-old-jma-scale .intensity-scale {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 768px) {
  body[data-active-bottom-tab="earthquake-tab"] .intensity-legend {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-basis: 28px !important;
  }

  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale,
  body[data-active-bottom-tab="earthquake-tab"] .intensity-scale span {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    flex-basis: 26px !important;
  }
}

/* Apply the intensity-aware text color to every information-ticket label and value. */
.simulation-runtime-hud .simulation-summary.has-observed-intensity .max-shindo-card,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .max-shindo-card > span,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .max-shindo-card strong,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .max-shindo-card strong::before,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .magnitude-card,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .magnitude-card > span,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .magnitude-card strong,
.simulation-runtime-hud .simulation-summary.has-observed-intensity .magnitude-card strong::before,
.simulation-runtime-hud .simulation-summary.has-observed-intensity #simulation-magnitude,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .max-shindo-card,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .max-shindo-card > span,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .max-shindo-card strong,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .max-shindo-card strong::before,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .magnitude-card,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .magnitude-card > span,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .magnitude-card strong,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity .magnitude-card strong::before,
.simulation-result-report-summary-host .simulation-summary.has-observed-intensity #simulation-magnitude {
  color: var(--simulation-ticket-intensity-text, #1f2937) !important;
}

/* Timeline line colors: ordinary/time lines black, intensity orange, EEW red. */
.simulation-progress-guides > span {
  background: rgba(15, 23, 42, 0.58) !important;
}

.simulation-timeline-event,
.simulation-timeline-event.is-lower {
  border-left-color: #111827 !important;
}

.simulation-progress-now,
.simulation-runtime-hud .simulation-progress-now {
  background: #111827 !important;
  box-shadow: 0 0 8px rgba(17, 24, 39, 0.52) !important;
}

.simulation-progress-now::before,
.simulation-runtime-hud .simulation-progress-now::before {
  border-top-color: #111827 !important;
}

.simulation-timeline-event.is-intensity,
.simulation-runtime-hud .simulation-timeline-event.is-intensity,
.simulation-timeline-event.is-intensity-planned,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned {
  border-left-color: #f97316 !important;
}

.simulation-timeline-event.is-intensity-planned,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned {
  border-left: 2px dashed #f97316 !important;
}

.simulation-timeline-event.is-intensity b,
.simulation-runtime-hud .simulation-timeline-event.is-intensity b,
.simulation-timeline-event.is-intensity-planned b,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned b {
  color: #c2410c !important;
}

.simulation-timeline-event.is-eew,
.simulation-runtime-hud .simulation-timeline-event.is-eew,
.simulation-timeline-event.is-eew-planned,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned {
  border-left-color: #ef4444 !important;
}

.simulation-timeline-event.is-eew-planned,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned {
  border-left: 2px dashed #ef4444 !important;
}

.simulation-timeline-event.is-eew b,
.simulation-runtime-hud .simulation-timeline-event.is-eew b,
.simulation-timeline-event.is-eew-planned b,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned b {
  color: #dc2626 !important;
}

/* Keep timeline labels compact and readable on the light simulation HUD. */
.simulation-timeline-event b,
.simulation-runtime-hud .simulation-timeline-event b {
  max-width: 148px !important;
  border: 1px solid rgba(71, 85, 105, 0.16) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  font-size: 0.63rem !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.simulation-timeline-event.is-intensity b,
.simulation-runtime-hud .simulation-timeline-event.is-intensity b,
.simulation-timeline-event.is-intensity-planned b,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned b {
  border-color: rgba(249, 115, 22, 0.2) !important;
  background: rgba(255, 247, 237, 0.92) !important;
  color: #c2410c !important;
}

.simulation-timeline-event.is-eew b,
.simulation-runtime-hud .simulation-timeline-event.is-eew b,
.simulation-timeline-event.is-eew-planned b,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned b {
  border-color: rgba(239, 68, 68, 0.18) !important;
  background: rgba(254, 242, 242, 0.92) !important;
  color: #b91c1c !important;
}

.simulation-timeline-event.is-magnitude,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude,
.simulation-timeline-event.is-magnitude-planned,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  border-left-color: #64748b !important;
}

.simulation-timeline-event.is-magnitude-planned,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  border-left: 2px dashed #64748b !important;
}

.simulation-timeline-event.is-magnitude b,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude b,
.simulation-timeline-event.is-magnitude-planned b,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned b {
  border-color: rgba(100, 116, 139, 0.2) !important;
  background: rgba(241, 245, 249, 0.92) !important;
  color: #475569 !important;
}

/* Application appearance themes. Intensity colors remain owned by their components. */
html[data-resolved-theme="dark"] {
  color-scheme: dark;
}

html[data-resolved-theme="light"] body,
html[data-resolved-theme="light"] .app-shell {
  background: #eef2f5 !important;
  color: #172033 !important;
}

html[data-resolved-theme="dark"] body,
html[data-resolved-theme="dark"] .app-shell {
  background: #070b12 !important;
  color: #e8edf4 !important;
}

html[data-resolved-theme="light"] .bottom-tabs,
html[data-resolved-theme="light"] .settings-menu-sheet,
html[data-resolved-theme="light"] .settings-inline-panel.settings-detail-panel,
html[data-resolved-theme="light"] .nerv-full-panel,
html[data-resolved-theme="light"] .community-post-sheet,
html[data-resolved-theme="light"] .community-post-detail-sheet,
html[data-resolved-theme="light"] .community-account-panel,
html[data-resolved-theme="light"] .source-info-overlay-content,
html[data-resolved-theme="light"] .preset-picker-dialog,
html[data-resolved-theme="light"] .weather-quiz-leave-dialog {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: rgba(244, 247, 250, 0.98) !important;
  color: #172033 !important;
}

html[data-resolved-theme="dark"] .bottom-tabs,
html[data-resolved-theme="dark"] .settings-menu-sheet,
html[data-resolved-theme="dark"] .settings-inline-panel.settings-detail-panel,
html[data-resolved-theme="dark"] .nerv-full-panel,
html[data-resolved-theme="dark"] .community-post-sheet,
html[data-resolved-theme="dark"] .community-post-detail-sheet,
html[data-resolved-theme="dark"] .community-account-panel,
html[data-resolved-theme="dark"] .source-info-overlay-content,
html[data-resolved-theme="dark"] .preset-picker-dialog,
html[data-resolved-theme="dark"] .weather-quiz-leave-dialog {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(10, 14, 22, 0.98) !important;
  color: #e8edf4 !important;
}

html[data-resolved-theme="light"] .settings-menu-head,
html[data-resolved-theme="light"] .settings-detail-head,
html[data-resolved-theme="light"] .community-post-head,
html[data-resolved-theme="light"] .simulation-result-report-head {
  border-color: rgba(51, 65, 85, 0.14) !important;
  background: rgba(248, 250, 252, 0.96) !important;
  color: #172033 !important;
}

html[data-resolved-theme="dark"] .settings-menu-head,
html[data-resolved-theme="dark"] .settings-detail-head,
html[data-resolved-theme="dark"] .community-post-head,
html[data-resolved-theme="dark"] .simulation-result-report-head {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(10, 14, 22, 0.96) !important;
  color: #f1f5f9 !important;
}

html[data-resolved-theme="light"] .settings-menu-head h2,
html[data-resolved-theme="light"] .settings-detail-head h3,
html[data-resolved-theme="light"] .settings-menu-close,
html[data-resolved-theme="light"] .settings-detail-back,
html[data-resolved-theme="light"] .community-post-head,
html[data-resolved-theme="light"] .bottom-tabs .tab {
  color: #334155 !important;
}

html[data-resolved-theme="dark"] .settings-menu-head h2,
html[data-resolved-theme="dark"] .settings-detail-head h3,
html[data-resolved-theme="dark"] .settings-menu-close,
html[data-resolved-theme="dark"] .settings-detail-back,
html[data-resolved-theme="dark"] .community-post-head,
html[data-resolved-theme="dark"] .bottom-tabs .tab {
  color: #cbd5e1 !important;
}

html[data-resolved-theme="dark"] .settings-menu-row,
html[data-resolved-theme="dark"] .settings-status-card,
html[data-resolved-theme="dark"] .settings-appearance-section,
html[data-resolved-theme="dark"] .settings-theme-options label,
html[data-resolved-theme="dark"] .station-info-card,
html[data-resolved-theme="dark"] .history-stats-card,
html[data-resolved-theme="dark"] .learning-card,
html[data-resolved-theme="dark"] .learning-long-period-item,
html[data-resolved-theme="dark"] .weather-quiz-overview,
html[data-resolved-theme="dark"] .weather-quiz-card,
html[data-resolved-theme="dark"] .weather-quiz-history article,
html[data-resolved-theme="dark"] .community-post-section {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #e2e8f0 !important;
}

html[data-resolved-theme="light"] .community-post-section,
html[data-resolved-theme="light"] .weather-quiz-overview,
html[data-resolved-theme="light"] .weather-quiz-card,
html[data-resolved-theme="light"] .weather-quiz-history article {
  border-color: rgba(51, 65, 85, 0.14) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #1e293b !important;
}

html[data-resolved-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
html[data-resolved-theme="dark"] select,
html[data-resolved-theme="dark"] textarea {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f1f5f9 !important;
}

html[data-resolved-theme="dark"] #setup-panel.sim-panel:not(.simulation-result-report-open),
html[data-resolved-theme="dark"] .simulation-runtime-hud .setup-result-section,
html[data-resolved-theme="dark"] #setup-panel.simulation-result-report-open {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(13, 18, 28, 0.96) !important;
  color: #e5eaf1 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48) !important;
}

html[data-resolved-theme="dark"] #setup-panel.sim-panel:not(.simulation-result-report-open)::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.11), transparent 45%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.32), rgba(2, 6, 23, 0.08) 58%) !important;
}

html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .sheet-handle,
html[data-resolved-theme="dark"] .simulation-runtime-handle {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(13, 18, 28, 0.98) !important;
}

html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .sheet-handle::after,
html[data-resolved-theme="dark"] .simulation-runtime-handle::after {
  background: rgba(203, 213, 225, 0.62) !important;
}

html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .settings-section,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .field input,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .field select,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .settings-tabs,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .toggle-grid .toggle-row,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .setup-current-location-button,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-summary:not(.has-observed-intensity),
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-progress-track,
html[data-resolved-theme="dark"] #setup-panel.simulation-result-report-open .simulation-result-report-summary:not(.has-observed-intensity),
html[data-resolved-theme="dark"] #setup-panel.simulation-result-report-open .simulation-result-report-stations {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

/* Hidden finite-fault simulation prototype, opened by long-pressing the simulation tab. */
body.fault-simulation-mode #setup-panel .settings-tabs,
body.fault-simulation-mode #setup-panel [data-settings-section],
body.fault-simulation-mode #setup-panel .control-separator,
body.fault-simulation-mode #setup-panel .simulation-quick-actions,
body.fault-simulation-mode #setup-panel > .settings-menu-row,
body.fault-simulation-mode #setup-panel .sim-panel-scroll > .settings-menu-row {
  display: none !important;
}

body.fault-simulation-mode #source-simulation-menu-intro {
  display: none !important;
}

#source-simulation-menu-intro {
  display: grid;
  gap: 8px;
  padding: 4px 8px 10px;
}

#source-simulation-menu-intro h3 {
  margin: 0;
}

body.fault-simulation-mode #earthquake-tab span:last-child {
  width: auto !important;
  max-width: none !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

#fault-simulation-menu {
  display: grid;
  gap: 14px;
  padding: 4px 8px 18px;
}

#fault-simulation-menu.hidden {
  display: none !important;
}

.fault-simulation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fault-simulation-heading h3,
.fault-simulation-card h4,
.fault-simulation-description,
.fault-simulation-note,
.fault-simulation-exit-hint {
  margin: 0;
}

.fault-simulation-kicker {
  display: block;
  margin-bottom: 3px;
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fault-simulation-description,
.fault-simulation-note,
.fault-simulation-exit-hint {
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.65;
}

.fault-simulation-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(51, 65, 85, 0.16);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 5px 16px rgba(15, 23, 42, 0.06);
}

.fault-simulation-card .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fault-model-profile {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(51, 65, 85, 0.13);
  padding-top: 12px;
}

.active-fault-picker {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(51, 65, 85, 0.13);
  padding-top: 12px;
}

.active-fault-picker.hidden {
  display: none !important;
}

.active-fault-picker-status {
  min-height: 1.2em;
  margin: 0;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.4;
}

.fault-rupture-settings-hint {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.45;
}

.fault-epicenter-edit-button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(2, 132, 199, 0.34);
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.1);
  color: #075985;
  font-weight: 900;
}

.fault-epicenter-edit-button.is-active {
  border-color: #0284c7;
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.fault-epicenter-edit-hint {
  margin: -4px 0 0;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.5;
}

.fault-model-profile:empty {
  display: none;
}

.fault-model-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fault-model-profile-head > div {
  display: grid;
  gap: 2px;
}

.fault-model-profile-head strong {
  color: #0f172a;
  font-size: 0.88rem;
}

.fault-model-profile-head span,
.fault-model-profile > small {
  color: #64748b;
  font-size: 0.68rem;
}

.fault-model-profile-head b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(14, 165, 233, 0.13);
  color: #075985;
  font-size: 0.75rem;
}

.fault-model-profile dl,
.fault-model-profile p {
  margin: 0;
}

.fault-model-profile dl {
  display: grid;
  gap: 8px;
}

.fault-model-profile dl > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
}

.fault-model-profile dt {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
}

.fault-model-profile dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  color: #334155;
  font-size: 0.72rem;
}

.fault-model-profile dd span {
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(100, 116, 139, 0.1);
}

.fault-model-profile p {
  color: #475569;
  font-size: 0.74rem;
  line-height: 1.65;
}

.fault-model-profile a {
  color: #0369a1;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
}

.fault-source-parameters-hint {
  margin: 0;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.55;
}

#fault-simulation-menu.has-official-fault-preset .fault-manual-geometry {
  display: none;
}

.fault-simulation-note {
  border-left: 3px solid #f59e0b;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
}

.fault-simulation-exit-hint {
  text-align: center;
}

.fault-mode-switch-notice {
  position: fixed;
  z-index: 10050;
  top: calc(72px + env(safe-area-inset-top));
  left: 50%;
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.fault-mode-switch-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

html[data-resolved-theme="light"] .fault-simulation-card {
  border-color: #cbd5e1;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}

html[data-resolved-theme="light"] .fault-simulation-card h4,
html[data-resolved-theme="light"] .fault-simulation-card .field,
html[data-resolved-theme="light"] .fault-model-profile-head strong,
html[data-resolved-theme="light"] .fault-simulation-heading h3 {
  color: #0f172a;
}

html[data-resolved-theme="light"] .fault-simulation-card input,
html[data-resolved-theme="light"] .fault-simulation-card select {
  border-color: #94a3b8;
  background: #ffffff;
  color: #0f172a;
}

html[data-resolved-theme="light"] .fault-simulation-card input:focus,
html[data-resolved-theme="light"] .fault-simulation-card select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

html[data-resolved-theme="light"] .fault-model-profile,
html[data-resolved-theme="light"] .active-fault-picker {
  border-top-color: #cbd5e1;
}

html[data-resolved-theme="light"] .active-fault-picker-status,
html[data-resolved-theme="light"] .fault-source-parameters-hint,
html[data-resolved-theme="light"] .fault-rupture-settings-hint,
html[data-resolved-theme="light"] .fault-model-profile-head span,
html[data-resolved-theme="light"] .fault-model-profile > small,
html[data-resolved-theme="light"] .fault-model-profile dt {
  color: #475569;
}

html[data-resolved-theme="light"] .fault-model-profile dd,
html[data-resolved-theme="light"] .fault-model-profile p,
html[data-resolved-theme="light"] .fault-simulation-description,
html[data-resolved-theme="light"] .fault-simulation-note,
html[data-resolved-theme="light"] .fault-simulation-exit-hint {
  color: #334155;
}

html[data-resolved-theme="dark"] .fault-simulation-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

html[data-resolved-theme="dark"] .fault-simulation-description,
html[data-resolved-theme="dark"] .fault-simulation-note,
html[data-resolved-theme="dark"] .fault-simulation-exit-hint {
  color: #cbd5e1;
}

html[data-resolved-theme="dark"] .fault-simulation-heading h3,
html[data-resolved-theme="dark"] .fault-simulation-card h4,
html[data-resolved-theme="dark"] .fault-simulation-card .field {
  color: #f1f5f9;
}

html[data-resolved-theme="dark"] .fault-simulation-card input,
html[data-resolved-theme="dark"] .fault-simulation-card select {
  border-color: rgba(148, 163, 184, 0.55);
  background: #111827;
  color: #f8fafc;
}

html[data-resolved-theme="dark"] .fault-simulation-card input:focus,
html[data-resolved-theme="dark"] .fault-simulation-card select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

html[data-resolved-theme="dark"] .fault-simulation-kicker {
  color: #fbbf24;
}

html[data-resolved-theme="dark"] .fault-model-profile {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-resolved-theme="dark"] .active-fault-picker {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-resolved-theme="dark"] .active-fault-picker-status {
  color: #94a3b8;
}

html[data-resolved-theme="dark"] .fault-model-profile-head strong,
html[data-resolved-theme="dark"] .fault-model-profile dd,
html[data-resolved-theme="dark"] .fault-model-profile p {
  color: #e2e8f0;
}

html[data-resolved-theme="dark"] .fault-model-profile-head b {
  border: 1px solid rgba(56, 189, 248, 0.42);
  background: rgba(14, 116, 144, 0.42);
  color: #bae6fd;
}

html[data-resolved-theme="dark"] .fault-model-profile-head span,
html[data-resolved-theme="dark"] .fault-model-profile > small,
html[data-resolved-theme="dark"] .fault-model-profile dt {
  color: #94a3b8;
}

html[data-resolved-theme="dark"] .fault-model-profile a {
  color: #7dd3fc;
}

html[data-resolved-theme="dark"] .fault-source-parameters-hint {
  color: #94a3b8;
}

html[data-resolved-theme="dark"] .fault-rupture-settings-hint {
  color: #94a3b8;
}

html[data-resolved-theme="dark"] .fault-epicenter-edit-button {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(14, 116, 144, 0.28);
  color: #bae6fd;
}

html[data-resolved-theme="dark"] .fault-epicenter-edit-button.is-active {
  border-color: #38bdf8;
  background: #0369a1;
  color: #f0f9ff;
}

html[data-resolved-theme="dark"] .fault-epicenter-edit-hint {
  color: #94a3b8;
}

html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .field,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .settings-section h3,
html[data-resolved-theme="dark"] #setup-panel:not(.simulation-result-report-open) .settings-tab,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-summary:not(.has-observed-intensity) dt,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-summary:not(.has-observed-intensity) dd,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-progress-head,
html[data-resolved-theme="dark"] .simulation-runtime-hud #simulation-region-name,
html[data-resolved-theme="dark"] .simulation-runtime-hud #simulation-depth,
html[data-resolved-theme="dark"] .simulation-runtime-hud #simulation-magnitude,
html[data-resolved-theme="dark"] #setup-panel.simulation-result-report-open .simulation-result-report-head button {
  color: #dbe4ee !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event b,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event b {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-intensity b,
html[data-resolved-theme="dark"] .simulation-timeline-event.is-intensity-planned b {
  border-color: rgba(251, 146, 60, 0.3) !important;
  background: rgba(67, 32, 8, 0.92) !important;
  color: #fdba74 !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-eew b,
html[data-resolved-theme="dark"] .simulation-timeline-event.is-eew-planned b {
  border-color: rgba(248, 113, 113, 0.3) !important;
  background: rgba(69, 10, 10, 0.92) !important;
  color: #fca5a5 !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-magnitude b,
html[data-resolved-theme="dark"] .simulation-timeline-event.is-magnitude-planned b {
  border-color: rgba(148, 163, 184, 0.25) !important;
  background: rgba(30, 41, 59, 0.92) !important;
  color: #cbd5e1 !important;
}

/* Final appearance contrast and fixed-control refinements. */
html[data-resolved-theme="dark"] .simulation-progress-guides > span {
  background: rgba(226, 232, 240, 0.48) !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event:not(.is-intensity):not(.is-intensity-planned):not(.is-eew):not(.is-eew-planned),
html[data-resolved-theme="dark"] .simulation-timeline-event.is-lower:not(.is-intensity):not(.is-intensity-planned):not(.is-eew):not(.is-eew-planned) {
  border-left-color: #cbd5e1 !important;
}

html[data-resolved-theme="dark"] .simulation-progress-now,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-progress-now {
  background: #d6dee8 !important;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.42) !important;
}

html[data-resolved-theme="dark"] .simulation-progress-now::before,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-progress-now::before {
  border-top-color: #d6dee8 !important;
}

.learning-category-switch {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  align-self: start !important;
  transform: none !important;
  translate: none !important;
}

html[data-resolved-theme="light"] .learning-intensity-badge {
  color: var(--learning-intensity-text, #1f2937) !important;
}

html[data-resolved-theme="light"] .bottom-tabs::after {
  background: #f5f7fa !important;
}

html[data-resolved-theme="light"] .bottom-tabs {
  box-shadow: none !important;
}

html[data-resolved-theme="light"] #info-full-panel .tool-menu-list {
  gap: 10px !important;
  padding: 12px !important;
}

html[data-resolved-theme="light"] #info-full-panel .tool-menu-row {
  min-height: 92px !important;
  border: 1px solid rgba(51, 65, 85, 0.15) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #172033 !important;
  box-shadow: 0 5px 15px rgba(15, 23, 42, 0.055) !important;
}

html[data-resolved-theme="light"] #info-full-panel .tool-menu-row strong {
  color: #172033 !important;
}

html[data-resolved-theme="light"] #info-full-panel .tool-menu-row small {
  color: #526176 !important;
}

html[data-resolved-theme="light"] #info-full-panel .tool-menu-row > span:last-child {
  color: #64748b !important;
}

html[data-resolved-theme="dark"] #info-full-panel .tool-menu-list {
  gap: 10px !important;
  padding: 12px !important;
}

html[data-resolved-theme="dark"] #info-full-panel .tool-menu-row {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-resolved-theme="light"] .community-post-button {
  border-color: #0369a1 !important;
  background: linear-gradient(180deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(3, 105, 161, 0.28), inset 0 1px rgba(255, 255, 255, 0.24) !important;
}

html[data-resolved-theme="light"] .community-map-control {
  border-color: rgba(51, 65, 85, 0.22) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #075985 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16), inset 0 1px #ffffff !important;
}

html[data-resolved-theme="light"] .community-map-control:hover,
html[data-resolved-theme="light"] .community-map-control:focus-visible {
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

html[data-resolved-theme="dark"] .community-post-button {
  border-color: rgba(56, 189, 248, 0.48) !important;
  background: linear-gradient(180deg, #075985, #0c4a6e) !important;
  color: #e0f2fe !important;
}

html[data-resolved-theme="light"] .community-profile-card {
  border-color: rgba(51, 65, 85, 0.14) !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.9)) !important;
}

html[data-resolved-theme="light"] .community-profile-main span,
html[data-resolved-theme="light"] .community-account-note,
html[data-resolved-theme="light"] .community-account-status {
  color: #526176 !important;
}

html[data-resolved-theme="light"] .community-profile-main strong,
html[data-resolved-theme="light"] .community-profile-follow-counts b,
html[data-resolved-theme="light"] .community-profile-follow-counts button {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-profile-main em {
  background: #dff6fb !important;
  color: #075985 !important;
}

html[data-resolved-theme="light"] .community-account-required-card button,
html[data-resolved-theme="light"] .community-account-panel button {
  border-color: rgba(3, 105, 161, 0.42) !important;
  background: #e0f2fe !important;
  color: #075985 !important;
}

html[data-resolved-theme="light"] .community-account-panel .community-account-wide-button {
  border-color: #0e7490 !important;
  background: #0e7490 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-account-panel button:disabled,
html[data-resolved-theme="light"] .community-account-panel button.is-disabled {
  border-color: #cbd5e1 !important;
  background: #e8edf2 !important;
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-resolved-theme="light"] .settings-status-card .settings-notification-row span {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .settings-status-card .settings-notification-row strong[data-state="on"] {
  border-color: #22a564 !important;
  background: #dcfce7 !important;
  color: #166534 !important;
}

html[data-resolved-theme="light"] .settings-status-card .settings-notification-row strong:not([data-state="on"]) {
  border-color: #fb7185 !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

/* Complete the light appearance for map controls and preset-earthquake surfaces. */
html[data-resolved-theme="light"] .map-layer-control-button {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #334155 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15) !important;
}

html[data-resolved-theme="light"] .map-layer-control-button[aria-expanded="true"] {
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

html[data-resolved-theme="light"] .map-layer-control-panel {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  color: #172033 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;
}

html[data-resolved-theme="light"] .map-layer-control-panel > label {
  border: 1px solid rgba(51, 65, 85, 0.1) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .preset-picker-head {
  border-bottom-color: rgba(51, 65, 85, 0.14) !important;
  background: rgba(248, 250, 252, 0.99) !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .preset-picker-close,
html[data-resolved-theme="light"] #preset-picker-close {
  color: #334155 !important;
}

html[data-resolved-theme="light"] .preset-filter-input,
html[data-resolved-theme="light"] .preset-sort-select,
html[data-resolved-theme="light"] .preset-sort-choice {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9) !important;
}

html[data-resolved-theme="light"] .preset-filter-input::placeholder {
  color: #64748b !important;
}

html[data-resolved-theme="light"] .preset-sort-choice.is-active,
html[data-resolved-theme="light"] .preset-sort-choice[aria-pressed="true"] {
  border-color: #0284c7 !important;
  background: #e0f2fe !important;
  color: #075985 !important;
}

html[data-resolved-theme="light"] .preset-picker-table-wrap {
  background: #f1f5f8 !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .preset-picker-table tbody tr {
  border-color: rgba(51, 65, 85, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .preset-picker-table td {
  border-color: rgba(51, 65, 85, 0.1) !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .preset-picker-table td:nth-child(2),
html[data-resolved-theme="light"] .preset-picker-table td:nth-child(3) {
  color: #172033 !important;
  font-weight: 650 !important;
}

/* Fixed map HUDs that otherwise retained their dark glass shell in light mode. */
html[data-resolved-theme="light"] .eew-forecast-panel {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(248, 250, 252, 0.95) !important;
  color: #172033 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
}

html[data-resolved-theme="light"] .eew-forecast-panel h2 {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .station-popup .maplibregl-popup-content,
html[data-resolved-theme="light"] .maplibregl-ctrl-group,
html[data-resolved-theme="light"] .source-info-button {
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #334155 !important;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.14) !important;
}

html[data-resolved-theme="light"] .maplibregl-ctrl-group button + button {
  border-top-color: rgba(51, 65, 85, 0.14) !important;
}

html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #ffffff !important;
}

html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #ffffff !important;
}

html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #ffffff !important;
}

html[data-resolved-theme="light"] .station-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #ffffff !important;
}

/* Light-theme contrast audit: borders, semantic learning colors and timeline labels. */
html[data-resolved-theme="light"] .learning-hero,
html[data-resolved-theme="light"] .learning-card,
html[data-resolved-theme="light"] .learning-intensity-item,
html[data-resolved-theme="light"] .learning-long-period-item,
html[data-resolved-theme="light"] .weather-quiz-overview,
html[data-resolved-theme="light"] .weather-quiz-card,
html[data-resolved-theme="light"] .weather-quiz-results,
html[data-resolved-theme="light"] .weather-quiz-history article {
  border-color: rgba(71, 85, 105, 0.24) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}

html[data-resolved-theme="light"] .learning-warning-kind-table-wrap,
html[data-resolved-theme="light"] .learning-level-table-wrap {
  border-color: #b8c2ce !important;
  background: #ffffff !important;
}

html[data-resolved-theme="light"] .learning-warning-kind-table th,
html[data-resolved-theme="light"] .learning-warning-kind-table td,
html[data-resolved-theme="light"] .learning-level-table th,
html[data-resolved-theme="light"] .learning-level-table td,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid th,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid td {
  border: 1px solid #c5ced8 !important;
}

html[data-resolved-theme="light"] .learning-warning-kind-table thead th,
html[data-resolved-theme="light"] .learning-level-table thead th,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid th {
  background: #e8edf2 !important;
  color: #1e293b !important;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tr.is-early {
  --learning-warning-kind-color: #047857;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tr.is-advisory {
  --learning-warning-kind-color: #9a6700;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tr.is-warning {
  --learning-warning-kind-color: #c2414f;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tr.is-danger {
  --learning-warning-kind-color: #7e22ce;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tr.is-special {
  --learning-warning-kind-color: #6b21a8;
}

html[data-resolved-theme="light"] .learning-warning-kind-table tbody th span {
  color: var(--learning-warning-kind-color) !important;
}

html[data-resolved-theme="light"] .learning-level-table tbody tr.is-level-5 th { color: #6b21a8 !important; }
html[data-resolved-theme="light"] .learning-level-table tbody tr.is-level-4 th { color: #7e22ce !important; }
html[data-resolved-theme="light"] .learning-level-table tbody tr.is-level-3 th { color: #c2414f !important; }
html[data-resolved-theme="light"] .learning-level-table tbody tr.is-level-2 th { color: #9a6700 !important; }
html[data-resolved-theme="light"] .learning-level-table tbody tr.is-level-1 th { color: #047857 !important; }

html[data-resolved-theme="light"] .learning-alert-item.is-tsunami-advisory,
html[data-resolved-theme="light"] .learning-alert-item.is-level-2 { --learning-alert-color: #9a6700; }
html[data-resolved-theme="light"] .learning-alert-item.is-tsunami-warning,
html[data-resolved-theme="light"] .learning-alert-item.is-level-3 { --learning-alert-color: #c2414f; }
html[data-resolved-theme="light"] .learning-alert-item.is-level-4 { --learning-alert-color: #7e22ce; }
html[data-resolved-theme="light"] .learning-alert-item.is-major-tsunami,
html[data-resolved-theme="light"] .learning-alert-item.is-level-5 { --learning-alert-color: #6b21a8; }

html[data-resolved-theme="light"] .learning-alert-item span {
  color: var(--learning-alert-color) !important;
}

html[data-resolved-theme="light"] .weather-quiz-setup fieldset,
html[data-resolved-theme="light"] .weather-quiz-count-field,
html[data-resolved-theme="light"] .weather-quiz-choice-grid label > span,
html[data-resolved-theme="light"] .weather-quiz-judgment button,
html[data-resolved-theme="light"] .weather-quiz-fill-options button {
  border-color: #bcc7d2 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1e293b !important;
}

html[data-resolved-theme="light"] .weather-quiz-choice-grid label > span::before {
  border-color: #64748b !important;
  background: #ffffff !important;
}

html[data-resolved-theme="light"] .weather-quiz-choice-grid input:checked + span {
  border-color: #0f766e !important;
  background: #e6f4f1 !important;
  color: #134e4a !important;
}

html[data-resolved-theme="light"] .weather-quiz-choice-grid input:checked + span::before {
  border-color: #0f766e !important;
  background: #0f766e !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
}

html[data-resolved-theme="light"] input[type="checkbox"],
html[data-resolved-theme="light"] input[type="radio"] {
  accent-color: #0f766e !important;
}

html[data-resolved-theme="light"] .toggle-grid .toggle-row:has(input:checked),
html[data-resolved-theme="light"] .simulation-layer-toggles .toggle-row:has(input:checked),
html[data-resolved-theme="light"] .current-location-toggle:has(input:checked) {
  border-color: rgba(15, 118, 110, 0.5) !important;
  background: #e6f4f1 !important;
  color: #134e4a !important;
  box-shadow: inset 0 1px #ffffff !important;
}

html[data-resolved-theme="light"] .toggle-grid .toggle-row:has(input:checked)::before,
html[data-resolved-theme="light"] .simulation-layer-toggles .toggle-row:has(input:checked)::before,
html[data-resolved-theme="light"] .current-location-toggle:has(input:checked)::before {
  background: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13) !important;
}

html[data-resolved-theme="light"] .weather-quiz-start,
html[data-resolved-theme="light"] .weather-quiz-next,
html[data-resolved-theme="light"] .weather-quiz-restart,
html[data-resolved-theme="light"] .weather-quiz-actions button:last-child {
  border-color: #0f766e !important;
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(15, 118, 110, 0.18) !important;
}

html[data-resolved-theme="light"] .weather-quiz-start:disabled,
html[data-resolved-theme="light"] .weather-quiz-actions button:disabled {
  border-color: #cbd5e1 !important;
  background: #e8edf2 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

html[data-resolved-theme="light"] .weather-quiz-judgment button.is-correct b,
html[data-resolved-theme="light"] .weather-quiz-history article:not(.is-wrong) > b,
html[data-resolved-theme="light"] .weather-quiz-answer:not(.is-wrong) strong {
  color: #047857 !important;
}

html[data-resolved-theme="light"] .weather-quiz-judgment button.is-selected.is-correct,
html[data-resolved-theme="light"] .weather-quiz-fill-options button.is-correct-answer {
  border-color: #047857 !important;
  background: #e8f5ef !important;
  color: #065f46 !important;
  opacity: 1 !important;
}

html[data-resolved-theme="light"] .weather-quiz-judgment > p,
html[data-resolved-theme="light"] .weather-quiz-progress-row,
html[data-resolved-theme="light"] .weather-quiz-results > span,
html[data-resolved-theme="light"] .weather-quiz-results > p,
html[data-resolved-theme="light"] .weather-quiz-results > strong small,
html[data-resolved-theme="light"] .weather-quiz-history article span {
  color: #526176 !important;
}

html[data-resolved-theme="light"] .weather-quiz-meta span,
html[data-resolved-theme="light"] .weather-quiz-category {
  border-color: rgba(15, 118, 110, 0.34) !important;
  background: #e6f4f1 !important;
  color: #0f766e !important;
}

html[data-resolved-theme="light"] .weather-quiz-progress {
  background: #d5dde5 !important;
}

html[data-resolved-theme="light"] .weather-quiz-progress i {
  background: #0f766e !important;
}

html[data-resolved-theme="light"] .settings-menu-row,
html[data-resolved-theme="light"] .settings-status-card,
html[data-resolved-theme="light"] .settings-appearance-section,
html[data-resolved-theme="light"] .settings-theme-options label,
html[data-resolved-theme="light"] .community-profile-card,
html[data-resolved-theme="light"] .community-account-panel button,
html[data-resolved-theme="light"] #setup-panel:not(.simulation-result-report-open) .settings-section,
html[data-resolved-theme="light"] #setup-panel:not(.simulation-result-report-open) .toggle-row {
  border-color: rgba(71, 85, 105, 0.24) !important;
}

html[data-resolved-theme="light"] .community-account-panel .community-account-wide-button {
  border-color: #0f766e !important;
  background: #0f766e !important;
}

html[data-resolved-theme="light"] .settings-status-card .settings-notification-row strong[data-state="on"] {
  border-color: #087847 !important;
  background: #86d8aa !important;
  color: #075c35 !important;
}

/* Keep the app and bottom navigation fixed while a community post is open. */
html.community-post-detail-open,
body.community-post-detail-open {
  width: 100% !important;
  height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.community-post-detail-open {
  position: fixed !important;
  inset: 0 !important;
}

body.community-post-detail-open .community-post-detail-sheet {
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  width: 100% !important;
  height: min(48svh, 390px) !important;
  min-height: min(48svh, 390px) !important;
  max-height: min(48svh, 390px) !important;
  padding: 38px 16px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

html[data-resolved-theme="light"] body.community-post-detail-open .community-post-detail-body,
html[data-resolved-theme="dark"] body.community-post-detail-open .community-post-detail-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 620px !important;
  margin-inline: auto !important;
}

html[data-resolved-theme="light"] .simulation-progress-guides > span {
  width: 1px !important;
  background: rgba(51, 65, 85, 0.34) !important;
}

html[data-resolved-theme="light"] .simulation-progress-guides > span::after,
html[data-resolved-theme="light"] .simulation-timeline-event small {
  color: #475569 !important;
}

html[data-resolved-theme="light"] .simulation-progress-now,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-progress-now {
  width: 3px !important;
  background: #111827 !important;
  box-shadow: 0 0 3px rgba(17, 24, 39, 0.28) !important;
}

/* Make timeline guide lines meet the track frame exactly. */
.simulation-progress-track {
  --timeline-track-height: 176px;
}

.simulation-runtime-hud .simulation-progress-track {
  --timeline-track-height: 88px;
}

.simulation-progress-guides {
  top: 0 !important;
  bottom: auto !important;
  height: var(--timeline-track-height) !important;
}

.simulation-progress-guides > span {
  top: 0 !important;
  bottom: 0 !important;
}

/* The completion marker reaches both edges of the timeline track. */
.simulation-timeline-event.is-complete,
.simulation-runtime-hud .simulation-timeline-event.is-complete {
  top: 0 !important;
  bottom: auto !important;
  height: var(--timeline-track-height) !important;
}

/* Lower only the four information-ticket values without moving their rows. */
.simulation-runtime-hud .simulation-summary #simulation-region-name,
.simulation-runtime-hud .simulation-summary #simulation-depth,
.simulation-runtime-hud .simulation-summary .magnitude-card strong,
.simulation-runtime-hud .simulation-summary .simulation-origin-time-card strong,
.simulation-result-report-summary-host .simulation-summary #simulation-region-name,
.simulation-result-report-summary-host .simulation-summary #simulation-depth,
.simulation-result-report-summary-host .simulation-summary .magnitude-card strong,
.simulation-result-report-summary-host .simulation-summary .simulation-origin-time-card strong {
  position: relative !important;
  top: 1.5px !important;
}

/* Depth and magnitude sit another 0.7px lower than the other ticket values. */
.simulation-runtime-hud .simulation-summary #simulation-depth,
.simulation-runtime-hud .simulation-summary .magnitude-card strong,
.simulation-result-report-summary-host .simulation-summary #simulation-depth,
.simulation-result-report-summary-host .simulation-summary .magnitude-card strong {
  top: 2px !important;
}

/* Keep preliminary/final status text on the exact baseline of the M value. */
.simulation-runtime-hud .simulation-summary .magnitude-card strong,
.simulation-result-report-summary-host .simulation-summary .magnitude-card strong {
  display: inline-flex !important;
  align-items: baseline !important;
  vertical-align: baseline !important;
}

.simulation-runtime-hud .simulation-summary .simulation-magnitude-status,
.simulation-result-report-summary-host .simulation-summary .simulation-magnitude-status {
  position: static !important;
  top: auto !important;
  align-self: baseline !important;
  vertical-align: baseline !important;
  transform: none !important;
  line-height: inherit !important;
}

/* The light result page uses the panel surface directly, without white slabs. */
html[data-resolved-theme="light"]
  #setup-panel.simulation-result-report-open .simulation-result-report-head,
html[data-resolved-theme="light"]
  #setup-panel.simulation-result-report-open .simulation-result-report-stations {
  background: transparent !important;
}

/* Keep every timeline event line clearly visible on the light surface. The
   planned and confirmed states share the same 2px box, so labels do not move. */
html[data-resolved-theme="light"] .simulation-timeline-event,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event {
  border-left-width: 2px !important;
  border-left-style: solid !important;
  border-left-color: #334155 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-intensity,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-intensity {
  border-left-color: #ea580c !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-eew,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-eew {
  border-left-color: #dc2626 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-magnitude,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude {
  border-left-color: #475569 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="light"] .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="light"] .simulation-timeline-event.is-magnitude-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  border-left: 2px solid transparent !important;
  background-size: 2px 100% !important;
}

/* The simulation layer control remains a white control in the light map. */
html[data-resolved-theme="light"] body[data-active-bottom-tab="earthquake-tab"] #map-layer-control-button {
  border: 1px solid rgba(71, 85, 105, 0.28) !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-resolved-theme="light"] body[data-active-bottom-tab="earthquake-tab"] #map-layer-control-button[aria-expanded="true"] {
  border-color: #0f766e !important;
  color: #0f766e !important;
}

/* Disabled map layers use one deliberate inactive treatment in both appearances. */
.toggle-row.is-disabled,
.setup-layer-state-storage .toggle-row:has(input:disabled),
.simulation-layer-toggles .toggle-row:has(input:disabled),
.map-layer-control-panel > label.is-disabled,
.map-layer-control-panel > label:has(input:disabled) {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: rgba(100, 116, 139, 0.12) !important;
  color: #7f8b9b !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.toggle-row.is-disabled input,
.setup-layer-state-storage .toggle-row:has(input:disabled) input,
.simulation-layer-toggles .toggle-row:has(input:disabled) input,
.map-layer-control-panel > label:has(input:disabled) input {
  accent-color: #64748b !important;
  filter: grayscale(1) !important;
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

html[data-resolved-theme="light"] .toggle-row.is-disabled,
html[data-resolved-theme="light"] .setup-layer-state-storage .toggle-row:has(input:disabled),
html[data-resolved-theme="light"] .simulation-layer-toggles .toggle-row:has(input:disabled),
html[data-resolved-theme="light"] .map-layer-control-panel > label.is-disabled,
html[data-resolved-theme="light"] .map-layer-control-panel > label:has(input:disabled) {
  border-color: #cbd5e1 !important;
  background: #e8edf2 !important;
  color: #64748b !important;
}

/* Final light-theme readability for destructive actions, dialogs and posting UI. */
html[data-resolved-theme="light"] .simulation-start:not(:disabled),
html[data-resolved-theme="light"] .simulation-stop:not(:disabled),
html[data-resolved-theme="light"] .feedback-submit:not(:disabled),
html[data-resolved-theme="light"] .admin-mode-maintenance:not(:disabled),
html[data-resolved-theme="light"] .maintenance-reason-submit:not(:disabled),
html[data-resolved-theme="light"] .community-post-submit:not(:disabled),
html[data-resolved-theme="light"] .community-post-delete-button:not(:disabled) {
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-profile-icon {
  border: 2px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16), 0 4px 10px rgba(15, 23, 42, 0.1) !important;
}

html[data-resolved-theme="light"] .community-profile-icon img {
  border: 1px solid rgba(71, 85, 105, 0.18) !important;
}

html[data-resolved-theme="light"] .weather-quiz-leave-dialog {
  border-color: rgba(71, 85, 105, 0.28) !important;
  background: #f8fafc !important;
  color: #172033 !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.3) !important;
}

html[data-resolved-theme="light"] .weather-quiz-leave-dialog h2 {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .weather-quiz-leave-dialog p {
  color: #526176 !important;
}

html[data-resolved-theme="light"] .weather-quiz-leave-actions button {
  border-color: #b8c3ce !important;
  background: #ffffff !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .weather-quiz-leave-actions [data-weather-quiz-leave-yes] {
  border-color: #e11d48 !important;
  background: #e11d48 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-head {
  border-bottom: 1px solid rgba(71, 85, 105, 0.18) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-post-close,
html[data-resolved-theme="light"] .community-post-detail-close {
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
}

html[data-resolved-theme="light"] .community-post-detail-body {
  border: 1px solid #94a3b8 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

html[data-resolved-theme="dark"] .community-post-detail-body {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

html[data-resolved-theme="light"] .community-post-detail-meta div {
  border: 1px solid #b8c3ce !important;
  background: #eef2f6 !important;
}

html[data-resolved-theme="light"] .community-post-detail-meta dt {
  color: #475569 !important;
}

html[data-resolved-theme="light"] .community-post-detail-meta dd {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-post-section {
  border: 1px solid #cbd5e1 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

html[data-resolved-theme="dark"] .community-post-section {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04) !important;
}

html[data-resolved-theme="light"] .community-post-tags label:has(input:checked) {
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="dark"] .community-post-tags label:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-tags input + span::before {
  background: #64748b !important;
}

html[data-resolved-theme="dark"] .community-post-tags input + span::before {
  background: rgba(255, 255, 255, 0.42) !important;
}

/* Selected post tags use one palette in both appearance themes. */
.community-post-tags label:has(input[value="weather"]:checked) {
  border-color: #138ed3 !important;
  background: #138ed3 !important;
}

.community-post-tags label:has(input[value="disaster"]:checked) {
  border-color: #d6263c !important;
  background: #d6263c !important;
}

.community-post-tags label:has(input[value="earthquake"]:checked) {
  border-color: #26a85c !important;
  background: #26a85c !important;
}

.community-post-tags label:has(input[value="safety"]:checked) {
  border-color: #d8ae18 !important;
  background: #d8ae18 !important;
}

.community-post-optional-tags label:has(input:checked) {
  border-color: rgba(255, 169, 64, 0.88) !important;
  background: rgba(168, 92, 18, 0.72) !important;
}

.community-post-tags label:has(input:checked) {
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-tags input:checked + span::before,
html[data-resolved-theme="dark"] .community-post-tags input:checked + span::before {
  background: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-detail-tags span,
html[data-resolved-theme="light"] .community-post-popup-tags span {
  background: #0891b2 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-detail-tags span[data-community-tag-pill="optional"],
html[data-resolved-theme="light"] .community-post-popup-tags span[data-community-tag-pill="optional"] {
  background: #d97706 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-like-button {
  border-color: #fda4af !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

html[data-resolved-theme="light"] .community-post-like-button span {
  color: #881337 !important;
}

html[data-resolved-theme="light"] .community-post-like-button.is-liked {
  border-color: #e11d48 !important;
  background: #fecdd3 !important;
  color: #be123c !important;
}

html[data-resolved-theme="light"] .community-post-follow-button {
  border-color: #0891b2 !important;
  background: #e0f2fe !important;
  color: #075985 !important;
}

html[data-resolved-theme="light"] .community-post-follow-button.is-following {
  background: #bae6fd !important;
}

html[data-resolved-theme="light"] .community-post-delete-button:not(:disabled) {
  border-color: #b91c1c !important;
  background: #dc2626 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="dark"] .community-post-delete-button:not(:disabled) {
  border-color: #ef4444 !important;
  background: #dc2626 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="dark"] .settings-status-card .settings-notification-row strong[data-state="off"],
html[data-resolved-theme="dark"] #settings-push-status[data-state="off"],
html[data-resolved-theme="dark"] #settings-location-status[data-state="off"] {
  border-color: #f43f5e !important;
  background: rgba(190, 24, 53, 0.48) !important;
  color: #ff8ba0 !important;
}

html[data-resolved-theme="light"] .community-post-section h3,
html[data-resolved-theme="light"] .community-post-location,
html[data-resolved-theme="light"] .community-media-picker span,
html[data-resolved-theme="light"] .community-media-picker small {
  color: #475569 !important;
}

html[data-resolved-theme="light"] .community-post-location-actions button,
html[data-resolved-theme="light"] .community-post-tags label,
html[data-resolved-theme="light"] .community-media-picker,
html[data-resolved-theme="light"] .community-media-remove {
  border-color: #94a3b8 !important;
  background: #e8eef4 !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .community-media-picker {
  border-color: #94a3b8 !important;
}

html[data-resolved-theme="light"] .community-post-submit {
  border-color: #c70c40 !important;
  background: linear-gradient(180deg, #f43f5e, #be123c) !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .admin-mode-maintenance,
html[data-resolved-theme="light"] .maintenance-reason-submit,
html[data-resolved-theme="light"] .feedback-submit {
  color: #ffffff !important;
}

/* Complete the light-theme treatment for the lower learning content. */
html[data-resolved-theme="light"] .learning-typhoon-fact-grid article,
html[data-resolved-theme="light"] .learning-typhoon-symbol-list article,
html[data-resolved-theme="light"] .learning-typhoon-action-list article,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid > div {
  border-color: #b8c3ce !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

html[data-resolved-theme="light"] .learning-typhoon-fact-grid article {
  border-color: #9fb9c2 !important;
  background: #f2f8fa !important;
}

html[data-resolved-theme="light"] .learning-typhoon-fact-grid strong,
html[data-resolved-theme="light"] .learning-typhoon-scale-grid h4 {
  color: #075e70 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-scale-grid h4 {
  border-bottom: 1px solid #c5ced8 !important;
  background: #e8edf2 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-route-diagram {
  border-color: #aab7c4 !important;
  background:
    linear-gradient(rgba(71, 85, 105, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(71, 85, 105, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    #ffffff !important;
}

html[data-resolved-theme="light"] .learning-typhoon-route-diagram text {
  fill: #334155 !important;
}

/* Keep the warning/wind areas semantic; only neutral white route lines become dark. */
html[data-resolved-theme="light"] .typhoon-forecast-route {
  stroke: #111827 !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-guide,
html[data-resolved-theme="light"] .typhoon-forecast-circle-links {
  stroke: rgba(17, 24, 39, 0.66) !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-circle {
  fill: rgba(255, 255, 255, 0.72) !important;
  stroke: #111827 !important;
}

html[data-resolved-theme="light"] .typhoon-current-mark {
  stroke: #111827 !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-center {
  fill: #111827 !important;
  stroke: #ffffff !important;
}

html[data-resolved-theme="light"] .learning-typhoon-symbol-list article > span {
  color: #111827 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-symbol-list .is-forecast {
  border-color: #111827 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-symbol-list .is-center-line::before {
  border-top-color: #111827 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-action-list article > span {
  border: 1px solid #91b5bf !important;
  background: #e4f2f5 !important;
  color: #075e70 !important;
}

/* EEW copy must remain readable on the light map. */
html[data-resolved-theme="light"] .eew-forecast-message {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .eew-forecast-panel li {
  border-color: #e94b5c !important;
  background: #ffe5e8 !important;
  color: #172033 !important;
}

.typhoon-forecast-label-light {
  display: none !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-label-dark {
  display: none !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-label-light {
  display: inline !important;
}

html[data-resolved-theme="light"] .typhoon-forecast-route,
html[data-resolved-theme="light"] .typhoon-forecast-guide,
html[data-resolved-theme="light"] .typhoon-forecast-circle-links {
  stroke: #111827 !important;
}

/* Muted account action color for the light profile screen. */
html[data-resolved-theme="light"] .community-account-panel .community-account-wide-button {
  border-color: #40586d !important;
  background: #50697d !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(38, 55, 70, 0.14) !important;
}

html[data-resolved-theme="light"] .community-account-wide-button::after,
html[data-resolved-theme="light"] #settings-admin-button span:first-child::after {
  color: #e6f3ff !important;
}

/* Appearance color schemes use selectable legend previews instead of a select. */
.intensity-color-scheme-native {
  display: none !important;
}

.settings-color-scheme-options {
  display: grid !important;
  gap: 9px !important;
}

.settings-color-scheme-choice {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "radio name" "preview preview" !important;
  align-items: center !important;
  gap: 8px 10px !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #e5edf5 !important;
  cursor: pointer !important;
}

.settings-color-scheme-choice:has(input:checked) {
  border-color: rgba(56, 189, 248, 0.68) !important;
  background: rgba(14, 165, 233, 0.14) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1) !important;
}

.settings-theme-choice {
  cursor: pointer !important;
}

.settings-theme-choice:has(input:checked) {
  border-color: rgba(56, 189, 248, 0.68) !important;
  background: rgba(14, 165, 233, 0.14) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1) !important;
}

.settings-theme-choice input {
  accent-color: #0ea5e9 !important;
}

.settings-color-scheme-choice input {
  grid-area: radio !important;
  margin: 0 !important;
  accent-color: #0ea5e9 !important;
}

.settings-color-scheme-name {
  grid-area: name !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
}

.settings-color-scheme-preview {
  grid-area: preview !important;
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-radius: 9px !important;
}

.settings-color-scheme-preview i {
  display: grid !important;
  min-width: 0 !important;
  min-height: 28px !important;
  place-items: center !important;
  background: var(--preview-color) !important;
  color: var(--preview-text) !important;
  font-size: clamp(0.58rem, 2.5vw, 0.72rem) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-resolved-theme="light"] .settings-appearance-section .settings-color-scheme-preview i {
  color: var(--preview-text) !important;
}

html[data-resolved-theme="light"] .settings-color-scheme-choice {
  border-color: #bcc7d2 !important;
  background: #ffffff !important;
  color: #1e293b !important;
}

html[data-resolved-theme="light"] .settings-color-scheme-choice:has(input:checked) {
  border-color: #0f766e !important;
  background: #e6f4f1 !important;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1) !important;
}

html[data-resolved-theme="light"] .settings-theme-choice:has(input:checked) {
  border-color: #0f766e !important;
  background: #e6f4f1 !important;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1) !important;
}

html[data-resolved-theme="light"] .settings-color-scheme-choice input,
html[data-resolved-theme="light"] .settings-theme-choice input {
  accent-color: #0f766e !important;
}

/* Match the pre-MapLibre surface to the resolved sea color from the first paint. */
html[data-resolved-theme="light"] .map-wrap,
html[data-resolved-theme="light"] #map,
html[data-resolved-theme="light"] .maplibregl-map,
html[data-resolved-theme="light"] .map-wrap::after {
  background: #dbe8f0 !important;
}

html[data-resolved-theme="dark"] .map-wrap,
html[data-resolved-theme="dark"] #map,
html[data-resolved-theme="dark"] .maplibregl-map,
html[data-resolved-theme="dark"] .map-wrap::after {
  background: #050914 !important;
}

/* Final simulation light-theme and information-ticket alignment fixes. */
html[data-resolved-theme="light"] .preset-depth-over,
html[data-resolved-theme="light"] .preset-magnitude-under {
  color: #526176 !important;
}

html[data-resolved-theme="light"] body.simulation-session-active:not(.simulation-session-complete)
  .simulation-runtime-hud #simulation-pause {
  border-color: #9aa8b8 !important;
  background: linear-gradient(180deg, #e8edf2, #d3dce5) !important;
  color: #334155 !important;
  box-shadow: 0 5px 13px rgba(51, 65, 85, 0.14), inset 0 1px #ffffff !important;
}

.simulation-runtime-hud .max-shindo-card {
  transform: none !important;
  align-self: center !important;
  justify-content: center !important;
}

.simulation-runtime-hud .max-shindo-card strong,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .max-shindo-card strong {
  padding: 0 !important;
}

/* Settings pages must fully cover the profile and map behind the sheet. */
.settings-menu-sheet .settings-inline-panel.settings-detail-panel {
  opacity: 1 !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-resolved-theme="light"] .settings-menu-sheet,
html[data-resolved-theme="light"] .settings-menu-sheet .settings-inline-panel.settings-detail-panel {
  background: #f4f7fa !important;
}

html[data-resolved-theme="dark"] .settings-menu-sheet,
html[data-resolved-theme="dark"] .settings-menu-sheet .settings-inline-panel.settings-detail-panel {
  background: #0a0e16 !important;
}

/* Leave breathing room between the appearance header and its first card. */
.settings-menu-sheet.settings-detail-open
  #settings-appearance-panel .settings-appearance-content {
  padding-top: 14px !important;
}

/* Weather-quiz quality curation and reporting. */
.weather-quiz-choice-grid.weather-quiz-target-grid label > span {
  justify-content: flex-start !important;
  text-align: left !important;
}

.weather-quiz-choice-grid input:disabled + span {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

.weather-quiz-quality-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.weather-quiz-quality-actions button {
  min-height: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 850 !important;
}

.weather-quiz-good-button span {
  color: #f6c453 !important;
}

.weather-quiz-good-button.is-selected {
  border-color: rgba(246, 196, 83, 0.72) !important;
  background: rgba(246, 196, 83, 0.13) !important;
  color: #ffe8a3 !important;
}

.weather-quiz-bad-button span {
  display: inline-grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  margin-right: 3px !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: #ff7d91 !important;
  font-size: 0.72rem !important;
}

.weather-quiz-quality-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 24000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, 0.66) !important;
}

.weather-quiz-quality-dialog {
  display: grid !important;
  gap: 13px !important;
  width: min(460px, 100%) !important;
  max-height: min(680px, calc(100svh - 36px)) !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;
  padding: 20px !important;
  background: #0f1520 !important;
  color: #eef4fb !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42) !important;
}

.weather-quiz-quality-dialog h2,
.weather-quiz-quality-dialog p {
  margin: 0 !important;
}

.weather-quiz-quality-question {
  max-height: 132px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 13px !important;
  padding: 11px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  white-space: pre-wrap !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

.weather-quiz-quality-dialog label {
  display: grid !important;
  gap: 7px !important;
  font-weight: 800 !important;
}

.weather-quiz-quality-dialog textarea {
  width: 100% !important;
  min-height: 126px !important;
  resize: vertical !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 13px !important;
  padding: 11px !important;
  background: #171e2a !important;
  color: #f4f7fb !important;
  line-height: 1.55 !important;
  box-sizing: border-box !important;
}

.weather-quiz-quality-status {
  min-height: 1.4em !important;
  color: #ff9bab !important;
  font-size: 0.76rem !important;
}

.weather-quiz-quality-status:has(+ .weather-quiz-quality-dialog-actions button[type="submit"]:disabled) {
  color: #9ceef8 !important;
}

.weather-quiz-quality-dialog-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.weather-quiz-quality-dialog-actions button {
  min-height: 43px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 13px !important;
  background: #202938 !important;
  color: #eaf0f7 !important;
  font-weight: 900 !important;
}

.weather-quiz-quality-dialog-actions button[type="submit"] {
  border-color: #d9485f !important;
  background: #c93650 !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-actions button {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-button.is-selected {
  border-color: #b88714 !important;
  background: #fff7d6 !important;
  color: #76570b !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-dialog {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: #f7f9fb !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-question {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: #ffffff !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-dialog textarea {
  border-color: rgba(51, 65, 85, 0.24) !important;
  background: #ffffff !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-dialog-actions button {
  border-color: rgba(51, 65, 85, 0.2) !important;
  background: #e7edf3 !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .weather-quiz-quality-dialog-actions button[type="submit"] {
  border-color: #c93650 !important;
  background: #c93650 !important;
  color: #ffffff !important;
}

/* Tools and Learning are full pages: never show the map or another tab through them. */
#info-full-panel,
#info-full-panel .tool-home-page,
#info-full-panel .tool-station-page,
#info-full-panel .tool-weather-quiz-page,
#info-full-panel .weather-quiz-content,
#learning-full-panel,
#learning-full-panel .learning-content {
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-resolved-theme="light"] #info-full-panel,
html[data-resolved-theme="light"] #info-full-panel .tool-home-page,
html[data-resolved-theme="light"] #info-full-panel .tool-station-page,
html[data-resolved-theme="light"] #info-full-panel .tool-weather-quiz-page,
html[data-resolved-theme="light"] #info-full-panel .weather-quiz-content,
html[data-resolved-theme="light"] #learning-full-panel,
html[data-resolved-theme="light"] #learning-full-panel .learning-content {
  background: #f4f7fa !important;
}

html[data-resolved-theme="dark"] #info-full-panel,
html[data-resolved-theme="dark"] #info-full-panel .tool-home-page,
html[data-resolved-theme="dark"] #info-full-panel .tool-station-page,
html[data-resolved-theme="dark"] #info-full-panel .tool-weather-quiz-page,
html[data-resolved-theme="dark"] #info-full-panel .weather-quiz-content,
html[data-resolved-theme="dark"] #learning-full-panel,
html[data-resolved-theme="dark"] #learning-full-panel .learning-content {
  background: #0a0e16 !important;
}

/* The learning introduction belongs directly on the page, without a white card shell. */
#learning-full-panel .learning-hero,
html[data-resolved-theme="light"] #learning-full-panel .learning-hero,
html[data-resolved-theme="dark"] #learning-full-panel .learning-hero {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Compact question rating controls above the question text. */
.weather-quiz-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.weather-quiz-card-head .weather-quiz-label {
  flex: 0 0 auto !important;
}

.weather-quiz-card-title {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.weather-quiz-question-id {
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 0.64rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}

html[data-resolved-theme="light"] .weather-quiz-question-id {
  color: rgba(15, 23, 42, 0.46) !important;
}

.weather-quiz-card-head .weather-quiz-quality-actions {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  margin-left: auto !important;
}

.weather-quiz-card-head .weather-quiz-quality-actions button {
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 0.67rem !important;
  line-height: 1 !important;
}

.weather-quiz-card-head .weather-quiz-bad-button span {
  width: 13px !important;
  height: 13px !important;
  margin-right: 1px !important;
  font-size: 0.58rem !important;
}

/* Good-question mode ignores year selection and exposes a removable saved list. */
.weather-quiz-setup fieldset.is-disabled .weather-quiz-year-grid {
  opacity: 0.42 !important;
  pointer-events: none !important;
}

.weather-quiz-setup fieldset.is-disabled .weather-quiz-year-grid label {
  cursor: default !important;
}

.weather-quiz-good-list-button {
  min-height: 38px !important;
  border: 1px solid rgba(246, 196, 83, 0.36) !important;
  border-radius: 12px !important;
  background: rgba(246, 196, 83, 0.09) !important;
  color: #ffe19a !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
}

.weather-quiz-good-list-button:disabled {
  opacity: 0.45 !important;
}

.weather-quiz-good-list-page,
.weather-quiz-good-list {
  display: grid !important;
  gap: 11px !important;
}

.weather-quiz-good-list-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.weather-quiz-good-list-head span,
.weather-quiz-good-list-head h3,
.weather-quiz-good-list-head strong {
  margin: 0 !important;
}

.weather-quiz-good-list-head span {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 0.68rem !important;
}

.weather-quiz-good-list-head h3 {
  color: #f8fafc !important;
  font-size: 1.05rem !important;
}

.weather-quiz-good-list-head strong {
  color: #f6c453 !important;
  font-size: 0.82rem !important;
}

.weather-quiz-good-list article {
  display: grid !important;
  gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 15px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.weather-quiz-good-list-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.weather-quiz-good-list-meta span {
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: rgba(38, 217, 255, 0.08) !important;
  color: #91eaf5 !important;
  font-size: 0.61rem !important;
  font-weight: 800 !important;
}

.weather-quiz-good-list article p,
.weather-quiz-good-list-empty {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  white-space: pre-wrap !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

.weather-quiz-good-list article button {
  justify-self: end !important;
  min-height: 30px !important;
  border: 1px solid rgba(255, 125, 145, 0.4) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  background: rgba(255, 125, 145, 0.08) !important;
  color: #ffadba !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list-button {
  border-color: #c99b2c !important;
  background: #fff8dc !important;
  color: #72530a !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list-head span {
  color: #64748b !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list-head h3 {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list-head strong {
  color: #8a650d !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list article {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: #ffffff !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list-meta span {
  background: #e8f4f6 !important;
  color: #126477 !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list article p,
html[data-resolved-theme="light"] .weather-quiz-good-list-empty {
  color: #334155 !important;
}

html[data-resolved-theme="light"] .weather-quiz-good-list article button {
  border-color: #d26678 !important;
  background: #fff1f3 !important;
  color: #9f243a !important;
}

/* Light profile: readable admin labels and clean follow surfaces. */
html[data-resolved-theme="light"] #settings-admin-button span:first-child::after {
  color: #526176 !important;
}

html[data-resolved-theme="light"] .community-account-wide-button::after {
  color: #f1f7fb !important;
}

html[data-resolved-theme="light"] .community-profile-main .community-profile-follow-counts button,
html[data-resolved-theme="light"] .community-profile-main .community-profile-follow-counts button:disabled {
  min-height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-resolved-theme="light"] .community-profile-follow-counts b {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-account-screen {
  background: #ffffff !important;
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-account-screen h2,
html[data-resolved-theme="light"] .community-account-screen-back,
html[data-resolved-theme="light"] .community-account-screen-status {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-account-list-item {
  border-color: #d8e0e8 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.055) !important;
}

html[data-resolved-theme="light"] .community-account-list-item span {
  color: #526176 !important;
}

html[data-resolved-theme="light"] .community-account-list-item em {
  color: #075985 !important;
}

html[data-resolved-theme="light"] .preset-intensity-badge {
  border: 0 !important;
  box-shadow: none !important;
}

html[data-resolved-theme="light"] .community-connection-list {
  color: #334155 !important;
}

html[data-resolved-theme="light"] .community-connection-item {
  border-color: #d8e0e8 !important;
  background: #ffffff !important;
  color: #172033 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.055) !important;
}

html[data-resolved-theme="light"] .community-connection-icon {
  border: 1px solid #cbd5e1 !important;
  background: #eef2f6 !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] .community-connection-name strong {
  color: #172033 !important;
}

html[data-resolved-theme="light"] .community-connection-name span {
  color: #075985 !important;
}

html[data-resolved-theme="light"] .community-connection-follow {
  border-color: #19718a !important;
  background: #e5f3f6 !important;
  color: #075d73 !important;
}

html[data-resolved-theme="light"] .community-connection-follow.is-following {
  border-color: #cbd5e1 !important;
  background: #eef2f6 !important;
  color: #475569 !important;
}

html[data-resolved-theme="light"] .community-connection-empty {
  color: #526176 !important;
}

/* Search controls sit directly on the page in both themes. */
.history-stats-toolbar,
.station-info-toolbar,
html[data-resolved-theme="light"] .history-stats-toolbar,
html[data-resolved-theme="light"] .station-info-toolbar,
html[data-resolved-theme="dark"] .history-stats-toolbar,
html[data-resolved-theme="dark"] .station-info-toolbar {
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Light settings details: keep source and privacy sections visibly separated. */
html[data-resolved-theme="light"] #settings-source-panel .source-info-section,
html[data-resolved-theme="light"] #settings-privacy-panel .source-info-section {
  border: 1px solid #d3dce6 !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045) !important;
}

html[data-resolved-theme="light"] #settings-source-panel .source-link-card,
html[data-resolved-theme="light"] #settings-privacy-panel .source-link-card {
  border: 1px solid #d9e1e9 !important;
  background: #f8fafc !important;
}

html[data-resolved-theme="light"] #settings-source-panel .source-info-section a,
html[data-resolved-theme="light"] #settings-source-panel .source-info-section a:visited {
  color: #2563eb !important;
}

html[data-resolved-theme="light"] #settings-source-panel .source-info-section a:hover,
html[data-resolved-theme="light"] #settings-source-panel .source-info-section a:focus-visible {
  color: #1d4ed8 !important;
}

/* The statistics action stays legible while it is waiting for a region. */
html[data-resolved-theme="light"] #history-statistics-load {
  border-color: #aebac7 !important;
  background: #e7edf3 !important;
  color: #334155 !important;
}

html[data-resolved-theme="light"] #history-statistics-load:disabled,
html[data-resolved-theme="light"] #history-statistics-load[aria-disabled="true"] {
  border-color: #c4ced8 !important;
  background: #e9edf1 !important;
  color: #64748b !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Keep the feedback input closer to its detail header in every theme. */
#settings-feedback-panel .settings-feedback-form {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#settings-feedback-panel .feedback-field {
  grid-row: 1 !important;
}

#settings-feedback-panel .feedback-status {
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
}

#settings-feedback-panel .feedback-submit {
  grid-row: 4 !important;
  align-self: end !important;
}

/* Final profile palette: soft actions in light mode, red destructive actions in both themes. */
html[data-resolved-theme="light"] .community-account-button-row > button:not(:disabled),
html[data-resolved-theme="light"] .community-account-panel .community-account-wide-button:not(:disabled),
html[data-resolved-theme="light"] .community-account-screen-form button[type="submit"]:not(:disabled) {
  border-color: #7dd3fc !important;
  background: #bae6fd !important;
  color: #0c4a6e !important;
  box-shadow: 0 4px 12px rgba(14, 116, 144, 0.1) !important;
}

html[data-resolved-theme="light"] .community-account-wide-button::after {
  color: #0c4a6e !important;
}

.community-account-danger-actions button:not(:disabled),
html[data-resolved-theme="dark"] .community-account-danger-actions button:not(:disabled) {
  border-color: rgba(251, 113, 133, 0.68) !important;
  background: #b91c32 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(127, 29, 29, 0.24) !important;
}

html[data-resolved-theme="light"] .community-account-danger-actions button:not(:disabled) {
  border-color: #fca5a5 !important;
  background: #fecaca !important;
  color: #991b1b !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.08) !important;
}

/* EEW area chips keep the red warning treatment on the light map too. */
html[data-resolved-theme="light"] .eew-forecast-panel li {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: #e60012 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22) !important;
}

/* Keep future timeline markers continuously composited while the track scrolls. */
.simulation-timeline-event.is-intensity-planned,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned {
  --simulation-planned-line-color: #f97316;
}

.simulation-timeline-event.is-eew-planned,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned {
  --simulation-planned-line-color: #ef4444;
}

.simulation-timeline-event.is-magnitude-planned,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  --simulation-planned-line-color: #64748b;
}

.simulation-timeline-event.is-intensity-planned,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
.simulation-timeline-event.is-eew-planned,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
.simulation-timeline-event.is-magnitude-planned,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  border-left: 1px solid transparent !important;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--simulation-planned-line-color) 0 6px,
    transparent 6px 11px
  ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: 2px 100% !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Light timeline markers use a real 2px paint surface. A 2px border on the
   original 1px element can disappear at some desktop/device scale factors. */
html[data-resolved-theme="light"] .simulation-timeline-event,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event {
  width: 2px !important;
  border-left: 0 !important;
  background-color: #334155 !important;
  background-image: none !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-intensity,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-intensity {
  background-color: #ea580c !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-eew,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-eew {
  background-color: #dc2626 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-magnitude,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude {
  background-color: #475569 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-complete,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-complete {
  background-color: #e11d48 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="light"] .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="light"] .simulation-timeline-event.is-magnitude-planned,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  border-left: 0 !important;
  background-color: transparent !important;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--simulation-planned-line-color) 0 6px,
    transparent 6px 11px
  ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: 2px 100% !important;
}

/* Timeline labels always cover the planned dashed line beneath them. */
.simulation-timeline-event b,
.simulation-runtime-hud .simulation-timeline-event b {
  z-index: 10 !important;
  isolation: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
}

/* Do not give individual markers their own stacking contexts: a later
   marker's line must never be able to paint over an earlier label. */
.simulation-timeline-event,
.simulation-runtime-hud .simulation-timeline-event,
.simulation-timeline-event.is-intensity-planned,
.simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
.simulation-timeline-event.is-eew-planned,
.simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
.simulation-timeline-event.is-magnitude-planned,
.simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  z-index: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-intensity-planned b,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned b {
  background: #fff7ed !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-eew-planned b,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned b {
  background: #fef2f2 !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-magnitude-planned b,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned b {
  background: #f1f5f9 !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-intensity-planned b,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned b {
  background: #432008 !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-eew-planned b,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned b {
  background: #450a0a !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-magnitude-planned b,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned b {
  background: #1e293b !important;
}

/* Keep selected optional tags identical in both appearance themes. */
html[data-resolved-theme="light"] .community-post-optional-tags label:has(input:checked),
html[data-resolved-theme="dark"] .community-post-optional-tags label:has(input:checked) {
  border-color: rgba(255, 169, 64, 0.88) !important;
  background: rgba(168, 92, 18, 0.72) !important;
  color: #ffffff !important;
}

html[data-resolved-theme="light"] .community-post-optional-tags input:checked + span::before,
html[data-resolved-theme="dark"] .community-post-optional-tags input:checked + span::before {
  background: #ffffff !important;
}

/* Final high-contrast settings status colors. */
html[data-resolved-theme="light"] #settings-push-status[data-state="on"],
html[data-resolved-theme="light"] #settings-location-status[data-state="on"] {
  border-color: #087443 !important;
  background: rgba(34, 168, 95, 0.28) !important;
  color: #087443 !important;
}

html[data-resolved-theme="dark"] #settings-push-status[data-state="off"],
html[data-resolved-theme="dark"] #settings-location-status[data-state="off"] {
  border-color: #ff647f !important;
  background: rgba(244, 63, 94, 0.36) !important;
  color: #ffb0bd !important;
}

/* Let notification history use all space down to the bottom navigation. */
#settings-push-history-panel.settings-detail-panel {
  height: 100% !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

#settings-push-history-panel.settings-detail-panel > .push-confirm-panel[data-push-panel="history"] {
  align-self: stretch !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#settings-push-history-panel.settings-detail-panel .push-history-list {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

#settings-push-history-panel .push-history-status:empty {
  display: none !important;
}

/* The source-search empty prompt should sit directly on the light panel. */
html[data-resolved-theme="light"] body.tool-source-search-mode
  #history-full-panel .history-stats-list {
  background: transparent !important;
}

/* Settings information menu order and acknowledgements page. */
#settings-feedback-button {
  order: 5 !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#settings-source-button {
  order: 6 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

#settings-privacy-button { order: 7 !important; }
#settings-acknowledgements-button { order: 8 !important; }
#settings-admin-button { order: 9 !important; }
#settings-feedback-panel { order: 14 !important; }
#settings-source-panel { order: 15 !important; }
#settings-privacy-panel { order: 16 !important; }
#settings-acknowledgements-panel { order: 17 !important; }
#settings-admin-panel { order: 18 !important; }

.settings-menu-sheet.settings-detail-open
  #settings-acknowledgements-panel .settings-acknowledgements-content {
  width: calc(100% - 32px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transform: translateX(3px) !important;
}

.acknowledgements-sections .source-info-section p {
  line-height: 1.8 !important;
}

.acknowledgements-brand {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 0 calc(10px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.acknowledgements-brand img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
}

html[data-resolved-theme="light"] .acknowledgements-brand {
  color: rgba(23, 32, 51, 0.56);
}

html[data-resolved-theme="light"] #settings-acknowledgements-panel .source-info-section {
  border: 1px solid #d3dce6 !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045) !important;
}

html[data-resolved-theme="light"] #settings-feedback-button {
  border-top-color: rgba(51, 65, 85, 0.16) !important;
}

/* Light tool pages need a visible divider below the back/title header. */
html[data-resolved-theme="light"] body.tool-source-search-mode
  #history-full-panel .tool-page-head,
html[data-resolved-theme="light"] body.tool-station-search-mode
  #info-full-panel .tool-page-head,
html[data-resolved-theme="light"] body.tool-weather-quiz-mode
  #info-full-panel .tool-page-head {
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.settings-admin-embedded .admin-account-info-button {
  border-color: rgba(56, 189, 248, 0.62) !important;
  background: rgba(14, 116, 144, 0.34) !important;
  color: #b6f0ff !important;
}

html[data-resolved-theme="light"] .settings-admin-embedded .admin-account-info-button {
  border-color: #38a3d1 !important;
  background: #dff3fb !important;
  color: #075985 !important;
}

.settings-admin-embedded .admin-section-menu {
  display: grid !important;
  gap: 0 !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin-right: -16px !important;
  margin-left: -16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.settings-admin-embedded .admin-section-menu.hidden,
.settings-admin-embedded .admin-section-page.hidden {
  display: none !important;
}

.settings-admin-embedded .admin-section-menu > button {
  margin: 0 !important;
  order: initial !important;
}

/* Nested admin rows remain visible while the outer settings rows slide away. */
.settings-menu-sheet.settings-detail-open
  .settings-admin-embedded .admin-section-menu > .settings-menu-row {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
}

.settings-admin-embedded .admin-section-menu > button span:last-child {
  opacity: inherit !important;
}

#settings-admin-panel.admin-subpage-open > .settings-detail-head {
  display: none !important;
}

.settings-admin-embedded .admin-section-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  width: 100% !important;
}

.settings-admin-embedded .admin-section-head {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 3px 8px 5px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.settings-admin-embedded .admin-section-head h3 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.settings-admin-embedded .admin-section-back {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  padding: 0 0 3px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}

.settings-menu-sheet.community-account-screen-open
  .community-account-screen-head {
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 3px 8px 5px !important;
}

.settings-menu-sheet.community-account-screen-open
  .community-account-screen-back {
  width: 34px !important;
  height: 34px !important;
}

/* Account information uses an absolute overlay. Keep it inside the same
   top inset as the regular administrator panel so switching pages does not
   make the 48px header jump vertically. */
.settings-menu-sheet.community-account-screen-open
  .community-account-screen {
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: 0 !important;
  height: auto !important;
}

/* Notification and maintenance are nested in the administrator panel. Their
   container normally keeps a 16px menu gap; remove it on subpages so every
   48px title header starts at the same vertical position. */
.settings-menu-sheet.settings-detail-open
  #settings-admin-panel.admin-subpage-open .settings-admin-embedded {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Account information is presented as a settings page, so its canvas follows
   the same theme surface instead of the legacy profile-overlay black. */
html[data-resolved-theme="dark"]
  .settings-menu-sheet.community-account-screen-open .community-account-screen {
  background: #0a0e16 !important;
}

html[data-resolved-theme="light"]
  .settings-menu-sheet.community-account-screen-open .community-account-screen {
  background: #f4f7fa !important;
}

html[data-resolved-theme="dark"]
  #settings-admin-panel.admin-subpage-open,
html[data-resolved-theme="dark"]
  #settings-admin-panel.admin-subpage-open .settings-admin-embedded,
html[data-resolved-theme="dark"]
  #settings-admin-panel.admin-subpage-open .admin-section-page,
html[data-resolved-theme="dark"]
  #settings-admin-panel.admin-subpage-open .admin-section-body,
html[data-resolved-theme="dark"]
  #settings-admin-panel.admin-subpage-open .admin-mode-dialog {
  background: #0a0e16 !important;
}

html[data-resolved-theme="light"]
  #settings-admin-panel.admin-subpage-open,
html[data-resolved-theme="light"]
  #settings-admin-panel.admin-subpage-open .settings-admin-embedded,
html[data-resolved-theme="light"]
  #settings-admin-panel.admin-subpage-open .admin-section-page,
html[data-resolved-theme="light"]
  #settings-admin-panel.admin-subpage-open .admin-section-body,
html[data-resolved-theme="light"]
  #settings-admin-panel.admin-subpage-open .admin-mode-dialog {
  background: #f4f7fa !important;
}

.settings-admin-embedded .admin-section-body {
  min-height: 0 !important;
  padding-top: 14px !important;
}

.settings-admin-embedded .admin-maintenance-reason-field {
  display: grid !important;
  gap: 7px !important;
  margin-bottom: 14px !important;
}

.settings-admin-embedded .admin-maintenance-reason-field span {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

.settings-admin-embedded .admin-maintenance-reason-field textarea {
  width: 100% !important;
  min-height: 96px !important;
  resize: vertical !important;
}

.settings-admin-embedded .admin-section-page .admin-notification-panel {
  border-top: 0 !important;
  padding-top: 0 !important;
}

html[data-resolved-theme="light"] .settings-admin-embedded .admin-section-menu > button {
  color: inherit !important;
}

html[data-resolved-theme="light"] .settings-admin-embedded .admin-section-head {
  border-bottom-color: #cbd5e1 !important;
}

/* Keep the nested administrator pages on the exact same header grid as the
   administrator menu, and let the menu rows meet both panel edges. */
#settings-admin-panel > .settings-detail-head,
.settings-admin-embedded .admin-section-head,
.settings-menu-sheet.community-account-screen-open .community-account-screen-head {
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  padding: 3px 8px 5px !important;
}

.settings-menu-sheet.settings-detail-open
  #settings-admin-panel .settings-admin-embedded {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

#settings-admin-panel .admin-mode-dialog,
#settings-admin-panel .admin-section-menu {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#settings-admin-panel .admin-section-body {
  padding: 14px 16px 0 !important;
}

.settings-admin-embedded .admin-overview {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.settings-admin-embedded .admin-overview > header {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-admin-embedded .admin-overview > header strong {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 950;
  white-space: nowrap;
}

.settings-admin-embedded .admin-overview > header button {
  min-height: 30px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  padding: 0 10px;
  background: rgba(14, 116, 144, 0.18);
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-overview-content {
  display: grid;
  gap: 10px;
}

.admin-overview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-overview-metrics article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(148, 163, 184, 0.07);
}

.admin-overview-metrics span {
  color: #94a3b8;
  font-size: 0.66rem;
  line-height: 1.3;
}

.admin-overview-metrics strong {
  color: #f1f5f9;
  font-size: 1.05rem;
  line-height: 1.15;
}

.admin-overview-system {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  overflow: hidden;
}

.admin-overview-system > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-overview-system > div:last-child {
  border-bottom: 0;
}

.admin-overview-system dt,
.admin-overview-system dd {
  margin: 0;
  font-size: 0.68rem;
}

.admin-overview-system dt {
  color: #94a3b8;
}

.admin-overview-system dd {
  color: #e2e8f0;
  text-align: right;
}

.admin-overview-system dd[data-state="ok"] {
  color: #86efac;
  font-weight: 900;
}

.admin-overview-system dd[data-state="warning"] {
  color: #fbbf24;
  font-weight: 900;
}

.admin-overview-maintenance-reason,
.admin-overview-status {
  margin: 0;
  color: #fbbf24;
  font-size: 0.68rem;
  line-height: 1.5;
}

html[data-resolved-theme="light"] .settings-admin-embedded .admin-overview {
  border-bottom-color: #d8e0e8;
}

html[data-resolved-theme="light"] .settings-admin-embedded .admin-overview > header button {
  border-color: #7dd3fc;
  background: #e0f2fe;
  color: #075985;
}

html[data-resolved-theme="light"] .admin-overview-metrics article,
html[data-resolved-theme="light"] .admin-overview-system {
  border-color: #d8e0e8;
  background: #ffffff;
}

html[data-resolved-theme="light"] .admin-overview-metrics span,
html[data-resolved-theme="light"] .admin-overview-system dt {
  color: #526176;
}

html[data-resolved-theme="light"] .admin-overview-metrics strong,
html[data-resolved-theme="light"] .admin-overview-system dd {
  color: #172033;
}

html[data-resolved-theme="light"] .admin-overview-system > div {
  border-bottom-color: #e2e8f0;
}

html[data-resolved-theme="light"] .admin-overview-system dd[data-state="ok"] {
  color: #15803d;
}

html[data-resolved-theme="light"] .admin-overview-system dd[data-state="warning"] {
  color: #a16207;
}

.community-account-list-stats,
.community-account-list-dates {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px 10px;
}

.community-account-list-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 5px;
}

.community-account-list-dates {
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.community-account-list-stats span,
.community-account-list-dates span {
  grid-column: auto;
  min-width: 0;
}

.community-account-list-dates span {
  font-size: 0.68rem;
}

html[data-resolved-theme="light"] .community-account-list-dates {
  border-top-color: #e2e8f0;
}

/* Keep the administrator operation area scrollable inside the fixed settings page. */
#settings-admin-panel,
#settings-admin-panel .settings-admin-embedded,
#settings-admin-panel .admin-mode-dialog {
  min-height: 0 !important;
}

#settings-admin-panel:not(.admin-subpage-open) .settings-admin-embedded {
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

#settings-admin-panel.admin-subpage-open .settings-admin-embedded,
#settings-admin-panel.admin-subpage-open .admin-mode-dialog,
#settings-admin-panel.admin-subpage-open .admin-section-page {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#settings-admin-panel.admin-subpage-open .admin-section-body {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

.settings-admin-embedded .admin-overview > header button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* The planned maximum-intensity observation line needs a wider luminous dash on dark TL. */
html[data-resolved-theme="dark"] .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned {
  --simulation-planned-line-color: #fb923c;
  width: 3px !important;
  border-left: 0 !important;
  background-color: transparent !important;
  background-image: repeating-linear-gradient(
    to bottom,
    #fb923c 0 7px,
    transparent 7px 12px
  ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: 3px 100% !important;
  filter: drop-shadow(0 0 2px rgba(251, 146, 60, 0.72));
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned {
  --simulation-planned-line-color: #fb7185;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-magnitude-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  --simulation-planned-line-color: #cbd5e1;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme="dark"] .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme="dark"] .simulation-timeline-event.is-magnitude-planned,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  width: 3px !important;
  border-left: 0 !important;
  background-color: transparent !important;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--simulation-planned-line-color) 0 7px,
    transparent 7px 12px
  ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: 3px 100% !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.38));
}

/* Keep source URLs recognizably clickable in the light theme. */
html[data-resolved-theme="light"] #settings-source-panel a[href],
html[data-resolved-theme="light"] #settings-source-panel a[href]:visited,
html[data-resolved-theme="light"] #settings-privacy-panel a[href],
html[data-resolved-theme="light"] #settings-privacy-panel a[href]:visited,
html[data-resolved-theme="light"] .source-info-overlay[aria-label="出典"] a[href],
html[data-resolved-theme="light"] .source-info-overlay[aria-label="出典"] a[href]:visited,
html[data-resolved-theme="light"] .source-info-panel a[href],
html[data-resolved-theme="light"] .source-info-panel a[href]:visited {
  color: #0067d9 !important;
  text-decoration-color: currentColor !important;
}

html[data-resolved-theme="light"] #settings-source-panel a[href]:hover,
html[data-resolved-theme="light"] #settings-source-panel a[href]:focus-visible,
html[data-resolved-theme="light"] #settings-privacy-panel a[href]:hover,
html[data-resolved-theme="light"] #settings-privacy-panel a[href]:focus-visible,
html[data-resolved-theme="light"] .source-info-overlay[aria-label="出典"] a[href]:hover,
html[data-resolved-theme="light"] .source-info-overlay[aria-label="出典"] a[href]:focus-visible,
html[data-resolved-theme="light"] .source-info-panel a[href]:hover,
html[data-resolved-theme="light"] .source-info-panel a[href]:focus-visible {
  color: #004ea8 !important;
}

.fault-mode-switch-notice.is-startup-hint {
  z-index: 33050;
  top: auto;
  bottom: calc(94px + env(safe-area-inset-bottom));
  border-color: rgba(14, 165, 233, 0.42);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}

#earthquake-tab.show-long-press-hint {
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.18) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.28), 0 0 18px rgba(14, 165, 233, 0.34);
}

#earthquake-tab.show-long-press-hint .bottom-tab-icon,
#earthquake-tab.show-long-press-hint span:last-child {
  color: #0ea5e9 !important;
}

html[data-resolved-theme="light"] .fault-mode-switch-notice.is-startup-hint {
  border-color: #93c5fd;
  background: rgba(255, 255, 255, 0.97);
  color: #0f3f76;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

/* Compact learning cards for secondary earthquake and weather hazards. */
.learning-disaster-topic-card {
  border-left: 4px solid #22d3ee !important;
}

.learning-liquefaction-card {
  border-left-color: #f59e0b !important;
}

.learning-topic-label {
  display: block;
  margin-bottom: 5px;
  color: #67e8f9;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.learning-liquefaction-card .learning-topic-label {
  color: #fbbf24;
}

.learning-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.learning-topic-grid article {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.learning-topic-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #f8fafc;
  font-size: 0.78rem;
}

.learning-topic-grid p {
  font-size: 0.76rem !important;
  line-height: 1.55 !important;
}

html[data-resolved-theme="light"] .learning-topic-label {
  color: #0369a1;
}

html[data-resolved-theme="light"] .learning-liquefaction-card .learning-topic-label {
  color: #a16207;
}

html[data-resolved-theme="light"] .learning-topic-grid article {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(241, 245, 249, 0.9);
}

html[data-resolved-theme="light"] .learning-topic-grid strong {
  color: #0f172a;
}

@media (max-width: 720px) {
  .learning-topic-grid {
    grid-template-columns: 1fr;
  }
}

/* The representative typhoon route must read as true black on the light diagram. */
html[data-resolved-theme="light"] .learning-typhoon-route-diagram .typhoon-forecast-route {
  stroke: #000000 !important;
  opacity: 1 !important;
}

html[data-resolved-theme="light"] .learning-typhoon-route-diagram .typhoon-forecast-circle {
  fill: transparent !important;
}

/* Prototype A/B simulation result comparison. */
.simulation-result-report-actions .simulation-comparison-save-button {
  border-color: rgba(56, 189, 248, 0.56);
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
}

.simulation-result-report-actions .simulation-comparison-show-button {
  border-color: rgba(167, 139, 250, 0.58);
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

.simulation-result-report-actions .simulation-comparison-show-button:disabled {
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(71, 85, 105, 0.58);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
}

.simulation-comparison-panel {
  display: grid;
  min-width: 0;
  gap: 12px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 17px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(76, 29, 149, 0.18), rgba(15, 23, 42, 0.72));
}

.simulation-comparison-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.simulation-comparison-head span {
  display: block;
  color: #c4b5fd;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.simulation-comparison-head h4 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.simulation-comparison-head button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.simulation-comparison-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.simulation-comparison-scenario {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.055);
}

.simulation-comparison-scenario.is-a {
  border-top: 3px solid #38bdf8;
}

.simulation-comparison-scenario.is-b {
  border-top: 3px solid #a78bfa;
}

.simulation-comparison-scenario header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.simulation-comparison-scenario header b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #0ea5e9;
  color: #ffffff;
}

.simulation-comparison-scenario.is-b header b {
  background: #8b5cf6;
}

.simulation-comparison-scenario header span {
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.simulation-comparison-scenario > strong {
  display: block;
  min-height: 2.5em;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.3;
}

.simulation-comparison-scenario dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.simulation-comparison-scenario dl > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px;
  font-size: 0.72rem;
}

.simulation-comparison-scenario dt {
  color: rgba(226, 232, 240, 0.62);
  font-weight: 750;
}

.simulation-comparison-scenario dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.simulation-comparison-key-deltas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.simulation-comparison-key-deltas article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.065);
}

.simulation-comparison-key-deltas span {
  grid-column: 1 / -1;
  color: rgba(226, 232, 240, 0.66);
  font-size: 0.68rem;
  font-weight: 800;
}

.simulation-comparison-key-deltas strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.simulation-comparison-key-deltas small {
  color: #c4b5fd;
  font-size: 0.7rem;
  font-weight: 900;
}

.simulation-comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
}

.simulation-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  text-align: center;
}

.simulation-comparison-table th,
.simulation-comparison-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.085);
  padding: 7px 8px;
}

.simulation-comparison-table thead th,
.simulation-comparison-table tfoot th,
.simulation-comparison-table tfoot td {
  background: rgba(255, 255, 255, 0.055);
  font-weight: 900;
}

.simulation-comparison-table tbody th span {
  display: inline-grid;
  min-width: 42px;
  min-height: 25px;
  place-items: center;
  border-radius: 7px;
  background: var(--comparison-intensity-color);
  color: var(--comparison-intensity-text);
  font-weight: 900;
}

.simulation-comparison-table .is-increase {
  color: #fda4af;
  font-weight: 900;
}

.simulation-comparison-table .is-decrease {
  color: #7dd3fc;
  font-weight: 900;
}

.simulation-comparison-note {
  margin: 0;
  color: rgba(226, 232, 240, 0.64);
  font-size: 0.7rem;
  line-height: 1.55;
}

html[data-resolved-theme="light"] .simulation-comparison-panel {
  border-color: rgba(109, 40, 217, 0.2);
  background: linear-gradient(145deg, #f5f3ff, #ffffff);
  color: #0f172a;
}

html[data-resolved-theme="light"] .simulation-comparison-head span,
html[data-resolved-theme="light"] .simulation-comparison-key-deltas small {
  color: #6d28d9;
}

html[data-resolved-theme="light"] .simulation-comparison-head button,
html[data-resolved-theme="light"] .simulation-comparison-scenario,
html[data-resolved-theme="light"] .simulation-comparison-key-deltas article,
html[data-resolved-theme="light"] .simulation-comparison-table-wrap {
  border-color: rgba(15, 23, 42, 0.13);
  background: rgba(241, 245, 249, 0.84);
}

html[data-resolved-theme="light"] .simulation-comparison-scenario header span,
html[data-resolved-theme="light"] .simulation-comparison-scenario dt,
html[data-resolved-theme="light"] .simulation-comparison-key-deltas span,
html[data-resolved-theme="light"] .simulation-comparison-note {
  color: #526173;
}

html[data-resolved-theme="light"] .simulation-comparison-table th,
html[data-resolved-theme="light"] .simulation-comparison-table td {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

html[data-resolved-theme="light"] .simulation-comparison-table thead th,
html[data-resolved-theme="light"] .simulation-comparison-table tfoot th,
html[data-resolved-theme="light"] .simulation-comparison-table tfoot td {
  background: #e8edf4;
}

html[data-resolved-theme="light"] .simulation-comparison-table .is-increase {
  color: #be123c;
}

html[data-resolved-theme="light"] .simulation-comparison-table .is-decrease {
  color: #0369a1;
}

@media (max-width: 430px) {
  .simulation-comparison-cards,
  .simulation-comparison-key-deltas {
    grid-template-columns: 1fr;
  }
}

/* Persistent scenario library and share sheet. */
.fault-scenario-open-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(56, 189, 248, 0.48);
  border-radius: 14px;
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
  color: #ffffff;
  font: inherit;
  font-weight: 900;
}

#setup-panel .simulation-scenario-menu-section {
  display: grid;
  margin: 8px 0 10px !important;
  border: 1px solid rgba(56, 189, 248, 0.24) !important;
  border-radius: 16px;
  padding: 10px !important;
  background: rgba(14, 165, 233, 0.07);
}

#setup-panel .simulation-scenario-menu-section[hidden] {
  display: none !important;
}

body.fault-simulation-mode #simulation-scenario-menu-section {
  display: none !important;
}

.simulation-scenario-overlay {
  position: fixed;
  inset: 0 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) 0;
  z-index: 34000;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.74);
  backdrop-filter: blur(9px);
}

.simulation-scenario-overlay.hidden {
  display: none !important;
}

body.simulation-scenario-overlay-open {
  overflow: hidden !important;
}

.simulation-scenario-dialog {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  width: min(620px, 100%);
  max-height: min(780px, calc(100dvh - 28px));
  overflow-y: auto;
  gap: 13px;
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 20px;
  padding: 0 15px 17px;
  background: #0a0e16;
  color: #f8fafc;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.simulation-scenario-dialog > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing: border-box;
  margin: 0 -15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 8px;
  background: #0a0e16;
  backdrop-filter: blur(10px);
}

.simulation-scenario-dialog > header h2 {
  margin: 0;
  text-align: center;
  font-size: 1rem;
}

.simulation-scenario-dialog > header button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.8rem;
}

.simulation-scenario-save-form,
.simulation-scenario-import-form {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 15px;
  padding: 12px;
  background: rgba(14, 165, 233, 0.07);
}

.simulation-scenario-save-form label,
.simulation-scenario-import-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.simulation-scenario-save-form label span,
.simulation-scenario-import-form label span {
  color: #bae6fd;
  font-size: 0.72rem;
  font-weight: 850;
}

.simulation-scenario-save-form input,
.simulation-scenario-import-form input {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 11px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  font: inherit;
}

.simulation-scenario-save-form button,
.simulation-scenario-import-form button {
  min-height: 43px;
  border: 1px solid #38bdf8;
  border-radius: 11px;
  padding: 8px 12px;
  background: #0284c7;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.simulation-scenario-status {
  min-height: 1.3em;
  margin: -4px 2px 0;
  color: #7dd3fc;
  font-size: 0.74rem;
}

.simulation-scenario-list-section {
  display: grid;
  gap: 9px;
}

.simulation-scenario-list-section h3 {
  margin: 0;
  font-size: 0.86rem;
}

.simulation-scenario-list {
  display: grid;
  gap: 9px;
}

.simulation-scenario-item {
  display: grid;
  min-width: 0;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.simulation-scenario-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

.simulation-scenario-item > div:first-child strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.simulation-scenario-item > div:first-child span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
  font-size: 0.65rem;
  font-weight: 850;
}

.simulation-scenario-item dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.simulation-scenario-item dl > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px;
  font-size: 0.72rem;
}

.simulation-scenario-item dt {
  color: rgba(226, 232, 240, 0.62);
  font-weight: 800;
}

.simulation-scenario-item dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.simulation-scenario-item-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.simulation-scenario-item-actions button {
  min-height: 38px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.12);
  color: #e0f2fe;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
}

.simulation-scenario-item-actions button[data-scenario-action="delete"] {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(190, 18, 60, 0.12);
  color: #fda4af;
}

.simulation-scenario-empty {
  margin: 0;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.72rem;
  line-height: 1.55;
}

html[data-resolved-theme="light"] .simulation-scenario-dialog {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

html[data-resolved-theme="light"] #setup-panel .simulation-scenario-menu-section {
  border-color: #bae6fd !important;
  background: #f0f9ff;
}

html[data-resolved-theme="light"] .simulation-scenario-dialog > header {
  border-bottom-color: #d8e0e9;
  background: rgba(248, 250, 252, 0.96);
}

html[data-resolved-theme="light"] .simulation-scenario-save-form,
html[data-resolved-theme="light"] .simulation-scenario-import-form {
  border-color: #bae6fd;
  background: #f0f9ff;
}

html[data-resolved-theme="light"] .simulation-scenario-save-form label span,
html[data-resolved-theme="light"] .simulation-scenario-import-form label span,
html[data-resolved-theme="light"] .simulation-scenario-status {
  color: #0369a1;
}

html[data-resolved-theme="light"] .simulation-scenario-save-form input,
html[data-resolved-theme="light"] .simulation-scenario-import-form input {
  border-color: #b9c6d4;
  background: #ffffff;
  color: #0f172a;
}

html[data-resolved-theme="light"] .simulation-scenario-item {
  border-color: #d4dde7;
  background: #ffffff;
}

html[data-resolved-theme="light"] .simulation-scenario-item > div:first-child span {
  background: #e0f2fe;
  color: #075985;
}

html[data-resolved-theme="light"] .simulation-scenario-item dt,
html[data-resolved-theme="light"] .simulation-scenario-empty {
  color: #526173;
}

html[data-resolved-theme="light"] .simulation-scenario-item-actions button {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #075985;
}

html[data-resolved-theme="light"] .simulation-scenario-item-actions button[data-scenario-action="delete"] {
  border-color: #fda4af;
  background: #fff1f2;
  color: #be123c;
}

@media (max-width: 520px) {
  .simulation-scenario-overlay {
    place-items: stretch;
    padding: 0;
  }

  .simulation-scenario-dialog {
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-width: 0;
    border-radius: 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .simulation-scenario-save-form,
  .simulation-scenario-import-form {
    grid-template-columns: 1fr;
  }
}

/* Keep TL labels fixed when a planned dashed event becomes an actual solid event. */
html[data-resolved-theme] .simulation-timeline-event,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event {
  width: 3px !important;
  border-left: 0 !important;
  background-color: var(--tl-stable-line, #cbd5e1) !important;
  background-image: none !important;
  transition: none !important;
}

html[data-resolved-theme] .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event.is-intensity-planned,
html[data-resolved-theme] .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event.is-eew-planned,
html[data-resolved-theme] .simulation-timeline-event.is-magnitude-planned,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event.is-magnitude-planned {
  background-color: transparent !important;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--tl-stable-line) 0 7px,
    transparent 7px 12px
  ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: 3px 100% !important;
  filter: none !important;
}

.simulation-timeline-event b,
.simulation-runtime-hud .simulation-timeline-event b {
  left: 8px !important;
  box-sizing: border-box !important;
  background: var(--tl-stable-label) !important;
  transform: none !important;
  transition: none !important;
}

html[data-resolved-theme] .simulation-timeline-event:is(
  .is-intensity,
  .is-intensity-planned,
  .is-eew,
  .is-eew-planned,
  .is-magnitude,
  .is-magnitude-planned
) b,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event:is(
  .is-intensity,
  .is-intensity-planned,
  .is-eew,
  .is-eew-planned,
  .is-magnitude,
  .is-magnitude-planned
) b {
  background: var(--tl-stable-label) !important;
}

html[data-resolved-theme="light"] .simulation-timeline-event,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event {
  --tl-stable-line: #334155;
  --tl-stable-label: rgba(248, 250, 252, 0.96);
}

html[data-resolved-theme="light"] .simulation-timeline-event:is(.is-intensity, .is-intensity-planned),
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event:is(.is-intensity, .is-intensity-planned) {
  --tl-stable-line: #ea580c;
  --tl-stable-label: #fff7ed;
}

html[data-resolved-theme="light"] .simulation-timeline-event:is(.is-eew, .is-eew-planned),
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event:is(.is-eew, .is-eew-planned) {
  --tl-stable-line: #dc2626;
  --tl-stable-label: #fef2f2;
}

html[data-resolved-theme="light"] .simulation-timeline-event:is(.is-magnitude, .is-magnitude-planned),
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event:is(.is-magnitude, .is-magnitude-planned) {
  --tl-stable-line: #475569;
  --tl-stable-label: #f1f5f9;
}

html[data-resolved-theme="light"] .simulation-timeline-event.is-complete,
html[data-resolved-theme="light"] .simulation-runtime-hud .simulation-timeline-event.is-complete {
  --tl-stable-line: #e11d48;
}

html[data-resolved-theme="dark"] .simulation-timeline-event,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event {
  --tl-stable-line: #cbd5e1;
  --tl-stable-label: rgba(15, 23, 42, 0.96);
}

html[data-resolved-theme="dark"] .simulation-timeline-event:is(.is-intensity, .is-intensity-planned),
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event:is(.is-intensity, .is-intensity-planned) {
  --tl-stable-line: #fb923c;
  --tl-stable-label: #432008;
}

html[data-resolved-theme="dark"] .simulation-timeline-event:is(.is-eew, .is-eew-planned),
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event:is(.is-eew, .is-eew-planned) {
  --tl-stable-line: #fb7185;
  --tl-stable-label: #450a0a;
}

html[data-resolved-theme="dark"] .simulation-timeline-event:is(.is-magnitude, .is-magnitude-planned),
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event:is(.is-magnitude, .is-magnitude-planned) {
  --tl-stable-label: #1e293b;
}

html[data-resolved-theme="dark"] .simulation-timeline-event.is-complete,
html[data-resolved-theme="dark"] .simulation-runtime-hud .simulation-timeline-event.is-complete {
  --tl-stable-line: #fb7185;
}

/* Paint the completion line past both TL edges so track clipping cannot leave a gap. */
html[data-resolved-theme] .simulation-timeline-event.is-complete,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event.is-complete {
  overflow: visible !important;
  background-color: transparent !important;
}

html[data-resolved-theme] .simulation-timeline-event.is-complete::before,
html[data-resolved-theme] .simulation-runtime-hud .simulation-timeline-event.is-complete::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 3px;
  background: var(--tl-stable-line);
  pointer-events: none;
}

/* Use a light mini-map treatment in the light appearance. */
html[data-resolved-theme="light"] .community-post-location-preview {
  border-color: rgba(100, 116, 139, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(71, 85, 105, 0.1) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(0deg, rgba(71, 85, 105, 0.08) 1px, transparent 1px) 0 0 / 38px 38px,
    radial-gradient(circle at 68% 36%, rgba(14, 165, 233, 0.13), transparent 34%),
    linear-gradient(180deg, #f8fbfd, #dce8ef) !important;
}

html[data-resolved-theme="light"] .community-post-location-preview::before {
  background: rgba(51, 65, 85, 0.22) !important;
  box-shadow:
    60px 24px 0 rgba(51, 65, 85, 0.18),
    170px 42px 0 rgba(51, 65, 85, 0.14),
    270px 12px 0 rgba(51, 65, 85, 0.14) !important;
}

html[data-resolved-theme="light"] .community-post-location-preview-text {
  color: #334155 !important;
}

html[data-resolved-theme="light"] .community-post-location-dot {
  border-color: #64748b !important;
}

html[data-resolved-theme="light"] .community-post-location-dot.is-set {
  border-color: #ffffff !important;
  background: #0284c7 !important;
  box-shadow: 0 0 0 7px rgba(2, 132, 199, 0.16) !important;
}

/* Compact playback controls live beside the timeline heading. */
.simulation-progress-head {
  gap: 6px !important;
}

.simulation-progress-head > span {
  flex: 0 0 auto;
}

.simulation-progress-head > #simulation-progress-time {
  display: none !important;
}

.simulation-timeline-quick-controls {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.simulation-timeline-quick-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: #334155;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.simulation-timeline-quick-controls button.is-active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.simulation-timeline-quick-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.simulation-timeline-control-separator {
  align-self: center;
  flex: 0 0 auto;
  width: 2px;
  height: 16px;
  margin-inline: 2px;
  background: rgba(71, 85, 105, 0.72);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Match the point-source selection state to the fault-menu edit button. */
#setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle:checked),
html[data-resolved-theme="light"]
  #setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle:checked),
html[data-resolved-theme="dark"]
  #setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle:checked) {
  border-color: #0284c7 !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
}

#setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle:checked)::before {
  content: none !important;
  display: none !important;
}

/* Use the same dimensions as the fault menu's in-sheet Start button. */
#setup-panel .setup-epicenter-actions .toggle-row:has(#epicenter-edit-toggle),
#setup-panel .setup-epicenter-actions .setup-current-location-button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 15px !important;
  padding: 0 12px !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Share one control size across source, fault, result, and completed-run menus. */
#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle,
.fault-scenario-open-button,
#fault-simulation-menu button,
.simulation-result-report-actions button,
.simulation-comparison-head button,
body.simulation-session-complete .simulation-runtime-hud .simulation-timeline-controls button {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 15px !important;
  padding: 0 12px !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#setup-panel .simulation-quick-actions #historical-earthquake-button,
#setup-panel .simulation-quick-actions .sheet-speech-toggle,
.fault-scenario-open-button,
#fault-simulation-menu button,
.simulation-result-report-actions button,
body.simulation-session-complete .simulation-runtime-hud .simulation-timeline-controls button {
  width: 100% !important;
  min-width: 0 !important;
}

/* Light sheets should not show a second frame behind these standalone actions. */
html[data-resolved-theme="light"] #setup-panel .simulation-quick-actions,
html[data-resolved-theme="light"] #setup-panel .simulation-start-sheet-host {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions #historical-earthquake-button,
html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle,
html[data-resolved-theme="light"]
  #setup-panel #simulation-start.sheet-simulation-start {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle strong {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle::before,
html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle::after,
html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle strong::before,
html[data-resolved-theme="light"]
  #setup-panel .simulation-quick-actions .sheet-speech-toggle strong::after,
html[data-resolved-theme="light"]
  #setup-panel #simulation-start.sheet-simulation-start::before,
html[data-resolved-theme="light"]
  #setup-panel #simulation-start.sheet-simulation-start::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove the faint dark slab behind the simulation-result title. */
html[data-resolved-theme="dark"]
  #setup-panel.simulation-result-report-open .simulation-result-report-head,
html[data-resolved-theme="dark"]
  #setup-panel.simulation-result-report-open .simulation-result-report-head h3 {
  border-right: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Match the result report shell and information ticket to the runtime HUD. */
body.simulation-session-active #setup-panel.simulation-result-report-open {
  box-sizing: border-box !important;
  width: min(460px, calc(100% - 48px)) !important;
  max-width: 460px !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-page {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Both point-source and fault results use the standard 48px title bar. */
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-head {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-content,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-runtime-hud,
body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-summary {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .simulation-result-report-summary-host .simulation-summary {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  row-gap: 0 !important;
  min-height: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

@media (max-width: 560px) {
  body.simulation-session-active #setup-panel.simulation-result-report-open {
    width: min(420px, calc(100% - 40px)) !important;
    max-width: 420px !important;
  }
}

/* The visible result title area itself is exactly 48px, including no outer top inset. */
body.simulation-session-active #setup-panel.simulation-result-report-open {
  padding-top: 0 !important;
}

body.simulation-session-active #setup-panel.simulation-result-report-open
  .sim-panel-scroll {
  padding-top: 0 !important;
}

/* Compact result actions and the two controls shown while a simulation is running. */
.simulation-result-report-actions button,
.simulation-comparison-head button,
body.simulation-session-active:not(.simulation-session-complete)
  .simulation-runtime-hud .simulation-pause,
body.simulation-session-active:not(.simulation-session-complete)
  .simulation-runtime-hud .simulation-stop,
body.simulation-session-complete
  .simulation-runtime-hud .simulation-timeline-controls button {
  box-sizing: border-box !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 11px !important;
  padding: 0 10px !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
}

/* The epicenter-search title bar is exactly 48px including its padding. */
body.tool-source-search-mode #history-full-panel .tool-page-head {
  box-sizing: border-box !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
}

body.tool-source-search-mode #history-full-panel .tool-page-back {
  width: 40px !important;
  height: 40px !important;
}

body.tool-source-search-mode #history-full-panel {
  box-sizing: border-box !important;
  left: 50% !important;
  right: auto !important;
  width: min(460px, calc(100% - 48px)) !important;
  max-width: 460px !important;
  padding-top: 0 !important;
  transform: translateX(-50%) !important;
}

/* Match the title-divider-to-controls spacing used by station search. */
body.tool-source-search-mode #history-full-panel .history-stats-toolbar {
  margin-top: -12px !important;
}

@media (max-width: 560px) {
  body.tool-source-search-mode #history-full-panel {
    width: min(420px, calc(100% - 40px)) !important;
    max-width: 420px !important;
  }
}

body.simulation-session-active:not(.simulation-session-complete)
  .simulation-runtime-hud
  .simulation-timeline-quick-controls
  #simulation-rewind {
  display: inline-block !important;
}

html[data-resolved-theme="dark"] .simulation-timeline-quick-controls button {
  border-color: rgba(203, 213, 225, 0.3);
  background: rgba(30, 41, 59, 0.88);
  color: #e2e8f0;
}

html[data-resolved-theme="dark"]
  .simulation-timeline-control-separator {
  background: rgba(226, 232, 240, 0.82);
  box-shadow: 0 0 3px rgba(148, 163, 184, 0.35);
}

html[data-resolved-theme="light"]
  .simulation-timeline-control-separator {
  background: rgba(51, 65, 85, 0.78);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.75);
}

html[data-resolved-theme="dark"] .simulation-timeline-quick-controls button.is-active {
  border-color: #60a5fa;
  background: #2563eb;
  color: #fff;
}

@media (max-width: 360px) {
  .simulation-timeline-quick-controls {
    gap: 2px;
  }

  .simulation-timeline-quick-controls button {
    min-height: 22px;
    padding-inline: 2px;
    font-size: 0.56rem;
  }

  .simulation-timeline-control-separator {
    margin-inline: 2px;
  }
}

/* Organize the Earthquake / Weather learning pages as one consistent system. */
#learning-full-panel .learning-content {
  width: min(720px, 100%) !important;
  margin-inline: auto !important;
  gap: 12px !important;
  padding-inline: 14px !important;
}

#learning-full-panel .learning-category-switch {
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 14px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
}

#learning-full-panel .learning-category-switch button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(226, 232, 240, 0.68) !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
}

#learning-full-panel .learning-category-switch button::before {
  content: none !important;
  display: none !important;
}

#learning-full-panel .learning-category-switch button[aria-selected="true"] {
  background: #087f98 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(8, 127, 152, 0.28) !important;
}

#learning-full-panel .learning-category-switch button[aria-selected="true"]::before {
  content: none !important;
  display: none !important;
}

#learning-full-panel .learning-category-panel,
#learning-full-panel .learning-weather-section,
#learning-full-panel .learning-typhoon-section {
  gap: 12px !important;
}

#learning-full-panel .learning-hero,
#learning-full-panel .learning-section-heading,
#learning-full-panel .learning-category-panel > .learning-weather-section:first-child > .learning-section-heading {
  padding: 10px 4px 4px !important;
}

#learning-full-panel .learning-hero h2,
#learning-full-panel .learning-section-heading h2 {
  margin: 7px 0 8px !important;
  font-size: 1.18rem !important;
  font-weight: 950 !important;
  line-height: 1.32 !important;
  letter-spacing: 0.01em !important;
}

#learning-full-panel .learning-kicker {
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

#learning-full-panel .learning-hero > p,
#learning-full-panel .learning-section-heading > p {
  color: rgba(226, 232, 240, 0.76) !important;
  font-size: 0.84rem !important;
  line-height: 1.75 !important;
}

#learning-full-panel .learning-card h3 {
  margin: 0 0 8px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

#learning-full-panel .learning-card,
#learning-full-panel .learning-intensity-item {
  border-radius: 14px !important;
  box-shadow: none !important;
}

#learning-full-panel .learning-card {
  padding: 14px !important;
}

#learning-full-panel .learning-intensity-list {
  gap: 7px !important;
}

#learning-full-panel .learning-intensity-item {
  gap: 10px !important;
  padding: 10px 12px !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-category-switch {
  border-color: rgba(51, 65, 85, 0.16) !important;
  background: rgba(226, 232, 240, 0.94) !important;
  box-shadow: 0 5px 15px rgba(51, 65, 85, 0.1) !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-category-switch button {
  color: rgba(51, 65, 85, 0.68) !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-category-switch button[aria-selected="true"] {
  background: #087f98 !important;
  color: #fff !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-hero > p,
html[data-resolved-theme="light"] #learning-full-panel .learning-section-heading > p {
  color: rgba(30, 41, 59, 0.76) !important;
}

/* Use the standard typhoon colors for the two wind-area definitions. */
#learning-full-panel .learning-typhoon-fact-grid article.is-strong-wind {
  border-color: rgba(250, 204, 21, 0.44) !important;
  background: rgba(250, 204, 21, 0.075) !important;
}

#learning-full-panel .learning-typhoon-fact-grid article.is-strong-wind strong {
  color: #facc15 !important;
}

#learning-full-panel .learning-typhoon-fact-grid article.is-storm {
  border-color: rgba(255, 64, 95, 0.46) !important;
  background: rgba(255, 64, 95, 0.08) !important;
}

#learning-full-panel .learning-typhoon-fact-grid article.is-storm strong {
  color: #ff526d !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-typhoon-fact-grid article.is-strong-wind {
  border-color: rgba(202, 138, 4, 0.42) !important;
  background: rgba(250, 204, 21, 0.11) !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-typhoon-fact-grid article.is-strong-wind strong {
  color: #a16207 !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-typhoon-fact-grid article.is-storm {
  border-color: rgba(220, 38, 38, 0.38) !important;
  background: rgba(239, 68, 68, 0.085) !important;
}

html[data-resolved-theme="light"] #learning-full-panel .learning-typhoon-fact-grid article.is-storm strong {
  color: #c81e3a !important;
}