html, body { height: 100%; margin: 0; font-family: 'Inter', sans-serif; background: #06090d; overflow: hidden; }
    #map { height: 100%; width: 100%; overflow: hidden; }
    .leaflet-container { overflow: hidden; }

    #radarSweep,
    #radarSweepDSM {
      position: absolute;
      left: 0;
      top: 0;
      width: 1200px;
      height: 1200px;
      margin-left: -600px;
      margin-top: -600px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 410;
      opacity: 0;
      transform-origin: 50% 50%;
      background: conic-gradient(
        from 0deg,
        rgba(80, 255, 170, 0.00) 0deg,
        rgba(80, 255, 170, 0.00) 336deg,
        rgba(80, 255, 170, 0.04) 344deg,
        rgba(120, 255, 190, 0.11) 350deg,
        rgba(185, 255, 220, 0.30) 356deg,
        rgba(80, 255, 170, 0.00) 360deg
      );
      filter: drop-shadow(0 0 8px rgba(120,255,190,0.14)) drop-shadow(0 0 16px rgba(120,255,190,0.07));
      mix-blend-mode: screen;
      animation: dvnRadarSweep 20s linear infinite;
    }

    #radarSweepDSM {
      animation-delay: -4s;
      filter: drop-shadow(0 0 10px rgba(120,220,255,0.22)) drop-shadow(0 0 18px rgba(120,220,255,0.10));
    }

    body.radar-sweep-hidden #radarSweep,
    body.radar-sweep-hidden #radarSweepDSM {
      display: none !important;
      opacity: 0 !important;
    }

    body.tb-low-power #radarSweep,
    body.tb-low-power #radarSweepDSM {
      display: none !important;
      opacity: 0 !important;
      animation: none !important;
    }

    body.tb-low-power .leaflet-interactive.alert-polygon-hover,
    body.tb-low-power .leaflet-interactive.alert-polygon-new {
      animation: none !important;
      filter: drop-shadow(0 0 4px rgba(255,209,102,0.78));
    }

    body.tb-low-power .ops-decision-pill,
    body.tb-low-power #bjBotPopup .bj-avatar-wrap,
    body.tb-low-power #bjBotPopup .bj-avatar {
      animation: none !important;
    }


    #radarSweep::after,
    #radarSweepDSM::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(160,255,215,0.10) 0, rgba(100,255,190,0.04) 2px, rgba(80,255,170,0.015) 6px, rgba(80,255,170,0.00) 42px);
    }

    @keyframes dvnRadarSweep {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .leaflet-control-layers,
    .legend,
    .status-box,
    .radar-control {
      background: #0d1218 !important;
      color: #eef3f8 !important;
      border: 1px solid #27303a !important;
      border-radius: 12px !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
      padding: 12px 14px;
      line-height: 1.4;
      font-size: 13px;
      box-sizing: border-box !important;
    }

    .status-box,
    .leaflet-control-layers-expanded,
    .legend {
      width: 260px !important;
      max-width: 260px !important;
      min-width: 260px !important;
      box-sizing: border-box !important;
    }

    .leaflet-control-layers {
      width: 260px !important;
      box-sizing: border-box !important;
    }

    .leaflet-control-layers label,
    .leaflet-control-layers-expanded,
    .leaflet-control-layers-list {
      color: #eef3f8 !important;
      background: #0d1218 !important;
    }

    .small { color: #aab7c4 !important; font-size: 12px; }
    .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }

    /* Alert polygon hover assist: makes overlapping watch/warning borders easier to read. */
    .leaflet-interactive.alert-polygon-hover {
      cursor: pointer;
      stroke-linejoin: round;
      animation: alertPolygonGlowPulse 0.85s ease-in-out infinite;
    }

    @keyframes alertPolygonGlowPulse {
      0%, 100% {
        filter: drop-shadow(0 0 4px rgba(255,255,255,0.96)) drop-shadow(0 0 9px rgba(255,209,102,0.82));
      }
      50% {
        filter: drop-shadow(0 0 7px rgba(255,255,255,1.0)) drop-shadow(0 0 17px rgba(255,209,102,1.0));
      }
    }

    /* New polygon assist: briefly pulses newly posted watch/warning polygons after a refresh. */
    .leaflet-interactive.alert-polygon-new {
      cursor: pointer;
      stroke-linejoin: round;
      animation: alertPolygonNewPulse 1s ease-in-out infinite;
    }

    @keyframes alertPolygonNewPulse {
      0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.98)) drop-shadow(0 0 12px rgba(255,209,102,0.88));
      }
      50% {
        filter: drop-shadow(0 0 10px rgba(255,255,255,1.0)) drop-shadow(0 0 24px rgba(255,209,102,1.0));
      }
    }

    /* Safari fallback: Safari is inconsistent with animated SVG drop-shadow filters
       on Leaflet vector paths. Use a heavier stroke/opacity pulse instead. */
    html.tb-safari .leaflet-interactive.alert-polygon-hover {
      filter: none !important;
      animation: alertPolygonGlowPulseSafari 0.85s ease-in-out infinite !important;
    }

    html.tb-safari .leaflet-interactive.alert-polygon-new {
      filter: none !important;
      animation: alertPolygonNewPulseSafari 1s ease-in-out infinite !important;
    }

    @keyframes alertPolygonGlowPulseSafari {
      0%, 100% {
        stroke-width: 4px;
        stroke-opacity: 0.95;
      }
      50% {
        stroke-width: 8px;
        stroke-opacity: 1;
      }
    }

    @keyframes alertPolygonNewPulseSafari {
      0%, 100% {
        stroke-width: 5px;
        stroke-opacity: 0.95;
      }
      50% {
        stroke-width: 10px;
        stroke-opacity: 1;
      }
    }

    .leaflet-tooltip.alert-hover-tooltip {
      background: rgba(10, 15, 22, 0.96);
      color: #f7fbff;
      border: 1px solid rgba(255, 209, 102, 0.95);
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.46), 0 0 12px rgba(255,209,102,0.20);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.02em;
      padding: 5px 9px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .leaflet-tooltip.alert-hover-tooltip::before {
      border-top-color: rgba(255, 209, 102, 0.95);
    }

    .radar-control label {
      display: block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 21px;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      margin-bottom: 6px;
      color: #eef3f8 !important;
    }

    .radar-control {
      margin-bottom: 12px !important;
      width: 260px !important;
      max-width: 260px !important;
      min-width: 260px !important;
      box-sizing: border-box !important;
    }

    .radar-control input[type="range"] {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      accent-color: #e53935;
    }

    #radarOpacityValue {
      margin-top: 6px;
      color: #aab7c4 !important;
      font-size: 12px;
      font-weight: 700;
    }

    .leaflet-bottom.leaflet-right .leaflet-control-zoom {
      margin-bottom: 12px !important;
      margin-right: 10px !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      border-radius: 9px !important;
      overflow: hidden !important;
      background: rgba(13,18,24,0.94) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
    }

    .leaflet-control-zoom a {
      width: 42px !important;
      height: 34px !important;
      line-height: 32px !important;
      background: rgba(13,18,24,0.94) !important;
      color: #eef3f8 !important;
      border: 0 !important;
      font-family: 'Barlow Condensed', sans-serif !important;
      font-size: 22px !important;
      font-weight: 800 !important;
      text-shadow: none !important;
    }

    .leaflet-control-zoom a:hover {
      background: rgba(30,41,59,0.96) !important;
      color: #0b1620 !important;
    }

    .leaflet-control-zoom-in {
      border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    }

    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
      border-radius: 0 !important;
    }

    .leaflet-bottom .radar-control {
      width: auto !important;
      max-width: none !important;
      min-width: 0 !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .radar-opacity-toggle {
      width: 42px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(13,18,24,0.94);
      color: #eef3f8;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.6px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    }

    .radar-opacity-popout {
      position: absolute;
      right: 0;
      bottom: 40px;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 9px 8px;
      border-radius: 10px;
      background: rgba(13,18,24,0.96);
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: 0 6px 18px rgba(0,0,0,0.42);
    }

    .radar-control.is-open .radar-opacity-popout {
      display: flex;
    }

    .radar-opacity-popout label {
      margin: 0;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.7px;
      white-space: nowrap;
    }

    .radar-opacity-popout input[type="range"] {
      width: 28px;
      height: 110px;
      writing-mode: vertical-lr;
      direction: rtl;
      accent-color: #e53935;
    }

    .radar-opacity-popout #radarOpacityValue {
      margin: 0;
      min-width: 32px;
      text-align: center;
      color: #aab7c4 !important;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .collapsible-control {
      overflow: hidden;
    }

    .collapsible-control .control-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: transparent;
      border: 0;
      color: #eef3f8;
      padding: 0;
      margin: 0;
      cursor: pointer;
      text-align: left;
      font: inherit;
    }

    .collapsible-control .control-toggle:focus-visible {
      outline: 2px solid #53a7ff;
      outline-offset: 4px;
      border-radius: 8px;
    }

    .collapsible-control .control-toggle-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      line-height: 1;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #eef3f8;
    }

    .collapsible-control .control-toggle-icon {
      font-size: 16px;
      color: #aab7c4;
      transition: transform 0.18s ease;
      flex: 0 0 auto;
    }

    .collapsible-control .control-body {
      margin-top: 10px;
    }

    .collapsible-control.is-collapsed .control-body {
      display: none;
    }

    .collapsible-control.is-collapsed .control-toggle-icon {
      transform: rotate(-90deg);
    }

    .collapsible-control .control-body > :first-child {
      margin-top: 0 !important;
    }

    .status-box .status-title,
    .legend .legend-title {
      display: none;
    }

    .radar-control label {
      display: none;
    }

    #alertListPanel,
    #stormBrand {
      position: fixed;
      z-index: 1200;
      background: #0d1218 !important;
      color: #eef3f8 !important;
      border: 1px solid #27303a !important;
      border-radius: 12px !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
    }

    #alertListPanel {
      left: 12px;
      top: 118px;
      bottom: 74px;
      width: 390px;
      max-height: none;
      overflow-y: auto;
      padding: 12px 14px;
      line-height: 1.4;
      font-size: 13px;
      box-sizing: border-box;
    }

    #aiImpactSidebarFooter {
      position: fixed;
      left: 12px;
      right: 78px;
      bottom: 12px;
      width: auto;
      height: 54px;
      z-index: 1201;
      background: #0d1218 !important;
      color: #eef3f8 !important;
      border: 1px solid rgba(214,163,41,0.58) !important;
      border-left: 4px solid rgba(34,197,94,0.95) !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,209,102,0.08) !important;
      box-sizing: border-box;
      overflow: hidden;
      pointer-events: auto;
      transition: border-color .25s ease, box-shadow .25s ease;
    }

    #situationalBriefTicker {
      position: fixed;
      /* Streamlined alerts panel is 372px wide at left 12px; add the same 8px gap used above the Impact Confidence footer. */
      left: 392px;
      right: 78px;
      bottom: 86px;
      height: 36px;
      z-index: 1202;
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(180deg, rgba(13,18,24,.96), rgba(8,13,19,.96));
      color: #eef3f8;
      border: 1px solid rgba(126,195,255,.42);
      border-left: 4px solid #7ec3ff;
      border-radius: 10px;
      box-shadow: 0 9px 22px rgba(0,0,0,.38), 0 0 0 1px rgba(126,195,255,.08);
      overflow: hidden;
      pointer-events: none;
      box-sizing: border-box;
      padding: 0 10px;
    }

    #situationalBriefTicker .situational-brief-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #7ec3ff;
      font-weight: 900;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    #situationalBriefTicker .situational-brief-viewport {
      position: relative;
      overflow: hidden;
      min-width: 0;
      flex: 1 1 auto;
      height: 100%;
      display: flex;
      align-items: center;
    }

    #situationalBriefTicker .situational-brief-text {
      display: inline-block;
      white-space: nowrap;
      font-size: 18px;
      line-height: 1.05;
      font-weight: 850;
      letter-spacing: .01em;
      color: #eef3f8;
      padding-left: 100%;
      animation: tbSituationalBriefScroll 38s linear infinite;
    }

    #situationalBriefTicker .situational-brief-key {
      color: #ffd166;
      font-weight: 950;
      text-transform: none;
    }

    #situationalBriefTicker .situational-brief-sep {
      color: #ffd166;
      font-weight: 950;
      margin: 0 18px;
      opacity: .95;
    }

    #situationalBriefTicker .siren-status-badge {
      display: inline-block;
      padding: 1px 7px 2px;
      border-radius: 999px;
      font-weight: 950;
      letter-spacing: .015em;
      line-height: 1.15;
      text-transform: none;
      vertical-align: baseline;
      border: 1px solid rgba(255,255,255,.16);
    }

    #situationalBriefTicker .siren-status-badge.watch {
      color: #1f2937;
      background: #facc15;
      border-color: rgba(250,204,21,.88);
      box-shadow: 0 0 10px rgba(250,204,21,.26);
      animation: tbSirenMaybeFlash 1.25s ease-in-out infinite;
    }

    #situationalBriefTicker .siren-status-badge.required {
      color: #fff;
      background: #ef4444;
      border-color: rgba(239,68,68,.92);
      box-shadow: 0 0 14px rgba(239,68,68,.42);
      animation: tbSirenRequiredFlash .78s ease-in-out infinite;
    }

    @keyframes tbSirenMaybeFlash {
      0%, 100% { filter: brightness(1); opacity: .88; }
      50% { filter: brightness(1.32); opacity: 1; }
    }

    @keyframes tbSirenRequiredFlash {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.055); opacity: .72; }
    }

    @media (prefers-reduced-motion: reduce) {
      #situationalBriefTicker .siren-status-badge.watch,
      #situationalBriefTicker .siren-status-badge.required {
        animation: none;
      }
    }

    @keyframes tbSituationalBriefScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }

    @media (max-width: 900px) {
      #situationalBriefTicker {
        left: 12px;
        right: 78px;
        bottom: 86px;
      }
      #situationalBriefTicker .situational-brief-label {
        font-size: 15px;
      }
    }

    #aiImpactSidebarFooter.ai-impact-state-low {
      border-color: rgba(34,197,94,0.72) !important;
      border-left-color: rgba(34,197,94,0.98) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 14px rgba(34,197,94,0.12) !important;
    }

    #aiImpactSidebarFooter.ai-impact-state-elevated {
      border-color: rgba(250,204,21,0.78) !important;
      border-left-color: rgba(250,204,21,0.98) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 14px rgba(250,204,21,0.14) !important;
    }

    #aiImpactSidebarFooter.ai-impact-state-high {
      border-color: rgba(239,68,68,0.82) !important;
      border-left-color: rgba(239,68,68,1) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 16px rgba(239,68,68,0.18) !important;
    }

    .ai-impact-sidebar-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      display: block;
      overflow: hidden;
      scrollbar-width: none;
    }

    .ai-impact-sidebar-frame::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    #aiImpactBottomDock {
      position: fixed;
      left: 420px;
      right: 12px;
      bottom: 12px;
      height: 54px;
      z-index: 1195;
      background: #0d1218 !important;
      color: #eef3f8 !important;
      border: 1px solid rgba(214,163,41,0.58) !important;
      border-radius: 12px !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,209,102,0.08) !important;
      box-sizing: border-box;
      overflow: hidden;
      pointer-events: auto;
    }

    .ai-impact-bottom-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: #08111f;
      display: block;
      overflow: hidden;
      scrollbar-width: none;
    }

    .ai-impact-bottom-frame::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    @media (max-width: 900px) {
      #aiImpactBottomDock,
      #aiImpactSidebarFooter {
        display: none;
      }
    }

    #stormBrand {
      top: 12px;
      left: 12px;
      right: auto;
      width: max-content;
      inline-size: max-content;
      padding: 10px 14px;
      border-bottom: 2px solid #ffd166 !important;
      box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,209,102,0.10) !important;
      box-sizing: border-box;
      overflow: hidden;
      pointer-events: auto;
      cursor: default;
      user-select: text;
      -webkit-user-select: text;
      display: inline-flex;
      align-items: stretch;
      justify-content: flex-start;
      gap: 16px;
      min-width: 0;
      max-width: calc(100vw - 24px);
    }

    #stormBrand .brand-wrap {
      min-width: 0;
      flex: 0 0 auto;
      pointer-events: auto;
    }

    #stormBrand .tb-logo-lockup {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    #stormBrand .tb-logo-link-main {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    #stormBrand .tb-logo-link-main:hover .brand-title {
      color: #ffd166;
    }

    #stormBrand .tb-logo-mark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: inline-flex;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.55));
    }

    #stormBrand .tb-logo-mark svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    #stormBrand .tb-logo-text {
      min-width: 0;
    }

    #stormBrand .brand-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      line-height: 1;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #ffffff;
    }

    #stormBrand .brand-sub {
      margin-top: 4px;
      font-size: 12px;
      color: #aab7c4;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    #stormBrand .brand-cache-status {
      margin-top: 7px;
      font-size: 11px;
      color: #aab7c4;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      line-height: 1.35;
    }

    #stormBrand .cache-ok { color: #77d977; font-weight: 700; }
    #stormBrand .cache-waiting { color: #ffcc66; font-weight: 700; }
    #stormBrand .cache-error { color: #ff7777; font-weight: 700; }

    #stormBrand .brand-cache-status {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-height: 16px;
    }

    #stormBrand .brand-health-stoplight {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      padding: 2px 5px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }

    #stormBrand .brand-health-light {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      opacity: .22;
      box-shadow: none;
    }

    #stormBrand .brand-health-light.green { background: #22c55e; }
    #stormBrand .brand-health-light.yellow { background: #fbbf24; }
    #stormBrand .brand-health-light.red { background: #ef4444; }
    #stormBrand .brand-health-light.active {
      opacity: 1;
      box-shadow: 0 0 8px currentColor;
    }
    #stormBrand .brand-health-light.green.active { color: #22c55e; }
    #stormBrand .brand-health-light.yellow.active { color: #fbbf24; }
    #stormBrand .brand-health-light.red.active { color: #ef4444; }

    #stormBrand .tb-low-power-toggle {
      width: 18px;
      height: 34px;
      margin-left: 6px;
      align-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0 !important;
      outline: 0 !important;
      border-radius: 0;
      background: transparent !important;
      padding: 0;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: none !important;
      -webkit-appearance: none;
      appearance: none;
    }

    #stormBrand .tb-low-power-toggle:hover,
    #stormBrand .tb-low-power-toggle:focus,
    #stormBrand .tb-low-power-toggle:focus-visible,
    #stormBrand .tb-low-power-toggle.active:not(.full),
    #stormBrand .tb-low-power-toggle.full {
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #stormBrand .tb-battery-shell {
      position: relative;
      width: 13px;
      height: 29px;
      border: 1px solid rgba(230,238,247,.82);
      border-radius: 4px;
      box-sizing: border-box;
      display: block;
      background: rgba(5,11,18,.68);
      overflow: visible;
      filter: drop-shadow(0 0 4px rgba(255,209,102,.18));
    }

    #stormBrand .tb-battery-shell::before {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      top: -4px;
      height: 2px;
      border-radius: 2px 2px 0 0;
      background: rgba(230,238,247,.82);
    }

    #stormBrand .tb-battery-fill {
      position: absolute;
      left: 2px;
      right: 2px;
      bottom: 2px;
      height: 34%;
      border-radius: 2px;
      background: #ffd166;
      box-shadow: 0 0 8px rgba(255,209,102,.46);
      transition: height .18s ease, background .18s ease, box-shadow .18s ease;
    }

    #stormBrand .tb-low-power-toggle.full .tb-battery-shell {
      filter: drop-shadow(0 0 4px rgba(34,197,94,.14));
    }

    #stormBrand .tb-low-power-toggle.full .tb-battery-fill {
      height: 86%;
      background: #22c55e;
      box-shadow: 0 0 7px rgba(34,197,94,.36);
    }

    #stormBrand .brand-weather,
    #stormBrand .brand-river,
    #stormBrand .brand-warning-intel,
    #stormBrand .brand-discussions,
    #stormBrand .brand-operational,
    #stormBrand .brand-monitoring,
    #stormBrand .brand-legend,
    #stormBrand .brand-tools {
      pointer-events: auto;
      min-width: 240px;
      padding-left: 16px;
      border-left: 1px solid #27303a;
    }

    #stormBrand .brand-weather {
      flex: 0 0 240px;
    }

    #stormBrand .brand-river {
      flex: 0 0 300px;
      min-width: 280px;
      max-width: 320px;
    }

    #stormBrand .brand-warning-intel {
      flex: 0 1 380px;
      min-width: 330px;
      max-width: 410px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }

    #stormBrand .brand-warning-intel-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      line-height: 1;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-warning-intel-body {
      display: grid;
      grid-template-columns: minmax(138px, 0.88fr) minmax(135px, 1fr);
      gap: 7px;
      align-items: stretch;
      margin-top: 5px;
      min-height: 56px;
      flex: 1 1 auto;
    }

    #stormBrand .brand-warning-intel-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin-top: 0;
      height: 100%;
    }

    #stormBrand .brand-warning-intel-chip {
      min-width: 0;
      min-height: 56px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 9px;
      background: rgba(255,255,255,0.055);
      padding: 6px 5px;
      line-height: 1.05;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #stormBrand .brand-warning-intel-chip .metric-label {
      color: #aab7c4;
      font-size: 9.6px;
      font-weight: 950;
      letter-spacing: .055em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    #stormBrand .brand-warning-intel-chip .metric-value {
      margin-top: 4px;
      color: #ffd166;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 950;
      letter-spacing: .02em;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    #stormBrand .brand-warning-intel-note {
      min-width: 0;
      min-height: 56px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 9px;
      background: rgba(0,0,0,0.16);
      padding: 6px 8px;
      color: #aab7c4;
      font-size: 10.8px;
      line-height: 1.22;
      overflow: hidden;
    }

    #stormBrand .brand-warning-intel-note span {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    #stormBrand .brand-discussions {
      flex: 1 1 auto;
      min-width: 260px;
      max-width: none;
      overflow: hidden;
      padding-right: 252px;
    }

    #stormBrand .brand-discussions-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      line-height: 1;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand a.brand-discussions-title {
      display: inline-block;
      text-decoration: none;
      color: #ffffff;
      max-width: 100%;
    }

    #stormBrand a.brand-discussions-title:hover {
      color: #ffd166;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    #stormBrand .brand-discussions-heading {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
      overflow: hidden;
    }

    #stormBrand .brand-spc-valid-period {
      color: #ffd166;
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: .035em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
      opacity: .96;
    }

    #stormBrand .brand-discussions-links {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin-top: 5px;
      min-height: 56px;
      width: 100%;
    }

    #stormBrand .brand-discussion-link,
    #stormBrand .brand-spc-risk-chip {
      appearance: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 56px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.055);
      color: #eef8ff;
      border-radius: 9px;
      padding: 6px 5px;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .04em;
      line-height: 1.05;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      box-sizing: border-box;
    }

    #stormBrand .brand-spc-risk-chip .brand-discussion-label {
      color: #aab7c4;
      font-size: 12.5px;
      font-weight: 950;
      letter-spacing: .07em;
      text-transform: uppercase;
      line-height: 1;
    }

    #stormBrand .brand-spc-risk-chip .brand-discussion-value {
      color: #eef8ff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      font-weight: 950;
      letter-spacing: .025em;
      line-height: 1.02;
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    #stormBrand .brand-spc-risk-chip:hover {
      border-color: rgba(255,209,102,.58);
      box-shadow: inset 0 0 0 1px rgba(255,209,102,.15), 0 0 10px rgba(255,209,102,.10);
    }

    #stormBrand .brand-spc-risk-chip.active {
      border-color: rgba(255,209,102,.98);
      outline: none;
      box-shadow: inset 0 0 0 2px rgba(255,209,102,.86), inset 0 0 14px rgba(255,209,102,.10), 0 0 12px rgba(255,209,102,.18);
      filter: brightness(1.12);
    }

    #stormBrand .brand-spc-risk-chip.active .brand-discussion-label,
    #stormBrand .brand-spc-risk-chip.active .brand-discussion-value {
      color: #fff3c4;
      text-shadow: 0 0 8px rgba(255,209,102,.25);
    }

    #stormBrand .brand-spc-risk-chip.risk-none { border-color: rgba(148,163,184,.22); background: rgba(148,163,184,.07); }
    #stormBrand .brand-spc-risk-chip.risk-tstm { border-color: rgba(85,187,85,.34); background: rgba(85,187,85,.12); }
    #stormBrand .brand-spc-risk-chip.risk-mrgl { border-color: rgba(34,197,94,.46); background: rgba(34,197,94,.16); }
    #stormBrand .brand-spc-risk-chip.risk-slgt { border-color: rgba(250,204,21,.60); background: rgba(250,204,21,.18); }
    #stormBrand .brand-spc-risk-chip.risk-enh { border-color: rgba(249,115,22,.62); background: rgba(249,115,22,.20); }
    #stormBrand .brand-spc-risk-chip.risk-mdt { border-color: rgba(239,68,68,.68); background: rgba(239,68,68,.22); }
    #stormBrand .brand-spc-risk-chip.risk-high { border-color: rgba(217,70,239,.72); background: rgba(217,70,239,.24); }
    #stormBrand .brand-spc-risk-chip.prob-low { border-color: rgba(34,197,94,.42); background: rgba(34,197,94,.13); }
    #stormBrand .brand-spc-risk-chip.prob-med { border-color: rgba(250,204,21,.58); background: rgba(250,204,21,.16); }
    #stormBrand .brand-spc-risk-chip.prob-high { border-color: rgba(249,115,22,.62); background: rgba(249,115,22,.20); }
    #stormBrand .brand-spc-risk-chip.prob-extreme { border-color: rgba(239,68,68,.70); background: rgba(239,68,68,.22); }

    #stormBrand .brand-river-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 5px;
    }

    #stormBrand .brand-river-gauge {
      appearance: none;
      width: 100%;
      min-width: 0;
      display: block;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.045);
      color: #eef3f8;
      border-radius: 10px;
      padding: 6px 7px;
      cursor: pointer;
      line-height: 1.15;
    }

    #stormBrand .brand-river-gauge:hover {
      background: rgba(126,195,255,0.10);
      border-color: rgba(126,195,255,0.35);
    }

    #stormBrand .brand-river-gauge-name {
      font-size: 11px;
      font-weight: 900;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-river-gauge-stage {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 900;
      color: #ffd166;
      white-space: nowrap;
    }

    #stormBrand .brand-river-gauge-meta {
      margin-top: 1px;
      font-size: 9.5px;
      color: #aab7c4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-river .river-sparkline {
      width: 100%;
      height: 28px;
      margin-top: 5px;
      border-radius: 7px;
    }

    #stormBrand .river-trend-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
      min-height: 24px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.16);
      padding: 3px 6px;
    }

    #stormBrand .river-trend-symbol {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 18px;
      font-size: 18px;
      line-height: 1;
      font-weight: 1000;
      font-family: 'Inter', Arial, sans-serif;
    }

    #stormBrand .river-trend-text {
      font-size: 9.5px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .river-trend-indicator.rising .river-trend-symbol,
    #stormBrand .river-trend-indicator.rising .river-trend-text { color: #ff5b57; }
    #stormBrand .river-trend-indicator.steady .river-trend-symbol,
    #stormBrand .river-trend-indicator.steady .river-trend-text { color: #ffd166; }
    #stormBrand .river-trend-indicator.falling .river-trend-symbol,
    #stormBrand .river-trend-indicator.falling .river-trend-text { color: #33c27f; }
    #stormBrand .river-trend-indicator.unknown .river-trend-symbol,
    #stormBrand .river-trend-indicator.unknown .river-trend-text { color: #9fb0bf; }

    #stormBrand .brand-river-summary {
      margin-top: 4px;
      color: #aab7c4;
      font-size: 13px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-river-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    #stormBrand .brand-river-age {
      flex: 0 0 auto;
      max-width: 120px;
      border: 1px solid rgba(126,195,255,0.22);
      background: rgba(126,195,255,0.08);
      color: #aab7c4;
      border-radius: 999px;
      padding: 2px 6px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-operational {
      width: auto !important;
      inline-size: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      flex: 0 0 auto !important;
      box-sizing: border-box;
      overflow: visible;
    }

    #stormBrand .brand-operational:last-child {
      padding-right: 0;
      margin-right: 0;
    }

    #stormBrand > * {
      flex-grow: 0;
    }

    #stormBrand .brand-monitoring {
      display: none;
    }

    #stormBrand .brand-operational.combined-clear .brand-operational-state { color: #7ec3ff; }
    #stormBrand .brand-operational.combined-watch .brand-operational-state { color: #ffd166; }
    #stormBrand .brand-operational.combined-required .brand-operational-state { color: #ff8a80; }

    #stormBrand .brand-combined-grid {
      display: inline-grid;
      grid-template-columns: repeat(3, max-content);
      gap: 4px 18px;
      align-items: start;
      margin-top: 4px;
      max-width: 100%;
    }

    #stormBrand .brand-operational-summary {
      margin-top: 2px;
      display: block;
      width: fit-content;
      max-width: 310px;
      box-sizing: border-box;
    }

    #stormBrand .brand-operational-state {
      margin-top: 4px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    #stormBrand .brand-operational-detail {
      margin-top: 4px;
      font-size: 10.5px;
      line-height: 1.2;
      color: #dbe7f2;
      white-space: normal;
      overflow-wrap: anywhere;
      width: fit-content;
      max-width: 310px;
    }

    #stormBrand .brand-operational-detail strong { color: #ffffff; }

    #stormBrand .brand-operational-spc {
      display: block;
      width: fit-content;
      min-width: 0;
      box-sizing: border-box;
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px solid rgba(255,255,255,0.12);
      color: #cfe0ef;
      font-size: 10.5px;
      line-height: 1.2;
      max-width: 310px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    #stormBrand .brand-operational-spc a {
      color: #9fd2ff;
      text-decoration: none;
      font-weight: 700;
    }

    #stormBrand .brand-operational-spc a:hover { text-decoration: underline; }

    #stormBrand .brand-monitoring-status {
      margin-top: 4px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #ffd166;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    #stormBrand .brand-monitoring-detail {
      margin-top: 5px;
      font-size: 10.5px;
      line-height: 1.2;
      color: #dbe7f2;
      max-height: none;
      overflow: visible;
      white-space: normal;
      word-break: normal;
    }

    #stormBrand .brand-monitoring-detail strong {
      color: #ffffff;
    }

    #stormBrand .brand-monitoring-spc {
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px solid rgba(255,255,255,0.12);
      color: #cfe0ef;
    }

    #stormBrand .brand-monitoring-spc a {
      color: #9fd2ff;
      text-decoration: none;
      font-weight: 700;
    }

    #stormBrand .brand-monitoring-spc a:hover {
      text-decoration: underline;
    }

    #stormBrand .brand-monitoring.clear .brand-monitoring-status { color: #7ec3ff; }
    #stormBrand .brand-monitoring.watch .brand-monitoring-status { color: #ffd166; }
    #stormBrand .brand-monitoring.required .brand-monitoring-status { color: #ff8a80; }

    #stormBrand .brand-legend {
      min-width: 0;
      max-width: none;
      width: max-content;
      flex: 0 0 auto;
      padding-right: 0;
    }

    #stormBrand .brand-tools {
      min-width: 0;
      max-width: none;
      width: max-content;
      flex: 0 0 auto;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #stormBrand .brand-weather-title,
    #stormBrand .brand-river-title,
    #stormBrand .brand-warning-intel-title,
    #stormBrand .brand-discussions-title,
    #stormBrand .brand-operational-title,
    #stormBrand .brand-monitoring-title,
    #stormBrand .brand-legend-title,
    #stormBrand .brand-tools-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      line-height: 1;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #ffffff;
    }

    #stormBrand .brand-weather-grid {
      display: grid;
      grid-template-columns: auto auto;
      gap: 4px 14px;
      align-items: center;
    }

    #stormBrand .brand-weather-grid .muted {
      color: #aab7c4;
      font-size: 12px;
    }

    #stormBrand .brand-weather-grid .value {
      text-align: right;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
    }

    #stormBrand .brand-weather-updated {
      margin-top: 6px;
      font-size: 11px;
      color: #aab7c4;
    }


    #stormBrand .brand-operational-grid {
      display: grid;
      grid-template-columns: 116px 70px 70px;
      gap: 3px 8px;
      margin-top: 4px;
      align-items: center;
    }

    #stormBrand .brand-operational-grid .muted {
      color: #aab7c4;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }

    #stormBrand .brand-operational-grid .value {
      color: #ffd166;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-refresh-status {
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      font-size: 12px;
      white-space: nowrap;
    }

    #stormBrand .brand-refresh-status-label {
      color: #aab7c4;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }

    #stormBrand .brand-refresh-status .countdown {
      margin-top: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
      background: transparent;
      border: 0;
    }

    #stormBrand .brand-legend-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.2;
      color: #eef3f8;
    }

    #stormBrand .brand-legend-grid .dot {
      width: 9px;
      height: 9px;
      margin-right: 6px;
    }

    #stormBrand .tools-button-row {
      margin-top: 4px;
      margin-bottom: 8px;
      gap: 6px;
      width: max-content;
      max-width: none;
      flex-wrap: nowrap;
      align-self: flex-start;
    }

    #stormBrand .brand-controls-row {
      margin-top: 6px;
      margin-bottom: 0;
      gap: 6px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
    }

    #stormBrand .test-toggle-btn {
      padding: 6px 9px;
      font-size: 13px;
      line-height: 1;
      min-height: 30px;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }

    #stormBrand .brand-controls-row .icon-toggle-btn {
      min-width: 36px;
      width: 36px;
      height: 30px;
      padding-left: 0;
      padding-right: 0;
      font-size: 15px;
    }

    /* THUNDERBOARD 3.2.0: map tool strip cleanup.
       Keeps all existing tool button behavior intact while making the controls read as
       one operational toolbar instead of loose icons in the header. */
    #stormBrand .tb-map-tools-strip {
      background: rgba(5, 10, 16, 0.46);
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 999px;
      padding: 4px 6px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.18);
    }

    #stormBrand .brand-controls-label {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 7px 0 4px;
      margin-right: 1px;
      border-right: 1px solid rgba(255,255,255,0.12);
      color: #fbbf24;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #stormBrand .tb-map-tools-strip .icon-toggle-btn {
      border-radius: 999px;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    }

    #stormBrand .tb-map-tools-strip .icon-toggle-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.22);
    }

    #stormBrand .tb-map-tools-strip .icon-toggle-btn:focus-visible {
      outline: 2px solid rgba(251,191,36,0.75);
      outline-offset: 2px;
    }

    #stormBrand .tb-map-tools-strip .icon-toggle-btn.neutral {
      background: rgba(96, 165, 250, 0.10);
      border-color: rgba(96, 165, 250, 0.22);
    }

    #stormBrand .tb-map-tools-strip .icon-toggle-btn.neutral:hover {
      background: rgba(96, 165, 250, 0.18);
      border-color: rgba(147, 197, 253, 0.38);
    }

    /* THUNDERBOARD 3.2.1: layer control tray.
       Keeps the header compact on 13-inch screens by moving map layer toggles
       into a single tray while preserving existing button IDs/behavior. */
    #stormBrand .tb-map-tools-tray {
      position: relative;
      align-self: flex-start;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 100%;
      z-index: 1900;
    }


    /* THUNDERBOARD 3.2.1 fix 3: tighten Map Tools button/menu text so the label,
       icon, and caret read cleanly on smaller laptop screens. */
    #stormBrand .tb-map-tools-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(126,195,255,0.28);
      background: rgba(11, 18, 27, 0.94);
      color: #eef6ff;
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0,0,0,.24);
      line-height: 1;
      white-space: nowrap;
    }

    #stormBrand .tb-map-tools-toggle .tb-map-tools-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      min-width: 17px;
      font-size: 13px;
      line-height: 1;
      transform: translateY(-0.5px);
    }

    #stormBrand .tb-map-tools-toggle .tb-map-tools-label {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      white-space: nowrap;
    }

    #stormBrand .tb-map-tools-toggle:hover {
      border-color: rgba(126,195,255,0.55);
      background: rgba(21, 35, 48, 0.96);
    }

    #stormBrand .tb-map-tools-toggle .tb-map-tools-caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      min-width: 12px;
      font-size: 11px;
      line-height: 1;
      color: #ffd166;
      transition: transform .16s ease;
      transform-origin: center;
    }

    #stormBrand .tb-map-tools-tray.is-open .tb-map-tools-caret {
      transform: rotate(180deg);
    }

    #stormBrand .tb-map-tools-tray.is-open .tb-map-tools-toggle {
      border-color: rgba(251,191,36,0.52);
      box-shadow: 0 8px 22px rgba(0,0,0,.24), 0 0 0 1px rgba(251,191,36,0.12) inset;
    }

    #stormBrand .tb-map-tools-panel {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: min(340px, calc(100vw - 24px));
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(126,195,255,0.24);
      background: rgba(9, 14, 20, 0.97);
      box-shadow: 0 18px 44px rgba(0,0,0,.42);
      backdrop-filter: blur(10px);
      display: none;
      box-sizing: border-box;
    }

    #stormBrand .tb-map-tools-tray.is-open .tb-map-tools-panel {
      display: block;
    }

    #stormBrand .tb-map-tools-panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 2px 8px;
      color: #ffffff;
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
      line-height: 1;
    }

    #stormBrand .tb-map-tools-panel-sub {
      color: #aab7c4;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .02em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
    }

    #stormBrand .tb-map-tools-section {
      padding-top: 8px;
      margin-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }

    #stormBrand .tb-map-tools-section:first-of-type {
      padding-top: 0;
      margin-top: 0;
      border-top: none;
    }

    #stormBrand .tb-map-tools-section-label {
      margin-bottom: 6px;
      color: #ffd166;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    #stormBrand .tb-map-tools-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 9px;
      row-gap: 10px;
    }

    /* THUNDERBOARD 3.2.1 fix 5: make the tray button labels readable.
       The icon and short label now have enough vertical room so the label
       does not collide with the round tool icon on smaller laptop screens. */
    #stormBrand .tb-map-tools-grid .icon-toggle-btn {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      height: 48px;
      border-radius: 12px;
      padding: 4px 3px 5px;
      font-size: 16px;
      line-height: 1;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      overflow: visible;
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn::after {
      content: attr(data-short-label);
      display: block;
      color: #d7e6f4;
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: .015em;
      text-transform: uppercase;
      line-height: 1.05;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      transform: translateY(1px);
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn:hover::after,
    #stormBrand .tb-map-tools-grid .icon-toggle-btn.active::after {
      color: #ffffff;
    }


    /* THUNDERBOARD 3.2.1 fix 6: switch tray tools to a readable two-column layout.
       The compact four-column layout squeezed labels on 13-inch screens.  This keeps
       the tray compact while making each tool label readable and less crowded. */
    #stormBrand .tb-map-tools-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 8px;
      row-gap: 8px;
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      width: 100%;
      min-height: 38px;
      height: 38px;
      padding: 5px 8px;
      border-radius: 12px;
      font-size: 15px;
      line-height: 1;
      overflow: hidden;
      box-sizing: border-box;
      text-align: left;
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn::after {
      content: attr(data-short-label);
      display: inline-block;
      color: #dcecff;
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: .035em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      pointer-events: none;
      transform: none;
    }



    /* THUNDERBOARD 3.2.1 fix 7: use text-only Map Tools tray buttons.
       The icon+label layout still crowded on 13-inch screens.  Text-only
       buttons preserve existing IDs/toggle classes while making each tool
       name readable and keeping red/green active state colors. */
    #stormBrand .tb-map-tools-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 8px;
      row-gap: 8px;
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      min-height: 34px;
      height: 34px;
      padding: 6px 8px;
      border-radius: 12px;
      font-size: 11.5px;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      box-sizing: border-box;
    }

    #stormBrand .tb-map-tools-grid .icon-toggle-btn::after {
      content: none !important;
      display: none !important;
    }
    @media (max-width: 1200px) {
      #stormBrand .tb-map-tools-panel {
        width: min(312px, calc(100vw - 24px));
      }
      #stormBrand .tb-map-tools-panel-sub {
        display: none;
      }
    }


    /* THUNDERBOARD 3.2.1 fix 1: keep the Map Tools tray panel visible outside the compact header.
       The compact header previously used overflow:hidden, which clipped the open tray so only
       the button/caret was visible. */
    #stormBrand.tb-compact-header {
      overflow: visible !important;
    }

    #stormBrand.tb-compact-header .brand-wrap {
      overflow: visible !important;
      position: relative;
      z-index: 1950;
    }

    #stormBrand.tb-compact-header .tb-map-tools-panel {
      z-index: 3500;
    }

    /* THUNDERBOARD 3.2.1 fix 2: when the Map Tools tray is open,
       raise the full header stacking context above the Active Linn County
       Alerts panel. Descendant z-index alone cannot escape a lower parent
       stacking context, so the header itself needs to be elevated. */
    #stormBrand.tb-map-tools-open {
      z-index: 3400 !important;
    }

    #stormBrand.tb-map-tools-open .tb-map-tools-panel {
      z-index: 3500 !important;
    }

    #stormBrand .scenario-icon-btn.selected {
      background: rgba(83,167,255,0.22);
      color: #d7ebff;
      border-color: rgba(83,167,255,0.62);
    }

    #stormBrand .scenario-icon-btn.selected:hover {
      background: rgba(83,167,255,0.30);
    }

    #stormBrand .brand-tools .tools-section {
      margin-top: 4px;
      align-self: stretch;
    }

    #stormBrand .brand-tools .tools-section-label {
      display: none;
    }

    #stormBrand #toolsRadarMount {
      display: inline-flex;
      align-items: center;
      width: auto;
      max-width: none;
    }

    #stormBrand #toolsRadarMount .radar-control {
      position: static;
      margin: 0 !important;
      width: auto !important;
      max-width: none !important;
      min-width: 0 !important;
      box-sizing: border-box;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: none;
      padding: 4px 6px;
      display: grid;
      grid-template-columns: 26px 70px 30px;
      gap: 5px;
      align-items: center;
    }

    #stormBrand #toolsRadarMount .radar-control label {
      margin: 0;
      white-space: nowrap;
      font-size: 0;
      line-height: 1;
    }

    #stormBrand #toolsRadarMount .radar-control label::after {
      content: "◐";
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #eef3f8;
    }

    #stormBrand #toolsRadarMount .radar-control input[type="range"] {
      width: 70px;
      box-sizing: border-box;
    }

    #stormBrand #toolsRadarMount .radar-control #radarOpacityValue {
      margin: 0;
      min-width: 30px;
      text-align: right;
      font-size: 11px;
      line-height: 1;
    }


    #bjBotPopup {
      position: fixed;
      left: 50%;
      bottom: 126px;
      z-index: 1600;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      max-width: min(560px, calc(100vw - 28px));
      pointer-events: none;
      opacity: 0;
      transform: translateX(-50%) translateY(14px) scale(0.98);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    #bjBotPopup.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }

    @media (max-width: 900px) {
      #bjBotPopup { left: 12px; right: 12px; bottom: 124px; transform: translateY(14px) scale(0.98); max-width: none; }
      #bjBotPopup.is-visible { transform: translateY(0) scale(1); }
      #bjBotPopup .bj-avatar-wrap { display: none !important; }
      #bjBotPopup .bj-bubble { max-width: none !important; min-width: 0 !important; width: 100%; }
    }

    #stormBrand.tb-compact-header .brand-operational { display: none !important; }

    #opsSnapshotOverlay { position: fixed; inset: 0; z-index: 2500; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(2,6,12,.48); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    #opsSnapshotOverlay.is-visible { display: flex; }
    #opsDecisionBanner {
      position: fixed;
      top: 182px;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      z-index: 1350;
      width: min(760px, calc(100vw - 410px));
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(13,18,24,.96), rgba(7,11,17,.96));
      box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(255,209,102,.08);
      color: #eef3f8;
      pointer-events: auto;
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
    }
    #opsDecisionBanner.is-visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
    #opsDecisionBanner.clear { border-left: 5px solid #22c55e; }
    #opsDecisionBanner.watch { border-left: 5px solid #facc15; box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 16px rgba(250,204,21,.14); }
    #opsDecisionBanner.required { border-left: 5px solid #ef4444; box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 18px rgba(239,68,68,.18); }
    .ops-decision-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .ops-decision-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; line-height: .95; letter-spacing: .07em; text-transform: uppercase; color: #fff; white-space: nowrap; }
    .ops-decision-line { font-size: 13px; line-height: 1.2; font-weight: 850; color: #dbeafe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ops-decision-line strong { color: #ffd166; }
    .ops-decision-pill { flex: 0 0 auto; border-radius: 999px; padding: 8px 11px; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .055em; border: 1px solid rgba(255,255,255,.16); white-space: nowrap; }
    .ops-decision-pill.clear { color: #bbf7d0; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.46); }
    .ops-decision-pill.watch { color: #111827; background: #facc15; border-color: rgba(250,204,21,.88); }
    .ops-decision-pill.required { color: #fff; background: #ef4444; border-color: rgba(239,68,68,.92); }
    .ops-decision-close { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 999px; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 950; }
    @media (max-width: 900px) { #opsDecisionBanner { top: 150px; left: 12px; right: 12px; width: auto; transform: translateY(-8px); } #opsDecisionBanner.is-visible { transform: translateY(0); } }
    #opsSnapshotWindow { width: min(760px, calc(100vw - 44px)); max-height: min(82vh, 720px); overflow: auto; border-radius: 18px; border: 1px solid rgba(126,195,255,.32); background: linear-gradient(180deg, rgba(13,18,24,.98), rgba(7,11,17,.985)); box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,209,102,.08); color: #eef3f8; }
    .ops-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 16px 11px; border-bottom: 1px solid rgba(255,255,255,.10); }
    .ops-popup-title { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; line-height: .95; letter-spacing: .07em; text-transform: uppercase; color: #fff; }
    .ops-popup-subtitle { margin-top: 5px; color: #aab7c6; font-size: 12px; font-weight: 750; letter-spacing: .025em; }
    .ops-popup-close { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #eef3f8; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 900; }
    .ops-popup-body { padding: 14px 16px 16px; }
    .ops-popup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ops-popup-card { border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.045); padding: 12px; min-width: 0; }
    .ops-popup-card.wide { grid-column: 1 / -1; }
    .ops-popup-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 21px; letter-spacing: .07em; text-transform: uppercase; color: #7ec3ff; margin-bottom: 7px; }
    .ops-siren-recommendation { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .055em; border: 1px solid rgba(255,255,255,.14); }
    .ops-siren-recommendation.clear { color: #bbf7d0; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.44); }
    .ops-siren-recommendation.watch { color: #111827; background: #facc15; border-color: rgba(250,204,21,.86); box-shadow: 0 0 16px rgba(250,204,21,.18); }
    .ops-siren-recommendation.required { color: #fff; background: #ef4444; border-color: rgba(239,68,68,.9); box-shadow: 0 0 18px rgba(239,68,68,.24); }
    .ops-quadrant-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .ops-quadrant-pill { border-radius: 999px; padding: 7px 10px; background: rgba(126,195,255,.12); border: 1px solid rgba(126,195,255,.35); color: #d9f0ff; font-weight: 950; letter-spacing: .04em; }
    .ops-quadrant-pill.none { background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.30); color: #cbd5e1; }
    .ops-popup-meta-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.35; }
    .ops-popup-meta-row strong { color: #fff; }
    @media (max-width: 760px) { .ops-popup-grid { grid-template-columns: 1fr; } .ops-popup-card.wide { grid-column: auto; } .ops-popup-meta-row { grid-template-columns: 1fr; gap: 2px; } }

    #bjBotPopup .bj-bubble,
    #bjBotPopup .bj-avatar-wrap {
      pointer-events: auto;
    }

    #bjBotPopup .bj-bubble {
      background: linear-gradient(180deg, rgba(14,20,28,0.98), rgba(7,11,17,0.98));
      color: #eef3f8;
      border: 1px solid rgba(255,209,102,0.38);
      border-left: 5px solid var(--bot-warning-color, #ffd166);
      border-radius: 16px;
      box-shadow: 0 14px 34px rgba(0,0,0,0.52), 0 0 0 1px rgba(126,195,255,0.08);
      padding: 12px 14px;
      min-width: 310px;
      max-width: 430px;
    }

    #bjBotPopup .bj-bubble-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 27px;
      line-height: .95;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      text-shadow: 0 2px 8px rgba(0,0,0,.55);
    }

    #bjBotPopup .bj-bubble-title .small {
      font-family: 'Inter', Arial, sans-serif;
      font-size: 10.5px;
      line-height: 1;
      letter-spacing: .11em;
      color: #111820 !important;
      background: linear-gradient(180deg, #fff1b8, #ffd166);
      text-shadow: none !important;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 999px;
      padding: 5px 8px;
      font-weight: 950;
      white-space: nowrap;
    }

    #bjBotPopup .bj-bubble-text {
      font-size: 14.5px;
      line-height: 1.42;
      color: #eef3f8;
      font-weight: 750;
    }

    #bjBotPopup .bj-bubble-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .bj-btn {
      appearance: none;
      border: 1px solid #314050;
      background: #15202c;
      color: #eef3f8;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .bj-btn:hover {
      background: #1b2a39;
    }

    .bj-btn.primary {
      background: #8b1e24;
      border-color: #bc3038;
    }

    .bj-btn.primary:hover {
      background: #a4252d;
    }
    #bjBotPopup .bj-avatar-wrap {
      width: 116px;
      height: 116px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
    }

    #bjBotPopup .bj-avatar {
      position: relative;
      width: 116px;
      height: 116px;
      animation: bjBob 1.8s ease-in-out infinite;
      transform-origin: center bottom;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    #bjBotPopup.is-speaking .bj-avatar {
      animation: bjBob 1.0s ease-in-out infinite;
    }

    #bjBotPopup .bj-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      user-select: none;
      -webkit-user-drag: none;
    }

    @keyframes bjBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @keyframes bjTalk {
      from { transform: scaleY(1); height: 4px; }
      to { transform: scaleY(1.6); height: 8px; }
    }

    @keyframes bjWave {
      from { transform: rotate(-18deg); }
      to { transform: rotate(-38deg); }
    }



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

    .test-toggle-btn {
      appearance: none;
      border: 1px solid rgba(229,57,53,0.55);
      background: rgba(229,57,53,0.22);
      color: #ffd1cf;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    }

    .test-toggle-btn:hover {
      background: rgba(229,57,53,0.30);
    }

    .icon-toggle-btn {
      min-width: 32px;
      width: 32px;
      padding-left: 0;
      padding-right: 0;
      font-size: 13px;
      line-height: 1;
    }

    .test-toggle-btn.active {
      background: rgba(51,194,127,0.22);
      color: #c8ffe3;
      border-color: rgba(51,194,127,0.55);
    }

    .test-toggle-btn.active:hover {
      background: rgba(51,194,127,0.30);
    }

    #stormBrand #toolsRiverToggle.active,
    #stormBrand #brandRiverToggle:not(.off) {
      background: rgba(34,197,94,0.24) !important;
      color: #d1fae5 !important;
      border-color: rgba(34,197,94,0.68) !important;
      box-shadow: inset 0 0 0 1px rgba(34,197,94,.12), 0 0 12px rgba(34,197,94,.16) !important;
    }

    #stormBrand #toolsRiverToggle:not(.active) {
      opacity: .9;
    }

    #stormBrand #toolsRiverToggle[data-state="on"]::before {
      content: '●';
      color: #22c55e;
      font-size: 10px;
      line-height: 1;
      margin-right: 5px;
      transform: translateY(-.5px);
    }

    #stormBrand .brand-controls-row .icon-toggle-btn:not(.neutral) {
      background: rgba(229,57,53,0.22);
      color: #ffd1cf;
      border-color: rgba(229,57,53,0.55);
    }

    #stormBrand .brand-controls-row .icon-toggle-btn:not(.neutral):hover {
      background: rgba(229,57,53,0.30);
    }

    #stormBrand .brand-controls-row .icon-toggle-btn.active:not(.neutral) {
      background: rgba(51,194,127,0.22);
      color: #c8ffe3;
      border-color: rgba(51,194,127,0.55);
    }

    #stormBrand .brand-controls-row .icon-toggle-btn.active:not(.neutral):hover {
      background: rgba(51,194,127,0.30);
    }

    #toolsTimelinePage.neutral,
    #toolsStatusPage.neutral {
      background: rgba(126,195,255,0.14);
      color: #d7ecff;
      border-color: rgba(126,195,255,0.38);
    }

    #toolsTimelinePage.neutral:hover,
    #toolsStatusPage.neutral:hover {
      background: rgba(126,195,255,0.24);
      border-color: rgba(126,195,255,0.58);
    }

    .panel-title,
    .section-title,
    .legend-title,
    .status-title {
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.9px;
    }

    .panel-title,
    .legend-title,
    .status-title {
      font-size: 22px;
      line-height: 1;
      margin-bottom: 8px;
      color: #ffffff;
    }

    .section-title {
      font-size: 17px;
      margin-top: 10px;
      margin-bottom: 6px;
      color: #7ec3ff;
    }

    .alert-item {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .alert-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .iembot-launch-row {
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.10);
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .iembot-launch-meta {
      color: #b9c7d4;
      font-size: 11px;
      line-height: 1.25;
    }

    .iembot-open-btn {
      background: rgba(126,195,255,0.12);
      border: 1px solid rgba(126,195,255,0.35);
      color: #dcefff;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
    }

    .iembot-open-btn:hover {
      background: rgba(126,195,255,0.20);
    }

    #iembotModalOverlay {
      position: fixed;
      inset: 0;
      z-index: 2200;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px);
      padding: 18px;
    }

    #iembotModalOverlay.is-visible {
      display: flex;
    }

    #iembotModal {
      width: min(760px, calc(100vw - 28px));
      max-height: min(760px, calc(100vh - 36px));
      overflow: hidden;
      border: 1px solid rgba(126,195,255,0.35);
      border-radius: 18px;
      background: rgba(8,13,20,0.97);
      box-shadow: 0 20px 55px rgba(0,0,0,0.45);
      color: #eef6ff;
      display: flex;
      flex-direction: column;
    }

    .iembot-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .iembot-modal-title {
      color: #7ec3ff;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .iembot-modal-subtitle {
      margin-top: 3px;
      color: #b9c7d4;
      font-size: 12px;
      line-height: 1.35;
    }

    .iembot-modal-close {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.20);
      color: #ffffff;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .iembot-modal-body {
      overflow: auto;
      padding: 12px 18px 18px;
    }

    .iembot-item {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .iembot-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .iembot-meta {
      color: #ffd166;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .iembot-log {
      color: #dce6ef;
      font-size: 13px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .iembot-link {
      color: #9bd0ff;
      font-weight: 800;
      text-decoration: none;
    }

    .iembot-link:hover {
      text-decoration: underline;
    }
    button.iembot-link, button.iembot-product-link {
      appearance: none;
      border: 0;
      background: transparent;
      color: #f7c542;
      padding: 0;
      font: inherit;
      cursor: pointer;
      text-decoration: underline;
    }
    button.iembot-product-link:hover, button.iembot-link:hover {
      color: #ffe08a;
    }

    .alert-link-btn {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      color: #9bd0ff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
    }

    .alert-link-btn:hover {
      text-decoration: underline;
      color: #d4ebff;
    }

    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .pill-primary {
      background: rgba(229,57,53,0.18);
      color: #ffadab;
      border: 1px solid rgba(229,57,53,0.25);
    }

    .pill-secondary {
      background: rgba(51,194,127,0.16);
      color: #95e7be;
      border: 1px solid rgba(51,194,127,0.22);
    }

    .pill-all {
      background: rgba(126,195,255,0.14);
      color: #9bd0ff;
      border: 1px solid rgba(126,195,255,0.24);
    }

    .pill-alert-colored {
      color: #ffffff;
      border-style: solid;
      border-width: 1px;
      text-shadow: 0 1px 1px rgba(0,0,0,0.45);
    }

    .alert-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .alert-title-row .pill {
      margin-left: 0;
      flex: 0 0 auto;
    }

    .countdown {
      display: inline-block;
      margin-top: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255, 209, 102, 0.14);
      border: 1px solid rgba(255, 209, 102, 0.28);
      color: #ffd166 !important;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.2px;
    }

    .countdown.expired {
      background: rgba(255, 138, 128, 0.14);
      border: 1px solid rgba(255, 138, 128, 0.28);
      color: #ff8a80 !important;
    }

    .warning-stat-gold {
      color: #ffd166 !important;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }

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

    .status-row {
      padding: 8px 10px;
      border-radius: 10px;
      background: #151c24;
      border: 1px solid #222b34;
    }

    .decision-card {
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 209, 102, 0.28);
      background: rgba(255, 209, 102, 0.08);
      margin-bottom: 12px;
    }

    .decision-card.clear {
      border-color: rgba(126,195,255,0.18);
      background: rgba(126,195,255,0.06);
    }

    .decision-card.required {
      border-color: rgba(255, 80, 80, 0.46);
      background: rgba(229,57,53,0.16);
    }

    .decision-card.watch {
      border-color: rgba(255, 209, 102, 0.38);
      background: rgba(255,209,102,0.11);
    }

    .decision-status {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1.05;
    }

    .decision-detail {
      margin-top: 5px;
      color: #dbe7f2;
      font-size: 12px;
      line-height: 1.35;
    }

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

    .mini-card {
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      font-size: 12px;
      line-height: 1.3;
    }

    .mini-card .label {
      color: #aab7c4;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .feed-health-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .feed-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      color: #dbe7f2;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .feed-pill.ok { color: #c8ffe3; border-color: rgba(51,194,127,0.30); background: rgba(51,194,127,0.10); }
    .feed-pill.warn { color: #ffe5a3; border-color: rgba(255,209,102,0.28); background: rgba(255,209,102,0.10); }
    .feed-pill.error { color: #ffb9b6; border-color: rgba(229,57,53,0.34); background: rgba(229,57,53,0.10); }

    .feed-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(51,194,127,0.30);
      background: rgba(51,194,127,0.12);
      color: #c8ffe3;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      line-height: 1.25;
    }
    .feed-action-btn.off {
      border-color: rgba(229,57,53,0.34);
      background: rgba(229,57,53,0.12);
      color: #ffb9b6;
    }
    .feed-action-btn:hover { filter: brightness(1.15); }

    .road-event-marker {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: #ffd166;
      border: 2px solid #0d1218;
      box-shadow: 0 0 0 2px rgba(255,209,102,0.35), 0 4px 12px rgba(0,0,0,0.45);
    }

    .road-event-marker.closure, .road-event-marker.priority_closure { background: #ff5b57; box-shadow: 0 0 0 2px rgba(255,91,87,0.35), 0 4px 12px rgba(0,0,0,0.45); }
    .road-event-marker.warning, .road-event-marker.priority_warning { background: #ffb020; box-shadow: 0 0 0 2px rgba(255,176,32,0.35), 0 4px 12px rgba(0,0,0,0.45); }
    .road-event-marker.roadwork, .road-event-marker.lane_closure { background: #7ec3ff; box-shadow: 0 0 0 2px rgba(126,195,255,0.35), 0 4px 12px rgba(0,0,0,0.45); }

    .road-event-group-marker,
    .lsr-group-marker {
      min-width: 46px;
      height: 32px;
      padding: 0 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: linear-gradient(135deg, rgba(82,38,8,.96), rgba(17,24,39,.96));
      border: 2px solid #ffb020;
      box-shadow: 0 0 0 3px rgba(255,176,32,0.22), 0 8px 18px rgba(0,0,0,0.58);
      color: #fff7ed;
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
    }
    .road-event-group-marker .group-glyph,
    .lsr-group-marker .group-glyph { color: #ffd166; font-size: 14px; line-height: 1; }
    .road-event-group-marker .group-count,
    .lsr-group-marker .group-count { color: #fff; font-weight: 950; }
    .lsr-group-marker { background: linear-gradient(135deg, rgba(69,26,73,.96), rgba(17,24,39,.96)); border-color: #f0abfc; box-shadow: 0 0 0 3px rgba(240,171,252,0.18), 0 8px 18px rgba(0,0,0,0.58); }
    .lsr-group-marker .group-glyph { color: #f0abfc; }

    .idot-camera-marker {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111827;
      border: 2px solid #ffd166;
      box-shadow: 0 0 0 2px rgba(255,209,102,0.28), 0 6px 16px rgba(0,0,0,0.55);
      color: #f9fafb;
      font-size: 16px;
      line-height: 1;
    }
    .idot-camera-marker.unavailable { opacity: 0.72; border-color: #8c99a6; box-shadow: 0 0 0 2px rgba(140,153,166,0.24), 0 6px 16px rgba(0,0,0,0.55); }

    .idot-camera-group-marker {
      min-width: 48px;
      height: 34px;
      padding: 0 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: linear-gradient(135deg, rgba(14,42,67,.96), rgba(8,18,31,.96));
      border: 2px solid #7ec3ff;
      box-shadow: 0 0 0 3px rgba(126,195,255,0.22), 0 8px 18px rgba(0,0,0,0.58);
      color: #dff3ff;
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .2px;
    }

    .idot-camera-group-marker .camera-glyph {
      color: #ffd166;
      font-size: 14px;
      line-height: 1;
      filter: drop-shadow(0 0 4px rgba(255,209,102,.28));
    }

    .idot-camera-group-marker .camera-count {
      color: #f8fbff;
      font-weight: 950;
      line-height: 1;
    }


    .iem-camera-group-marker {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111827;
      border: 2px solid #ffd166;
      box-shadow: 0 0 0 3px rgba(255,209,102,0.28), 0 8px 18px rgba(0,0,0,0.58);
      color: #ffd166;
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
    }
    .iem-camera-group-marker.open {
      border-color: #7ec3ff;
      color: #7ec3ff;
      box-shadow: 0 0 0 3px rgba(126,195,255,0.28), 0 8px 18px rgba(0,0,0,0.58);
    }
    .iem-camera-spider-marker {
      min-width: 74px;
      max-width: 132px;
      height: 34px;
      padding: 0 9px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      background: #111827;
      border: 2px solid #7ec3ff;
      box-shadow: 0 0 0 2px rgba(126,195,255,0.24), 0 6px 16px rgba(0,0,0,0.55);
      color: #e5eef7;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .iem-camera-spider-marker .cam-glyph {
      font-size: 12px;
    }

    .thunder-camera-popup {
      width: 330px;
      max-width: 78vw;
      overflow: hidden;
      border: 1px solid rgba(255,209,102,0.50);
      border-radius: 12px;
      background: #0d1218;
      box-shadow: 0 14px 28px rgba(0,0,0,0.45);
    }
    .thunder-camera-header {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,209,102,0.32);
      background: rgba(255,209,102,0.06);
    }
    .thunder-camera-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      color: #fff;
    }
    .thunder-camera-subtitle { margin-top: 2px; color: #aab7c4; font-size: 12px; line-height: 1.35; }
    .thunder-camera-image-wrap { background: #000; min-height: 160px; display: flex; align-items: center; justify-content: center; }
    .thunder-camera-image { width: 100%; display: block; background: #000; }
    .thunder-camera-video { width: 100%; display: block; background: #000; min-height: 185px; }
    .thunder-camera-video-wrap { width: 100%; background: #000; position: relative; }
    .thunder-camera-status { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 8px; background: rgba(0,0,0,0.62); color: #dbe7f2; font-size: 11px; }
    .thunder-camera-placeholder { padding: 38px 14px; color: #aab7c4; text-align: center; font-size: 13px; }
    .thunder-camera-footer { padding: 10px 12px; font-size: 12px; color: #dbe7f2; line-height: 1.45; }
    .thunder-camera-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
    .thunder-camera-actions button, .thunder-camera-actions a {
      border: 1px solid rgba(255,209,102,0.42);
      background: rgba(255,209,102,0.12);
      color: #ffe7a3;
      border-radius: 8px;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
    }
    .thunder-camera-actions button:hover, .thunder-camera-actions a:hover { filter: brightness(1.12); }

    #iemCamAlertDock { position: absolute; z-index: 710; width: 360px; max-width: calc(100vw - 24px); display: none; pointer-events: auto; }
    #iemCamAlertDock.is-visible { display: block; }
    .iem-cam-alert-card { border: 1px solid rgba(255,209,102,0.62); border-radius: 14px; background: rgba(8,13,20,0.94); box-shadow: 0 16px 36px rgba(0,0,0,0.52); overflow: hidden; color: #e5eef7; backdrop-filter: blur(6px); }
    .iem-cam-alert-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid rgba(255,209,102,0.26); background: linear-gradient(90deg, rgba(255,209,102,0.18), rgba(255,209,102,0.04)); }
    .iem-cam-alert-title { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ffd166; }
    .iem-cam-alert-subtitle { margin-top: 2px; color: #d7e2ee; font-size: 12px; line-height: 1.35; }
    .iem-cam-alert-close { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #dbe7f2; border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font-weight: 900; }
    .iem-cam-alert-image { width: 100%; display: block; background: #000; }
    .iem-cam-alert-body { padding: 10px 12px; font-size: 12px; line-height: 1.45; }
    .iem-cam-alert-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .iem-cam-alert-chip { border: 1px solid rgba(255,209,102,0.26); border-radius: 999px; padding: 3px 7px; color: #ffd166; background: rgba(255,209,102,0.08); font-size: 11px; }
    @media (max-width: 700px) { #iemCamAlertDock { left: 10px !important; right: 10px !important; top: auto !important; bottom: 86px !important; width: auto; } }

    .river-gauge-marker {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #7ec3ff;
      border: 2px solid #0d1218;
      box-shadow: 0 0 0 2px rgba(126,195,255,0.35), 0 4px 12px rgba(0,0,0,0.45);
    }
    .river-gauge-marker.monitor { background: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.35), 0 4px 12px rgba(0,0,0,0.45); }
    .river-gauge-marker.flood { background: #ff5b57; box-shadow: 0 0 0 2px rgba(255,91,87,0.35), 0 4px 12px rgba(0,0,0,0.45); }
    .river-gauge-marker.unavailable { background: #8c99a6; box-shadow: 0 0 0 2px rgba(140,153,166,0.35), 0 4px 12px rgba(0,0,0,0.45); }


    .river-sparkline {
      margin-top: 6px;
      width: 180px;
      height: 42px;
      display: block;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.12);
    }

    .river-detail-row {
      margin-top: 4px;
      color: #aab7c4;
      font-size: 11px;
    }

    .briefing-river-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 4px;
    }

    .briefing-river-gauge {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.12);
      border-radius: 12px;
      padding: 10px;
      min-width: 0;
    }

    .briefing-river-name {
      font-weight: 900;
      margin-bottom: 4px;
    }

    .briefing-river-meta {
      color: #dbe5ee;
      font-size: 13px;
      line-height: 1.35;
    }

    .briefing-river-grid .river-sparkline {
      width: 100%;
      max-width: 260px;
      height: 46px;
    }

    @media (max-width: 850px) { .briefing-river-grid { grid-template-columns: 1fr; } }

    #briefingOverlay {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--tb-header-clearance, 118px);
      bottom: 0;
      z-index: 2450;
      display: none;
      align-items: flex-start;
      justify-content: center;
      background: rgba(0,0,0,0.72);
      padding: 14px 20px 82px;
      box-sizing: border-box;
    }

    #briefingPanel {
      width: min(1040px, calc(100vw - 96px));
      max-height: calc(100vh - var(--tb-header-clearance, 118px) - 104px);
      overflow: auto;
      background: #0d1218;
      color: #eef3f8;
      border: 1px solid #27303a;
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(0,0,0,0.6);
      padding: 18px;
      box-sizing: border-box;
      margin: 0 auto;
    }

    @media (max-width: 900px) {
      #briefingOverlay { padding-left: 12px; padding-right: 12px; }
      #briefingPanel { width: calc(100vw - 24px); }
    }

    .briefing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .briefing-title { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }
    .briefing-close { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #eef3f8; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 800; }
    .briefing-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; }
    .briefing-card { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); border-radius: 14px; padding: 12px; }
    .briefing-card.wide { grid-column: 1 / -1; }
    .briefing-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; color: #7ec3ff; text-shadow: 0 0 10px rgba(126,195,255,.14); }
    .briefing-kpi { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; line-height: 1; text-transform: uppercase; color: #ffd166; }
    .briefing-list { margin: 0; padding-left: 18px; }
    .briefing-list li { margin: 5px 0; }
    .intelligence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
    .intelligence-metric { border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 8px; background: rgba(0,0,0,0.18); }
    .intelligence-metric .metric-label { color: #aab7c4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; }
    .intelligence-metric .metric-value { color: #ffd166; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; line-height: 1; }
    .report-marker, .storm-cell-marker { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.92); box-shadow: 0 0 10px rgba(0,0,0,0.45); }
    .report-marker { background: #ffcc66; }
    .storm-cell-marker { background: #7ec3ff; }
    .storm-cell-marker.strong { background: #ff8a80; }
    .lsr-marker { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 2px 9px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; line-height:1; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.7); }
    .lsr-marker.tornado { background:#d7191c; clip-path: polygon(50% 0%, 100% 92%, 0% 92%); border-radius:0; }
    .lsr-marker.funnel { background:#ef6c00; clip-path: polygon(50% 0%, 100% 92%, 0% 92%); border-radius:0; }
    .lsr-marker.hail { background:#2e7d32; }
    .lsr-marker.wind { background:#1565c0; }
    .lsr-marker.wind-damage { background:#6a1b9a; }
    .lsr-marker.flood { background:#00838f; }
    .lsr-marker.rain { background:#0277bd; }
    .lsr-marker.snow { background:#607d8b; }
    .lsr-marker.fire { background:#c62828; }
    .lsr-marker.damage { background:#5d4037; }
    .lsr-marker.default { background:#f9a825; color:#07131f; text-shadow:none; }
    .intel-note { color: #aab7c4; font-size: 12px; line-height: 1.35; margin-top: 6px; }
    .timeline-link-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #eef3f8; border-radius: 10px; padding: 7px 10px; text-decoration: none; font-weight: 800; margin-top: 8px; }
    .timeline-link-btn:hover { background: rgba(255,255,255,0.12); }

    @media (max-width: 850px) { .briefing-grid { grid-template-columns: 1fr; } }

    #testModeDialogOverlay {
      position: fixed;
      inset: 0;
      z-index: 2700;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.58);
      padding: 20px;
      box-sizing: border-box;
    }

    #testModeDialog {
      width: min(420px, 94vw);
      background: #0d1218;
      color: #eef3f8;
      border: 1px solid #27303a;
      border-radius: 18px;
      box-shadow: 0 22px 60px rgba(0,0,0,0.55);
      padding: 16px;
      box-sizing: border-box;
    }

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

    .test-dialog-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 26px;
      line-height: 1;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #ffffff;
    }

    .test-dialog-close {
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      color: #eef3f8;
      border-radius: 10px;
      padding: 7px 10px;
      cursor: pointer;
      font-weight: 800;
    }

    .test-dialog-body {
      display: grid;
      gap: 10px;
    }

    .test-dialog-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
      border-radius: 14px;
      padding: 10px;
    }

    .test-dialog-label {
      font-weight: 800;
      letter-spacing: 0.2px;
    }

    .test-dialog-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .test-dialog-actions .test-toggle-btn {
      min-width: 86px;
    }

    .test-dialog-note {
      color: #aab7c4;
      font-size: 12px;
      line-height: 1.35;
    }

    .muted { color: #aab7c4; }

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
      background: #0d1218 !important;
      color: #eef3f8 !important;
    }

    .leaflet-popup-content {
      font-family: 'Inter', sans-serif;
      color: #eef3f8 !important;
    }

    .leaflet-tooltip {
      background: #0d1218 !important;
      color: #eef3f8 !important;
      border: 1px solid #27303a !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 15px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    #alertModalOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #alertModal {
      width: min(760px, 100%);
      max-height: 85vh;
      overflow-y: auto;
      background: #0d1218;
      color: #eef3f8;
      border: 1px solid #27303a;
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.6);
      padding: 18px 20px;
      box-sizing: border-box;
    }

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

    .modal-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      line-height: 1;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #ffffff;
    }

    .modal-close {
      background: #151c24;
      color: #eef3f8;
      border: 1px solid #27303a;
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 700;
    }

    .modal-close:hover { background: #1b2430; }

    .modal-meta {
      display: grid;
      gap: 8px;
      margin-bottom: 14px;
    }

    .modal-card {
      padding: 10px 12px;
      border-radius: 10px;
      background: #151c24;
      border: 1px solid #222b34;
    }

    .modal-section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #7ec3ff;
      margin: 14px 0 6px;
    }

    .modal-pre {
      white-space: pre-wrap;
      font-family: 'Inter', sans-serif;
      line-height: 1.5;
      color: #eef3f8;
      margin: 0;
    }



    #toolsDrawer {
      position: fixed;
      right: 12px;
      top: 12px;
      z-index: 1550;
      width: 260px;
      max-width: calc(100vw - 24px);
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
    }

    #toolsDrawer.is-collapsed .tools-body {
      display: none;
    }

    .tools-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      width: 100%;
      background: rgba(13, 18, 24, 0.94);
      color: #eef3f8;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    }

    .tools-toggle .gear {
      font-size: 15px;
      line-height: 1;
    }

    .tools-body {
      background: rgba(13, 18, 24, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(8px);
      width: 100%;
      box-sizing: border-box;
    }

    .tools-title {
      font-size: 13px;
      font-weight: 700;
      color: #eef3f8;
      margin-bottom: 10px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .tools-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .tools-section {
      margin-top: 10px;
    }

    .tools-section:first-of-type {
      margin-top: 0;
    }

    .tools-section-label {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #aab7c4;
      margin-bottom: 8px;
    }

    #toolsDrawer .leaflet-control-layers,
    #toolsDrawer .radar-control {
      position: static;
      margin: 0;
      width: 100%;
      box-sizing: border-box;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: none;
    }

    #toolsDrawer .leaflet-control-layers {
      display: block !important;
    }

    #toolsDrawer .leaflet-control-layers-expanded {
      padding: 10px 12px;
      min-width: 0;
      width: 100%;
      background: transparent;
      color: #eef3f8;
    }

    #toolsDrawer .leaflet-control-layers-toggle {
      display: none !important;
    }

    #toolsDrawer .leaflet-control-layers label,
    #toolsDrawer .leaflet-control-layers span {
      color: #eef3f8;
    }

    #toolsDrawer .radar-control label {
      color: #eef3f8;
    }

    #toolsDrawer #toolsRadarMount {
      width: 100%;
    }

    #toolsDrawer .radar-control {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 10px 12px;
    }

    #toolsDrawer .radar-control input[type="range"] {
      width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 768px) {
      #map,
      #radarSweep,
      .leaflet-control-container,
      .leaflet-top,
      .leaflet-right,
      .leaflet-bottom {
        display: none !important;
      }

      body {
        background: #06090d;
        overflow-y: auto;
      }

      #toolsDrawer {
        display: none !important;
      }

      #stormBrand {
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        min-width: 0;
        max-width: none;
        display: block;
        padding: 10px 12px;
      }

      #stormBrand .brand-title {
        font-size: 24px;
      }

      #stormBrand .brand-weather,
      #stormBrand .brand-river,
      #stormBrand .brand-warning-intel,
      #stormBrand .brand-operational,
      #stormBrand .brand-monitoring {
        display: none !important;
      }

      #alertListPanel .panel-head {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
      }

      #alertListPanel .panel-title {
        width: 100%;
        font-size: 13px;
        letter-spacing: 0.08em;
      }

      #alertListPanel .panel-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
      }

      #alertListPanel .panel-actions .test-toggle-btn {
        min-width: 0;
        min-height: 34px;
        padding: 7px 6px;
        border-radius: 12px;
        font-size: 16px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      #alertListPanel .panel-actions .test-toggle-btn.icon-toggle-btn {
        background: rgba(229,57,53,0.22);
        color: #ffd1cf;
        border-color: rgba(229,57,53,0.55);
      }

      #alertListPanel .panel-actions .test-toggle-btn.icon-toggle-btn:hover {
        background: rgba(229,57,53,0.30);
      }

      #alertListPanel .panel-actions .test-toggle-btn.icon-toggle-btn.active {
        background: rgba(51,194,127,0.22);
        color: #c8ffe3;
        border-color: rgba(51,194,127,0.55);
      }

      #alertListPanel .panel-actions .test-toggle-btn.icon-toggle-btn.active:hover {
        background: rgba(51,194,127,0.30);
      }

      #alertListPanel .status-grid {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        padding: 10px;
      }

      #alertListPanel .status-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
      }

      #alertListPanel .status-row > div:last-child {
        color: #ffd166;
        font-weight: 800;
        text-align: right;
      }

      #alertListPanel .status-row.small {
        display: block;
        color: #aab7c4;
      }

      #alertListPanel .mobile-refresh-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 8px;
        color: #ffd166;
        font-size: 12px;
        font-weight: 800;
      }

      #alertListPanel {
        top: 92px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        overflow-y: auto;
      }

      #alertModalOverlay {
        padding: 10px;
      }

      #alertModal {
        width: 100%;
        max-height: 88vh;
        padding: 16px;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.0.4 UI polish
       - Compress top operational header so the map has more room.
       - Treat local AI as a thin decision-support ribbon.
       - De-emphasize lower-priority alert cards while preserving content.
       ------------------------------------------------------------------ */
    #stormBrand.tb-compact-header {
      top: 8px;
      left: 8px;
      padding: 7px 10px;
      gap: 10px;
      border-radius: 10px !important;
      max-width: calc(100vw - 16px);
      align-items: center;
    }
    #stormBrand.tb-compact-header .tb-logo-mark { width: 30px; height: 30px; flex-basis: 30px; }
    #stormBrand.tb-compact-header .brand-title { font-size: 23px; }
    #stormBrand.tb-compact-header .brand-sub { font-size: 10px; line-height: 1.05; margin-top: 2px; }
    #stormBrand.tb-compact-header .brand-cache-status { margin-top: 4px; font-size: 9px; line-height: 1.15; }
    #stormBrand.tb-compact-header .brand-weather,
    #stormBrand.tb-compact-header .brand-river,
    #stormBrand.tb-compact-header .brand-warning-intel,
    #stormBrand.tb-compact-header .brand-discussions,
    #stormBrand.tb-compact-header .brand-operational { padding-left: 10px; }
    #stormBrand.tb-compact-header .brand-weather { flex: 0 0 190px; min-width: 190px; }
    #stormBrand.tb-compact-header .brand-river { flex: 0 0 245px; min-width: 245px; max-width: 245px; }
    #stormBrand.tb-compact-header .brand-warning-intel { flex: 0 1 380px; min-width: 330px; max-width: 405px; padding-left: 10px; }
    #stormBrand.tb-compact-header .brand-discussions { flex: 1 1 auto; min-width: 250px; max-width: none; padding-left: 10px; padding-right: 252px; }
    #stormBrand.tb-compact-header .brand-operational { max-width: 290px !important; }
    #stormBrand.tb-compact-header .brand-weather-title,
    #stormBrand.tb-compact-header .brand-river-title,
    #stormBrand.tb-compact-header .brand-warning-intel-title,
    #stormBrand.tb-compact-header .brand-discussions-title,
    #stormBrand.tb-compact-header .brand-operational-title { font-size: 20px; line-height: 1; }
    #stormBrand.tb-compact-header .brand-warning-intel-body { grid-template-columns: minmax(162px, .86fr) minmax(142px, 1fr); gap: 7px; margin-top: 3px; min-height: 52px; flex: 1 1 auto; }
    #stormBrand.tb-compact-header .brand-warning-intel-grid { gap: 4px; margin-top: 0; }
    #stormBrand.tb-compact-header .brand-warning-intel-chip { min-height: 52px; padding: 6px 5px; border-radius: 8px; }
    #stormBrand.tb-compact-header .brand-warning-intel-chip .metric-label { font-size: 9px; }
    #stormBrand.tb-compact-header .brand-warning-intel-chip .metric-value { font-size: 20px; }
    #stormBrand.tb-compact-header .brand-warning-intel-note { min-height: 52px; font-size: 10px; padding: 6px 8px; }
    #stormBrand.tb-compact-header .brand-discussions-links { min-height: 52px; gap: 3px; margin-top: 3px; }
    #stormBrand.tb-compact-header .brand-discussion-link { grid-template-columns: 58px minmax(0, 1fr); gap: 7px; font-size: 9.6px; padding: 2px 8px; border-radius: 6px; }
    #stormBrand.tb-compact-header .brand-weather-grid { grid-template-columns: 72px 1fr; gap: 1px 7px; margin-top: 3px; }
    #stormBrand.tb-compact-header .brand-weather-grid .muted { font-size: 10px; }
    #stormBrand.tb-compact-header .brand-weather-grid .value { font-size: 11px; }
    #stormBrand.tb-compact-header .brand-weather-updated { font-size: 9px; margin-top: 3px; max-width: 185px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #stormBrand.tb-compact-header .brand-river-grid { gap: 4px; margin-top: 3px; }
    #stormBrand.tb-compact-header .brand-river-gauge { padding: 4px 5px; border-radius: 8px; }
    #stormBrand.tb-compact-header .brand-river-gauge-name { font-size: 9.5px; }
    #stormBrand.tb-compact-header .brand-river-gauge-stage { font-size: 10px; margin-top: 1px; }
    #stormBrand.tb-compact-header .brand-river-gauge-meta { font-size: 8.5px; }
    #stormBrand.tb-compact-header .brand-river .river-sparkline { height: 20px; margin-top: 3px; }
    #stormBrand.tb-compact-header .river-trend-indicator { min-height: 18px; padding: 2px 5px; margin-top: 3px; }
    #stormBrand.tb-compact-header .river-trend-symbol { width: 18px; height: 15px; font-size: 15px; }
    #stormBrand.tb-compact-header .river-trend-text { font-size: 8.5px; }
    #stormBrand.tb-compact-header .brand-river-summary { font-size: 8.5px; margin-top: 2px; }
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc { font-size: 9.5px; line-height: 1.1; max-width: 285px; }
    #stormBrand.tb-compact-header .brand-combined-grid { gap: 2px 13px; margin-top: 2px; }
    #stormBrand.tb-compact-header .brand-operational-state { font-size: 15px; margin-top: 2px; }
    #stormBrand.tb-compact-header .tools-button-row { gap: 4px; margin-top: 5px; }
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn { width: 25px; height: 25px; font-size: 13px; }

    #alertListPanel.tb-streamlined-alerts { width: 372px; padding: 10px 12px; top: 118px; bottom: 74px; max-height: none; }
    #aiImpactSidebarFooter.tb-ai-sidebar-footer { left: 12px; right: 78px; width: auto; height: 54px; }
    #alertListPanel.tb-streamlined-alerts .panel-title { font-size: 20px; line-height: 1; }
    #alertListPanel.tb-streamlined-alerts .panel-head { margin-bottom: 8px; }
    #alertListPanel.tb-streamlined-alerts .section-title { margin-top: 11px; margin-bottom: 5px; font-size: 13px; }
    #alertListPanel.tb-streamlined-alerts .status-grid { gap: 5px; }
    #alertListPanel.tb-streamlined-alerts .alert-item { padding: 8px 0; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact { padding: 6px 0; opacity: .92; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact .small { display: none; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact .countdown { margin-top: 3px; display: inline-flex; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact .alert-title-row { gap: 6px; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact .alert-link-btn { font-size: 12px; }

    #alertListPanel.tb-streamlined-alerts .alert-item-group { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
    #alertListPanel.tb-streamlined-alerts .alert-item-group .alert-title-row { min-width: 0; }
    #alertListPanel.tb-streamlined-alerts .alert-item-group .countdown { grid-column: 1 / -1; margin-top: 2px; }
    #alertListPanel.tb-streamlined-alerts .alert-group-count { font-size: 10px; font-weight: 900; border-radius: 999px; padding: 2px 6px; color: #cbd5e1; border: 1px solid rgba(203,213,225,.18); background: rgba(148,163,184,.09); white-space: nowrap; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations { grid-column: 1 / -1; display: flex !important; flex-direction: column; gap: 3px; margin-top: 5px; color: #dbeafe; font-size: 10.5px; line-height: 1.25; min-width: 0; overflow: visible !important; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .alert-group-expiration-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; white-space: normal; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .alert-group-expiration-label { color: #fbbf24; font-weight: 900; text-transform: uppercase; letter-spacing: .045em; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .alert-group-expiration-countdown { color: #f8fafc; font-weight: 800; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .alert-group-expiration-time { color: #93c5fd; font-weight: 800; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .expired .alert-group-expiration-countdown,
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .expired .alert-group-expiration-time { color: #f87171; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations strong { color: #fbbf24; font-weight: 900; }

    /* THUNDERBOARD 3.2.2: Active Linn County Alerts sidebar refinement pass. */
    #alertListPanel.tb-streamlined-alerts .alert-section {
      margin-top: 11px;
      padding-top: 9px;
      border-top: 1px solid rgba(126,195,255,0.13);
    }
    #alertListPanel.tb-streamlined-alerts .alert-section:first-of-type {
      border-top: 0;
      padding-top: 0;
    }
    #alertListPanel.tb-streamlined-alerts .alert-section .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 0;
      margin-bottom: 6px;
    }
    #alertListPanel.tb-streamlined-alerts .section-count-pill {
      font-family: Inter, system-ui, sans-serif;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .03em;
      color: #cbd5e1;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(15,23,42,.48);
      border-radius: 999px;
      padding: 2px 7px;
      white-space: nowrap;
      text-transform: none;
    }
    #alertListPanel.tb-streamlined-alerts .section-count-pill.active {
      color: #bbf7d0;
      border-color: rgba(34,197,94,.42);
      background: rgba(22,101,52,.20);
    }
    #alertListPanel.tb-streamlined-alerts .empty-alert-state {
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.35;
      padding: 6px 8px;
      border: 1px solid rgba(148,163,184,.12);
      border-radius: 10px;
      background: rgba(15,23,42,.34);
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-group {
      padding: 8px 8px;
      margin-bottom: 7px;
      border: 1px solid rgba(126,195,255,.13);
      border-radius: 11px;
      background: rgba(15,23,42,.34);
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-group:last-child {
      margin-bottom: 0;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-group .alert-title-row {
      grid-column: 1 / 2;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-group .pill-alert-colored {
      min-width: 34px;
      text-align: center;
    }
    #alertListPanel.tb-streamlined-alerts .alert-group-count {
      justify-self: end;
    }
    #alertListPanel.tb-streamlined-alerts .alert-group-expiration-row.next-row .alert-group-expiration-label,
    #alertListPanel.tb-streamlined-alerts .alert-group-expiration-row.expires-row .alert-group-expiration-label {
      color: #fbbf24;
    }
    #alertListPanel.tb-streamlined-alerts .alert-group-expiration-row.latest-row .alert-group-expiration-label {
      color: #93c5fd;
    }



    /* THUNDERBOARD 3.2.2 fix 1: sidebar scroll/padding polish for busy primary-warning states. */
    #alertListPanel.tb-streamlined-alerts {
      padding-bottom: 24px !important;
      scroll-padding-bottom: 96px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-section {
      margin-top: 10px;
      padding-top: 8px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary {
      margin-bottom: 6px;
      padding-bottom: 7px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary .alert-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary .alert-link-btn {
      flex: 1 1 auto;
      min-width: 0;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary .small {
      line-height: 1.24;
      margin-top: 2px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary .countdown {
      display: inline-flex;
      margin-top: 4px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item-primary .pill-primary {
      flex: 0 0 auto;
      min-width: auto;
      padding: 1px 6px;
      font-size: 9.5px;
      line-height: 1.25;
      letter-spacing: .045em;
    }
    #alertListPanel.tb-streamlined-alerts .iembot-launch-row {
      margin-bottom: 20px;
      padding-bottom: 4px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-section:last-of-type {
      margin-bottom: 14px;
    }


    /* THUNDERBOARD 3.2.2 fix 2: color-coded alert sidebar edge accents.
       Uses the same NWS product color palette as the map polygons/pills. */
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-primary,
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact,
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-group {
      position: relative;
      border-left: 4px solid var(--alert-edge-color, rgba(126,195,255,.55));
      padding-left: 9px !important;
      border-radius: 9px;
    }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-primary {
      background: linear-gradient(90deg, var(--alert-edge-glow, rgba(229,57,53,.13)), rgba(15,23,42,0) 64%);
    }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact:not(.alert-item-group) {
      background: linear-gradient(90deg, var(--alert-edge-glow, rgba(51,194,127,.11)), rgba(15,23,42,0) 64%);
    }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-group {
      border-left-color: var(--alert-edge-color, rgba(126,195,255,.72));
      box-shadow: inset 3px 0 0 var(--alert-edge-glow, rgba(126,195,255,.16));
    }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-primary + .alert-item.alert-item-primary,
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact + .alert-item.alert-item-compact {
      margin-top: 3px;
    }

    #aiImpactSidebarFooter.tb-ai-sidebar-footer { box-shadow: 0 8px 22px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,209,102,0.07) !important; }
    #aiImpactSidebarFooter.tb-ai-sidebar-footer .ai-impact-sidebar-frame { background: transparent; }

    @media (max-width: 900px) {
      #aiImpactSidebarFooter.tb-ai-sidebar-footer { left: 12px; right: 12px; height: 62px; }
    }


    /* Keep the left alert sidebar clear of the compact top header on smaller laptop displays. */
    @media (max-width: 1200px) {
      #alertListPanel.tb-streamlined-alerts { top: 128px; }
    }

    @media (max-height: 760px) {
      #alertListPanel.tb-streamlined-alerts { top: 132px; }
    }

    @media (max-width: 1060px) {
      #stormBrand.tb-compact-header .brand-discussions { display: none; }
    }

    @media (max-width: 1220px) {
      #stormBrand.tb-compact-header .brand-warning-intel { display: none; }
    }

    @media (max-width: 1100px) {
      #stormBrand.tb-compact-header .brand-river { display: none; }
      #stormBrand.tb-compact-header .brand-weather { flex-basis: 175px; min-width: 175px; }
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc { max-width: 250px; }
    }

    @media (max-width: 1280px) {
      #stormBrand .brand-controls-label { display: none; }
      #stormBrand .tb-map-tools-strip { padding-left: 5px; padding-right: 5px; }
    }

    @media (max-width: 1060px) {
      #stormBrand.tb-compact-header .tb-map-tools-strip .icon-toggle-btn { width: 24px; min-width: 24px; height: 24px; font-size: 12px; }
      #stormBrand.tb-compact-header .tb-map-tools-strip { gap: 3px; padding: 3px 4px; }
    }

    /* THUNDERBOARD 3.0.4 pass 13: dynamically keep the alert sidebar below the compact header.
       This fixes 13-inch laptop / short viewport layouts where the expanded alert panel
       could collide with the top operational header. JavaScript updates the variable
       from the actual rendered header height. */
    :root {
      --tb-alert-panel-top: 118px;
      --tb-alert-panel-bottom: 74px;
      --tb-header-clearance: 118px;
    }

    #alertListPanel.tb-streamlined-alerts {
      top: var(--tb-alert-panel-top, 118px) !important;
      bottom: var(--tb-alert-panel-bottom, 74px) !important;
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.0.4 readability bump
       Slightly increases the smallest compact UI text without undoing
       the streamlined layout work from the 3.0.4 polish passes.
       ------------------------------------------------------------------ */
    html, body { font-size: 14px; }
    .small { font-size: 13px !important; line-height: 1.35 !important; }

    #stormBrand.tb-compact-header .brand-title { font-size: 24px; }
    #stormBrand.tb-compact-header .brand-sub { font-size: 11px; line-height: 1.12; }
    #stormBrand.tb-compact-header .brand-cache-status { font-size: 10px; line-height: 1.2; }
    #stormBrand.tb-compact-header .brand-refresh-status { font-size: 10px; }
    /* Pass 14: keep compact header section titles visually matched. */
    #stormBrand.tb-compact-header .brand-weather-title,
    #stormBrand.tb-compact-header .brand-river-title,
    #stormBrand.tb-compact-header .brand-warning-intel-title,
    #stormBrand.tb-compact-header .brand-discussions-title,
    #stormBrand.tb-compact-header .brand-operational-title { font-size: 20px; line-height: 1; }
    #stormBrand.tb-compact-header .brand-weather-grid .muted { font-size: 11px; }
    #stormBrand.tb-compact-header .brand-weather-grid .value { font-size: 12.5px; }
    #stormBrand.tb-compact-header .brand-weather-updated { font-size: 10px; line-height: 1.2; }
    #stormBrand.tb-compact-header .brand-river-gauge-name { font-size: 10.5px; }
    #stormBrand.tb-compact-header .brand-river-gauge-stage { font-size: 11px; }
    #stormBrand.tb-compact-header .brand-river-gauge-meta,
    #stormBrand.tb-compact-header .brand-river-summary { font-size: 9.5px; }
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc { font-size: 10.5px; line-height: 1.16; }
    #stormBrand.tb-compact-header .brand-operational-state { font-size: 16px; }

    #alertListPanel.tb-streamlined-alerts .panel-title { font-size: 21px; }
    #alertListPanel.tb-streamlined-alerts .section-title { font-size: 14px; }
    #alertListPanel.tb-streamlined-alerts .alert-link-btn { font-size: 13.5px; line-height: 1.18; }
    #alertListPanel.tb-streamlined-alerts .alert-item.alert-item-compact .alert-link-btn { font-size: 13px; }
    #alertListPanel.tb-streamlined-alerts .alert-group-count { font-size: 11px; }
    #alertListPanel.tb-streamlined-alerts .countdown { font-size: 12px; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations { font-size: 11.5px; line-height: 1.32; }
    #alertListPanel.tb-streamlined-alerts .alert-group-expirations .alert-group-expiration-row { gap: 6px; }

    #aiImpactSidebarFooter.tb-ai-sidebar-footer { height: 62px; }

    /* THUNDERBOARD 3.2.1 fix 8: force readable text-only buttons inside the tray.
       A compact-header media rule was still shrinking any .icon-toggle-btn
       inside .tb-map-tools-strip to 24px.  These rules intentionally come
       later and are more specific so tray buttons remain full-width text
       buttons while the Map Tools toggle stays compact. */
    #stormBrand.tb-compact-header .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(104px, 1fr)) !important;
      gap: 8px !important;
    }

    #stormBrand.tb-compact-header .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid .icon-toggle-btn,
    #stormBrand .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid .icon-toggle-btn {
      width: 100% !important;
      min-width: 104px !important;
      max-width: none !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 11px !important;
      font-size: 11.5px !important;
      font-weight: 900 !important;
      letter-spacing: .045em !important;
      line-height: 1 !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
      color: #dbeafe;
    }

    #stormBrand.tb-compact-header .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid .icon-toggle-btn::before,
    #stormBrand.tb-compact-header .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid .icon-toggle-btn::after {
      content: none !important;
      display: none !important;
    }

    #stormBrand .tb-map-tools-panel {
      width: 286px !important;
      padding: 10px 12px 12px !important;
    }

    #stormBrand .tb-map-tools-panel-title {
      margin-bottom: 8px !important;
    }

    #stormBrand .tb-map-tools-section-label {
      margin-bottom: 7px !important;
    }


  

    /* THUNDERBOARD 3.2.1 fix 9: JS sync now preserves text labels in the Map Tools tray.
       These overrides keep the text labels readable and prevent icon-only styling from returning. */
    #stormBrand .tb-map-tools-tray .tb-map-tools-panel .tb-map-tools-grid .icon-toggle-btn {
      height: 36px !important;
      min-height: 36px !important;
      font-size: 12px !important;
      letter-spacing: .035em !important;
    }

    /* THUNDERBOARD 3.2.2 fix 4: clean Tools button and keep tray buttons text-only.
       Removes the toolbox icon and prevents inherited header button styles from
       making the Tools control look like a button nested inside another button. */
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      margin-top: 8px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      display: inline-flex !important;
      align-items: flex-start !important;
      flex-direction: column !important;
    }

    #stormBrand #mapToolsTray .tb-map-tools-icon {
      display: none !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      min-height: 30px !important;
      padding: 7px 14px !important;
      gap: 8px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(126,195,255,0.36) !important;
      background: rgba(8, 15, 23, 0.98) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.28) !important;
      color: #eef6ff !important;
      font-size: 12.5px !important;
      font-weight: 950 !important;
      letter-spacing: .055em !important;
      line-height: 1 !important;
    }

    #stormBrand #mapToolsTray.is-open #mapToolsTrayToggle.tb-map-tools-toggle {
      border-color: rgba(251,191,36,0.64) !important;
      box-shadow: inset 0 0 0 1px rgba(251,191,36,.16), 0 8px 18px rgba(0,0,0,.30) !important;
    }

    #stormBrand #mapToolsTray .tb-map-tools-label {
      display: inline-flex !important;
      align-items: center !important;
      color: inherit !important;
    }

    #stormBrand #mapToolsTray .tb-map-tools-caret {
      color: #ffd166 !important;
      margin-left: 1px !important;
    }

    #stormBrand #mapToolsTrayPanel.tb-map-tools-panel {
      width: 292px !important;
      padding: 11px 12px 12px !important;
    }

    #stormBrand #mapToolsTrayPanel .tb-map-tools-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }

    #stormBrand #mapToolsTrayPanel .tb-map-tools-grid .icon-toggle-btn,
    #stormBrand.tb-compact-header #mapToolsTrayPanel .tb-map-tools-grid .icon-toggle-btn,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsAudioToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsBriefingToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsOpsSnapshotToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsTimelinePage,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsStatusPage,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsRadarSweepToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsIowa511Toggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsIdotCamerasToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsRiverToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsStormReportsToggle,
    #stormBrand.tb-compact-header .test-toggle-btn.icon-toggle-btn#toolsStormCellsToggle {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 11px !important;
      font-size: 12px !important;
      font-weight: 950 !important;
      letter-spacing: .035em !important;
      line-height: 1 !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: center !important;
    }

    #stormBrand #mapToolsTrayPanel .tb-map-tools-grid .icon-toggle-btn::before,
    #stormBrand #mapToolsTrayPanel .tb-map-tools-grid .icon-toggle-btn::after {
      content: none !important;
      display: none !important;
    }



    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix4 Top Bar Brand/Ops balance
       - Stretch the operational header to the viewport like the footer.
       - Let panels flex/collapse instead of measuring OPS content in JS.
       - Rework OPS Snapshot into a compact state + metrics panel.
       ------------------------------------------------------------------ */
    #stormBrand,
    #stormBrand.tb-compact-header {
      left: 8px !important;
      right: 8px !important;
      width: auto !important;
      inline-size: auto !important;
      max-width: none !important;
      display: flex !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      gap: 10px !important;
      overflow: visible !important;
    }

    #stormBrand .brand-wrap {
      /* Keep the THUNDERBOARD identity card readable now that the header spans the viewport. */
      flex: 0 0 320px !important;
      min-width: 300px !important;
      max-width: 360px !important;
    }

    #stormBrand.tb-compact-header .brand-weather {
      flex: 0 0 210px !important;
      min-width: 190px !important;
      max-width: 225px !important;
    }

    #stormBrand.tb-compact-header .brand-river {
      /* River/Flood keeps its useful compact width and remains the first optional panel to collapse. */
      flex: 0 1 330px !important;
      min-width: 270px !important;
      max-width: 360px !important;
    }

    #stormBrand.tb-compact-header .brand-operational {
      /* OPS Snapshot takes the remaining width, but no longer squeezes the title card. */
      flex: 1 1 auto !important;
      min-width: 430px !important;
      max-width: none !important;
      overflow: hidden !important;
      padding-right: 2px !important;
    }

    #stormBrand .brand-operational-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    #stormBrand.tb-compact-header .brand-operational-title {
      /* Match EOC Weather / River / Flood title weight and presence. */
      font-size: 19px !important;
      line-height: 1 !important;
      letter-spacing: .055em !important;
      white-space: nowrap;
    }

    #stormBrand .brand-operational-state {
      /* Match the larger rounded status pill used in Active Linn County Alerts. */
      margin-top: 0 !important;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      min-width: 118px;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(126,195,255,.38);
      background: rgba(126,195,255,.10);
      font-size: 11.5px !important;
      font-weight: 950 !important;
      letter-spacing: .07em !important;
      line-height: 1 !important;
      white-space: nowrap;
      text-transform: uppercase;
    }

    #stormBrand .brand-operational.combined-watch .brand-operational-state {
      border-color: rgba(255,209,102,.45);
      background: rgba(255,209,102,.12);
    }

    #stormBrand .brand-operational.combined-required .brand-operational-state {
      border-color: rgba(255,138,128,.52);
      background: rgba(255,138,128,.14);
    }

    #stormBrand .brand-operational-summary {
      width: auto !important;
      max-width: none !important;
      margin-top: 4px !important;
      min-width: 0;
    }

    #stormBrand .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc {
      width: auto !important;
      max-width: none !important;
      font-size: 9.5px !important;
      line-height: 1.18 !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #stormBrand .brand-combined-grid,
    #stormBrand.tb-compact-header .brand-combined-grid {
      display: grid !important;
      grid-template-columns: minmax(90px, 1fr) minmax(56px, auto) minmax(56px, auto) !important;
      gap: 6px !important;
      margin-top: 6px !important;
      width: 100%;
      max-width: none;
    }

    #stormBrand .brand-ops-chip {
      min-width: 0;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      border-radius: 9px;
      padding: 4px 7px;
    }

    #stormBrand .brand-ops-chip .muted {
      font-size: 8.5px;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1;
    }

    #stormBrand .brand-ops-chip .value {
      margin-top: 2px;
      font-size: 11px;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #ffd166;
      font-weight: 900;
    }

    @media (max-width: 1240px) {
      #stormBrand.tb-compact-header .brand-river {
        display: none !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        min-width: 360px !important;
        flex: 1 1 auto !important;
      }
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-weather {
        display: none !important;
      }
      #stormBrand .brand-wrap {
        flex: 0 0 300px !important;
        min-width: 280px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        min-width: 320px !important;
      }
    }

    @media (max-width: 760px) {
      #stormBrand .brand-wrap {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        flex: 1 1 100% !important;
        min-width: 0 !important;
      }
    }

    @media (max-width: 820px) {
      #stormBrand.tb-compact-header {
        flex-wrap: wrap !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        order: 5;
        flex: 1 1 100% !important;
        border-left: 0 !important;
        border-top: 1px solid #27303a;
        padding-left: 0 !important;
        padding-top: 7px;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix6 Command Top Bar
       - Rebalances the full-width header into a command/status strip.
       - Removes the Tools tray from the THUNDERBOARD identity card flow so
         the header is not vertically stretched by controls.
       - Keeps OPS Snapshot wide, but makes the status pill a compact readable chip.
       ------------------------------------------------------------------ */
    #stormBrand,
    #stormBrand.tb-compact-header {
      padding: 7px 10px 8px !important;
      gap: 9px !important;
      align-items: stretch !important;
      min-height: 0 !important;
    }

    #stormBrand .brand-wrap {
      flex: 0 0 330px !important;
      min-width: 310px !important;
      max-width: 355px !important;
      padding-right: 10px !important;
      box-sizing: border-box !important;
    }

    #stormBrand.tb-compact-header .tb-logo-mark {
      width: 32px !important;
      height: 32px !important;
      flex-basis: 32px !important;
    }

    #stormBrand.tb-compact-header .brand-title {
      font-size: 24px !important;
      line-height: .96 !important;
    }

    #stormBrand.tb-compact-header .brand-sub {
      font-size: 9.5px !important;
      line-height: 1.05 !important;
      margin-top: 2px !important;
      letter-spacing: .06em !important;
    }

    #stormBrand .brand-cache-status {
      margin-top: 5px !important;
      font-size: 9.5px !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #stormBrand .brand-refresh-status {
      margin-top: 4px !important;
      font-size: 10.5px !important;
      gap: 7px !important;
      line-height: 1 !important;
    }

    #stormBrand .brand-refresh-status-label,
    #stormBrand .brand-refresh-status .countdown {
      font-size: 10.5px !important;
      line-height: 1 !important;
    }

    /* Put Tools in the far-right command corner instead of inside the title card. */
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      position: absolute !important;
      right: 14px !important;
      bottom: 9px !important;
      margin: 0 !important;
      z-index: 3600 !important;
      align-self: auto !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      min-height: 26px !important;
      height: 26px !important;
      padding: 0 11px !important;
      font-size: 11px !important;
      letter-spacing: .06em !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 6px 14px rgba(0,0,0,.24) !important;
    }

    #stormBrand #mapToolsTrayPanel.tb-map-tools-panel {
      top: calc(100% + 8px) !important;
      left: auto !important;
      right: 0 !important;
    }

    /* THUNDERBOARD 3.6.3: align Monitoring / Tools as a balanced two-button row above the LCD clock. */
    #stormBrand .brand-operational-state {
      position: absolute !important;
      top: 14px !important;
      right: 134px !important;
      width: 104px !important;
      min-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
      z-index: 2150 !important;
      font-size: 11.8px !important;
      letter-spacing: .07em !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      top: 14px !important;
      right: 18px !important;
      z-index: 2155 !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 104px !important;
      min-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      font-size: 11.8px !important;
      letter-spacing: .07em !important;
      box-sizing: border-box !important;
    }

    #stormBrand .tb-lcd-clock {
      right: 18px !important;
      width: 220px !important;
      min-width: 220px !important;
    }

    #stormBrand .tb-lcd-clock {
      position: absolute !important;
      top: 48px !important;
      right: 18px !important;
      bottom: 10px !important;
      width: 220px !important;
      min-width: 220px !important;
      height: auto !important;
      min-height: 42px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 2px 10px !important;
      border-radius: 8px !important;
      border: 1px solid rgba(126,195,255,.34) !important;
      background: linear-gradient(180deg, rgba(3,11,18,.78), rgba(0,0,0,.62)) !important;
      box-shadow: inset 0 0 12px rgba(126,195,255,.06), 0 0 10px rgba(126,195,255,.07) !important;
      color: #9ee7ff !important;
      font-family: 'Courier New', 'Roboto Mono', monospace !important;
      font-size: 20px !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      letter-spacing: .09em !important;
      text-shadow: 0 0 8px rgba(126,195,255,.55), 0 0 15px rgba(126,195,255,.18) !important;
      pointer-events: none !important;
      font-variant-numeric: tabular-nums !important;
    }


    @media (max-width: 1160px) {
      #stormBrand.tb-compact-header .brand-discussions,
      #stormBrand .brand-discussions { padding-right: 194px !important; }
      #stormBrand .tb-lcd-clock {
        width: 168px !important;
        min-width: 168px !important;
        min-height: 34px !important;
        font-size: 15px !important;
      }
    }

    #stormBrand.tb-compact-header .brand-weather {
      flex: 0 0 205px !important;
      min-width: 190px !important;
      max-width: 215px !important;
      padding-left: 10px !important;
    }

    #stormBrand.tb-compact-header .brand-river {
      flex: 0 1 300px !important;
      min-width: 255px !important;
      max-width: 320px !important;
      padding-left: 10px !important;
    }

    #stormBrand.tb-compact-header .brand-operational {
      flex: 1 1 auto !important;
      min-width: 420px !important;
      padding-left: 10px !important;
      padding-right: 118px !important; /* reserve the Tools corner */
      overflow: hidden !important;
    }

    #stormBrand .brand-operational-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      min-width: 0 !important;
    }

    #stormBrand.tb-compact-header .brand-weather-title,
    #stormBrand.tb-compact-header .brand-river-title,
    #stormBrand.tb-compact-header .brand-warning-intel-title,
    #stormBrand.tb-compact-header .brand-discussions-title,
    #stormBrand.tb-compact-header .brand-operational-title {
      font-size: 22px !important;
      line-height: .96 !important;
      letter-spacing: .055em !important;
    }

    #stormBrand .brand-operational-state {
      min-height: 28px !important;
      height: 28px !important;
      min-width: 116px !important;
      padding: 0 14px !important;
      font-size: 12px !important;
      letter-spacing: .07em !important;
      line-height: 1 !important;
      border-width: 1px !important;
      box-sizing: border-box !important;
    }

    #stormBrand .brand-operational-summary {
      margin-top: 3px !important;
    }

    #stormBrand .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc {
      font-size: 9.5px !important;
      line-height: 1.1 !important;
    }

    #stormBrand .brand-combined-grid,
    #stormBrand.tb-compact-header .brand-combined-grid {
      grid-template-columns: minmax(120px, 1fr) minmax(50px, auto) minmax(50px, auto) !important;
      gap: 5px !important;
      margin-top: 4px !important;
      padding-right: 0 !important;
    }

    #stormBrand .brand-ops-chip {
      padding: 3px 7px !important;
      border-radius: 8px !important;
      min-height: 26px !important;
      box-sizing: border-box !important;
    }

    #stormBrand .brand-ops-chip .muted {
      font-size: 8px !important;
    }

    #stormBrand .brand-ops-chip .value {
      font-size: 10.5px !important;
      margin-top: 1px !important;
    }

    @media (max-width: 1280px) {
      #stormBrand.tb-compact-header .brand-river {
        display: none !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        min-width: 360px !important;
      }
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-weather {
        display: none !important;
      }
      #stormBrand .brand-wrap {
        flex-basis: 300px !important;
        min-width: 280px !important;
      }
    }

    @media (max-width: 820px) {
      #stormBrand.tb-compact-header {
        flex-wrap: wrap !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding-right: 116px !important;
        border-left: 0 !important;
        border-top: 1px solid #27303a !important;
        padding-top: 7px !important;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix7 True Command Header
       - Decouples the Tools tray from the brand column so it can live in
         the far-right command corner of the full-width header.
       - Tightens vertical rhythm and makes OPS Snapshot feel less like an
         oversized horizontal panel.
       ------------------------------------------------------------------ */
    #stormBrand.tb-compact-header {
      position: absolute !important;
      box-sizing: border-box !important;
      min-height: 0 !important;
      padding: 7px 12px 7px !important;
      align-items: stretch !important;
    }

    #stormBrand .brand-wrap {
      position: static !important; /* lets the Tools tray anchor to the full header */
      flex: 0 0 340px !important;
      min-width: 320px !important;
      max-width: 365px !important;
    }

    #stormBrand.tb-compact-header .brand-title {
      font-size: 25px !important;
      line-height: .95 !important;
    }

    #stormBrand.tb-compact-header .brand-sub {
      font-size: 9.25px !important;
      line-height: 1.02 !important;
    }

    #stormBrand .brand-cache-status {
      margin-top: 4px !important;
      font-size: 9.25px !important;
    }

    #stormBrand .brand-refresh-status {
      margin-top: 3px !important;
      font-size: 10px !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      position: absolute !important;
      right: 13px !important;
      top: 10px !important;
      bottom: auto !important;
      margin: 0 !important;
      z-index: 4200 !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 14px !important;
      border-radius: 999px !important;
      font-size: 11.5px !important;
      min-width: 92px !important;
    }

    #stormBrand #mapToolsTrayPanel.tb-map-tools-panel {
      top: calc(100% + 9px) !important;
      right: 0 !important;
      left: auto !important;
    }

    #stormBrand.tb-compact-header .brand-weather {
      flex: 0 0 200px !important;
      min-width: 185px !important;
      max-width: 210px !important;
    }

    #stormBrand.tb-compact-header .brand-river {
      flex: 0 1 300px !important;
      min-width: 255px !important;
      max-width: 315px !important;
    }

    #stormBrand.tb-compact-header .brand-operational {
      flex: 1 1 auto !important;
      min-width: 410px !important;
      padding-right: 146px !important; /* permanent command corner reserve */
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }

    #stormBrand .brand-operational-head {
      min-height: 30px !important;
      align-items: center !important;
      padding-right: 0 !important;
    }

    #stormBrand.tb-compact-header .brand-operational-title {
      font-size: 23px !important;
      line-height: .94 !important;
      letter-spacing: .055em !important;
    }

    #stormBrand .brand-operational-state {
      height: 30px !important;
      min-height: 30px !important;
      min-width: 124px !important;
      padding: 0 16px !important;
      font-size: 12.5px !important;
      letter-spacing: .065em !important;
    }

    #stormBrand .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc {
      font-size: 9.25px !important;
      line-height: 1.08 !important;
      opacity: .95 !important;
    }

    #stormBrand .brand-combined-grid,
    #stormBrand.tb-compact-header .brand-combined-grid {
      grid-template-columns: minmax(140px, 1fr) 58px 58px !important;
      gap: 6px !important;
      margin-top: 5px !important;
    }

    #stormBrand .brand-ops-chip {
      min-height: 25px !important;
      padding: 3px 7px !important;
      border-radius: 8px !important;
    }

    #stormBrand .brand-ops-chip .muted {
      font-size: 7.75px !important;
      line-height: .95 !important;
    }

    #stormBrand .brand-ops-chip .value {
      font-size: 10.75px !important;
      line-height: 1 !important;
      margin-top: 1px !important;
    }

    @media (max-width: 1280px) {
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 136px !important;
      }
    }

    @media (max-width: 820px) {
      #stormBrand #mapToolsTray.tb-map-tools-tray {
        top: 9px !important;
        right: 10px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 126px !important;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix8 Command Controls Cluster
       - Groups MONITORING and Tools into a single right-side command zone.
       - Caps OPS Snapshot so it does not visually sprawl into the controls.
       - Keeps the top bar full-width but makes the right edge feel intentional.
       ------------------------------------------------------------------ */
    #stormBrand.tb-compact-header {
      padding: 7px 12px 7px !important;
      gap: 8px !important;
    }

    #stormBrand.tb-compact-header .brand-operational {
      position: relative !important;
      flex: 1 1 auto !important;
      min-width: 390px !important;
      padding-right: 252px !important; /* unified command cluster reserve */
    }

    #stormBrand .brand-operational-head {
      min-height: 24px !important;
      padding-right: 0 !important;
      align-items: flex-start !important;
    }

    #stormBrand.tb-compact-header .brand-operational-title {
      font-size: 23px !important;
      line-height: .95 !important;
    }

    /* The MONITORING state pill is now part of the right-side command cluster. */
    #stormBrand .brand-operational-state {
      position: absolute !important;
      right: 112px !important;
      top: 0 !important;
      height: 28px !important;
      min-height: 28px !important;
      min-width: 118px !important;
      max-width: 132px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      font-size: 11.25px !important;
      letter-spacing: .07em !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      right: 13px !important;
      top: 0 !important;
      bottom: auto !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      height: 28px !important;
      min-height: 28px !important;
      min-width: 90px !important;
      padding: 0 13px !important;
      border-radius: 999px !important;
      font-size: 11.25px !important;
      letter-spacing: .07em !important;
    }

    #stormBrand .brand-operational-summary {
      margin-top: 2px !important;
      max-width: 100% !important;
    }

    #stormBrand .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #stormBrand .brand-combined-grid,
    #stormBrand.tb-compact-header .brand-combined-grid {
      grid-template-columns: minmax(170px, 1fr) 54px 54px !important;
      gap: 5px !important;
      margin-top: 4px !important;
      max-width: 100% !important;
    }

    #stormBrand .brand-ops-chip {
      min-height: 24px !important;
      padding: 3px 7px !important;
    }

    @media (max-width: 1280px) {
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 232px !important;
        min-width: 350px !important;
      }
      #stormBrand .brand-operational-state {
        right: 104px !important;
        min-width: 108px !important;
        max-width: 120px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray {
        right: 11px !important;
      }
    }

    @media (max-width: 960px) {
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 0 !important;
        padding-bottom: 34px !important;
      }
      #stormBrand .brand-operational-state {
        top: auto !important;
        bottom: 0 !important;
        right: 104px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix12 River Readability
       - Uses the full header as the positioning parent for both MONITORING
         and Tools so the two right-side controls share the same top baseline.
       - Keeps the OPS Snapshot content reserved away from the controls.
       ------------------------------------------------------------------ */
    #stormBrand.tb-compact-header {
      position: absolute !important;
    }

    #stormBrand.tb-compact-header .brand-wrap,
    #stormBrand.tb-compact-header .brand-operational {
      position: static !important;
    }

    #stormBrand .brand-operational-state,
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      top: 12px !important;
      bottom: auto !important;
      height: 28px !important;
      min-height: 28px !important;
      box-sizing: border-box !important;
    }

    #stormBrand .brand-operational-state {
      right: 118px !important;
      min-width: 118px !important;
      max-width: 130px !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      right: 14px !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      height: 28px !important;
      min-height: 28px !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    #stormBrand.tb-compact-header .brand-operational {
      padding-right: 258px !important;
    }

    @media (max-width: 960px) {
      #stormBrand.tb-compact-header .brand-wrap,
      #stormBrand.tb-compact-header .brand-operational {
        position: relative !important;
      }
      #stormBrand .brand-operational-state {
        top: auto !important;
        bottom: 0 !important;
        right: 104px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
      }
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix17 River Status Pills
       - Moves the river condition/age text up beside the RIVER / FLOOD
         title so the gauge cards get cleaner vertical space.
       ------------------------------------------------------------------ */
    #stormBrand.tb-compact-header .brand-river-head {
      margin-bottom: 4px !important;
    }

    #stormBrand.tb-compact-header .brand-river-title {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }

    #stormBrand.tb-compact-header .brand-river-age {
      font-size: 9.5px !important;
      line-height: 1 !important;
      padding: 3px 7px !important;
      color: #c9d6e2 !important;
    }

    #stormBrand.tb-compact-header .brand-river-grid {
      margin-top: 0 !important;
    }

    #stormBrand.tb-compact-header .brand-river-summary {
      display: none !important;
    }


    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix25 OPS Snapshot Readability
       - Enlarges Trigger, SPC/MCD, Impacted, Primary, and All IA text.
       - Keeps the compact header layout but gives the metric chips more
         height and slightly wider columns.
       ------------------------------------------------------------------ */
    #stormBrand .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-detail,
    #stormBrand.tb-compact-header .brand-operational-spc {
      font-size: 12.25px !important;
      line-height: 1.22 !important;
      opacity: 1 !important;
      color: #e8f1f8 !important;
      letter-spacing: .01em !important;
    }

    #stormBrand .brand-operational-detail strong,
    #stormBrand.tb-compact-header .brand-operational-detail strong,
    #stormBrand.tb-compact-header .brand-operational-spc strong {
      font-size: 12.5px !important;
      font-weight: 950 !important;
      color: #0b1620 !important;
    }

    #stormBrand .brand-combined-grid,
    #stormBrand.tb-compact-header .brand-combined-grid {
      grid-template-columns: minmax(230px, 1fr) 72px 72px !important;
      gap: 7px !important;
      margin-top: 6px !important;
      align-items: stretch !important;
    }

    #stormBrand .brand-ops-chip {
      min-height: 32px !important;
      padding: 5px 8px !important;
      border-radius: 9px !important;
    }

    #stormBrand .brand-ops-chip .muted {
      font-size: 9.75px !important;
      line-height: 1 !important;
      letter-spacing: .07em !important;
      font-weight: 850 !important;
    }

    #stormBrand .brand-ops-chip .value {
      font-size: 13px !important;
      line-height: 1.04 !important;
      margin-top: 3px !important;
      font-weight: 950 !important;
    }

    @media (max-width: 1280px) {
      #stormBrand .brand-combined-grid,
      #stormBrand.tb-compact-header .brand-combined-grid {
        grid-template-columns: minmax(190px, 1fr) 66px 66px !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        font-size: 11.5px !important;
      }
      #stormBrand .brand-ops-chip .value {
        font-size: 12.25px !important;
      }
    }

    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix26 OPS trigger confidence color
       - Yellow: possible threshold language found in warning text.
       - Red: threshold language plus observed/reported/confirmed source.
       - Also prevents empty SPC objects from rendering as "{}".
       ------------------------------------------------------------------ */
    #stormBrand .brand-trigger-line {
      border-left: 3px solid rgba(126,195,255,.35) !important;
      padding-left: 7px !important;
      border-radius: 6px !important;
    }

    #stormBrand .brand-trigger-possible {
      color: #ffe08a !important;
      background: rgba(255,209,102,.08) !important;
      border-left-color: rgba(255,209,102,.95) !important;
    }

    #stormBrand .brand-trigger-possible strong {
      color: #ffd166 !important;
    }

    #stormBrand .brand-trigger-confirmed {
      color: #ffd7d2 !important;
      background: rgba(255,107,107,.10) !important;
      border-left-color: rgba(255,107,107,.98) !important;
    }

    #stormBrand .brand-trigger-confirmed strong {
      color: #ff8a80 !important;
    }

    /* ------------------------------------------------------------------
       THUNDERBOARD 3.2.9-fix29 Monitoring pill readability
       - Match MONITORING pill typography to the Tools pill.
       - Let the pill widen for longer operational states.
       ------------------------------------------------------------------ */
    #stormBrand .brand-operational-state {
      font-size: 12.5px !important;
      font-weight: 950 !important;
      letter-spacing: .055em !important;
      line-height: 1 !important;
      min-height: 30px !important;
      height: 30px !important;
      min-width: 126px !important;
      width: fit-content !important;
      max-width: 240px !important;
      padding: 7px 14px !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }



    /* THUNDERBOARD 3.6.3: final top-right cluster alignment.
       Keep Monitoring + Tools as a balanced two-button row above the LCD clock.
       This override is intentionally late so it wins over older compact-header rules. */
    #stormBrand .brand-operational-state {
      position: absolute !important;
      top: 14px !important;
      right: 134px !important;
      bottom: auto !important;
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
      z-index: 2150 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11.8px !important;
      line-height: 1 !important;
      letter-spacing: .07em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      margin: 0 !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      position: absolute !important;
      top: 14px !important;
      right: 18px !important;
      bottom: auto !important;
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      z-index: 2155 !important;
      align-items: stretch !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11.8px !important;
      line-height: 1 !important;
      letter-spacing: .07em !important;
      margin: 0 !important;
    }

    #stormBrand .tb-lcd-clock {
      right: 18px !important;
      width: 220px !important;
      min-width: 220px !important;
      max-width: 220px !important;
      top: 52px !important;
      bottom: 10px !important;
    }

    #stormBrand #mapToolsTrayPanel.tb-map-tools-panel {
      right: 0 !important;
      left: auto !important;
    }


    /* THUNDERBOARD 3.6.3: align top buttons to LCD clock edges.
       Monitoring is pinned to the left edge of the clock card; Tools is pinned
       to the right edge. The middle gap is intentionally wider for visual edge alignment. */
    #stormBrand .brand-operational-state {
      right: 154px !important;
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      top: 14px !important;
    }

    #stormBrand #mapToolsTray.tb-map-tools-tray {
      right: 18px !important;
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
      top: 14px !important;
    }

    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      height: 30px !important;
      min-height: 30px !important;
    }


    /* THUNDERBOARD 3.6.3: responsive Ops Snapshot / clock collision guard.
       On narrower browser widths, reserve the right-side clock/control column so
       Ops Snapshot chips do not slide underneath the LCD clock. */
    @media (max-width: 1380px) {
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 258px !important;
      }
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        box-sizing: border-box !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        min-width: 0 !important;
      }
      #stormBrand .brand-ops-chip-wide {
        min-width: 160px !important;
      }
      #stormBrand .brand-ops-chip:not(.brand-ops-chip-wide) {
        min-width: 58px !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 250px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .tb-lcd-clock {
        right: 16px !important;
        width: 198px !important;
        min-width: 198px !important;
        max-width: 198px !important;
        font-size: 17px !important;
      }
      #stormBrand .brand-operational-state {
        right: 124px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        font-size: 10.6px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray,
      #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
        right: 16px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        font-size: 10.6px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 226px !important;
      }
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        width: calc(100% - 218px) !important;
        max-width: calc(100% - 218px) !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 218px) !important;
      }
    }

    @media (max-width: 1080px) {
      /* Last-resort compact mode: keep data readable and prevent any overlap. */
      #stormBrand .tb-lcd-clock {
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
        font-size: 15px !important;
      }
      #stormBrand .brand-operational-state {
        right: 104px !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        font-size: 9.8px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray,
      #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        font-size: 9.8px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 196px !important;
      }
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        width: calc(100% - 188px) !important;
        max-width: calc(100% - 188px) !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 188px) !important;
      }
    }


    /* THUNDERBOARD 3.6.3: hide LCD clock on constrained widths.
       The clock is useful on the full EOC view, but on narrower screens it
       competes with Ops Snapshot. Hide it before it can layer over metrics. */
    @media (max-width: 1700px) {
      #stormBrand .tb-lcd-clock {
        display: none !important;
      }

      #stormBrand .brand-operational-state {
        top: 14px !important;
        right: 134px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 30px !important;
        min-height: 30px !important;
      }

      #stormBrand #mapToolsTray.tb-map-tools-tray,
      #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
        top: 14px !important;
        right: 18px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 30px !important;
        min-height: 30px !important;
      }

      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 252px !important;
      }

      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        width: 100% !important;
        max-width: 100% !important;
      }

      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: 100% !important;
      }
    }

    @media (max-width: 1120px) {
      #stormBrand .brand-operational-state {
        right: 116px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        font-size: 10.4px !important;
      }
      #stormBrand #mapToolsTray.tb-map-tools-tray,
      #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        font-size: 10.4px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 220px !important;
      }
    }


    /* THUNDERBOARD 3.6.3: responsive SPC / Watch / MCD mini chips. */
    #stormBrand .brand-monitoring-spc.spc-chip-row,
    #stormBrand .brand-operational-spc.spc-chip-row,
    #stormBrand.tb-compact-header .brand-operational-spc.spc-chip-row {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 4px !important;
      max-width: 100% !important;
      width: 100% !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: normal !important;
      line-height: 1.05 !important;
      margin-top: 2px !important;
    }

    #stormBrand .spc-mini-chip {
      display: inline-flex !important;
      align-items: center !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 18px !important;
      padding: 2px 6px !important;
      border-radius: 7px !important;
      border: 1px solid rgba(126,195,255,.22) !important;
      background: rgba(255,255,255,.045) !important;
      box-sizing: border-box !important;
      gap: 5px !important;
    }

    #stormBrand .spc-mini-label {
      color: #7ec3ff !important;
      font-weight: 950 !important;
      font-size: 8.4px !important;
      line-height: 1 !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      flex: 0 0 auto !important;
    }

    #stormBrand .spc-mini-value {
      color: #eef3f8 !important;
      font-weight: 900 !important;
      font-size: 9.4px !important;
      line-height: 1 !important;
      min-width: 0 !important;
      max-width: 190px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      flex: 1 1 auto !important;
    }

    #stormBrand .spc-mini-value a,
    #stormBrand .spc-product-link {
      color: #9fd3ff !important;
      text-decoration: none !important;
    }

    #stormBrand .spc-mini-value a:hover,
    #stormBrand .spc-product-link:hover {
      text-decoration: underline !important;
    }

    @media (max-width: 1700px) {
      #stormBrand .brand-operational-spc.spc-chip-row,
      #stormBrand.tb-compact-header .brand-operational-spc.spc-chip-row {
        gap: 3px !important;
      }
      #stormBrand .spc-mini-chip {
        height: 17px !important;
        padding: 2px 5px !important;
      }
      #stormBrand .spc-mini-value {
        max-width: 145px !important;
        font-size: 9px !important;
      }
    }

    @media (max-width: 1250px) {
      #stormBrand .spc-mini-value {
        max-width: 110px !important;
      }
    }


    /* THUNDERBOARD 3.6.3: compact LCD clock for constrained widths.
       Instead of fully hiding the clock on medium/narrow screens, show a short
       low-profile clock under Monitoring/Tools and above the Ops Snapshot chips. */
    @media (max-width: 1700px) {
      #stormBrand .tb-lcd-clock {
        display: flex !important;
        position: absolute !important;
        top: 72px !important;
        right: 18px !important;
        bottom: auto !important;
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12.8px !important;
        line-height: 1 !important;
        letter-spacing: .18em !important;
        border-radius: 8px !important;
        opacity: .96 !important;
        z-index: 2145 !important;
      }

      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 252px !important;
      }

      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        box-sizing: border-box !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        min-width: 0 !important;
      }

      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 250px) !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .tb-lcd-clock {
        right: 16px !important;
        width: 198px !important;
        min-width: 198px !important;
        max-width: 198px !important;
        font-size: 11.8px !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 226px !important;
      }
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        width: calc(100% - 218px) !important;
        max-width: calc(100% - 218px) !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 218px) !important;
      }
    }

    @media (max-width: 1080px) {
      /* Very narrow fallback: clock hides to protect the Ops Snapshot. */
      #stormBrand .tb-lcd-clock {
        display: none !important;
      }
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 196px !important;
      }
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-combined-grid {
        width: 100% !important;
        max-width: 100% !important;
      }
    }


    /* THUNDERBOARD 3.6.3: dock compact clock beside the ALL IA metric on constrained screens. */
    @media (max-width: 1700px) {
      #stormBrand .tb-lcd-clock {
        display: flex !important;
        position: absolute !important;
        top: 88px !important;
        right: 18px !important;
        bottom: auto !important;
        width: 114px !important;
        min-width: 114px !important;
        max-width: 114px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12.2px !important;
        line-height: 1 !important;
        letter-spacing: .13em !important;
        border-radius: 8px !important;
        opacity: .96 !important;
        z-index: 2145 !important;
      }

      /* Top text still reserves space for Monitoring/Tools; chip row only reserves the small clock cell. */
      #stormBrand.tb-compact-header .brand-operational {
        padding-right: 252px !important;
      }
      #stormBrand .brand-operational-summary {
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 126px) !important;
        max-width: calc(100% - 126px) !important;
        min-width: 0 !important;
      }
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-spc {
        max-width: calc(100% - 250px) !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .tb-lcd-clock {
        right: 16px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 11px !important;
        letter-spacing: .10em !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 112px) !important;
        max-width: calc(100% - 112px) !important;
      }
    }

    @media (max-width: 900px) {
      #stormBrand .tb-lcd-clock {
        display: none !important;
      }
      #stormBrand .brand-combined-grid {
        width: 100% !important;
        max-width: 100% !important;
      }
    }


    /* THUNDERBOARD 3.6.3: pin compact clock to bottom metric row on constrained screens. */
    @media (max-width: 1700px) {
      #stormBrand .tb-lcd-clock {
        display: flex !important;
        top: 128px !important;
        right: 18px !important;
        bottom: auto !important;
        width: 114px !important;
        min-width: 114px !important;
        max-width: 114px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11.8px !important;
        letter-spacing: .12em !important;
        z-index: 2145 !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 126px) !important;
        max-width: calc(100% - 126px) !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .tb-lcd-clock {
        top: 128px !important;
        right: 16px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 10.8px !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 112px) !important;
        max-width: calc(100% - 112px) !important;
      }
    }


    /* THUNDERBOARD 3.6.3: bottom-pin compact clock on constrained screens.
       Use bottom positioning instead of top positioning so the compact clock reliably
       sits on the lower metric row next to ALL IA regardless of header scaling. */
    @media (max-width: 1700px) {
      #stormBrand.tb-compact-header .tb-lcd-clock,
      #stormBrand .tb-lcd-clock {
        display: flex !important;
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important;
        right: 18px !important;
        width: 114px !important;
        min-width: 114px !important;
        max-width: 114px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11.8px !important;
        line-height: 1 !important;
        letter-spacing: .12em !important;
        border-radius: 8px !important;
        opacity: .96 !important;
        z-index: 2145 !important;
      }

      #stormBrand .brand-combined-grid {
        width: calc(100% - 126px) !important;
        max-width: calc(100% - 126px) !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand.tb-compact-header .tb-lcd-clock,
      #stormBrand .tb-lcd-clock {
        top: auto !important;
        bottom: 10px !important;
        right: 16px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 10.8px !important;
        letter-spacing: .10em !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 112px) !important;
        max-width: calc(100% - 112px) !important;
      }
    }


    /* THUNDERBOARD 3.6.3: restore complete Trigger/SPC text on constrained screens.
       The Ops Snapshot parent already reserves the right-side button/clock column; do
       not subtract that space a second time from Trigger/SPC text rows. */
    @media (max-width: 1700px) {
      #stormBrand .brand-operational-summary,
      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail,
      #stormBrand .brand-operational-spc,
      #stormBrand.tb-compact-header .brand-operational-spc,
      #stormBrand .brand-operational-spc.spc-chip-row,
      #stormBrand.tb-compact-header .brand-operational-spc.spc-chip-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      #stormBrand .brand-operational-detail,
      #stormBrand.tb-compact-header .brand-operational-detail {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      #stormBrand .brand-operational-spc.spc-chip-row,
      #stormBrand.tb-compact-header .brand-operational-spc.spc-chip-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: visible !important;
        white-space: normal !important;
      }

      #stormBrand .spc-mini-chip {
        flex: 0 1 auto !important;
        max-width: 100% !important;
      }

      #stormBrand .spc-mini-value {
        max-width: 170px !important;
      }

      /* Keep only the bottom metric row reserved for the compact clock. */
      #stormBrand .brand-combined-grid {
        width: calc(100% - 126px) !important;
        max-width: calc(100% - 126px) !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .spc-mini-value {
        max-width: 145px !important;
      }
      #stormBrand .brand-combined-grid {
        width: calc(100% - 112px) !important;
        max-width: calc(100% - 112px) !important;
      }
    }


    /* THUNDERBOARD 3.6.3: keep SPC chip values visible on constrained screens.
       Prevent flex from shrinking chip values down to zero-width label-only chips. */
    @media (max-width: 1700px) {
      #stormBrand .spc-mini-chip {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 74px !important;
        max-width: 100% !important;
      }

      #stormBrand .spc-mini-value {
        display: inline-block !important;
        flex: 0 1 auto !important;
        min-width: 38px !important;
        max-width: 165px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
    }

    @media (max-width: 1220px) {
      #stormBrand .spc-mini-chip {
        min-width: 70px !important;
      }
      #stormBrand .spc-mini-value {
        min-width: 34px !important;
        max-width: 125px !important;
      }
    }


    /* THUNDERBOARD 3.6.3: city label and Iowa border overlays. */
    .tb-city-label {
      pointer-events: none;
      white-space: nowrap;
      color: #dff1ff;
      font-family: 'Barlow Condensed', 'Inter', Arial, sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .055em;
      text-transform: uppercase;
      text-shadow:
        0 0 4px rgba(0,0,0,.98),
        0 0 8px rgba(0,0,0,.92),
        0 0 12px rgba(126,195,255,.35);
      transform: translate(-50%, -50%);
      opacity: .96;
    }
    .tb-city-label.major {
      color: #ffffff;
      font-size: 15px;
      text-shadow:
        0 0 4px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,.96),
        0 0 14px rgba(126,195,255,.46);
    }


    /* THUNDERBOARD 3.9.25: compact left identity card controls.
       - Vertical stoplight on the right edge of the THUNDERBOARD card.
       - Smaller clock and Tools button tucked into the same card so the
         Discussions panel can use the former right-side clock space. */
    #stormBrand.tb-compact-header .brand-wrap {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 78px !important;
      grid-template-rows: auto auto auto !important;
      column-gap: 8px !important;
      row-gap: 3px !important;
      position: relative !important;
      align-items: stretch !important;
      flex: 0 0 340px !important;
      min-width: 320px !important;
      max-width: 365px !important;
      padding-right: 0 !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .tb-logo-lockup {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
      min-width: 0 !important;
      align-self: start !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-cache-status {
      grid-column: 2 !important;
      grid-row: 1 !important;
      margin: 0 !important;
      min-height: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      overflow: visible !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-health-stoplight {
      flex-direction: column !important;
      gap: 3px !important;
      padding: 4px 4px !important;
      border-radius: 999px !important;
      min-width: 18px !important;
      width: 18px !important;
      box-sizing: border-box !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-health-light {
      width: 8px !important;
      height: 8px !important;
      flex: 0 0 8px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-refresh-status {
      grid-column: 1 !important;
      grid-row: 3 !important;
      margin-top: 1px !important;
      min-width: 0 !important;
      align-self: end !important;
    }

    #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      grid-column: 2 !important;
      grid-row: 2 !important;
      width: 78px !important;
      min-width: 78px !important;
      max-width: 78px !important;
      height: 22px !important;
      min-height: 22px !important;
      margin: 0 !important;
      align-self: center !important;
      justify-self: end !important;
      z-index: 2155 !important;
    }

    #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 78px !important;
      min-width: 78px !important;
      max-width: 78px !important;
      height: 22px !important;
      min-height: 22px !important;
      padding: 0 7px !important;
      border-radius: 8px !important;
      font-size: 9.5px !important;
      letter-spacing: .055em !important;
      line-height: 1 !important;
    }

    #stormBrand.tb-compact-header .tb-lcd-clock,
    #stormBrand .tb-lcd-clock {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      grid-column: 2 !important;
      grid-row: 3 !important;
      width: 78px !important;
      min-width: 78px !important;
      max-width: 78px !important;
      height: 22px !important;
      min-height: 22px !important;
      padding: 0 4px !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      letter-spacing: .045em !important;
      align-self: end !important;
      justify-self: end !important;
      box-sizing: border-box !important;
      pointer-events: none !important;
    }

    #stormBrand.tb-compact-header .brand-discussions,
    #stormBrand .brand-discussions {
      padding-right: 0 !important;
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-wrap {
        grid-template-columns: minmax(0, 1fr) 70px !important;
        flex-basis: 300px !important;
        min-width: 285px !important;
      }
      #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
      #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
      #stormBrand.tb-compact-header .tb-lcd-clock {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
      }
      #stormBrand.tb-compact-header .tb-lcd-clock { font-size: 10px !important; }
    }


    /* THUNDERBOARD 3.9.26: make identity text more readable in compact header. */
    #stormBrand.tb-compact-header .brand-title,
    #stormBrand .brand-title {
      font-size: 30px !important;
      line-height: .92 !important;
      letter-spacing: 1.15px !important;
    }

    #stormBrand.tb-compact-header .brand-sub,
    #stormBrand .brand-sub {
      font-size: 10.8px !important;
      line-height: 1.08 !important;
      letter-spacing: .075em !important;
      margin-top: 3px !important;
    }

    #stormBrand.tb-compact-header .tb-logo-mark,
    #stormBrand .tb-logo-mark {
      width: 40px !important;
      height: 40px !important;
      flex-basis: 40px !important;
    }

    #stormBrand.tb-compact-header .tb-logo-lockup,
    #stormBrand .tb-logo-lockup {
      gap: 12px !important;
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-title { font-size: 27px !important; }
      #stormBrand.tb-compact-header .brand-sub { font-size: 10px !important; }
      #stormBrand.tb-compact-header .tb-logo-mark { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
    }


    /* THUNDERBOARD 3.9.28: slightly larger compact clock in logo card. */
    #stormBrand.tb-compact-header .brand-wrap {
      grid-template-columns: minmax(0, 1fr) 88px !important;
    }

    #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      width: 84px !important;
      min-width: 84px !important;
      max-width: 84px !important;
      height: 23px !important;
      min-height: 23px !important;
    }

    #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 84px !important;
      min-width: 84px !important;
      max-width: 84px !important;
      height: 23px !important;
      min-height: 23px !important;
    }

    #stormBrand.tb-compact-header .tb-lcd-clock,
    #stormBrand .tb-lcd-clock {
      width: 88px !important;
      min-width: 88px !important;
      max-width: 88px !important;
      height: 26px !important;
      min-height: 26px !important;
      font-size: 13px !important;
      letter-spacing: .055em !important;
      padding: 0 5px !important;
    }


    /* THUNDERBOARD 3.9.29: move Tools left above refresh timers and use right column for a larger clock. */
    #stormBrand.tb-compact-header .brand-wrap {
      grid-template-columns: minmax(0, 1fr) 116px !important;
      grid-template-rows: auto 24px 28px !important;
      column-gap: 8px !important;
      row-gap: 3px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .tb-logo-lockup {
      grid-column: 1 !important;
      grid-row: 1 !important;
      align-self: start !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-cache-status {
      grid-column: 2 !important;
      grid-row: 1 !important;
      align-self: start !important;
      justify-self: end !important;
    }

    #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      grid-column: 1 !important;
      grid-row: 2 !important;
      justify-self: start !important;
      align-self: center !important;
      width: 92px !important;
      min-width: 92px !important;
      max-width: 92px !important;
      height: 22px !important;
      min-height: 22px !important;
    }

    #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 92px !important;
      min-width: 92px !important;
      max-width: 92px !important;
      height: 22px !important;
      min-height: 22px !important;
      font-size: 9.8px !important;
      padding: 0 7px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-refresh-status {
      grid-column: 1 !important;
      grid-row: 3 !important;
      align-self: end !important;
      margin-top: 0 !important;
    }

    #stormBrand.tb-compact-header .tb-lcd-clock,
    #stormBrand .tb-lcd-clock {
      grid-column: 2 !important;
      grid-row: 2 / span 2 !important;
      align-self: stretch !important;
      justify-self: end !important;
      width: 116px !important;
      min-width: 116px !important;
      max-width: 116px !important;
      height: auto !important;
      min-height: 52px !important;
      font-size: 15px !important;
      letter-spacing: .07em !important;
      padding: 0 7px !important;
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-wrap {
        grid-template-columns: minmax(0, 1fr) 98px !important;
      }
      #stormBrand.tb-compact-header .tb-lcd-clock {
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
        font-size: 13px !important;
      }
    }


    /* THUNDERBOARD 3.9.30: Tools menu opens to the right when button is in the left logo card. */
    #stormBrand #mapToolsTrayPanel.tb-map-tools-panel {
      left: 0 !important;
      right: auto !important;
      top: calc(100% + 8px) !important;
      transform: none !important;
    }


    /* THUNDERBOARD 3.9.32: keep Linn County Emergency Management on one subtitle line. */
    #stormBrand.tb-compact-header .brand-sub,
    #stormBrand .brand-sub {
      white-space: nowrap !important;
      font-size: 9.8px !important;
      letter-spacing: .038em !important;
      line-height: 1.08 !important;
    }


    /* THUNDERBOARD 3.9.33: align Warning Intelligence / Discussions title size with EOC Weather and River/Flood. */
    #stormBrand.tb-compact-header .brand-weather-title,
    #stormBrand.tb-compact-header .brand-river-title,
    #stormBrand.tb-compact-header .brand-warning-intel-title,
    #stormBrand.tb-compact-header .brand-discussions-title {
      font-size: 22px !important;
      line-height: .96 !important;
      letter-spacing: .055em !important;
    }


    /* THUNDERBOARD 3.9.35: stretch Discussion rows to fill header card height. */
    #stormBrand.tb-compact-header .brand-discussions,
    #stormBrand .brand-discussions {
      display: flex !important;
      flex-direction: column !important;
      align-self: stretch !important;
    }

    #stormBrand.tb-compact-header .brand-discussions-links,
    #stormBrand .brand-discussions-links {
      flex: 1 1 auto !important;
      min-height: 68px !important;
      align-content: stretch !important;
    }

    #stormBrand.tb-compact-header .brand-discussion-link,
    #stormBrand .brand-discussion-link {
      min-height: 18px !important;
      align-items: center !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
    }


    /* THUNDERBOARD 3.9.36: three-column logo-card control deck.
       Layout: [TOOLS] | [REFRESH/W/R] | [CLOCK]. */
    #stormBrand.tb-compact-header .brand-wrap {
      display: grid !important;
      grid-template-columns: 112px 72px 112px !important;
      grid-template-rows: auto 52px !important;
      column-gap: 8px !important;
      row-gap: 5px !important;
      align-items: stretch !important;
      flex: 0 0 344px !important;
      min-width: 330px !important;
      max-width: 365px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .tb-logo-lockup {
      grid-column: 1 / 4 !important;
      grid-row: 1 !important;
      align-self: start !important;
      min-width: 0 !important;
      padding-right: 26px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-cache-status {
      grid-column: 3 !important;
      grid-row: 1 !important;
      justify-self: end !important;
      align-self: start !important;
      margin: 0 !important;
      z-index: 3 !important;
    }

    #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
    #stormBrand #mapToolsTray.tb-map-tools-tray {
      grid-column: 1 !important;
      grid-row: 2 !important;
      justify-self: stretch !important;
      align-self: stretch !important;
      width: 112px !important;
      min-width: 112px !important;
      max-width: 112px !important;
      height: 52px !important;
      min-height: 52px !important;
      margin: 0 !important;
    }

    #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
    #stormBrand #mapToolsTrayToggle.tb-map-tools-toggle {
      width: 112px !important;
      min-width: 112px !important;
      max-width: 112px !important;
      height: 52px !important;
      min-height: 52px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
      letter-spacing: .075em !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
    }

    #stormBrand.tb-compact-header .brand-wrap .brand-refresh-status {
      grid-column: 2 !important;
      grid-row: 2 !important;
      align-self: stretch !important;
      justify-self: stretch !important;
      margin: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 2px !important;
      padding: 2px 0 !important;
      text-align: center !important;
      min-width: 0 !important;
      line-height: 1 !important;
    }

    #stormBrand.tb-compact-header .brand-refresh-status-label,
    #stormBrand.tb-compact-header .brand-refresh-status .countdown {
      display: block !important;
      width: 100% !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
    }

    #stormBrand.tb-compact-header .tb-lcd-clock,
    #stormBrand .tb-lcd-clock {
      grid-column: 3 !important;
      grid-row: 2 !important;
      justify-self: stretch !important;
      align-self: stretch !important;
      width: 112px !important;
      min-width: 112px !important;
      max-width: 112px !important;
      height: 52px !important;
      min-height: 52px !important;
      font-size: 15px !important;
      letter-spacing: .07em !important;
      padding: 0 7px !important;
      box-sizing: border-box !important;
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-wrap {
        grid-template-columns: 98px 62px 98px !important;
        flex-basis: 300px !important;
        min-width: 292px !important;
      }
      #stormBrand.tb-compact-header #mapToolsTray.tb-map-tools-tray,
      #stormBrand.tb-compact-header #mapToolsTrayToggle.tb-map-tools-toggle,
      #stormBrand.tb-compact-header .tb-lcd-clock {
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
      }
      #stormBrand.tb-compact-header .tb-lcd-clock { font-size: 13px !important; }
      #stormBrand.tb-compact-header .brand-refresh-status-label,
      #stormBrand.tb-compact-header .brand-refresh-status .countdown { font-size: 9px !important; }
    }


    /* THUNDERBOARD 3.9.37: give EOC Weather the same breathing room as other header cards. */
    #stormBrand.tb-compact-header .brand-weather,
    #stormBrand .brand-weather {
      flex: 0 0 250px !important;
      min-width: 235px !important;
      max-width: 265px !important;
      padding-left: 16px !important;
      padding-right: 14px !important;
      box-sizing: border-box !important;
    }

    #stormBrand.tb-compact-header .brand-weather-grid,
    #stormBrand .brand-weather-grid {
      grid-template-columns: 82px minmax(72px, 1fr) !important;
      gap: 2px 14px !important;
    }

    #stormBrand.tb-compact-header .brand-weather-grid .value,
    #stormBrand .brand-weather-grid .value {
      padding-right: 2px !important;
    }

    @media (max-width: 1180px) {
      #stormBrand.tb-compact-header .brand-weather,
      #stormBrand .brand-weather {
        flex-basis: 225px !important;
        min-width: 210px !important;
        max-width: 235px !important;
        padding-left: 12px !important;
        padding-right: 10px !important;
      }
      #stormBrand.tb-compact-header .brand-weather-grid,
      #stormBrand .brand-weather-grid {
        grid-template-columns: 72px minmax(64px, 1fr) !important;
        gap: 1px 10px !important;
      }
    }


    /* THUNDERBOARD 3.9.38: gold vertical separators between top header cards. */
    #stormBrand.tb-compact-header .brand-weather,
    #stormBrand.tb-compact-header .brand-river,
    #stormBrand.tb-compact-header .brand-warning-intel,
    #stormBrand.tb-compact-header .brand-discussions,
    #stormBrand .brand-weather,
    #stormBrand .brand-river,
    #stormBrand .brand-warning-intel,
    #stormBrand .brand-discussions {
      border-left-color: rgba(255, 209, 102, .72) !important;
      box-shadow: inset 1px 0 0 rgba(255, 209, 102, .10) !important;
    }


    /* THUNDERBOARD 3.9.39: full gold border around the entire top command bar. */
    #stormBrand,
    #stormBrand.tb-compact-header {
      border: 1px solid rgba(255, 209, 102, .72) !important;
      border-bottom-color: rgba(255, 209, 102, .92) !important;
      box-shadow: 0 0 0 1px rgba(255, 209, 102, .08), 0 10px 22px rgba(0,0,0,.35) !important;
      border-radius: 9px !important;
    }


    /* THUNDERBOARD 3.9.56: Keep River/Flood visible on smaller laptop headers.
       After removing Warning Intelligence, River/Flood should remain a primary top-bar card.
       SPC Outlook is allowed to hide first on constrained widths instead of River/Flood. */
    @media (max-width: 1180px) {
      #stormBrand.tb-compact-header .brand-discussions {
        display: none !important;
      }
      #stormBrand.tb-compact-header .brand-river {
        display: block !important;
        flex: 0 0 245px !important;
        min-width: 245px !important;
        max-width: 245px !important;
      }
    }

    @media (max-width: 1100px) {
      #stormBrand.tb-compact-header .brand-river {
        display: block !important;
        flex: 0 0 232px !important;
        min-width: 232px !important;
        max-width: 232px !important;
      }
      #stormBrand.tb-compact-header .brand-weather {
        flex: 0 0 172px !important;
        min-width: 172px !important;
        max-width: 172px !important;
      }
      #stormBrand.tb-compact-header .brand-river-gauge-name { font-size: 9px !important; }
      #stormBrand.tb-compact-header .brand-river-gauge-stage { font-size: 9.5px !important; }
      #stormBrand.tb-compact-header .brand-river-gauge-meta { font-size: 8px !important; }
    }

    @media (max-width: 960px) {
      #stormBrand.tb-compact-header .brand-river {
        display: none !important;
      }
    }


    /* THUNDERBOARD 3.9.57: stronger small-screen priority order.
       Preserve THUNDERBOARD, EOC Weather, and River/Flood first.
       Hide SPC Outlook earlier when the browser viewport cannot fit all cards. */
    @media (max-width: 1450px) {
      #stormBrand.tb-compact-header .brand-discussions,
      #stormBrand .brand-discussions {
        display: none !important;
      }
      #stormBrand.tb-compact-header .brand-river,
      #stormBrand .brand-river {
        display: block !important;
        flex: 0 0 270px !important;
        min-width: 250px !important;
        max-width: 285px !important;
        padding-left: 12px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
      }
      #stormBrand.tb-compact-header .brand-weather,
      #stormBrand .brand-weather {
        flex: 0 0 225px !important;
        min-width: 210px !important;
        max-width: 235px !important;
      }
    }

    @media (max-width: 1180px) {
      #stormBrand.tb-compact-header .brand-river,
      #stormBrand .brand-river {
        display: block !important;
        flex: 0 0 240px !important;
        min-width: 226px !important;
        max-width: 250px !important;
      }
      #stormBrand.tb-compact-header .brand-river-gauge-name { font-size: 9px !important; }
      #stormBrand.tb-compact-header .brand-river-gauge-stage { font-size: 9.5px !important; }
      #stormBrand.tb-compact-header .brand-river-gauge-meta { font-size: 8px !important; }
    }

    @media (max-width: 960px) {
      #stormBrand.tb-compact-header .brand-river,
      #stormBrand .brand-river {
        display: none !important;
      }
    }


    /* THUNDERBOARD 3.9.58: Restore a compact SPC Outlook card after River/Flood
       when there is enough open header space. It remains hidden only at very
       constrained widths. */
    @media (min-width: 1041px) and (max-width: 1450px) {
      #stormBrand.tb-compact-header .brand-discussions,
      #stormBrand .brand-discussions {
        display: flex !important;
        flex: 1 1 285px !important;
        min-width: 280px !important;
        max-width: none !important;
        padding-left: 10px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }
      #stormBrand.tb-compact-header .brand-discussions-heading,
      #stormBrand .brand-discussions-heading {
        gap: 7px !important;
      }
      #stormBrand.tb-compact-header .brand-discussions-title,
      #stormBrand .brand-discussions-title {
        font-size: 20px !important;
        line-height: .95 !important;
      }
      #stormBrand.tb-compact-header .brand-spc-valid-period,
      #stormBrand .brand-spc-valid-period {
        font-size: 8.5px !important;
        max-width: 150px !important;
      }
      #stormBrand.tb-compact-header .brand-discussions-links,
      #stormBrand .brand-discussions-links {
        min-height: 52px !important;
        gap: 4px !important;
        margin-top: 4px !important;
      }
      #stormBrand.tb-compact-header .brand-spc-risk-chip,
      #stormBrand .brand-spc-risk-chip {
        min-height: 50px !important;
        padding: 4px 5px !important;
      }
      #stormBrand.tb-compact-header .brand-spc-risk-chip .spc-chip-label,
      #stormBrand .brand-spc-risk-chip .spc-chip-label {
        font-size: 10px !important;
      }
      #stormBrand.tb-compact-header .brand-spc-risk-chip .spc-chip-value,
      #stormBrand .brand-spc-risk-chip .spc-chip-value {
        font-size: 14px !important;
      }
    }

    @media (max-width: 1040px) {
      #stormBrand.tb-compact-header .brand-discussions,
      #stormBrand .brand-discussions {
        display: none !important;
      }
    }


    /* THUNDERBOARD 3.9.59: allow SPC valid-period text to wrap cleanly
       into two lines on compact headers instead of being clipped. */
    #stormBrand.tb-compact-header .brand-spc-valid-period,
    #stormBrand .brand-spc-valid-period {
      display: inline-block !important;
      white-space: normal !important;
      line-height: 1.05 !important;
      max-width: 245px !important;
      overflow: hidden !important;
      text-overflow: clip !important;
      vertical-align: top !important;
    }

    @media (min-width: 1041px) and (max-width: 1450px) {
      #stormBrand.tb-compact-header .brand-spc-valid-period,
      #stormBrand .brand-spc-valid-period {
        max-width: 135px !important;
        font-size: 8.2px !important;
        line-height: 1.08 !important;
      }
      #stormBrand.tb-compact-header .brand-discussions-heading,
      #stormBrand .brand-discussions-heading {
        align-items: flex-start !important;
      }
    }


    /* THUNDERBOARD 3.9.60: fully remove hidden BJ Bot from hit-testing.
       The transparent popup/avatar could still intercept mouse events while hidden. */
    #bjBotPopup {
      visibility: hidden !important;
      pointer-events: none !important;
    }

    #bjBotPopup.is-visible {
      visibility: visible !important;
      pointer-events: auto !important;
    }

    #bjBotPopup:not(.is-visible) .bj-bubble,
    #bjBotPopup:not(.is-visible) .bj-avatar-wrap,
    #bjBotPopup:not(.is-visible) .bj-avatar,
    #bjBotPopup:not(.is-visible) img {
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-drag: none !important;
    }

    #bjBotPopup.is-visible .bj-bubble {
      pointer-events: auto !important;
    }

    #bjBotPopup.is-visible .bj-avatar-wrap,
    #bjBotPopup.is-visible .bj-avatar,
    #bjBotPopup.is-visible img {
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-drag: none !important;
    }


    .tb-performance-panel {
      margin-top: 6px;
      padding: 8px 9px;
      border: 1px solid rgba(255, 209, 102, 0.24);
      border-radius: 10px;
      background: rgba(5, 11, 20, 0.72);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
      color: #d7e3f4;
      font-size: 11px;
      line-height: 1.35;
      min-width: 220px;
    }

    .tb-performance-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 2px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .tb-performance-row:last-child { border-bottom: 0; }
    .tb-performance-label { color: rgba(215,227,244,0.72); white-space: nowrap; }
    .tb-performance-value { color: #ffd166; font-weight: 850; text-align: right; white-space: nowrap; }
    .tb-performance-muted { color: rgba(215,227,244,0.58); }


/* THUNDERBOARD 5.2.0 briefing mode polish */
body.tb-briefing-active #alertListPanel,
body.tb-briefing-active #aiImpactSidebarFooter,
body.tb-briefing-active #stormBrand .tb-map-tools-tray {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-18px) !important;
  transition: opacity .18s ease, transform .18s ease;
}

body.tb-briefing-active #aiImpactBottomDock {
  filter: saturate(1.08) brightness(1.08);
}

body.tb-briefing-active #briefingOverlay {
  background: rgba(3, 7, 12, 0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.tb-briefing-active #briefingPanel {
  width: min(1480px, calc(100vw - 36px));
  max-height: calc(100vh - var(--tb-header-clearance, 118px) - 92px);
  border-color: rgba(255, 209, 102, 0.38);
  box-shadow: 0 28px 90px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,209,102,.08);
}

body.tb-briefing-active .briefing-head {
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: 12px;
}

body.tb-briefing-active .briefing-title {
  font-size: 42px;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(126,195,255,.16);
}

body.tb-briefing-active .briefing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.tb-briefing-active .briefing-card.wide {
  grid-column: 1 / -1;
}

body.tb-briefing-active .briefing-card {
  background: linear-gradient(180deg, rgba(16,23,32,.96), rgba(10,16,24,.96));
  border-color: rgba(255,255,255,.13);
  padding: 14px;
}

body.tb-briefing-active .briefing-card-title {
  font-size: 24px;
  color: #ffd166;
}

body.tb-briefing-active .briefing-kpi {
  font-size: 42px;
}

body.tb-briefing-active .briefing-list li {
  margin: 7px 0;
  line-height: 1.35;
}

@media (max-width: 1050px) {
  body.tb-briefing-active .briefing-grid { grid-template-columns: 1fr; }
}


/* THUNDERBOARD 5.3.0 passive camera condition preview */
.camera-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 2460;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(3, 7, 12, 0.72);
  padding: calc(var(--tb-header-clearance, 118px) + 12px) 18px 70px;
  box-sizing: border-box;
}
.camera-preview-panel {
  width: min(880px, calc(100vw - 36px));
  max-height: calc(100vh - var(--tb-header-clearance, 118px) - 92px);
  overflow: auto;
  background: #0d1218;
  color: #eef3f8;
  border: 1px solid rgba(255, 209, 102, 0.32);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.64);
  padding: 16px;
}
.camera-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border-bottom:1px solid rgba(255,255,255,.10); padding-bottom:10px; margin-bottom:12px; }
.camera-preview-title { font-family:'Barlow Condensed', sans-serif; font-size:30px; text-transform:uppercase; letter-spacing:.8px; color:#ffd166; }
.camera-preview-close { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#eef3f8; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:900; }
.camera-preview-note { border:1px solid rgba(255,209,102,.25); background:rgba(255,209,102,.08); color:#ffe8a3; border-radius:12px; padding:9px 10px; font-size:13px; margin-bottom:10px; }
.camera-preview-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.camera-preview-metrics div { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:12px; padding:9px; text-align:center; }
.camera-preview-metrics span { display:block; font-size:10px; color:#aab7c4; text-transform:uppercase; letter-spacing:.07em; }
.camera-preview-metrics strong { display:block; color:#ffd166; font-size:23px; font-family:'Barlow Condensed', sans-serif; }
.camera-preview-section-title { margin:12px 0 6px; color:#7ec3ff; font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.camera-preview-item, .camera-preview-card, .camera-preview-empty { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:12px; padding:9px 10px; margin-bottom:7px; }
.camera-preview-item.flagged { border-color:rgba(250,204,21,.42); background:rgba(250,204,21,.08); }
.camera-preview-item-title { font-weight:900; color:#eef3f8; display:flex; gap:8px; flex-wrap:wrap; }
.camera-preview-item-title span { color:#ffd166; }
.camera-preview-reason { margin-top:5px; color:#cbd5e1; font-size:12px; line-height:1.35; }
@media (max-width: 700px) { .camera-preview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.camera-preview-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 0 0 10px; }
.camera-preview-scan-btn { border:1px solid rgba(126,195,255,.38); background:rgba(126,195,255,.12); color:#eef3f8; border-radius:10px; padding:8px 11px; font-weight:900; cursor:pointer; }
.camera-preview-scan-btn:hover { background:rgba(126,195,255,.22); }

.camera-preview-status { margin-left:auto; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:2px 7px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.camera-preview-status.status-no-action { color:#86efac; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.32); }
.camera-preview-status.status-watch { color:#fde68a; background:rgba(250,204,21,.10); border-color:rgba(250,204,21,.34); }
.camera-preview-status.status-review { color:#fecaca; background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.34); }


/* THUNDERBOARD 5.3.0 camera preview card polish */
.camera-preview-panel { width: min(1040px, calc(100vw - 36px)); }
.camera-preview-body { font-size: 13px; }
.camera-preview-passive-pill { border: 1px solid rgba(34,197,94,.30); color: #bbf7d0; background: rgba(34,197,94,.08); border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.camera-preview-scan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.camera-preview-scan-card { display: grid; grid-template-columns: 142px 1fr; gap: 10px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); border-radius: 14px; padding: 8px; min-width: 0; }
.camera-preview-scan-card.flagged { border-color: rgba(250,204,21,.42); background: rgba(250,204,21,.08); }
.camera-preview-thumb { width: 142px; height: 92px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.10); }
.camera-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-preview-scan-card-body { min-width: 0; }
.camera-preview-scan-card .camera-preview-item-title { align-items: center; }
.camera-preview-scan-card .camera-preview-status { margin-left: 0; }
.camera-preview-scan-card .camera-preview-reason { margin-top: 6px; }
@media (max-width: 850px) { .camera-preview-scan-grid { grid-template-columns: 1fr; } .camera-preview-scan-card { grid-template-columns: 112px 1fr; } .camera-preview-thumb { width: 112px; height: 78px; } }

.camera-impact-trigger-banner { border:1px solid rgba(126,195,255,.34); background:rgba(126,195,255,.08); color:#dbeafe; border-radius:12px; padding:8px 10px; margin:0 0 10px; font-size:12px; }
.camera-impact-trigger-banner strong { color:#ffd166; }


/* THUNDERBOARD 5.4.2 passive camera review notice */
.camera-review-notice {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 2475;
  width: min(360px, calc(100vw - 36px));
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: linear-gradient(180deg, rgba(18,24,34,.97), rgba(10,14,22,.97));
  color: #eef3f8;
  box-shadow: 0 20px 55px rgba(0,0,0,.62), 0 0 18px rgba(250,204,21,.12);
  transform: translateY(18px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.camera-review-notice.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.camera-review-notice-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 7px;
}
.camera-review-notice-body { font-size: 13px; line-height: 1.35; color: #dbe7f2; }
.camera-review-notice-body span { color: #fef3c7; }
.camera-review-notice-body em { color: #9ca3af; font-style: normal; font-size: 12px; }
.camera-review-notice-actions { display:flex; gap:8px; margin-top:10px; }
.camera-review-notice-actions button { border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.06); color:#eef3f8; padding:7px 10px; font-weight:900; cursor:pointer; }
.camera-review-notice-actions #cameraReviewOpenBtn { border-color: rgba(126,195,255,.38); background: rgba(126,195,255,.12); }
@media (max-width: 700px) { .camera-review-notice { left: 12px; right: 12px; bottom: 88px; width: auto; } }

/* 5.4.15: compact Day 1/2/3 SPC outlook matrix for smaller screens */
#stormBrand .brand-spc-day-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
  width: 100%;
}
#stormBrand .brand-spc-day-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 3px 4px;
  background: rgba(255,255,255,.035);
}
#stormBrand .brand-spc-day-row.active-day {
  border-color: rgba(255,209,102,.38);
  background: rgba(255,209,102,.055);
}
#stormBrand .brand-spc-day-link {
  color: #ffd166;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}
#stormBrand .brand-spc-day-link:hover { color: #fff0bd; text-decoration: underline; }
#stormBrand .brand-spc-day-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(42px, 1fr));
  gap: 3px;
  min-width: 0;
}
#stormBrand .brand-spc-day-valid {
  grid-column: 2;
  color: rgba(220,233,245,.66);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -1px;
}
#stormBrand .brand-spc-risk-chip.is-na {
  opacity: .58;
}
#stormBrand .brand-spc-day-row .brand-spc-risk-chip {
  min-width: 0;
  padding: 3px 4px;
  border-radius: 8px;
}
#stormBrand .brand-spc-day-row .brand-spc-risk-chip .brand-discussion-label,
#stormBrand .brand-spc-day-row .brand-spc-risk-chip .brand-discussion-value {
  font-size: 9px;
  line-height: 1.05;
}
@media (max-width: 1340px) {
  #stormBrand.tb-compact-header .brand-discussions,
  #stormBrand .brand-discussions {
    min-width: 330px !important;
  }
  #stormBrand .brand-spc-day-row {
    grid-template-columns: 45px minmax(0, 1fr);
  }
  #stormBrand .brand-spc-day-chips {
    grid-template-columns: repeat(4, minmax(36px, 1fr));
  }
}


/* 5.4.15.1: single-line SPC Day 1/2/3 button matrix */
#stormBrand .brand-spc-day-grid { gap: 2px !important; }
#stormBrand .brand-spc-day-row {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  padding: 2px 4px !important;
  min-height: 25px !important;
}
#stormBrand .brand-spc-day-link { font-size: 10px !important; }
#stormBrand .brand-spc-day-chips {
  grid-template-columns: repeat(4, minmax(52px, 1fr)) !important;
  gap: 2px !important;
}
#stormBrand .brand-spc-risk-chip.spc-chip-single {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  height: 20px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#stormBrand .brand-spc-day-valid { display: none !important; }
#stormBrand.tb-compact-header .brand-discussions-links { min-height: 0 !important; }
@media (max-width: 1340px) {
  #stormBrand .brand-spc-day-row { grid-template-columns: 42px minmax(0, 1fr) !important; }
  #stormBrand .brand-spc-day-chips { grid-template-columns: repeat(4, minmax(44px, 1fr)) !important; }
  #stormBrand .brand-spc-risk-chip.spc-chip-single {
    font-size: 9px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}


/* 5.4.16: browser-side app version refresh indicator */
#stormBrand .app-version-badge,
.app-version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  padding: 2px 7px;
  margin: 1px 0;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  color: #d9ffe9;
  background: rgba(51,194,127,.14);
  border-color: rgba(51,194,127,.50);
}
#stormBrand .app-version-badge.current,
.app-version-badge.current {
  color: #d9ffe9;
  background: rgba(51,194,127,.14);
  border-color: rgba(51,194,127,.50);
  box-shadow: 0 0 10px rgba(51,194,127,.12);
}
#stormBrand .app-version-badge.stale,
.app-version-badge.stale {
  color: #fff0bd;
  background: rgba(255,209,102,.18);
  border-color: rgba(255,209,102,.70);
  box-shadow: 0 0 12px rgba(255,209,102,.18);
}
#stormBrand .app-version-badge.error,
.app-version-badge.error {
  color: #ffd4d4;
  background: rgba(229,57,53,.15);
  border-color: rgba(229,57,53,.55);
}
#stormBrand .app-version-badge:hover,
.app-version-badge:hover {
  filter: brightness(1.12);
}


/* 5.4.16.7: HAL/SAL easter egg */
#tbHalSalEasterEgg {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(20, 28, 38, 0.52), rgba(0, 0, 0, 0.78));
  backdrop-filter: blur(3px);
}
#tbHalSalEasterEgg .tb-hal-card {
  position: relative;
  width: min(420px, calc(100vw - 36px));
  padding: 28px 28px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 102, 0.44);
  background: linear-gradient(180deg, rgba(13,18,24,.98), rgba(4,8,14,.98));
  color: #eef3f8;
  text-align: center;
  box-shadow: 0 22px 64px rgba(0,0,0,.62), 0 0 34px rgba(239,68,68,.16);
  transform: scale(.96);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
#tbHalSalEasterEgg .tb-hal-card.show {
  transform: scale(1);
  opacity: 1;
}
#tbHalSalEasterEgg .tb-hal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #eef3f8;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
#tbHalSalEasterEgg .tb-hal-eye {
  width: 104px;
  height: 104px;
  margin: 0 auto 18px;
  border-radius: 999px;
  border: 6px solid rgba(255,255,255,.18);
  background: radial-gradient(circle, #fff 0 5%, #ffcf6b 8% 13%, #ff4d3d 22% 42%, #5a0c0c 60%, #0b0f16 76%);
  box-shadow: 0 0 30px rgba(239,68,68,.46), inset 0 0 18px rgba(0,0,0,.72);
}
#tbHalSalEasterEgg.sal-mode .tb-hal-eye {
  background: radial-gradient(circle, #fff 0 5%, #9fe4ff 8% 13%, #7ec3ff 22% 42%, #12375a 60%, #0b0f16 76%);
  box-shadow: 0 0 30px rgba(126,195,255,.46), inset 0 0 18px rgba(0,0,0,.72);
}
#tbHalSalEasterEgg .tb-hal-eye-core {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.9), transparent 0 7%, transparent 21%);
}
#tbHalSalEasterEgg .tb-hal-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
}
#tbHalSalEasterEgg .tb-hal-subtitle {
  margin-top: 6px;
  color: #ffd166;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
#tbHalSalEasterEgg.sal-mode .tb-hal-subtitle { color: #7ec3ff; }
#tbHalSalEasterEgg .tb-hal-message {
  margin-top: 16px;
  color: #d6dde5;
  font-size: 15px;
  line-height: 1.45;
}
#tbHalSalEasterEgg .tb-hal-footer {
  margin-top: 18px;
  color: #9fb0bf;
  font-size: 12px;
}


/* 5.4.16.9: clean SPC loading placeholder before Day 1/2/3 matrix is populated */
#stormBrand .brand-spc-loading-message {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 195, 255, 0.26);
  border-radius: 9px;
  background: rgba(126, 195, 255, 0.08);
  color: #d6dde5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* THUNDERBOARD 6.0.0 county-mode feature gate */
[hidden],
.county-feature-hidden {
  display: none !important;
}

/* THUNDERBOARD 6.0.0-core-county3 county selector shell */
.tb-county-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 209, 102, 0.45);
  background: rgba(8, 13, 18, 0.72);
  border-radius: 10px;
  padding: 6px 8px;
  min-height: 34px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.tb-county-mode-control label {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffd166;
}

.tb-county-mode-control select {
  appearance: none;
  border: 1px solid rgba(126,195,255,0.30);
  border-radius: 8px;
  background: rgba(16, 23, 32, 0.96);
  color: #eef3f8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 22px 5px 8px;
  outline: none;
}

/* THUNDERBOARD 6.0.0-core-county3b county selector placement */
#countyModeControl {
  margin-left: 10px;
  margin-right: 8px;
  flex: 0 0 auto;
}

#countyModeSelect {
  min-width: 150px;
  max-width: 190px;
}

/* THUNDERBOARD 6.0.0-core-county3c county selector top-row placement */
#stormBrand > #countyModeControl,
#stormBrand .tb-county-mode-control {
  align-self: center;
  margin: 0 10px 0 8px;
  height: 34px;
  max-height: 34px;
}

#countyModeControl label {
  white-space: nowrap;
}

#countyModeSelect {
  width: 158px;
}

/* THUNDERBOARD 6.0.0-core-county3d county selector final placement */
#stormBrand.tb-compact-header {
  position: relative;
}

#stormBrand.tb-compact-header #countyModeControl {
  position: absolute !important;
  left: 270px;
  top: 58px;
  z-index: 1400;
  height: 28px;
  min-height: 28px;
  padding: 3px 6px;
  margin: 0 !important;
  border-radius: 8px;
}

#stormBrand.tb-compact-header #countyModeControl label {
  font-size: 9px;
  line-height: 1;
}

#stormBrand.tb-compact-header #countyModeSelect {
  width: 138px;
  min-width: 138px;
  max-width: 138px;
  height: 22px;
  font-size: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* THUNDERBOARD 6.0.0-core-county3e county selector left-brand placement */
#stormBrand.tb-compact-header #countyModeControl {
  left: 72px !important;
  top: 112px !important;
  width: 190px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 5px !important;
}

#stormBrand.tb-compact-header #countyModeSelect {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  height: 20px !important;
  font-size: 10px !important;
  padding: 1px 18px 1px 6px !important;
}

#stormBrand.tb-compact-header #countyModeControl label {
  font-size: 9px !important;
}

/* THUNDERBOARD 6.0.0-core-county3f county selector vertical correction */
#stormBrand.tb-compact-header #countyModeControl {
  left: 72px !important;
  top: 88px !important;
  width: 178px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 1px 5px !important;
  z-index: 1600 !important;
}

#stormBrand.tb-compact-header #countyModeSelect {
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  height: 18px !important;
  font-size: 9px !important;
  padding: 0 16px 0 5px !important;
}

#stormBrand.tb-compact-header #countyModeControl label {
  font-size: 8.5px !important;
}

/* THUNDERBOARD 6.0.0-core-county3g county selector aggressive lift */
#stormBrand.tb-compact-header #countyModeControl {
  left: 72px !important;
  top: 54px !important;
  width: 178px !important;
  height: 21px !important;
  min-height: 21px !important;
  padding: 1px 5px !important;
  z-index: 1700 !important;
}

#stormBrand.tb-compact-header #countyModeSelect {
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  height: 17px !important;
  font-size: 9px !important;
  padding: 0 16px 0 5px !important;
}

#stormBrand.tb-compact-header #countyModeControl label {
  font-size: 8.5px !important;
}

/* THUNDERBOARD 6.0.0-core-county3h county selector inside Tools panel */
#stormBrand.tb-compact-header #mapToolsTrayPanel #countyModeControl,
#mapToolsTrayPanel #countyModeControl {
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 30px !important;
  margin: 8px 0 10px 0 !important;
  padding: 5px 7px !important;
  display: flex !important;
  justify-content: space-between;
}

#mapToolsTrayPanel #countyModeSelect {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.tb-map-tools-county-row {
  border-bottom: 1px solid rgba(255, 209, 102, 0.18);
  margin-bottom: 8px;
}

/* THUNDERBOARD 9D: reduce Leaflet/CARTO white tile flashes during startup and tile reloads */
#map,
.leaflet-container,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-pane,
.leaflet-layer {
  background: #05070b !important;
}

.leaflet-tile {
  background-color: #05070b !important;
}

/* Prefer immediate dark tile swaps over fade-through-white during startup */
.leaflet-fade-anim .leaflet-tile,
.leaflet-zoom-animated,
.leaflet-tile-container {
  transition: none !important;
}

/* THUNDERBOARD 9E: make Linn city labels readable on dark basemap */
.tb-city-label {
  color: #f4f8ff !important;
  background: rgba(4, 9, 18, 0.72) !important;
  border: 1px solid rgba(180, 215, 255, 0.55) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 4px rgba(63, 167, 255, 0.35) !important;
  text-shadow: 0 1px 2px #000, 0 0 5px #000 !important;
}

.tb-city-label.major {
  color: #0b1620 !important;
  background: rgba(8, 18, 32, 0.86) !important;
  border-color: rgba(255, 210, 74, 0.85) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 6px rgba(255, 210, 74, 0.35) !important;
}

/* THUNDERBOARD 9O: radar tiles need transparent image backgrounds.
   Keep the map/panes dark, but do not paint every tile image black. */
img.leaflet-tile,
.leaflet-tile {
  background-color: transparent !important;
  background: transparent !important;
}


/* THUNDERBOARD 9AW: startup veil for initial data load */
.tb-initial-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(15, 23, 42, .78), rgba(2, 6, 12, .94) 58%, rgba(0, 0, 0, .98));
  backdrop-filter: blur(3px) brightness(.72);
  -webkit-backdrop-filter: blur(3px) brightness(.72);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .55s ease, visibility .55s ease;
}

body.tb-initial-load-complete .tb-initial-load-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tb-initial-load-card {
  width: min(560px, calc(100vw - 44px));
  border: 1px solid rgba(255, 210, 74, .72);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 18, 30, .96), rgba(4, 8, 15, .94));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 18px 60px rgba(0,0,0,.62),
    0 0 38px rgba(255, 210, 74, .10);
  padding: 22px 24px 20px;
  text-align: center;
}

.tb-initial-load-title {
  color: #f4f8ff;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.tb-initial-load-subtitle {
  margin-top: 9px;
  color: #b7c6d6;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .035em;
}

.tb-initial-load-bar {
  height: 8px;
  margin: 18px auto 0;
  max-width: 390px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
}

.tb-initial-load-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,210,74,.15), rgba(255,210,74,.95), rgba(126,195,255,.85));
  animation: tbInitialLoadSweep 1.35s ease-in-out infinite;
}

@keyframes tbInitialLoadSweep {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(255%); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-initial-load-bar span {
    animation: none;
    width: 100%;
  }
}

/* THUNDERBOARD 6.0.54: consolidated county-aware v5-style radar beam.
   This replaces the older circular/fan/ring radar sweep experiments.
   The JS positions a transparent rotating container at the selected NWS radar
   site. CSS draws one thin bright beam plus a soft blurred trail. */

body.radar-sweep-hidden #radarSweep,
body.radar-sweep-hidden #radarSweepDVN,
body.tb-low-power #radarSweep,
body.tb-low-power #radarSweepDVN {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Disable old circular NWS sweep class if it accidentally remains on the element. */
#radarSweep.tb-nws-radar-sweep,
#radarSweepDVN.tb-nws-radar-sweep {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Active v5-style beam container. */
body:not(.radar-sweep-hidden) #radarSweep.tb-v5-radar-beam,
body:not(.radar-sweep-hidden) #radarSweepDVN.tb-v5-radar-beam {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-clip: border-box !important;
  clip-path: none !important;
  mix-blend-mode: screen !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Soft blurred trail behind the beam. */
body:not(.radar-sweep-hidden) #radarSweep.tb-v5-radar-beam::before,
body:not(.radar-sweep-hidden) #radarSweepDVN.tb-v5-radar-beam::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 52px !important;
  transform: translateY(-50%) !important;
  transform-origin: 0 50% !important;
  clip-path: none !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(48,255,91,0) 0%,
    rgba(48,255,91,.025) 14%,
    rgba(76,255,112,.08) 45%,
    rgba(124,255,146,.18) 78%,
    rgba(210,255,220,.28) 100%
  ) !important;
  filter: blur(16px) !important;
  opacity: .55 !important;
  pointer-events: none !important;
}

/* Thin brighter beam core. */
body:not(.radar-sweep-hidden) #radarSweep.tb-v5-radar-beam::after,
body:not(.radar-sweep-hidden) #radarSweepDVN.tb-v5-radar-beam::after {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 9px !important;
  transform: translateY(-50%) !important;
  transform-origin: 0 50% !important;
  clip-path: none !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(76,255,112,0) 0%,
    rgba(76,255,112,.05) 22%,
    rgba(140,255,160,.24) 70%,
    rgba(238,255,238,.32) 100%
  ) !important;
  filter: blur(1.5px) !important;
  opacity: .58 !important;
  pointer-events: none !important;
}

@keyframes tbV5RadarBeamSpin {
  from { transform: translate(0, -50%) rotate(0deg); }
  to   { transform: translate(0, -50%) rotate(360deg); }
}

/* THUNDERBOARD 6.0.162: force the existing County selector visible in the Tools tray.
   This preserves the normal 99-county dropdown and does not add quick buttons. */
#mapToolsTrayPanel .tb-map-tools-county-row {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 8px 0 10px 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  border-radius: 10px !important;
  background: rgba(2, 6, 23, .36) !important;
}

#mapToolsTrayPanel #countyModeControl,
#mapToolsTrayPanel .tb-county-mode-control {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
}

#mapToolsTrayPanel #countyModeControl label,
#mapToolsTrayPanel .tb-county-mode-control label {
  display: block !important;
  color: #facc15 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

#mapToolsTrayPanel #countyModeSelect {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, .50) !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #e0f2fe !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 5px 8px !important;
  outline: none !important;
}

#mapToolsTrayPanel #countyModeSelect:focus {
  border-color: rgba(250, 204, 21, .95) !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, .18), 0 0 14px rgba(250, 204, 21, .18) !important;
}


/* THUNDERBOARD 6.0.162: County selector button polish.
   Turns the existing county dropdown into a clean full-width highlighted button. */
#mapToolsTrayPanel .tb-map-tools-county-row {
  display: block !important;
  margin: 8px 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#mapToolsTrayPanel #countyModeControl,
#mapToolsTrayPanel .tb-county-mode-control {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

#mapToolsTrayPanel #countyModeControl label,
#mapToolsTrayPanel .tb-county-mode-control label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  color: #facc15 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1 !important;
}

#mapToolsTrayPanel #countyModeControl::after,
#mapToolsTrayPanel .tb-county-mode-control::after {
  content: "▾" !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  color: #fde68a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
  opacity: .95 !important;
}

#mapToolsTrayPanel #countyModeSelect {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 30px 0 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(250, 204, 21, .86) !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .98)) !important;
  color: #fde68a !important;
  box-shadow:
    inset 0 0 0 1px rgba(250, 204, 21, .08),
    0 0 12px rgba(250, 204, 21, .10) !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-align-last: center !important;
  cursor: pointer !important;
  outline: none !important;
}

#mapToolsTrayPanel #countyModeSelect:hover {
  border-color: rgba(250, 204, 21, 1) !important;
  color: #fff7c2 !important;
  box-shadow:
    inset 0 0 0 1px rgba(250, 204, 21, .12),
    0 0 18px rgba(250, 204, 21, .20) !important;
}

#mapToolsTrayPanel #countyModeSelect:focus {
  border-color: rgba(56, 189, 248, .95) !important;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, .25),
    0 0 18px rgba(56, 189, 248, .22) !important;
}


/* THUNDERBOARD 6.0.162: County selector width fix.
   Let the county dropdown use the full Tools drawer width so long county names do not clip. */
#mapToolsTrayPanel .tb-map-tools-county-row {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#mapToolsTrayPanel #countyModeControl,
#mapToolsTrayPanel .tb-county-mode-control {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#mapToolsTrayPanel #countyModeSelect {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 10px !important;
  letter-spacing: .045em !important;
  padding-left: 8px !important;
  padding-right: 24px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* THUNDERBOARD 6.0.162: County selector layout fix.
   Prevent selector from clipping and overlapping the Operational section. */
#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 66px !important;
  box-sizing: border-box !important;
  margin: 8px 0 14px 0 !important;
  padding: 8px 8px 10px 8px !important;
  clear: both !important;
  overflow: visible !important;
  z-index: 5 !important;
}

#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row #countyModeControl,
#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row .tb-county-mode-control {
  display: block !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row #countyModeControl label,
#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row .tb-county-mode-control label {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row #countyModeSelect {
  display: block !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 28px 0 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  letter-spacing: .035em !important;
  line-height: 38px !important;
  z-index: 6 !important;
}

#stormBrand #mapToolsTrayPanel .tb-map-tools-county-row + .tb-map-tools-section {
  clear: both !important;
  margin-top: 0 !important;
}



.tb-dashboard-yellow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  background: #f6c343 !important;
  color: #101820 !important;
  border: 1px solid rgba(246,195,67,.95) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 14px rgba(246,195,67,.28) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}



.tb-header-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .25px !important;
  white-space: nowrap !important;
}



/* THUNDERBOARD 6.0.162: help/manual buttons. */
.tb-help-btn {
  border-color: rgba(125,211,252,.45) !important;
  background: rgba(125,211,252,.10) !important;
  color: #dff6ff !important;
  font-weight: 900 !important;
}
.tb-help-btn:hover {
  background: rgba(125,211,252,.20) !important;
  border-color: rgba(125,211,252,.72) !important;
}


/* THUNDERBOARD 6.0.162: dashboard Tools link-style buttons.
   Help / NWR Health / Radar Health are navigation links, not red alert toggles. */
#mapToolsTrayPanel .tb-tools-link-btn {
  background: linear-gradient(180deg, rgba(20,36,52,.96), rgba(12,24,36,.96)) !important;
  border-color: rgba(125,211,252,.34) !important;
  color: #e8f7ff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 0 1px rgba(0,0,0,.20) !important;
}

#mapToolsTrayPanel .tb-tools-link-btn:hover {
  background: linear-gradient(180deg, rgba(27,50,70,.98), rgba(14,30,45,.98)) !important;
  border-color: rgba(125,211,252,.64) !important;
  color: #ffffff !important;
}

#mapToolsTrayPanel .tb-tools-link-btn.active,
#mapToolsTrayPanel .tb-tools-link-btn.danger,
#mapToolsTrayPanel .tb-tools-link-btn.warn {
  background: linear-gradient(180deg, rgba(20,36,52,.96), rgba(12,24,36,.96)) !important;
  border-color: rgba(125,211,252,.34) !important;
  color: #e8f7ff !important;
}


/* THUNDERBOARD 6.0.162: dashboard tools help/health layout polish.
   Help, NWR Health, and Radar Health are navigation links, not red alert toggles. */
#mapToolsTrayPanel #toolsHelpPage,
#mapToolsTrayPanel #toolsNwrHealthPage,
#mapToolsTrayPanel #toolsRadarHealthPage,
#mapToolsTrayPanel .tb-tools-link-btn {
  background: linear-gradient(180deg, rgba(20,36,52,.96), rgba(12,24,36,.96)) !important;
  border-color: rgba(125,211,252,.34) !important;
  color: #e8f7ff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 0 1px rgba(0,0,0,.20) !important;
}

#mapToolsTrayPanel #toolsHelpPage:hover,
#mapToolsTrayPanel #toolsNwrHealthPage:hover,
#mapToolsTrayPanel #toolsRadarHealthPage:hover,
#mapToolsTrayPanel .tb-tools-link-btn:hover {
  background: linear-gradient(180deg, rgba(27,50,70,.98), rgba(14,30,45,.98)) !important;
  border-color: rgba(125,211,252,.64) !important;
  color: #ffffff !important;
}


/* THUNDERBOARD 6.0.162 bot persona polish */
body[data-bot-persona="ops"] #bjBotPopup .bj-bubble {
  border-color: rgba(126,195,255,.38);
  box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(126,195,255,.10);
}

body[data-bot-persona="ops"] #bjBotPopup .bj-bubble-title .small {
  background: linear-gradient(180deg, #dff6ff, #7dd3fc);
  color: #071018 !important;
  border-color: rgba(125,211,252,.55);
}

#bjBotGuideBtn {
  border-color: rgba(125,211,252,.36);
  background: rgba(125,211,252,.10);
  color: #dff6ff;
}

#bjBotGuideBtn:hover {
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.56);
}


/* THUNDERBOARD 6.0.162 bot quiet preview */
#bjBotPopup.tb-bot-preview-mode .bj-bubble {
  border-left-color: #7dd3fc !important;
  border-color: rgba(125,211,252,.38) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(125,211,252,.10) !important;
}

#bjBotPopup.tb-bot-preview-mode .bj-bubble-title .small {
  background: linear-gradient(180deg, #dff6ff, #7dd3fc) !important;
  color: #071018 !important;
  border-color: rgba(125,211,252,.55) !important;
}

#bjBotPopup.tb-bot-preview-mode .bj-bubble-text::before {
  content: "QUIET PREVIEW - ";
  color: #7dd3fc;
  font-weight: 950;
  letter-spacing: .04em;
}

/* ============================================================
   Thunderboard 6.0 County Picker Overlay
   Map/search-based Iowa county selector.
   Uses existing county <select> as source of truth.
   ============================================================ */

.tb-county-picker-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.tb-county-picker-button {
  border: 1px solid rgba(96, 165, 250, .75);
  background: linear-gradient(180deg, rgba(30, 64, 175, .92), rgba(15, 23, 42, .96));
  color: #eaf4ff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(37, 99, 235, .28);
}

.tb-county-picker-button:hover {
  border-color: rgba(147, 197, 253, .95);
  box-shadow: 0 0 22px rgba(59, 130, 246, .45);
}

.tb-county-picker-current {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.tb-county-picker-native-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tb-county-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(2, 6, 23, .78);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.tb-county-picker-backdrop.open {
  display: flex;
}

.tb-county-picker-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .16), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}

.tb-county-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.tb-county-picker-title {
  color: #f8fafc;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.tb-county-picker-subtitle {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}

.tb-county-picker-close {
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .85);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  cursor: pointer;
}

.tb-county-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 14px;
  padding: 16px;
}

.tb-county-picker-mapwrap {
  min-height: 560px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, rgba(30, 64, 175, .18), transparent 65%),
    rgba(15, 23, 42, .54);
  overflow: hidden;
  position: relative;
}

.tb-county-picker-svg {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
}

.tb-county-picker-county {
  fill: rgba(30, 41, 59, .88);
  stroke: rgba(148, 163, 184, .52);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .12s ease, stroke .12s ease, filter .12s ease;
}

.tb-county-picker-county:hover {
  fill: rgba(37, 99, 235, .72);
  stroke: rgba(191, 219, 254, .98);
  filter: drop-shadow(0 0 7px rgba(59, 130, 246, .65));
}

.tb-county-picker-county.selected {
  fill: rgba(37, 99, 235, .95);
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, .72));
}

.tb-county-picker-label {
  fill: rgba(226, 232, 240, .92);
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(2, 6, 23, .72);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.tb-county-picker-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 560px;
}

.tb-county-picker-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 12px;
  background: rgba(15, 23, 42, .9);
  color: #f8fafc;
  padding: 10px 11px;
  outline: none;
  font-weight: 700;
}

.tb-county-picker-search:focus {
  border-color: rgba(96, 165, 250, .85);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

.tb-county-picker-list {
  flex: 1;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(2, 6, 23, .32);
  padding: 6px;
}

.tb-county-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #dbeafe;
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.tb-county-picker-row:hover,
.tb-county-picker-row.selected {
  background: rgba(37, 99, 235, .62);
  color: #fff;
}

.tb-county-picker-help {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 820px) {
  .tb-county-picker-body {
    grid-template-columns: 1fr;
  }

  .tb-county-picker-mapwrap,
  .tb-county-picker-svg,
  .tb-county-picker-side {
    min-height: 360px;
  }
}

/* County picker visual fix: make generated SVG county map highly visible */
.tb-county-picker-svg {
  background: rgba(2, 6, 23, .22);
}

.tb-county-picker-county {
  fill: rgba(37, 99, 235, .45) !important;
  stroke: rgba(219, 234, 254, .9) !important;
  stroke-width: 1.8 !important;
  vector-effect: non-scaling-stroke;
}

.tb-county-picker-county:hover {
  fill: rgba(96, 165, 250, .78) !important;
  stroke: rgba(255, 255, 255, 1) !important;
}

.tb-county-picker-county.selected {
  fill: rgba(37, 99, 235, .98) !important;
  stroke: rgba(255, 255, 255, 1) !important;
  stroke-width: 3 !important;
}

.tb-county-picker-label {
  fill: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  stroke: rgba(2, 6, 23, .92) !important;
  stroke-width: 4px !important;
}

/* County picker scroll fix */
.tb-county-picker-list {
  overflow-y: scroll !important;
  max-height: 500px !important;
  min-height: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, .8) rgba(15, 23, 42, .7);
  -webkit-overflow-scrolling: touch;
}

.tb-county-picker-list::-webkit-scrollbar {
  width: 10px;
}

.tb-county-picker-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .7);
  border-radius: 999px;
}

.tb-county-picker-list::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, .75);
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, .9);
}

/* County picker header placement */
.tb-county-picker-header-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 7px;
  vertical-align: middle;
}

.tb-county-picker-header-slot .tb-county-picker-current {
  display: none !important;
}

.tb-county-picker-header-slot .tb-county-picker-button {
  padding: 4px 10px;
  min-height: 22px;
  font-size: 10px;
  line-height: 1;
  border-color: rgba(96, 165, 250, .9);
  background: linear-gradient(180deg, rgba(37, 99, 235, .95), rgba(30, 64, 175, .92));
  box-shadow: 0 0 12px rgba(37, 99, 235, .38);
}

#stormBrand .brand-sub .tb-county-picker-header-slot,
#stormBrand .brand-subline .tb-county-picker-header-slot,
#stormBrand .brand-version-row .tb-county-picker-header-slot {
  margin-top: 3px;
}

/* County picker moved to header: hide old Tools county selector block */
.tb-county-picker-tools-source-hidden {
  display: none !important;
}

/* County picker is now in the header; hide original Tools county selector row */
#mapToolsTrayPanel .tb-map-tools-county-row {
  display: none !important;
}

/* County picker moved to header: strongly hide original county selector/control */
html body #countyModeControl,
html body .tb-county-mode-control,
html body .tb-map-tools-county-row {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* County picker header pill height match */
.tb-county-picker-header-slot .tb-county-picker-button {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 10px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* County picker header pill vertical alignment */
.tb-county-picker-header-slot {
  position: relative !important;
  top: -1px !important;
}

.tb-county-picker-header-slot .tb-county-picker-button {
  vertical-align: middle !important;
}


/* THUNDERBOARD 6.0.173: River/Flood Show All county gauge list */
#stormBrand .brand-river-show-all-wrap {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

#stormBrand .brand-river-show-all {
  border: 1px solid rgba(125, 211, 252, .42);
  border-radius: 999px;
  background: rgba(15, 23, 42, .86);
  color: #7dd3fc;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  line-height: 1.1;
  cursor: pointer;
}

#stormBrand .brand-river-show-all:hover {
  border-color: rgba(125, 211, 252, .86);
  box-shadow: 0 0 12px rgba(56, 189, 248, .22);
}

.tb-river-all-note {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 10px;
  line-height: 1.35;
}

.tb-river-all-list {
  display: grid;
  gap: 8px;
}

.tb-river-all-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 12px;
  background: rgba(15, 23, 42, .82);
  color: #e5e7eb;
  padding: 9px 10px;
  cursor: pointer;
}

.tb-river-all-row:hover {
  border-color: rgba(125, 211, 252, .68);
  box-shadow: 0 0 16px rgba(56, 189, 248, .18);
}

.tb-river-all-main {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 5px;
}

.tb-river-all-id {
  font-weight: 1000;
  color: #93c5fd;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 54px;
}

.tb-river-all-name {
  font-weight: 900;
  color: #f8fafc;
}

.tb-river-all-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: #cbd5e1;
}

.tb-river-all-metrics em {
  font-style: normal;
  font-weight: 900;
  color: #86efac;
}

.tb-river-all-metrics em.action {
  color: #fde68a;
}

.tb-river-all-metrics em.flood,
.tb-river-all-metrics em.minor,
.tb-river-all-metrics em.moderate,
.tb-river-all-metrics em.major {
  color: #fb7185;
}


/* THUNDERBOARD 6.0.174: compact River/Flood Show All popup rows */
.tb-river-all-note {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.25 !important;
}

.tb-river-all-list {
  display: grid !important;
  gap: 6px !important;
}

.tb-river-all-row.tb-river-all-card-row {
  display: grid !important;
  grid-template-columns: 58px minmax(160px, 1fr) 92px 74px 34px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  width: 100% !important;
  text-align: left !important;
  border: 1px solid rgba(96, 165, 250, .28) !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, .76) !important;
  color: #e5e7eb !important;
  padding: 7px 9px !important;
  cursor: pointer !important;
  line-height: 1.1 !important;
}

.tb-river-all-row.tb-river-all-card-row:hover {
  border-color: rgba(125, 211, 252, .78) !important;
  background: rgba(15, 23, 42, .94) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, .18) !important;
}

.tb-river-all-id {
  font-size: 10px !important;
  font-weight: 1000 !important;
  color: #93c5fd !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.tb-river-all-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
}

.tb-river-all-stage {
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-align: right !important;
  color: #fef3c7 !important;
  white-space: nowrap !important;
}

.tb-river-all-status {
  font-size: 10px !important;
  font-weight: 1000 !important;
  text-align: center !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #86efac !important;
  white-space: nowrap !important;
}

.tb-river-all-status.action {
  color: #fde68a !important;
}

.tb-river-all-status.flood,
.tb-river-all-status.minor,
.tb-river-all-status.moderate,
.tb-river-all-status.major {
  color: #fb7185 !important;
}

.tb-river-all-trend {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 12px !important;
}

@media (max-width: 720px) {
  .tb-river-all-row.tb-river-all-card-row {
    grid-template-columns: 52px minmax(110px, 1fr) 76px 64px 28px !important;
    gap: 5px !important;
    padding: 6px 7px !important;
  }

  .tb-river-all-name {
    font-size: 10px !important;
  }

  .tb-river-all-stage,
  .tb-river-all-status {
    font-size: 9.5px !important;
  }
}


/* THUNDERBOARD 6.0.175: River/Flood Show All as exact card-row extension */
#alertModalOverlay.river-all-modal #alertModal {
  max-width: 720px;
}

#alertModalOverlay.river-all-modal .modal-section-title {
  display: none !important;
}

#alertModalOverlay.river-all-modal #modalDescription,
#alertModalOverlay.river-all-modal #modalInstruction {
  display: none !important;
}

#alertModalOverlay.river-all-modal #modalHeadline {
  white-space: normal !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
}

#alertModalOverlay.river-all-modal .tb-river-all-summary-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
}

#alertModalOverlay.river-all-modal .tb-river-all-extension-note {
  color: #9ca3af;
  font-size: 11px;
  margin: 0 0 8px 0;
}

#alertModalOverlay.river-all-modal .tb-river-all-card-extension {
  display: grid;
  gap: 5px;
}

/* Same visual language as the top River/Flood card rows */
#alertModalOverlay.river-all-modal .brand-river-gauge.tb-river-single-line {
  display: grid !important;
  grid-template-columns: 56px minmax(190px, 1fr) 104px 74px 36px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(96, 165, 250, .28) !important;
  background: rgba(15, 23, 42, .78) !important;
  color: #e5e7eb !important;
  text-align: left !important;
  cursor: pointer !important;
}

#alertModalOverlay.river-all-modal .brand-river-gauge.tb-river-single-line:hover {
  border-color: rgba(125, 211, 252, .78) !important;
  background: rgba(15, 23, 42, .94) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, .18) !important;
}

#alertModalOverlay.river-all-modal .tb-river-line-id {
  font-size: 10px !important;
  font-weight: 1000 !important;
  color: #93c5fd !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#alertModalOverlay.river-all-modal .tb-river-line-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
}

#alertModalOverlay.river-all-modal .tb-river-line-stage {
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-align: right !important;
  color: #fef3c7 !important;
  white-space: nowrap !important;
}

#alertModalOverlay.river-all-modal .tb-river-line-status {
  font-size: 10px !important;
  font-weight: 1000 !important;
  text-align: center !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#alertModalOverlay.river-all-modal .tb-river-line-trend {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  #alertModalOverlay.river-all-modal .brand-river-gauge.tb-river-single-line {
    grid-template-columns: 50px minmax(120px, 1fr) 82px 62px 28px !important;
    gap: 5px !important;
    padding: 6px 7px !important;
  }

  #alertModalOverlay.river-all-modal .tb-river-line-name,
  #alertModalOverlay.river-all-modal .tb-river-line-stage,
  #alertModalOverlay.river-all-modal .tb-river-line-status {
    font-size: 9.5px !important;
  }
}


/* THUNDERBOARD 6.0.176: River/Flood Show All anchored card-extension popover */
.tb-river-all-popover {
  position: fixed;
  z-index: 99980;
  overflow: auto;
  border: 1px solid rgba(125, 211, 252, .34);
  border-radius: 12px;
  background: rgba(6, 12, 22, .97);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .85),
    0 18px 45px rgba(0, 0, 0, .55),
    0 0 22px rgba(56, 189, 248, .16);
  padding: 8px;
  backdrop-filter: blur(6px);
}

.tb-river-all-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(96, 165, 250, .16);
  margin-bottom: 6px;
}

.tb-river-all-popover-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e0f2fe;
  line-height: 1;
}

.tb-river-all-popover-sub {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: .02em;
}

.tb-river-all-popover-close {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #cbd5e1;
  width: 24px;
  height: 24px;
  line-height: 20px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.tb-river-all-popover-close:hover {
  color: #ffffff;
  border-color: rgba(125, 211, 252, .75);
}

.tb-river-all-popover-list {
  display: grid;
  gap: 4px;
}

/* Same row rhythm as the River/Flood card, just inside the popover */
.tb-river-all-popover .brand-river-gauge.tb-river-single-line {
  display: grid !important;
  grid-template-columns: 50px minmax(110px, 1fr) 78px 62px 26px !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(96, 165, 250, .24) !important;
  background: rgba(15, 23, 42, .82) !important;
  color: #e5e7eb !important;
  text-align: left !important;
  cursor: pointer !important;
  line-height: 1.05 !important;
}

.tb-river-all-popover .brand-river-gauge.tb-river-single-line:hover {
  border-color: rgba(125, 211, 252, .78) !important;
  background: rgba(15, 23, 42, .97) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, .16) !important;
}

.tb-river-all-popover .tb-river-line-id {
  font-size: 9.5px !important;
  font-weight: 1000 !important;
  color: #93c5fd !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.tb-river-all-popover .tb-river-line-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
}

.tb-river-all-popover .tb-river-line-stage {
  font-size: 10px !important;
  font-weight: 1000 !important;
  text-align: right !important;
  color: #fef3c7 !important;
  white-space: nowrap !important;
}

.tb-river-all-popover .tb-river-line-status {
  font-size: 9.5px !important;
  font-weight: 1000 !important;
  text-align: center !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.tb-river-all-popover .tb-river-line-trend {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 11px !important;
}

@media (max-width: 760px) {
  .tb-river-all-popover {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
}


/* THUNDERBOARD 6.0.177: exact River/Flood card row geometry in Show All popover */
.tb-river-all-popover .brand-river-gauge.tb-river-single-line {
  display: grid !important;
  grid-template-columns: 42px 210px 62px 50px 18px !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 5px 6px 5px 7px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

.tb-river-all-popover .tb-river-line-id {
  width: 42px !important;
  max-width: 42px !important;
  color: #8fb4ff !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.tb-river-all-popover .tb-river-line-name {
  width: 210px !important;
  max-width: 210px !important;
  min-width: 0 !important;
  color: #dbeafe !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tb-river-all-popover .tb-river-line-stage {
  width: 62px !important;
  max-width: 62px !important;
  color: #ffe29b !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  text-align: right !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.tb-river-all-popover .tb-river-line-status {
  width: 50px !important;
  max-width: 50px !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.tb-river-all-popover .tb-river-line-status.major,
.tb-river-all-popover .tb-river-line-status.flood {
  color: #ff7b73 !important;
}

.tb-river-all-popover .tb-river-line-status.moderate,
.tb-river-all-popover .tb-river-line-status.action {
  color: #ffd166 !important;
}

.tb-river-all-popover .tb-river-line-status.normal {
  color: #5dff9d !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  margin-right: 0 !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-text {
  display: none !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-symbol {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.tb-river-all-popover-list {
  align-items: start !important;
}

@media (max-width: 760px) {
  .tb-river-all-popover .brand-river-gauge.tb-river-single-line {
    grid-template-columns: 38px minmax(130px, 1fr) 58px 48px 18px !important;
    width: 100% !important;
  }

  .tb-river-all-popover .tb-river-line-name {
    width: auto !important;
    max-width: none !important;
  }
}


/* THUNDERBOARD 6.0.178: persistent non-blocking update notice */
#tbPersistentVersionNotice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99990;
  display: none;
  max-width: min(430px, calc(100vw - 32px));
  pointer-events: auto;
}

.tb-version-notice-main {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(250, 204, 21, .72);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(24, 18, 4, .96), rgba(15, 23, 42, .96));
  color: #f8fafc;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    0 10px 26px rgba(0, 0, 0, .48),
    0 0 18px rgba(250, 204, 21, .22);
  padding: 10px 11px;
  backdrop-filter: blur(8px);
}

.tb-version-notice-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 0 14px rgba(250, 204, 21, .85);
}

.tb-version-notice-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.tb-version-notice-title {
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-version-notice-sub {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.25;
}

.tb-version-notice-reload {
  flex: 0 0 auto;
  border: 1px solid rgba(250, 204, 21, .72);
  border-radius: 999px;
  background: rgba(250, 204, 21, .14);
  color: #fde68a;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 10px;
  cursor: pointer;
}

.tb-version-notice-reload:hover {
  background: rgba(250, 204, 21, .24);
  color: #ffffff;
}

@media (max-width: 720px) {
  #tbPersistentVersionNotice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .tb-version-notice-main {
    align-items: flex-start;
  }
}


/* THUNDERBOARD 6.0.180: fullscreen persistent update alert */
#tbPersistentVersionNotice {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  display: none;
  max-width: none !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: auto !important;
  background:
    radial-gradient(circle at center, rgba(250, 204, 21, .18), rgba(0, 0, 0, .72) 48%, rgba(0, 0, 0, .88)),
    rgba(0, 0, 0, .62) !important;
  backdrop-filter: blur(4px) brightness(.72);
}

#tbPersistentVersionNotice .tb-version-notice-main {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: 18px minmax(260px, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(680px, calc(100vw - 48px)) !important;
  border: 2px solid rgba(255, 236, 138, .98) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 226, 78, .99), rgba(245, 158, 11, .98) 58%, rgba(180, 83, 9, .98)) !important;
  color: #111827 !important;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, .38),
    0 0 34px rgba(250, 204, 21, .78),
    0 0 100px rgba(250, 204, 21, .34),
    0 22px 70px rgba(0, 0, 0, .68) !important;
  padding: 20px 22px !important;
}

#tbPersistentVersionNotice .tb-version-notice-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  box-shadow:
    0 0 0 4px rgba(17, 24, 39, .18),
    0 0 18px rgba(17, 24, 39, .65) !important;
}

#tbPersistentVersionNotice .tb-version-notice-title {
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: #111827 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#tbPersistentVersionNotice .tb-version-notice-sub {
  margin-top: 7px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: rgba(17, 24, 39, .86) !important;
}

#tbPersistentVersionNotice .tb-version-notice-reload {
  border: 2px solid rgba(17, 24, 39, .72) !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, .94) !important;
  color: #fde68a !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  box-shadow: 0 0 18px rgba(17, 24, 39, .25) !important;
}

#tbPersistentVersionNotice .tb-version-notice-reload:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

@media (max-width: 720px) {
  #tbPersistentVersionNotice .tb-version-notice-main {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
    padding: 20px 18px !important;
  }

  #tbPersistentVersionNotice .tb-version-notice-title {
    font-size: 19px !important;
  }

  #tbPersistentVersionNotice .tb-version-notice-reload {
    width: 100% !important;
  }
}


/* THUNDERBOARD 6.0.181: center River/Flood Show All close X */
.tb-river-all-popover-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 16px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  vertical-align: middle !important;
}

.tb-river-all-popover-close::before,
.tb-river-all-popover-close::after {
  line-height: 1 !important;
}


/* THUNDERBOARD 6.0.182: match River/Flood popover trend arrow colors to top card */
.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.falling,
.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.falling .river-trend-symbol {
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, .72) !important;
  background: rgba(34, 197, 94, .10) !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.rising,
.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.rising .river-trend-symbol {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, .72) !important;
  background: rgba(239, 68, 68, .10) !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.steady,
.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.steady .river-trend-symbol {
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, .58) !important;
  background: rgba(250, 204, 21, .08) !important;
}

.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.unknown,
.tb-river-all-popover .tb-river-line-trend.tb-river-arrow-only .river-trend-indicator.unknown .river-trend-symbol {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, .42) !important;
  background: rgba(148, 163, 184, .06) !important;
}


/* THUNDERBOARD 6.0.197:
   Clean SPC outlook matrix styling.
   Category color provides risk meaning; yellow border/glow provides active selected state. */
#stormBrand .brand-spc-day-row.active-day {
  border-color: rgba(255, 209, 102, 0.72) !important;
  background: rgba(255, 209, 102, 0.065) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 209, 102, 0.18),
    0 0 10px rgba(255, 209, 102, 0.16) !important;
}

#stormBrand .brand-spc-risk-chip {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(148, 163, 184, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

/* Neutral / no-risk cells. */
#stormBrand .brand-spc-risk-chip.risk-none,
#stormBrand .brand-spc-risk-chip.risk-na,
#stormBrand .brand-spc-risk-chip.is-na {
  background: rgba(148, 163, 184, 0.13) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

/* General thunder / marginal green family. */
#stormBrand .brand-spc-risk-chip.risk-tstm,
#stormBrand .brand-spc-risk-chip.risk-thunder,
#stormBrand .brand-spc-risk-chip.risk-mrgl,
#stormBrand .brand-spc-risk-chip.risk-marginal {
  background: rgba(34, 197, 94, 0.24) !important;
  border-color: rgba(74, 222, 128, 0.62) !important;
  box-shadow:
    inset 0 0 0 1px rgba(74, 222, 128, 0.10),
    0 0 10px rgba(34, 197, 94, 0.16) !important;
}

/* Slight risk yellow family. */
#stormBrand .brand-spc-risk-chip.risk-slgt,
#stormBrand .brand-spc-risk-chip.risk-slight {
  background: rgba(234, 179, 8, 0.24) !important;
  border-color: rgba(250, 204, 21, 0.66) !important;
  box-shadow:
    inset 0 0 0 1px rgba(250, 204, 21, 0.10),
    0 0 10px rgba(234, 179, 8, 0.16) !important;
}

/* Enhanced risk orange family. */
#stormBrand .brand-spc-risk-chip.risk-enh,
#stormBrand .brand-spc-risk-chip.risk-enhanced {
  background: rgba(249, 115, 22, 0.26) !important;
  border-color: rgba(251, 146, 60, 0.70) !important;
  box-shadow:
    inset 0 0 0 1px rgba(251, 146, 60, 0.10),
    0 0 10px rgba(249, 115, 22, 0.18) !important;
}

/* Moderate / high risk red-purple family. */
#stormBrand .brand-spc-risk-chip.risk-mdt,
#stormBrand .brand-spc-risk-chip.risk-moderate {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(248, 113, 113, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(248, 113, 113, 0.10),
    0 0 10px rgba(239, 68, 68, 0.18) !important;
}

#stormBrand .brand-spc-risk-chip.risk-high {
  background: rgba(168, 85, 247, 0.30) !important;
  border-color: rgba(216, 180, 254, 0.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(216, 180, 254, 0.10),
    0 0 10px rgba(168, 85, 247, 0.20) !important;
}

/* Active selected layer/day highlight always wins over category border.
   Fill remains category-coded; border/glow shows selected/active state. */
#stormBrand .brand-spc-risk-chip.active {
  border-color: rgba(255, 209, 102, 0.95) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 209, 102, 0.28),
    0 0 12px rgba(255, 209, 102, 0.28) !important;
}