:root {
      color-scheme: dark;
      --bg: #07101e;
      --surface: rgba(14,24,48,0.88);
      --surface-hi: rgba(20,34,68,0.92);
      --cyan: #3ac5e8;
      --cyan-dim: rgba(58,197,232,0.40);
      --blue: #2d7dd2;
      --theme-accent: var(--cyan);
      --theme-accent-dim: var(--cyan-dim);
      --theme-accent-soft: rgba(58,197,232,0.10);
      --theme-accent-mid: rgba(58,197,232,0.22);
      --theme-accent-strong: rgba(58,197,232,0.48);
      --theme-accent-glow: rgba(58,197,232,0.28);
      --theme-button-fill: rgba(58,197,232,0.10);
      --theme-button-fill-hover: rgba(58,197,232,0.22);
      --theme-selected-bg: rgba(58,197,232,0.16);
      --theme-selected-border: rgba(58,197,232,0.55);
      --amber: #f0a832;
      --text: #d4eaf8;
      --text-muted: rgba(180,215,245,0.52);
      --muted: rgba(90,140,180,0.65);
      --danger: #ff3820;
      --border: rgba(58,197,232,0.16);
      --border-hi: rgba(58,197,232,0.34);
      --card-bg: rgba(10,18,40,0.80);
      --card-border: rgba(58,197,232,0.13);
      --card-radius: 12px;
      --orion-glow-top: rgba(8,22,62,0.96);
      --orion-glow-left: rgba(6,18,50,0.80);
      --orion-glow-right: rgba(28,10,56,0.48);
      --orion-glow-bottom: rgba(4,10,28,0.92);
      --orion-scanline: rgba(58,197,232,0.010);
      --sidebar-w: 248px;
      --bulletin-h: 64px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 110% 55% at 50% 0%, var(--orion-glow-top) 0%, transparent 62%),
        radial-gradient(ellipse 65% 40% at 12% 38%, var(--orion-glow-left) 0%, transparent 58%),
        radial-gradient(ellipse 55% 35% at 88% 22%, var(--orion-glow-right) 0%, transparent 52%),
        radial-gradient(ellipse 80% 45% at 50% 100%, var(--orion-glow-bottom) 0%, transparent 58%);
    }
    body::after {
      content: "";
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        var(--orion-scanline) 2px, var(--orion-scanline) 3px
      );
    }
    html[data-orion-theme="storm_dark"] {
      --bg: #050912;
      --surface: rgba(12,18,34,0.92);
      --surface-hi: rgba(18,26,48,0.94);
      --cyan: #7dd3fc;
      --cyan-dim: rgba(125,211,252,0.42);
      --blue: #315a9d;
      --theme-accent: #7dd3fc;
      --theme-accent-dim: rgba(125,211,252,0.42);
      --theme-accent-soft: rgba(125,211,252,0.10);
      --theme-accent-mid: rgba(125,211,252,0.24);
      --theme-accent-strong: rgba(125,211,252,0.50);
      --theme-accent-glow: rgba(125,211,252,0.28);
      --theme-button-fill: rgba(125,211,252,0.10);
      --theme-button-fill-hover: rgba(125,211,252,0.22);
      --theme-selected-bg: rgba(125,211,252,0.16);
      --theme-selected-border: rgba(125,211,252,0.58);
      --text: #e2eef8;
      --text-muted: rgba(200,220,240,0.58);
      --muted: rgba(120,155,190,0.68);
      --border: rgba(125,211,252,0.15);
      --border-hi: rgba(125,211,252,0.34);
      --card-bg: rgba(8,14,28,0.86);
      --card-border: rgba(125,211,252,0.13);
      --orion-glow-top: rgba(28,36,70,0.75);
      --orion-glow-left: rgba(14,24,52,0.70);
      --orion-glow-right: rgba(42,26,70,0.38);
      --orion-glow-bottom: rgba(3,7,18,0.96);
      --orion-scanline: rgba(125,211,252,0.012);
    }
    html[data-orion-theme="radar_green"] {
      --bg: #04130f;
      --surface: rgba(8,30,24,0.90);
      --surface-hi: rgba(12,48,38,0.92);
      --cyan: #4ade80;
      --cyan-dim: rgba(74,222,128,0.42);
      --blue: #0f766e;
      --theme-accent: #4ade80;
      --theme-accent-dim: rgba(74,222,128,0.42);
      --theme-accent-soft: rgba(74,222,128,0.10);
      --theme-accent-mid: rgba(74,222,128,0.24);
      --theme-accent-strong: rgba(74,222,128,0.52);
      --theme-accent-glow: rgba(74,222,128,0.26);
      --theme-button-fill: rgba(74,222,128,0.10);
      --theme-button-fill-hover: rgba(74,222,128,0.22);
      --theme-selected-bg: rgba(74,222,128,0.16);
      --theme-selected-border: rgba(74,222,128,0.58);
      --text: #dfffee;
      --text-muted: rgba(190,230,205,0.58);
      --muted: rgba(120,185,150,0.68);
      --border: rgba(74,222,128,0.15);
      --border-hi: rgba(74,222,128,0.34);
      --card-bg: rgba(5,22,17,0.84);
      --card-border: rgba(74,222,128,0.13);
      --orion-glow-top: rgba(5,80,54,0.55);
      --orion-glow-left: rgba(8,52,40,0.55);
      --orion-glow-right: rgba(10,70,56,0.32);
      --orion-glow-bottom: rgba(2,13,10,0.94);
      --orion-scanline: rgba(74,222,128,0.012);
    }
    html[data-orion-theme="midnight_blue"] {
      --bg: #050b1d;
      --surface: rgba(10,22,58,0.90);
      --surface-hi: rgba(16,34,78,0.94);
      --cyan: #60a5fa;
      --cyan-dim: rgba(96,165,250,0.42);
      --blue: #2563eb;
      --theme-accent: #60a5fa;
      --theme-accent-dim: rgba(96,165,250,0.42);
      --theme-accent-soft: rgba(96,165,250,0.10);
      --theme-accent-mid: rgba(96,165,250,0.24);
      --theme-accent-strong: rgba(96,165,250,0.54);
      --theme-accent-glow: rgba(96,165,250,0.28);
      --theme-button-fill: rgba(96,165,250,0.10);
      --theme-button-fill-hover: rgba(96,165,250,0.22);
      --theme-selected-bg: rgba(96,165,250,0.16);
      --theme-selected-border: rgba(96,165,250,0.60);
      --text: #dbeafe;
      --text-muted: rgba(190,215,250,0.58);
      --muted: rgba(125,160,210,0.68);
      --border: rgba(96,165,250,0.16);
      --border-hi: rgba(96,165,250,0.36);
      --card-bg: rgba(8,18,46,0.84);
      --card-border: rgba(96,165,250,0.14);
      --orion-glow-top: rgba(20,66,150,0.58);
      --orion-glow-left: rgba(8,30,90,0.58);
      --orion-glow-right: rgba(35,45,110,0.38);
      --orion-glow-bottom: rgba(4,10,28,0.96);
      --orion-scanline: rgba(96,165,250,0.012);
    }
    html[data-orion-theme="high_contrast"] {
      --bg: #000814;
      --surface: rgba(5,15,30,0.98);
      --surface-hi: rgba(8,24,48,0.98);
      --cyan: #67e8f9;
      --cyan-dim: rgba(103,232,249,0.58);
      --blue: #38bdf8;
      --theme-accent: #67e8f9;
      --theme-accent-dim: rgba(103,232,249,0.58);
      --theme-accent-soft: rgba(103,232,249,0.14);
      --theme-accent-mid: rgba(103,232,249,0.30);
      --theme-accent-strong: rgba(103,232,249,0.68);
      --theme-accent-glow: rgba(103,232,249,0.34);
      --theme-button-fill: rgba(103,232,249,0.14);
      --theme-button-fill-hover: rgba(103,232,249,0.28);
      --theme-selected-bg: rgba(103,232,249,0.22);
      --theme-selected-border: rgba(103,232,249,0.75);
      --text: #f8fbff;
      --text-muted: rgba(225,240,255,0.76);
      --muted: rgba(180,220,245,0.78);
      --border: rgba(103,232,249,0.34);
      --border-hi: rgba(103,232,249,0.62);
      --card-bg: rgba(3,12,24,0.96);
      --card-border: rgba(103,232,249,0.32);
      --orion-glow-top: rgba(20,70,100,0.50);
      --orion-glow-left: rgba(0,30,60,0.50);
      --orion-glow-right: rgba(0,50,80,0.28);
      --orion-glow-bottom: rgba(0,4,12,0.98);
      --orion-scanline: rgba(103,232,249,0.018);
    }

    /* ── Animated: Snow ──────────────────────────────────────────────────── */
    html[data-orion-theme="animated_snow"] {
      --bg: #07101e;
      --surface: rgba(12,22,44,0.90);
      --surface-hi: rgba(18,32,60,0.94);
      --cyan: #a8d8f0;
      --cyan-dim: rgba(168,216,240,0.42);
      --blue: #3a7cb8;
      --theme-accent: #a8d8f0;
      --theme-accent-dim: rgba(168,216,240,0.42);
      --theme-accent-soft: rgba(168,216,240,0.10);
      --theme-accent-mid: rgba(168,216,240,0.24);
      --theme-accent-strong: rgba(168,216,240,0.54);
      --theme-accent-glow: rgba(168,216,240,0.28);
      --theme-button-fill: rgba(168,216,240,0.10);
      --theme-button-fill-hover: rgba(168,216,240,0.22);
      --theme-selected-bg: rgba(168,216,240,0.16);
      --theme-selected-border: rgba(168,216,240,0.58);
      --text: #e8f4ff;
      --text-muted: rgba(200,228,252,0.60);
      --muted: rgba(140,180,215,0.68);
      --border: rgba(168,216,240,0.18);
      --border-hi: rgba(168,216,240,0.38);
      --card-bg: rgba(8,16,36,0.84);
      --card-border: rgba(168,216,240,0.14);
      --orion-glow-top: rgba(40,80,140,0.55);
      --orion-glow-left: rgba(20,50,100,0.55);
      --orion-glow-right: rgba(60,80,140,0.32);
      --orion-glow-bottom: rgba(4,10,24,0.96);
      --orion-scanline: rgba(168,216,240,0.012);
    }

    /* ── Animated: Rain ──────────────────────────────────────────────────── */
    html[data-orion-theme="animated_rain"] {
      --bg: #070c16;
      --surface: rgba(10,18,36,0.92);
      --surface-hi: rgba(14,26,50,0.94);
      --cyan: #79c8f8;
      --cyan-dim: rgba(121,200,248,0.42);
      --blue: #2460a8;
      --theme-accent: #79c8f8;
      --theme-accent-dim: rgba(121,200,248,0.42);
      --theme-accent-soft: rgba(121,200,248,0.10);
      --theme-accent-mid: rgba(121,200,248,0.24);
      --theme-accent-strong: rgba(121,200,248,0.54);
      --theme-accent-glow: rgba(121,200,248,0.28);
      --theme-button-fill: rgba(121,200,248,0.10);
      --theme-button-fill-hover: rgba(121,200,248,0.22);
      --theme-selected-bg: rgba(121,200,248,0.16);
      --theme-selected-border: rgba(121,200,248,0.58);
      --text: #d8eeff;
      --text-muted: rgba(180,218,248,0.58);
      --muted: rgba(120,168,210,0.68);
      --border: rgba(121,200,248,0.16);
      --border-hi: rgba(121,200,248,0.36);
      --card-bg: rgba(6,14,30,0.84);
      --card-border: rgba(121,200,248,0.14);
      --orion-glow-top: rgba(24,56,110,0.55);
      --orion-glow-left: rgba(10,34,80,0.55);
      --orion-glow-right: rgba(30,50,100,0.34);
      --orion-glow-bottom: rgba(3,8,20,0.96);
      --orion-scanline: rgba(121,200,248,0.012);
    }

    /* ── Animation layers ────────────────────────────────────────────────── */
    #orionAnimLayer,
    #orionAnimLayerFront {
      position: fixed; inset: 0; pointer-events: none;
      overflow: hidden; display: none;
    }
    #orionAnimLayer { z-index: 0; opacity: 0.72; }
    #orionAnimLayerFront { z-index: 2; opacity: 0.38; }
    html[data-orion-theme="animated_snow"] #orionAnimLayer,
    html[data-orion-theme="animated_rain"]  #orionAnimLayer,
    html[data-orion-theme="animated_snow"] #orionAnimLayerFront,
    html[data-orion-theme="animated_rain"]  #orionAnimLayerFront {
      display: block;
    }
    @media (prefers-reduced-motion: reduce) {
      #orionAnimLayer,
      #orionAnimLayerFront { display: none !important; }
    }

    /* Snow particle */
    .orion-snow-p {
      position: absolute; top: -12px; border-radius: 50%;
      background: rgba(240,248,255,0.72);
      animation: orion-snow-fall linear infinite;
      will-change: transform;
    }
    #orionAnimLayerFront .orion-snow-p { background: rgba(248,252,255,0.54); filter: drop-shadow(0 0 2px rgba(255,255,255,0.20)); }
    @keyframes orion-snow-fall {
      0%   { transform: translateY(0) translateX(0);   opacity: 0; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      100% { transform: translateY(101vh) translateX(18px); opacity: 0; }
    }

    /* Rain particle */
    .orion-rain-p {
      position: absolute; top: -120px; width: 1px; height: 90px;
      background: linear-gradient(to bottom, transparent, rgba(160,210,245,0.44));
      animation: orion-rain-fall linear infinite;
      transform: rotate(-12deg);
      will-change: transform;
    }
    #orionAnimLayerFront .orion-rain-p { background: linear-gradient(to bottom, transparent, rgba(180,225,255,0.32)); }
    @keyframes orion-rain-fall {
      0%   { top: -120px; }
      100% { top: calc(100vh + 120px); }
    }
    #hudCanvas {
      position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none;
    }
    body.voice-mode #hudCanvas { opacity: 0.18; }
    body.voice-mode #chat { background: rgba(0,4,12,0.06); }
    #voiceSphere {
      display: none; position: fixed; top: 0; left: 0;
      width: 100vw; height: 100dvh; z-index: 3; pointer-events: none;
    }
    body.voice-mode #voiceSphere { display: block; }
    .hud-corners, .hud-corners-2 { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
    .hud-corners::before, .hud-corners::after,
    .hud-corners-2::before, .hud-corners-2::after {
      content: ""; position: absolute; width: 20px; height: 20px;
      border-color: var(--theme-accent-mid); border-style: solid;
    }
    .hud-corners::before   { top: 8px;    left: 8px;   border-width: 1px 0 0 1px; }
    .hud-corners::after    { bottom: 8px; right: 8px;  border-width: 0 1px 1px 0; }
    .hud-corners-2::before { top: 8px;    right: 8px;  border-width: 1px 1px 0 0; }
    .hud-corners-2::after  { bottom: 8px; left: 8px;   border-width: 0 0 1px 1px; }
    /* ── APP SHELL ── */
    .app-shell {
      position: relative; z-index: 1;
      display: flex; height: 100dvh; overflow: hidden;
    }
    /* ── SIDEBAR ── */
    .sidebar {
      flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
      display: flex; flex-direction: column;
      background: linear-gradient(180deg, rgba(8,18,42,0.98) 0%, rgba(6,14,34,0.99) 100%);
      border-right: 1px solid var(--theme-accent-soft);
      overflow: hidden; z-index: 2;
      padding-bottom: var(--bulletin-h); /* fallback for browsers without safe-area env() */
      padding-bottom: calc(var(--bulletin-h) + env(safe-area-inset-bottom));
    }
    .brand {
      padding: 16px 16px 14px;
      border-bottom: 1px solid rgba(58,197,232,0.08);
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(20,42,90,0.50) 0%, transparent 100%);
    }
    .brand-logo {
      font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
      color: #fff; text-shadow: 0 0 22px var(--theme-accent-dim), 0 0 42px var(--theme-accent-mid);
    }
    .brand-sub {
      font-size: 9px; letter-spacing: 0.12em; font-weight: 500;
      color: rgba(58,197,232,0.52); margin-top: 3px; text-transform: uppercase;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
    }
    .loc-block { padding: 10px 12px; border-bottom: 1px solid rgba(58,197,232,0.07); flex-shrink: 0; }
    .loc-label {
      font-size: 9px; letter-spacing: 0.10em; font-weight: 600;
      color: rgba(58,197,232,0.42); margin-bottom: 5px; text-transform: uppercase;
    }
    #wxLocation {
      width: 100%; font-family: inherit; font-size: 12px; font-weight: 500;
      color: var(--text); background: rgba(18,34,76,0.65);
      border: 1px solid rgba(58,197,232,0.20); border-radius: 7px;
      padding: 7px 10px; cursor: pointer; outline: none;
      transition: border-color 0.15s, background 0.15s;
    }
    #wxLocation:focus { border-color: rgba(58,197,232,0.50); background: rgba(24,46,100,0.75); }
    #wxLocation option { background: #0a1428; color: var(--text); }
    .sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: 8px; overflow-y: auto; gap: 2px; }
    .nav-btn {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 10px;
      font-family: inherit; font-size: 12px; font-weight: 500;
      color: rgba(180,215,245,0.62); background: transparent;
      border: none; border-radius: 8px;
      cursor: pointer; text-align: left;
      transition: color 0.14s, background 0.14s;
    }
    .nav-btn:hover { color: #fff; background: var(--theme-accent-soft); }
    .nav-btn.nav-active {
      color: #fff; font-weight: 600;
      background: linear-gradient(135deg, var(--theme-accent-mid) 0%, rgba(45,125,210,0.34) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 10px var(--theme-accent-glow);
    }
    .nav-btn.nav-dim { color: rgba(180,215,245,0.25); cursor: default; }
    .nav-btn.nav-dim:hover { color: rgba(180,215,245,0.38); background: transparent; }
    .nav-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; opacity: 0.78; }
    .sidebar-footer {
      flex-shrink: 0; border-top: 1px solid rgba(58,197,232,0.08);
      padding: 10px 14px; display: flex; flex-direction: column; gap: 4px;
    }
    .sidebar-collapse-btn {
      margin-top: 9px; width: 100%; background: var(--theme-button-fill);
      border: 1px solid var(--theme-accent-mid); border-radius: 6px;
      color: var(--theme-accent); font: 800 9px/1 "JetBrains Mono","Consolas",monospace;
      letter-spacing: .10em; padding: 6px 8px; cursor: pointer;
    }
    .sidebar-collapse-btn:hover { background: var(--theme-button-fill-hover); border-color: var(--theme-accent-strong); }
    body.sidebar-collapsed { --sidebar-w: 64px; }
    body.sidebar-collapsed .brand { padding: 12px 8px; text-align: center; }
    body.sidebar-collapsed .brand-logo { font-size: 12px; letter-spacing: .03em; }
    body.sidebar-collapsed .brand-sub,
    body.sidebar-collapsed .loc-label,
    body.sidebar-collapsed #wxLocation,
    body.sidebar-collapsed .nav-btn span:not(.nav-icon),
    body.sidebar-collapsed .member-nav-cta,
    body.sidebar-collapsed #wxPlanChips,
    body.sidebar-collapsed .sidebar-footer { display: none !important; }
    body.sidebar-collapsed .loc-block { padding: 8px; min-height: 42px; border-bottom-color: var(--theme-accent-soft); }
    body.sidebar-collapsed .loc-block::after { content: "LOC"; color: var(--theme-accent-dim); font: 800 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .08em; }
    body.sidebar-collapsed .sidebar-nav { padding: 8px 6px; align-items: center; }
    body.sidebar-collapsed .nav-btn { justify-content: center; padding: 10px 6px; gap: 0; }
    body.sidebar-collapsed .nav-icon { width: auto; font-size: 16px; }
    .sf-hud {
      display: flex; gap: 6px; align-items: baseline;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 11px; color: rgba(58,197,232,0.58);
    }
    .sf-row {
      display: flex; gap: 6px; align-items: center;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      color: rgba(90,140,180,0.58); font-size: 9px; letter-spacing: 0.06em;
    }
    .sf-label { color: var(--theme-accent-mid); font-size: 8px; letter-spacing: 0.12em; font-weight: 700; }
    .sf-muted { color: var(--muted); font-size: 9px; }
    .sf-clock {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 11px; color: rgba(240,168,50,0.58); font-variant-numeric: tabular-nums; margin-top: 3px;
    }
    /* ── MAIN AREA ── */
    .main-area {
      flex: 1; min-width: 0; display: flex; flex-direction: column;
      overflow: hidden; padding-bottom: calc(var(--bulletin-h) + env(safe-area-inset-bottom));
    }
    /* ── TOP BAR ── */
    .top-bar {
      flex-shrink: 0; display: flex; align-items: center; gap: 8px;
      padding: calc(7px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 7px calc(16px + env(safe-area-inset-left));
      background: rgba(6,12,28,0.97);
      border-bottom: 1px solid rgba(58,197,232,0.09);
      position: relative; z-index: 5;
    }
    .top-brand-desktop {
      display: none;
      flex: 0 0 auto;
      min-width: 0;
      padding-right: 16px;
    }
    .top-brand-desktop-logo {
      color: #f3fbff;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.09em;
      line-height: 1.05;
      text-shadow: 0 0 18px rgba(35,191,232,0.24);
    }
    .top-brand-desktop-sub {
      color: var(--desktop-text-muted, var(--text-muted));
      font: 600 7px/1.2 "JetBrains Mono","Consolas",ui-monospace,monospace;
      letter-spacing: 0.10em;
      margin-top: 3px;
      text-transform: uppercase;
    }
    .top-brand-mob {
      display: none; font-size: 13px; font-weight: 700;
      color: #fff; white-space: nowrap; flex-shrink: 0;
    }
    .top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .top-refresh-btn {
      background: none; border: 1px solid var(--theme-button-fill-hover); border-radius: 5px;
      color: rgba(58,197,232,0.55); font-size: 16px; line-height: 1; padding: 2px 7px;
      cursor: pointer; transition: color 0.15s, border-color 0.15s;
    }
    .top-refresh-btn:hover { color: rgba(58,197,232,0.95); border-color: rgba(58,197,232,0.55); }
    .top-refresh-btn.spinning { animation: refresh-spin 0.7s linear; }
    .account-btn,
    .account-fallback-btn {
      display: inline-flex; align-items: center; justify-content: center;
      max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      background: rgba(58,197,232,0.07); border: 1px solid rgba(58,197,232,0.20);
      border-radius: 5px; color: rgba(180,215,245,0.72); font-family: inherit;
      font-size: 10px; padding: 4px 8px; cursor: pointer;
    }
    .account-btn:hover,
    .account-fallback-btn:hover { color: #fff; border-color: rgba(58,197,232,0.48); }
    .account-fallback-btn {
      display: none;
      min-width: 38px;
      justify-content: center;
      padding: 4px 7px;
      line-height: 1.2;
    }
    .top-feedback-btn {
      background: rgba(58,197,232,0.07); border: 1px solid rgba(58,197,232,0.20);
      border-radius: 5px; color: rgba(180,215,245,0.72); font-family: inherit;
      font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 9px; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .top-feedback-btn:hover { color: #fff; border-color: rgba(58,197,232,0.48); }
    .top-community-btn {
      background: rgba(58,197,232,0.07); border: 1px solid rgba(58,197,232,0.20);
      border-radius: 5px; color: rgba(180,215,245,0.72); font-family: inherit;
      font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 9px; cursor: pointer;
      white-space: nowrap; flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
      min-height: 26px;
    }
    .top-community-btn:hover { color: #fff; border-color: rgba(58,197,232,0.48); }
    .top-more-btn { display: none; }
    .wx-card-community { display: none; }
    .more-menu-panel {
      width: min(320px, calc(100vw - 28px)); border: 1px solid var(--card-border); border-radius: 10px;
      background: var(--card-bg); box-shadow: 0 18px 60px rgba(0,0,0,.62); overflow: hidden;
    }
    .more-menu-body { display: grid; gap: 8px; padding: 13px; }
    .more-menu-body button, .more-menu-body a {
      display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px;
      border: 1px solid var(--theme-accent-mid); border-radius: 7px; background: var(--theme-button-fill);
      color: var(--text); font: 700 11px/1.2 "JetBrains Mono","Consolas",monospace; letter-spacing: .04em;
      text-decoration: none; cursor: pointer; box-sizing: border-box;
    }
    .more-menu-body button:hover, .more-menu-body a:hover { background: var(--theme-button-fill-hover); border-color: var(--theme-accent-strong); color: #fff; }
    .member-cta-btn {
      background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid);
      border-radius: 5px; color: var(--theme-accent); font-family: inherit;
      font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 9px;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
    }
    .member-cta-btn:hover { color: #fff; border-color: var(--theme-accent); background: var(--theme-button-fill-hover); }
    .member-cta-btn.mobile-member-cta { min-width: 58px; max-width: 148px; overflow: hidden; text-overflow: ellipsis; }
    .member-preview-subtitle { color: var(--theme-accent); font-size: 11px; letter-spacing: 0.08em; margin-bottom: 9px; }
    .member-preview-card { border:1px solid var(--card-border); background:var(--card-bg); border-radius:6px; padding:7px; }
    .member-benefit-link { color:var(--theme-accent); border-color:var(--card-border); background:var(--theme-button-fill); }
    .member-benefits-list { margin: 9px 0 0 18px; padding: 0; color: rgba(225,243,255,0.86); font-size: 11px; line-height: 1.55; }
    .member-free-safety-note { margin-top: 10px; color: rgba(143,255,193,0.90); font-size: 10px; line-height: 1.45; }
    .member-checkout-note { margin-top: 9px; color: rgba(240,200,80,0.86); font-size: 10px; min-height: 16px; }
    #wxMemberPreviewModal { padding: 12px; box-sizing: border-box; }
    #wxMemberPreviewModal .member-preview-box { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); box-sizing: border-box; }
    #wxMemberPreviewModal .mem-foot { flex-wrap: wrap; }
    #wxMemberPreviewModal .mem-foot button { min-height: 40px; padding: 8px 13px; }
    .account-entry-copy { margin-bottom: 12px; }
    .account-entry-title { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .account-entry-sub { color: var(--text-muted); font-size: 10px; line-height: 1.5; }
    .account-entry-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
    .account-entry-tab { min-height: 40px; border: 1px solid rgba(58,197,232,.18); border-radius: 5px; background: rgba(58,197,232,.05); color: var(--text-muted); font: inherit; font-size: 10px; cursor: pointer; }
    .account-entry-tab.active { color: #fff; border-color: var(--theme-accent-strong); background: var(--theme-accent-soft); }
    .theme-choice {
      display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); cursor: pointer;
      border: 1px solid var(--card-border); border-radius: 4px; padding: 6px;
      background: rgba(7,16,30,.32); transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .theme-choice input { accent-color: var(--theme-accent); width: 14px; height: 14px; cursor: pointer; }
    .theme-choice.active {
      border-color: var(--theme-selected-border); background: var(--theme-selected-bg);
      box-shadow: 0 0 0 1px var(--theme-accent-glow) inset;
    }
    .theme-choice:hover { border-color: var(--theme-accent-strong); background: var(--theme-accent-soft); }
    @keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .top-clock {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 10px; color: rgba(58,197,232,0.42); white-space: nowrap; font-variant-numeric: tabular-nums;
    }
    #status {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 10px; color: var(--amber); border: 1px solid rgba(240,168,50,0.28);
      border-radius: 4px; padding: 2px 9px; background: rgba(240,168,50,0.06);
      white-space: nowrap; max-width: 28vw; overflow: hidden; text-overflow: ellipsis;
    }
    /* ── SCROLLABLE MAIN ── */
    .wx-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
    /* ── DASHBOARD GRID ── */
    .wx-main-grid {
      display: grid;
      /* Radar-centered layout: narrow left (Ask ORION) / wide center (Radar,
         the focal nerve-center) / narrow right (Storm Timing). Column 2 stays
         the widest track for every row, so it also carries the widest
         supporting card lower in the grid (Local Reports, then Forecast). */
      grid-template-columns: 1fr 2fr 1fr;
      column-gap: 10px; row-gap: 8px; padding: 10px 12px 14px; align-items: start;
    }
    .wx-card-base {
      border: 1px solid var(--card-border);
      background: var(--card-bg);
      border-radius: var(--card-radius);
      padding: 12px 14px;
      font-size: 12px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .wx-card-title {
      font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
      color: rgba(58,197,232,0.52); margin-bottom: 8px; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
    }
    .wx-card-badge {
      font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
      color: rgba(240,168,50,0.92); background: rgba(240,168,50,0.10);
      border: 1px solid rgba(240,168,50,0.28); border-radius: 3px;
      padding: 1px 6px; white-space: nowrap;
    }
    .wx-card-badge.badge-live {
      color: #8fffc1; background: rgba(64,201,119,0.10);
      border-color: rgba(64,201,119,0.32);
    }
    .wx-card-badge.badge-supplemental {
      color: #8ddcff; background: var(--theme-button-fill);
      border-color: rgba(58,197,232,0.32);
    }
    .wx-card-badge.badge-unavailable {
      color: #ff938d; background: rgba(240,90,78,0.10);
      border-color: rgba(240,90,78,0.32);
    }
    /* Radar-centered nerve-center layout: Ask ORION (left) / Radar (center,
       largest) / Storm Timing (right) share the top two rows; Storm Path
       Timeline sits full-width directly below the triad; Current Conditions
       moves to a full-width strip below that; everything else becomes a
       3-across supporting grid. All existing cards reused — only their
       grid-column/grid-row placement changed. */
    .wx-storm-path-timeline { grid-column: 1 / -1; grid-row: 3; }
    /* Mobile-only compact twin of the desktop card, placed via DOM order
       directly under Current Conditions (the top mobile card). Hidden on
       desktop — the desktop card above already covers this viewport. */
    .wx-storm-path-timeline-mobile { display: none; }
    .wx-spt-cells { display: flex; flex-wrap: wrap; gap: 14px; }
    .wx-spt-cell { flex: 1 1 220px; min-width: 200px; }
    .wx-spt-cell-title { font-size: 11px; font-weight: 700; color: rgba(58,197,232,0.85); margin-bottom: 5px; }
    .wx-spt-row { display: flex; gap: 8px; font-size: 11px; line-height: 1.6; color: rgba(210,230,245,0.85); }
    .wx-spt-time { flex: 0 0 60px; color: rgba(175,215,240,0.55); font-size: 10px; }
    .wx-spt-place { flex: 1 1 auto; }
    .wx-spt-alerts { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(58,197,232,0.14); font-size: 11px; color: #ffb4a8; }
    .wx-spt-footer { margin-top: 10px; font-size: 9px; color: var(--text-muted); line-height: 1.4; }
    /* Three SEPARATE hazard rows per cell (expanded view) — current-position
       alert, forecast-path alert, and radar-signal status (Phase 1: always
       "unavailable" until Base Velocity/SRM ships). Never merged. */
    .wx-hazard-chips { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
    .wx-hazard-chip { font-size: 10px; padding: 3px 7px; border-radius: 4px; line-height: 1.4; }
    .wx-hazard-chip-none { background: rgba(120,170,200,0.08); color: rgba(175,215,240,0.65); }
    .wx-hazard-chip-watch { background: rgba(240,168,50,0.10); color: var(--amber); }
    .wx-hazard-chip-warning { background: rgba(240,90,78,0.14); color: #ff9a90; font-weight: 700; }
    .wx-hazard-chip-radar { background: rgba(58,197,232,0.06); color: rgba(175,215,240,0.6); }
    /* Compact pill pair shown on the mobile COLLAPSED row (always visible,
       not just after tapping to expand) — current-position alert + radar
       signal only. Muted/small so "No official warning" reads as a quiet
       confirmation the feature is working, not an alarm. 11px, not 8px —
       small pills still need to be legible on a phone screen. */
    .wx-spt-mobile-compact-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0 8px; }
    .wx-spt-mobile-compact-chip { font-size: 11px; padding: 2px 8px; border-radius: 9px; line-height: 1.5; white-space: nowrap; }
    .wx-hero {
      grid-column: 1 / -1; grid-row: 4;
      background: linear-gradient(160deg, rgba(10,26,66,0.92) 0%, rgba(7,16,44,0.94) 50%, rgba(16,8,38,0.88) 100%);
    }
    .wx-alerts-card  { grid-column: 1; grid-row: 5; align-self: stretch; }
    .wx-local-reports { grid-column: 2; grid-row: 5; }
    .wx-storm-timing { grid-column: 3; grid-row: 1 / 3; align-self: stretch; }
    .wx-forecast-card { grid-column: 2; grid-row: 6; }
    .wx-commute-card { grid-column: 1; grid-row: 6; }
    .wx-radar-card   { grid-column: 2; grid-row: 1 / 3; }
    .wx-insight-card { grid-column: 2; grid-row: 6; display: none; }  /* Data Health hidden from public dashboard (WP11) */
    /* Live Map / Road View — fills the unused col2/row6 gap beside the radar (desktop). */
    .wx-livemap-card { grid-column: 1 / -1; grid-row: 7; display: flex; flex-direction: column; align-self: stretch; }
    #wxLiveMapEl { min-height: 220px; flex-grow: 1; border-radius: 6px; overflow: hidden; background: #020508; flex-shrink: 0; }
    .wx-livemap-controls { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; align-items: center; }
    .wx-livemap-btn { font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .06em; padding: 5px 8px; border-radius: 4px; cursor: pointer; background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent); }
    .wx-livemap-btn.on { background: var(--theme-button-fill-hover); color: #fff; border-color: var(--theme-accent-strong); }
    .wx-livemap-cam { display: none; font: 700 9px/1 "JetBrains Mono","Consolas",monospace; padding: 6px 8px; border-radius: 4px; text-decoration: none; background: rgba(64,201,119,0.12); border: 1px solid rgba(64,201,119,0.4); color: #8fffc1; }
    .wx-livemap-cam.show { display: inline-block; }
    .wx-livemap-src { font-size: 8px; color: var(--text-muted); margin-top: 7px; line-height: 1.4; }
    .wx-livemap-open { display: none; }
    .wx-map-modal-box { width: min(1120px,96vw); height: min(760px,90vh); }
    .wx-map-modal-body { display: flex; flex-direction: column; min-height: 0; height: 100%; }
    #wxExpandedMapEl { flex: 1 1 auto; min-height: 360px; border-radius: 8px; overflow: hidden; background: #020508; border: 1px solid var(--theme-accent-soft); }
    .wx-map-modal-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px; }
    .wx-map-modal-note { font-size:10px; color:var(--text-muted); line-height:1.45; margin-top:7px; }
    /* Desktop: paired cards use align-self:stretch so a tall SPC/commute
       neighbor does not leave blank grid space beside a shorter card. */
    .wx-local-reports { align-self: stretch; overflow-y: auto; }
    .wx-lr-chip { font-size:10px; padding:4px 10px; border:1px solid rgba(58,197,232,.3); background:transparent; color:var(--text,#cfe8f5); border-radius:4px; cursor:pointer; }
    .wx-lr-chip.active { background:rgba(58,197,232,.18); color:var(--cyan,#3ac5e8); border-color:rgba(58,197,232,.55); }
    .wx-lr-row { display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:1.5; padding:3px 0; }
    .wx-lr-age { color:rgba(175,215,240,.55); font-size:10px; flex:none; }
    .wx-lr-note { color:rgba(175,215,240,.6); font-size:10px; }
    .wx-lr-disclaimer { margin-top:8px; font-size:9px; color:rgba(175,215,240,.5); line-height:1.4; }
    .wx-local-reports { border-color: rgba(58,197,232,.32); box-shadow: 0 0 18px rgba(58,197,232,.07); }
    .wx-lr-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .wx-lr-live { font-size:9px; letter-spacing:.14em; color:#3ce18f; border:1px solid rgba(60,225,143,.45); background:rgba(60,225,143,.08); border-radius:5px; padding:2px 7px; animation: wxLrLivePulse 2.6s ease-in-out infinite; }
    @keyframes wxLrLivePulse { 0%,100% { box-shadow:0 0 0 0 rgba(60,225,143,0); } 50% { box-shadow:0 0 8px 1px rgba(60,225,143,.35); } }
    .wx-lr-trend { margin-left:auto; font-size:10px; font-weight:400; letter-spacing:.02em; text-transform:none; color:#3ac5e8; white-space:nowrap; }
    .wx-lr-tiles { display:flex; gap:7px; margin:9px 0 10px; flex-wrap:wrap; }
    .wx-lr-tile { flex:none; min-width:56px; padding:7px 9px 6px; text-align:center; border:1px solid rgba(58,197,232,.18); border-radius:9px; background:rgba(20,40,60,.35); color:rgba(200,228,245,.8); cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
    .wx-lr-tile .wx-lr-tile-ic { display:block; font-size:15px; line-height:1.15; }
    .wx-lr-tile .wx-lr-tile-lb { display:block; font-size:9px; margin-top:2px; letter-spacing:.04em; }
    .wx-lr-tile .wx-lr-tile-ct { display:block; font-size:11px; font-weight:700; margin-top:1px; color:#dff4ff; }
    .wx-lr-tile.active { border-color: rgba(58,197,232,.75); background: rgba(58,197,232,.12); color:#dff4ff; box-shadow: 0 0 12px rgba(58,197,232,.28), inset 0 0 10px rgba(58,197,232,.07); }
    .wx-lr-feedrow { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(120,180,220,.08); align-items:flex-start; }
    .wx-lr-feedrow:last-child { border-bottom:none; }
    .wx-lr-ic { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid; background:rgba(15,35,55,.5); }
    .wx-lr-main { flex:1; min-width:0; }
    .wx-lr-toprow { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
    .wx-lr-typelb { font-size:11px; font-weight:700; letter-spacing:.02em; }
    .wx-lr-loclb { font-size:11px; color:rgba(200,228,245,.85); }
    .wx-lr-notelb { font-size:10px; color:rgba(175,215,240,.6); line-height:1.45; margin-top:2px; overflow-wrap:anywhere; }
    .wx-lr-meta { flex:none; text-align:right; }
    .wx-lr-agelb { font-size:9px; color:rgba(175,215,240,.5); white-space:nowrap; }
    .wx-lr-newtag { display:inline-block; font-size:8px; letter-spacing:.16em; color:#3ce18f; margin-top:3px; text-shadow:0 0 7px rgba(60,225,143,.6); }
    .wx-lr-cta { display:flex; width:100%; align-items:center; justify-content:center; gap:8px; margin-top:11px; padding:11px 10px; font-size:11px; letter-spacing:.1em; font-family:inherit; color:#3ac5e8; background:rgba(58,197,232,.06); border:1px solid rgba(58,197,232,.5); border-radius:9px; cursor:pointer; box-shadow:0 0 14px rgba(58,197,232,.12); transition: box-shadow .15s ease, background .15s ease; }
    .wx-lr-cta:hover, .wx-lr-cta:focus-visible { background:rgba(58,197,232,.13); box-shadow:0 0 18px rgba(58,197,232,.3); }
    .wx-lr-more { font-size:9px; color:rgba(175,215,240,.5); margin-top:6px; }
    @media (prefers-reduced-motion: reduce) { .wx-lr-live { animation: none; } }
    @media (max-width: 760px) {
      .wx-lr-tiles { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; }
      .wx-lr-tiles::-webkit-scrollbar { display:none; }
    }
    .wx-lr-headbtns { display:flex; gap:5px; margin-left:auto; }
    .wx-lr-head .wx-lr-trend { margin-left:0; }
    .wx-lr-headbtn { font-size:9px; letter-spacing:.06em; padding:3px 8px; border-radius:5px; background:rgba(18,34,76,.45); border:1px solid var(--theme-accent-mid,rgba(58,197,232,.35)); color:var(--cyan,#3ac5e8); font-family:inherit; cursor:pointer; white-space:nowrap; }
    .wx-lr-headbtn:hover, .wx-lr-headbtn:focus-visible { background:rgba(58,197,232,.14); }
    /* POP OUT is desktop/tablet only (JS also gates on viewport width >= 900px before showing/wiring it) */
    @media (max-width: 899px) { #wxLRPopoutBtn { display:none !important; } }
    #wxLocalReportsExpandModal .mem-box { width:min(760px,94vw); max-height:90vh; }
    #wxLocalReportsExpandModal .mem-list { padding:14px 16px 18px; }
    #wxLRExpandedBody .wx-lr-tiles { flex-wrap:wrap; overflow-x:visible; }
    @media (max-width: 640px) {
      #wxLocalReportsExpandModal .mem-box { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
      #wxLocalReportsExpandModal .mem-list { -webkit-overflow-scrolling:touch; }
      #wxLRExpandedBody .wx-lr-tiles { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
      #wxLRExpandedBody .wx-lr-tiles::-webkit-scrollbar { display:none; }
    }
    #wxLRPopoutMsg { font-size:10px; color:var(--amber,#f0c850); margin-top:6px; display:none; }
    /* Mobile Home is now map-free. The bottom Maps tab owns radar/live-map surfaces. */
    /* ── Mobile bottom nav + Maps screen (immersive) ── */
    #wxMobileNav { display:none; }
    #wxMapsScreen { display:none; }
    /* Maps mode: lock the dashboard scroll and hide bottom bulletin surfaces.
       z-order: maps screen 150 (above sticky loc-block z:100, ticker z:40, dev
       bulletin z:45), nav 160, boot overlay 200, modals 400. */
    body.maps-mode { overflow:hidden; height:100dvh; }
    body.maps-mode .wx-ticker-wrap,
    body.maps-mode #wxBulletinRestoreBar,
    body.maps-mode #wxDevBulletin.dev-bulletin-visible { display:none; }

    /* Phillip-only session immersive radar. Layers stay mounted; only chrome hides. */
    .wx-immersive-only { display:none !important; }
    body.mobile-immersive-canary .wx-immersive-only { display:inline-flex !important; }
    body.mobile-immersive-active .wx-immersive-only,
    body.mobile-immersive-active .wx-maps-brand,
    body.mobile-immersive-active .wx-maps-locpill,
    body.mobile-immersive-active .wx-maps-topright,
    body.mobile-immersive-active .wx-maps-fabs,
    body.mobile-immersive-active .wx-radar-site-controls,
    body.mobile-immersive-active .wx-maps-layerpanel,
    body.mobile-immersive-active .wx-maps-timeline,
    body.mobile-immersive-active .wx-maps-srclabel,
    body.mobile-immersive-active .wx-maps-storm-overlay,
    body.mobile-immersive-active .wx-trails-header,
    body.mobile-immersive-active .wx-trails-card,
    body.mobile-immersive-active .wx-trails-filter-panel,
    body.mobile-immersive-active .wx-trails-focus-pill,
    body.mobile-immersive-active .wx-trails-focus-row,
    body.mobile-immersive-active #wxMobileNav,
    body.mobile-immersive-active #wxStormDnaPanel { display:none !important; }
    /* Capability is not active immersive state; it must never change layout. */
    body.mobile-immersive-active #wxMapsScreen.show { bottom:0 !important; }
    .wx-immersive-toast { display:none; position:absolute; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:1100; max-width:88vw; padding:9px 13px; border:1px solid rgba(58,197,232,.65); border-radius:999px; background:rgba(4,13,25,.82); color:#e5f8ff; font-size:10px; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; box-shadow:0 4px 22px rgba(0,0,0,.55); }
    .wx-immersive-toast.show { display:block; }
    .wx-gif-sheet { display:none; position:absolute; inset:auto 12px calc(74px + env(safe-area-inset-bottom)) 12px; z-index:1105; padding:12px; border-radius:12px; background:rgba(5,14,28,.97); border:1px solid rgba(58,197,232,.45); box-shadow:0 12px 42px rgba(0,0,0,.65); color:#e5f8ff; font-size:10px; }
    .wx-gif-sheet.open { display:block; }
    .wx-gif-sheet h3 { margin:0 0 8px; font-size:11px; letter-spacing:.12em; }
    .wx-gif-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; }
    .wx-gif-row label { color:rgba(210,236,248,.8); }
    .wx-gif-row select { min-width:110px; padding:4px 6px; border-radius:6px; background:#0b2235; color:#e5f8ff; border:1px solid rgba(58,197,232,.35); }
    .wx-gif-actions { display:flex; gap:7px; margin-top:10px; }
    .wx-gif-actions button { flex:1; padding:7px 8px; border-radius:7px; border:1px solid rgba(58,197,232,.48); background:rgba(58,197,232,.12); color:#e5f8ff; font:inherit; cursor:pointer; }
    .wx-gif-status { min-height:14px; margin-top:7px; color:rgba(170,222,239,.76); }
    .wx-gif-preview { display:none; width:100%; max-height:24vh; object-fit:contain; margin-top:8px; border:1px solid rgba(58,197,232,.28); border-radius:6px; }
    .wx-gif-preview.show { display:block; }
    #wxMapsScreen.show { display:block; position:fixed; inset:0; z-index:150; background:var(--bg,#070f1c); }
    #wxMapsMapEl {
      position:absolute; inset:0; background-color:#07111c;
      /* A same-origin visual floor remains while external CARTO tiles are
         loading/unavailable. Same-origin TIGER roads/boundaries still render
         above it, so a failed tile never becomes a pure black rectangle. */
      background-image:
        linear-gradient(rgba(58,197,232,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,197,232,.045) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, #0b1b2b 0%, #07111c 72%);
      background-size:32px 32px, 32px 32px, 100% 100%;
    }
    #wxMapsMapEl.wx-basemap-limited { background-color:#091827; }
    /* MapLibre GL basemap sits in the Leaflet overlay/tile stack; keep it
       non-interactive so radar/trails receive pointer events. */
    #wxMapsMapEl .maplibregl-map,
    #wxRadarMap .maplibregl-map { pointer-events: none !important; }
    .wx-alert-layer-status {
      position:absolute; left:50%; top:calc(58px + env(safe-area-inset-top)); z-index:1004;
      transform:translateX(-50%); max-width:min(82%,360px); padding:4px 9px;
      border:1px solid rgba(255,199,68,.48); border-radius:10px;
      background:rgba(7,16,30,.92); color:rgba(244,232,191,.94);
      box-shadow:0 2px 12px rgba(0,0,0,.42); font-size:8px; line-height:1.25;
      letter-spacing:.035em; text-align:center; white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis; pointer-events:none;
    }
    .wx-alert-layer-status[hidden] { display:none !important; }
    #wxRadarMap .wx-alert-layer-status { top:9px; }
    .wx-official-alert-path { pointer-events:auto; }
    .wx-official-alert-warning-path { filter:drop-shadow(0 0 1.8px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(255,90,70,.32)); }
    .wx-official-alert-other-path { filter:drop-shadow(0 0 1.5px rgba(0,0,0,.92)); }
    .wx-maps-brand {
      /* ~3/4 down the radar viewport on the LEFT for screenshot visibility.
         Responsive to Maps screen height; clamped above playback/storm overlay. */
      position:absolute;
      top:min(72%, calc(100% - 150px - env(safe-area-inset-bottom)));
      left:max(12px, env(safe-area-inset-left));
      z-index:1000;
      font-size:12px; font-weight:800; letter-spacing:.14em; color:#FFD400;
      text-shadow:0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.75); pointer-events:none;
    }
    @media (max-width:720px) {
      .wx-maps-brand {
        /* Mobile portrait: keep clear of bottom timeline (~8px) + storm overlay (~58px). */
        top:auto;
        bottom:calc(24% + env(safe-area-inset-bottom));
      }
    }
    .wx-maps-locpill {
      /* Hidden on Radar/Maps: the Home location selector already shows the
         selected place. A second top-left pill collided with Orionwx.com. */
      display:none !important;
      position:absolute; top:calc(30px + env(safe-area-inset-top)); left:12px; z-index:1000;
      font-size:9px; letter-spacing:.05em; padding:4px 10px; border-radius:12px;
      background:rgba(7,16,30,0.88); border:1px solid rgba(58,197,232,0.4);
      color:rgba(220,240,252,0.9); font-family:inherit; cursor:pointer; max-width:55vw;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      box-shadow:0 2px 10px rgba(0,0,0,0.5);
    }
    .wx-maps-topright {
      position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:1000;
      display:flex; gap:6px;
    }
    .wx-maps-ovbtn {
      font-size:9px; letter-spacing:.06em; padding:6px 9px; border-radius:7px;
      background:rgba(7,16,30,0.88); border:1px solid rgba(58,197,232,0.45);
      color:var(--cyan,#3ac5e8); font-family:inherit; cursor:pointer;
      box-shadow:0 2px 10px rgba(0,0,0,0.5); min-width:30px;
    }
    .wx-nerd-button-short { display:none; }
    @media (max-width:390px) {
      .wx-nerd-button-full { display:none; }
      .wx-nerd-button-short { display:inline; }
      #wxMapsLayersBtn { padding-left:7px; padding-right:7px; }
    }
    .wx-maps-layerpanel {
      display:none; position:absolute; top:calc(44px + env(safe-area-inset-top)); right:12px; z-index:1001;
      flex-direction:column; gap:5px; padding:9px; min-width:130px;
      background:rgba(7,16,30,0.96); border:1px solid rgba(58,197,232,0.35); border-radius:10px;
      box-shadow:0 8px 30px rgba(0,0,0,0.6);
    }
    .wx-maps-layerpanel.open { display:flex; }
    .wx-maps-panel-title {
      font-size:8px; letter-spacing:.12em; color:rgba(155,210,235,.68); text-transform:uppercase;
      margin:1px 1px 2px;
    }
    .wx-maps-panel-divider { height:1px; background:rgba(58,197,232,.18); margin:3px 0; }
    .wx-maps-radar-source { display:grid; grid-template-columns:1fr; gap:5px; }
    .wx-maps-provider {
      display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;
      font-size:9px; letter-spacing:.04em; padding:6px 9px; border-radius:7px;
      border:1px solid rgba(58,197,232,0.22); background:rgba(20,40,60,0.36);
      color:rgba(200,228,245,0.7); font-family:inherit; cursor:pointer; white-space:nowrap;
    }
    .wx-maps-provider.on { border-color:rgba(58,197,232,0.8); background:rgba(58,197,232,0.16); color:#e6f8ff; }
    .wx-maps-provider small { color:rgba(140,220,190,.85); font-size:8px; letter-spacing:.08em; }
    .wx-maps-provider-note { font-size:8px; line-height:1.35; color:rgba(185,215,230,.55); margin:0 1px 2px; }
    .wx-maps-chip {
      display:flex; align-items:center; gap:7px; text-align:left;
      font-size:9px; letter-spacing:.05em; padding:6px 9px; border-radius:7px;
      border:1px solid rgba(58,197,232,0.2); background:rgba(20,40,60,0.4);
      color:rgba(200,228,245,0.65); font-family:inherit; cursor:pointer; white-space:nowrap;
    }
    .wx-maps-chip.on {
      border-color:rgba(58,197,232,0.75); background:rgba(58,197,232,0.13); color:#dff4ff;
    }
    .wx-maps-chip .wx-maps-chip-dot {
      width:7px; height:7px; border-radius:50%; background:rgba(120,160,190,0.35); flex:none;
    }
    .wx-maps-chip.on .wx-maps-chip-dot { background:#3ce18f; box-shadow:0 0 6px rgba(60,225,143,0.7); }
    .wx-maps-fabs {
      position:absolute; right:12px; bottom:calc(96px + env(safe-area-inset-bottom)); z-index:1000;
      display:flex; flex-direction:column; gap:10px;
    }
    .wx-maps-fab {
      width:42px; height:42px; border-radius:50%; font-size:18px; line-height:1;
      background:rgba(10,24,44,0.94); border:1px solid rgba(58,197,232,0.55);
      color:var(--cyan,#3ac5e8); cursor:pointer; font-family:inherit;
      box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 10px rgba(58,197,232,0.18);
    }
    .wx-maps-fab-report { border-color:rgba(64,201,119,0.6); color:#4ee08d; font-size:22px; font-weight:700; }
    @keyframes wx-maps-locating-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
    .wx-maps-fab.locating { animation:wx-maps-locating-pulse 0.9s ease-in-out infinite; }
    /* Radar site control stack. Site selection is deliberately separate from
       the Nerd Button layer menu: it changes only the radar source, never the
       forecast/GPS location. The same control is mounted on desktop and Maps. */
    .wx-radar-site-controls {
      position:absolute; right:12px; bottom:12px; z-index:1002;
      display:flex; flex-direction:column; align-items:flex-end; gap:7px;
      pointer-events:none;
    }
    .wx-radar-site-controls > * { pointer-events:auto; }
    .wx-radar-site-btn {
      width:42px; height:42px; border-radius:9px; display:flex; align-items:center;
      justify-content:center; position:relative; background:rgba(7,16,30,.94);
      border:1px solid rgba(58,197,232,.55); color:#dff7ff; cursor:pointer;
      font-family:inherit; box-shadow:0 4px 14px rgba(0,0,0,.52),0 0 10px rgba(58,197,232,.16);
    }
    .wx-radar-site-btn:hover, .wx-radar-site-btn:focus-visible,
    .wx-radar-site-btn.active { border-color:rgba(58,197,232,.95); background:rgba(18,52,78,.96); }
    .wx-radar-site-icon { font-size:22px; line-height:1; color:#3ac5e8; text-shadow:0 0 9px rgba(58,197,232,.65); }
    .wx-radar-site-code { position:absolute; right:-3px; bottom:-4px; padding:1px 3px; border-radius:3px; background:#07101e; border:1px solid rgba(58,197,232,.48); color:#dff7ff; font:700 7px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.04em; }
    .wx-radar-site-panel {
      display:none; position:absolute; right:12px; bottom:160px; z-index:1003;
      width:min(340px,calc(100% - 24px)); max-height:min(64vh,460px); overflow:auto;
      padding:10px; background:rgba(7,16,30,.97); border:1px solid rgba(58,197,232,.42);
      border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.68); color:#dff4ff;
    }
    .wx-radar-site-panel.open { display:block; }
    .wx-radar-site-panel-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .wx-radar-site-panel-title { flex:1; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#3ac5e8; }
    .wx-radar-site-panel-close { border:0; background:none; color:rgba(210,235,248,.78); font:inherit; font-size:14px; cursor:pointer; padding:2px 5px; }
    .wx-radar-site-search { width:100%; box-sizing:border-box; padding:7px 8px; border-radius:6px; background:rgba(15,35,55,.88); border:1px solid rgba(58,197,232,.3); color:#eaf8ff; font:10px "JetBrains Mono","Consolas",monospace; outline:none; }
    .wx-radar-site-search:focus { border-color:rgba(58,197,232,.8); }
    .wx-radar-site-section { margin-top:9px; }
    .wx-radar-site-section-title { font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:rgba(155,210,235,.68); margin-bottom:4px; }
    .wx-radar-site-list { display:flex; flex-direction:column; gap:4px; }
    .wx-radar-site-entry { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; text-align:left; padding:7px 8px; border-radius:6px; background:rgba(20,40,60,.38); border:1px solid rgba(58,197,232,.15); color:rgba(220,240,252,.86); cursor:pointer; font:10px/1.25 "JetBrains Mono","Consolas",monospace; }
    .wx-radar-site-entry:hover, .wx-radar-site-entry:focus-visible { border-color:rgba(58,197,232,.7); background:rgba(58,197,232,.12); }
    .wx-radar-site-entry.current { border-color:rgba(58,197,232,.9); background:rgba(58,197,232,.18); }
    .wx-radar-site-entry-code { flex:none; min-width:42px; color:#3ac5e8; font-weight:700; }
    .wx-radar-site-entry-main { flex:1; min-width:0; }
    .wx-radar-site-entry-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wx-radar-site-entry-meta { display:block; margin-top:2px; color:rgba(175,215,240,.55); font-size:8px; }
    .wx-radar-site-entry-status { flex:none; color:rgba(175,215,240,.56); font-size:8px; text-transform:uppercase; }
    .wx-radar-site-status { min-height:13px; margin-top:6px; color:rgba(175,215,240,.58); font-size:8px; line-height:1.35; }
    .wx-radar-site-loading .wx-radar-site-icon { animation:wx-maps-locating-pulse .9s ease-in-out infinite; }
    .wx-radar-site-btn.locating { animation:wx-maps-locating-pulse .9s ease-in-out infinite; }
    .wx-radar-selection-marker { filter:drop-shadow(0 0 5px rgba(58,197,232,.75)); }
    .wx-selected-location-marker { filter:drop-shadow(0 0 3px rgba(212,176,106,.45)); }
    .wx-live-location-marker { filter:drop-shadow(0 0 6px rgba(47,125,255,.85)); }
    .wx-radar-map-toast {
      display:none; position:absolute; left:50%; top:10px; transform:translateX(-50%);
      z-index:1300; max-width:82%; text-align:center; font-size:11px; line-height:1.35;
      color:#e6f8ff; padding:8px 14px; border-radius:9px; pointer-events:none;
      background:rgba(7,16,30,0.95); border:1px solid rgba(58,197,232,0.4);
      box-shadow:0 4px 16px rgba(0,0,0,0.5);
    }
    .wx-radar-map-toast.show { display:block; }
    /* Historical close-zoom path (1ace328): browser-default interpolation.
       Do not force image-rendering:pixelated — that made phone radar Lego-blocky.
       Display tiles are generated from real 0.25 km gates through z16. */
    /* Playback L2 only: kill Leaflet tile fade so a new buffer does not
       ramp 0→1 after the old buffer is gone (close-zoom blink). Basemap
       tiles are not in this pane and keep their normal fade. */
    .leaflet-wxRadarImagery-pane .wx-radar-native-raster .leaflet-tile,
    .leaflet-wxRadarImagery-pane .wx-radar-native-raster .leaflet-tile-loaded {
      -webkit-transition: none !important;
      transition: none !important;
    }
    .wx-radar-selection-mode .leaflet-marker-icon { cursor:pointer; }
    @media (max-width:720px) {
      .wx-radar-site-controls { right:12px; bottom:calc(142px + env(safe-area-inset-bottom)); }
      .wx-radar-site-panel { right:12px; bottom:calc(290px + env(safe-area-inset-bottom)); width:min(340px,calc(100% - 24px)); max-height:46vh; }
      #wxMapsLocateBtn { display:none; }
    }
    .wx-maps-timeline {
      display:none; position:absolute; left:12px; right:64px;
      bottom:calc(34px + env(safe-area-inset-bottom)); z-index:1000;
      align-items:center; gap:8px; padding:7px 10px;
      background:rgba(7,16,30,0.92); border:1px solid rgba(58,197,232,0.3); border-radius:10px;
      box-shadow:0 4px 16px rgba(0,0,0,0.5);
    }
    .wx-maps-timeline.on { display:flex; }
    .wx-maps-timeline button {
      flex:none; font-size:9px; padding:4px 8px; border-radius:6px;
      background:rgba(18,34,76,.5); border:1px solid rgba(58,197,232,.4);
      color:var(--cyan,#3ac5e8); font-family:inherit; cursor:pointer;
    }
    .wx-maps-timeline button:disabled { opacity:.46; cursor:default; }
    .wx-maps-timeline .wx-maps-new-frame {
      display: none;
      flex: 0 0 auto;
      border-color: rgba(255,196,82,.72);
      color: #ffd27a;
      background: rgba(255,174,42,.12);
      white-space: nowrap;
    }
    .wx-maps-timeline .wx-maps-new-frame.show { display: inline-flex; }
    .wx-maps-timeline input[type=range] { flex:1; min-width:0; accent-color:#3ac5e8; }
    #wxMapsFrameLabel { flex:none; font-size:8px; color:rgba(190,220,240,0.75); min-width:52px; text-align:right; }
    #wxMapsAnimationStatus { flex:none; min-width:44px; font-size:8px; color:rgba(190,220,240,0.72); white-space:nowrap; text-align:right; }
    .wx-radar-animation-status { font-size:8px; color:rgba(190,220,240,0.72); letter-spacing:.03em; white-space:nowrap; }
    .wx-maps-chip.disabled { opacity:0.45; cursor:default; }
    /* Mobile-only in-radar Storm Timing overlay — hidden by default (desktop
       and pop-out are unaffected); shown only inside the max-width:720px
       mobile breakpoint below, just above the (slightly-lowered) playback bar. */
    .wx-maps-storm-overlay { display:none; }
    .wx-maps-storm-overlay:empty { display:none !important; }
    .wx-maps-storm-overlay.wx-maps-storm-collapsed { display:none !important; }
    .wx-maps-storm-head {
      font-size:11px; font-weight:700; color:var(--text,#cfe8f5); margin-bottom:4px;
      display:flex; align-items:center; justify-content:space-between; gap:6px;
    }
    .wx-maps-storm-head-warn { color:#ff9a90; }
    .wx-maps-storm-empty {
      font-size:10px; color:rgba(175,215,240,.65); padding:2px 0;
      display:flex; align-items:center; justify-content:space-between; gap:6px;
    }
    .wx-maps-storm-collapse-btn {
      flex:none; background:none; border:none; color:var(--cyan,#3ac5e8); font-size:11px;
      cursor:pointer; padding:2px 4px; line-height:1; opacity:0.85;
    }
    .wx-maps-storm-viewfull {
      width:100%; margin-top:6px; font:700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.06em;
      padding:6px 8px; border-radius:6px; cursor:pointer;
      background:rgba(18,34,76,.5); border:1px solid rgba(58,197,232,.4); color:var(--cyan,#3ac5e8);
    }
    /* Collapsed-state chip near Layers — mobile only, matches the other
       .wx-maps-ovbtn buttons; "on" (overlay currently expanded) gets the
       same active tint the Layers button uses when its panel is open. */
    #wxMapsStormToggleBtn { display:none; }
    #wxMapsStormToggleBtn.on { background:rgba(58,197,232,0.22); border-color:rgba(58,197,232,0.8); color:#e6f8ff; }
    /* Town/city radar labels (mobile Maps + desktop radar/pop-out): the base
       tile's own baked-in labels were too dim/gray to read over radar echoes
       and CSS can't recolor pixels inside a raster tile, so these two
       surfaces switch to the CARTO "nolabels" tile and get their own
       high-contrast overlay instead — drawn in a Leaflet pane above the
       radar imagery. Kept subtle (no glow) so radar stays visually dominant. */
    .leaflet-div-icon.wx-place-label-icon { background:transparent; border:none; }
    .wx-place-label-text {
      position:absolute; left:0; top:0; transform:translate(-50%,-50%);
      white-space:nowrap; pointer-events:none; letter-spacing:.2px;
      font-size:11px; font-weight:600; color:#f3f7ff;
      text-shadow:0 0 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.9);
    }
    .wx-place-label-text.wx-place-label-town { font-size:10px; font-weight:500; color:#dce7f5; }
    /* Radar pop-out window: the Maps screen IS the whole window — no nav/close */
    body.maps-popout #wxMobileNav { display:none !important; }
    body.maps-popout #wxMapsScreen.show { bottom:0 !important; }
    body.maps-popout #wxMapsCloseBtn { display:none !important; }
    .wx-maps-srclabel {
      position:absolute; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:999;
      font-size:7px; letter-spacing:.04em; color:rgba(170,205,230,0.6);
      background:rgba(7,16,30,0.75); padding:3px 8px; border-radius:8px; pointer-events:none;
    }
    /* Small non-blocking status toast (e.g. "Current location unavailable")
       for the mobile Maps screen — never blocks the map, fades on its own. */
    .wx-maps-toast {
      display:none; position:absolute; left:50%; top:calc(56px + env(safe-area-inset-top));
      transform:translateX(-50%); z-index:1300; max-width:82%; text-align:center;
      font-size:11px; line-height:1.35; color:#e6f8ff; padding:8px 14px; border-radius:9px;
      background:rgba(7,16,30,0.95); border:1px solid rgba(58,197,232,0.4);
      box-shadow:0 4px 16px rgba(0,0,0,0.5); pointer-events:none;
    }
    .wx-maps-toast.show { display:block; }
    .wx-maps-sheet {
      display:none; position:absolute; left:0; right:0; bottom:0; z-index:1200;
      max-height:55%; overflow-y:auto; -webkit-overflow-scrolling:touch;
      background:rgba(8,18,34,0.99); border-top:1px solid rgba(58,197,232,0.4);
      border-radius:14px 14px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,0.6);
      padding:0 14px calc(14px + env(safe-area-inset-bottom));
    }
    .wx-maps-sheet.show { display:block; }
    .wx-maps-sheet-grab {
      position:sticky; top:0; padding:10px 0 8px; cursor:pointer; background:rgba(8,18,34,0.99);
    }
    .wx-maps-sheet-grab::before {
      content:""; display:block; width:44px; height:4px; margin:0 auto;
      border-radius:2px; background:rgba(58,197,232,0.4);
    }
    .wx-maps-sheet-title { font-size:12px; font-weight:700; color:#dff4ff; margin-bottom:4px; }
    .wx-maps-sheet-row { font-size:10px; color:rgba(200,228,245,0.8); line-height:1.6; overflow-wrap:anywhere; word-break:break-word; }
    .wx-maps-sheet-note { font-size:8px; color:rgba(160,200,225,0.55); margin-top:8px; line-height:1.4; overflow-wrap:anywhere; word-break:break-word; }
    #wxMapsSheet[role="dialog"] .wx-maps-sheet-row,
    .wx-official-alert-card .wx-maps-sheet-row { white-space:pre-wrap; }
    .wx-maps-sheet-btns { display:flex; gap:8px; margin-top:10px; }
    .wx-maps-sheet-btns button {
      flex:1; font-size:9px; letter-spacing:.05em; padding:8px 6px; border-radius:7px;
      background:rgba(18,34,76,.5); border:1px solid var(--theme-accent-mid,rgba(58,197,232,.4));
      color:var(--cyan,#3ac5e8); font-family:inherit; cursor:pointer;
    }
    #wxMobileNav button {
      flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
      padding:6px 2px 4px; background:transparent; border:0; cursor:pointer;
      color:rgba(170,205,230,0.6); font-family:inherit; font-size:8px; letter-spacing:.06em;
    }
    #wxMobileNav button.active { color:var(--cyan,#3ac5e8); }
    #wxMobileNav .wx-nav-ic { font-size:16px; line-height:1; }
    @media (max-width: 720px) {
      #wxMobileNav {
        position:fixed; left:0; right:0; bottom:0; z-index:160; display:flex;
        background:rgba(6,14,26,0.99); border-top:1px solid rgba(58,197,232,0.25);
        padding-bottom:env(safe-area-inset-bottom);
        box-shadow:0 -6px 24px rgba(0,0,0,0.5);
      }
      /* --nav-h (set by _wxUpdateNavHeightVar() in JS, real-height fallback
         50px) is the ONE source of truth for the bottom nav's height. It is
         measured from #wxMobileNav's own getBoundingClientRect(), which
         already includes that element's own env(safe-area-inset-bottom)
         padding — so every rule below uses var(--nav-h) ALONE, with no
         extra "+ env(safe-area-inset-bottom)" added on top (that would
         double-count the inset on notched phones). The previous hardcoded
         "50px" guess didn't match the nav's real rendered height (measured
         live: 40px in one layout), leaving a ~10px gap between the bulletin
         and the nav; using the real measured height removes that gap by
         construction, on any device/font/zoom combination. */
      body { padding-bottom: var(--nav-h, 50px); }
      /* Bulletin/ticker bars sit above the nav on mobile so both stay visible.
         "body .wx-ticker-wrap" (not plain ".wx-ticker-wrap") is deliberate:
         the base (non-mobile) `.wx-ticker-wrap { bottom:0; ... }` rule lives
         LATER in this stylesheet, at equal specificity — so on a real phone
         this override was silently losing the cascade and the bar rendered
         at bottom:0, physically underneath the opaque bottom nav (nav
         z-index 160 > bar z-index 40), hiding the ticker text entirely even
         though the marquee animation itself was running correctly. The
         extra "body" ancestor raises specificity so this wins regardless of
         source order. */
      body .wx-ticker-wrap { bottom: var(--nav-h, 50px); }
      #wxBulletinRestoreBar { bottom: var(--nav-h, 50px); }
      body.official-bulletin-hidden #wxDevBulletin.dev-bulletin-visible { bottom:calc(50px + env(safe-area-inset-bottom)); }
      /* Maps mode: map fills everything above the bottom nav */
      #wxMapsScreen.show { bottom:var(--nav-h, 50px); }
      /* Map-heavy cards live in the mobile Maps tab, not mobile Home.
         Storm Path Timeline is radar-driven and desktop-only for now. */
      #wxRadar, #wxLiveMap, #wxStormPathTimeline { display:none !important; }
      /* In-radar Storm Timing overlay (mobile only): both this and the play
         bar sit as low as safely possible above the bottom nav — the map
         (#wxMapsScreen) already stops 50px above the nav, so these are
         additional offsets INSIDE that already-safe area, just enough for a
         comfortable tap target and a small gap between the two bars. */
      .wx-maps-timeline { bottom:8px; }
      .wx-maps-storm-overlay:not(:empty) {
        display:block; position:absolute; left:12px; right:64px;
        bottom:calc(58px + env(safe-area-inset-bottom)); z-index:999;
        padding:8px 10px; background:rgba(7,16,30,0.92);
        border:1px solid rgba(58,197,232,0.3); border-radius:10px;
        box-shadow:0 4px 16px rgba(0,0,0,0.5);
      }
      #wxMapsStormToggleBtn { display:inline-block; }
    }
    /* Desktop: the extra lower traffic mini card is redundant (traffic now lives in the
       Current Conditions card). Hidden on desktop, restored on mobile. */
    .wx-traffic-mini-card { display: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; max-height: 0 !important; height: 0 !important; overflow: hidden !important; }
    .wx-main-grid.dashboard-custom-active #wxLocalReports,
    .wx-main-grid.dashboard-custom-active #wxForecast,
    .wx-main-grid.dashboard-custom-active #wxStormTiming,
    .wx-main-grid.dashboard-custom-active #wxCommuteImpact,
    .wx-main-grid.dashboard-custom-active #wxRadar,
    .wx-main-grid.dashboard-custom-active #wxLiveMap,
    .wx-main-grid.dashboard-custom-active #wxSpcCard,
    .wx-main-grid.dashboard-custom-active #wxModelConfidence { grid-column: auto !important; grid-row: auto !important; }
    .wx-dashboard-card-hidden { display: none !important; }
    .wx-forecast-card { align-self: stretch; }
    .wx-commute-card  { align-self: stretch; overflow-y: auto; }
    /* Forecast inner scroll body — card stays compact, content scrolls */
    .wx-forecast-body {
      max-height: 190px; overflow-y: auto;
      scrollbar-width: thin; scrollbar-color: var(--theme-button-fill-hover) transparent;
    }
    .wx-forecast-body::-webkit-scrollbar { width: 4px; }
    .wx-forecast-body::-webkit-scrollbar-thumb { background: var(--theme-button-fill-hover); border-radius: 2px; }
    /* Impact badges for Commute card */
    .impact-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 6px; font-weight: 700;
      font-size: 12px; letter-spacing: 0.05em; margin: 4px 0 8px;
    }
    .impact-low    { color: #8fffc1; background: rgba(64,201,119,0.10); border: 1px solid rgba(64,201,119,0.28); }
    .impact-medium { color: var(--amber); background: rgba(240,168,50,0.09); border: 1px solid rgba(240,168,50,0.28); }
    .impact-high   { color: var(--danger); background: rgba(255,40,20,0.11); border: 1px solid rgba(255,40,20,0.36); }
    /* Batch A — Storm timing bucket label */
    .wx-timing-bucket { font-size: 9px; color: rgba(58,197,232,0.60); letter-spacing: 0.06em; text-transform: uppercase; }
    .wx-timing-summary { font-size: 11px; color: rgba(200,230,255,0.80); margin-bottom: 6px; font-style: italic; }
    /* Batch A — Severe weather mode indicator */
    #wxSevereModeBanner { display: none; }
    #wxSevereModeBanner.svm-direct   { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; background: rgba(90,8,14,0.55); border: 1px solid rgba(255,28,14,0.72); color: rgba(255,160,140,1.0); }
    #wxSevereModeBanner.svm-nearby   { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; background: rgba(60,35,0,0.35); border: 1px solid rgba(240,168,50,0.45); color: rgba(240,185,60,0.95); }
    #wxSevereModeBanner.svm-watch    { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; background: rgba(60,35,0,0.30); border: 1px solid rgba(240,168,50,0.35); color: rgba(240,185,60,0.85); }
    #wxSevereModeBanner.svm-spc      { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; background: rgba(0,30,50,0.35); border: 1px solid rgba(58,197,232,0.28); color: var(--theme-accent); }
    /* Developer Bulletin — full-width bottom ticker (matches wx-ticker-wrap style) */
    #wxDevBulletin { display: none; }
    #wxDevBulletin.dev-bulletin-visible {
      display: grid; grid-template-columns: minmax(155px,auto) minmax(0,1fr) auto;
      align-items: center; gap: 18px; padding: 10px 18px;
      position: fixed; left: 0; right: 0; bottom: var(--bulletin-h, 64px); z-index: 45;
      min-height: var(--bulletin-h, 64px); overflow: hidden;
      background: linear-gradient(90deg,rgba(7,20,36,0.99),rgba(9,28,48,0.99));
      border-top: 1px solid rgba(58,197,232,0.40);
      box-shadow: 0 -8px 30px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.025);
    }
    /* Only the scrolling main-area needs clearance for the stacked bulletins. The sidebar
       is a full-height column on desktop and a slim top header on mobile — padding its
       bottom would push the whole mobile layout down, so it is intentionally excluded. */
    body.dev-bulletin-open .main-area { padding-bottom: calc(var(--bulletin-h) * 2 + env(safe-area-inset-bottom)) !important; }
    .dev-bulletin-close { background: none; border: none; color: rgba(200,210,255,0.40); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; font-family: inherit; display: block; margin-top: 4px; }
    .dev-bulletin-close:hover { color: rgba(200,210,255,0.85); }
    /* Style-tinted bulletin backgrounds — applied to BOTH public ticker (#wxDevBulletin) and
       live preview (.db-live-preview). Danger is prominently RED so it can't be mistaken for the
       calm blue/amber styles. Disclaimer always stays visible. */
    #wxDevBulletin.db-style-danger, .db-live-preview.db-style-danger {
      background: linear-gradient(90deg, rgba(150,8,8,0.99), rgba(95,2,2,0.99)) !important;
      border-top-color: #ff1e14 !important;
    }
    #wxDevBulletin.db-style-warning, .db-live-preview.db-style-warning {
      background: linear-gradient(90deg, rgba(150,72,8,0.98), rgba(95,40,2,0.98)) !important;
      border-top-color: #ff8a1e !important;
    }
    #wxDevBulletin.db-style-watch, .db-live-preview.db-style-watch {
      background: linear-gradient(90deg, rgba(120,85,5,0.97), rgba(70,48,2,0.97)) !important;
      border-top-color: #f0c020 !important;
    }
    /* High-contrast text on tinted backgrounds */
    .db-style-danger .wx-bulletin-location, .db-style-danger .wx-bulletin-message,
    .db-style-warning .wx-bulletin-location, .db-style-warning .wx-bulletin-message,
    .db-style-watch .wx-bulletin-location, .db-style-watch .wx-bulletin-message { color: #fff !important; }
    .db-style-danger .wx-bulletin-kicker, .db-style-warning .wx-bulletin-kicker,
    .db-style-watch .wx-bulletin-kicker { color: rgba(255,255,255,0.88) !important; }
    /* Developer Bulletin expiry tag styling (right column) */
    .db-disclaimer-tag { display: block; font-size: 8px; letter-spacing: 0.05em; white-space: nowrap;
      font-family: "JetBrains Mono","Consolas",ui-monospace,monospace; color: rgba(200,215,235,0.55); }
    .db-exp { display: block; font-size: 8px; color: rgba(150,190,218,0.50); white-space: nowrap; margin-top: 2px; }
    .db-style-danger .db-disclaimer-tag, .db-style-warning .db-disclaimer-tag,
    .db-style-watch .db-disclaimer-tag { color: rgba(255,255,255,0.78); }
    /* Scrolling marquee must not wrap — overrides the live-preview wrap rule */
    .db-live-preview .wx-bulletin-message.wx-ticker-scroll { white-space: nowrap; overflow: hidden; }
    .wx-ticker-scroll .wx-ticker-inner { will-change: transform; }
    /* Developer Bulletin — dev panel */
    #wxDevBulletinPanel { display: none; margin-top: 14px; padding: 14px; background: rgba(20,30,55,0.60); border: 1px solid var(--theme-accent-mid); border-radius: 8px; }
    #wxDevBulletinPanel.dev-panel-visible { display: block; }
    /* Developer Bulletin editor — collapsible header/body (independent of Admin Control Center) */
    .dev-bulletin-header { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
    .dev-bulletin-chevron { display: inline-block; font-size: 11px; opacity: 0.65; transition: transform 0.15s ease; }
    #wxDevBulletinPanel.dev-bulletin-editor-collapsed #devBulletinBody { display: none; }
    #wxDevBulletinPanel.dev-bulletin-editor-collapsed .dev-bulletin-chevron { transform: rotate(-90deg); }
    #wxDevBulletinPanel.dev-bulletin-editor-collapsed { padding-bottom: 14px; }
    .dev-panel-title { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-accent-dim); margin-bottom: 10px; }
    .dev-panel-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .dev-panel-row label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(180,200,230,0.60); }
    .dev-panel-row input, .dev-panel-row select, .dev-panel-row textarea { background: rgba(10,15,30,0.70); border: 1px solid var(--theme-button-fill-hover); color: var(--text); font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: 4px; width: 100%; box-sizing: border-box; }
    .dev-panel-row textarea { min-height: 60px; resize: vertical; }
    .dev-panel-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    .dev-panel-btn { background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 4px; cursor: pointer; text-transform: uppercase; }
    .dev-panel-btn:hover { background: var(--theme-button-fill-hover); }
    .dev-panel-btn.danger { border-color: rgba(240,80,60,0.40); color: rgba(240,130,110,0.85); background: rgba(80,15,10,0.30); }
    .dev-panel-btn.danger:hover { background: rgba(80,15,10,0.55); }
    .dev-panel-status { font-size: 10px; color: rgba(140,200,140,0.80); margin-top: 6px; min-height: 14px; }
    /* Admin metrics — rendered only inside the authenticated dev/admin panel. */
    .admin-metrics-shell { display: none; min-width: 0; max-width: 100%; box-sizing: border-box; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--theme-accent-mid); }
    .admin-metrics-shell.open { display: block; }
    .admin-metrics-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .admin-metrics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .admin-metric-card { min-width: 0; padding: 10px; border: 1px solid rgba(58,197,232,0.14); border-radius: 6px; background: rgba(5,12,28,0.58); }
    .admin-metric-card h4 { margin: 0 0 7px; color: rgba(58,197,232,0.72); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
    .admin-metric-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: rgba(190,215,238,.72); font-size: 9px; }
    .admin-metric-row b { color: rgba(235,247,255,.94); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
    .admin-table-wrap { overflow-x: auto; margin-top: 10px; }
    .admin-metrics-table { width: 100%; border-collapse: collapse; font-size: 9px; color: rgba(200,225,245,.78); }
    .admin-metrics-table th, .admin-metrics-table td { padding: 5px 6px; border-bottom: 1px solid rgba(58,197,232,.10); text-align: left; white-space: nowrap; }
    .admin-metrics-table th { color: rgba(58,197,232,.62); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
    .admin-metrics-empty { color: rgba(150,190,218,.55); font-size: 10px; font-style: italic; padding: 6px 0; }
    .wx-traffic-cap { margin: 12px 0 16px; padding: 10px; border: 1px solid rgba(58,197,232,.20); border-radius: 8px; background: rgba(4,12,26,.62); }
    .wx-traffic-cap-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
    .wx-traffic-cap-note { font-size:10px; color:rgba(150,190,218,.62); line-height:1.45; margin-bottom:10px; }
    .wx-traffic-cap-range { display:flex; gap:4px; }
    .wx-traffic-cap-range button { font:700 9px/1 "JetBrains Mono",monospace; letter-spacing:.08em; color:var(--cyan); background:rgba(58,197,232,.08); border:1px solid rgba(58,197,232,.28); border-radius:4px; padding:6px 8px; cursor:pointer; }
    .wx-traffic-cap-range button.on { color:#fff; background:rgba(58,197,232,.24); }
    .wx-traffic-hero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .wx-traffic-stat { min-width:0; padding:10px 10px 8px; border:1px solid rgba(58,197,232,.16); border-radius:7px; background:rgba(6,14,30,.72); }
    .wx-traffic-stat .k { font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:rgba(58,197,232,.70); }
    .wx-traffic-stat .v { font-size:26px; font-weight:800; color:#e8f7ff; line-height:1.15; margin-top:4px; }
    .wx-traffic-stat .s { font-size:10px; color:rgba(160,200,220,.62); margin-top:3px; }
    .wx-traffic-chart { margin:12px 0 8px; min-height:120px; }
    .wx-traffic-chart svg { width:100%; height:132px; display:block; }
    .wx-traffic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .wx-traffic-card { min-width:0; padding:9px; border:1px solid rgba(58,197,232,.12); border-radius:6px; background:rgba(5,12,28,.5); }
    .wx-traffic-card h4 { margin:0 0 6px; font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:rgba(58,197,232,.72); }
    .wx-traffic-row { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:rgba(190,215,238,.78); padding:2px 0; }
    .wx-traffic-row b { color:#edf7ff; }
    .wx-traffic-row b.wx-load-ok { color:#edf7ff; }
    .wx-traffic-row b.wx-load-elevated { color:#f0d24a; }
    .wx-traffic-row b.wx-load-high { color:#ff5a5a; }
    .wx-load-legend { font-size:9px; color:rgba(160,200,220,.62); margin-top:7px; letter-spacing:.04em; }
    .wx-load-legend i { font-style:normal; margin-right:8px; }
    .wx-load-legend .ok { color:#edf7ff; }
    .wx-load-legend .elev { color:#f0d24a; }
    .wx-load-legend .hi { color:#ff5a5a; }
    .wx-traffic-tz { font-size:10px; color:rgba(160,200,220,.62); margin:4px 0 0; }
    .wx-traffic-ex { margin:8px 0 10px; padding:8px 10px; border:1px solid rgba(58,197,232,.16); border-radius:6px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:11px; color:rgba(190,215,238,.82); background:rgba(5,12,28,.45); }
    .wx-traffic-ex b.ex { color:#8fffc1; }
    .wx-traffic-ex b.on { color:#f0d24a; }
    .wx-traffic-ex .sub { font-size:10px; color:rgba(160,200,220,.62); }
    .wx-traffic-ex-btn { font:700 9px/1 "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--cyan); background:rgba(58,197,232,.08); border:1px solid rgba(58,197,232,.28); border-radius:4px; padding:6px 8px; cursor:pointer; }
    @media (min-width: 860px) {
      .wx-traffic-hero { grid-template-columns:repeat(6,minmax(0,1fr)); }
      .wx-traffic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    @media (max-width: 480px) {
      .wx-traffic-hero, .wx-traffic-grid { grid-template-columns:1fr 1fr; }
      .wx-traffic-stat .v { font-size:22px; }
    }
    .admin-control-section { min-width: 0; max-width: 100%; box-sizing: border-box; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(58,197,232,.14); border-radius: 6px; background: rgba(5,12,28,.46); }
    .admin-control-section summary { cursor: pointer; color: rgba(58,197,232,.78); font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
    .admin-control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
    .admin-control-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: rgba(190,215,238,.72); font-size: 9px; }
    .admin-control-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; min-height: 32px; }
    .admin-control-grid input:not([type="checkbox"]), .admin-control-grid select { width: 100%; box-sizing: border-box; background: rgba(10,15,30,.75); border: 1px solid rgba(58,197,232,.22); color: var(--text); font: inherit; font-size: 11px; padding: 6px 7px; border-radius: 4px; }
    .admin-control-grid input[type="checkbox"] { accent-color: var(--cyan); }
    /* Developer Bulletin — live preview inside the dev panel */
    .dev-preview-label { font-size: 8px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(58,197,232,0.50); margin: 12px 0 6px; }
    .db-live-preview {
      display: grid; grid-template-columns: minmax(100px,auto) minmax(0,1fr) auto;
      align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; overflow: hidden;
      background: linear-gradient(90deg,rgba(7,20,36,0.99),rgba(9,28,48,0.99));
      border-top: 2px solid rgba(58,197,232,0.40);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .db-live-preview .wx-bulletin-message { white-space: normal; }
    .db-live-preview-empty { font-size: 10px; color: rgba(150,190,218,0.45); font-style: italic; padding: 8px 4px; }
    .dev-preview-warn { font-size: 9px; color: rgba(240,168,50,0.85); margin-top: 5px; min-height: 12px; }
    .dev-panel-tip { font-size: 9px; color: rgba(150,190,218,0.55); margin-top: 10px; line-height: 1.45; font-style: italic; }
    .dev-panel-btn.preview-open { border-color: rgba(120,200,140,0.40); color: rgba(150,220,160,0.90); background: rgba(20,60,30,0.30); }
    .dev-panel-btn.preview-open:hover { background: rgba(20,60,30,0.55); }
    /* Public preview mode — hide ALL dev-only controls so this tab looks like a normal beta viewer */
    body.public-preview-mode #wxDevBadge,
    body.public-preview-mode #wxDevLoginTrigger,
    body.public-preview-mode #wxDevBulletinPanel,
    body.public-preview-mode #wxDevLoginModal { display: none !important; }
    /* Subtle marker so the developer knows which tab is the public preview */
    body.public-preview-mode .top-brand-mob::after { content: " · PUBLIC PREVIEW"; color: rgba(120,200,140,0.7); font-size: 9px; }
    /* WP22 — Traffic card styles */
    .wx-traffic-section { margin-top: 10px; border-top: 1px solid rgba(58,197,232,0.09); padding-top: 8px; }
    .wx-traffic-header { font-size: 9px; letter-spacing: 0.10em; font-weight: 700; color: rgba(58,197,232,0.48); text-transform: uppercase; margin-bottom: 6px; }
    .wx-traffic-status-ok   { color: #8fffc1; font-size: 11px; font-weight: 600; }
    .wx-traffic-status-warn { color: var(--amber); font-size: 11px; font-weight: 600; }
    .wx-traffic-status-off  { color: var(--text-muted); font-size: 11px; }
    .wx-traffic-mini-card   { margin: 0 !important; padding: 0 !important; }
    .wx-traffic-mini        { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .wx-traffic-mini-label  { font-size: 9px; letter-spacing: 0.14em; color: rgba(58,197,232,0.7); font-weight: 700; white-space: nowrap; }
    .wx-traffic-mini-loc    { font-size: 10px; color: rgba(150,190,218,0.75); white-space: nowrap; }
    .wx-traffic-mini-status { font-size: 11px; font-weight: 600; }
    .wx-traffic-mini-status.ok   { color: #8fffc1; }
    .wx-traffic-mini-status.warn { color: var(--amber); }
    .wx-traffic-mini-status.off  { color: var(--text-muted); }
    .wx-traffic-mini-note   { font-size: 10px; color: rgba(150,190,218,0.65); }
    .wx-traffic-mini-meta   { font-size: 9px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
    /* Hero card 2-column summary area (traffic left, commute right) */
    .wx-hero-summary-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
    }
    .wx-hero-summary-half { min-width: 0; }
    .wx-card-community { min-width: 0; border-top: 1px solid var(--theme-accent-soft); padding-top: 8px; }
    .wx-card-community-title { font-size: 9px; letter-spacing: .12em; font-weight: 700; color: var(--theme-accent); text-transform: uppercase; margin-bottom: 6px; }
    .wx-card-community-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 100%; min-width: 0; }
    .wx-card-community-actions .top-community-btn { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; box-sizing: border-box; }
    @media (max-width: 480px) { .wx-hero-summary-row { grid-template-columns: 1fr; } }
    /* Water conditions + fishing barometer compact strip */
    .wx-water-row {
      margin-top: 8px; border-top: 1px solid rgba(58,197,232,0.09); padding-top: 7px;
      display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: rgba(180,220,240,0.80);
    }
    .wx-water-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
    .wx-water-label { color: rgba(100,180,220,0.65); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
    .wx-water-val { color: rgba(200,235,255,0.90); font-weight: 500; }
    .wx-water-source { font-size: 9px; color: rgba(120,170,200,0.50); margin-top: 2px; }
    .wx-release-row { border-top: 1px solid var(--theme-accent-soft); padding-top: 7px; margin-top: 6px; }
    .wx-release-action { margin-top: 6px; font-size: 9px; }
    .wx-bite-good  { color: rgba(100,220,140,0.90); }
    .wx-bite-fair  { color: rgba(200,220,100,0.90); }
    .wx-bite-slow  { color: rgba(230,170,80,0.85); }
    .wx-bite-poor  { color: rgba(220,90,80,0.85); }
    @media (max-width: 480px) { .wx-water-row { font-size: 10px; } }
    /* Fishing/water collapse shell — desktop always shows the full body;
       only the mobile breakpoint below hides it behind a summary toggle. */
    .wx-fishing-summary-row { display: none; }
    .wx-fishing-body { display: block; }
    /* Traffic/commute blocks inside Current Conditions card — reuse wx-traffic-section/flow/meta classes */
    .wx-traffic-incident { font-size: 11px; padding: 4px 0 2px; border-bottom: 1px solid var(--theme-accent-soft); }
    .wx-traffic-incident:last-child { border-bottom: 0; }
    .wx-traffic-incident-road { font-weight: 700; color: var(--cyan); font-size: 10px; }
    .wx-traffic-incident-type { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: 1px; }
    .wx-traffic-type-accident  { background: rgba(240,90,78,0.14); color: var(--danger); border: 1px solid rgba(240,90,78,0.32); }
    .wx-traffic-type-congestion { background: rgba(240,168,50,0.12); color: var(--amber); border: 1px solid rgba(240,168,50,0.30); }
    .wx-traffic-type-construction { background: var(--theme-button-fill); color: var(--cyan); border: 1px solid var(--theme-button-fill-hover); }
    .wx-traffic-type-road_closure { background: rgba(240,90,78,0.20); color: #ff8c80; border: 1px solid rgba(240,90,78,0.42); }
    .wx-traffic-type-disabled_vehicle { background: rgba(180,215,245,0.08); color: var(--text-muted); border: 1px solid rgba(180,215,245,0.16); }
    .wx-traffic-type-unknown   { background: rgba(90,140,180,0.08); color: var(--muted); border: 1px solid rgba(90,140,180,0.18); }
    .wx-traffic-incident-desc { color: var(--text); font-size: 11px; margin-top: 1px; }
    .wx-traffic-delay { color: var(--amber); font-size: 10px; }
    .wx-traffic-flow { margin-top: 6px; }
    .wx-traffic-flow-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; padding: 2px 0; border-bottom: 1px solid rgba(58,197,232,0.05); }
    .wx-traffic-flow-row:last-child { border-bottom: 0; }
    .wx-traffic-flow-name { color: var(--text-muted); }
    .wx-traffic-flow-speed { font-family: "JetBrains Mono","Consolas",monospace; font-weight: 700; }
    .wx-traffic-flow-speed.speed-ok   { color: #8fffc1; }
    .wx-traffic-flow-speed.speed-slow { color: var(--amber); }
    .wx-traffic-flow-speed.speed-bad  { color: var(--danger); }
    .wx-traffic-meta { color: var(--text-muted); font-size: 9px; margin-top: 6px; }
    /* WP24 — SPC Outlook card */
    .wx-spc-card { grid-column: 3; grid-row: 6; align-self: stretch; }
    .wx-confidence-card { grid-column: 1 / -1; grid-row: 8; }
    .wx-spc-day-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--theme-accent-soft); }
    .wx-spc-day-row:last-of-type { border-bottom: 0; }
    .wx-spc-day-label { font-size: 9px; letter-spacing: 0.06em; color: var(--text-muted); min-width: 42px; flex-shrink: 0; white-space: nowrap; }
    .wx-spc-badge {
      display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
      padding: 2px 9px; border-radius: 4px; color: #000;
    }
    .wx-spc-badge-none    { color: rgba(190,215,240,0.78); background: rgba(90,140,180,0.12); border: 1px solid rgba(90,140,180,0.22); }
    .wx-spc-badge-thunder { background: #55BB55; }
    .wx-spc-badge-marginal{ background: #008B00; color: #fff; }
    .wx-spc-badge-slight  { background: #FFFF00; }
    .wx-spc-badge-enhanced{ background: #FFA500; }
    .wx-spc-badge-moderate{ background: #FF0000; color: #fff; }
    .wx-spc-badge-high    { background: #FF00FF; color: #fff; }
    /* SPC plain-English day blocks */
    .wx-spc-day-block { padding: 8px 0; border-bottom: 1px solid var(--theme-accent-soft); }
    .wx-spc-day-block:last-of-type { border-bottom: 0; }
    .wx-spc-day-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
    .wx-spc-severe { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
    .wx-spc-severe b { color: rgba(225,243,255,0.92); font-weight: 700; }
    .wx-spc-meaning { font-size: 10.5px; color: rgba(200,225,250,0.78); line-height: 1.45; }
    .wx-spc-hazards { font-size: 9px; color: var(--text-muted); margin-top: 5px; }
    .wx-spc-hazards-none { font-style: italic; color: rgba(150,190,218,0.55); }
    .wx-spc-explain { margin-top: 10px; }
    .wx-spc-explain-btn {
      width:100%; min-height:40px; margin-top:10px; padding:7px 10px; cursor:pointer;
      color:var(--theme-accent); background:var(--theme-button-fill);
      border:1px solid var(--theme-accent-mid); border-radius:7px;
      font:700 10px/1.2 "JetBrains Mono","Consolas",monospace;
      letter-spacing:.06em; text-transform:uppercase;
    }
    .wx-spc-explain-btn:hover, .wx-spc-explain-btn:focus-visible { background:var(--theme-button-fill-hover); outline:2px solid var(--theme-accent-strong); outline-offset:2px; }
    .wx-spc-explain-body { font-size: 10px; color: rgba(190,215,240,0.72); margin-top: 6px; line-height: 1.45; }
    .wx-spc-risks { font-size: 9px; color: var(--text-muted); flex: 1; }
    .wx-spc-risk-tag { display: inline-block; font-size: 8px; background: rgba(240,90,78,0.12); color: #ff9090; border: 1px solid rgba(240,90,78,0.28); border-radius: 3px; padding: 0 4px; margin-left: 3px; }
    .wx-spc-attribution { font-size: 9px; color: rgba(58,197,232,0.35); margin-top: 8px; }
    .wx-spc-unavail { color: var(--text-muted); font-size: 11px; }
    #wxSpcExplainModal .mem-box { width:min(620px,92vw); }
    .wx-spc-modal-section { margin-bottom:13px; }
    .wx-spc-modal-label { color:var(--theme-accent); font:700 9px/1.3 "JetBrains Mono","Consolas",monospace; letter-spacing:.09em; text-transform:uppercase; margin-bottom:4px; }
    .wx-spc-modal-value { color:var(--text); font-size:12px; line-height:1.55; }
    .wx-spc-modal-note { color:var(--text-muted); font-size:10px; line-height:1.5; }
    .wx-spc-modal-hazards { display:flex; flex-wrap:wrap; gap:6px; }
    .wx-spc-modal-hazard { color:#ffb7ad; border:1px solid rgba(240,90,78,.28); background:rgba(240,90,78,.10); border-radius:5px; padding:3px 7px; font-size:10px; }
    .wx-spc-official-link { display:inline-flex; min-height:38px; align-items:center; padding:0 12px; border:1px solid var(--theme-accent-mid); border-radius:6px; color:var(--theme-accent); text-decoration:none; font:700 10px/1 "JetBrains Mono","Consolas",monospace; }
    @media (max-width:720px) {
      #wxSpcExplainModal { align-items:flex-end; }
      #wxSpcExplainModal .mem-box { width:100vw; max-width:100vw; max-height:min(82dvh,720px); border-radius:16px 16px 0 0; }
      #wxSpcExplainModal .mem-list { padding:14px 16px calc(18px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; }
    }
    /* WP14 — Radar card live */
    .wx-radar-card { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; gap: 0; }
    .wx-radar-ts { font-size: 9px; letter-spacing: 0.06em; color: rgba(58,197,232,0.55); margin-left: 8px; font-weight: 400; }
    /* The map flexes to fill the tall premium card beside the hero (radar is
       the primary desktop visual, not a fixed strip). Mobile <=720px hides the
       dashboard radar card entirely — the Maps tab is the mobile surface. */
    #wxRadarMap {
      height:auto; flex:1 1 auto; min-height:420px; border-radius:6px; overflow:hidden;
      background-color:#07111c;
      background-image:
        linear-gradient(rgba(58,197,232,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,197,232,.045) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, #0b1b2b 0%, #07111c 72%);
      background-size:32px 32px, 32px 32px, 100% 100%;
    }
    #wxRadarMap.wx-basemap-limited { background-color:#091827; }
    .wx-radar-controls {
      display: flex; gap: 4px; padding: 5px 0 3px; flex-shrink: 0;
    }
    .wx-radar-new-frame {
      display: none;
      flex: 0 0 auto;
      border-color: rgba(255,196,82,.72);
      color: #ffd27a;
      background: rgba(255,174,42,.12);
      white-space: nowrap;
    }
    .wx-radar-new-frame.show { display: inline-flex; }
    .wx-radar-btn {
      flex: 1; background: rgba(58,197,232,0.08); border: 1px solid var(--theme-button-fill-hover);
      border-radius: 4px; color: var(--theme-accent); font-family: "JetBrains Mono","Consolas",monospace;
      font-size: 9px; letter-spacing: 0.08em; padding: 5px 2px; cursor: pointer; transition: background 0.15s;
    }
    .wx-radar-btn:hover { background: var(--theme-accent-mid); }
    .wx-radar-attribution {
      font-size: 9px; color: rgba(150,190,218,0.45); padding: 3px 0 2px; letter-spacing: 0.03em; flex-shrink: 0;
    }
    /* Radar fullscreen mode */
    #wxRadar.radar-fullscreen-active {
      position: fixed; inset: 0; width: 100vw; height: 100vh;
      z-index: 9900; border-radius: 0 !important;
      background: #07101e; display: flex; flex-direction: column;
      padding: 0;
    }
    #wxRadar.radar-fullscreen-active #wxRadarMap {
      flex: 1; height: auto !important; border-radius: 0;
    }
    #wxRadarFsBtn { margin-left: auto; }
    #wxRadarFsClose {
      display: none; position: absolute; top: 12px; right: 14px;
      z-index: 9910; background: rgba(7,16,30,0.88);
      border: 1px solid rgba(58,197,232,0.40); border-radius: 6px;
      color: rgba(58,197,232,0.90); font-family: "JetBrains Mono","Consolas",monospace;
      font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
      padding: 7px 14px; cursor: pointer;
    }
    #wxRadar.radar-fullscreen-active #wxRadarFsClose { display: block; }
    .wx-radar-attribution a { color: rgba(58,197,232,0.55); text-decoration: none; }
    .wx-radar-attribution a:hover { color: rgba(58,197,232,0.90); }
    /* Radar source toggle row */
    .wx-radar-src-row { display: flex; align-items: center; gap: 6px; padding: 4px 0 2px; flex-wrap: wrap; }
    .wx-radar-src-label { font-size: 9px; color: rgba(140,190,230,0.65); letter-spacing: 0.08em; text-transform: uppercase; }
    .wx-radar-src-btn { font-size: 9px; padding: 3px 8px; opacity: 0.55; }
    .wx-radar-src-btn.active { opacity: 1; background: var(--theme-accent-mid); border-color: rgba(58,197,232,0.60); }
    .wx-radar-src-msg { font-size: 9px; color: rgba(240,168,50,0.80); letter-spacing: 0.04em; }
    .wx-radar-opacity-row { display:flex; align-items:center; gap:7px; padding:4px 0 3px; }
    .wx-radar-opacity-row label { flex:none; font-size:9px; color:rgba(140,190,230,0.62); letter-spacing:.08em; text-transform:uppercase; }
    .wx-radar-opacity-row input[type=range] { flex:1; min-width:90px; accent-color:#3ac5e8; }
    .wx-radar-opacity-row select {
      flex:1; min-width:90px; background:rgba(58,197,232,0.08); border:1px solid var(--theme-button-fill-hover);
      border-radius:4px; color:var(--theme-accent); font-family:"JetBrains Mono","Consolas",monospace;
      font-size:9px; padding:4px 6px;
    }
    .wx-radar-opacity-val { flex:none; min-width:34px; text-align:right; font-size:9px; color:rgba(190,220,240,.70); }
    /* Desktop radar Layers panel — parity with the mobile Maps Layers panel.
       The opacity slider lives INSIDE this panel, not as a bar under the map. */
    .wx-radar-layers-panel {
      display: none; flex-shrink: 0; margin: 2px 0 4px; padding: 8px 10px;
      background: rgba(7,16,30,0.92); border: 1px solid rgba(58,197,232,0.28);
      border-radius: 6px;
    }
    .wx-radar-layers-panel.open { display: block; }
    .wx-radar-layers-title { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(140,190,230,0.65); margin-bottom: 6px; }
    .wx-radar-layers-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .wx-radar-chip {
      font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .06em;
      padding: 5px 8px; border-radius: 4px; cursor: pointer; opacity: 0.55;
      background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent);
    }
    .wx-radar-chip.on { opacity: 1; background: var(--theme-accent-mid); border-color: rgba(58,197,232,0.60); color: #fff; }
    .wx-radar-chip.disabled { opacity: 0.4; cursor: default; }
    /* Member-only Storm Trails affordance — control stays visible but locked. */
    .wx-radar-chip.wx-member-locked,
    .wx-maps-chip.wx-member-locked {
      border-color: rgba(255, 207, 122, 0.55);
      color: #ffcf7a;
      letter-spacing: .04em;
    }
    /* Rotation Markers badge — original ORION swirl icon, not RadarScope artwork. */
    .wx-rotation-badge-wrap { background: none; border: none; }
    .wx-rotation-badge-svg { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
    .wx-rotation-badge-fresh { animation: wxRotationPulse 2.4s ease-in-out infinite; }
    @keyframes wxRotationPulse {
      0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 0 transparent); }
      50% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 5px var(--wx-rotation-color)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .wx-rotation-badge-fresh { animation: none; }
    }
    /* GOES GLM total lightning — canvas-rendered circle markers (see
       _glmBuildLayer), not per-flash DOM icons. This row is just the compact
       5/10/30-minute window selector shown while the Lightning chip is on. */
    .wx-glm-window-row {
      display: flex; align-items: center; gap: 5px; padding: 2px 1px 4px;
      font-size: 8px; letter-spacing: .05em;
    }
    .wx-glm-window-label { color: rgba(200,228,245,0.55); text-transform: uppercase; margin-right: 2px; }
    .wx-glm-window-btn {
      font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .04em;
      padding: 4px 7px; border-radius: 4px; cursor: pointer; opacity: 0.55;
      background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent);
    }
    .wx-glm-window-btn.on { opacity: 1; background: var(--theme-accent-mid); border-color: rgba(58,197,232,0.60); color: #fff; }
    /* ── Storm Trails v2 UI — compact map-first design (never on Home) ────── */
    .wx-trails-window-row {
      display: flex; align-items: center; gap: 5px; padding: 2px 1px 4px;
      font-size: 8px; letter-spacing: .05em; flex-wrap: wrap;
    }
    .wx-trails-window-label { color: rgba(200,228,245,0.55); text-transform: uppercase; margin-right: 2px; }
    .wx-trails-window-btn {
      font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .04em;
      padding: 4px 7px; border-radius: 4px; cursor: pointer; opacity: 0.55;
      background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent);
    }
    .wx-trails-window-btn.on { opacity: 1; background: var(--theme-accent-mid); border-color: rgba(58,197,232,0.60); color: #fff; }
    /* Compact mode header — centered over the map, informational only. */
    .wx-trails-header {
      position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
      z-index: 900; pointer-events: auto; text-align: center;
      background: rgba(7,16,30,0.82); border: 1px solid rgba(58,197,232,0.28);
      border-radius: 8px; padding: 5px 14px 6px; max-width: 78%;
      font-family: "JetBrains Mono","Consolas",monospace;
    }
    .wx-trails-header-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #e8f7ff; }
    .wx-trails-header-sub { font-size: 8.5px; letter-spacing: .08em; color: rgba(140,205,235,0.85); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wx-trails-filter-trigger { margin-top:4px; padding:3px 8px; border-radius:10px; cursor:pointer; font:700 8px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.08em; color:#9feaff; background:rgba(58,197,232,.10); border:1px solid rgba(58,197,232,.42); }
    /* Meeting UI: hide duplicate toolbar entry. Appearance remains inside Filters. */
    .wx-trails-appearance-trigger {
      display:none !important;
      box-sizing:border-box; min-height:28px; padding:5px 10px; border-radius:8px; cursor:pointer;
      font:700 8px/1.1 "JetBrains Mono","Consolas",monospace; letter-spacing:.07em;
      color:#dff9ff; background:rgba(58,197,232,.12); border:1px solid rgba(58,197,232,.48); margin-top:0;
      box-shadow:inset 0 0 14px rgba(58,197,232,.04); transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
    }
    .wx-trails-appearance-trigger:hover { background:rgba(58,197,232,.22); border-color:rgba(58,197,232,.78); box-shadow:0 0 14px rgba(58,197,232,.12); }
    .wx-trails-appearance-trigger:active { background:rgba(58,197,232,.30); }
    .wx-trails-appearance-trigger:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    .wx-trails-header-actions { display:flex; justify-content:center; align-items:stretch; gap:5px; margin-top:5px; }
    .wx-trails-retry,.wx-trails-show-all,.wx-trails-filter-trigger,.wx-trails-appearance-trigger {
      box-sizing:border-box; min-height:28px; padding:5px 8px; border-radius:8px; cursor:pointer;
      font:700 8px/1.1 "JetBrains Mono","Consolas",monospace; letter-spacing:.07em;
      color:#9feaff; background:rgba(58,197,232,.10); border:1px solid rgba(58,197,232,.42); margin-top:0;
    }
    .wx-trails-retry { color:#ffe0a1; border-color:rgba(255,188,74,.55); background:rgba(255,188,74,.08); }
    .wx-trails-show-all { color:#dff9ff; }
    .wx-trails-header-actions.is-all { grid-template-columns:1fr; }
    @media (max-width: 500px) {
      .wx-trails-header { width:min(300px,calc(100% - 20px)); max-width:none; box-sizing:border-box; padding:7px 9px 8px; }
      .wx-trails-header-sub { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; min-height:12px; }
      .wx-trails-header-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; gap:6px; }
      .wx-trails-retry,.wx-trails-show-all,.wx-trails-filter-trigger,.wx-trails-appearance-trigger { min-width:0; min-height:44px; padding:8px 6px; overflow-wrap:anywhere; }
      .wx-trails-filter-trigger { grid-column:1 / -1; }
      .wx-trails-header-actions.is-all .wx-trails-filter-trigger { grid-column:auto; }
    }
    @media (max-width: 340px) {
      .wx-trails-header { width:calc(100% - 16px); }
      .wx-trails-header-actions { grid-template-columns:1fr; }
      .wx-trails-filter-trigger { grid-column:auto; }
    }
    .wx-trails-filter-panel { position:absolute; z-index:1250; top:94px; left:50%; transform:translateX(-50%); width:min(340px,calc(100% - 20px)); max-height:min(70vh,520px); overflow:auto; padding:13px; border-radius:11px; background:rgba(6,14,27,.98); border:1px solid rgba(58,197,232,.45); box-shadow:0 12px 32px rgba(0,0,0,.65); color:#dff4ff; font:10px/1.45 "JetBrains Mono","Consolas",monospace; box-sizing:border-box; }
    .wx-trails-filter-title { font-weight:700; letter-spacing:.12em; margin-bottom:9px; }
    .wx-trails-filter-close { position:absolute; top:6px; right:7px; padding:5px 7px; border:0; background:transparent; color:#dff4ff; cursor:pointer; }
    .wx-trails-filter-modes,.wx-trails-filter-history { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:7px 0; }
    .wx-trails-filter-mode,.wx-trails-filter-reset { padding:6px 9px; border-radius:5px; cursor:pointer; font:700 9px/1 "JetBrains Mono","Consolas",monospace; color:#9feaff; background:rgba(58,197,232,.07); border:1px solid rgba(58,197,232,.32); }
    .wx-trails-filter-mode.on { color:#fff; background:rgba(58,197,232,.28); border-color:rgba(58,197,232,.75); }
    .wx-trails-dots-toggle {
      width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between;
      margin:8px 0; padding:8px 10px; border-radius:6px; cursor:pointer;
      color:#b7d3df; background:rgba(58,197,232,.06); border:1px solid rgba(58,197,232,.30);
      font:700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.08em;
    }
    .wx-trails-dots-toggle strong {
      min-width:42px; padding:5px 7px; border-radius:5px; text-align:center;
      color:#9fb8c4; background:rgba(5,16,29,.72); border:1px solid rgba(159,184,196,.25);
    }
    .wx-trails-dots-toggle.on strong { color:#fff; background:rgba(58,197,232,.28); border-color:rgba(58,197,232,.75); }
    .wx-trails-dots-toggle:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    .wx-trails-filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin:8px 0; }
    .wx-trails-filter-panel>label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:7px 0; }
    .wx-trails-filter-panel select { min-width:115px; color:#dff4ff; background:#0a1a2c; border:1px solid rgba(58,197,232,.35); border-radius:4px; padding:4px; }
    .wx-trails-filter-reset { width:100%; margin-top:8px; }
    .wx-trails-reflectivity { margin:9px 0; padding:8px; border:1px solid rgba(58,197,232,.32); border-radius:7px; background:rgba(8,24,39,.62); }
    .wx-trails-reflectivity summary { cursor:pointer; color:#dff8ff; font-weight:700; letter-spacing:.08em; list-style:none; }
    .wx-trails-reflectivity summary::-webkit-details-marker { display:none; }
    .wx-trails-reflectivity summary::before { content:"▸"; display:inline-block; width:14px; color:#3ce8ff; }
    .wx-trails-reflectivity[open] summary::before { content:"▾"; }
    .wx-trails-reflectivity-toggle { width:100%; min-height:38px; margin:7px 0; padding:7px 9px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; border-radius:6px; color:#c9dce6; background:rgba(7,18,31,.72); border:1px solid rgba(58,197,232,.30); font:700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.06em; }
    .wx-trails-reflectivity-toggle.on { color:#fff; background:rgba(58,197,232,.20); border-color:rgba(58,197,232,.72); }
    .wx-trails-reflectivity-toggle strong { min-width:42px; padding:4px 6px; border-radius:4px; text-align:center; color:#9fb8c4; background:rgba(5,16,29,.82); }
    .wx-trails-reflectivity-toggle.on strong { color:#fff; background:rgba(58,197,232,.35); }
    .wx-trails-reflectivity-summary { display:flex; justify-content:space-between; gap:8px; margin:6px 0; color:#dff8ff; font-weight:700; }
    .wx-trails-reflectivity-summary output { color:#3ce8ff; text-align:right; }
    .wx-trails-reflectivity-range { display:block; margin:6px 0; color:#c9dce6; }
    .wx-trails-reflectivity-range input[type="range"] { width:100%; accent-color:#3ce8ff; touch-action:none; }
    .wx-trails-reflectivity-modes { display:flex; gap:5px; flex-wrap:wrap; margin:7px 0; }
    .wx-trails-reflectivity-help { color:rgba(200,228,245,.76); font-size:8px; line-height:1.45; margin:6px 0; }
    .wx-trails-reflectivity-count { color:#9feaff; font-size:8px; letter-spacing:.04em; margin-top:3px; }
    .wx-trails-no-criteria { margin:8px 0; padding:8px; border:1px solid rgba(255,196,92,.46); border-radius:6px; background:rgba(120,74,15,.18); color:#ffe2a8; line-height:1.45; }
    .wx-trails-no-criteria strong { display:block; margin-bottom:3px; color:#fff1c9; letter-spacing:.06em; }
    .wx-trails-smart-defaults { margin-top:6px; width:100%; }
    .wx-trails-appearance { margin:10px 0 4px; padding:9px; border:1px solid rgba(58,197,232,.28); border-radius:7px; background:rgba(10,28,44,.52); }
    .wx-trails-appearance summary { cursor:pointer; color:#dff8ff; font-weight:700; letter-spacing:.1em; list-style:none; }
    .wx-trails-appearance summary::-webkit-details-marker { display:none; }
    .wx-trails-appearance summary::before { content:"▸"; display:inline-block; width:14px; color:#3ce8ff; }
    .wx-trails-appearance[open] summary::before { content:"▾"; }
    .wx-trails-appearance-toggle { width:100%; min-height:38px; margin:8px 0 5px; padding:7px 9px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; border-radius:6px; color:#c9dce6; background:rgba(7,18,31,.72); border:1px solid rgba(159,184,196,.30); font:700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.08em; }
    .wx-trails-appearance-toggle.on { color:#fff; background:rgba(58,197,232,.22); border-color:rgba(58,197,232,.74); }
    .wx-trails-appearance-toggle strong { min-width:42px; padding:4px 6px; border-radius:4px; text-align:center; color:#9fb8c4; background:rgba(5,16,29,.82); }
    .wx-trails-appearance-toggle.on strong { color:#fff; background:rgba(58,197,232,.35); }
    .wx-trails-appearance-fields { display:grid; gap:7px; }
    .wx-trails-appearance-fields[aria-disabled="true"] { opacity:.48; }
    .wx-trails-appearance-range { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; color:#c9dce6; }
    .wx-trails-appearance-range input[type="range"] { grid-column:1 / -1; width:100%; accent-color:#3ce8ff; touch-action:none; -webkit-user-select:none; user-select:none; }
    .wx-trails-appearance-range output { color:#fff; font-weight:700; }
    .wx-trails-appearance-colors,.wx-trails-appearance-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
    .wx-trails-appearance-color,.wx-trails-appearance-preset,.wx-trails-restore { min-height:32px; padding:5px 4px; cursor:pointer; border-radius:5px; color:#c9dce6; background:rgba(58,197,232,.07); border:1px solid rgba(58,197,232,.30); font:700 8px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.04em; }
    .wx-trails-appearance-color.on,.wx-trails-appearance-preset.on { color:#fff; background:rgba(58,197,232,.25); border-color:rgba(58,197,232,.75); }
    .wx-trails-appearance-color[data-color="pink"] { color:#ff8dd0; }
    .wx-trails-appearance-color[data-color="blue"] { color:#63d3ff; }
    .wx-trails-appearance-color[data-color="grey"] { color:#d2d8df; }
    .wx-trails-appearance-color[data-color="red"] { color:#ff8b8b; }
    .wx-trails-appearance-color[data-color="green"] { color:#83f0a1; }
    .wx-trails-restore { width:100%; margin-top:7px; color:#ffe3ad; border-color:rgba(255,188,74,.52); background:rgba(255,188,74,.09); }
    .wx-trails-appearance-label { color:rgba(200,228,245,.68); font-size:8px; letter-spacing:.07em; text-transform:uppercase; }
    .wx-trails-evolution-legend { display:flex; flex-direction:column; gap:3px; margin:6px 0 4px; padding:6px 7px; border:1px solid rgba(58,197,232,.25); border-radius:6px; color:rgba(220,242,250,.82); font-size:8px; line-height:1.35; }
    .wx-trails-evolution-legend strong { color:#9feaff; letter-spacing:.08em; font-size:8px; }
    .wx-trails-evolution-gradient { display:block; height:6px; border-radius:4px; background:linear-gradient(90deg,#2b8cff,#3ce8ff,#50e878,#ffe34d,#ff8a3d,#ff4d5f,#ff3cce); }
    /* The Maps screen has its own overlay control row across the top — sit
       the header just below it so it never collides with Nerd/TRACK chips. */
    #wxMapsScreen .wx-trails-header { top: 52px; }
    /* Collapsible top Storm Trails panel (Task 4). */
    .wx-trails-collapse-btn { position:absolute; top:3px; right:5px; background:none; border:none;
      color:#9feaff; font-size:12px; line-height:1; cursor:pointer; padding:4px 6px; min-height:24px; }
    .wx-trails-collapse-btn:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    .wx-trails-header.wx-collapsed { padding-bottom:6px; }
    .wx-trails-header.wx-collapsed .wx-trails-header-actions { display:none; }
    /* One-time discoverability hint. */
    .wx-trails-hint {
      position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
      z-index: 950; background: rgba(10,22,38,0.94); border: 1px solid rgba(58,197,232,0.5);
      border-radius: 8px; padding: 8px 14px; font: 10px/1.4 "JetBrains Mono","Consolas",monospace;
      color: #dff4ff; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    }
    /* Selected-storm card — desktop: compact right-side; mobile: bottom card. */
    .wx-trails-card {
      position: absolute; z-index: 1200; background: rgba(7,14,26,0.96);
      border: 1px solid rgba(58,197,232,0.4); border-radius: 10px;
      padding: 11px 13px 12px; font: 11px/1.5 "JetBrains Mono","Consolas",monospace;
      color: #dff4ff; box-shadow: 0 8px 26px rgba(0,0,0,0.55);
      top: 58px; right: 12px; width: min(300px, calc(100% - 24px));
    }
    @media (max-width: 500px) {
      .wx-trails-card {
        top: auto; right: 10px; left: 10px;
        bottom: calc(58px + env(safe-area-inset-bottom)); width: auto;
      }
    }
    .wx-trails-card-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; padding-right: 26px; }
    .wx-trails-card-state { display: inline-block; font-size: 8px; letter-spacing: .1em; border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; }
    .wx-trails-card-state.active { border: 1px solid rgba(90,230,160,0.55); color: #7df0b2; }
    .wx-trails-card-state.historical { border: 1px solid rgba(160,180,200,0.4); color: rgba(190,210,230,0.8); }
    .wx-trails-card-rows { margin-top: 6px; font-size: 10px; color: rgba(200,228,245,0.85); max-height: min(48vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
    .wx-trails-card-rows div { margin: 2px 0; }
    .wx-trails-card-obs-section {
      margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(58,197,232,0.28);
    }
    .wx-trails-card-obs-title {
      font-size: 9px; font-weight: 700; letter-spacing: .10em; color: #9feaff; margin-bottom: 4px;
    }
    /* Exact per-observation severe attribute chips — rebuilt fully per timestamp. */
    .wx-obs-chip-row {
      display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 4px;
    }
    .wx-obs-chip {
      display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px;
      border-radius: 999px; font: 700 9px/1.2 "JetBrains Mono","Consolas",monospace;
      letter-spacing: .06em; border: 1px solid transparent; color: #0a1520;
    }
    .wx-obs-chip-empty {
      font-size: 9px; color: rgba(180,205,225,0.72); letter-spacing: .02em;
    }
    /* HAIL = red (Phillip: most prominent). WIND = orange. ROTATION = magenta. */
    .wx-obs-chip-hail {
      background: rgba(255, 56, 72, 0.96); border-color: rgba(255, 140, 150, 0.98); color: #1a0608;
    }
    .wx-obs-chip-rotation {
      background: rgba(198, 92, 255, 0.90); border-color: rgba(220, 150, 255, 0.95); color: #14081c;
    }
    .wx-obs-chip-wind {
      background: rgba(255, 152, 48, 0.94); border-color: rgba(255, 196, 110, 0.96); color: #1a1004;
    }
    .wx-obs-chip-alert {
      background: rgba(255, 72, 84, 0.94); border-color: rgba(255, 140, 150, 0.95); color: #1a0608;
    }
    .wx-obs-chip-alert.wx-obs-chip-alert-watch {
      background: rgba(255, 152, 48, 0.94); border-color: rgba(255, 196, 110, 0.96); color: #1a1004;
    }
    .wx-obs-chip-alert.wx-obs-chip-alert-advisory {
      background: rgba(240, 210, 64, 0.94); border-color: rgba(255, 230, 120, 0.96); color: #1a1504;
    }
    .wx-obs-chip-persistent {
      background: rgba(72, 210, 120, 0.92); border-color: rgba(140, 240, 175, 0.95); color: #06140c;
    }
    .wx-obs-chip-high-confidence {
      background: rgba(64, 200, 190, 0.90); border-color: rgba(120, 230, 220, 0.95); color: #041816;
    }
    .wx-obs-section {
      margin: 8px 0 6px; padding: 8px 8px 6px;
      border-radius: 8px; border: 1px solid rgba(58,197,232,0.22);
      background: rgba(8, 22, 38, 0.72);
    }
    .wx-obs-section-title {
      font-size: 9px; font-weight: 800; letter-spacing: .10em; color: #9feaff; margin: 0 0 6px;
    }
    .wx-obs-section-weather {
      border-color: rgba(255, 140, 90, 0.35);
      background: rgba(28, 14, 10, 0.55);
    }
    .wx-obs-section-weather .wx-obs-section-title { color: #ffcf9a; }
    .wx-obs-section-movement, .wx-obs-section-source {
      border-color: rgba(100, 140, 170, 0.22);
      background: rgba(6, 14, 24, 0.55);
    }
    .wx-obs-section-movement .wx-obs-section-title,
    .wx-obs-section-source .wx-obs-section-title { color: rgba(170, 200, 220, 0.78); }
    .wx-obs-kv { margin: 3px 0; font-size: 10px; color: rgba(200, 228, 245, 0.86); line-height: 1.35; }
    .wx-obs-kv strong { color: #e8f6ff; font-weight: 700; }
    .wx-dbz-normal { color: #9feaff; font-weight: 800; }
    .wx-dbz-strong { color: #ffe34d; font-weight: 800; }
    .wx-dbz-severe { color: #ff9a3c; font-weight: 800; }
    .wx-dbz-extreme { color: #ff4d5f; font-weight: 800; }
    .wx-dbz-unknown { color: rgba(200, 228, 245, 0.75); }
    .wx-dbz-trend-up { color: #ffcf7a; font-weight: 700; }
    .wx-dbz-trend-up-strong { color: #ff6b6b; font-weight: 800; }
    .wx-dbz-trend-down { color: #6fe0c8; font-weight: 700; }
    .wx-dbz-trend-down-strong { color: #50e878; font-weight: 800; }
    .wx-dbz-trend-neutral { color: rgba(190, 210, 230, 0.78); }
    .wx-trails-reflectivity-explain {
      margin: 6px 0 4px; padding: 7px 8px; border-radius: 6px;
      background: rgba(8, 24, 40, 0.75); border: 1px solid rgba(58,197,232,0.28);
      color: #dff4ff; font-size: 9px; line-height: 1.45;
    }
    .wx-trails-reflectivity-help-btn {
      margin-left: 6px; min-width: 22px; min-height: 22px; padding: 2px 6px;
      border-radius: 999px; border: 1px solid rgba(58,197,232,0.45);
      background: rgba(8, 24, 40, 0.85); color: #9feaff; font-weight: 800; cursor: pointer;
    }
    .wx-trails-reflectivity-help-panel {
      margin: 6px 0; padding: 8px; border-radius: 6px;
      border: 1px solid rgba(58,197,232,0.30); background: rgba(6, 16, 28, 0.92);
      color: rgba(210, 230, 245, 0.88); font-size: 9px; line-height: 1.45;
    }
    .wx-trail-observation-popup .wx-obs-chip-row,
    .wx-storm-trail-observation-popup .wx-obs-chip-row {
      margin-top: 8px;
    }
    .wx-trails-card-obs-provenance {
      margin-top: 6px; font-size: 9px; color: rgba(170,200,220,0.72); line-height: 1.35;
    }
    .wx-trails-card-obs-nav {
      display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
    }
    .wx-trails-card-obs-nav-btn {
      flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 6px 8px;
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      color: #9feaff; background: rgba(12,28,48,0.9);
      border: 1px solid rgba(58,197,232,0.4); border-radius: 6px; cursor: pointer;
    }
    .wx-trails-card-obs-nav-btn:hover:not(:disabled),
    .wx-trails-card-obs-nav-btn:focus-visible:not(:disabled) {
      border-color: rgba(100,220,255,0.75); color: #dff7ff;
    }
    .wx-trails-card-obs-nav-btn:disabled {
      opacity: 0.38; cursor: not-allowed;
    }
    @media (max-width: 720px) {
      .wx-trails-card-obs-nav-btn { min-height: 40px; font-size: 11px; }
    }
    .wx-trails-card-close {
      position: absolute; top: 6px; right: 8px; background: none; border: none;
      color: #dff4ff; font-size: 14px; cursor: pointer; padding: 4px 6px; line-height: 1;
    }
    /* FOCUS TRAIL / SHOW ALL sits alongside STORM DNA in one row so the card
       doesn't grow taller than before. */
    .wx-trails-card-actions { display: flex; gap: 7px; margin-top: 9px; }
    .wx-trails-card-dna, .wx-trails-card-focus {
      display: block; flex: 1 1 0; margin-top: 0; padding: 9px 4px; text-align: center;
      font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .10em;
      color: var(--cyan, #3ac5e8); background: rgba(58,197,232,0.10);
      border: 1px solid rgba(58,197,232,0.55); border-radius: 7px; cursor: pointer;
      min-height: 34px;
    }
    .wx-trails-card-focus[aria-pressed="true"] {
      background: rgba(58,197,232,0.28); border-color: rgba(58,197,232,0.85); color: #fff;
    }
    .wx-trails-card-dna:hover, .wx-trails-card-focus:hover { background: rgba(58,197,232,0.20); }
    .wx-trails-card-dna:focus-visible, .wx-trails-card-focus:focus-visible, .wx-trails-card-close:focus-visible {
      outline: 2px solid #3ce8ff; outline-offset: 2px;
    }
    /* Compact Focus Trail status pill — map overlay, closes/exits on tap. */
    .wx-trails-focus-pill {
      position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
      z-index: 900; min-height: 36px; max-height: 44px; display: flex; align-items: center;
      background: rgba(58,197,232,0.16); border: 1px solid rgba(58,197,232,0.6);
      border-radius: 18px; padding: 0 14px; cursor: pointer;
      font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .08em;
      color: #dff4ff; box-shadow: 0 4px 16px rgba(0,0,0,0.45); white-space: nowrap;
    }
    #wxMapsScreen .wx-trails-focus-pill { top: 96px; }
    .wx-trails-focus-pill:hover { background: rgba(58,197,232,0.26); }
    .wx-trails-focus-pill:focus-visible { outline: 2px solid #3ce8ff; outline-offset: 2px; }
    /* Focus is part of the Storm Trails header now, so it cannot cover the
       filter/appearance controls or the map's top-left status stack. */
    .wx-trails-focus-row {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      width:100%; box-sizing:border-box; margin-top:7px; padding:6px 8px;
      border:1px solid rgba(58,197,232,.48); border-radius:7px;
      background:rgba(58,197,232,.10); color:#dff4ff;
      font:700 9px/1.2 "JetBrains Mono","Consolas",monospace;
      letter-spacing:.06em; text-align:left;
    }
    .wx-trails-focus-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wx-trails-focus-exit {
      flex:0 0 auto; min-height:26px; padding:5px 8px; border-radius:5px;
      border:1px solid rgba(58,197,232,.68); background:rgba(58,197,232,.16);
      color:#e9fbff; cursor:pointer; font:700 9px/1 "JetBrains Mono","Consolas",monospace;
      letter-spacing:.08em;
    }
    .wx-trails-focus-exit:hover,.wx-trails-focus-exit:focus-visible { background:rgba(58,197,232,.30); border-color:#3ce8ff; }
    .wx-trails-focus-exit:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    @media (max-width:500px) {
      .wx-trails-focus-row { align-items:flex-start; gap:6px; margin-top:8px; padding:7px; }
      .wx-trails-focus-label { flex:1 1 auto; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
      .wx-trails-focus-exit { min-height:32px; padding:7px 9px; }
    }
    /* Transient one-shot notice (e.g. selected storm expired from the window). */
    .wx-trails-transient-msg {
      position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
      z-index: 950; background: rgba(10,22,38,0.94); border: 1px solid rgba(255,160,60,0.5);
      border-radius: 8px; padding: 8px 14px; font: 10px/1.4 "JetBrains Mono","Consolas",monospace;
      color: #ffe6c2; letter-spacing: .03em; max-width: 82%; text-align: center;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    }
    /* Permanent timestamp labels on the selected trail. */
    .leaflet-tooltip.wx-trails-time-label,
    .leaflet-tooltip.wx-trails-current-tooltip {
      background: rgba(7,16,30,0.85); border: 1px solid rgba(58,197,232,0.3);
      color: #dff4ff; font: 9px/1.2 "JetBrains Mono","Consolas",monospace;
      border-radius: 4px; padding: 1px 5px; box-shadow: none;
    }
    /* ── Track This Storm v1 ─────────────────────────────────────────────── */
    .wx-track-btn {
      display: block; width: 100%; margin-top: 8px; padding: 9px 4px; text-align: center;
      font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .09em;
      color: #ffcf7a; background: rgba(255,180,60,0.10);
      border: 1px solid rgba(255,180,60,0.55); border-radius: 7px; cursor: pointer; min-height: 34px;
    }
    .wx-track-btn:hover { background: rgba(255,180,60,0.20); }
    .wx-track-btn.wx-track-btn-active { color: #7df0b2; border-color: rgba(90,230,160,0.55); background: rgba(90,230,160,0.10); }
    .wx-track-btn.wx-track-btn-confirm { color: #ff8a6b; border-color: rgba(255,110,80,0.6); background: rgba(255,110,80,0.14); }
    .wx-track-btn.wx-track-btn-stop { color: #ff8a6b; border-color: rgba(255,110,80,0.5); background: rgba(255,110,80,0.10); }
    /* Compact integrated tracking status. It stays at the map edge instead
       of occupying the storm center or the playback/control zones. */
    .wx-track-chip {
      position:absolute; z-index:720; top:12px; left:12px; right:auto; bottom:auto;
      display:inline-flex; align-items:center; gap:8px; box-sizing:border-box;
      max-width:min(430px,calc(100% - 24px)); padding:4px 7px;
      background:rgba(6,16,29,.90); border:1px solid rgba(58,197,232,.48);
      border-radius:7px; cursor:pointer; pointer-events:auto;
      font:700 9px/1.15 "JetBrains Mono","Consolas",monospace; letter-spacing:.035em;
      color:#dff7ff; box-shadow:0 3px 12px rgba(0,0,0,.42);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    }
    .wx-track-chip:hover,.wx-track-chip:focus-visible {
      border-color:rgba(58,197,232,.88); background:rgba(8,28,46,.96);
    }
    .wx-track-chip:focus-visible { outline:2px solid rgba(58,197,232,.75); outline-offset:2px; }
    .wx-track-chip.wx-track-chip-uncertain { border-color:rgba(255,166,76,.72); color:#ffd39a; }
    .wx-track-chip.wx-track-chip-lost { border-color:rgba(150,160,175,.58); color:rgba(220,230,240,.88); }
    .wx-track-chip-line1 {
      flex:1 1 auto; min-width:0; font-size:9px; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    .wx-track-chip-line2 {
      flex:0 1 auto; min-width:0; display:flex; align-items:center;
      justify-content:flex-end; gap:4px; color:rgba(205,235,247,.82);
      font-size:8px; white-space:nowrap;
    }
    .wx-track-chip-action {
      display:inline-flex; align-items:center; min-height:20px; margin:0; padding:2px 5px;
      border:1px solid rgba(58,197,232,.45); border-radius:4px;
      background:rgba(58,197,232,.09); color:#bcefff;
      font:700 8px/1 "JetBrains Mono","Consolas",monospace;
      letter-spacing:.02em; text-decoration:none; white-space:nowrap; cursor:pointer;
    }
    .wx-track-chip-action:hover,.wx-track-chip-action:focus-visible {
      border-color:rgba(58,197,232,.9); background:rgba(58,197,232,.2); color:#fff;
    }
    /* Status chip refinement: the first line names the state, while the
       second line carries age/site details and the quiet Stop action. */
    .wx-track-chip {
      flex-direction:column; align-items:stretch; gap:4px; width:min(286px,calc(100% - 24px));
      max-width:none; padding:7px 9px; border-radius:8px;
    }
    .wx-track-chip-line1 { flex:none; color:#eaf9ff; font-size:9px; letter-spacing:.06em; }
    .wx-track-chip-line2 { flex:0 0 auto; justify-content:flex-start; flex-wrap:wrap; white-space:normal; line-height:1.35; }
    .wx-track-chip-action[data-action="stop"] { color:rgba(220,231,238,.84); border-color:rgba(150,170,185,.42); background:transparent; }
    .wx-track-chip-action[data-action="stop"]:hover,.wx-track-chip-action[data-action="stop"]:focus-visible { color:#fff; border-color:rgba(210,225,235,.72); background:rgba(150,170,185,.14); }
    .wx-track-chip.wx-track-chip-degraded { border-color:rgba(255,188,74,.62); color:#ffe0a3; }
    .wx-track-chip.wx-track-chip-degraded .wx-track-chip-line1 { color:#ffe0a3; }
    .wx-track-chip.wx-track-chip-uncertain { border-color:rgba(255,154,65,.84); color:#ffd09b; }
    .wx-track-chip.wx-track-chip-uncertain .wx-track-chip-line1 { color:#ffd09b; }
    .wx-track-chip.wx-track-chip-lost { border-color:rgba(255,154,65,.72); color:#ffd09b; }
    .wx-track-chip.wx-track-chip-lost .wx-track-chip-line1 { color:#ffd09b; }
    #wxMapsMapEl .wx-track-chip {
      top:calc(58px + env(safe-area-inset-top));
      width:min(348px,calc(50% - 24px));
    }
    @media (max-width:720px) {
      .wx-track-chip {
        top:8px; left:8px; right:8px; max-width:none;
        display:flex; flex-wrap:wrap; gap:3px 6px; padding:5px 7px;
      }
      .wx-track-chip-line1 { flex:1 1 100%; font-size:8.5px; }
      .wx-track-chip-line2 {
        flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap;
        white-space:normal; font-size:7.5px;
      }
      .wx-track-chip-action { min-height:22px; padding:3px 6px; font-size:7.5px; }
      #wxMapsMapEl .wx-track-chip {
        top:calc(184px + env(safe-area-inset-top));
        width:calc(100% - 16px);
      }
    }
    /* ── Storm intelligence membership gate dialog ──────────────────────── */
    .wx-membership-dialog-overlay {
      position: fixed; inset: 0; z-index: 5000; background: rgba(4,9,16,0.72);
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .wx-membership-dialog {
      position: relative; width: min(360px, 100%); background: rgba(10,20,34,0.98);
      border: 1px solid rgba(58,197,232,0.4); border-radius: 12px; padding: 26px 22px 22px;
      font-family: "JetBrains Mono","Consolas",monospace; color: #dff4ff; text-align: center;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    }
    .wx-membership-dialog-close {
      position: absolute; top: 8px; right: 10px; background: none; border: none;
      color: #dff4ff; font-size: 15px; cursor: pointer; padding: 6px; line-height: 1;
    }
    .wx-membership-dialog-title { font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
    .wx-membership-dialog-tagline { font-size: 12px; color: rgba(200,228,245,0.85); line-height: 1.5; margin-bottom: 10px; }
    .wx-membership-dialog-included { font-size: 11px; color: #ffcf7a; letter-spacing: .03em; margin-bottom: 10px; }
    .wx-membership-dialog-features {
      list-style: none; margin: 0 0 16px; padding: 0; text-align: left;
      display: flex; flex-direction: column; gap: 5px;
    }
    .wx-membership-dialog-features li {
      font-size: 11.5px; line-height: 1.3; color: #dff4ff; display: flex; align-items: center; gap: 7px;
    }
    .wx-membership-dialog-check { color: #3ac5e8; font-weight: 700; flex: none; }
    .wx-membership-dialog-cta {
      display: block; width: 100%; padding: 12px 4px; text-align: center;
      font: 700 11px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .10em;
      color: #0a1420; background: #3ac5e8; border: none; border-radius: 8px; cursor: pointer;
    }
    .wx-membership-dialog-cta:hover { background: #57d3f2; }
    .wx-membership-dialog-cta:focus-visible, .wx-membership-dialog-close:focus-visible {
      outline: 2px solid #3ce8ff; outline-offset: 2px;
    }
    .wx-track-dna-controls { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .wx-track-dna-controls .wx-track-btn { margin-top: 0; }
    /* ── Per-trail visibility (HIDE THIS TRAIL) ──────────────────────────── */
    .wx-trails-card-hide {
      display: block; width: 100%; margin-top: 8px; padding: 9px 4px; text-align: center;
      font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .09em;
      color: rgba(200,210,220,0.85); background: rgba(140,150,160,0.10);
      border: 1px solid rgba(150,160,170,0.4); border-radius: 7px; cursor: pointer; min-height: 34px;
    }
    .wx-trails-card-hide:hover { background: rgba(150,160,170,0.20); }
    .wx-trails-card-show {
      display: block; width: 100%; padding: 9px 4px; text-align: center;
      font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .10em;
      color: var(--cyan, #3ac5e8); background: rgba(58,197,232,0.10);
      border: 1px solid rgba(58,197,232,0.55); border-radius: 7px; cursor: pointer; min-height: 34px;
    }
    .wx-trails-card-show:hover { background: rgba(58,197,232,0.20); }
    .wx-trails-card-state.hidden { border: 1px solid rgba(150,160,170,0.5); color: rgba(200,210,220,0.85); }
    .wx-hidden-trails-btn {
      position: absolute; z-index: 1100; right: 10px; bottom: 100px;
      background: rgba(10,22,38,0.94); border: 1px solid rgba(140,150,160,0.55); border-radius: 18px;
      padding: 8px 14px; cursor: pointer; font: 700 9.5px/1 "JetBrains Mono","Consolas",monospace;
      letter-spacing: .06em; color: rgba(210,220,230,0.92); box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    }
    .wx-hidden-trails-btn:hover { background: rgba(20,32,48,0.96); }
    .wx-hidden-trails-panel {
      position: absolute; z-index: 1150; right: 10px; bottom: 148px; width: min(230px, calc(100% - 20px));
      background: rgba(7,14,26,0.97); border: 1px solid rgba(140,150,160,0.5); border-radius: 10px;
      padding: 8px; box-shadow: 0 8px 26px rgba(0,0,0,0.55);
      font: 10.5px/1.4 "JetBrains Mono","Consolas",monospace; color: #dff4ff;
    }
    .wx-hidden-trails-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; }
    .wx-hidden-trails-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wx-hidden-trails-show {
      flex: none; font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .06em;
      color: var(--cyan, #3ac5e8); background: rgba(58,197,232,0.10); border: 1px solid rgba(58,197,232,0.5);
      border-radius: 5px; padding: 5px 8px; cursor: pointer;
    }
    .wx-hidden-trails-show:hover { background: rgba(58,197,232,0.22); }
    .wx-hidden-trails-show-all {
      display: block; width: 100%; margin-top: 6px; padding: 8px 4px; text-align: center;
      font: 700 9.5px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .08em;
      color: rgba(210,220,230,0.92); background: rgba(140,150,160,0.12); border: 1px solid rgba(150,160,170,0.45);
      border-radius: 6px; cursor: pointer;
    }
    .wx-hidden-trails-show-all:hover { background: rgba(150,160,170,0.22); }
    @media (max-width: 500px) {
      .wx-hidden-trails-btn { bottom: 100px; }
      .wx-hidden-trails-panel { bottom: 148px; left: 10px; right: 10px; width: auto; }
    }
    .leaflet-marker-icon.wx-track-started-here {
      display: flex; align-items: center; justify-content: center;
      font: 700 8px/1 "JetBrains Mono","Consolas",monospace; color: #0a1420;
      background: #ffcf7a; border: 2px solid #fff; border-radius: 50%;
      width: 16px !important; height: 16px !important; margin-left: -8px !important; margin-top: -8px !important;
      box-shadow: 0 0 0 4px rgba(255,207,122,0.25);
    }
    .leaflet-tooltip.wx-trails-time-label::before,
    .leaflet-tooltip.wx-trails-current-tooltip::before { display: none; }
    .wx-radar-trails-sublabel { flex-basis:100%; margin:-1px 0 1px; font-size:8px; color:rgba(165,210,235,0.58); letter-spacing:.04em; }
    .wx-radar-layers-note { font-size: 8px; color: var(--text-muted); margin-top: 7px; line-height: 1.4; }
    .wx-storm-trail-popup { min-width:190px; color:#dff4ff; font:10px/1.45 "JetBrains Mono","Consolas",monospace; }
    .wx-storm-trail-popup-title { color:#3ce8ff; font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:5px; }
    .wx-storm-trail-popup-row { display:flex; justify-content:space-between; gap:12px; margin:3px 0; }
    .wx-storm-trail-popup-row > span:last-child { text-align:right; overflow-wrap:anywhere; }
    .wx-storm-trail-popup-label { color:rgba(190,220,240,0.68); }
    .wx-storm-trail-popup-section { margin:8px 0 3px; padding-top:5px; border-top:1px solid rgba(58,197,232,0.24); color:#8feaff; font-size:8px; font-weight:700; letter-spacing:.1em; }
    .wx-storm-trail-observation-popup { max-height:min(62vh, 460px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
    @media (max-width:500px) {
      .wx-storm-trail-observation-popup { max-height:48vh; }
    }
    /* Tracked observation popups use their own Leaflet className. Keep the
       wrapper dark and readable instead of inheriting Leaflet's light default. */
    .wx-trail-observation-popup .leaflet-popup-content-wrapper {
      background: rgba(7,14,26,0.98); color: #e7f8ff;
      border: 1px solid rgba(58,197,232,0.48); border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.68);
      font-family: "JetBrains Mono","Consolas",monospace;
    }
    .wx-trail-observation-popup .leaflet-popup-tip {
      background: rgba(7,14,26,0.98); border: 1px solid rgba(58,197,232,0.48);
    }
    .wx-trail-observation-popup .leaflet-popup-content {
      margin: 12px 14px; font-size: 10px; line-height: 1.5;
    }
    .wx-trail-observation-popup .leaflet-popup-close-button {
      color: #dff8ff !important; font-size: 18px; font-weight: 700;
      padding: 6px 8px 0 0; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }
    .wx-trail-observation-popup .leaflet-popup-close-button:hover,
    .wx-trail-observation-popup .leaflet-popup-close-button:focus {
      color: #5eeaff !important;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup {
      color: #e7f8ff; font-size: 10px; line-height: 1.5;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup-row {
      align-items: baseline; margin: 4px 0;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup-label {
      color: rgba(196,225,241,0.88); font-weight: 500;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup-row > span:last-child {
      color: #f0fbff; font-weight: 650;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup-section {
      color: #62e7ff; border-top-color: rgba(58,197,232,0.48);
      font-size: 8.5px; margin-top: 10px;
    }
    .wx-trail-observation-popup .wx-storm-trail-popup-note {
      color: rgba(190,222,238,0.82); border-top-color: rgba(58,197,232,0.34);
      font-size: 8.5px; line-height: 1.45;
    }
    .wx-trail-observation-popup .wx-storm-trail-observation-popup {
      scrollbar-color: rgba(58,197,232,0.82) rgba(8,17,32,0.72);
    }
    .wx-trail-observation-popup .wx-storm-trail-observation-popup::-webkit-scrollbar {
      width: 7px;
    }
    .wx-trail-observation-popup .wx-storm-trail-observation-popup::-webkit-scrollbar-track {
      background: rgba(8,17,32,0.72); border-radius: 4px;
    }
    .wx-trail-observation-popup .wx-storm-trail-observation-popup::-webkit-scrollbar-thumb {
      background: rgba(58,197,232,0.82); border-radius: 4px;
      border: 1px solid rgba(7,14,26,0.9);
    }
    .wx-storm-trail-popup-note { margin-top:7px; padding-top:6px; border-top:1px solid rgba(58,197,232,0.18); color:rgba(170,205,228,0.58); font-size:8px; }
    /* ── Storm DNA — desktop right panel / mobile bottom sheet ────────────── */
    .wx-storm-dna-panel {
      position:fixed; z-index:2000; background:rgba(7,14,26,0.97);
      border-left:1px solid rgba(58,197,232,0.28); color:#dff4ff;
      font:12px/1.5 "JetBrains Mono","Consolas",monospace;
      display:flex; flex-direction:column;
      box-shadow:-8px 0 28px rgba(0,0,0,0.55);
      top:0; right:0; height:100%; width:410px; max-width:92vw;
      transform:translateX(100%); transition:transform .22s ease;
    }
    .wx-storm-dna-panel[hidden] { display:none !important; }
    .wx-storm-dna-panel.open { transform:translateX(0); }
    .wx-storm-dna-head {
      flex:0 0 auto; padding:14px 16px 10px; border-bottom:1px solid rgba(58,197,232,0.18);
    }
    .wx-storm-dna-title { font-size:13px; font-weight:700; letter-spacing:.05em; color:#3ce8ff; }
    .wx-storm-dna-sub { font-size:10px; color:rgba(190,220,240,0.72); margin-top:2px; }
    .wx-storm-dna-compact { display:none; }
    .wx-storm-dna-compact-state { margin-top:6px; color:#dff4ff; font-size:11px; font-weight:700; letter-spacing:.06em; }
    .wx-storm-dna-compact-meta { margin-top:5px; color:rgba(200,225,245,.78); font-size:10px; }
    .wx-storm-dna-open {
      width:100%; min-height:38px; margin-top:12px; border-radius:7px; cursor:pointer;
      border:1px solid rgba(58,197,232,.58); background:rgba(58,197,232,.14);
      color:#dff4ff; font:700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing:.10em;
    }
    .wx-storm-dna-compact-actions { display:flex; gap:6px; margin-top:12px; }
    .wx-storm-dna-compact-actions .wx-storm-dna-open { flex:1 1 0; width:auto; min-width:0; margin-top:0; }
    .wx-storm-dna-open[data-action="open-3d-storm"] {
      position:relative; z-index:1; pointer-events:auto; touch-action:manipulation;
    }
    .wx-storm-dna-open:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    .wx-storm-dna-close {
      position:absolute; top:10px; right:12px; background:none; border:none; color:#dff4ff;
      font-size:16px; cursor:pointer; padding:6px 10px; line-height:1;
    }
    .wx-storm-dna-close:focus-visible, .wx-storm-dna-tab:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    /* Minimize control (Task 5) — distinct from close X. */
    .wx-storm-dna-min { position:absolute; top:10px; right:46px; background:none; border:none;
      color:#dff4ff; font-size:15px; cursor:pointer; padding:6px 10px; line-height:1; display:none; }
    .wx-storm-dna-min:focus-visible { outline:2px solid #3ce8ff; outline-offset:2px; }
    .wx-storm-dna-mini { display:none; }
    .wx-storm-dna-mini-title { font-size:12px; font-weight:700; letter-spacing:.05em; color:#3ce8ff;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .wx-storm-dna-mini-chev { color:#9feaff; font-size:12px; margin-left:auto; padding-left:10px; }
    @media (prefers-reduced-motion: reduce) { .wx-storm-dna-panel { transition:none; } }
    .wx-storm-dna-tabs { display:flex; gap:4px; margin-top:10px; overflow-x:auto; }
    .wx-storm-dna-tab {
      flex:0 0 auto; background:rgba(58,197,232,0.08); border:1px solid rgba(58,197,232,0.22);
      color:rgba(210,235,250,0.82); font:inherit; font-size:10.5px; letter-spacing:.03em;
      padding:6px 10px; border-radius:6px; cursor:pointer; min-height:30px;
    }
    .wx-storm-dna-tab.on { background:rgba(58,197,232,0.22); border-color:rgba(58,197,232,0.55); color:#fff; }
    .wx-storm-dna-body { flex:1 1 auto; overflow-y:auto; padding:14px 16px 20px; }
    .wx-storm-dna-section { display:none; }
    .wx-storm-dna-section.on { display:block; }
    .wx-storm-dna-row { display:flex; justify-content:space-between; gap:12px; margin:6px 0; }
    .wx-storm-dna-row-label { color:rgba(190,220,240,0.65); }
    .wx-storm-dna-row-value { text-align:right; }
    .wx-storm-dna-line { font-size:11px; letter-spacing:0.02em; margin:5px 0; color:rgba(210,232,248,0.92); }
    .wx-storm-dna-official-threat { border:1px solid rgba(255,160,60,0.3); background:rgba(255,160,60,0.06); border-radius:8px; padding:10px 12px; margin:0 0 14px; }
    .wx-storm-dna-empty { color:rgba(180,210,232,0.6); padding:10px 0; font-size:11px; line-height:1.5; }
    .wx-storm-dna-legend { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 14px; font-size:10px; }
    .wx-storm-dna-legend-item { display:flex; align-items:center; gap:6px; color:rgba(200,225,245,0.78); }
    .wx-storm-dna-legend-swatch { width:14px; height:3px; border-radius:2px; display:inline-block; }
    .wx-storm-dna-legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
    .wx-storm-dna-alert { border:1px solid rgba(255,160,60,0.35); background:rgba(255,160,60,0.08);
      border-radius:6px; padding:9px 10px; margin:8px 0; }
    .wx-storm-dna-alert-event { font-weight:700; color:#ffcf7a; font-size:11.5px; }
    .wx-storm-dna-alert-meta { color:rgba(210,225,240,0.7); font-size:10px; margin-top:3px; }
    .wx-storm-dna-alert-note { color:rgba(190,215,235,0.55); font-size:9.5px; margin-top:6px; }
    .wx-storm-dna-downloads { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
    .wx-storm-dna-dl-btn {
      background:rgba(58,197,232,0.14); border:1px solid rgba(58,197,232,0.4); color:#dff4ff;
      font:inherit; font-size:10.5px; padding:8px 12px; border-radius:6px; cursor:pointer;
      text-decoration:none; display:inline-flex; align-items:center; min-height:34px;
    }
    .wx-storm-dna-dl-btn:hover { background:rgba(58,197,232,0.24); }
    .wx-storm-dna-disclaimer { margin-top:16px; padding-top:10px; border-top:1px solid rgba(58,197,232,0.15);
      color:rgba(170,200,222,0.55); font-size:9px; line-height:1.5; }
    .wx-storm-dna-handle {
      display:none;
    }
    @media (max-width:720px) {
      .wx-storm-dna-panel {
        left:0; right:0; top:auto; bottom:0; width:auto; max-width:none; height:auto;
        border-left:none; border-top:1px solid rgba(58,197,232,0.28);
        border-radius:16px 16px 0 0; transform:translateY(100%);
        max-height:92vh;
      }
      .wx-storm-dna-panel.open { transform:translateY(0); }
      .wx-storm-dna-panel[data-snap="compact"] { height:28vh; }
      .wx-storm-dna-panel[data-snap="medium"] { height:60vh; }
      .wx-storm-dna-panel[data-snap="expanded"] { height:94vh; }
      .wx-storm-dna-handle {
        display:flex; justify-content:center; padding:8px 0 2px; cursor:grab; touch-action:none;
      }
      .wx-storm-dna-handle-bar { width:38px; height:4px; border-radius:3px; background:rgba(120,160,190,0.45); }
      .wx-storm-dna-close { top:8px; }
      .wx-storm-dna-panel[data-snap="compact"] .wx-storm-dna-head { padding:8px 16px 12px; border-bottom:0; }
      .wx-storm-dna-panel[data-snap="compact"] .wx-storm-dna-sub,
      .wx-storm-dna-panel[data-snap="compact"] .wx-storm-dna-tabs,
      .wx-storm-dna-panel[data-snap="compact"] .wx-storm-dna-body { display:none; }
      .wx-storm-dna-panel[data-snap="compact"] .wx-storm-dna-compact { display:block; }
      .wx-storm-dna-min { display:block; }
      .wx-storm-dna-panel.wx-minimized { bottom:var(--nav-h,50px) !important; height:68px !important;
        max-height:68px; border-radius:14px 14px 0 0; }
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-handle,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-title,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-sub,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-compact,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-tabs,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-body,
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-min { display:none; }
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-head { padding:0 16px; border-bottom:0;
        height:68px; display:flex; align-items:center; }
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-mini { display:flex; align-items:center;
        width:100%; padding-right:44px; cursor:pointer; }
      .wx-storm-dna-panel.wx-minimized .wx-storm-dna-close { top:50%; transform:translateY(-50%); }
    }
    /* Radar tap-inspection popup (desktop card + any Leaflet surface) */
    .wx-inspect-popup .leaflet-popup-content-wrapper {
      background: rgba(8,17,32,0.97); color: #cfe3f5; border: 1px solid rgba(58,197,232,0.35);
      border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.55);
      font-family: "JetBrains Mono","Consolas",monospace;
    }
    .wx-inspect-popup .leaflet-popup-tip { background: rgba(8,17,32,0.97); border: 1px solid rgba(58,197,232,0.35); }
    .wx-inspect-popup .leaflet-popup-content { margin: 10px 12px; font-size: 10px; line-height: 1.45; }
    .wx-inspect-popup .leaflet-popup-close-button { color: rgba(58,197,232,0.8); }
    .wx-inspect-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin: 4px 0 2px; color: #3ac5e8; }
    .wx-inspect-row { margin: 2px 0; color: rgba(210,230,248,0.92); }
    .wx-inspect-note { margin: 3px 0 5px; font-size: 8px; color: rgba(150,190,218,0.55); }
    /* Hide playback controls for non-timeline radar sources */
    #wxRadar.radar-src-tomorrow .wx-radar-controls,
    #wxRadar.radar-src-nws .wx-radar-controls { visibility: hidden; pointer-events: none; }
    #wxRadar.radar-src-tomorrow #wxRadarTimestamp,
    #wxRadar.radar-src-nws #wxRadarTimestamp { display: none; }
    /* Tomorrow.io layer selector — only visible when Tomorrow.io is active */
    .wx-radar-layer-row { display: none; align-items: center; gap: 5px; padding: 2px 0; flex-wrap: wrap; }
    #wxRadar.radar-src-tomorrow .wx-radar-layer-row { display: flex; }
    .wx-radar-layer-lbl { font-size: 9px; color: rgba(140,190,230,0.55); letter-spacing: 0.05em; margin-right: 2px; }
    .wx-radar-layer-btn { font-size: 9px; padding: 2px 7px; opacity: 0.50; }
    .wx-radar-layer-btn.active { opacity: 1; background: var(--theme-accent-mid); border-color: rgba(58,197,232,0.60); }
    .wx-radar-tm-status { font-size: 9px; color: rgba(140,190,230,0.65); padding: 1px 0 3px; letter-spacing: 0.03em; min-height: 14px; }
    /* Tomorrow.io Beta and RainViewer are hidden from the public desktop source toggle.
       RainViewer remains available internally only as a labeled fallback for legacy paths. */
    #wxRadarSrcNWS,
    #wxRadarSrcRV,
    #wxRadarSrcTM    { display: none !important; }
    #wxRadarTmStatus { display: none !important; }

    /* Lightning flicker overlay — storm mode ambient effect
       Future subtle weather modes planned (not yet implemented):
         heat-mode    – warm shimmer, Heat Advisory only
         rain-mode    – faint blue overlay, active rain/storms
         wind-mode    – subtle gradient, Wind Advisory only
         fog-mode     – low-contrast haze, fog/mist reported
         winter-mode  – cold blue edge glow, winter alerts/ice/snow
       All future modes must respect prefers-reduced-motion.
       Manual preview (wxLightningPreview) is for testing/bulletins only — no official warning implied. */
    @media (prefers-reduced-motion: no-preference) {
      #wxLightningOverlay {
        display: none;
        position: fixed; inset: 0; z-index: 9000;
        pointer-events: none;
        /* ambient: very subtle; preview class bumps this up temporarily */
        background: rgba(200, 220, 255, 0.14);
        opacity: 0;
      }
      #wxLightningOverlay.wx-lightning-preview-mode {
        background: rgba(210, 230, 255, 0.28);
      }
      @keyframes wx-lightning-flash {
        0%   { opacity: 0; }
        6%   { opacity: var(--lx-opacity-peak, 0.55); }
        14%  { opacity: calc(var(--lx-opacity-peak, 0.55) * 0.18); }
        22%  { opacity: calc(var(--lx-opacity-peak, 0.55) * 0.80); }
        34%  { opacity: 0; }
        100% { opacity: 0; }
      }
      #wxLightningOverlay {
        --lx-opacity-peak: 0.55;
      }
      #wxLightningOverlay.wx-lightning-active {
        display: block;
      }
      #wxLightningOverlay.wx-lightning-flash {
        animation: wx-lightning-flash 0.46s ease-out forwards;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #wxLightningOverlay { display: none !important; }
    }
    /* ORION Model Confidence card */
    .wx-conf-overall { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
    .wx-conf-overall-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .wx-conf-overall-val { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
    .wx-conf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
    .wx-conf-item { padding: 7px 8px; background: rgba(58,197,232,0.04); border: 1px solid var(--theme-accent-soft); border-radius: 5px; }
    .wx-conf-item-label { font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
    .wx-conf-item-val { font-size: 11px; font-weight: 700; }
    .wx-conf-level-high { color: #8fffc1; }
    .wx-conf-level-moderate-high { color: rgba(100,220,180,0.9); }
    .wx-conf-level-moderate { color: var(--amber); }
    .wx-conf-level-moderate-low { color: rgba(240,130,60,0.9); }
    .wx-conf-level-low { color: var(--danger); }
    .wx-conf-alert { font-size: 10px; color: var(--amber); padding: 5px 8px; background: rgba(240,168,50,0.08); border-left: 2px solid rgba(240,168,50,0.42); border-radius: 0 4px 4px 0; margin-bottom: 8px; }
    .wx-conf-uncertainty { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
    .wx-conf-label { font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
    .wx-conf-takeaway { font-size: 11px; color: var(--text); line-height: 1.5; margin-bottom: 8px; padding: 7px 9px; background: var(--theme-accent-soft); border-radius: 5px; }
    .wx-conf-sources { font-size: 9px; color: var(--muted); margin-bottom: 5px; }
    .wx-conf-disclaimer { font-size: 9px; color: var(--muted); opacity: 0.65; line-height: 1.4; }
    /* Incoming Storm Timing card */
    .wx-storm-status-line { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 0.02em; }
    .wx-storm-status-line.status-clear { color: #8fffc1; }
    .wx-storm-status-line.status-approaching { color: var(--amber); }
    .wx-storm-status-line.status-through { color: var(--danger); }
    .wx-storm-eta-block { margin-bottom: 6px; }
    .wx-storm-eta-label { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .wx-storm-eta-val { font-size: 12px; font-weight: 700; color: var(--text); }
    .wx-storm-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
    .wx-storm-detail-item { padding: 5px 7px; background: rgba(58,197,232,0.04); border: 1px solid var(--theme-button-fill); border-radius: 4px; }
    .wx-storm-detail-label { font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
    .wx-storm-detail-val { font-size: 10px; color: var(--text); }
    .wx-storm-conf-high { color: #8fffc1; }
    .wx-storm-conf-moderate { color: var(--amber); }
    .wx-storm-conf-low { color: var(--muted); }
    .wx-storm-watch { margin-bottom: 7px; }
    .wx-storm-watch-label { font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
    .wx-storm-watch-item { font-size: 10px; color: var(--amber); padding: 2px 6px; background: rgba(240,168,50,0.07); border-left: 2px solid rgba(240,168,50,0.35); margin-bottom: 3px; border-radius: 0 3px 3px 0; }
    .wx-storm-watch-item.watch-warn { color: #ff8c80; background: rgba(240,90,78,0.08); border-left-color: rgba(240,90,78,0.45); }
    .wx-storm-sources { font-size: 9px; color: var(--muted); margin-bottom: 5px; opacity: 0.8; }
    .wx-storm-disclaimer { font-size: 9px; color: var(--muted); opacity: 0.60; line-height: 1.4; }
    /* Storm Path Timeline (below-radar card) mockup-style default view and
       its click-to-expand detail/picker modal. Right-side Incoming Storm
       Timing card is untouched. */
    .wx-storm-timing-clickable { cursor: pointer; }
    .wx-storm-timing-clickable:hover { border-color: rgba(58,197,232,0.4); }
    .wx-storm-fallback-note { font-size: 9px; color: var(--amber); margin-bottom: 8px; line-height: 1.4; }
    /* Horizontal spread-across timeline — one dot per official forecast
       point, evenly spaced across the full card width, joined by a single
       continuous bar (solid+red/orange near-term, dashed+yellow farther
       out) that runs all the way to the last official point. */
    .wx-stm-htimeline { margin-bottom: 8px; }
    .wx-stm-hline { position: relative; height: 22px; margin: 6px 6px 8px; }
    .wx-stm-hseg { position: absolute; top: 10px; height: 2px; }
    .wx-stm-hdot {
      position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%;
      transform: translateX(-50%);
    }
    .wx-stm-hdot-now { width: 13px; height: 13px; top: 4.5px; }
    .wx-stm-hstops { display: flex; }
    .wx-stm-hstop { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 3px; }
    .wx-stm-hstop-place {
      font-size: 10px; font-weight: 700; color: var(--text); line-height: 1.3;
      overflow-wrap: break-word;
    }
    .wx-stm-hstop-time { font-size: 9px; font-family: "JetBrains Mono","Consolas",monospace; margin-top: 3px; }
    .wx-stm-footer { font-size: 9px; color: var(--muted); opacity: 0.75; line-height: 1.4; margin-bottom: 8px; }
    .wx-stm-viewfull-btn {
      width: 100%; font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .06em;
      padding: 7px 8px; border-radius: 5px; cursor: pointer;
      background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent);
    }
    .wx-stm-mode-line { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
    .wx-stm-picker { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .wx-stm-picker-row {
      font-size: 11px; padding: 7px 9px; border-radius: 5px; cursor: pointer;
      background: rgba(58,197,232,0.04); border: 1px solid rgba(58,197,232,0.14); color: var(--text);
    }
    .wx-stm-picker-row:hover { border-color: rgba(58,197,232,0.35); }
    .wx-stm-picker-active { background: rgba(58,197,232,0.14); border-color: rgba(58,197,232,0.55); color: var(--cyan); }
    .wx-stm-detail { border-top: 1px solid rgba(58,197,232,0.14); padding-top: 10px; margin-bottom: 8px; }
    .wx-stm-detail-head { font-size: 11px; font-weight: 700; color: rgba(58,197,232,0.85); margin-bottom: 6px; }
    .wx-radar-error { font-size: 12px; color: rgba(240,168,50,0.80); padding: 14px 0 4px; line-height: 1.5; flex-shrink: 0; }
    /* Test bulletin mode — purely cosmetic dev toggle, no real alert data */
    .wx-ticker-wrap.bulletin-test-warning {
      left: 0; right: 0; width: 100vw; z-index: 1000;
      border-top: 3px solid rgba(255,30,20,1.0);
      background: linear-gradient(90deg, rgba(150,8,8,0.99), rgba(95,2,2,0.99));
      animation: test-warn-pulse 1.5s ease-in-out infinite;
    }
    @keyframes test-warn-pulse {
      0%,100% { box-shadow: 0 -10px 40px rgba(255,10,10,0.30), inset 0 1px 0 rgba(255,100,80,0.07); }
      50%      { box-shadow: 0 -10px 65px rgba(255,10,10,0.60), inset 0 1px 0 rgba(255,100,80,0.07), 0 0 32px rgba(255,40,20,0.36); }
    }
    .wx-ticker-wrap.bulletin-test-warning .wx-bulletin-kicker {
      color: rgba(255,230,60,1.0); font-size: 9px; letter-spacing: 0.14em;
    }
    .wx-ticker-wrap.bulletin-test-warning .wx-bulletin-message {
      color: #ffee00; font-weight: 800;
    }
    .wx-test-tag {
      display: inline-block; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px;
      background: rgba(255,40,30,0.22); border: 1px solid rgba(255,60,40,0.72);
      color: rgba(255,210,160,1.0); font: 800 8px/1.5 "JetBrains Mono","Consolas",monospace;
      letter-spacing: 0.10em; animation: test-blink 1.4s step-end infinite;
    }
    @keyframes test-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.22; } }
    .wx-ticker-scroll { overflow: hidden; }
    .wx-ticker-inner  { display: inline-block; animation: ticker-run 28s linear infinite; white-space: nowrap; }
    @keyframes ticker-run { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .wx-ticker-inner { animation: none; }
    }
    /* weather content classes (JS-generated) */
    .wx-temp {
      font-size: 58px; font-weight: 800; color: #fff; line-height: 1;
      margin: 10px 0 5px;
      text-shadow: 0 0 30px rgba(58,197,232,0.45), 0 2px 6px rgba(0,0,0,0.55);
    }
    .wx-condition { color: rgba(200,235,255,0.88); margin: 4px 0 12px; font-size: 17px; font-weight: 400; }
    .wx-plan-chip {
      display: inline-block; margin: 6px 6px 0 0; padding: 3px 9px;
      border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
      color: var(--theme-accent); border: 1px solid var(--theme-button-fill-hover);
      background: var(--theme-accent-soft); opacity: 0.75; white-space: nowrap;
    }
    .wx-plan-chips { margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 0; }
    .wx-loc-section { margin-top: 14px; border-top: 1px solid var(--theme-accent-soft); padding-top: 12px; }
    .wx-loc-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      color: var(--theme-accent); margin-bottom: 8px; }
    .wx-loc-list { list-style: none; margin: 0; padding: 0; }
    .wx-loc-item { display: flex; align-items: center; gap: 8px; padding: 5px 0;
      border-bottom: 1px solid var(--theme-accent-soft); font-size: 12px; }
    .wx-loc-item:last-child { border-bottom: none; }
    .wx-loc-name { flex: 1; color: rgba(225,243,255,0.92); font-weight: 600; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
    .wx-loc-label { color: rgba(175,215,240,0.55); font-size: 10px; margin-left: 2px; }
    .wx-loc-use { background: none; border: none; color: var(--theme-accent-dim);
      font-size: 10px; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
    .wx-loc-use:hover { color: var(--theme-accent); }
    .wx-loc-del { background: none; border: none; color: rgba(255,120,100,0.70);
      font-size: 10px; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
    .wx-loc-del:hover { color: rgba(255,100,80,1); }
    .wx-loc-add-row { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
    .wx-loc-add-row input { font-size: 11px; padding: 4px 7px;
      background: rgba(7,16,30,0.7); border: 1px solid var(--theme-accent-mid);
      color: rgba(225,243,255,0.92); border-radius: 3px; width: 100%; box-sizing: border-box; }
    /* 2FA section */
    #wx2FAQRCanvas canvas { border: 3px solid #fff; border-radius: 4px; }
    #wx2FAQRCanvas img { border: 3px solid #fff; border-radius: 4px; }
    #wx2FACodeList { user-select: all; cursor: text; }
    .wx-loc-add-row input::placeholder { color: rgba(175,215,240,0.35); }
    .wx-loc-usage { font-size: 10px; color: rgba(175,215,240,0.50); margin-top: 2px; }
    .wx-loc-msg { font-size: 10px; min-height: 14px; margin-top: 3px; }
    .wx-loc-msg.err { color: rgba(255,100,80,0.90); }
    .wx-loc-msg.ok  { color: var(--theme-accent); }
    .wx-detail { color: rgba(175,215,240,0.62); font-size: 12px; margin: 4px 0; }
    .wx-detail-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px 14px; margin-top: 10px;
    }
    .wx-detail-row {
      display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
      padding: 5px 0; border-bottom: 1px solid var(--theme-accent-soft);
      color: rgba(175,215,240,0.64); font-size: 11px;
    }
    .wx-detail-value { color: rgba(225,243,255,0.92); text-align: right; font-weight: 600; }
    .wx-supplemental-tag {
      display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px;
      color: rgba(141,220,255,0.88); border: 1px solid var(--theme-button-fill-hover);
      font: 700 7px/1.5 "JetBrains Mono", "Consolas", ui-monospace, monospace;
      letter-spacing: 0.04em; vertical-align: 1px;
    }
    .wx-card-meta {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 8px; color: var(--theme-button-fill-hover); margin-top: 14px; word-break: break-all; line-height: 1.7;
    }
    .wx-forecast-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 0; border-bottom: 1px solid rgba(58,197,232,0.07); font-size: 12px;
    }
    .wx-forecast-row:last-child { border-bottom: none; }
    .wx-forecast-label { color: var(--theme-accent); min-width: 80px; font-weight: 500; }
    .wx-forecast-temps { color: #fff; font-weight: 700; min-width: 54px; text-align: right; }
    .wx-forecast-cond { color: rgba(175,215,240,0.62); flex: 1; text-align: center; font-size: 11px; padding: 0 6px; }
    .wx-forecast-pop { color: rgba(141,220,255,0.78); min-width: 58px; text-align: right; font-size: 10px; }
    .wx-timing { margin: 2px 0 10px; color: rgba(200,235,255,0.78); font-size: 11px; line-height: 1.55; }
    .wx-alert-item { padding: 8px 0; border-bottom: 1px solid rgba(240,100,80,0.10); font-size: 11px; color: rgba(255,225,200,0.88); }
    .wx-alert-item:last-child { border-bottom: none; }
    .wx-alert-direct {
      margin: 6px 0; padding: 9px 10px; border: 1px solid rgba(250,66,62,0.34);
      border-left: 3px solid rgba(250,66,62,0.92); border-radius: 6px;
      background: rgba(80,10,16,0.28);
    }
    .wx-alert-nearby {
      margin: 6px 0; padding: 9px 10px; border: 1px solid rgba(240,168,50,0.24);
      border-left: 3px solid rgba(240,168,50,0.65); border-radius: 6px;
      background: rgba(70,42,8,0.16); color: rgba(235,225,205,0.86);
    }
    .wx-alert-scope { margin-bottom: 3px; color: rgba(240,168,50,0.85); font-size: 8px; font-weight: 800; letter-spacing: 0.09em; }
    .wx-alert-direct .wx-alert-scope { color: rgba(255,130,120,0.95); }
    .wx-alert-type { color: rgba(255,120,80,0.90); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; margin-bottom: 2px; }
    .wx-alert-facts { color: rgba(190,215,235,0.62); font-size: 9px; line-height: 1.55; margin-top: 4px; }
    .wx-alert-note { color: rgba(240,168,50,0.55); font-size: 10px; margin-top: 6px; font-style: italic; line-height: 1.5; }
    /* Alerts card internal scroll — prevents multiple alerts from stretching the grid */
    .wx-alerts-list {
      max-height: 120px;
      overflow-y: auto;
      overscroll-behavior: contain;
      /* Thin styled scrollbar where the browser supports it */
      scrollbar-width: thin;
      scrollbar-color: rgba(240,100,80,0.32) transparent;
    }
    .wx-alerts-list::-webkit-scrollbar { width: 4px; }
    .wx-alerts-list::-webkit-scrollbar-track { background: transparent; }
    .wx-alerts-list::-webkit-scrollbar-thumb { background: rgba(240,100,80,0.32); border-radius: 2px; }
    .wx-unavailable { color: rgba(140,180,210,0.42); font-style: italic; padding: 8px 0; font-size: 12px; }
    .threat-big { font-size: 30px; font-weight: 800; letter-spacing: 0.03em; margin: 6px 0 4px; }
    .threat-low { color: var(--cyan); }
    .threat-sub { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; }
    .threat-scale {
      display: flex; gap: 3px; margin-top: 10px; height: 5px; border-radius: 3px; overflow: hidden;
    }
    .ts-dot { flex: 1; background: var(--theme-button-fill); border-radius: 2px; }
    .ts-low { background: var(--theme-accent); }
    .provider-info {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 9px; color: rgba(58,197,232,0.36); line-height: 1.8;
    }
    /* ── CHAT PANEL ── */
    /* Ask ORION is the left intelligence panel in the radar-centered layout —
       matches Radar/Storm Timing's height (rows 1/3) instead of a full-width
       strip. "Expand Chat" (below) still works, just as a tall narrow column
       rather than a tall full-width block. */
    .chat-panel {
      flex-shrink: 0; display: flex; flex-direction: column;
      min-width: 0;
      border: 1px solid var(--card-border); border-radius: var(--card-radius);
      background: rgba(5,10,24,0.97); min-height: 320px; max-height: none;
      grid-column: 1; grid-row: 1 / 3; align-self: stretch;
    }
    /* WP15: Expand Chat — give the transcript most of the viewport. Uses only
       max/min-height (no fixed/overlay positioning) to avoid layout bugs. */
    body.chat-expanded .chat-panel { min-height: 70vh; max-height: none; }
    body.chat-expanded #chat { min-height: 60vh; max-height: 80vh; }
    .wx-quota-bar {
      font-size: 9px; letter-spacing: 0.05em; text-align: right;
      color: rgba(58,197,232,0.35); padding: 2px 14px 0;
      flex-shrink: 0; min-height: 13px; transition: color 0.3s;
    }
    .wx-quota-bar.wx-quota-warn { color: rgba(240,168,50,0.75); }
    .wx-quota-bar.wx-quota-empty { color: rgba(240,90,78,0.80); }
    /* WP23 — Dev mode badge */
    #wxDevBadge {
      display: none; font-size: 8px; font-family: "JetBrains Mono","Consolas",ui-monospace,monospace;
      letter-spacing: 0.12em; color: rgba(255,200,50,0.90); background: rgba(255,180,0,0.10);
      border: 1px solid rgba(255,200,50,0.30); border-radius: 3px;
      padding: 1px 6px; margin: 0 14px 3px auto; width: fit-content;
    }
    /* #wxDevBadge.wx-dev-active hidden from public UI — dev panel still accessible via ACC */
    .chat-panel-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 14px; border-bottom: 1px solid rgba(58,197,232,0.07); flex-shrink: 0;
    }
    .cph-title {
      font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
      color: rgba(58,197,232,0.48); text-transform: uppercase;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
    }
    .cph-btns { display: flex; gap: 5px; }
    .cp-btn {
      font-family: inherit; font-size: 10px; font-weight: 500;
      color: rgba(180,215,245,0.52); background: rgba(18,34,76,0.45);
      border: 1px solid rgba(58,197,232,0.14); border-radius: 5px;
      padding: 3px 9px; cursor: pointer;
      transition: color 0.13s, background 0.13s, border-color 0.13s;
    }
    .cp-btn:hover { color: #fff; background: rgba(45,125,210,0.28); border-color: rgba(58,197,232,0.36); }
    .chat-input-hint { font-size: 10px; color: rgba(140,190,230,0.38); padding: 4px 16px 2px; line-height: 1.4; }
    body.voice-live #voiceLiveBtn { color: var(--amber); border-color: rgba(240,168,50,0.50); background: rgba(240,168,50,0.08); }
    #voiceLiveBtn.recording { color: var(--danger); border-color: rgba(240,90,78,0.55); animation: vlpulse 1s ease-in-out infinite; }
    @keyframes vlpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.42; } }
    #chat {
      flex: 1; min-height: 280px; max-height: 52vh; overflow-y: auto; padding: 8px 16px;
      scroll-behavior: smooth; background: transparent;
    }
    .chat-input-row {
      flex-shrink: 0; display: flex; align-items: center;
      padding: 7px 14px; border-top: 1px solid rgba(58,197,232,0.08);
      background: rgba(4,8,20,0.98);
    }
    .chat-prompt {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 11px; font-weight: 600; color: rgba(58,197,232,0.38);
      white-space: nowrap; padding-right: 8px; flex-shrink: 0; user-select: none;
    }
    textarea {
      flex: 1; height: 34px; min-height: 34px; resize: none;
      border: none; border-bottom: 1px solid var(--theme-accent-mid);
      background: transparent; color: var(--text); padding: 4px 6px;
      outline: none; font-family: inherit; font-size: 13px; caret-color: var(--cyan);
    }
    textarea::placeholder { color: var(--muted); opacity: 1; }
    textarea:focus { border-bottom-color: rgba(58,197,232,0.50); }
    #sendBtn {
      flex-shrink: 0; margin-left: 10px;
      font-family: inherit; font-size: 11px; font-weight: 600;
      color: #fff; background: linear-gradient(135deg, rgba(45,125,210,0.78) 0%, rgba(28,82,168,0.78) 100%);
      border: 1px solid rgba(58,197,232,0.32); border-radius: 6px;
      padding: 6px 14px; cursor: pointer; white-space: nowrap;
      transition: background 0.13s, box-shadow 0.13s;
    }
    #sendBtn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(58,155,235,0.88) 0%, rgba(45,100,200,0.88) 100%); box-shadow: 0 0 14px rgba(58,197,232,0.28); }
    #sendBtn:disabled { opacity: 0.36; }
    /* ── WEATHER BULLETIN BAR ── */
    .wx-ticker-wrap {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      min-height: var(--bulletin-h); overflow: hidden;
      display: grid; grid-template-columns: minmax(155px, auto) minmax(0, 1fr) auto;
      align-items: center; gap: 18px; padding: 10px 18px;
      background: linear-gradient(90deg, rgba(7,20,36,0.99), rgba(9,28,48,0.99));
      border-top: 1px solid rgba(64,201,119,0.34);
      box-shadow: 0 -8px 30px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .wx-ticker-wrap.bulletin-warning {
      border-top: 2px solid rgba(255,28,14,1.0);
      background: linear-gradient(90deg, rgba(58,6,10,0.99), rgba(28,8,22,0.99));
      box-shadow: 0 -8px 30px rgba(0,0,0,0.42), 0 -2px 12px rgba(255,28,14,0.28), inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .wx-ticker-wrap.bulletin-watch { border-top-color: rgba(240,168,50,0.78); background: linear-gradient(90deg, rgba(46,25,7,0.99), rgba(15,20,34,0.99)); }
    .wx-ticker-wrap.bulletin-advisory { border-top-color: rgba(241,210,85,0.62); }
    .wx-ticker-wrap.bulletin-nearby { border-top-color: rgba(240,168,50,0.68); background: linear-gradient(90deg, rgba(42,28,8,0.99), rgba(12,22,38,0.99)); }
    .wx-ticker-wrap.bulletin-mock { border-top-color: rgba(240,168,50,0.50); }
    .wx-ticker-wrap.bulletin-unavailable { border-top-color: rgba(240,90,78,0.52); }
    .wx-bulletin-identity { min-width: 0; }
    .wx-bulletin-kicker {
      color: rgba(58,197,232,0.48); font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      text-transform: uppercase;
    }
    .wx-bulletin-kicker.bulletin-kicker-warning { color: rgba(255,110,95,0.96); }
    .wx-bulletin-kicker.bulletin-kicker-watch   { color: rgba(255,190,60,0.96); }
    .wx-bulletin-kicker.bulletin-kicker-advisory{ color: rgba(241,210,85,0.88); }
    .wx-bulletin-location { color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wx-ticker { min-width: 0; }
    .wx-bulletin-provider {
      display: inline-block; margin-bottom: 3px; color: rgba(143,255,193,0.90);
      font: 700 9px/1.4 "JetBrains Mono", "Consolas", ui-monospace, monospace;
      letter-spacing: 0.07em;
    }
    @media (min-width: 761px) {
      .wx-bulletin-provider {
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 800;
      }
    }
    /* Mobile-only event/product-name badge (e.g. "FLOOD WATCH") — hidden on
       desktop, where the identity kicker alone already carries the alert
       state. Reuses .wx-bulletin-kicker's base type styling plus its exact
       .bulletin-kicker-warning/watch/advisory color modifiers (defined
       above), so this badge is never a separately-invented color. */
    .wx-bulletin-event { display: none; }
    .wx-bulletin-message {
      color: rgba(225,243,255,0.94); font-size: 13px; font-weight: 650;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wx-bulletin-updated {
      color: rgba(150,190,218,0.52); font: 600 8px/1.5 "JetBrains Mono", "Consolas", ui-monospace, monospace;
      letter-spacing: 0.04em; text-align: right; white-space: nowrap;
    }
    /* ── MSG STYLING ── */
    .msg {
      display: block; padding: 7px 0; border-bottom: 1px solid rgba(58,197,232,0.05);
      white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere;
      color: var(--text); font-size: 13px; max-width: 100%;
    }
    /* WP15: roomier bot answers so long weather explanations read naturally */
    .msg.bot { padding: 9px 0; }
    .msg.bot::before {
      content: "ORION \2022\00a0";
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      color: var(--cyan); font-weight: 700; font-size: 11px;
    }
    .msg.user::before {
      content: "You \2022\00a0";
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      color: rgba(180,215,245,0.52); font-weight: 600; font-size: 11px;
    }
    .msg.error { color: var(--danger); }
    .voice-hidden { display: none; }
    body.voice-mode #chat .msg { display: none; }
    .msg pre {
      display: block; margin: 6px 0 3px; padding: 8px 12px;
      background: rgba(0,8,22,0.85); border: 1px solid var(--theme-accent-soft);
      border-radius: 6px; overflow-x: auto; white-space: pre;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace; font-size: 11px;
    }
    .msg code {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      background: rgba(0,8,22,0.70); border: 1px solid var(--theme-accent-soft);
      border-radius: 3px; padding: 1px 5px; font-size: 0.90em;
    }
    .msg pre code { border: 0; padding: 0; background: transparent; }
    .msg strong { color: #fff; }
    /* ── PER-MSG COPY BUTTON ── */
    .msg-copy {
      float: right; margin: 3px 0 0 8px; width: 14px; height: 14px;
      padding: 0; font-size: 0; line-height: 0;
      background: transparent; border: 1px solid rgba(58,197,232,0.16); border-radius: 3px;
      cursor: pointer; opacity: 0.32;
      transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .msg-copy:hover, .msg-copy:active { opacity: 1; border-color: rgba(240,168,50,0.55); background: rgba(240,168,50,0.12); }
    .copy-toast {
      position: fixed; bottom: 50px; left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: rgba(7,14,30,0.98); border: 1px solid rgba(58,197,232,0.26);
      border-radius: 6px; color: var(--cyan); padding: 6px 16px;
      font-size: 12px; z-index: 300; opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* ── WP26/WP60 PWA INSTALL UX ── */
    .pwa-install-card {
      position: fixed; top: calc(76px + env(safe-area-inset-top));
      right: calc(14px + env(safe-area-inset-right)); z-index: 34;
      width: min(380px, calc(100vw - 28px)); padding: 12px 13px;
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
      border: 1px solid var(--theme-accent-mid); border-radius: 12px;
      background: linear-gradient(145deg, var(--card-bg), rgba(8,20,36,0.96));
      box-shadow: 0 14px 44px rgba(0,0,0,0.42);
      backdrop-filter: blur(12px);
    }
    .pwa-install-card[hidden] { display: none !important; }
    body.wx-official-alert-active .pwa-install-card { display: none !important; }
    .pwa-install-title { color: var(--text); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
    .pwa-install-copy { color: var(--text-muted); font-size: 10.5px; line-height: 1.45; margin-top: 2px; }
    .pwa-install-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
    .pwa-install-actions button {
      min-height: 34px; padding: 6px 11px; border-radius: 7px; cursor: pointer;
      font: 700 10px/1.2 "JetBrains Mono","Consolas",ui-monospace,monospace;
      letter-spacing: 0.07em; color: var(--cyan); background: var(--theme-button-fill);
      border: 1px solid var(--theme-accent-mid);
    }
    .pwa-install-actions button:hover { background: var(--theme-button-fill-hover); border-color: var(--theme-accent); }
    .pwa-install-actions .pwa-dismiss { color: var(--text-muted); background: transparent; border-color: var(--card-border); text-transform: none; }
    /* ── VERTICAL GAUGE (JS builds into hidden divs) ── */
    .vg { display: flex; flex-direction: column; align-items: center; }
    .vg-name { font-size: 8px; color: rgba(58,197,232,0.40); letter-spacing: 0.08em; }
    .vg-unit { font-size: 7px; color: rgba(90,140,180,0.65); margin-bottom: 2px; }
    .vg-body { display: flex; align-items: stretch; gap: 3px; height: 96px; margin-top: 1px; }
    .vg-scale { display: flex; flex-direction: column; justify-content: space-between; font-size: 7px; color: rgba(90,140,180,0.50); text-align: right; }
    .vg-track {
      position: relative; width: 7px; flex: 0 0 7px;
      border: 1px solid var(--theme-accent-soft); background: rgba(58,197,232,0.03);
    }
    .vg-fill {
      position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
      background: rgba(58,197,232,0.28); transition: height 0.7s ease, background 0.5s ease;
    }
    .vg-readout { margin-top: auto; font-size: 8px; color: var(--muted); text-align: center; padding-top: 8px; }
    .vg-readout b { display: block; color: rgba(58,197,232,0.62); font-weight: 700; font-size: 9px; }
    .vg-val { font-size: 8px; color: rgba(58,197,232,0.55); margin-top: 3px; font-variant-numeric: tabular-nums; }
    /* ── MEMORY MODAL ── */
    .mem-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; background: rgba(0,4,14,0.82); backdrop-filter: blur(4px); }
    .mem-modal.show { display: flex; }
    #wxAnonymousWelcomeModal { z-index: 520; }
    .wx-welcome-box { width: min(440px, calc(100vw - 28px)); max-height: min(86vh, 640px); }
    .wx-welcome-lead { font-size: 15px; font-weight: 800; color: #e8f7ff; line-height: 1.35; margin-bottom: 6px; }
    .wx-welcome-sub { font-size: 12px; color: rgba(225,243,255,.88); line-height: 1.5; margin-bottom: 8px; }
    .wx-welcome-price { font-size: 12px; color: #8fffc1; font-weight: 700; margin-bottom: 8px; }
    .wx-welcome-list { margin: 0 0 8px 16px; padding: 0; font-size: 11px; line-height: 1.45; color: rgba(225,243,255,.84); }
    .wx-welcome-legal { font-size: 10px; color: rgba(175,215,240,.62); margin-top: 8px; }
    .wx-welcome-legal a { color: var(--cyan); }
    .wx-welcome-box details { margin-top: 8px; font-size: 11px; color: rgba(190,215,238,.82); line-height: 1.45; }
    .wx-welcome-box summary { cursor: pointer; color: #e8f7ff; font-weight: 700; }
    .wx-welcome-cta { font-weight: 800 !important; }
    .wx-fa-gate { font-size: 12px; color: rgba(225,243,255,.88); line-height: 1.45; }
    .wx-fa-gate button { margin: 6px 6px 0 0; font-size: 11px; }
    #wxWelcomeCtaBtn {
      display: none; align-items: center; justify-content: center;
      min-height: 32px; padding: 4px 10px; margin-left: 6px;
      border: 1px solid rgba(58,197,232,.55); border-radius: 5px;
      background: rgba(58,197,232,.24); color: #fff; font-weight: 800;
      font-size: 11px; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
    }
    #wxWelcomeCtaBtn.show { display: inline-flex; }
    #wxWelcomeFloatCta {
      display: none; position: fixed; z-index: 360;
      top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right));
      min-height: 34px; padding: 6px 10px; border-radius: 999px;
      border: 1px solid rgba(58,197,232,.55); background: rgba(7,16,30,.88);
      color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .04em; cursor: pointer;
    }
    #wxWelcomeFloatCta.show { display: inline-flex; align-items: center; }
    /* 3D Storm View must stack above the Storm DNA sheet (z-index 2000):
       otherwise the mobile bottom sheet covers the viewer's lower edge,
       including the iframe's VIEW CONTROLS toggle. */
    #wx3dStormViewModal { z-index: 2400; }
    body.wx-3d-open { overflow: hidden; }
    body.wx-3d-open .wx-storm-dna-panel { visibility: hidden; pointer-events: none; }
    @media (max-width: 600px) {
      #wx3dStormViewModal .wx-map-modal-box { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
      #wx3dStormViewModal .wx-map-modal-body { height: auto !important; flex: 1; }
    }
    .mem-box {
      width: min(580px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
      background: rgba(8,16,36,0.98); border: 1px solid rgba(58,197,232,0.20);
      border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.60);
    }
    .mem-head {
      display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
      border-bottom: 1px solid var(--theme-button-fill); color: var(--cyan); font-size: 12px;
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace; letter-spacing: 0.08em;
    }
    .mem-x { background: rgba(58,197,232,0.07); border: 1px solid var(--theme-accent-mid); border-radius: 5px; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 11px; padding: 2px 8px; }
    .mem-list { overflow-y: auto; padding: 12px 16px; flex: 1; }
    .mem-empty { color: var(--muted); font-size: 12px; padding: 14px 4px; line-height: 1.6; }
    .mem-item { border: 1px solid rgba(58,197,232,0.14); border-radius: 8px; padding: 10px 13px; margin-bottom: 10px; }
    .mem-cat { color: var(--amber); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; }
    .mem-text { color: var(--text); font-size: 13px; margin: 4px 0; line-height: 1.5; }
    .mem-key { color: var(--muted); font-size: 10px; margin-bottom: 8px; }
    .mem-actions { display: flex; gap: 8px; }
    .mem-actions button { background: rgba(18,34,76,0.45); border: 1px solid var(--theme-accent-mid); border-radius: 5px; color: var(--cyan); font-family: inherit; font-size: 11px; padding: 3px 12px; cursor: pointer; }
    .mem-approve:hover { color: #7CFFB0; border-color: rgba(124,255,176,0.48); background: rgba(124,255,176,0.07); }
    .mem-reject:hover { color: var(--danger); border-color: rgba(240,90,78,0.48); background: rgba(240,90,78,0.07); }
    .mem-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid rgba(58,197,232,0.09); }
    .mem-foot button { background: rgba(18,34,76,0.45); border: 1px solid var(--theme-accent-mid); border-radius: 5px; color: var(--cyan); font-family: inherit; font-size: 11px; padding: 3px 12px; cursor: pointer; }
    #memStatus { color: var(--amber); font-size: 11px; }
    /* ── BOOT SEQUENCE ── */
    #bootOverlay {
      position: fixed; inset: 0; z-index: 200; background: #07101e;
      display: flex; align-items: center; justify-content: center; transition: opacity 0.9s ease;
    }
    #bootOverlay.done {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      display: none !important;
    }
    #bootLines {
      font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
      font-size: 14px; line-height: 2; color: var(--cyan);
      text-shadow: 0 0 10px rgba(58,197,232,0.75); min-width: min(360px, 90vw);
    }
    .bline { opacity: 0; white-space: pre; }
    .bline.show { animation: bshow 0.12s forwards; }
    @keyframes bshow { to { opacity: 1; } }
    .bline.amber { color: var(--amber); text-shadow: 0 0 10px rgba(240,168,50,0.75); }
    .bline.dim { color: var(--muted); text-shadow: none; font-size: 11px; }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

    /* Theme coverage: safe non-alert surfaces only.
       Official warning/alert/ticker danger classes intentionally keep their
       safety colors above. */
    .app-shell,
    .main-area {
      color: var(--text);
    }
    .sidebar {
      background: linear-gradient(180deg, var(--surface-hi) 0%, var(--surface) 100%);
      border-right-color: var(--theme-accent-soft);
    }
    .brand,
    .loc-block,
    .sidebar-footer,
    .top-bar,
    .chat-panel-hdr,
    .chat-input-row,
    .mem-foot {
      border-color: var(--theme-accent-soft);
    }
    .brand {
      background: linear-gradient(135deg, var(--theme-accent-soft) 0%, transparent 100%);
    }
    .top-bar,
    .chat-input-row {
      background: var(--surface);
    }
    .wx-card-base,
    .chat-panel,
    .mem-modal,
    .mem-box,
    .pwa-install-card,
    #wxDevBulletinPanel,
    .wx-plan-card,
    .wx-route-item,
    .wx-loc-item,
    .wx-livemap-card,
    .wx-map-modal-box,
    .theme-choice,
    .admin-metrics-card {
      background: var(--card-bg);
      border-color: var(--card-border);
    }
    #wxLocation,
    #wxLocation option,
    .account-btn,
    .top-feedback-btn,
    .top-community-btn,
    .top-more-btn,
    .account-entry-tab,
    .cp-btn,
    .wx-livemap-btn,
    .sidebar-collapse-btn,
    .mem-actions button,
    .mem-foot button,
    .mem-x,
    .wx-loc-add-row input,
    .dev-panel-row input,
    .dev-panel-row select,
    .dev-panel-row textarea,
    .admin-metrics-card input,
    .admin-metrics-card select,
    .admin-metrics-card textarea {
      background: var(--theme-button-fill);
      border-color: var(--theme-accent-mid);
      color: var(--text);
    }
    #wxLocation:focus,
    textarea:focus,
    input:focus,
    select:focus {
      border-color: var(--theme-accent-strong);
      background: var(--theme-button-fill-hover);
    }
    .account-btn:hover,
    .top-feedback-btn:hover,
    .top-community-btn:hover,
    .top-more-btn:hover,
    .account-entry-tab:hover,
    .cp-btn:hover,
    .theme-choice:hover,
    .mem-actions button:hover,
    .mem-foot button:hover,
    .mem-x:hover {
      background: var(--theme-button-fill-hover);
      border-color: var(--theme-accent-strong);
      color: #fff;
    }
    .brand-sub,
    .loc-label,
    .top-clock,
    .wx-card-title,
    .cph-title,
    .provider-info,
    .wx-bulletin-kicker,
    .vg-name,
    .vg-readout b,
    .vg-val,
    .dev-panel-title,
    .admin-metrics-table th,
    .wx-radar-ts {
      color: var(--theme-accent-dim);
    }
    .wx-detail,
    .wx-forecast-cond,
    .wx-timing,
    .chat-input-hint,
    .wx-water-source,
    .admin-metrics-empty,
    .dev-panel-tip {
      color: var(--text-muted);
    }
    .wx-detail-row,
    .wx-forecast-row,
    .msg,
    .mem-item,
    .admin-metrics-table th,
    .admin-metrics-table td,
    .wx-water-row {
      border-color: var(--theme-accent-soft);
    }
    .wx-supplemental-tag,
    .wx-forecast-pop,
    .chat-prompt,
    .msg.bot::before,
    .wx-loc-msg.ok,
    .wx-water-label,
    .wx-traffic-header {
      color: var(--theme-accent);
    }
    .wx-forecast-label,
    .wx-detail-value,
    .wx-water-val,
    .wx-forecast-temps {
      color: var(--text);
    }
    .wx-water-subtle-note {
      color: var(--text-muted) !important;
      opacity: 0.62;
      font-size: 8px;
    }
    #sendBtn {
      background: linear-gradient(135deg, var(--theme-accent-strong) 0%, var(--theme-accent-mid) 100%);
      border-color: var(--theme-accent-strong);
    }
    #sendBtn:hover:not(:disabled) {
      background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-strong) 100%);
      box-shadow: 0 0 14px var(--theme-accent-glow);
    }
    .wx-ticker-wrap:not(.bulletin-warning):not(.bulletin-watch):not(.bulletin-nearby):not(.bulletin-advisory):not(.bulletin-mock):not(.bulletin-unavailable) {
      background: linear-gradient(90deg, var(--surface), var(--surface-hi));
      border-top-color: var(--theme-accent-mid);
    }
    /* ── RESPONSIVE ── */
    @media (max-width: 720px) {
      #wxDevBulletinPanel { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
      .app-shell { flex-direction: column; }
      .sidebar {
        display: block; flex: 0 0 auto; width: 100%;
        border-right: 0; border-bottom: 1px solid var(--theme-accent-soft);
        padding-bottom: 0;
      }
      .sidebar .brand, .sidebar-nav, .sidebar-footer, .sidebar-collapse-btn { display: none; }
      body.sidebar-collapsed { --sidebar-w: 100%; }
      .loc-block {
        display: flex; align-items: center; gap: 10px;
        padding: calc(7px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 7px calc(12px + env(safe-area-inset-left)); border-bottom: 0;
      }
      .loc-label { margin: 0; flex: 0 0 auto; }
      #wxLocation { flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%; padding: 6px 9px; }
      .main-area { min-height: 0; }
      /* Top gap fix: the location block (sidebar) is the topmost element on mobile and
         already carries env(safe-area-inset-top). The top-bar sits BELOW it, so re-adding
         the inset here double-counts it and opens a gap on notched/standalone devices. */
      .top-bar {
        height: 0; min-height: 0; padding: 0;
        max-width: 100%; overflow: visible;
        display: block; background: transparent; border-bottom: 0;
        position: relative; z-index: 8; pointer-events: none;
      }
      .wx-welcome-box { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
      #wxAnonymousWelcomeModal { align-items: flex-start; padding: 12px 10px 18px; }
      #wxAnonymousWelcomeModal .mem-list { padding: 12px !important; }
      #wxAnonymousWelcomeModal .mem-foot { flex-wrap: wrap; }
      #wxAnonymousWelcomeModal .mem-foot button { flex: 1 1 100%; }
      #wxWelcomeCtaBtn { display: none !important; }
      .top-right { display: none !important; }
      .top-clock { display: none !important; }
      #wxRefreshBtn { display: none !important; }
      #wxAccountBtn, #wxMoreBtn { display: none !important; }
      #wxMemberPreviewModal { align-items: center; justify-content: center; padding: 10px; overflow-x: hidden; }
      #wxMemberPreviewModal .member-preview-box { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
      #wxMemberPreviewModal .mem-list { padding: 12px 12px !important; }
      #wxMemberPreviewModal .mem-head { padding: 11px 12px; }
      #wxMemberPreviewModal .mem-foot { padding: 10px 12px; gap: 8px; }
      #wxMemberPreviewModal .mem-foot button { flex: 1 1 160px; }
      .top-feedback-btn { min-height: 34px; padding: 4px 7px; max-width: 94px; overflow: hidden; text-overflow: ellipsis; }
      #wxFeedbackBtn, #wxSourcesSafetyBtn, .desktop-community-link, #status { display: none !important; }
      .wx-card-community { display: block; }
      .wx-ticker-wrap { left: 0; }
      .top-brand-mob {
        display: block; position: absolute;
        top: 8px; left: calc(16px + env(safe-area-inset-left));
        white-space: nowrap; min-width: 0; pointer-events: none;
        padding: 2px 6px; border-radius: 999px;
        background: rgba(4,10,24,0.34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        text-shadow: 0 0 12px rgba(58,197,232,0.30);
      }
      .wx-main-grid { grid-template-columns: 1fr; padding-top: 38px; }
      .wx-hero, .wx-alerts-card, .wx-local-reports, .wx-storm-timing,
      .wx-forecast-card, .wx-commute-card, .wx-radar-card, .wx-insight-card, .wx-spc-card,
      .wx-livemap-card, .chat-panel, .wx-confidence-card, .wx-storm-path-timeline { grid-column: 1; grid-row: auto; }
      .wx-traffic-mini-card { display: none !important; } /* traffic now in top hero card */
      /* Storm Path Timeline: the desktop card (above) is hidden on mobile;
         this mobile-only twin (same data/endpoint, same primary-cell
         selection + shared modal as desktop) shows instead, directly under
         Current Conditions via DOM order. Same premium card look as
         desktop — status line, primary-cell summary, compact hazard chips,
         a short 3-point timeline bar, then "VIEW FULL TIMELINE" opens the
         identical shared modal desktop uses (full path + picker). */
      .wx-storm-path-timeline-mobile { display: block; grid-column: 1; grid-row: auto; }
      .wx-spt-mobile-status { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
      .wx-spt-mobile-primary-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
      .wx-spt-mobile-detail-src { font-size: 9px; color: rgba(58,197,232,0.45); margin-top: 4px; }
      /* Fishing/water: collapsed behind a compact summary row by default on
         mobile so it doesn't dominate the Current Conditions card. */
      .wx-fishing-summary-row {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin-top: 8px; border-top: 1px solid rgba(58,197,232,0.09); padding-top: 7px;
        cursor: pointer;
      }
      .wx-fishing-summary-text { font-size: 10px; color: rgba(180,220,240,0.85); }
      .wx-fishing-toggle-btn {
        flex: none; font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .05em;
        padding: 5px 8px; border-radius: 4px; cursor: pointer;
        background: var(--theme-button-fill); border: 1px solid var(--theme-accent-mid); color: var(--theme-accent);
      }
      .wx-fishing-body { display: none; }
      .wx-fishing-body.wx-fishing-body-expanded { display: block; }
      /* Mobile: collapsed by default, lazy-load the map only when tapped open. */
      .wx-livemap-card #wxLiveMapEl { height: 0; }
      .wx-livemap-card.livemap-expanded #wxLiveMapEl { height: 240px; }
      .wx-livemap-card .wx-livemap-open { display: inline-block; margin-top: 4px; }
      .wx-livemap-card.livemap-expanded .wx-livemap-open { display: none; }
      .wx-livemap-card:not(.livemap-expanded) .wx-livemap-controls,
      .wx-livemap-card:not(.livemap-expanded) .wx-livemap-src { display: none; }
      .wx-local-reports, .wx-storm-timing, .wx-forecast-card, .wx-commute-card { max-height: none; overflow-y: visible; }
      .wx-alerts-list { max-height: 120px; }
      .admin-metrics-grid { grid-template-columns: 1fr; }
      .admin-control-grid { grid-template-columns: 1fr; }
      #status { max-width: 38vw; font-size: 9px; }
      /* WP15: AI-first — Ask Weather chat is the centerpiece on mobile.
         Tall panel with an internally scrolling transcript. */
      /* Mobile bottom-gap fix: 420px/300px forced floors reserved a large blank rectangle
         under short chat transcripts (worse now that the collapsed Developer Bulletin editor
         is much shorter and no longer fills that reserved space). Size to content instead,
         with a modest minimum so the card doesn't look broken when nearly empty. */
      .chat-panel { min-height: 220px; max-height: none; border-radius: var(--card-radius);
                    border: 1px solid var(--card-border); }
      #chat { min-height: 120px; max-height: 60vh; }
      /* Keep the composer in normal chat-card flow. A page-level sticky composer
         floats over the developer bulletin and admin controls while scrolling. */
      .chat-input-row { position: static; bottom: auto; z-index: auto; }
      .wx-scroll { scroll-padding-bottom: calc(var(--bulletin-h) + env(safe-area-inset-bottom) + 12px); }
      textarea { font-size: 16px; }
      .wx-radar-controls { flex-wrap: wrap; }
      .wx-radar-btn { min-height: 44px; }
      #wxSpcToggleBtn { display: inline-flex; align-items: center; min-height: 44px; }
      .pwa-install-card { top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; grid-template-columns: 1fr; }
      .pwa-install-actions { justify-content: flex-start; }
      .pwa-install-actions button { min-height: 42px; }

      /* Phillip-only Mobile Space canary. The class is assigned by the
         server after immutable-account authorization; it never changes the
         anonymous, Member, or other Admin mobile shell. */
      body.mobile-space-canary {
        background: #010814 url('/static/dashboard/orion-command-center-space-v1.webp') center bottom / cover fixed no-repeat;
      }
      body.mobile-space-canary .app-shell,
      body.mobile-space-canary .main-area,
      body.mobile-space-canary .sidebar,
      body.mobile-space-canary .top-bar {
        background: transparent;
      }
      body.mobile-space-canary .loc-block {
        background: rgba(1, 9, 19, .72);
        border-bottom-color: rgba(89, 190, 220, .22);
        backdrop-filter: blur(12px) saturate(112%);
        -webkit-backdrop-filter: blur(12px) saturate(112%);
      }
      body.mobile-space-canary .wx-main-grid {
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
      }
      body.mobile-space-canary .wx-card-base,
      body.mobile-space-canary .chat-panel,
      body.mobile-space-canary .wx-storm-path-timeline-mobile,
      body.mobile-space-canary .wx-livemap-card {
        background: linear-gradient(145deg, rgba(2, 13, 25, .82), rgba(3, 10, 20, .58));
        border-color: rgba(89, 190, 220, .24);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
        backdrop-filter: blur(10px) saturate(112%);
        -webkit-backdrop-filter: blur(10px) saturate(112%);
      }
      body.mobile-space-canary .wx-radar-card {
        border-color: rgba(86, 209, 244, .42);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .40), 0 0 22px rgba(32, 156, 214, .12);
      }
      body.mobile-space-canary .wx-card-title,
      body.mobile-space-canary .orion-ai-kicker,
      body.mobile-space-canary .top-brand-mob {
        color: #84e3fb;
        text-shadow: 0 0 14px rgba(58, 197, 232, .24);
      }
    }
    @media (max-width: 500px) {
      /* This SEEDS the reserved-space value only for the instant before
         _updateBulletinHeightVar() first measures the real box — the
         mobile panel's height is intrinsic now (no fixed height/
         min-height), so this constant can't drift from the true rendered
         height the way a forced min-height once did; the seed is
         approximate on purpose (the restored 4-row card is taller than the
         earlier 2-row compressed ticker, so this was raised to roughly
         match a typical 2-line alert message). */
      :root { --bulletin-h: 108px; }
      .account-btn { max-width: 92px; min-height: 34px; }
      /* WP15: keep the chat tall on phones; transcript scrolls internally */
      .chat-panel { min-height: 220px; max-height: none; }
      #chat { min-height: 120px; max-height: 55vh; }
      /* WP15: compact current conditions — hide lower-priority rows,
         shrink the source footer, keep temp/condition/feels-like/humidity/
         wind/precip front and center. */
      .wx-detail-low { display: none; }
      .wx-card-meta { font-size: 7px; margin-top: 8px; }
      /* WP15: larger, less-cramped chat text on phones */
      .msg { font-size: 13.5px; line-height: 1.72; }
      .msg.bot { padding: 10px 0; }
      .wx-hero { padding: 12px 14px; }
      .wx-forecast-body { max-height: 160px; }
      .wx-temp { font-size: 44px; margin: 6px 0 4px; }
      .wx-condition { margin: 2px 0 8px; }
      .wx-detail-grid { grid-template-columns: 1fr; gap: 0; }
      .wx-forecast-row { align-items: flex-start; flex-wrap: wrap; }
      .wx-forecast-cond { order: 3; flex-basis: 100%; padding: 3px 0 0; text-align: left; }
      .wx-forecast-pop { margin-left: auto; }
      /* ── Mobile bulletin: restored CARD layout, desktop colors reused ──
         Old mobile design (per Phillip's reference screenshot): a stacked
         card, not a ticker strip. Rows, top to bottom:
           1. identity kicker ("ORION WX WEATHER BULLETIN")
           2. location ("Chattanooga, TN")
           3. [NWS OFFICIAL badge] [EVENT BADGE, e.g. "FLOOD WATCH"]
           4. full official alert sentence — scrolls horizontally (single
              line) only when it's actually too long to fit; short
              messages stay fully static
         CHECKED time and HIDE sit to the right as absolutely-positioned
         overlays (the card's simple vertical flow never has to share a row
         with them, avoiding fragile grid-splitting across the two DOM
         siblings — .wx-bulletin-identity and #wxBulletinUpdated — that
         would otherwise need to interleave onto the same two rows).
         display:block (not grid) is the whole trick: kicker and location
         are separate block-level children of .wx-bulletin-identity, so
         they ALREADY stack as two lines with zero extra CSS — this is
         exactly how desktop's own unmodified markup behaves before any
         media query applies. No color/background/border/box-shadow is
         restated anywhere in this block; every color the card shows comes
         from the same desktop ".wx-ticker-wrap"/".bulletin-*"/
         ".bulletin-kicker-*" rules further up this stylesheet, via the
         ordinary CSS cascade. */
      .wx-ticker-wrap {
        display: block; min-height: 0;
        padding: 10px calc(58px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
      }
      .wx-bulletin-identity { min-width: 0; }
      .wx-bulletin-kicker { display: block; font-size: 11px; margin-bottom: 3px; }
      .wx-bulletin-location {
        display: block; font-size: 13px; line-height: 1.25; margin-bottom: 5px;
        white-space: normal; overflow: visible; text-overflow: clip;
      }
      .wx-ticker {
        display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
        min-width: 0; overflow: visible;
      }
      .wx-bulletin-provider { display: inline-flex; align-items: center; flex: none; margin-bottom: 0; white-space: nowrap; }
      /* The event badge is populated (and made visible) only when
         updateWeatherBulletin() has a real alert to show — see
         _wxApplyMobileBulletinEvent(). */
      .wx-bulletin-event { flex: none; margin-bottom: 0; white-space: nowrap; }
      /* flex-basis:100% forces the message onto its OWN line after the
         badges above, regardless of how much width they use — no wrapper
         element needed. */
      .wx-bulletin-message {
        flex: 1 1 100%; min-width: 0; margin-top: 2px;
        white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4;
      }
      /* Long-message marquee — everything else in the card (branding,
         checked time, location, badges, HIDE) stays static; only THIS
         element scrolls, and only when _wxRenderMobileBulletinMarquee()
         (argus-wx-web.py JS) has confirmed the text actually overflows.
         Dedicated outer viewport (overflow:hidden, single line) + inner
         track (width:max-content, so it is exactly as wide as its real
         content, never clipped or wrapped). No clamping technique of any
         kind is used anywhere here — this is a transform animation over a
         nowrap track, not a text truncation technique. */
      .wx-bulletin-message.wx-mobile-bulletin-message-viewport {
        flex: 1 1 100%; min-width: 0; margin-top: 2px; line-height: 1.4;
        white-space: nowrap; overflow: hidden; text-overflow: clip;
      }
      .wx-mobile-bulletin-message-track {
        display: inline-flex; width: max-content; will-change: transform;
      }
      .wx-mobile-bulletin-message-track span { white-space: nowrap; }
      /* translate3d (not translateX) is used specifically for Safari/WebKit
         GPU-compositing reliability — matches the requested Safari-safe
         pattern. The track holds the message TWICE only once this class is
         present (see the JS overflow check), so sliding by exactly -50% of
         the track's own (doubled) width produces a seamless, gapless loop. */
      .wx-mobile-bulletin-message-track.wx-mobile-bulletin-marquee-active {
        animation: wxMobileBulletinMarquee 22s linear infinite;
      }
      @keyframes wxMobileBulletinMarquee {
        0%   { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-50%, 0, 0); }
      }
      /* Reduced-motion: JS never builds a track/duplicate at all for these
         users (see _wxRenderMobileBulletinMarquee) — plain static text,
         ellipsized on the same single-line, overflow:hidden viewport. */
      .wx-bulletin-message.wx-mobile-bulletin-reduced-motion { text-overflow: ellipsis; }
      @media (prefers-reduced-motion: reduce) {
        .wx-mobile-bulletin-message-track { animation: none !important; }
      }
      .wx-bulletin-updated {
        position: absolute; top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(58px + env(safe-area-inset-right)); text-align: right;
      }
      /* Mobile Developer Bulletin — tighter, centered title, less unused red space.
         Single centered column; close button pinned to the corner so it costs no row. */
      #wxDevBulletin.dev-bulletin-visible {
        grid-template-columns: 1fr; gap: 3px; min-height: 0; text-align: center;
        padding: 7px 30px calc(8px + env(safe-area-inset-bottom));
      }
      #wxDevBulletin .wx-bulletin-identity,
      #wxDevBulletin .wx-ticker,
      #wxDevBulletin .wx-bulletin-updated { grid-column: 1; }
      #wxDevBulletin .wx-bulletin-location { text-align: center; white-space: normal; line-height: 1.2; font-size: 13px; }
      #wxDevBulletin .wx-bulletin-message { text-align: center; }
      #wxDevBulletin .wx-bulletin-updated {
        display: flex; flex-direction: row; align-items: center; justify-content: center;
        gap: 8px; flex-wrap: wrap;
      }
      #wxDevBulletin .db-disclaimer-tag, #wxDevBulletin .db-exp { display: inline; margin: 0; }
      #wxDevBulletin .dev-bulletin-close {
        position: absolute; top: 4px; right: 10px; margin-top: 0; z-index: 1;
      }
    }
    /* Official NWS bulletin hide/show toggle */
    body.official-bulletin-hidden #wxBulletinBar { display: none !important; }
    /* State B — official hidden, dev hidden: sidebar flush (0), main-area reserves room for
       the slim restore strip only. */
    body.official-bulletin-hidden .sidebar { padding-bottom: 0; }
    body.official-bulletin-hidden .main-area { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    /* State D — official hidden, dev visible: the Developer Bulletin slides down to the very
       bottom (it normally floats above the official bar at bottom: var(--bulletin-h)) so there
       is no dead gap below it. */
    body.official-bulletin-hidden #wxDevBulletin.dev-bulletin-visible { bottom: 0; }
    /* Lift the restore strip just above the dev bulletin so it stays tappable in State D. */
    body.official-bulletin-hidden.dev-bulletin-open #wxBulletinRestoreBar { bottom: calc(var(--bulletin-h) + env(safe-area-inset-bottom)); }
    body.official-bulletin-hidden.dev-bulletin-open .main-area { padding-bottom: calc(var(--bulletin-h) + 18px + env(safe-area-inset-bottom)) !important; }
    #wxBulletinToggleBtn {
      position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
      background: rgba(7,20,36,0.55); border: 1px solid rgba(58,197,232,0.50); border-radius: 3px;
      color: rgba(180,220,245,0.80); cursor: pointer; z-index: 41;
      font: 700 7px/1.4 "JetBrains Mono","Consolas",ui-monospace,monospace;
      letter-spacing: 0.09em; padding: 2px 6px; text-transform: uppercase;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    #wxBulletinToggleBtn:hover { color: #fff; border-color: var(--theme-accent); background: rgba(7,20,36,0.85); }
    #wxBulletinRestoreBar {
      display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 39;
      height: 16px; cursor: pointer; align-items: center; justify-content: flex-end;
      padding: 0 10px; background: rgba(7,20,36,0.55);
      border-top: 1px solid rgba(64,201,119,0.10);
    }
    body.official-bulletin-hidden #wxBulletinRestoreBar { display: flex; }
    #wxBulletinRestoreBar span {
      color: rgba(150,190,218,0.45); font: 700 7px/1 "JetBrains Mono","Consolas",ui-monospace,monospace;
      letter-spacing: 0.10em; text-transform: uppercase;
    }
    #wxBulletinRestoreBar:hover span { color: rgba(225,243,255,0.85); }
    /* ── Desktop palette compatibility layer ─────────────────────────────
       Color-only overlay for the current production layout.  It deliberately
       leaves the sidebar, markup, responsive rules, and semantic weather
       colors intact. */
    @media (min-width: 721px) {
      html,
      html[data-orion-theme] {
        --desktop-bg: #020609;
        --desktop-shell: #03090e;
        --desktop-panel: #061018;
        --desktop-panel-raised: #08151d;
        --desktop-control: #091821;
        --desktop-control-hover: #0d202a;
        --desktop-border: rgba(71,159,190,0.20);
        --desktop-border-active: rgba(48,198,235,0.55);
        --desktop-text: #e8f2f6;
        --desktop-text-secondary: #9aadb7;
        --desktop-text-muted: #627680;
        --desktop-cyan: #23bfe8;
        --desktop-cyan-soft: rgba(35,191,232,0.12);
        --bg: var(--desktop-bg);
        --surface: var(--desktop-shell);
        --surface-hi: var(--desktop-panel-raised);
        --card-bg: rgba(6,16,24,0.94);
        --card-border: var(--desktop-border);
        --text: var(--desktop-text);
        --text-secondary: var(--desktop-text-secondary);
        --text-muted: var(--desktop-text-muted);
        --cyan: var(--desktop-cyan);
        --orion-glow-top: rgba(3,11,18,0.38);
        --orion-glow-left: rgba(2,8,13,0.30);
        --orion-glow-right: rgba(7,10,19,0.18);
        --orion-glow-bottom: rgba(1,3,6,0.98);
        --orion-scanline: rgba(82,190,232,0.003);
      }
      body, .app-shell { background: var(--desktop-bg); }
      .app-shell > aside.sidebar {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
      }
      body.sidebar-collapsed { --sidebar-w: 0px; }
      .main-area {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
      }
      .top-brand-desktop { display: block; }
      .top-bar { background: var(--desktop-shell); border-bottom-color: rgba(71,159,190,0.14); }
      .wx-card-base,
      .chat-panel,
      .wx-radar-site-panel,
      .wx-radar-layers-panel,
      .wx-storm-dna-panel {
        background: var(--desktop-panel);
        border-color: var(--desktop-border);
        box-shadow: 0 4px 20px rgba(0,0,0,0.42), inset 0 1px 0 rgba(232,242,246,0.025);
      }
      .wx-card-base:hover,
      .chat-panel:hover { border-color: rgba(71,159,190,0.28); }
      .sidebar input,
      .sidebar select,
      .top-bar input,
      .top-bar select,
      .chat-panel input,
      .chat-panel select,
      .chat-panel textarea,
      .wx-radar-site-search,
      .wx-radar-opacity-row select {
        background: var(--desktop-control);
        border-color: var(--desktop-border);
        color: var(--desktop-text);
      }
      .sidebar input:focus,
      .sidebar select:focus,
      .top-bar input:focus,
      .top-bar select:focus,
      .chat-panel input:focus,
      .chat-panel select:focus,
      .chat-panel textarea:focus,
      .wx-radar-site-search:focus,
      .wx-radar-opacity-row select:focus {
        border-color: var(--desktop-border-active);
        box-shadow: 0 0 0 2px var(--desktop-cyan-soft);
      }
      .sidebar button:hover,
      .top-bar button:hover,
      .chat-panel button:hover,
      .wx-radar-site-btn:hover,
      .wx-radar-chip:hover { background-color: var(--desktop-control-hover); }
    }
    /* DESKTOP_COMMAND_CENTER_START */
    /* ── Public desktop command center ───────────────────────────────────
       This layout keeps every production card ID and event handler, but
       composes them into explicit center/right stacks plus content-driven
       primary and secondary sections. Mobile/tablet remain untouched. */
    @media (min-width: 1200px) {
      body.desktop-command-center .wx-main-grid {
        grid-template-columns: clamp(240px, 16vw, 310px) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 14px;
        padding: 14px 18px calc(var(--bulletin-h) + 24px);
        align-items: start;
      }
      body.desktop-command-center .chat-panel.orion-ai-panel {
        grid-column: 1; grid-row: 1; min-height: 0; max-height: none; align-self: start;
      }
      body.desktop-command-center .wx-ccc-workspace {
        grid-column: 2; grid-row: 1; display: grid; gap: 12px; min-width: 0;
        align-content: start;
      }
      body.desktop-command-center .wx-ccc-workspace-top {
        display: grid;
        grid-template-columns: minmax(560px, 1fr) clamp(240px, 17vw, 320px);
        gap: 14px; min-width: 0; align-items: start;
      }
      body.desktop-command-center .wx-ccc-center-stack {
        grid-column: 1; grid-row: 1; display: grid; gap: 12px; min-width: 0;
      }
      body.desktop-command-center .wx-ccc-right-stack {
        grid-column: 2; grid-row: 1; display: grid; gap: 12px; min-width: 0; align-content: start;
      }
      body.desktop-command-center .wx-radar-card {
        grid-column: auto; grid-row: auto; min-height: clamp(580px, 61vh, 660px);
        box-shadow: 0 12px 40px rgba(0,0,0,.52), 0 0 0 1px rgba(58,197,232,.10);
      }
      body.desktop-command-center #wxRadarMap { min-height: 430px; }
      body.desktop-command-center .wx-storm-path-timeline {
        grid-column: auto; grid-row: auto; min-height: 64px; max-height: 170px;
        overflow: visible; padding-top: 12px; padding-bottom: 12px;
      }
      body.desktop-command-center .wx-storm-path-timeline:has(.wx-unavailable) {
        min-height: 64px; max-height: 76px;
      }
      body.desktop-command-center .wx-storm-timing,
      body.desktop-command-center .wx-alerts-card {
        grid-column: auto; grid-row: auto; align-self: start; min-height: 0;
        max-height: none; overflow: visible;
      }
      body.desktop-command-center .wx-local-reports,
      body.desktop-command-center .wx-forecast-card,
      body.desktop-command-center .wx-insight-card,
      body.desktop-command-center .wx-spc-card {
        grid-column: auto; grid-row: auto;
      }
      body.desktop-command-center .wx-alerts-list { max-height: 300px; }
      body.desktop-command-center .wx-alerts-card:has(.wx-detail) .wx-alerts-list,
      body.desktop-command-center .wx-alerts-card:has(.wx-unavailable) .wx-alerts-list {
        max-height: none; overflow: visible;
      }
      body.desktop-command-center .wx-ccc-primary-grid {
        display: grid;
        grid-template-columns: minmax(230px,.9fr) minmax(360px,1.5fr) repeat(3,minmax(220px,.9fr));
        gap: 12px; align-items: start; min-width: 0;
      }
      body.desktop-command-center .wx-ccc-primary-grid > * {
        grid-column: auto; grid-row: auto; align-self: start; min-width: 0;
        min-height: 0; max-height: none; overflow: visible;
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-hero {
        background: linear-gradient(160deg, rgba(7,20,34,.96), rgba(4,13,24,.96));
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-temp {
        font-size: 48px; margin: 8px 0 4px;
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-condition {
        font-size: 15px; margin-bottom: 8px;
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-detail-grid {
        grid-template-columns: 1fr; gap: 0; margin-top: 8px;
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-detail-row {
        font-size: 12px; padding: 4px 0;
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-card-meta { display: none; }
      body.desktop-command-center .wx-forecast-body {
        max-height: none; overflow: visible;
      }
      body.desktop-command-center .wx-forecast-row {
        display: grid; grid-template-columns: minmax(92px,.75fr) minmax(150px,1.5fr) 80px 64px;
        gap: 8px; align-items: center; font-size: 13px;
      }
      body.desktop-command-center .wx-forecast-cond {
        padding: 0; text-align: left; font-size: 12px;
      }
      body.desktop-command-center .wx-forecast-pop,
      body.desktop-command-center .wx-forecast-temps { min-width: 0; }
      body.desktop-command-center .wx-spc-day-block { padding: 6px 0; }
      body.desktop-command-center .wx-spc-day-block.wx-spc-quiet .wx-spc-severe,
      body.desktop-command-center .wx-spc-day-block.wx-spc-quiet .wx-spc-meaning,
      body.desktop-command-center .wx-spc-day-block.wx-spc-quiet .wx-spc-hazards { display: none; }
      body.desktop-command-center .wx-ccc-more {
        grid-column: 1 / -1; grid-row: 2; border: 1px solid var(--desktop-border);
        border-radius: 8px; background: rgba(4,13,24,.78); overflow: clip;
      }
      body.desktop-command-center .wx-ccc-more > summary {
        min-height: 48px; display: flex; align-items: center; justify-content: space-between;
        padding: 0 16px; cursor: pointer; color: var(--desktop-cyan);
        font: 700 12px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .10em;
        list-style: none;
      }
      body.desktop-command-center .wx-ccc-more > summary::-webkit-details-marker { display: none; }
      body.desktop-command-center .wx-ccc-more > summary::after { content: "[ EXPAND ]"; font-size: 10px; }
      body.desktop-command-center .wx-ccc-more[open] > summary::after { content: "[ COLLAPSE ]"; }
      body.desktop-command-center .wx-ccc-more-grid {
        display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px;
        padding: 0 14px 14px; align-items: start;
      }
      body.desktop-command-center .wx-ccc-more-grid > * {
        grid-column: auto; grid-row: auto; min-height: 0; max-height: none; overflow: visible;
      }
      body.desktop-command-center .wx-ccc-more-grid .wx-livemap-card { grid-column: 1 / -1; }
      body.desktop-command-center .wx-ccc-more-grid #wxLiveMapEl { min-height: 320px; }
      body.desktop-command-center .wx-ccc-secondary-card {
        border: 1px solid var(--desktop-border); border-radius: 7px;
        background: var(--desktop-panel); padding: 14px 16px; min-width: 0;
      }
      body.desktop-command-center .wx-ccc-secondary-title {
        margin-bottom: 8px; color: var(--desktop-cyan);
        font: 700 12px/1.3 "JetBrains Mono","Consolas",monospace; letter-spacing: .08em;
      }
      body.desktop-command-center .wx-card-base,
      body.desktop-command-center .chat-panel { padding: 14px 16px; }
      body.desktop-command-center .wx-card-title {
        margin-bottom: 9px; font-size: 13px; letter-spacing: .09em;
      }
      body.desktop-command-center .wx-detail,
      body.desktop-command-center .wx-unavailable,
      body.desktop-command-center .wx-timing-summary { font-size: 13px; line-height: 1.5; }
      body.desktop-command-center .chat-panel-hdr {
        padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
      }
      body.desktop-command-center .chat-panel-hdr .cph-btns { display: none; }
      body.desktop-command-center .orion-ai-kicker {
        display: block; color: var(--desktop-cyan); font-size: 14px; letter-spacing: .12em;
      }
      body.desktop-command-center .orion-ai-title {
        display: block; color: var(--desktop-text-muted); font-size: 11px; letter-spacing: .08em; margin-top: 4px;
      }
      body.desktop-command-center .wx-ccc-ai-intel { display: grid; gap: 10px; padding: 0 14px 10px; }
      body.desktop-command-center .wx-ccc-ai-section {
        border: 1px solid rgba(58,197,232,.16); border-radius: 7px;
        background: rgba(9,27,43,.56); padding: 11px 12px;
      }
      body.desktop-command-center .wx-ccc-ai-section h3 {
        margin: 0 0 7px; color: var(--desktop-text);
        font: 700 12px/1.2 "JetBrains Mono","Consolas",monospace; letter-spacing: .07em;
      }
      body.desktop-command-center .wx-ccc-ai-copy {
        color: var(--desktop-text-muted); font-size: 13px; line-height: 1.45;
      }
      body.desktop-command-center .wx-ccc-ai-action,
      body.desktop-command-center .wx-ccc-suggestion {
        width: 100%; min-height: 36px; margin-top: 8px; border: 1px solid var(--desktop-border);
        border-radius: 5px; background: var(--desktop-control); color: var(--desktop-cyan);
        font: 700 11px/1.25 "JetBrains Mono","Consolas",monospace; cursor: pointer; text-align: left;
      }
      body.desktop-command-center .wx-ccc-ai-action { text-align: center; }
      body.desktop-command-center .wx-ccc-suggestions { display: grid; gap: 6px; }
      body.desktop-command-center .wx-ccc-ask-label {
        padding: 2px 14px 0; color: var(--desktop-text);
        font: 700 12px/1.2 "JetBrains Mono","Consolas",monospace; letter-spacing: .07em;
      }
      body.desktop-command-center .wx-ccc-ai-suggestion-block {
        margin: 0 14px 14px;
      }
      body.desktop-command-center .orion-ai-panel #chat {
        min-height: 0; max-height: 145px; padding: 8px 14px; font-size: 14px; line-height: 1.5;
      }
      body.desktop-command-center .orion-ai-panel .chat-input-hint { display: none; }
      body.desktop-command-center .orion-ai-panel .chat-input-row { padding: 10px 14px 14px; }
      body.desktop-command-center .orion-ai-panel .chat-input-row textarea { min-height: 42px; font-size: 14px; }
      body.desktop-command-center .orion-ai-panel .chat-input-row button { min-height: 42px; min-width: 68px; }
      body.desktop-command-center #wxDevLoginTrigger,
      body.desktop-command-center #wxDevBadge { display: none !important; }
      body.desktop-command-center #wxCompactAdminBtn { display: none; min-height: 36px; }
      body.desktop-command-center #wxCompactAdminBtn.wx-ccc-admin-available { display: inline-flex; }
      body.desktop-command-center .wx-ccc-admin-scrim {
        display: none; position: fixed; inset: 0; z-index: 318; background: rgba(0,0,0,.58);
      }
      body.desktop-command-center.wx-ccc-admin-open .wx-ccc-admin-scrim { display: block; }
      body.desktop-command-center #wxDevBulletinPanel.dev-panel-visible {
        display: none; position: fixed; top: 0; right: 0; bottom: 0; z-index: 320;
        width: min(520px, 92vw); margin: 0; padding: 18px; overflow-y: auto;
        background: rgba(3,11,20,.98); border-left: 1px solid var(--desktop-border-active);
        box-shadow: -18px 0 50px rgba(0,0,0,.62);
      }
      body.desktop-command-center.wx-ccc-admin-open #wxDevBulletinPanel.dev-panel-visible { display: block; }
      body.desktop-command-center.wx-ccc-admin-open #wxDevBulletinPanel.dev-panel-visible #devBulletinBody {
        display: block; margin-top: 10px;
      }
      body.desktop-command-center #wxDevBulletinPanel.dev-panel-visible #devBulletinHeader {
        min-height: 44px; padding: 11px 12px; border: 1px solid rgba(58,197,232,.24);
        border-radius: 6px; background: rgba(8,24,38,.82); color: var(--desktop-cyan);
      }
    }
    @media (min-width: 1200px) and (max-width: 1499px) {
      body.desktop-command-center .wx-main-grid {
        grid-template-columns: minmax(240px,260px) minmax(0,1fr);
        gap: 10px; padding-left: 12px; padding-right: 12px;
      }
      body.desktop-command-center .wx-ccc-workspace-top {
        grid-template-columns: minmax(520px,1fr) minmax(240px,270px);
        gap: 10px;
      }
      body.desktop-command-center .wx-radar-card { min-height: 540px; }
      body.desktop-command-center .wx-ccc-primary-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
      }
      body.desktop-command-center .wx-ccc-primary-grid .wx-forecast-card { grid-column: span 2; }
      body.desktop-command-center .wx-ccc-more-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (min-width: 1200px) {
      html { background: #02070c; }
      body.desktop-command-center {
        position: relative;
        background-color: #02070c !important;
        background-image:
          linear-gradient(180deg, rgba(2,7,12,.12) 0%, rgba(2,7,12,.30) 62%, rgba(2,7,12,.62) 100%),
          radial-gradient(circle at 50% 30%, rgba(2,7,12,.08), rgba(2,7,12,.46) 76%),
          url("/static/dashboard/orion-command-center-space-v1.webp") !important;
        background-position: center, center, center center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: fixed !important;
      }
      body.desktop-command-center .app-shell {
        background: transparent !important;
      }
      body.desktop-command-center .topbar,
      body.desktop-command-center #wxBulletinBar {
        background: rgba(2,9,15,.90);
        backdrop-filter: blur(10px) saturate(112%);
      }
      body.desktop-command-center .wx-main-grid {
        display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto;
        gap: 14px; padding: 14px 18px calc(var(--bulletin-h) + 24px);
      }
      body.desktop-command-center .wx-ccc-workspace {
        grid-column: 1; grid-row: 1; display: block; min-width: 0;
      }
      body.desktop-command-center .wx-ccc-snap-toolbar {
        display: flex; align-items: center; gap: 8px; margin-left: 8px;
      }
      body.desktop-command-center .wx-ccc-layout-btn {
        min-height: 34px; padding: 0 11px; border: 1px solid rgba(58,197,232,.32);
        border-radius: 6px; background: rgba(4,16,26,.84); color: #8ce8ff;
        font: 700 10px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .06em;
        cursor: pointer; white-space: nowrap;
      }
      body.desktop-command-center .wx-ccc-layout-btn:hover,
      body.desktop-command-center .wx-ccc-layout-btn:focus-visible {
        border-color: rgba(58,197,232,.72); background: rgba(9,34,53,.94); color: #fff;
        outline: none;
      }
      /* Compact desktop controls share one restrained ORION hierarchy. These
         overrides are intentionally scoped to the command center so the mobile
         shell and Maps controls retain their established sizes and behavior. */
      body.desktop-command-center.cardless-desktop-authorized :is(
        .top-feedback-btn,
        .cp-btn,
        .wx-ccc-layout-btn,
        .wx-ccc-ai-action,
        .wx-ccc-suggestion,
        .wx-stm-viewfull-btn,
        .wx-radar-chip,
        .wx-radar-site-entry,
        #sendBtn
      ) {
        min-height: 38px;
        padding: 8px 14px;
        border: 1px solid rgba(78, 186, 220, .28);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(12, 32, 44, .88), rgba(5, 18, 27, .92));
        color: #b9e9f6;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 16px rgba(0,0,0,.18);
        font-weight: 700;
        letter-spacing: .045em;
        transition:
          color 140ms ease,
          border-color 140ms ease,
          background 140ms ease,
          box-shadow 140ms ease,
          transform 100ms ease;
      }
      body.desktop-command-center.cardless-desktop-authorized :is(
        .top-feedback-btn,
        .cp-btn,
        .wx-ccc-layout-btn,
        .wx-ccc-ai-action,
        .wx-ccc-suggestion,
        .wx-stm-viewfull-btn,
        .wx-radar-chip,
        .wx-radar-site-entry,
        #sendBtn
      ):hover {
        color: #effcff;
        border-color: rgba(71, 211, 245, .62);
        background: linear-gradient(180deg, rgba(14, 43, 58, .96), rgba(6, 25, 36, .98));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(35,191,232,.10);
      }
      body.desktop-command-center.cardless-desktop-authorized :is(
        .top-feedback-btn,
        .cp-btn,
        .wx-ccc-layout-btn,
        .wx-ccc-ai-action,
        .wx-ccc-suggestion,
        .wx-stm-viewfull-btn,
        .wx-radar-chip,
        .wx-radar-site-entry,
        #sendBtn
      ):active {
        transform: translateY(1px);
        box-shadow: inset 0 1px 4px rgba(0,0,0,.32);
      }
      body.desktop-command-center.cardless-desktop-authorized :is(
        .top-feedback-btn,
        .cp-btn,
        .wx-ccc-layout-btn,
        .wx-ccc-ai-action,
        .wx-ccc-suggestion,
        .wx-stm-viewfull-btn,
        .wx-radar-chip,
        .wx-radar-site-entry,
        #sendBtn
      ):focus-visible {
        outline: 2px solid rgba(112, 225, 251, .92);
        outline-offset: 2px;
        border-color: rgba(112, 225, 251, .76);
        box-shadow: 0 0 0 4px rgba(35,191,232,.12);
      }
      body.desktop-command-center.cardless-desktop-authorized :is(
        .top-feedback-btn,
        .cp-btn,
        .wx-ccc-layout-btn,
        .wx-ccc-ai-action,
        .wx-ccc-suggestion,
        .wx-stm-viewfull-btn,
        .wx-radar-chip,
        .wx-radar-site-entry,
        #sendBtn
      ):disabled {
        cursor: not-allowed;
        opacity: .48;
        transform: none;
        box-shadow: none;
      }
      body.desktop-command-center.cardless-desktop-authorized :is(#sendBtn, .wx-ccc-ai-action, #wxDoneLayoutBtn) {
        border-color: rgba(57, 205, 240, .55);
        background: linear-gradient(135deg, rgba(18, 124, 160, .92), rgba(7, 65, 94, .96));
        color: #f2fdff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 20px rgba(14,129,169,.18);
      }
      body.desktop-command-center.cardless-desktop-authorized :is(.wx-ccc-suggestion, .cp-btn) {
        min-height: 36px;
        padding: 7px 12px;
        background: rgba(4, 18, 28, .66);
        color: #8fc9d8;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
      }
      body.desktop-command-center.cardless-desktop-authorized :is(#wxResetLayoutBtn, .btn-danger, .danger, [data-variant="danger"]) {
        border-color: rgba(241, 104, 92, .42);
        background: linear-gradient(180deg, rgba(73, 25, 27, .82), rgba(38, 13, 17, .90));
        color: #ffb5ab;
      }
      body.desktop-command-center.cardless-desktop-authorized :is(#wxResetLayoutBtn, .btn-danger, .danger, [data-variant="danger"]):hover {
        border-color: rgba(255, 126, 112, .72);
        background: linear-gradient(180deg, rgba(91, 30, 32, .92), rgba(49, 16, 20, .96));
        color: #ffe4df;
      }
      /* Keep a stable scrollbar gutter while making internal command-center
         scrollbars visually dormant. A brief JS-applied is-scrolling class
         covers wheel/touchpad/keyboard activity that does not imply hover. */
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface {
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface::-webkit-scrollbar-track {
        background: transparent;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: transparent;
        background-clip: padding-box;
        transition: background-color 180ms ease;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface:is(:hover, :focus-within, .is-scrolling) {
        scrollbar-color: rgba(74, 197, 229, .58) transparent;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface:is(:hover, :focus-within, .is-scrolling)::-webkit-scrollbar-thumb {
        background: rgba(74, 197, 229, .58);
        background-clip: padding-box;
      }
      body.desktop-command-center.cardless-desktop-authorized .wx-ccc-scroll-surface:is(:hover, :focus-within, .is-scrolling)::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 225, 248, .82);
        background-clip: padding-box;
      }
      body.desktop-command-center .wx-ccc-layout-actions { display: none; gap: 6px; }
      body.desktop-command-center.wx-ccc-customizing .wx-ccc-layout-actions { display: flex; }
      body.desktop-command-center.wx-ccc-customizing #wxCustomizeLayoutBtn { display: none; }
      body.desktop-command-center .wx-ccc-snap-grid {
        --wx-ccc-gap: 12px;
        display: grid; grid-template-columns: repeat(12,minmax(0,1fr));
        grid-auto-rows: 72px; gap: var(--wx-ccc-gap); position: relative; min-width: 0;
        align-items: stretch;
      }
      body.desktop-command-center.wx-ccc-customizing .wx-ccc-snap-grid {
        background-image:
          linear-gradient(rgba(58,197,232,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(58,197,232,.05) 1px, transparent 1px);
        background-size: calc((100% - 11 * var(--wx-ccc-gap)) / 12 + var(--wx-ccc-gap)) 84px;
        border-radius: 8px;
      }
      body.desktop-command-center .wx-ccc-snap-card {
        grid-column: calc(var(--wx-ccc-x) + 1) / span var(--wx-ccc-w) !important;
        grid-row: calc(var(--wx-ccc-y) + 1) / span var(--wx-ccc-h) !important;
        position: relative; min-width: 0; min-height: 0 !important; height: 100%;
        max-height: none !important; align-self: stretch !important; overflow: auto;
        background: rgba(3,12,20,.82);
        backdrop-filter: blur(8px) saturate(110%);
        box-shadow: 0 12px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.018);
        transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
      }
      body.desktop-command-center .wx-ccc-snap-card.wx-radar-card {
        display: flex; background: rgba(2,10,17,.90); overflow: hidden;
      }
      body.desktop-command-center .wx-ccc-snap-card.wx-radar-card #wxRadarMap {
        flex: 1 1 auto; min-height: 300px;
      }
      body.desktop-command-center .wx-ccc-snap-card.wx-storm-path-timeline {
        min-height: 0; max-height: none; overflow: auto;
      }
      body.desktop-command-center .wx-ccc-snap-card.wx-ccc-moving {
        z-index: 8; border-color: #3ac5e8; box-shadow: 0 0 0 2px rgba(58,197,232,.45), 0 18px 46px rgba(0,0,0,.58);
      }
      body.desktop-command-center .wx-ccc-drag-handle {
        display: none; position: absolute; z-index: 20; top: 7px; right: 7px;
        width: 46px; height: 30px; border: 1px solid rgba(58,197,232,.55);
        border-radius: 6px; background: rgba(4,19,31,.94); color: #8ce8ff;
        font: 700 9px/1 "JetBrains Mono","Consolas",monospace; letter-spacing: .05em;
        cursor: grab; touch-action: none;
      }
      body.desktop-command-center.wx-ccc-customizing .wx-ccc-drag-handle {
        display: inline-grid; place-items: center;
      }
      body.desktop-command-center .wx-ccc-drag-handle:focus-visible {
        outline: 2px solid #8ce8ff; outline-offset: 2px;
      }
      body.desktop-command-center .wx-ccc-snap-target {
        display: none; position: absolute; z-index: 2; pointer-events: none;
        border: 1px dashed rgba(58,197,232,.86); border-radius: 8px;
        background: rgba(58,197,232,.10);
      }
      body.desktop-command-center.wx-ccc-customizing .wx-ccc-snap-target.is-visible { display: block; }
      body.desktop-command-center .wx-ccc-layout-status {
        position: fixed; left: 50%; bottom: calc(var(--bulletin-h) + 18px); z-index: 330;
        transform: translateX(-50%); padding: 8px 12px; border-radius: 6px;
        border: 1px solid rgba(58,197,232,.38); background: rgba(2,10,17,.94);
        color: #bceeff; font: 700 11px/1.3 "JetBrains Mono","Consolas",monospace;
      }
      body.desktop-command-center .wx-ccc-more {
        grid-column: 1; grid-row: 2; background: rgba(3,12,20,.82);
        backdrop-filter: blur(8px) saturate(110%);
      }
      @media (prefers-reduced-motion: reduce) {
        body.desktop-command-center .wx-ccc-snap-card { transition: none; }
      }
    }
    /* CARDLESS_DESKTOP_CSS_START */
    @media (min-width: 1200px) {
      body.cardless-desktop-preview .wx-main-grid {
        padding: 8px 14px calc(var(--bulletin-h) + 18px);
      }
      body.cardless-desktop-preview .wx-ccc-snap-grid {
        --wx-ccc-gap: 8px;
        grid-auto-rows: 66px;
        align-items: stretch;
      }
      body.cardless-desktop-preview .wx-ccc-snap-card {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        overflow: auto;
      }
      body.cardless-desktop-preview .wx-ccc-snap-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-top: 1px solid rgba(89, 190, 220, .17);
        background: linear-gradient(145deg, rgba(2, 10, 18, .48), rgba(2, 9, 16, .12) 72%);
      }
      body.cardless-desktop-preview .wx-ccc-snap-card > * {
        position: relative;
        z-index: 1;
      }
      body.cardless-desktop-preview #wxOrionAI,
      body.cardless-desktop-preview #wxCurrent,
      body.cardless-desktop-preview #wxStormTiming,
      body.cardless-desktop-preview #wxAlerts {
        padding-left: 16px;
        padding-right: 16px;
      }
      body.cardless-desktop-preview #wxRadar {
        border: 1px solid rgba(79, 183, 218, .28);
        border-radius: 6px;
        background: rgba(1, 8, 14, .64);
        box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
        overflow: hidden;
      }
      body.cardless-desktop-preview #wxRadar::before { display: none; }
      body.cardless-desktop-preview #wxStormPathTimeline {
        min-height: 0;
        max-height: none;
        padding: 10px 14px;
        overflow: hidden;
      }
      body.cardless-desktop-preview #wxStormPathTimeline:has(.wx-unavailable) {
        min-height: 0;
        max-height: none;
      }
      body.cardless-desktop-preview #wxForecast {
        padding: 12px 14px;
        overflow-x: auto;
        overflow-y: hidden;
      }
      body.cardless-desktop-preview #wxForecast .wx-forecast-body {
        min-width: 560px;
      }
      body.cardless-desktop-preview #wxForecast .wx-forecast-row {
        border-bottom-color: rgba(112, 172, 195, .12);
      }
      body.cardless-desktop-preview #wxSpcCard,
      body.cardless-desktop-preview #wxCommuteImpact,
      body.cardless-desktop-preview #wxModelConfidence {
        padding: 12px 14px;
      }
      body.cardless-desktop-preview .wx-card-title,
      body.cardless-desktop-preview .orion-ai-kicker {
        color: #75d8f3;
      }
      body.cardless-desktop-preview .wx-ccc-ai-section {
        border: 0;
        border-top: 1px solid rgba(89, 190, 220, .14);
        border-radius: 0;
        background: transparent;
        padding: 12px 0;
      }
      body.cardless-desktop-preview .wx-ccc-ai-suggestion-block {
        margin-left: 14px;
        margin-right: 14px;
      }
      body.cardless-desktop-preview .wx-ccc-suggestion,
      body.cardless-desktop-preview .wx-ccc-ai-action {
        border-color: rgba(89, 190, 220, .24);
        background: rgba(3, 17, 27, .54);
      }
      body.cardless-desktop-preview .wx-ccc-more {
        border: 0;
        border-top: 1px solid rgba(89, 190, 220, .17);
        border-radius: 0;
        background: rgba(2, 10, 18, .36);
        box-shadow: none;
        backdrop-filter: none;
      }
      body.cardless-desktop-preview.wx-ccc-customizing .wx-ccc-snap-card {
        border: 1px solid rgba(58, 197, 232, .42);
        border-radius: 7px;
        background: rgba(3, 12, 20, .82);
        box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
        backdrop-filter: blur(8px) saturate(110%);
      }
      body.cardless-desktop-preview.wx-ccc-customizing .wx-ccc-snap-card::before {
        display: none;
      }
      .wx-cardless-style-toggle {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px;
        border: 1px solid rgba(58, 197, 232, .25);
        border-radius: 6px;
        background: rgba(2, 10, 17, .78);
      }
      .wx-cardless-style-toggle > span {
        padding: 0 5px;
        color: #7293a2;
        font: 700 9px/1 "JetBrains Mono", "Consolas", monospace;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .wx-cardless-style-toggle button {
        min-height: 28px;
        padding: 0 9px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #7fa2b1;
        font: 700 9px/1 "JetBrains Mono", "Consolas", monospace;
        cursor: pointer;
      }
      .wx-cardless-style-toggle button[aria-pressed="true"] {
        background: rgba(33, 158, 196, .22);
        color: #b9f1ff;
        box-shadow: inset 0 0 0 1px rgba(79, 205, 239, .35);
      }
      .wx-cardless-style-toggle button:focus-visible {
        outline: 2px solid #8ce8ff;
        outline-offset: 2px;
      }
    }
    /* CARDLESS_DESKTOP_CSS_END */
    /* DESKTOP_COMMAND_CENTER_END */
    /* JS hooks */
    body.thinking #sendBtn { opacity: 0.42; }