:root {
      --bg:             #EBF8FD;
      --surface:        rgba(255, 255, 255, 0.97);
      --surface-strong: rgba(255, 255, 255, 0.999);
      --text:           #0B2533;
      --muted:          #5B8E9F;
      --border:         rgba(0, 188, 218, 0.18);
      --line:           #C8EAF2;
      --accent:         #00BCDA;
      --teal:           #00BCDA;
      --warn:           #c07020;
      --err:            #dc2626;
      --ok:             #00937A;
      --shadow:         0 12px 30px rgba(0, 80, 110, 0.1);
      --shadow-soft:    0 6px 16px rgba(0, 80, 110, 0.07);
      --radius: 14px;
      --map-stage-height: clamp(390px, 45vh, 620px);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: "IBM Plex Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text);
      background: linear-gradient(145deg, #C4EAF6 0%, #D8F1FB 45%, #EBF8FD 100%);
      transition: background .4s ease;
      position: relative;
      overflow-x: hidden;
      isolation: isolate;
    }
    body.theme-sunny { background: linear-gradient(130deg, #fee89a 0%, #f5b456 38%, #c37b2f 100%); }
    body.theme-rain { background: linear-gradient(130deg, #0f4ca8 0%, #0a71b9 38%, #13233f 100%); }
    body.theme-thunderstorm { background: linear-gradient(150deg, #0e1432 0%, #1c1848 35%, #09091e 100%); }
    body.theme-cloudy { background: linear-gradient(130deg, #8294aa 0%, #64748b 40%, #334155 100%); }
    body.theme-night { background: radial-gradient(circle at 75% 10%, #40516f 0%, #1b2a42 40%, #0b1324 100%); }

    #ambientBackground {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      transform: translateZ(0);
    }
    .ambient-layer {
      position: absolute;
      inset: -12%;
      opacity: 0;
      transition: opacity .48s ease;
    }
    .ambient-base {
      inset: -6%;
      background:
        radial-gradient(75% 50% at 12% 6%, rgba(252, 226, 154, 0.24), rgba(252, 226, 154, 0)),
        radial-gradient(68% 54% at 86% 12%, rgba(146, 178, 219, 0.2), rgba(146, 178, 219, 0)),
        linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
      will-change: transform, opacity;
    }
    .ambient-clouds {
      background:
        radial-gradient(42% 28% at 18% 26%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
        radial-gradient(46% 26% at 72% 30%, rgba(242, 248, 255, 0.2), rgba(242, 248, 255, 0)),
        radial-gradient(40% 24% at 48% 62%, rgba(214, 229, 245, 0.17), rgba(214, 229, 245, 0));
      filter: blur(0.3px);
    }
    .ambient-precip {
      inset: -10%;
      background: none;
      mix-blend-mode: screen;
    }
    .ambient-glow {
      inset: -6%;
      background:
        radial-gradient(32% 24% at 10% 8%, rgba(255, 244, 194, 0.48), rgba(255, 244, 194, 0)),
        radial-gradient(46% 35% at 82% 16%, rgba(255, 223, 162, 0.22), rgba(255, 223, 162, 0));
    }

    body.ambient-neutral .ambient-base {
      opacity: 0.28;
      animation: ambient-pan 28s linear infinite;
    }
    /* ambient-clouds, ambient-precip, ambient-glow are replaced by the canvas
       particle system (ambientFX.js). Only ambient-base remains as a subtle
       colour-wash beneath the canvas layer. */
    body.ambient-clear .ambient-base         { opacity: 0.28; animation: ambient-pan 30s linear infinite; }
    body.ambient-cloudy .ambient-base        { opacity: 0.22; animation: ambient-pan 30s linear infinite; }
    body.ambient-rain .ambient-base          { opacity: 0.18; animation: ambient-pan 26s linear infinite; }
    body.ambient-thunderstorm .ambient-base  { opacity: 0.10; animation: ambient-pan 20s linear infinite; }
    body.ambient-snow .ambient-base          { opacity: 0.18; animation: ambient-pan 34s linear infinite; }
    body.ambient-night .ambient-base         { opacity: 0.28; animation: ambient-pan 42s linear infinite; }

    .app {
      position: relative;
      z-index: 1;
    }

    @keyframes ambient-pan {
      0% { transform: translate3d(-1.5%, -1.2%, 0); }
      100% { transform: translate3d(1.5%, 1.2%, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ambient-layer { animation: none !important; transition: none !important; }
      #ambientCanvas { display: none; }
    }

    .app {
      max-width: 1460px;
      margin: 0 auto;
      padding: 20px;
      display: grid;
      gap: 12px;
      overflow-anchor: none;
    }
    .app > #modePanel { order: -120; }
    .app > .workspace { order: -110; }
    .app > .hero-primary { order: -100; }
    .app > #cardsPanel { order: -90; }
    .app > #dayFilterPanel { order: -85; }
    .app > #nowcastPanel { order: -80; }
    .app > #tablePanel { order: -70; }
    .app > #chartsPanel { order: -60; }
    .app > #marineMetaPanel,
    .app > #marineChartsPanel,
    .app > #marineTablePanel { order: -50; }
    .app > #historicalPanel,
    .app > #assistantPanel { order: -20; }
    .app > #debugPanel { order: -10; }
    .app > #errorPanel { order: -5; }

    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
      gap: 12px;
      align-items: stretch;
    }
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(11px);
      padding: 18px;
      animation: fadeIn .32s ease;
    }
    .context-panel {
      border-color: rgba(120, 138, 168, 0.24);
      box-shadow: 0 10px 24px rgba(5, 15, 35, 0.14);
    }
    .map-panel {
      display: grid;
      grid-template-rows: auto minmax(360px, 1fr) auto;
      height: 100%;
    }
    .panel-subtle {
      background: linear-gradient(160deg, #f7fbff 0%, #eef4fc 100%);
      border-color: #cfdae9;
      box-shadow: var(--shadow-soft);
    }
    .metrics-panel {
      border-color: #c7d7ea;
      background: linear-gradient(155deg, #f9fcff 0%, #eff5fe 60%, #edf3fb 100%);
    }
    .analysis-panel, .detail-panel {
      border-color: #ccd9eb;
      background: linear-gradient(150deg, #f9fcff 0%, #f1f6fd 100%);
    }
    .utility-panel {
      border-color: #d6deea;
      background: linear-gradient(155deg, #f8fbff 0%, #f1f5fb 100%);
      box-shadow: var(--shadow-soft);
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .map-panel { padding: 0; overflow: hidden; }
    .map-panel .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(130deg, #f8fbff 0%, #e9f1ff 100%);
    }
    .panel-head h1 {
      margin: 0;
      font-size: clamp(1.3rem, 1.45vw, 1.7rem);
      letter-spacing: .01em;
    }
    .subtitle {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.4;
    }
    .chip-row {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 11px;
      border: 1px solid #c8d5ea;
      background: #f8fbff;
      color: #27405f;
      font-size: .74rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .chip.strong {
      border-color: #88afe4;
      background: linear-gradient(130deg, #e1edff, #d6e8ff);
      color: #0b3d86;
    }
    .chip.ok {
      border-color: #87c8ba;
      background: linear-gradient(130deg, #e6fffb, #d8f6f1);
      color: #0c615b;
    }
    .chip.warn {
      border-color: #f0bd8c;
      background: linear-gradient(130deg, #fff1e3, #ffe6ca);
      color: #8a4f09;
    }

    .map-stage {
      position: relative;
      min-height: var(--map-stage-height);
      height: 100%;
      background: #dce7f5;
      overflow: hidden;
    }
    #cityMapFrame {
      width: 100%;
      height: 100%;
      border: 0;
      filter: saturate(1.04) contrast(1.02);
    }
    .map-stage #cityMapFrame .leaflet-container {
      width: 100% !important;
      height: 100% !important;
    }
    .map-stage #cityMapFrame .maplibregl-canvas-container,
    .map-stage #cityMapFrame .maplibregl-canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .leaflet-container { font: inherit; background: #dce7f5; }
    .map-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(8, 18, 37, 0.53), rgba(8, 18, 37, 0.04) 42%),
        radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
      pointer-events: none;
    }
    .map-overlay {
      position: absolute;
      z-index: 4;
      left: 14px;
      top: 82px;          /* clear Leaflet zoom buttons (~60px) */
      max-width: min(60%, 320px);
      border: 1px solid rgba(194, 210, 232, 0.5);
      border-radius: 10px;
      padding: 6px 10px;
      background: rgba(10, 22, 45, 0.72);
      color: #eaf2ff;
      box-shadow: 0 6px 18px rgba(5, 15, 34, 0.28);
      pointer-events: none;
    }
    .map-city { margin: 0; font-size: .8rem; font-weight: 700; }
    .map-meta { margin: 3px 0 0; color: #a0b8d8; font-size: .68rem; line-height: 1.3; }
    .timeline-wrap {
      padding: 12px 14px 14px;
      border-top: 1px solid #ced9e7;
      background: linear-gradient(130deg, #f8fbff 0%, #eef4fc 100%);
    }
    .timeline-label {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #365273;
      margin-bottom: 7px;
    }
    .timeline-bar {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .timeline-bar::-webkit-scrollbar { height: 7px; }
    .timeline-bar::-webkit-scrollbar-thumb { background: #b7c6de; border-radius: 999px; }
    .time-chip {
      border-radius: 999px;
      border: 1px solid #cad7e8;
      padding: 4px 9px;
      font-size: .73rem;
      font-weight: 600;
      background: #ffffff;
      color: #27405f;
      white-space: nowrap;
    }
    .time-chip.active {
      border-color: #6b9be0;
      background: linear-gradient(130deg, #e2eeff, #d7e8ff);
      color: #0f458d;
    }
    .timeline-empty {
      color: #5d6f8a;
      font-size: .8rem;
      padding: 1px 2px;
    }

    .controls {
      display: grid;
      gap: 14px;
      background: linear-gradient(155deg, #f8fbff 0%, #eef4fd 60%, #edf2fb 100%);
    }
    .control-panel {
      position: sticky;
      top: 10px;
    }
    .controls h3 {
      margin: 0;
      font-size: 1rem;
      color: #173963;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .control-sections {
      display: grid;
      gap: 12px;
    }
    .control-section {
      border: 1px solid #ccd9ea;
      border-radius: 13px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.86);
      display: grid;
      gap: 9px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .control-section h4 {
      margin: 0;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #204365;
      font-weight: 800;
    }
    .control-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 9px;
    }
    .control-grid > div {
      border: 1px solid #cfdceb;
      border-radius: 12px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.84);
    }
    .chart-accordion-btn {
      width: auto;
      min-width: 124px;
      border: 1px solid #bfd1e7;
      border-radius: 10px;
      background: linear-gradient(160deg, #fbfdff, #f3f8ff);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      text-align: left;
      color: #214565;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
      transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    }
    .chart-accordion-btn:hover {
      background: rgba(220, 233, 249, 0.45);
      transform: none;
      border-color: #a9c1de;
    }
    .chart-accordion-btn:focus {
      box-shadow: 0 0 0 3px rgba(70, 122, 194, 0.2);
    }
    .chart-accordion-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .chart-accordion-icon {
      font-size: .9rem;
      color: #4c6784;
      transition: transform .2s ease;
      transform-origin: center;
      line-height: 1;
    }
    .chart-accordion-btn[aria-expanded="true"] .chart-accordion-icon {
      transform: rotate(180deg);
    }
    .control-grid .control-city { grid-column: 1 / -1; }
    .control-location .control-city {
      border: 1px solid #cfdceb;
      border-radius: 12px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.9);
    }
    /* Actions section header accent */
    .control-actions {
      padding-bottom: 10px;
    }
    .control-actions h4 {
      padding-bottom: 8px;
      border-bottom: 1px solid #d4e2f0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .control-actions h4::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 13px;
      border-radius: 2px;
      background: linear-gradient(180deg, #1c64ca, #2f78d8);
      flex-shrink: 0;
    }

    .control-actions .toolbar {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
    }
    /* Load Forecast β€” stronger gradient + lift shadow */
    .control-actions .toolbar .primary {
      width: 100%;
      min-height: 44px;
      font-size: .94rem;
      font-weight: 700;
      background: linear-gradient(130deg, #1558bb 0%, #2872e0 55%, #3b8aef 100%);
      box-shadow: 0 4px 14px rgba(28, 100, 202, 0.35), 0 1px 3px rgba(28, 100, 202, 0.2);
      letter-spacing: .01em;
    }
    .control-actions .toolbar .primary:hover {
      background: linear-gradient(130deg, #1660cc 0%, #2f7dee 55%, #4593f5 100%);
      box-shadow: 0 6px 18px rgba(28, 100, 202, 0.45), 0 2px 4px rgba(28, 100, 202, 0.25);
    }
    /* Historical Weather β€” teal-tinted dashed border */
    .control-actions .toolbar .ghost {
      width: 100%;
      border-style: dashed;
      border-color: #7fb8d4;
      color: #1a4f72;
      background: linear-gradient(160deg, #f5fbff, #edf5fd);
    }
    .control-actions .toolbar .ghost:hover {
      border-color: #3a90bf;
      background: linear-gradient(160deg, #eaf5ff, #ddeefa);
      color: #0f3d5c;
    }
    /* Status pill badge */
    .control-actions .loading {
      margin-top: 4px;
      font-size: .75rem;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 10px;
      background: rgba(28, 100, 202, .07);
      border: 1px solid rgba(28, 100, 202, .15);
      border-radius: 999px;
      color: #1a4d8f;
      font-weight: 600;
      width: fit-content;
    }
    label {
      display: block;
      font-size: .75rem;
      font-weight: 700;
      color: #294662;
      letter-spacing: .02em;
      margin-bottom: 6px;
    }
    input, select, button {
      width: 100%;
      border: 1px solid #bfd1e8;
      border-radius: 11px;
      padding: 10px 11px;
      font-size: .9rem;
      background: #fcfdff;
      color: #0f172a;
      transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    }
    input:focus, select:focus, button:focus {
      outline: none;
      border-color: #6f9de0;
      box-shadow: 0 0 0 3px rgba(111, 157, 224, 0.18);
    }
    button { cursor: pointer; }
    button:hover { transform: translateY(-1px); }
    .primary {
      background: linear-gradient(130deg, #1c64ca, #2f78d8);
      border-color: #1b63c7;
      color: #fff;
      box-shadow: 0 8px 16px rgba(28, 100, 202, 0.22);
    }
    .ghost {
      background: linear-gradient(160deg, #ffffff, #f5f8fd);
      border-color: #c6d4e8;
      color: #20425f;
    }
    .toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .toolbar .ghost, .toolbar .primary { width: auto; min-width: 95px; }
    .pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
    .pill {
      width: auto;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: .79rem;
      font-weight: 700;
      color: #1e3a5f;
      background: linear-gradient(160deg, #ffffff, #f5f9ff);
      border-color: #c5d3e7;
    }
    .pill.active {
      border-color: #1f66c9;
      background: linear-gradient(130deg, #1d66cc, #2a73d5);
      color: #fff;
      box-shadow: 0 6px 12px rgba(28, 100, 202, 0.18);
    }
    .mode-tabs { display: inline-flex; gap: 8px; }
    .mode-note {
      margin: 8px 0 0;
      color: #405875;
      font-size: .82rem;
    }
    .marine-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      flex-wrap: wrap;
    }
    .marine-kpi {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 9px;
      margin-top: 10px;
    }
    .marine-kpi .card h4 { color: #135272; }
    .marine-note {
      margin-top: 8px;
      color: #355171;
      font-size: .83rem;
    }
    .marine-exposure {
      margin-top: 8px;
      border: 1px solid #a8d1e8;
      border-radius: 10px;
      background: linear-gradient(130deg, #edf8ff, #e2f2ff);
      color: #0e4163;
      font-size: .82rem;
      line-height: 1.4;
      padding: 8px 10px;
    }
    .marine-point-pill {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #99c8e8;
      background: linear-gradient(130deg, #e7f8ff, #d8f0ff);
      color: #0b4d73;
      font-size: .74rem;
      font-weight: 700;
      padding: 4px 10px;
      margin-top: 8px;
    }
    .search-shell { position: relative; }
    .results {
      max-height: 220px;
      overflow: auto;
      margin-top: 6px;
      border: 1px solid #c7d5e7;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 16px 30px rgba(9, 22, 47, 0.17);
    }
    .results button {
      border: 0;
      border-bottom: 1px solid #e4ebf4;
      border-radius: 0;
      text-align: left;
    }
    .results button:last-child { border-bottom: 0; }

    .hero {
      background: linear-gradient(155deg, #fafcff 0%, #eff5fe 48%, #eef2f9 100%);
      border-color: #cad8eb;
    }
    .hero-primary {
      padding: 18px;
    }
    .hero-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }
    .meta-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .meta-title h3, .meta-title h2 { margin: 0; }
    .meta-title h3 {
      font-size: 1.05rem;
      font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif;
      color: #163a62;
      letter-spacing: .01em;
      font-weight: 800;
    }
    .meta-title h2 {
      color: #122f52;
      letter-spacing: .01em;
      font-weight: 800;
    }
    #cityTitle { font-size: clamp(1.65rem, 2.1vw, 2.35rem); letter-spacing: .01em; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #eea65f;
      color: #8b4a08;
      padding: 5px 10px;
      border-radius: 999px;
      background: linear-gradient(130deg, #fff2e2, #ffe7cb);
      font-size: .73rem;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .badge.active {
      border-color: #67baa9;
      background: linear-gradient(130deg, #e9fffb, #dcf6f1);
      color: #0d655f;
    }
    .hero-minimal-hidden {
      display: none !important;
    }
    .hero-temp-stack {
      display: grid;
      justify-items: end;
      align-items: center;
      gap: 2px;
      min-width: 185px;
    }
    .hero-temp {
      font-size: clamp(2.4rem, 4.6vw, 3.7rem);
      line-height: .95;
      font-weight: 800;
      color: #0f2c52;
      letter-spacing: -.02em;
    }
    .hero-condition {
      font-size: .88rem;
      color: #3d5572;
      font-weight: 700;
    }
    .muted { color: var(--muted); }
    .warn { color: var(--warn); font-weight: 700; }
    .err { color: var(--err); font-weight: 700; }

    .confidence-strip {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      border-top: 1px solid #d1deed;
      padding-top: 10px;
      opacity: 0.92;
    }
    .c-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      border: 1px solid #c6d6ea;
      background: #fff;
      color: #2a4568;
      padding: 4px 10px;
      font-size: .73rem;
      font-weight: 700;
    }
    .c-pill strong {
      color: #14375f;
      font-size: .69rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
    }
    .current-summary-panel {
      padding: 12px 14px;
    }
    .current-summary-panel .cards {
      margin-top: 9px;
      gap: 9px;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .current-summary-panel .card {
      padding: 9px 11px;
      border-radius: 11px;
    }
    .current-summary-panel .card h4 {
      font-size: .66rem;
    }
    .current-summary-panel .card p {
      margin-top: 4px;
      font-size: 1rem;
    }
    .card {
      border: 1px solid #d5e0ee;
      border-radius: 13px;
      background: linear-gradient(150deg, #ffffff 0%, #f5f9ff 100%);
      padding: 11px 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px rgba(10, 27, 53, 0.05);
    }
    .card h4 {
      margin: 0;
      font-size: .69rem;
      color: #49617e;
      letter-spacing: .03em;
      font-weight: 800;
    }
    .card p {
      margin: 6px 0 0;
      font-size: 1.14rem;
      font-weight: 800;
      color: #152f4f;
      line-height: 1.15;
    }

    .wind-compact {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 100%;
      font-size: .86rem;
      font-weight: 700;
      color: #102d4c;
      flex-wrap: wrap;
    }
    .wind-compact .bchip {
      border-radius: 999px;
      padding: 2px 7px;
      font-size: .68rem;
      border: 1px solid #7fd0c5;
      background: #ebfbf8;
      color: #0b6d66;
      font-weight: 800;
    }
    .wind-dir {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .wind-arrow {
      display: inline-block;
      width: 16px;
      transition: transform .35s ease;
      color: #0f766e;
      font-weight: 700;
    }

    .current-conditions-panel {
      border-color: #d5deea;
      background: linear-gradient(156deg, #f8fcff 0%, #edf4fc 52%, #edf2fa 100%);
      padding-top: 14px;
      box-shadow: 0 12px 24px rgba(10, 29, 57, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }
    .day-view-panel {
      border-color: #cddced;
      background: linear-gradient(155deg, #f9fcff 0%, #eef6ff 62%, #e9f2fb 100%);
      padding: 14px 13px 13px;
      min-height: 118px;
      box-shadow: 0 10px 22px rgba(10, 29, 57, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }
    .day-view-guide {
      font-size: .92rem;
      font-weight: 700;
      letter-spacing: .015em;
      color: #365779;
      margin: 0 2px 10px;
      line-height: 1.35;
    }
    .day-view-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding: 1px 2px 6px;
      scrollbar-width: thin;
      scrollbar-color: rgba(78, 152, 214, 0.72) rgba(145, 172, 206, 0.22);
    }
    .day-view-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .day-view-scroll::-webkit-scrollbar-track {
      background: rgba(145, 172, 206, 0.22);
      border-radius: 999px;
    }
    .day-view-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, #4e98d6, #2f73c8);
      border-radius: 999px;
    }
    .day-view-btn {
      border: 1px solid #c7d8ec;
      border-radius: 999px;
      background: linear-gradient(150deg, #f8fbff, #edf5ff);
      color: #24486f;
      min-height: 66px;
      min-width: 96px;
      padding: 8px 14px;
      font-size: .86rem;
      font-weight: 700;
      letter-spacing: .01em;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
      -webkit-tap-highlight-color: transparent;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }
    .day-view-top {
      font-size: .88rem;
      font-weight: 800;
      line-height: 1.05;
    }
    .day-view-preview {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      opacity: .92;
    }
    .day-view-icon {
      font-size: 1rem;
      line-height: 1;
    }
    .day-view-temp {
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .day-view-btn:focus {
      outline: none;
    }
    .day-view-btn:focus-visible {
      border-color: #6aa8e0;
      box-shadow: 0 0 0 2px rgba(78, 152, 214, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
    .day-view-btn:not(.active) {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }
    @media (hover: hover) and (pointer: fine) {
      .day-view-btn:hover {
        border-color: #8cb5e5;
        background: linear-gradient(150deg, #f1f8ff, #e6f1ff);
      }
    }
    .day-view-btn.active {
      border-color: #5aa8e3;
      background: linear-gradient(135deg, #74d6f3, #3fb6e8 56%, #248ed1);
      color: #042746;
      box-shadow: 0 8px 18px rgba(44, 134, 203, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    .day-view-btn:active {
      transform: translateY(1px);
    }
    .day-view-hint {
      margin-top: 6px;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .03em;
      color: #4e6c8d;
      text-align: center;
      display: none;
    }
    .table-swipe-hint {
      margin-top: 6px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .03em;
      color: #4e6c8d;
      text-align: center;
      display: none;
    }
    .current-conditions-grid {
      display: grid;
      gap: 14px;
      margin-top: 10px;
    }
    .current-conditions-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      border: 1px solid #d3deec;
      border-radius: 13px;
      padding: 11px 12px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .current-conditions-head-time-only {
      justify-content: center;
      text-align: center;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .current-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      border: 1px solid #c9d8eb;
      color: #1c4269;
      background: #f6faff;
    }
    .current-pill.active {
      color: #0f6a43;
      border-color: #b7dcc7;
      background: #edfbf4;
    }
    .current-pill.fallback {
      color: #8a5112;
      border-color: #e9c999;
      background: #fff5e8;
    }
    .current-pill.estimate {
      color: #8a5112;
      border-color: #e9c999;
      background: #fff5e8;
    }
    .current-timestamp {
      font-size: .8rem;
      color: #415f80;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .current-conditions-head-time-only .current-timestamp {
      font-size: .98rem;
      font-weight: 800;
      letter-spacing: .045em;
      line-height: 1;
    }
    .current-condition {
      margin-left: auto;
      font-size: .9rem;
      font-weight: 800;
      color: #1e3e61;
    }
    .current-conditions-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .current-card {
      border: 1px solid #c7d8ec;
      border-radius: 14px;
      padding: 14px 13px 13px 58px;
      background: linear-gradient(160deg, #ffffff 0%, #f1f7ff 56%, #eef5ff 100%);
      display: grid;
      gap: 4px;
      min-height: 112px;
      box-shadow: 0 10px 18px rgba(11, 31, 62, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      position: relative;
    }
    .current-icon {
      position: absolute;
      left: 13px;
      top: 14px;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid #bfd2e9;
      background: linear-gradient(160deg, #f5fbff, #e8f1fd);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .79rem;
      color: #1a456d;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
    .current-key {
      font-size: .76rem;
      font-weight: 800;
      color: #405e80;
      letter-spacing: .045em;
      text-transform: uppercase;
      line-height: 1.2;
    }
    .current-value {
      font-size: clamp(1.22rem, 1.1vw, 1.46rem);
      font-weight: 800;
      color: #123a65;
      line-height: 1.16;
      letter-spacing: -.01em;
    }
    .current-value.compact {
      font-size: clamp(1.04rem, 0.96vw, 1.2rem);
      line-height: 1.2;
    }
    .current-note {
      font-size: .81rem;
      color: #5a708b;
      font-weight: 550;
      line-height: 1.32;
      margin-top: 1px;
    }
    /* SVG icons inside .current-icon */
    .current-icon svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
    }
    /* Progress bar inside cards */
    .card-bar {
      margin-top: 5px;
      height: 4px;
      border-radius: 4px;
      background: rgba(49, 119, 210, 0.12);
      overflow: hidden;
      width: 100%;
    }
    .card-bar-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, #3177D2, #00B0FF);
      transition: width .4s ease;
    }
    @media (max-width: 980px) {
      .current-card {
        min-height: 104px;
      }
    }

    .chart-panel {
      border-color: #bdd1e8;
      background: linear-gradient(155deg, #f3f9ff 0%, #e7f0fb 100%);
      padding: 16px 16px 14px;
      box-shadow: 0 10px 22px rgba(15, 38, 70, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      position: relative;
      overflow: hidden;
    }
    .chart-panel::before {
      content: none;
    }
    .chart-panel > * {
      position: relative;
      z-index: 1;
    }
    #chartsPanel {
      transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
      transform: translateZ(0);
      overflow-anchor: none;
    }
    .charts-accordion-body {
      margin-top: 12px;
      overflow: hidden;
      transition: max-height .28s ease, opacity .2s ease, margin-top .22s ease, transform .22s ease;
      transform: translateY(0);
    }
    #chartsPanel.chart-expanded .charts-accordion-body {
      max-height: 3800px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    #chartsPanel.chart-collapsed .charts-accordion-body {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      pointer-events: none;
      transform: translateY(-4px);
    }
    .chart-section-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(173, 193, 214, 0.58);
    }
    .chart-section-title {
      margin: 0;
      font-size: .92rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #214566;
      font-weight: 800;
    }
    .chart-section-subtitle {
      margin: 5px 0 0;
      font-size: .8rem;
      color: #56708e;
      line-height: 1.45;
    }
    .chart-section-accordion-btn {
      margin-left: auto;
      flex-shrink: 0;
    }
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 14px;
      align-items: stretch;
    }
    .chart-grid-weather {
      grid-template-columns: repeat(2, minmax(300px, 1fr));
    }
    #tempChartCard { grid-column: 1 / -1; }
    .chart-card {
      border: 1px solid #cddbeb;
      border-radius: 14px;
      padding: 12px;
      background: #ffffff;
      box-shadow: 0 6px 15px rgba(16, 33, 58, 0.07);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      min-height: 305px;
    }
    .chart-card-primary {
      min-height: 440px;
    }
    .chart-card-head {
      display: grid;
      gap: 3px;
      padding-bottom: 8px;
      border-bottom: 1px solid #dce7f3;
    }
    .chart-card h4 {
      margin: 0;
      font-size: .77rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: #244a70;
      line-height: 1.35;
      font-weight: 800;
    }
    .chart-card-head p {
      margin: 0;
      font-size: .74rem;
      color: #607995;
      line-height: 1.4;
      letter-spacing: .01em;
    }
    .chart-card canvas {
      width: 100%;
      height: 256px;
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #cedbed;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
      display: block;
    }
    .chart-card-primary canvas {
      height: 392px;
    }
    .chart-guide {
      margin-top: 12px;
      font-size: .77rem;
      color: #5d7591;
      border: 1px solid #d9e4f2;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
      overflow: hidden;
    }
    .chart-guide summary {
      list-style: none;
      cursor: pointer;
      margin: 0;
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #44607f;
      user-select: none;
    }
    .chart-guide summary::-webkit-details-marker {
      display: none;
    }
    .guide-toggle-hint {
      font-size: .68rem;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #7690ad;
      font-weight: 600;
    }
    .chart-guide summary::after {
      content: "\22EE";
      font-size: .78rem;
      color: #6e88a5;
      margin-left: 4px;
      transition: transform .16s ease;
    }
    .chart-guide[open] summary::after {
      transform: rotate(180deg);
    }
    .chart-guide ul {
      margin: 0;
      padding: 0 16px 12px 30px;
      display: grid;
      gap: 5px;
      color: #5a728f;
    }
    .chart-guide li {
      line-height: 1.45;
    }
    @media (max-width: 1120px) {
      .chart-grid-weather {
        grid-template-columns: minmax(0, 1fr);
      }
      .chart-card-primary {
        min-height: 330px;
      }
      .chart-card-primary canvas {
        height: 300px;
      }
    }
    @media (max-width: 900px) {
      .chart-card {
        min-height: 286px;
      }
      .chart-card canvas {
        height: 236px;
      }
    }
    @media (max-width: 640px) {
      .chart-panel {
        padding: 12px;
      }
      .chart-grid {
        gap: 12px;
      }
      .chart-card {
        padding: 10px;
      }
      .chart-card canvas {
        height: 220px;
      }
      .chart-section-subtitle {
        font-size: .76rem;
      }
    }

    .forecast-head {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 12px;
    }
    .forecast-summary {
      font-size: .78rem;
      color: #45607f;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .table-wrap {
      overflow: auto;
      border: 1px solid #cfdaea;
      border-radius: 13px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(10, 27, 53, 0.06);
    }
    table {
      width: 100%;
      min-width: 980px;
      border-collapse: separate;
      border-spacing: 0;
    }
    th, td {
      border-bottom: 1px solid #dee6f1;
      padding: 11px 12px;
      text-align: left;
      vertical-align: middle;
    }
    th {
      color: #355171;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      background: linear-gradient(180deg, #f9fcff 0%, #f0f5fc 100%);
      position: sticky;
      top: 0;
      z-index: 2;
      font-weight: 800;
    }
    tr.forecast-row td {
      background: #ffffff;
      transition: background-color .16s ease;
    }
    tr.forecast-row.row-alt td {
      background: #f6faff;
    }
    tr.forecast-row:hover td {
      background: #edf5ff;
    }
    tr.current-row td {
      background: linear-gradient(130deg, #e0ecff, #d8e7ff) !important;
      border-bottom-color: #c6d8f0;
    }
    tr.current-row td:first-child {
      box-shadow: inset 4px 0 0 #2f69c7;
      font-weight: 800;
    }
    tr.day-separator td {
      background: linear-gradient(180deg, #edf3fb 0%, #e8eff9 100%);
      color: #385878;
      font-weight: 800;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      border-bottom: 1px solid #c7d5e7;
      padding: 8px 12px;
    }
    td.time-cell { font-weight: 700; color: #163d67; white-space: nowrap; }
    td.time-cell .time-main { display: block; }
    .handoff-cue {
      display: block;
      margin-top: 2px;
      font-size: .62rem;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #5a7392;
      opacity: .9;
    }
    tr.now-bridge-row td.time-cell {
      text-align: center;
    }
    tr.now-bridge-row td.time-cell .now-label {
      margin-right: 0;
      justify-content: center;
    }
    @media (min-width: 901px) {
      td.time-cell .time-main {
        display: inline-block;
      }
      .handoff-cue {
        display: inline-block;
        margin-top: 0;
        margin-left: 14px;
      }
    }
    @media (max-width: 680px) {
      .handoff-cue {
        font-size: .56rem;
        letter-spacing: .02em;
      }
    }
    td.metric-cell { font-variant-numeric: tabular-nums; color: #1f344f; white-space: nowrap; font-weight: 600; }
    .temp-reading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(1.02rem, 1.05vw, 1.14rem);
      line-height: 1;
    }
    .temp-reading > span:last-child {
      font-weight: 800;
      letter-spacing: -.01em;
    }
    .temp-weather-icon {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      border-radius: 999px;
      border: 1px solid #c6d6ea;
      background: linear-gradient(160deg, #f8fcff, #edf4fe);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    tr.current-row .temp-weather-icon {
      border-color: #9dbce7;
      background: linear-gradient(160deg, #ebf3ff, #deebff);
    }
    tr.debug-row td {
      background: #f5f8fd;
      border-bottom: 1px dashed #c9d6e8;
      padding: 7px 12px;
    }
    .debug-details summary {
      cursor: pointer;
      color: #344f6d;
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
    }
    .debug-pre, .debug-meta {
      margin: 8px 0 0;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #38495f;
      background: #0f172a;
      color: #e2e8f0;
      font-size: .73rem;
      line-height: 1.35;
      white-space: pre-wrap;
      overflow: auto;
      max-height: 320px;
    }
    .debug-meta { margin-top: 0; }
    .now-label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 7px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: .66rem;
      font-weight: 800;
      background: #d8e9ff;
      color: #0e4c95;
      border: 1px solid #8bb4e8;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .loading {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      font-size: .8rem;
      color: #1b4f90;
      font-weight: 700;
    }
    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1f6dd1;
      box-shadow: 0 0 0 0 rgba(31, 109, 209, 0.5);
      animation: dot-pulse 1.2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes dot-pulse {
      0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(31,109,209,.5); }
      50%       { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(31,109,209,0); }
    }
    .chart-tooltip {
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      background: rgba(10, 22, 43, 0.95);
      color: #f6f9ff;
      border: 1px solid rgba(126, 155, 194, 0.56);
      border-radius: 10px;
      padding: 7px 9px;
      font-size: .77rem;
      box-shadow: 0 14px 28px rgba(0,0,0,.34);
      max-width: 300px;
      line-height: 1.35;
    }

    .hist-grid { display: grid; gap: 9px; }
    .fact-card {
      border: 1px solid #c8d9ef;
      border-radius: 12px;
      padding: 10px;
      background: linear-gradient(140deg, #f3f8ff, #edf4ff);
    }
    .fact-card h4 { margin: 0 0 6px; font-size: .9rem; color: #17457e; }
    .fact-card p { margin: 0; font-size: .89rem; color: #213e60; }
    .event-card {
      border: 1px solid #ccd9ea;
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
    }
    .event-card summary {
      cursor: pointer;
      list-style: none;
      padding: 10px;
      background: linear-gradient(135deg,#f6faff,#edf3fc);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-weight: 700;
      color: #1d3d60;
    }
    .event-card summary::-webkit-details-marker { display: none; }
    .event-details {
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px;
      border-top: 1px solid #dde6f1;
    }
    .metric {
      border: 1px solid #dce6f3;
      border-radius: 10px;
      padding: 8px;
      background: #f8fbff;
    }
    .metric .k {
      font-size: .7rem;
      color: #4d6381;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .metric .v {
      font-size: .9rem;
      font-weight: 700;
      color: #183858;
      margin-top: 3px;
    }
    .etype {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: .72rem;
      font-weight: 700;
      border: 1px solid #cfdaea;
      background: #f8fbff;
      color: #23496d;
    }

    .assistant-panel {
      display: grid;
      gap: 10px;
      border-color: #c2d7ec;
      background: linear-gradient(156deg, #f8fcff 0%, #edf5ff 100%);
      box-shadow: 0 10px 22px rgba(12, 38, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
    .assistant-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(173, 196, 221, 0.56);
    }
    .assistant-head-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .assistant-status {
      border: 1px solid #c7d7eb;
      border-radius: 999px;
      padding: 5px 11px;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .02em;
      color: #27486e;
      background: #f3f8ff;
      white-space: nowrap;
    }
    .assistant-status.ready {
      border-color: #9fd6ca;
      background: #e8faf6;
      color: #0f665f;
    }
    .assistant-accordion-btn {
      width: auto;
      min-width: 134px;
      border-radius: 10px;
      border: 1px solid #bed2e8;
      background: linear-gradient(160deg, #fcfeff, #f1f7ff);
      color: #214869;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 11px;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: border-color .18s ease, background-color .18s ease, color .18s ease;
    }
    .assistant-accordion-btn:hover {
      border-color: #a8c2df;
      background: rgba(226, 238, 252, 0.62);
      transform: none;
    }
    .assistant-accordion-btn:focus {
      box-shadow: 0 0 0 3px rgba(87, 134, 203, 0.2);
    }
    .assistant-accordion-icon {
      font-size: .94rem;
      color: #4c6989;
      line-height: 1;
      transition: transform .2s ease;
      transform-origin: center;
    }
    .assistant-accordion-btn[aria-expanded="true"] .assistant-accordion-icon {
      transform: rotate(180deg);
    }
    .assistant-accordion-body {
      margin-top: 10px;
      overflow: hidden;
      transition: max-height .28s ease, opacity .2s ease, transform .22s ease, margin-top .2s ease;
      transform: translateY(0);
    }
    #assistantPanel.assistant-expanded .assistant-accordion-body {
      max-height: 1500px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    #assistantPanel.assistant-collapsed .assistant-accordion-body {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      pointer-events: none;
      transform: translateY(-4px);
    }
    .assistant-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .assistant-quick .pill {
      border-color: #bfd4ea;
      background: linear-gradient(150deg, #ffffff, #f3f8ff);
      color: #1f4667;
    }
    .assistant-messages {
      margin-top: 10px;
      max-height: 300px;
      overflow: auto;
      display: grid;
      gap: 8px;
      padding: 2px 3px 0 1px;
    }
    .assistant-msg {
      border: 1px solid #d2deed;
      border-radius: 10px;
      padding: 9px 11px;
      font-size: .86rem;
      line-height: 1.4;
      color: #1c3b5c;
      background: #f8fbff;
    }
    .assistant-msg.user {
      background: #ecf4ff;
      border-color: #bad1ec;
      color: #123d6f;
    }
    .assistant-msg.assistant {
      background: #f9fcff;
    }
    .assistant-msg.system {
      background: #fff7ed;
      border-color: #f1cfac;
      color: #8b4c11;
    }
    .assistant-form {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }
    .assistant-form input {
      min-width: 0;
      border-color: #c5d8ec;
      background: #fdfefe;
    }
    .assistant-form .primary {
      width: auto;
      min-width: 110px;
      border-radius: 10px;
      padding-inline: 16px;
    }

    @media (max-width: 1160px) {
      .workspace { grid-template-columns: 1fr; }
      .control-panel {
        position: static;
        max-height: none;
        overflow: visible;
      }
      .hero-temp-stack { justify-items: start; min-width: auto; }
      .hero-main { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .app { padding: 12px; }
      .map-stage { height: 300px; min-height: 300px; }
      .control-grid { grid-template-columns: 1fr; }
      .toolbar .ghost, .toolbar .primary { width: 100%; }
      .day-view-panel {
        min-height: 112px;
      }
      .day-view-guide {
        font-size: .86rem;
      }
      .day-view-btn {
        min-height: 62px;
        min-width: 92px;
      }
      .day-view-top {
        font-size: .84rem;
      }
      .day-view-temp {
        font-size: .76rem;
      }
      .day-view-hint { display: block; }
      .current-condition { margin-left: 0; width: 100%; }
      .current-conditions-cards { grid-template-columns: 1fr; gap: 10px; }
      .current-card {
        min-height: 96px;
        padding: 12px 12px 12px 54px;
      }
      .current-value {
        font-size: clamp(1.12rem, 5.2vw, 1.32rem);
      }
      .current-value.compact {
        font-size: clamp(.98rem, 4.5vw, 1.12rem);
      }
      .assistant-form {
        grid-template-columns: 1fr;
      }
      .assistant-head-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
      }
      .assistant-accordion-btn {
        min-width: 122px;
      }
    }
@media (max-width: 760px) and (orientation: portrait) {
  .day-view-panel {
    min-height: 124px;
  }
  .day-view-scroll {
    min-height: 78px;
    align-items: flex-start;
    padding-top: 2px;
    padding-bottom: 10px;
    margin-bottom: 2px;
  }
  .day-view-hint {
    margin-top: 4px;
  }
  .table-swipe-hint {
    display: block;
  }
  /* Let vertical swipes on the hero overlay scroll the page (not the map). */
  #mapWeatherOverlay {
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }
  /* Wide-display portrait phones (641-760px): the max-width:760px rule locks
     map-stage at 300px while the panel is full-height, cutting the map in half.
     Override it so the stage fills the panel. JS (resizeMapPanel) sets the
     explicit pixel height; this !important ensures the CSS fallback also works. */
  .map-stage {
    height: 100% !important;
    min-height: 0 !important;
  }
}


.marine-debug-canvas {
  pointer-events: none;
  z-index: 420;
  opacity: 1;
}

.marine-map-disabled-note {
  border: 1px dashed #c7d7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(160deg, rgba(248, 251, 255, 0.95), rgba(238, 244, 252, 0.9));
}

#marineTablePanel {
  position: relative;
  z-index: 35;
}

/* -- Mode panel: sticky nav strip --------------------------- */
#modePanel {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(160deg, #edf5ff 0%, #e4eefb 100%);
  border-color: #b2cae6;
  box-shadow: 0 6px 20px rgba(5, 18, 40, 0.13), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
}
#modePanel .meta-title {
  flex-shrink: 0;
}
#modePanel .meta-title h3 {
  font-size: .82rem;
  color: #173963;
}
#modePanel .mode-tabs {
  flex-shrink: 0;
}
#modePanel .mode-note {
  margin: 0;
  flex: 1;
  min-width: 180px;
  font-size: .78rem;
  color: #3d567a;
}
.app > #modePanel { order: -120; }

/* -- Search spinner ------------------------------------------ */
.search-spinner {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border: 2px solid rgba(100, 148, 220, 0.25);
  border-top-color: #3474d4;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  pointer-events: none;
}
@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .search-spinner { animation: none; border-top-color: #3474d4; }
}

/* -- Timeline empty state ------------------------------------ */
.timeline-empty {
  color: #5d6f8a;
  font-size: .78rem;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: italic;
}
.timeline-empty::before {
  content: "\21BB";
  font-size: .88rem;
  opacity: 0.55;
  font-style: normal;
}

/* -- Skeleton loading panel ---------------------------------- */
.app > #forecastSkeleton { order: -95; }
.forecast-skeleton-panel {
  padding: 18px;
}
.skeleton-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.skeleton-hero-text {
  display: grid;
  gap: 9px;
}
.skeleton-line {
  border-radius: 7px;
  background: linear-gradient(90deg, #e4ecf6 25%, #f2f6fb 50%, #e4ecf6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.title  { height: 26px; width: 52%; }
.skeleton-line.wide   { height: 13px; width: 68%; }
.skeleton-line.short  { height: 13px; width: 38%; }
.skeleton-line.temp-block { width: 110px; height: 52px; border-radius: 10px; }
.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.skeleton-card {
  height: 76px;
  border-radius: 13px;
  border: 1px solid #dde7f2;
  background: linear-gradient(90deg, #e4ecf6 25%, #f2f6fb 50%, #e4ecf6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-card:nth-child(2) { animation-delay: .12s; }
.skeleton-card:nth-child(3) { animation-delay: .22s; }
.skeleton-card:nth-child(4) { animation-delay: .32s; }
.skeleton-card:nth-child(5) { animation-delay: .42s; }
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .skeleton-card {
    animation: none;
    background: #e8eef6;
  }
}

/* -- Table: extra columns toggle ----------------------------- */
.table-cols-btn {
  width: auto;
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 11px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  letter-spacing: .01em;
}
#tableWrap th.col-extra,
#tableWrap td.col-extra {
  display: none;
}
#tableWrap[data-cols-expanded="true"] th.col-extra,
#tableWrap[data-cols-expanded="true"] td.col-extra {
  display: table-cell;
}

/* ===========================================================
   PROFESSIONAL UI POLISH  (all additions below)
   =========================================================== */

/* -- 1. Beaufort badge color scale --------------------------- */
/* calm / light  B0-B2 */
.bchip[data-bf="0"],
.bchip[data-bf="1"],
.bchip[data-bf="2"] {
  border-color: #6ec29e;
  background: linear-gradient(130deg, #e8faf2, #d5f4e8);
  color: #0a6640;
}
/* gentle / moderate  B3-B4 */
.bchip[data-bf="3"],
.bchip[data-bf="4"] {
  border-color: #b8d97a;
  background: linear-gradient(130deg, #f5fce3, #eaf7cc);
  color: #3d6010;
}
/* fresh / strong breeze  B5-B6 */
.bchip[data-bf="5"],
.bchip[data-bf="6"] {
  border-color: #f0c060;
  background: linear-gradient(130deg, #fff8e2, #ffefc3);
  color: #7a4d00;
}
/* near gale / gale  B7-B8 */
.bchip[data-bf="7"],
.bchip[data-bf="8"] {
  border-color: #f0955a;
  background: linear-gradient(130deg, #fff3ec, #ffe6d4);
  color: #7a2e00;
}
/* storm and above  B9-B12 */
.bchip[data-bf="9"],
.bchip[data-bf="10"],
.bchip[data-bf="11"],
.bchip[data-bf="12"] {
  border-color: #e05a5a;
  background: linear-gradient(130deg, #fff0f0, #ffdede);
  color: #7a0a0a;
  font-weight: 900;
}

/* -- 2. Precip probability bar ------------------------------- */
/* Trace precipitation label β€” shown instead of "0.00" when PoP?70% but amount?0.02mm */
.trace-precip {
  font-style: italic;
  opacity: .72;
  font-size: .85em;
  letter-spacing: .02em;
  cursor: help;
}

.prob-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: 52px;
}
.prob-label {
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
}
.prob-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(100, 140, 200, 0.14);
  overflow: hidden;
  width: 100%;
  min-width: 44px;
}
.prob-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #4fa3f0 0%, #1a5ec9 60%, #c0261d 100%);
  min-width: 2px;
}
[data-prob-kind="snow"] .prob-fill {
  background: linear-gradient(90deg, #90caf9, #3f89d4);
}
[data-prob-kind="mixed"] .prob-fill {
  background: linear-gradient(90deg, #80cbc4, #f59e0b);
}

/* -- 3. Current-conditions card icons β€” met abbreviations ---- */
.current-icon {
  font-size: .68rem;
  letter-spacing: -.02em;
}

/* -- 4. Temperature color tiers in forecast table ------------ */
tr[data-temp="cold"] .temp-reading { color: #1660c8; }
tr[data-temp="cool"] .temp-reading { color: #0e7cad; }
tr[data-temp="mild"] .temp-reading { color: #1a6b40; }
tr[data-temp="warm"] .temp-reading { color: #c06010; }
tr[data-temp="hot"]  .temp-reading { color: #b81818; font-weight: 900; }

/* -- 5. Hero condition badge β€” more prominent ---------------- */
#metaPanel #conditionBadge {
  font-size: .85rem;
  padding: 6px 13px;
  letter-spacing: .01em;
}
#metaPanel .hero-condition {
  font-size: 1rem;
  color: #2d4a6a;
}

/* -- 6. Timeline "now" chip β€” pulsing dot -------------------- */
.time-chip.active {
  padding-left: 22px;
  position: relative;
}
.time-chip.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a72f0;
  animation: now-pulse 2s ease-in-out infinite;
}
@keyframes now-pulse {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);    }
  50%       { opacity: 0.3; transform: translateY(-50%) scale(0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .time-chip.active::before { animation: none; }
}

/* -- 7. Sticky Time column ----------------------------------- */
#tableWrap table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}
#tableWrap table td.time-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
}
#tableWrap table tr.forecast-row.row-alt td.time-cell {
  background: #f6faff;
}
#tableWrap table tr.current-row td.time-cell {
  background: linear-gradient(130deg, #e0ecff, #d8e7ff) !important;
}
#tableWrap table tr.day-separator td {
  /* day separator spans all columns β€” keep its own background */
  position: static;
}
/* Soft right-edge shadow to separate sticky column from scrolling content */
#tableWrap table th:first-child,
#tableWrap table td.time-cell {
  box-shadow: 2px 0 8px rgba(10, 27, 53, 0.07);
}

/* -- 8. Day separator left accent stripe --------------------- */
tr.day-separator td {
  box-shadow: inset 4px 0 0 #4a82cc;
}

/* -- 9. City search icon ------------------------------------- */
#cityInput {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2368809e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 14px 14px;
}

/* -- 10. Marine tab visual polish ---------------------------- */

/* Panel teal left-accent */
#marineMetaPanel {
  border-left: 3px solid #0891b2;
}

/* Insight strip styled as info banner */
#marineInsightText {
  display: block;
  margin-top: .45rem;
  padding: .4rem .65rem;
  background: rgba(8, 145, 178, .08);
  border-left: 3px solid #0891b2;
  border-radius: 0 6px 6px 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Point pill anchor icon */
#marinePointPill::before {
  content: "" !important;
  display: none !important;
}

/* KPI card ocean accent */
#marineKpiCards .card[data-marine-kpi] {
  border-top: 2px solid rgba(8, 145, 178, .3);
}

/* Wave Height KPI β€” slightly stronger accent */
#marineKpiCards .card[data-marine-kpi="wave-height"] {
  border-top-color: #0891b2;
}
#marineKpiCards .card[data-marine-kpi="wave-height"] p {
  font-weight: 600;
  color: #0369a1;
}

/* KPI Sea State color coding */
#marineKpiCards .card[data-sea-state="smooth"] p    { color: #16a34a; }
#marineKpiCards .card[data-sea-state="slight"] p    { color: #65a30d; }
#marineKpiCards .card[data-sea-state="moderate"] p  { color: #d97706; }
#marineKpiCards .card[data-sea-state="rough"] p     { color: #ea580c; }
#marineKpiCards .card[data-sea-state="very-rough"] p{ color: #dc2626; }
#marineKpiCards .card[data-sea-state="high"] p      { color: #b91c1c; font-weight: 600; }
#marineKpiCards .card[data-sea-state="very-high"] p { color: #7f1d1d; font-weight: 700; }

/* KPI Exposure color coding */
#marineKpiCards .card[data-exposure="sheltered"] p   { color: #16a34a; }
#marineKpiCards .card[data-exposure="offshore"] p    { color: #0369a1; }
#marineKpiCards .card[data-exposure="cross-shore"] p { color: #d97706; }
#marineKpiCards .card[data-exposure="onshore"] p     { color: #dc2626; }

/* Table alternating rows */
#marineTableBody tr.row-alt td {
  background: rgba(8, 145, 178, .04);
}

/* Table Hs cell emphasis by sea state */
td.marine-hs-cell[data-sea-state="smooth"]     { color: #16a34a; }
td.marine-hs-cell[data-sea-state="slight"]     { color: #65a30d; }
td.marine-hs-cell[data-sea-state="moderate"]   { color: #d97706; font-weight: 500; }
td.marine-hs-cell[data-sea-state="rough"]      { color: #ea580c; font-weight: 600; }
td.marine-hs-cell[data-sea-state="very-rough"] { color: #dc2626; font-weight: 600; }
td.marine-hs-cell[data-sea-state="high"]       { color: #b91c1c; font-weight: 700; }
td.marine-hs-cell[data-sea-state="very-high"]  { color: #7f1d1d; font-weight: 700; }

/* Table Sea State cell color */
td.marine-sea-state-cell[data-sea-state="smooth"]     { color: #16a34a; }
td.marine-sea-state-cell[data-sea-state="slight"]     { color: #65a30d; }
td.marine-sea-state-cell[data-sea-state="moderate"]   { color: #d97706; }
td.marine-sea-state-cell[data-sea-state="rough"]      { color: #ea580c; }
td.marine-sea-state-cell[data-sea-state="very-rough"] { color: #dc2626; font-weight: 600; }
td.marine-sea-state-cell[data-sea-state="high"]       { color: #b91c1c; font-weight: 700; }
td.marine-sea-state-cell[data-sea-state="very-high"]  { color: #7f1d1d; font-weight: 700; }

/* Table Exposure cell color */
td.marine-exposure-cell[data-exposure="sheltered"]   { color: #16a34a; }
td.marine-exposure-cell[data-exposure="offshore"]    { color: #0369a1; }
td.marine-exposure-cell[data-exposure="cross-shore"] { color: #d97706; }
td.marine-exposure-cell[data-exposure="onshore"]     { color: #dc2626; font-weight: 600; }

/* -- 11. Forecast table day accordions (3h / 6h / 12h) -------- */

/* Hidden rows */
tr.day-acc-hidden {
  display: none;
}

/* Day accordion header row */
tr.day-acc-header td {
  padding: 0;
  background: linear-gradient(90deg, rgba(28, 100, 202, .07) 0%, rgba(28, 100, 202, .02) 100%);
  border-top: 2px solid rgba(28, 100, 202, .15);
  border-bottom: 1px solid rgba(28, 100, 202, .1);
}

/* Day accordion button (fills the cell) */
.day-acc-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  cursor: pointer;
  gap: 8px;
  border-radius: 0;
  min-height: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #1a3f6f;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .15s;
}
.day-acc-btn:hover {
  background: rgba(28, 100, 202, .07);
  transform: none;
}
.day-acc-btn:focus-visible {
  outline: 2px solid #1c64ca;
  outline-offset: -2px;
}

/* Chevron β€” rotates when open */
.day-acc-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a3f6f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform .2s ease;
  transform: rotate(-90deg);
}
tr.day-acc-header.open .day-acc-chevron {
  transform: rotate(0deg);
}

/* Expand/collapse hint text next to the day label */
.day-acc-label {
  flex: 1;
}
.day-acc-btn[aria-expanded="false"] .day-acc-label::after {
  content: " \2014 click to expand";
  font-size: .82em;
  font-weight: 500;
  color: #4a7ab5;
  opacity: .75;
  letter-spacing: .02em;
  text-transform: none;
}
.day-acc-btn[aria-expanded="true"] .day-acc-label::after {
  content: " \2014 click to collapse";
  font-size: .82em;
  font-weight: 500;
  color: #4a7ab5;
  opacity: .75;
  letter-spacing: .02em;
  text-transform: none;
}
@media (max-width: 640px) {
  .day-acc-btn .day-acc-label::after {
    display: inline-block;
    margin-left: 4px;
    font-size: .76em;
    letter-spacing: .01em;
    opacity: .7;
  }
}

/* First row after an accordion header gets no extra top border */
tr.day-acc-row:first-of-type td {
  border-top: none;
}

/* -- 12. Historical Weather panel ----------------------------- */

/* Panel: amber left accent + warm background */
#historicalPanel {
  border-left: 4px solid #d97706;
  background: linear-gradient(155deg, #fffbf0 0%, #fef3c7 18%, #f8fbff 60%);
}

/* Entrance animation */
#historicalPanel.historical-opening {
  animation: hist-reveal .35s ease both;
}
@keyframes hist-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mode banner */
.historical-mode-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(217, 119, 6, .12) 0%, rgba(217, 119, 6, .04) 100%);
  border: 1px solid rgba(217, 119, 6, .3);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: #92400e;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.historical-mode-icon {
  font-size: 1rem;
  opacity: .85;
}
.historical-mode-sub {
  margin-left: auto;
  font-weight: 500;
  font-size: .72rem;
  color: #b45309;
  text-transform: none;
  letter-spacing: 0;
  opacity: .85;
}

/* Active button: amber tint over the blue primary */
#historicalBtn.historical-btn-active {
  background: linear-gradient(130deg, #b45309 0%, #d97706 60%, #f59e0b 100%);
  border-color: #b45309;
  box-shadow: 0 4px 14px rgba(180, 83, 9, .3), 0 1px 3px rgba(180, 83, 9, .2);
  color: #fff;
}
#historicalBtn.historical-btn-active:hover {
  background: linear-gradient(130deg, #c05000 0%, #e07800 60%, #ffaa00 100%);
}

/* ============================================================
   LAYOUT RESTRUCTURE β€” Minimal Top Bar + Left Sidebar + Map
   ============================================================ */

:root {
  --tcb-h: 66px;
  --sidebar-w: 215px;
}

/* ? TOP CONTROL BAR */
#topControlBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tcb-h);
  z-index: 300;
  background: rgba(247, 250, 255, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border, rgba(124, 143, 173, 0.3));
  box-shadow: 0 2px 18px rgba(7, 18, 38, 0.09);
}

/* Inner wrapper β€” aligns with .app max-width */
.tcb-inner {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Search β€” takes most of the bar width */
.tcb-search {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  max-width: 680px;
}
.tcb-search .search-shell {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

/* Search icon */
.tcb-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7c8faa;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

/* The input itself */
.tcb-search input#cityInput {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 42px; /* right padding leaves room for clear button */
  border-radius: 10px;
  border: 1.5px solid #c5d3e7;
  background: #f7faff;
  color: var(--text, #0f172a);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .01em;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: 0 1px 4px rgba(7, 18, 38, 0.06);
}
.tcb-search input#cityInput::placeholder {
  color: #9aaabf;
  font-weight: 400;
}
.tcb-search input#cityInput:focus {
  outline: none;
  border-color: #3b7de8;
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(59, 125, 232, 0.14), 0 2px 8px rgba(7, 18, 38, 0.08);
}

/* Dropdown results */
.tcb-search .results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-width: 100vw;   /* never wider than the viewport */
  z-index: 400;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(7, 18, 38, 0.16);
}

/* Load Forecast button */
.tcb-load {
  width: auto !important;
  flex-shrink: 0;
  height: 42px;
  padding: 0 22px;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(28, 100, 202, 0.25);
}
.tcb-load:hover {
  box-shadow: 0 6px 18px rgba(28, 100, 202, 0.35);
}

/* Inline loading indicator */
#topControlBar .loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--muted, #52627a);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ? PUSH APP CONTENT below fixed bar */
.app {
  padding-top: calc(var(--tcb-h) + 12px);
  padding-bottom: 12px;
}

/* ? WORKSPACE β€” sidebar + map side by side */
.workspace {
  grid-template-columns: var(--sidebar-w) 1fr !important;
  align-items: stretch;
}

/* ? LEFT SIDEBAR */
#mapSidebar {
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  overflow-y: auto;
  height: clamp(400px, calc(100vh - var(--tcb-h) - 36px), 900px);
  background: var(--surface, rgba(247, 250, 255, 0.97));
  border-radius: var(--radius, 14px);
  border: 1px solid var(--border, rgba(124, 143, 173, 0.3));
  box-shadow: var(--shadow-soft);
  gap: 4px;
}

.sidebar-section {
  padding: 10px 0;
}

/* Pin legal/info section to the bottom */
#mapSidebar .sidebar-section.sidebar-legal-section {
  margin-top: auto;
  padding-top: 16px;
}

.sidebar-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted, #52627a);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 9px;
}

.sidebar-sep {
  height: 1px;
  background: var(--line, #d4ddec);
  margin: 6px 0;
}

/* Pills inside sidebar */
.sidebar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sidebar-pills .pill {
  width: auto !important;
  padding: 6px 12px;
  font-size: .8rem;
  flex-grow: 0;
}

/* Selects inside sidebar */
#mapSidebar select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: .85rem;
}

/* Historical / sidebar button */
.sidebar-btn {
  width: 100% !important;
  text-align: left;
  border-radius: 9px;
  font-size: .88rem;
  padding: 10px 13px;
  height: auto;
}
.sidebar-btn:hover {
  background: linear-gradient(160deg, #eef4ff, #e4eeff);
  border-color: #a5bfdf;
}

.sidebar-legal-section {
  border-top: 1px solid var(--line, #d4ddec);
}

.sidebar-legal-title {
  margin-bottom: 10px;
}

.sidebar-legal-nav {
  display: grid;
  gap: 8px;
}

.sidebar-legal-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(124, 143, 173, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text, #0b2533);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.sidebar-legal-link:hover,
.sidebar-legal-link:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(86, 108, 140, 0.4);
  color: var(--text, #0b2533);
  transform: translateY(-1px);
}

.sidebar-legal-link:focus-visible {
  outline: 2px solid rgba(0, 188, 218, 0.35);
  outline-offset: 2px;
}

.sidebar-legal-link-disabled {
  opacity: .68;
  cursor: default;
  pointer-events: none;
  border-style: dashed;
}

/* Mode note text */
.sidebar-mode-note {
  font-size: .76rem;
  color: var(--muted, #52627a);
  margin: 8px 0 0;
  line-height: 1.55;
}

/* ? MAP PANEL height */
.map-panel {
  grid-template-rows: minmax(0, 1fr);
  height: clamp(400px, calc(100vh - var(--tcb-h) - 36px), 900px);
}
.map-panel .panel-head { display: none; }

/* ? MAP WEATHER OVERLAY β€” bottom-right dark glass */
#mapWeatherOverlay {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  background: rgba(8, 16, 34, 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  width: 220px;
  pointer-events: none;
  animation: fadeIn .3s ease;
  overflow: hidden;
}

.mwo-city-row { margin-bottom: 6px; }

.mwo-city {
  margin: 0 0 5px;
  font-size: 1.05rem;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif;
  font-weight: 700;
  color: #e8f0fc;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mwo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  overflow: hidden;
}
.mwo-badges .badge,
.mwo-badges .chip {
  font-size: .63rem;
  padding: 2px 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mwo-temp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mwo-temp-row .hero-temp {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
}
.mwo-temp-row .hero-condition {
  font-size: .82rem;
  color: rgba(210, 225, 250, 0.82);
  line-height: 1.3;
}

/* Chip refs β€” always invisible regardless of JS toggling hidden attribute */
#mapModelChip,
#mapMicroChip,
#mapNowcastChip {
  display: none !important;
}

/* ? TIMELINE β€” hidden, kept in DOM for JS */
#stickyTimeline { display: none !important; }

/* ? DRAWER β€” kept in DOM, unused (historical now in sidebar) */
#drawerBackdrop {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(0,0,0,0.4); opacity: 0;
  pointer-events: none; transition: opacity .25s;
}
#drawerBackdrop.visible { opacity: 1; pointer-events: auto; }
#controlDrawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 300px;
  z-index: 400;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#controlDrawer.open { transform: translateX(0); }
.control-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: .85rem; font-weight: 700; color: var(--text); flex-shrink: 0;
}
.drawer-close {
  width: auto !important; min-width: 28px; height: 28px;
  border-radius: 6px; border: 1px solid #c5d3e7;
  background: linear-gradient(160deg,#fff,#f5f8fd);
  color: #344a63; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; padding: 0 8px;
}
.control-drawer-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
}

/* modePanel inside sidebar β€” override panel-level horizontal layout */
#modePanel {
  position: static;
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
#modePanel .meta-title { display: none; } /* label replaced by sidebar-label */
#modePanel .mode-note { min-width: 0; flex: none; }

/* metaPanel β€” single column */
#metaPanel .hero-main { grid-template-columns: 1fr; }

/* -- Responsive -------------------------------------------- */
/* Mobile sidebar toggle β€” hidden on desktop */
.tcb-sidebar-toggle {
  display: none;
  width: auto !important;
  min-width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1.5px solid #c5d3e7;
  background: linear-gradient(160deg, #ffffff, #f5f9ff);
  color: #344a63;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0 9px;
  transition: background .2s, border-color .2s;
}
.tcb-sidebar-toggle:hover {
  background: linear-gradient(160deg, #eef4ff, #e4eeff);
  border-color: #a5bfdf;
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  :root { --sidebar-w: 185px; }
}

@media (max-width: 640px) {
  :root { --tcb-h: 60px; }

  /* Show hamburger */
  .tcb-sidebar-toggle { display: flex; }

  /* Show backdrop element */
  .sidebar-backdrop { display: block; }

  /* Full-width map β€” sidebar removed from grid flow */
  .workspace { grid-template-columns: 1fr !important; }

  /* Sidebar becomes a fixed slide-in panel from the left */
  #mapSidebar {
    position: fixed;
    top: var(--tcb-h);
    left: 0;
    bottom: 0;
    width: 270px;
    height: auto;
    z-index: 250;
    border-radius: 0 14px 14px 0;
    box-shadow: 4px 0 28px rgba(7, 18, 38, 0.20);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  #mapSidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Top bar: tighten inner gap so search gets maximum room */
  .tcb-inner { gap: 8px; padding: 0 10px; }

  /* Search fills all remaining space */
  .tcb-search { flex: 1 1 0; min-width: 0; max-width: none; }

  /* CRITICAL: font-size must be ?16px on mobile to prevent
     iOS Safari from auto-zooming the viewport on input focus.
     Visual size is controlled by height/padding, not font-size. */
  .tcb-search input#cityInput { font-size: 16px; height: 40px; }

  /* Prevent double-tap zoom delay on interactive elements */
  button, input, select { touch-action: manipulation; }

  /* Load Forecast > icon-only pill on narrow screens.
     font-size:0 hides the label text; ::before injects just the ? symbol. */
  .tcb-load {
    width: 38px !important;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0;         /* hide "Load Forecast" text */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    flex-shrink: 0;
  }
  .tcb-load::before {
    content: "\21BB";
    font-size: 1.1rem;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif;
    line-height: 1;
    display: block;
  }

  /* Hide inline loading text on mobile β€” just the spinner dot */
  #inlineLoadingText { display: none; }

  /* Map overlay smaller */
  #mapWeatherOverlay { right: 8px; bottom: 8px; width: 190px; padding: 10px 12px; }
  .mwo-temp-row .hero-temp { font-size: 1.85rem; }

  /* -- Responsive content: prevent page expanding beyond viewport -- */

  /* Map fills full screen: remove the 12px gap that sits between
     the fixed bar and the workspace, so map starts flush below the bar */
  .app {
    padding-top: var(--tcb-h) !important;   /* exactly the bar height β€” no extra gap */
    padding-bottom: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 0;                                  /* workspace butts against panels below */
  }

  /* Restore a small visual gap between the panels that follow the map */
  .app > *:not(.workspace) {
    margin-top: 8px;
  }

  /* Every top-level panel must stay inside the viewport.
     overflow-x:hidden clips the panel, letting the table-wrap
     scroll internally instead of expanding the whole page. */
  .app > .panel,
  .app > section,
  .app > aside {
    max-width: calc(100vw - 16px);
    overflow-x: hidden;
  }

  /* Table wrap: constrain to panel width so overflow:auto creates
     a horizontal scrollbar rather than expanding the page */
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards: 2 columns fits comfortably on 375px screens */
  .cards,
  .current-summary-panel .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Charts: single column on mobile */
  .chart-grid,
  .chart-grid-weather {
    grid-template-columns: 1fr !important;
  }

  /* Marine KPI cards: 2 columns */
  .marine-kpi {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Reduce panel padding so content has more horizontal room */
  .panel { padding: 12px 10px; }

  /* Forecast head: stack vertically */
  .forecast-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ================================================================
   NEW UI STRUCTURE β€” Drawer sidebar + floating map actions
   Applied to both light and dark modes
   ================================================================ */

/* -- Brand name in top bar ---------------------------------------- */
.tcb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  min-width: 0;
}

.tcb-brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: min(48vw, 210px);
  object-fit: contain;
  overflow: visible;
}


.tcb-brand-text {
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  margin-left: 8px;
}
/* -- Theme mode label (tiny text beside toggle) ------------------- */
.tcb-theme-label {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9aaabf;
  opacity: .65;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  margin-right: -4px; /* snug against button */
  align-self: center;
}

/* -- Search clear button ------------------------------------------- */
.tcb-clear-btn {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: #c5d3e7 !important;
  color: #344a63 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: background .15s;
  z-index: 2;
  line-height: 1;
}
.tcb-clear-btn:hover { background: #a5bfdf !important; }
body.dark-theme .tcb-clear-btn {
  background: rgba(0, 229, 255, 0.15) !important;
  color: #00E5FF !important;
}
body.dark-theme .tcb-clear-btn:hover { background: rgba(0, 229, 255, 0.28) !important; }

/* -- Dark mode toggle button -------------------------------------- */
.tcb-theme-toggle {
  width: auto !important;
  min-width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1.5px solid #c5d3e7;
  background: linear-gradient(160deg, #ffffff, #f5f9ff);
  color: #344a63;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  transition: background .2s, border-color .2s, color .2s;
}
.tcb-theme-toggle:hover {
  background: linear-gradient(160deg, #eef4ff, #e4eeff);
  border-color: #a5bfdf;
}

/* -- Mic icon inside search pill ----------------------------------- */
.tcb-mic {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aaabf;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  transition: color .2s;
}

/* -- Hamburger always visible (sidebar is always a drawer) -------- */
.tcb-sidebar-toggle { display: flex !important; }

/* -- SIDEBAR β€” always a drawer on all screen sizes ----------------- */
.workspace { grid-template-columns: 1fr !important; }

#mapSidebar {
  position: fixed !important;
  top: var(--tcb-h) !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: auto !important;
  z-index: 250 !important;
  border-radius: 0 16px 16px 0 !important;
  transform: translateX(-100%) !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: 6px 0 28px rgba(7, 18, 38, 0.20) !important;
  background: rgba(247, 250, 255, 0.99) !important;
  border-color: rgba(124, 143, 173, 0.25) !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
#mapSidebar.sidebar-open { transform: translateX(0) !important; }

/* Backdrop always available */
.sidebar-backdrop { display: block; }

/* -- Drawer header ----------------------------------------------- */
.sidebar-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(124, 143, 173, 0.2);
  flex-shrink: 0;
}
.sidebar-drawer-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2563eb;
}
.sidebar-close-btn {
  width: auto !important;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #c5d3e7 !important;
  background: linear-gradient(160deg, #fff, #f5f9ff) !important;
  color: #344a63 !important;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-close-btn:hover {
  background: linear-gradient(160deg, #eef4ff, #e4eeff) !important;
  color: #2563eb !important;
  border-color: #a5bfdf !important;
}

/* Sidebar sections inside drawer */
#mapSidebar .sidebar-section { padding: 12px 18px; }
#mapSidebar .sidebar-sep { margin: 2px 0; }
#mapSidebar .sidebar-section.sidebar-legal-section { margin-top: auto; padding-bottom: 20px; }

/* -- MAP PANEL β€” full viewport height --------------------------- */
.map-panel {
  height: clamp(480px, calc(100vh - var(--tcb-h) - 36px), 1000px) !important;
}

/* -- RIGHT-SIDE FLOATING ACTION BUTTONS --------------------------- */
.map-right-actions {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mra-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(124, 143, 173, 0.3) !important;
  background: rgba(247, 250, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  color: #52627a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .2s, color .2s, border-color .2s !important;
  box-shadow: 0 4px 12px rgba(7, 18, 38, 0.12) !important;
  cursor: pointer;
}
.mra-btn:hover {
  background: rgba(235, 242, 255, 0.98) !important;
  border-color: #a5bfdf !important;
  color: #2563eb !important;
}
.mra-btn.mra-active {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

/* -- MAP WEATHER OVERLAY β€” centered hero card ----------------------- */
#mapWeatherOverlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(247, 250, 255, 0.97) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(124, 143, 173, 0.2) !important;
  border-bottom: none !important;
  padding: 22px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  z-index: 10;
  animation: fadeIn .3s ease;
  overflow: visible !important;
  pointer-events: none;
}
/* Big condition emoji */
.hero-icon-display {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(49,119,210,.18));
}
/* -- Precipitation intensity tier dots (rendered below cloud icon) -- */
.cond-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}
.temp-weather-icon[data-precip-tier]:not([data-precip-tier=""]),
.cond-icon[data-precip-tier]:not([data-precip-tier=""]),
.hero-icon-display[data-precip-tier]:not([data-precip-tier=""]) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.temp-weather-icon[data-precip-tier]:not([data-precip-tier=""]) {
  height: auto;
  width: 22px;
  padding: 1px 0 2px;
  gap: 0;
}
.temp-weather-icon[data-precip-tier]:not([data-precip-tier=""])::after,
.cond-icon[data-precip-tier]:not([data-precip-tier=""])::after {
  display: block;
  font-size: .5em;
  line-height: 1;
  letter-spacing: 1.5px;
}
.hero-icon-display[data-precip-tier]:not([data-precip-tier=""])::after {
  display: block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 4px;
  margin-top: 2px;
}
/* Rain dots */
.temp-weather-icon[data-precip-tier="r1"]::after,
.cond-icon[data-precip-tier="r1"]::after,
.hero-icon-display[data-precip-tier="r1"]::after { content: "\2022"; color: #55b8f5; }
.temp-weather-icon[data-precip-tier="r2"]::after,
.cond-icon[data-precip-tier="r2"]::after,
.hero-icon-display[data-precip-tier="r2"]::after { content: "\2022\2022"; color: #3fa8e8; }
.temp-weather-icon[data-precip-tier="r3"]::after,
.cond-icon[data-precip-tier="r3"]::after,
.hero-icon-display[data-precip-tier="r3"]::after { content: "\2022\2022\2022"; color: #2a96db; }
/* Snow dots */
.temp-weather-icon[data-precip-tier="s1"]::after,
.cond-icon[data-precip-tier="s1"]::after,
.hero-icon-display[data-precip-tier="s1"]::after { content: "\2022"; color: #9dcce8; }
.temp-weather-icon[data-precip-tier="s2"]::after,
.cond-icon[data-precip-tier="s2"]::after,
.hero-icon-display[data-precip-tier="s2"]::after { content: "\2022\2022"; color: #82b8d8; }
.temp-weather-icon[data-precip-tier="s3"]::after,
.cond-icon[data-precip-tier="s3"]::after,
.hero-icon-display[data-precip-tier="s3"]::after { content: "\2022\2022\2022"; color: #6ba4c8; }
/* Large temperature */
#mapWeatherOverlay .hero-temp {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: #0d1e38 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}
/* Condition text β€” uppercase spaced */
#mapWeatherOverlay .hero-condition {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #52627a !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
/* City location pill */
.mwo-city-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
  margin-top: 8px;
}
.mwo-pin {
  color: #3177D2;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mwo-city {
  margin: 0 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.mwo-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.mwo-badges .badge {
  font-size: .62rem !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

/* -- Scroll-down button (map > forecast) -------------------------- */
.map-scroll-down {
  position: absolute;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));  /* fallback; JS overrides dynamically based on overlay height */
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(124, 143, 173, 0.35);
  background: rgba(247, 250, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #344a63;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(7, 18, 38, 0.18);
  transition: background .2s, box-shadow .2s, transform .2s;
  /* hide on desktop β€” not needed when map doesn't fill screen */
  display: none;
}
.map-scroll-down:hover {
  background: rgba(235, 242, 255, 0.96);
  box-shadow: 0 6px 20px rgba(7, 18, 38, 0.24);
}
.map-scroll-down:active {
  transform: translateX(-50%) scale(0.96);
}
.map-scroll-down.scroll-btn-loading {
  cursor: default;
  opacity: .85;
  pointer-events: none;
  /* keep dynamic position from JS so loading state stays above hero */
}
/* Spinning arrow when loading */
.map-scroll-down.scroll-btn-loading svg {
  animation: scroll-btn-spin .9s linear infinite;
}
@keyframes scroll-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .map-scroll-down { display: flex; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .map-scroll-down { display: flex; }
}
/* hidden attribute must always win over display:flex */
.map-scroll-down[hidden] { display: none !important; }

/* hidden attribute always wins β€” prevents display:flex overriding it */
#mapWeatherOverlay[hidden] { display: none !important; }

/* When weather strip is hidden, drop the button lower */
#mapWeatherOverlay[hidden] ~ .map-scroll-down,
.map-stage:not(:has(#mapWeatherOverlay:not([hidden]))) .map-scroll-down {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* scroll-down button dark styles are in the main dark-theme block below */

/* -- Weather overlay strip β€” ensure badge/pin visibility in light mode -- */
#mapWeatherOverlay .badge {
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #1d4ed8 !important;
}
#mapWeatherOverlay .badge.active {
  background: rgba(37, 99, 235, 0.18) !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
  color: #1e40af !important;
}

/* -- Responsive for new UI elements ------------------------------- */
@media (max-width: 640px) {
  /* Map fills full screen β€” height set by JS (window.innerHeight - tcbH).
     CSS is a reliable fallback if JS hasn't run yet.
     display:block exits the 3-row grid so no empty rows steal space.
     .map-stage override wins over the max-width:760px rule that sets 300px. */
  .map-panel {
    display: block !important;
    height: calc(100vh - var(--tcb-h)) !important;
    min-height: calc(100vh - var(--tcb-h)) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 -8px !important;
    width: calc(100% + 16px) !important;
    max-width: none !important;
  }
  .map-stage {
    height: 100% !important;
    min-height: 0 !important;
  }
  .workspace {
    margin: 0 !important;
    overflow: visible !important;
  }

  .mwo-right .hero-temp { font-size: 1.6rem !important; }
  #mapWeatherOverlay { padding: 10px 14px !important; }
  .mwo-city { font-size: .88rem !important; }
  .tcb-brand { display: flex; }
  .tcb-brand-logo { height: 42px; max-width: min(42vw, 160px); }
  .tcb-brand-text { font-size: .8rem; margin-left: 6px; }
  .tcb-theme-label { display: none; }  /* hide label on very narrow screens */
  .tcb-theme-toggle { min-width: 34px; height: 34px; font-size: .9rem; }
}


/* ================================================================
   LUMINOUS AZURE β€” Light theme (body:not(.dark-theme))
   Primary #00BCDA  BG #E4F5FA  Surface #FFF  Text #0B2533
   Muted #5B8E9F  Border #C0E5EE
   ================================================================ */

/* -- Root vars --------------------------------------------------- */
body:not(.dark-theme) {
  --bg:          #E8F6FB;
  --surface:     rgba(255,255,255,0.97);
  --text:        #0B2533;
  --muted:       #5B8E9F;
  --border:      rgba(0,188,218,0.18);
  --line:        #C8EAF2;
  --accent:      #00BCDA;
  --teal:        #00BCDA;
  --warn:        #c07020;
  --err:         #dc2626;
  --ok:          #00937A;
  --shadow:      0 12px 30px rgba(0,80,110,0.10);
  --shadow-soft: 0 6px 16px rgba(0,80,110,0.07);
  background: linear-gradient(145deg, #C4EAF6 0%, #D8F1FB 45%, #EBF8FD 100%) !important;
}

/* -- Panels ------------------------------------------------------- */
body:not(.dark-theme) .panel           { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,188,218,0.16) !important; box-shadow: 0 8px 28px rgba(0,80,110,0.09) !important; }
body:not(.dark-theme) .panel-subtle    { background: linear-gradient(160deg,#fff,#EFF9FC) !important; border-color: rgba(0,188,218,0.12) !important; }
body:not(.dark-theme) .hero            { background: linear-gradient(155deg,#fff,#F2FAFD 48%,#EAF7FB) !important; border-color: rgba(0,188,218,0.16) !important; }
body:not(.dark-theme) .metrics-panel,
body:not(.dark-theme) .analysis-panel,
body:not(.dark-theme) .detail-panel,
body:not(.dark-theme) .utility-panel  { background: linear-gradient(155deg,#fff,#F5FBFE 60%,#EDF8FB) !important; border-color: rgba(0,188,218,0.14) !important; }
body:not(.dark-theme) .context-panel  { border-color: rgba(0,188,218,0.16) !important; }
body:not(.dark-theme) .map-panel      { border-color: rgba(0,188,218,0.18) !important; }
body:not(.dark-theme) .map-panel .panel-head { background: linear-gradient(130deg,#F5FBFE,#E2F5FA) !important; border-bottom-color: #C8EAF2 !important; }

/* -- Typography --------------------------------------------------- */
body:not(.dark-theme) h1,body:not(.dark-theme) h2,body:not(.dark-theme) h3,
body:not(.dark-theme) h4,body:not(.dark-theme) h5,body:not(.dark-theme) h6 { color: #0B2533 !important; }
body:not(.dark-theme) .muted      { color: #5B8E9F !important; }
body:not(.dark-theme) .subtitle   { color: #5B8E9F !important; }
body:not(.dark-theme) label       { color: #1D6070 !important; }
body:not(.dark-theme) p           { color: #1D4455; }
body:not(.dark-theme) .mode-note  { color: #3A7A8C !important; }
body:not(.dark-theme) .marine-note { color: #3A7A8C !important; }
body:not(.dark-theme) .forecast-summary { color: #3A7A8C !important; }

/* -- Inputs & selects ---------------------------------------------- */
body:not(.dark-theme) input,body:not(.dark-theme) select { border-color: #C0E5EE !important; background: #FAFEFF !important; color: #0B2533 !important; }
body:not(.dark-theme) input::placeholder { color: #8BBCC8 !important; }
body:not(.dark-theme) input:focus,body:not(.dark-theme) select:focus { border-color: #00BCDA !important; box-shadow: 0 0 0 3px rgba(0,188,218,0.15) !important; }
body:not(.dark-theme) select option { background: #fff; color: #0B2533; }
body:not(.dark-theme) .results { border-color: #C8EAF2 !important; background: #fff !important; }
body:not(.dark-theme) .results button { border-bottom-color: #E0F4F9 !important; color: #1D4455 !important; background: transparent !important; }
body:not(.dark-theme) .results button:hover { background: rgba(0,188,218,0.06) !important; color: #006B88 !important; }

/* -- Buttons ------------------------------------------------------- */
body:not(.dark-theme) button { color: #1D4455; }
body:not(.dark-theme) .primary { background: linear-gradient(130deg,#0098B2,#00BCDA) !important; border-color: #0098B2 !important; color: #fff !important; box-shadow: 0 8px 16px rgba(0,188,218,0.25) !important; }
body:not(.dark-theme) .primary:hover { background: linear-gradient(130deg,#007A94,#0098B2) !important; box-shadow: 0 8px 20px rgba(0,188,218,0.35) !important; }
body:not(.dark-theme) .ghost { background: linear-gradient(160deg,#fff,#EFF9FC) !important; border-color: #B8E0EC !important; color: #006B88 !important; }
body:not(.dark-theme) .ghost:hover { border-color: #00BCDA !important; background: linear-gradient(160deg,#EDF8FB,#E0F4F9) !important; color: #004E66 !important; }
body:not(.dark-theme) .control-actions h4::before { background: linear-gradient(180deg,#00BCDA,#0098B2) !important; }
body:not(.dark-theme) .control-actions h4 { border-bottom-color: #C8EAF2 !important; }
body:not(.dark-theme) .control-actions .toolbar .primary { background: linear-gradient(130deg,#007A94,#00BCDA 60%,#00D0F0) !important; box-shadow: 0 4px 14px rgba(0,188,218,0.3) !important; }
body:not(.dark-theme) .control-actions .toolbar .primary:hover { background: linear-gradient(130deg,#006880,#009EBF 60%,#00BCDA) !important; }
body:not(.dark-theme) .control-actions .toolbar .ghost { border-color: #90D0E4 !important; color: #006B88 !important; background: linear-gradient(160deg,#F5FBFE,#EAF7FB) !important; }
body:not(.dark-theme) .control-actions .toolbar .ghost:hover { border-color: #00BCDA !important; background: linear-gradient(160deg,#E5F7FB,#D8F2F9) !important; color: #004E66 !important; }
body:not(.dark-theme) .control-actions .loading { background: rgba(0,188,218,0.07) !important; border-color: rgba(0,188,218,0.2) !important; color: #006B88 !important; }

/* -- Pills --------------------------------------------------------- */
body:not(.dark-theme) .pill { background: linear-gradient(160deg,#fff,#F2FAFD) !important; border-color: #B8E0EC !important; color: #006B88 !important; }
body:not(.dark-theme) .pill:hover { background: rgba(0,188,218,0.08) !important; border-color: #00BCDA !important; color: #004E66 !important; }
body:not(.dark-theme) .pill.active { background: linear-gradient(130deg,#007A94,#00BCDA) !important; border-color: #00BCDA !important; color: #fff !important; box-shadow: 0 6px 12px rgba(0,188,218,0.22) !important; }

/* -- Badges -------------------------------------------------------- */
body:not(.dark-theme) .badge { background: linear-gradient(130deg,#fff2e2,#ffe7cb) !important; border-color: #eea65f !important; color: #8b4a08 !important; }
body:not(.dark-theme) .badge.active { background: linear-gradient(130deg,#D5F5FC,#C0EEFC) !important; border-color: #70CEDF !important; color: #006B88 !important; }
body:not(.dark-theme) .chip { border-color: #C0E5EE !important; color: #3A7A8C !important; }
body:not(.dark-theme) .chip.strong { background: rgba(0,188,218,0.1) !important; border-color: rgba(0,188,218,0.28) !important; color: #006B88 !important; }
body:not(.dark-theme) .chip.ok { background: rgba(0,147,122,0.1) !important; border-color: rgba(0,147,122,0.25) !important; color: #00937A !important; }
body:not(.dark-theme) .chip.warn { background: rgba(192,112,32,0.1) !important; border-color: rgba(192,112,32,0.3) !important; color: #c07020 !important; }

/* -- Confidence strip ---------------------------------------------- */
body:not(.dark-theme) .confidence-strip { border-top-color: #C8EAF2 !important; background: rgba(0,188,218,0.04) !important; }
body:not(.dark-theme) .c-pill { background: #fff !important; border-color: #C0E5EE !important; color: #2A6070 !important; }
body:not(.dark-theme) .c-pill strong { color: #006B88 !important; }

/* -- Chart accordion ----------------------------------------------- */
body:not(.dark-theme) .chart-accordion-btn { background: linear-gradient(160deg,#fff,#EFF9FC) !important; border-color: #C0E5EE !important; color: #006B88 !important; }
body:not(.dark-theme) .chart-accordion-btn:hover { background: rgba(0,188,218,0.06) !important; border-color: #90D0E4 !important; }
body:not(.dark-theme) .chart-accordion-icon { color: #4A8D9E !important; }

/* -- Summary cards (.card) ----------------------------------------- */
body:not(.dark-theme) .card { background: linear-gradient(150deg,#fff,#F2FAFD) !important; border-color: #C0E5EE !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(0,80,110,0.05) !important; }
body:not(.dark-theme) .card h4 { color: #3A7A8C !important; }
body:not(.dark-theme) .card p { color: #0B2533 !important; }
body:not(.dark-theme) .wind-compact { color: #0B2533 !important; }
body:not(.dark-theme) .wind-compact .bchip { border-color: #7FD5CA !important; background: #EBFBF8 !important; color: #006B88 !important; }
body:not(.dark-theme) .wind-arrow { color: #00937A !important; }

/* -- Current conditions panel -------------------------------------- */
body:not(.dark-theme) .current-conditions-panel { background: linear-gradient(156deg,#fff,#F0F9FC 52%,#E8F6FA) !important; border-color: rgba(0,188,218,0.2) !important; box-shadow: 0 12px 24px rgba(0,80,110,0.08),inset 0 1px 0 rgba(255,255,255,0.86) !important; }
body:not(.dark-theme) .day-view-panel { background: linear-gradient(156deg,#fff,#eef9fd 56%,#e5f4fa) !important; border-color: rgba(0,188,218,0.2) !important; }
body:not(.dark-theme) .day-view-guide { color: #2f6d7f !important; }
body:not(.dark-theme) .day-view-btn { border-color: #B8E0EC !important; color: #006B88 !important; background: linear-gradient(140deg,#F2FBFE,#E7F6FC) !important; }
body:not(.dark-theme) .day-view-btn.active { background: linear-gradient(135deg,#6ad9f0,#31bee8 58%,#149fce) !important; border-color: #45b6da !important; color: #00334d !important; }
body:not(.dark-theme) .day-view-top { color: #005d79 !important; }
body:not(.dark-theme) .day-view-temp { color: #1f5d70 !important; }
body:not(.dark-theme) .day-view-hint { color: #4a8d9e !important; }
body:not(.dark-theme) .table-swipe-hint { color: #4a8d9e !important; }
body:not(.dark-theme) .current-conditions-head { background: rgba(255,255,255,0.86) !important; border-color: #C0E5EE !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important; }
body:not(.dark-theme) .current-pill { border-color: #B8E0EC !important; color: #006B88 !important; background: #EFF9FC !important; }
body:not(.dark-theme) .current-pill.active { color: #006B88 !important; border-color: #70CEDF !important; background: linear-gradient(130deg,#D5F5FC,#C0EEFC) !important; }
body:not(.dark-theme) .current-pill.fallback { color: #8a5112 !important; border-color: #e9c999 !important; background: #fff5e8 !important; }
body:not(.dark-theme) .current-pill.estimate { color: #8a5112 !important; border-color: #e9c999 !important; background: #fff5e8 !important; }
body:not(.dark-theme) .current-timestamp { color: #0098B2 !important; font-weight: 700 !important; }
body:not(.dark-theme) .current-condition { color: #0B2533 !important; }
body:not(.dark-theme) .current-card { background: linear-gradient(160deg,#fff,#F5FBFE 56%,#EBF7FA) !important; border-color: #C0E5EE !important; box-shadow: 0 10px 18px rgba(0,80,110,0.07),inset 0 1px 0 rgba(255,255,255,0.92) !important; }
body:not(.dark-theme) .current-card:hover { border-color: #00BCDA !important; box-shadow: 0 6px 20px rgba(0,188,218,0.15) !important; }
body:not(.dark-theme) .current-icon { background: linear-gradient(160deg,#E8F8FC,#D5F0F9) !important; border-color: #A8D8E8 !important; color: #006B88 !important; }
body:not(.dark-theme) .current-key   { color: #3A7A8C !important; }
body:not(.dark-theme) .current-value { color: #0B2533 !important; }
body:not(.dark-theme) .current-note  { color: #4A8D9E !important; }
body:not(.dark-theme) .current-card[data-metric="wind-dir"] .current-note { color: #00BCDA !important; }
body:not(.dark-theme) .card-bar      { background: rgba(0,188,218,0.1) !important; }
body:not(.dark-theme) .card-bar-fill { background: linear-gradient(90deg,#0098B2,#00BCDA) !important; }

/* -- Forecast table ------------------------------------------------ */
body:not(.dark-theme) .table-wrap { background: #fff !important; border-color: #C8EAF2 !important; }
body:not(.dark-theme) th { background: linear-gradient(180deg,#F2FBFE,#E8F6FB) !important; color: #2A6070 !important; border-bottom-color: #C0E5EE !important; }
body:not(.dark-theme) td { border-bottom-color: #DCF0F7 !important; color: #1D4455 !important; }
body:not(.dark-theme) tr.forecast-row td { background: #fff !important; }
body:not(.dark-theme) tr.forecast-row.row-alt td { background: #F5FBFE !important; }
body:not(.dark-theme) tr.forecast-row:hover td { background: #E8F7FB !important; }
body:not(.dark-theme) tr.current-row td { background: linear-gradient(130deg,#C8F0FA,#B8E8F6) !important; border-bottom-color: #90CCDF !important; }
body:not(.dark-theme) tr.current-row td:first-child { box-shadow: inset 4px 0 0 #00BCDA !important; }
body:not(.dark-theme) tr.day-separator td { background: linear-gradient(180deg,#E8F6FB,#D8F0F8) !important; color: #2A6070 !important; border-bottom-color: #B8E0EC !important; }
body:not(.dark-theme) td.time-cell { color: #006B88 !important; }
body:not(.dark-theme) td.metric-cell { color: #0B2533 !important; }
body:not(.dark-theme) .temp-weather-icon { border-color: #C0E5EE !important; background: linear-gradient(160deg,#EBF8FC,#D8F2FA) !important; }
body:not(.dark-theme) tr.current-row .temp-weather-icon { border-color: #70CEDF !important; background: linear-gradient(160deg,#C8F0FA,#B8E8F6) !important; }
body:not(.dark-theme) .now-label { background: #C8F0FA !important; color: #006B88 !important; border-color: #70CEDF !important; }
body:not(.dark-theme) tr.debug-row td { background: #F5FBFE !important; border-bottom-color: #C8EAF2 !important; }
body:not(.dark-theme) .debug-details summary { color: #2A6070 !important; }

/* -- Loading indicator --------------------------------------------- */
body:not(.dark-theme) .loading { color: #006B88 !important; }
body:not(.dark-theme) .dot { background: #00BCDA !important; box-shadow: 0 0 0 0 rgba(0,188,218,0.5); animation: dot-pulse-teal 1.2s ease-in-out infinite; }
@keyframes dot-pulse-teal {
  0%,100% { transform:scale(1);    box-shadow:0 0 0 0   rgba(0,188,218,.5); }
  50%      { transform:scale(1.25); box-shadow:0 0 0 4px rgba(0,188,218,0); }
}

/* -- Chart tooltip ------------------------------------------------- */
body:not(.dark-theme) .chart-tooltip { background: rgba(11,37,51,0.95) !important; color: #E8F8FC !important; border-color: rgba(0,188,218,0.4) !important; }

/* -- Chart cards & guide ------------------------------------------- */
body:not(.dark-theme) .chart-card { background: #fff !important; border-color: rgba(0,188,218,0.14) !important; }
body:not(.dark-theme) .chart-card canvas { background: linear-gradient(180deg,#fff,#F5FBFE) !important; border-color: #C0E5EE !important; }
body:not(.dark-theme) .chart-card-head h4 { color: #0B2533 !important; }
body:not(.dark-theme) .chart-card-head p  { color: #5B8E9F !important; }
body:not(.dark-theme) .chart-guide { border-color: #C8EAF2 !important; color: #3A7A8C !important; background: rgba(255,255,255,0.78) !important; }
body:not(.dark-theme) .chart-guide summary { color: #2A6070 !important; }
body:not(.dark-theme) .guide-toggle-hint { color: #5B8E9F !important; }
body:not(.dark-theme) .chart-guide summary::after { color: #4A8D9E !important; }
body:not(.dark-theme) .chart-guide ul { color: #3A7A8C !important; }

/* -- Historical cards ---------------------------------------------- */
body:not(.dark-theme) .fact-card { background: linear-gradient(140deg,#EFF9FC,#E5F5FB) !important; border-color: #C0E5EE !important; }
body:not(.dark-theme) .fact-card h4 { color: #006B88 !important; }
body:not(.dark-theme) .fact-card p  { color: #1D4455 !important; }
body:not(.dark-theme) .event-card { border-color: #C8EAF2 !important; background: #fff !important; }
body:not(.dark-theme) .event-card summary { background: linear-gradient(135deg,#EFF9FC,#E2F4FA) !important; color: #0B2533 !important; }
body:not(.dark-theme) .event-details { border-top-color: #DCF0F7 !important; }
body:not(.dark-theme) .metric { background: #F2FBFE !important; border-color: #C8EAF2 !important; }
body:not(.dark-theme) .metric .k { color: #3A7A8C !important; }
body:not(.dark-theme) .metric .v { color: #0B2533 !important; }
body:not(.dark-theme) .etype { background: #EFF9FC !important; border-color: #C0E5EE !important; color: #006B88 !important; }
body:not(.dark-theme) .historical-mode-banner { background: rgba(192,112,32,0.08) !important; border-color: rgba(192,112,32,0.24) !important; color: #c07020 !important; }

/* -- Assistant panel ----------------------------------------------- */
body:not(.dark-theme) .assistant-panel {
  background: linear-gradient(156deg, #f8fcff 0%, #edf5ff 100%) !important;
  border-color: #c2d7ec !important;
}
body:not(.dark-theme) .assistant-status { background: #EFF9FC !important; border-color: #C0E5EE !important; color: #2A6070 !important; }
body:not(.dark-theme) .assistant-status.ready { background: #E8F7FE !important; border-color: #8FD2E7 !important; color: #0A6A90 !important; }
body:not(.dark-theme) .assistant-accordion-btn { background: linear-gradient(160deg,#fcfeff,#f1f7ff) !important; border-color: #bed2e8 !important; color: #214869 !important; }
body:not(.dark-theme) .assistant-accordion-btn:hover { background: rgba(226,238,252,0.62) !important; border-color: #a8c2df !important; color: #113d62 !important; }
body:not(.dark-theme) .assistant-accordion-icon { color: #4c6989 !important; }
body:not(.dark-theme) .assistant-quick .pill { background: linear-gradient(150deg,#ffffff,#f3f8ff) !important; border-color: #bfd4ea !important; color: #1f4667 !important; }
body:not(.dark-theme) .assistant-msg { background: #F5FBFE !important; border-color: #C8EAF2 !important; color: #1D4455 !important; }
body:not(.dark-theme) .assistant-msg.user { background: #E0F5FB !important; border-color: #90D0E4 !important; color: #0B2533 !important; }
body:not(.dark-theme) .assistant-msg.assistant { background: #F2FBFE !important; }
body:not(.dark-theme) .assistant-form input { background: #ffffff !important; border-color: #c5d8ec !important; }

/* -- Timeline chips ------------------------------------------------ */
body:not(.dark-theme) .time-chip { border-color: #C0E5EE !important; color: #1D6070 !important; }
body:not(.dark-theme) .time-chip.active { border-color: #00BCDA !important; background: linear-gradient(130deg,#D5F2FA,#C0EAFA) !important; color: #00607A !important; }
body:not(.dark-theme) .time-chip.active::before { background: #00BCDA !important; }

/* -- Top control bar ----------------------------------------------- */
body:not(.dark-theme) #topControlBar { background: rgba(235,248,253,0.97) !important; border-color: rgba(0,188,218,0.18) !important; box-shadow: 0 4px 16px rgba(0,80,110,0.1) !important; }
body:not(.dark-theme) .tcb-brand { color: #0098B2 !important; }
body:not(.dark-theme) .tcb-sidebar-toggle { color: #006B88 !important; border-color: rgba(0,188,218,0.2) !important; background: rgba(0,188,218,0.06) !important; }
body:not(.dark-theme) .tcb-sidebar-toggle:hover { background: rgba(0,188,218,0.12) !important; }
body:not(.dark-theme) .tcb-theme-toggle { border-color: rgba(0,188,218,0.2) !important; background: rgba(0,188,218,0.06) !important; }
body:not(.dark-theme) .tcb-search input#cityInput { background: rgba(0,188,218,0.04) !important; border-color: rgba(0,188,218,0.2) !important; color: #0B2533 !important; }
body:not(.dark-theme) .tcb-search input#cityInput::placeholder { color: #8BBCC8 !important; }
body:not(.dark-theme) .tcb-search input#cityInput:focus { border-color: #00BCDA !important; box-shadow: 0 0 0 3px rgba(0,188,218,0.15) !important; }
body:not(.dark-theme) .tcb-search-icon { color: #5B8E9F !important; }
body:not(.dark-theme) .tcb-clear-btn { color: #5B8E9F !important; }
body:not(.dark-theme) .tcb-search .results { background: #fff !important; border-color: #C8EAF2 !important; }

/* -- Sidebar ------------------------------------------------------- */
body:not(.dark-theme) #mapSidebar { background: rgba(240,249,252,0.98) !important; border-color: rgba(0,188,218,0.16) !important; box-shadow: 6px 0 40px rgba(0,80,110,0.12) !important; }
body:not(.dark-theme) .sidebar-drawer-head { border-bottom-color: rgba(0,188,218,0.14) !important; }
body:not(.dark-theme) .sidebar-drawer-title { color: #0098B2 !important; }
body:not(.dark-theme) .sidebar-close-btn { border-color: rgba(0,188,218,0.2) !important; background: rgba(0,188,218,0.06) !important; color: #5B8E9F !important; }
body:not(.dark-theme) .sidebar-close-btn:hover { background: rgba(0,188,218,0.12) !important; color: #006B88 !important; border-color: #00BCDA !important; }
body:not(.dark-theme) #mapSidebar .sidebar-label { color: #5B8E9F !important; }
body:not(.dark-theme) #mapSidebar .sidebar-sep { background: rgba(0,188,218,0.12) !important; }
body:not(.dark-theme) .sidebar-legal-link {
  background: rgba(0, 188, 218, 0.05) !important;
  border-color: rgba(0, 188, 218, 0.18) !important;
  color: #0b4d5d !important;
}
body:not(.dark-theme) .sidebar-legal-link:hover,
body:not(.dark-theme) .sidebar-legal-link:focus-visible {
  background: rgba(0, 188, 218, 0.1) !important;
  border-color: rgba(0, 188, 218, 0.34) !important;
  color: #005d75 !important;
}
body:not(.dark-theme) .sidebar-legal-link-disabled {
  background: rgba(0, 188, 218, 0.03) !important;
  color: #7aa6b3 !important;
}

/* -- Map overlay (top-left location label) ------------------------- */
body:not(.dark-theme) .map-overlay { background: rgba(235,248,253,0.9) !important; border-color: rgba(0,188,218,0.18) !important; }
body:not(.dark-theme) .map-city { color: #0B2533 !important; }
body:not(.dark-theme) .map-meta { color: #4A8D9E !important; }

/* -- Scroll-down button -------------------------------------------- */
body:not(.dark-theme) .map-scroll-down { background: rgba(235,248,253,0.92) !important; border-color: rgba(0,188,218,0.3) !important; color: #006B88 !important; }
body:not(.dark-theme) .map-scroll-down:hover { background: rgba(0,188,218,0.1) !important; border-color: #00BCDA !important; }

/* -- Centered hero card (mapWeatherOverlay) ------------------------ */
body:not(.dark-theme) #mapWeatherOverlay { background: rgba(235,248,253,0.98) !important; border-color: rgba(0,188,218,0.22) !important; }
body:not(.dark-theme) #mapWeatherOverlay .hero-temp { color: #0B2533 !important; }
body:not(.dark-theme) #mapWeatherOverlay .hero-condition { color: #3A8A9E !important; }
body:not(.dark-theme) .hero-icon-display { filter: drop-shadow(0 2px 8px rgba(0,188,218,0.3)) !important; }
body:not(.dark-theme) .mwo-city-pill { background: rgba(0,188,218,0.07) !important; border-color: rgba(0,188,218,0.22) !important; }
body:not(.dark-theme) .mwo-pin { color: #00BCDA !important; }
body:not(.dark-theme) .mwo-city { color: #0B2533 !important; }
body:not(.dark-theme) #mapWeatherOverlay .badge.active { background: linear-gradient(130deg,#D5F5FC,#C0EEFC) !important; border-color: #70CEDF !important; color: #006B88 !important; }

/* -- Hero temp & condition (metaPanel) ----------------------------- */
body:not(.dark-theme) .hero-temp { color: #0B2533 !important; }
body:not(.dark-theme) .hero-condition { color: #3A7A8C !important; }
body:not(.dark-theme) #metaPanel .hero-condition { color: #3A7A8C !important; }

/* -- Marine -------------------------------------------------------- */
body:not(.dark-theme) .marine-kpi .card h4 { color: #006B88 !important; }
body:not(.dark-theme) .marine-exposure { border-color: #A8D8E8 !important; background: linear-gradient(130deg,#EBF8FC,#DFF3FA) !important; color: #004E66 !important; }
body:not(.dark-theme) .marine-point-pill { border-color: #90D0E4 !important; background: linear-gradient(130deg,#E8F8FC,#D8F2FA) !important; color: #005E78 !important; }
body:not(.dark-theme) .marine-kpi-card { background: linear-gradient(150deg,#fff,#F2FBFE) !important; border-color: #C0E5EE !important; }
body:not(.dark-theme) .marine-kpi-label { color: #3A7A8C !important; }
body:not(.dark-theme) .marine-kpi-value { color: #0B2533 !important; }

/* -- Warning / error ----------------------------------------------- */
body:not(.dark-theme) .warn { color: #c07020 !important; }
body:not(.dark-theme) #warningText:not(:empty) { background: rgba(192,112,32,0.07) !important; border-left: 3px solid #c07020 !important; border-radius: 10px !important; padding: 10px 14px 10px 12px !important; color: #7a4010 !important; }

/* -- Skeleton loading ---------------------------------------------- */
body:not(.dark-theme) .skeleton-line, body:not(.dark-theme) .skeleton-card { background: rgba(0,188,218,0.08) !important; }

/* -- Leaflet controls ---------------------------------------------- */
body:not(.dark-theme) .leaflet-control-zoom a { background: rgba(235,248,253,0.94) !important; border-color: rgba(0,188,218,0.22) !important; color: #006B88 !important; }
body:not(.dark-theme) .leaflet-control-zoom a:hover { background: rgba(0,188,218,0.1) !important; }

/* -- Scrollbar ----------------------------------------------------- */
body:not(.dark-theme) ::-webkit-scrollbar-thumb { background: #B8E0EC !important; }
body:not(.dark-theme) ::-webkit-scrollbar-track { background: rgba(0,188,218,0.04) !important; }

/* ================================================================
   NOCTURNAL AZURE β€” Dark theme (body.dark-theme)
   Primary #00E5FF  BG #0B1426  Surface #1A2B47  Text #E8F0FE
   Muted #7B9AB8  Accent-blue #3177D2
   ================================================================ */

body.dark-theme {
  --bg:          #0B1426;
  --surface:     #1A2B47;
  --surface-strong: #162238;
  --surface-deep:   #0f1c32;
  --text:        #E8F0FE;
  --muted:       #7B9AB8;
  --border:      rgba(0,229,255,0.1);
  --line:        rgba(0,229,255,0.07);
  --accent:      #00E5FF;
  --teal:        #00E5FF;
  --blue:        #3177D2;
  --warn:        #FF9800;
  --err:         #FF4444;
  --ok:          #00E676;
  --shadow:      0 12px 40px rgba(0,0,0,0.65);
  --shadow-soft: 0 6px 20px rgba(0,0,0,0.4);
  --radius:      16px;
  background: #0B1426 !important;
  color: #E8F0FE !important;
}

/* -- Body ambient themes ------------------------------------------- */
body.dark-theme.theme-sunny        { background: linear-gradient(130deg,#0d2035,#0B1426) !important; }
body.dark-theme.theme-rain         { background: linear-gradient(130deg,#07182a,#0B1426) !important; }
body.dark-theme.theme-thunderstorm { background: linear-gradient(150deg,#07091a,#0e0b22,#030408) !important; }
body.dark-theme.theme-cloudy       { background: linear-gradient(130deg,#0a1c30,#0B1426) !important; }
body.dark-theme.theme-night        { background: radial-gradient(circle at 70% 8%,#0d2035,#0B1426) !important; }

/* -- Panels -------------------------------------------------------- */
body.dark-theme .panel { background: #1A2B47 !important; border-color: rgba(0,229,255,0.1) !important; color: #E8F0FE !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
body.dark-theme .panel-subtle { background: rgba(22,34,56,0.95) !important; border-color: rgba(0,229,255,0.07) !important; }
body.dark-theme .hero { background: #1A2B47 !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .metrics-panel,body.dark-theme .analysis-panel,
body.dark-theme .detail-panel,body.dark-theme .utility-panel { background: #1A2B47 !important; border-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .context-panel { border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .map-panel { border-color: rgba(0,229,255,0.08) !important; background: #071018 !important; }
body.dark-theme .map-panel .panel-head { background: rgba(11,20,38,0.95) !important; border-bottom-color: rgba(0,229,255,0.08) !important; }

/* -- Typography ---------------------------------------------------- */
body.dark-theme h1,body.dark-theme h2,body.dark-theme h3,
body.dark-theme h4,body.dark-theme h5,body.dark-theme h6 { color: #E8F0FE !important; }
body.dark-theme .muted    { color: #7B9AB8 !important; }
body.dark-theme .subtitle { color: #7B9AB8 !important; }
body.dark-theme label     { color: #9ab4cc !important; }
body.dark-theme p         { color: #cddaee; }
body.dark-theme .mode-note { color: #7B9AB8 !important; }
body.dark-theme .marine-note { color: #7B9AB8 !important; }
body.dark-theme .forecast-summary { color: #7B9AB8 !important; }

/* -- Inputs & selects ---------------------------------------------- */
body.dark-theme input,body.dark-theme select { background: rgba(0,229,255,0.04) !important; border-color: rgba(0,229,255,0.18) !important; color: #E8F0FE !important; }
body.dark-theme input::placeholder { color: #4a6480 !important; }
body.dark-theme input:focus,body.dark-theme select:focus { border-color: #00E5FF !important; box-shadow: 0 0 0 3px rgba(0,229,255,0.14) !important; background: rgba(0,229,255,0.06) !important; }
body.dark-theme select option { background: #162238; color: #E8F0FE; }
body.dark-theme .results { background: #162238 !important; border-color: rgba(0,229,255,0.15) !important; }
body.dark-theme .results button { color: #cddaee !important; background: transparent !important; border-bottom-color: rgba(0,229,255,0.06) !important; }
body.dark-theme .results button:hover { background: rgba(0,229,255,0.07) !important; color: #00E5FF !important; }

/* -- Buttons ------------------------------------------------------- */
body.dark-theme button { color: #cddaee; }
body.dark-theme .primary { background: linear-gradient(130deg,#1565C0,#3177D2) !important; border-color: #3177D2 !important; color: #fff !important; box-shadow: 0 4px 18px rgba(49,119,210,0.4) !important; }
body.dark-theme .primary:hover { background: linear-gradient(130deg,#1976D2,#42a0ff) !important; box-shadow: 0 6px 22px rgba(49,119,210,0.55) !important; }
body.dark-theme .ghost { background: rgba(0,229,255,0.04) !important; border-color: rgba(0,229,255,0.18) !important; color: #9ab4cc !important; }
body.dark-theme .ghost:hover { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.36) !important; color: #00E5FF !important; }
body.dark-theme .control-actions h4::before { background: linear-gradient(180deg,#00E5FF,#3177D2) !important; }
body.dark-theme .control-actions h4 { border-bottom-color: rgba(0,229,255,0.1) !important; color: #9ab4cc !important; }
body.dark-theme .control-actions .toolbar .primary { background: linear-gradient(130deg,#1565C0,#3177D2 60%,#4a94f5) !important; box-shadow: 0 4px 14px rgba(49,119,210,0.4) !important; }
body.dark-theme .control-actions .toolbar .primary:hover { background: linear-gradient(130deg,#1040A0,#2060C0 60%,#3177D2) !important; }
body.dark-theme .control-actions .toolbar .ghost { border-color: rgba(0,229,255,0.2) !important; color: #7B9AB8 !important; background: rgba(0,229,255,0.04) !important; }
body.dark-theme .control-actions .toolbar .ghost:hover { border-color: rgba(0,229,255,0.38) !important; background: rgba(0,229,255,0.1) !important; color: #00E5FF !important; }
body.dark-theme .control-actions .loading { background: rgba(49,119,210,0.12) !important; border-color: rgba(49,119,210,0.28) !important; color: #7B9AB8 !important; }

/* -- Pills --------------------------------------------------------- */
body.dark-theme .pill { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.16) !important; color: #7B9AB8 !important; }
body.dark-theme .pill:hover { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.35) !important; color: #00E5FF !important; }
body.dark-theme .pill.active { background: linear-gradient(130deg,#1565C0,#3177D2) !important; border-color: #3177D2 !important; color: #fff !important; box-shadow: 0 3px 14px rgba(49,119,210,0.4) !important; }

/* -- Badges & chips ------------------------------------------------ */
body.dark-theme .badge { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.22) !important; color: #00E5FF !important; }
body.dark-theme .badge.active { background: rgba(49,119,210,0.25) !important; border-color: rgba(49,119,210,0.5) !important; color: #82c4ff !important; }
body.dark-theme .chip { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.12) !important; color: #7B9AB8 !important; }
body.dark-theme .chip.strong { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.28) !important; color: #00E5FF !important; }
body.dark-theme .chip.ok { background: rgba(0,230,118,0.1) !important; border-color: rgba(0,230,118,0.25) !important; color: #00E676 !important; }
body.dark-theme .chip.warn { background: rgba(255,152,0,0.1) !important; border-color: rgba(255,152,0,0.3) !important; color: #FF9800 !important; }

/* -- Confidence strip ---------------------------------------------- */
body.dark-theme .confidence-strip { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .c-pill { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.14) !important; color: #9ab4cc !important; }
body.dark-theme .c-pill strong { color: #00E5FF !important; }

/* -- Chart accordion ----------------------------------------------- */
body.dark-theme .chart-panel {
  background: linear-gradient(160deg,#1b2f4f,#16263f 60%,#122038) !important;
  border-color: rgba(0,229,255,0.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(138,197,232,0.1) !important;
}
body.dark-theme .chart-panel::before {
  border-color: rgba(0,229,255,0.14) !important;
  background: rgba(11,24,43,0.34) !important;
}
body.dark-theme .chart-section-head { border-bottom-color: rgba(0,229,255,0.14) !important; }
body.dark-theme .chart-section-title { color: #b5dbef !important; }
body.dark-theme .chart-section-subtitle { color: #76a2bc !important; }
body.dark-theme .chart-accordion-btn { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.15) !important; color: #9ab4cc !important; }
body.dark-theme .chart-accordion-btn:hover { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.3) !important; color: #00E5FF !important; }
body.dark-theme .chart-accordion-icon { color: #4a6480 !important; }

/* -- Summary cards (.card) ----------------------------------------- */
body.dark-theme .card { background: #162238 !important; border-color: rgba(0,229,255,0.08) !important; box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important; }
body.dark-theme .card h4 { color: #7B9AB8 !important; }
body.dark-theme .card p { color: #E8F0FE !important; }
body.dark-theme .wind-compact { color: #cddaee !important; }
body.dark-theme .wind-compact .bchip { border-color: rgba(0,229,255,0.25) !important; background: rgba(0,229,255,0.08) !important; color: #00E5FF !important; }
body.dark-theme .wind-arrow { color: #00E5FF !important; }

/* -- Current conditions panel -------------------------------------- */
body.dark-theme .current-conditions-panel { background: linear-gradient(156deg,#1e3354,#1A2B47) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .day-view-panel { background: linear-gradient(156deg,#1b2e4d,#15253f 58%,#122138) !important; border-color: rgba(0,229,255,0.12) !important; }
body.dark-theme .day-view-guide { color: #8eb8d1 !important; }
body.dark-theme .day-view-btn { background: rgba(0,229,255,0.06) !important; border-color: rgba(0,229,255,0.2) !important; color: #9ad3e8 !important; }
body.dark-theme .day-view-btn.active { background: linear-gradient(135deg,#00d2ff,#00b2de 56%,#0a86c2) !important; border-color: rgba(0,229,255,0.52) !important; color: #032336 !important; box-shadow: 0 8px 20px rgba(0,169,214,0.28), inset 0 1px 0 rgba(255,255,255,0.2) !important; }
body.dark-theme .day-view-top { color: #b5e8f8 !important; }
body.dark-theme .day-view-temp { color: #92c9de !important; }
body.dark-theme .day-view-hint { color: #6fa0be !important; }
body.dark-theme .table-swipe-hint { color: #6fa0be !important; }
body.dark-theme .current-conditions-head { background: rgba(11,20,38,0.65) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .current-pill { background: rgba(49,119,210,0.18) !important; border-color: rgba(49,119,210,0.35) !important; color: #82c4ff !important; }
body.dark-theme .current-pill.active { background: rgba(0,229,255,0.14) !important; border-color: rgba(0,229,255,0.38) !important; color: #00E5FF !important; }
body.dark-theme .current-pill.fallback { background: rgba(255,152,0,0.12) !important; border-color: rgba(255,152,0,0.32) !important; color: #FF9800 !important; }
body.dark-theme .current-pill.estimate { background: rgba(255,152,0,0.12) !important; border-color: rgba(255,152,0,0.32) !important; color: #FF9800 !important; }
body.dark-theme .current-timestamp { color: #00E5FF !important; font-weight: 700 !important; letter-spacing: .04em !important; }
body.dark-theme .current-condition { color: #E8F0FE !important; font-weight: 800 !important; }
body.dark-theme .current-card { background: #162238 !important; border-color: rgba(0,229,255,0.09) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important; }
body.dark-theme .current-card:hover { border-color: rgba(0,229,255,0.24) !important; box-shadow: 0 6px 24px rgba(0,229,255,0.08) !important; }
body.dark-theme .current-icon { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.22) !important; color: #00E5FF !important; box-shadow: 0 0 12px rgba(0,229,255,0.12) !important; }
body.dark-theme .current-key   { color: #7B9AB8 !important; }
body.dark-theme .current-value { color: #E8F0FE !important; }
body.dark-theme .current-note  { color: #4a6480 !important; }
body.dark-theme .current-card[data-metric="wind-dir"] .current-note { color: #00E5FF !important; opacity: .85; }
body.dark-theme .card-bar      { background: rgba(0,229,255,0.08) !important; }
body.dark-theme .card-bar-fill { background: linear-gradient(90deg,#1565C0,#00E5FF) !important; }

/* -- Forecast table ------------------------------------------------ */
body.dark-theme .table-wrap { background: #0f1c32 !important; border-color: rgba(0,229,255,0.08) !important; }
body.dark-theme th { background: rgba(0,229,255,0.06) !important; color: #7B9AB8 !important; border-bottom-color: rgba(0,229,255,0.12) !important; }
body.dark-theme td { color: #cddaee !important; border-bottom-color: rgba(0,229,255,0.05) !important; }
body.dark-theme tr.forecast-row td { background: transparent !important; }
body.dark-theme tr.forecast-row.row-alt td { background: rgba(0,229,255,0.03) !important; }
body.dark-theme tr.forecast-row:hover td { background: rgba(0,229,255,0.06) !important; }
body.dark-theme tr.current-row td { background: linear-gradient(130deg,rgba(0,229,255,0.12),rgba(49,119,210,0.14)) !important; border-bottom-color: rgba(0,229,255,0.18) !important; }
body.dark-theme tr.current-row td:first-child { box-shadow: inset 4px 0 0 #00E5FF !important; }
body.dark-theme tr.day-separator td { background: rgba(0,229,255,0.07) !important; color: #7B9AB8 !important; border-bottom-color: rgba(0,229,255,0.12) !important; }
body.dark-theme td.time-cell { color: #00E5FF !important; }
body.dark-theme td.metric-cell { color: #cddaee !important; }
body.dark-theme .handoff-cue { color: #7B9AB8 !important; opacity: .88; }
body.dark-theme #tableWrap table td.time-cell { background: #0f1c32 !important; box-shadow: 2px 0 10px rgba(0, 8, 20, 0.34) !important; }
body.dark-theme #tableWrap table tr.forecast-row.row-alt td.time-cell { background: rgba(0,229,255,0.03) !important; }
body.dark-theme #tableWrap table tr.current-row td.time-cell { background: linear-gradient(130deg, rgba(0,190,235,0.15), rgba(41,96,176,0.18)) !important; }
body.dark-theme .temp-weather-icon { border-color: rgba(0,229,255,0.2) !important; background: rgba(0,229,255,0.06) !important; }
body.dark-theme tr.current-row .temp-weather-icon { border-color: rgba(0,229,255,0.35) !important; background: rgba(0,229,255,0.1) !important; }
body.dark-theme .now-label { background: rgba(0,229,255,0.12) !important; color: #00E5FF !important; border-color: rgba(0,229,255,0.35) !important; }
body.dark-theme tr.debug-row td { background: rgba(0,229,255,0.03) !important; border-bottom-color: rgba(0,229,255,0.06) !important; }
body.dark-theme .debug-details summary { color: #7B9AB8 !important; }

/* -- Loading indicator --------------------------------------------- */
body.dark-theme .loading { color: #7B9AB8 !important; }
body.dark-theme .dot { background: #3177D2 !important; box-shadow: 0 0 0 0 rgba(49,119,210,0.5); animation: dot-pulse-dark 1.2s ease-in-out infinite; }
@keyframes dot-pulse-dark {
  0%,100% { transform:scale(1);    box-shadow:0 0 0 0   rgba(49,119,210,.5); }
  50%      { transform:scale(1.25); box-shadow:0 0 0 4px rgba(49,119,210,0); }
}

/* -- Chart tooltip ------------------------------------------------- */
body.dark-theme .chart-tooltip { background: rgba(7,16,30,0.97) !important; color: #E8F0FE !important; border-color: rgba(0,229,255,0.3) !important; }

/* -- Chart cards & guide ------------------------------------------- */
body.dark-theme .chart-card { background: #162238 !important; border-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .chart-card canvas { background: linear-gradient(180deg,#0f1c32,#162238) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .chart-card-head h4 { color: #9ab4cc !important; }
body.dark-theme .chart-card-head p  { color: #4a6480 !important; }
body.dark-theme .chart-guide { border-color: rgba(0,229,255,0.1) !important; color: #7B9AB8 !important; background: rgba(15,28,50,0.8) !important; }
body.dark-theme .chart-guide summary { color: #9ab4cc !important; }
body.dark-theme .guide-toggle-hint { color: #4a6480 !important; }
body.dark-theme .chart-guide summary::after { color: #4a6480 !important; }
body.dark-theme .chart-guide ul { color: #4a6480 !important; }

/* -- Historical cards ---------------------------------------------- */
body.dark-theme .fact-card { background: linear-gradient(140deg,#162238,#1A2B47) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .fact-card h4 { color: #00E5FF !important; }
body.dark-theme .fact-card p  { color: #cddaee !important; }
body.dark-theme .event-card { border-color: rgba(0,229,255,0.1) !important; background: #162238 !important; }
body.dark-theme .event-card summary { background: rgba(0,229,255,0.05) !important; color: #E8F0FE !important; }
body.dark-theme .event-details { border-top-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .metric { background: rgba(0,229,255,0.04) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .metric .k { color: #4a6480 !important; }
body.dark-theme .metric .v { color: #E8F0FE !important; }
body.dark-theme .etype { background: rgba(0,229,255,0.06) !important; border-color: rgba(0,229,255,0.15) !important; color: #7B9AB8 !important; }
body.dark-theme .historical-mode-banner { background: rgba(255,152,0,0.08) !important; border-color: rgba(255,152,0,0.24) !important; color: #FF9800 !important; }

/* -- Assistant panel ----------------------------------------------- */
body.dark-theme .assistant-panel { background: linear-gradient(160deg,#1b2f4f,#16263f 62%,#122038) !important; border-color: rgba(0,229,255,0.12) !important; }
body.dark-theme .assistant-status { background: rgba(0,229,255,0.06) !important; border-color: rgba(0,229,255,0.18) !important; color: #7B9AB8 !important; }
body.dark-theme .assistant-status.ready { background: rgba(0,229,255,0.12) !important; border-color: rgba(0,229,255,0.34) !important; color: #00E5FF !important; box-shadow: inset 0 1px 0 rgba(181, 236, 255, 0.24), 0 0 12px rgba(0,229,255,0.12) !important; }
body.dark-theme .assistant-accordion-btn { background: rgba(0,229,255,0.05) !important; border-color: rgba(0,229,255,0.2) !important; color: #9ad2e8 !important; }
body.dark-theme .assistant-accordion-btn:hover { background: rgba(0,229,255,0.12) !important; border-color: rgba(0,229,255,0.4) !important; color: #00E5FF !important; }
body.dark-theme .assistant-accordion-icon { color: #63a6c0 !important; }
body.dark-theme .assistant-quick .pill { background: rgba(0,229,255,0.06) !important; border-color: rgba(0,229,255,0.18) !important; color: #8eb6ca !important; }
body.dark-theme .assistant-quick .pill:hover { background: rgba(0,229,255,0.14) !important; border-color: rgba(0,229,255,0.36) !important; color: #00E5FF !important; }
body.dark-theme .assistant-msg { background: rgba(26,43,71,0.7) !important; border-color: rgba(0,229,255,0.08) !important; color: #cddaee !important; }
body.dark-theme .assistant-msg.user { background: rgba(49,119,210,0.15) !important; border-color: rgba(49,119,210,0.28) !important; color: #E8F0FE !important; }
body.dark-theme .assistant-msg.assistant { background: rgba(0,229,255,0.05) !important; }
body.dark-theme .assistant-form input { background: rgba(0,229,255,0.04) !important; border-color: rgba(0,229,255,0.2) !important; color: #E8F0FE !important; }

/* -- Timeline chips ------------------------------------------------ */
body.dark-theme .time-chip { border-color: rgba(0,229,255,0.14) !important; color: #7B9AB8 !important; }
body.dark-theme .time-chip.active { border-color: rgba(0,229,255,0.5) !important; background: rgba(0,229,255,0.1) !important; color: #00E5FF !important; }
body.dark-theme .time-chip.active::before { background: #00E5FF !important; }

/* -- Top control bar ----------------------------------------------- */
body.dark-theme #topControlBar { background: rgba(11,20,38,0.98) !important; border-color: rgba(0,229,255,0.1) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.6) !important; }
body.dark-theme .tcb-brand { color: #00E5FF !important; font-weight: 800; letter-spacing: .02em; }
body.dark-theme .tcb-sidebar-toggle { background: rgba(0,229,255,0.07) !important; border-color: rgba(0,229,255,0.18) !important; color: #00E5FF !important; }
body.dark-theme .tcb-sidebar-toggle:hover { background: rgba(0,229,255,0.15) !important; }
body.dark-theme .tcb-theme-toggle { background: rgba(0,229,255,0.07) !important; border-color: rgba(0,229,255,0.18) !important; color: #ffd54f !important; }
body.dark-theme .tcb-theme-toggle:hover { background: rgba(0,229,255,0.15) !important; }
body.dark-theme .tcb-search input#cityInput { border-radius: 999px !important; background: rgba(0,229,255,0.04) !important; border-color: rgba(0,229,255,0.18) !important; color: #E8F0FE !important; }
body.dark-theme .tcb-search input#cityInput::placeholder { color: #4a6480 !important; }
body.dark-theme .tcb-search input#cityInput:focus { border-color: #00E5FF !important; box-shadow: 0 0 0 3px rgba(0,229,255,0.14) !important; background: rgba(0,229,255,0.06) !important; }
body.dark-theme .tcb-search-icon { color: #4a6480 !important; }
body.dark-theme .tcb-clear-btn { color: #4a6480 !important; }
body.dark-theme .tcb-load {
  border-radius: 999px !important;
  background: linear-gradient(130deg, #0f3f74, #007ea6 58%, #00a9c8) !important;
  border-color: rgba(0, 229, 255, 0.42) !important;
  color: #eaf9ff !important;
  box-shadow: 0 6px 18px rgba(0, 168, 204, 0.35), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
body.dark-theme .tcb-load:hover {
  background: linear-gradient(130deg, #12518f, #0096be 58%, #00b9d6) !important;
  border-color: rgba(0, 229, 255, 0.58) !important;
  box-shadow: 0 8px 22px rgba(0, 189, 225, 0.45), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
body.dark-theme .tcb-load:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(0, 229, 255, 0.24),
    0 8px 22px rgba(0, 189, 225, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
body.dark-theme #topControlBar .loading { color: #7B9AB8 !important; }

/* -- Sidebar ------------------------------------------------------- */
body.dark-theme #mapSidebar { background: #0f1c32 !important; border-color: rgba(0,229,255,0.12) !important; box-shadow: 6px 0 40px rgba(0,0,0,0.6) !important; }
body.dark-theme .sidebar-drawer-head { border-bottom-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .sidebar-drawer-title { color: #00E5FF !important; font-weight: 800; letter-spacing: .04em; }
body.dark-theme .sidebar-close-btn { border-color: rgba(0,229,255,0.18) !important; background: rgba(0,229,255,0.05) !important; color: #7B9AB8 !important; }
body.dark-theme .sidebar-close-btn:hover { background: rgba(0,229,255,0.12) !important; color: #00E5FF !important; border-color: rgba(0,229,255,0.38) !important; }
body.dark-theme #mapSidebar .sidebar-label { color: #4a6480 !important; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
body.dark-theme #mapSidebar .sidebar-sep { background: rgba(0,229,255,0.07) !important; }
body.dark-theme .sidebar-mode-note { color: #4a6480 !important; }
body.dark-theme .sidebar-legal-link {
  background: rgba(0, 229, 255, 0.04) !important;
  border-color: rgba(0, 229, 255, 0.16) !important;
  color: #9fd8e8 !important;
}
body.dark-theme .sidebar-legal-link:hover,
body.dark-theme .sidebar-legal-link:focus-visible {
  background: rgba(0, 229, 255, 0.1) !important;
  border-color: rgba(0, 229, 255, 0.34) !important;
  color: #00e5ff !important;
}
body.dark-theme .sidebar-legal-link-disabled {
  background: rgba(0, 229, 255, 0.02) !important;
  color: #5f7895 !important;
}

/* -- Map overlay (top-left location label) ------------------------- */
body.dark-theme .map-overlay { background: rgba(11,20,38,0.84) !important; border-color: rgba(0,229,255,0.1) !important; }
body.dark-theme .map-city { color: #cddaee !important; }
body.dark-theme .map-meta { color: #4a6480 !important; }

/* -- Scroll-down button -------------------------------------------- */
body.dark-theme .map-scroll-down { background: rgba(11,20,38,0.88) !important; border-color: rgba(0,229,255,0.22) !important; color: #00E5FF !important; box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important; }
body.dark-theme .map-scroll-down:hover { background: rgba(0,229,255,0.12) !important; border-color: rgba(0,229,255,0.45) !important; }

/* -- Centered hero card (mapWeatherOverlay) ------------------------ */
body.dark-theme #mapWeatherOverlay { background: rgba(11,20,38,0.96) !important; border: 1px solid rgba(0,229,255,0.12) !important; border-bottom: none !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; }
body.dark-theme .hero-icon-display { filter: drop-shadow(0 0 18px rgba(0,229,255,0.35)) !important; }
body.dark-theme #mapWeatherOverlay .hero-temp { color: #ffffff !important; text-shadow: 0 0 40px rgba(0,229,255,0.2) !important; }
body.dark-theme #mapWeatherOverlay .hero-condition { color: #00E5FF !important; opacity: .9; }
body.dark-theme .mwo-city-pill { background: rgba(0,229,255,0.06) !important; border-color: rgba(0,229,255,0.18) !important; }
body.dark-theme .mwo-pin { color: #00E5FF !important; }
body.dark-theme .mwo-city { color: #E8F0FE !important; }
body.dark-theme #mapWeatherOverlay .badge { background: rgba(0,229,255,0.1) !important; border: 1px solid rgba(0,229,255,0.25) !important; color: #00E5FF !important; }
body.dark-theme #mapWeatherOverlay .badge.active { background: rgba(49,119,210,0.22) !important; border-color: rgba(49,119,210,0.45) !important; color: #82c4ff !important; }

/* -- Hero temp & condition ----------------------------------------- */
body.dark-theme .hero-temp { color: #E8F0FE !important; }
body.dark-theme .hero-condition { color: #00E5FF !important; opacity: .9; }

/* -- Marine -------------------------------------------------------- */
body.dark-theme .marine-kpi .card h4 { color: #7B9AB8 !important; }
body.dark-theme .marine-exposure { border-color: rgba(0,229,255,0.15) !important; background: rgba(0,229,255,0.05) !important; color: #9ab4cc !important; }
body.dark-theme .marine-point-pill { border-color: rgba(0,229,255,0.2) !important; background: rgba(0,229,255,0.08) !important; color: #00E5FF !important; }
body.dark-theme .marine-kpi-card { background: #162238 !important; border-color: rgba(0,229,255,0.08) !important; }
body.dark-theme .marine-kpi-label { color: #4a6480 !important; }
body.dark-theme .marine-kpi-value { color: #E8F0FE !important; }

/* -- Warning / error ----------------------------------------------- */
body.dark-theme .warn { color: #FF9800 !important; }
body.dark-theme .err  { color: #FF4444 !important; }
body.dark-theme #warningText:not(:empty) { display: block; background: rgba(255,152,0,0.08) !important; border: 1px solid rgba(255,152,0,0.28) !important; border-left: 3px solid #FF9800 !important; border-radius: 10px !important; padding: 10px 14px 10px 12px !important; color: #ffd59e !important; font-size: .87rem !important; font-weight: 600 !important; letter-spacing: .01em !important; margin-top: 8px !important; line-height: 1.45 !important; }

/* -- Skeleton loading ---------------------------------------------- */
body.dark-theme .skeleton-line,body.dark-theme .skeleton-card { background: rgba(0,229,255,0.05) !important; }

/* -- Leaflet controls ---------------------------------------------- */
body.dark-theme .leaflet-control-zoom a { background: rgba(11,20,38,0.94) !important; border-color: rgba(0,229,255,0.18) !important; color: #00E5FF !important; }
body.dark-theme .leaflet-control-zoom a:hover { background: rgba(0,229,255,0.12) !important; }
body.dark-theme .leaflet-bar { border-color: rgba(0,229,255,0.18) !important; }

/* -- Scrollbar ----------------------------------------------------- */
body.dark-theme ::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2) !important; }
body.dark-theme ::-webkit-scrollbar-track { background: rgba(0,229,255,0.03) !important; }

/* -- Misc ---------------------------------------------------------- */
body.dark-theme .warn-text { color: #FF4444 !important; }
body.dark-theme .ok-text   { color: #00E676 !important; }
body.dark-theme .tcb-theme-label { color: #4a6480; }

/* -- Nocturnal Azure harmonization (dark mode) --------------------- */
body.dark-theme tr[data-temp="cold"] .temp-reading { color: #74e4ff !important; }
body.dark-theme tr[data-temp="cool"] .temp-reading { color: #5cd4ff !important; }
body.dark-theme tr[data-temp="mild"] .temp-reading { color: #8ec8ff !important; }
body.dark-theme tr[data-temp="warm"] .temp-reading { color: #a7b9ff !important; }
body.dark-theme tr[data-temp="hot"]  .temp-reading { color: #c7ceff !important; font-weight: 900 !important; }

body.dark-theme .prob-bar { background: rgba(0,229,255,0.12) !important; }
body.dark-theme .prob-fill {
  background: linear-gradient(90deg, #63d7ff 0%, #3177d2 60%, #8bb8ff 100%) !important;
}
body.dark-theme [data-prob-kind="snow"] .prob-fill {
  background: linear-gradient(90deg, #b8e7ff, #6cb7ff) !important;
}
body.dark-theme [data-prob-kind="mixed"] .prob-fill {
  background: linear-gradient(90deg, #7be4ff, #6d8fe6) !important;
}

body.dark-theme .bchip[data-bf="0"],
body.dark-theme .bchip[data-bf="1"],
body.dark-theme .bchip[data-bf="2"] {
  border-color: rgba(0,229,255,0.34) !important;
  background: rgba(0,229,255,0.12) !important;
  color: #8feaff !important;
}
body.dark-theme .bchip[data-bf="3"],
body.dark-theme .bchip[data-bf="4"] {
  border-color: rgba(126,196,255,0.38) !important;
  background: rgba(99,170,240,0.16) !important;
  color: #b8dcff !important;
}
body.dark-theme .bchip[data-bf="5"],
body.dark-theme .bchip[data-bf="6"] {
  border-color: rgba(122,165,232,0.42) !important;
  background: rgba(76,126,204,0.20) !important;
  color: #c7d8ff !important;
}
body.dark-theme .bchip[data-bf="7"],
body.dark-theme .bchip[data-bf="8"] {
  border-color: rgba(140,155,228,0.48) !important;
  background: rgba(91,104,182,0.24) !important;
  color: #d0d9ff !important;
}
body.dark-theme .bchip[data-bf="9"],
body.dark-theme .bchip[data-bf="10"],
body.dark-theme .bchip[data-bf="11"],
body.dark-theme .bchip[data-bf="12"] {
  border-color: rgba(159,170,244,0.55) !important;
  background: rgba(103,94,182,0.28) !important;
  color: #e0e6ff !important;
  font-weight: 900 !important;
}

body.dark-theme .chip.warn,
body.dark-theme .current-pill.fallback,
body.dark-theme .current-pill.estimate {
  background: rgba(126,188,248,0.16) !important;
  border-color: rgba(126,188,248,0.34) !important;
  color: #8fc9ff !important;
}
body.dark-theme .warn {
  color: #8fc9ff !important;
}
body.dark-theme #warningText:not(:empty) {
  background: rgba(126,188,248,0.10) !important;
  border: 1px solid rgba(126,188,248,0.34) !important;
  border-left: 3px solid #8fc9ff !important;
  color: #c2e2ff !important;
}
body.dark-theme .err,
body.dark-theme .warn-text {
  color: #b7cbff !important;
}
body.dark-theme .ok-text {
  color: #7bdcff !important;
}

body.dark-theme #marineKpiCards .card[data-sea-state="smooth"] p,
body.dark-theme #marineKpiCards .card[data-sea-state="slight"] p,
body.dark-theme #marineKpiCards .card[data-exposure="sheltered"] p,
body.dark-theme td.marine-hs-cell[data-sea-state="smooth"],
body.dark-theme td.marine-hs-cell[data-sea-state="slight"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="smooth"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="slight"],
body.dark-theme td.marine-exposure-cell[data-exposure="sheltered"] {
  color: #7fe6ff !important;
}
body.dark-theme #marineKpiCards .card[data-sea-state="moderate"] p,
body.dark-theme #marineKpiCards .card[data-sea-state="rough"] p,
body.dark-theme #marineKpiCards .card[data-exposure="offshore"] p,
body.dark-theme #marineKpiCards .card[data-exposure="cross-shore"] p,
body.dark-theme td.marine-hs-cell[data-sea-state="moderate"],
body.dark-theme td.marine-hs-cell[data-sea-state="rough"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="moderate"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="rough"],
body.dark-theme td.marine-exposure-cell[data-exposure="offshore"],
body.dark-theme td.marine-exposure-cell[data-exposure="cross-shore"] {
  color: #8fbfff !important;
}
body.dark-theme #marineKpiCards .card[data-sea-state="very-rough"] p,
body.dark-theme #marineKpiCards .card[data-sea-state="high"] p,
body.dark-theme #marineKpiCards .card[data-sea-state="very-high"] p,
body.dark-theme #marineKpiCards .card[data-exposure="onshore"] p,
body.dark-theme td.marine-hs-cell[data-sea-state="very-rough"],
body.dark-theme td.marine-hs-cell[data-sea-state="high"],
body.dark-theme td.marine-hs-cell[data-sea-state="very-high"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="very-rough"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="high"],
body.dark-theme td.marine-sea-state-cell[data-sea-state="very-high"],
body.dark-theme td.marine-exposure-cell[data-exposure="onshore"] {
  color: #b2c2ff !important;
}

body.dark-theme .tcb-theme-toggle {
  color: #8fc9ff !important;
}

/* -- Final phone-landscape overrides (must come last to win) ------- */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 920px) {
  /* Keep top bar usable: preserve action buttons visibility */
  .tcb-inner {
    gap: 6px !important;
    padding: 0 8px !important;
  }
  .tcb-brand,
  .tcb-theme-label {
    display: none !important;
  }
  .tcb-search {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .tcb-search input#cityInput {
    height: 38px !important;
    font-size: 16px !important;
  }
  .tcb-load {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .tcb-load::before {
    content: "\21BB";
    font-size: 1.05rem;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Arial Unicode MS", sans-serif;
    line-height: 1;
  }
  #inlineLoadingText {
    display: none !important;
  }

  /* Make short landscape viewport prioritize map visibility */
  .map-panel,
  #mapSidebar {
    height: calc(100vh - var(--tcb-h) - 10px) !important;
    min-height: 220px !important;
  }
  .map-stage {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Compact corner hero card (instead of full-width bottom sheet) */
  #mapWeatherOverlay {
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: min(250px, 44vw) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
    border-bottom: 1px solid rgba(124, 143, 173, 0.2) !important;
  }
  .hero-icon-display {
    font-size: 1.55rem !important;
    margin-bottom: 1px !important;
  }
  #mapWeatherOverlay .hero-temp {
    font-size: 1.75rem !important;
    line-height: 1 !important;
  }
  #mapWeatherOverlay .hero-condition {
    font-size: .68rem !important;
    letter-spacing: .05em !important;
    line-height: 1.2 !important;
  }
  .mwo-city-pill {
    margin-top: 2px !important;
    padding: 4px 7px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .mwo-city {
    font-size: .86rem !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
  }
  .mwo-badges {
    margin-top: 2px !important;
    gap: 3px !important;
  }
  .mwo-badges .badge {
    font-size: .56rem !important;
    padding: 2px 6px !important;
  }

  /* Scroll CTA sits lower-left, away from hero card */
  .map-scroll-down {
    left: 10px !important;
    bottom: 10px !important;
    transform: none !important;
    padding: 7px 11px !important;
    font-size: .72rem !important;
  }
  .map-scroll-down:active {
    transform: scale(0.96) !important;
  }

  /* Improve nowcast/current readability in landscape */
  .current-conditions-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .current-card {
    min-height: 98px !important;
    padding: 12px 12px 11px 54px !important;
  }
  .current-icon {
    width: 30px !important;
    height: 30px !important;
    left: 12px !important;
    top: 12px !important;
  }
  .current-key {
    font-size: .78rem !important;
  }
  .current-value {
    font-size: 1.34rem !important;
  }
  .current-note {
    font-size: .84rem !important;
  }
}

/* -- Phone landscape β€” all widths (covers wide phones > 920px too) --
   The clamp(480px,...) on .map-panel forces a 480px minimum height,
   which exceeds the actual viewport height in landscape (~380-430px),
   causing the panel to overflow and the hero/white area to appear
   alongside the map instead of below it.
   This must be last in the file to beat the !important clamp above. */
@media (orientation: landscape) and (max-height: 620px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .map-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: calc(100vh - var(--tcb-h)) !important;
    min-height: 0 !important;
  }
  .map-stage,
  #cityMapFrame {
    width: 100% !important;
    max-width: 100% !important;
  }
  .map-stage {
    height: 100% !important;
    min-height: 0 !important;
  }
  #mapWeatherOverlay .mwo-city-pill {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #mapWeatherOverlay .mwo-city {
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
  }
}

/* -- Desktop top bar polish: align with map lane + larger controls -- */
@media (min-width: 901px) {
  #topControlBar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1420px, calc(100vw - 40px));
    border-radius: 0 0 14px 14px;
  }

  .tcb-inner {
    max-width: none;
    padding: 0 18px;
    gap: 14px;
    justify-content: flex-start;
  }

  .tcb-search {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .tcb-search input#cityInput {
    height: 46px;
    font-size: 1.02rem;
  }

  .tcb-search-icon svg {
    width: 16px;
    height: 16px;
  }

  .tcb-load {
    height: 46px;
    padding: 0 24px;
    font-size: .95rem;
    font-weight: 700;
  }

  .tcb-sidebar-toggle,
  .tcb-theme-toggle {
    min-width: 42px;
    height: 42px;
  }

  .tcb-sidebar-toggle svg {
    width: 19px;
    height: 19px;
  }

  .tcb-theme-toggle {
    font-size: 1.08rem;
  }

  #topControlBar .loading {
    font-size: .9rem;
  }

  .tcb-theme-label {
    font-size: .66rem;
  }
}

/* ================================================================
   Marine UI — Weather-Tab Style Match (visual-only)
   ================================================================ */

/* Light theme tokens */
body:not(.dark-theme) {
  --marine-row-current: linear-gradient(130deg,#c7effa,#b6e5f5);
  --marine-accent: #00BCDA;
  --marine-accent-text: #005E78;
}
body.dark-theme {
  --marine-row-current: linear-gradient(130deg,rgba(0,229,255,0.18),rgba(49,119,210,0.22));
  --marine-accent: #00E5FF;
  --marine-accent-text: #00E5FF;
}

/* ── Panel containers: match weather metrics/detail/chart panels ── */
body:not(.dark-theme) #marineMetaPanel.marine-meta-shell,
body:not(.dark-theme) #marineTablePanel.marine-table-shell {
  background: linear-gradient(155deg,#fff,#F5FBFE 60%,#EDF8FB) !important;
  border: 1px solid rgba(0,188,218,0.14) !important;
  box-shadow: 0 8px 28px rgba(0,80,110,0.09) !important;
  border-radius: 14px !important;
  overflow: visible;
}
body.dark-theme #marineMetaPanel.marine-meta-shell,
body.dark-theme #marineTablePanel.marine-table-shell {
  background: #1A2B47 !important;
  border: 1px solid rgba(0,229,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  border-radius: 16px !important;
  overflow: visible;
}
body:not(.dark-theme) #marineChartsPanel.marine-chart-shell {
  background: linear-gradient(155deg,#f3f9ff 0%,#e7f0fb 100%) !important;
  border: 1px solid rgba(0,188,218,0.16) !important;
  box-shadow: 0 10px 22px rgba(15,38,70,0.09),inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-radius: 14px !important;
  overflow: visible;
}
body.dark-theme #marineChartsPanel.marine-chart-shell {
  background: linear-gradient(160deg,#1b2f4f,#16263f 60%,#122038) !important;
  border: 1px solid rgba(0,229,255,0.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.42),inset 0 1px 0 rgba(138,197,232,0.1) !important;
  border-radius: 16px !important;
  overflow: visible;
}

/* ── Hero shell: match weather hero section ── */
#marineMetaPanel .marine-hero-shell {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
}
body:not(.dark-theme) #marineMetaPanel .marine-hero-shell {
  background: linear-gradient(155deg,#fff,#F2FAFD 48%,#EAF7FB);
  border: 1px solid rgba(0,188,218,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
body.dark-theme #marineMetaPanel .marine-hero-shell {
  background: linear-gradient(150deg,rgba(0,229,255,0.06) 0%,rgba(49,119,210,0.06) 54%,rgba(15,28,50,0.55) 100%);
  border: 1px solid rgba(0,229,255,0.1);
}

/* Status label */
.marine-status-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marine-accent);
  margin: 0 0 5px;
  line-height: 1;
}

#marineMetaPanel .marine-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
#marineMetaPanel .marine-head-copy { flex: 1 1 200px; min-width: 0; }

/* Title: match .meta-title h3 */
#marineMetaPanel .meta-title h3 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
body:not(.dark-theme) #marineMetaPanel .meta-title h3 { color: #163a62 !important; }
body.dark-theme #marineMetaPanel .meta-title h3 { color: #E8F0FE !important; }

/* Charts/table section titles: match chart-section-title */
#marineChartsPanel .meta-title h3 {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
body:not(.dark-theme) #marineChartsPanel .meta-title h3 { color: #214566 !important; }
body.dark-theme #marineChartsPanel .meta-title h3 { color: #E8F0FE !important; }
#marineTablePanel .meta-title h3 { font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: 0.01em; }
body:not(.dark-theme) #marineTablePanel .meta-title h3 { color: #163a62 !important; }
body.dark-theme #marineTablePanel .meta-title h3 { color: #E8F0FE !important; }

#marineMetaPanel .marine-summary-text { line-height: 1.45; font-size: 0.9rem; margin-top: 4px !important; }
body:not(.dark-theme) #marineMetaPanel .marine-summary-text { color: #5B8E9F !important; }
body.dark-theme #marineMetaPanel .marine-summary-text { color: #7B9AB8 !important; }

#marineMetaPanel .marine-source-badge { align-self: flex-start; flex-shrink: 0; font-size: 0.63rem !important; letter-spacing: 0.07em; white-space: nowrap; }
body:not(.dark-theme) #marineMetaPanel .marine-source-badge { background: rgba(0,188,218,0.1) !important; border-color: rgba(0,188,218,0.22) !important; color: #005E78 !important; }
body.dark-theme #marineMetaPanel .marine-source-badge { background: rgba(0,229,255,0.1) !important; border-color: rgba(0,229,255,0.2) !important; color: #00E5FF !important; }

#marineMetaPanel .marine-point-pill { margin-top: 8px; font-size: 0.72rem; }
body:not(.dark-theme) #marineMetaPanel .marine-point-pill { border-color: rgba(0,188,218,0.26) !important; background: rgba(0,188,218,0.07) !important; color: #005E78 !important; }
body.dark-theme #marineMetaPanel .marine-point-pill { border-color: rgba(0,229,255,0.18) !important; background: rgba(0,229,255,0.07) !important; color: #00E5FF !important; }

#marineMetaPanel .marine-note { margin: 12px 0 0; padding: 9px 13px; border-left: 3px solid var(--marine-accent); border-radius: 0 8px 8px 0; font-size: 0.8rem; line-height: 1.5; }
body:not(.dark-theme) #marineMetaPanel .marine-note { background: rgba(0,188,218,0.06); color: #3A7A8C !important; }
body.dark-theme #marineMetaPanel .marine-note { background: rgba(0,229,255,0.05); color: #7B9AB8 !important; }

#marineMetaPanel .marine-exposure { margin-top: 9px; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; padding: 8px 10px; }
body:not(.dark-theme) #marineMetaPanel .marine-exposure { border: 1px solid rgba(0,188,218,0.22) !important; background: rgba(0,188,218,0.07) !important; color: #0B2533 !important; }
body.dark-theme #marineMetaPanel .marine-exposure { border: 1px solid rgba(0,229,255,0.15) !important; background: rgba(0,229,255,0.06) !important; color: #E8F0FE !important; }

/* ── KPI grid: match weather .card style ── */
#marineKpiCards.marine-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 0;
}
#marineKpiCards.marine-kpi-grid .card[data-marine-kpi] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 110px;
  padding: 11px 12px 12px;
  border-radius: 13px !important;
  border-top: none !important;
  overflow: hidden;
  transition: box-shadow .18s, transform .15s;
}
body:not(.dark-theme) #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] {
  background: linear-gradient(150deg,#fff,#F2FAFD) !important;
  border: 1px solid #C0E5EE !important;
  border-top: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(10,27,53,0.05) !important;
}
body.dark-theme #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] {
  background: #162238 !important;
  border: 1px solid rgba(0,229,255,0.08) !important;
  border-top: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
}
/* Primary accent tint */
body:not(.dark-theme) #marineKpiCards .card[data-marine-kpi="wave-height"],
body:not(.dark-theme) #marineKpiCards .card[data-marine-kpi="wind"] {
  background: linear-gradient(150deg,#eef9fd,#e4f4fa) !important;
  border-color: #A8D8E8 !important;
}
body.dark-theme #marineKpiCards .card[data-marine-kpi="wave-height"],
body.dark-theme #marineKpiCards .card[data-marine-kpi="wind"] {
  background: linear-gradient(150deg,rgba(0,229,255,0.13),#162238) !important;
  border-color: rgba(0,229,255,0.16) !important;
}
/* Hover */
body:not(.dark-theme) #marineKpiCards.marine-kpi-grid .card[data-marine-kpi]:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 6px 14px rgba(10,27,53,0.1) !important;
  transform: translateY(-1px);
}
body.dark-theme #marineKpiCards.marine-kpi-grid .card[data-marine-kpi]:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
  transform: translateY(-1px);
}
/* Icons */
#marineKpiCards.marine-kpi-grid .card[data-marine-kpi]::before {
  position: absolute; top: 11px; left: 12px;
  font-size: 1.2rem; line-height: 1; opacity: 0.5;
}
body.dark-theme #marineKpiCards.marine-kpi-grid .card[data-marine-kpi]::before { opacity: 0.35; }
#marineKpiCards .card[data-marine-kpi="wave-height"]::before  { content: "\2248\2248"; color: var(--marine-accent); opacity: 0.8; font-size: 0.95rem; }
#marineKpiCards .card[data-marine-kpi="hmax"]::before         { content: "\2B06"; font-size: 1rem; }
#marineKpiCards .card[data-marine-kpi="wave-period"]::before  { content: "\25F7"; }
#marineKpiCards .card[data-marine-kpi="sea-state"]::before    { content: "\2248"; }
#marineKpiCards .card[data-marine-kpi="wind"]::before         { content: "\007E\007E"; color: var(--marine-accent); opacity: 0.8; letter-spacing: -0.1em; }
#marineKpiCards .card[data-marine-kpi="direction"]::before    {
  content: "\2191";
  display: inline-block;
  transform: rotate(var(--marine-dir-angle, 0deg));
  transform-origin: center;
}
#marineKpiCards .card[data-marine-kpi="pressure"]::before     { content: "\25CE"; }
#marineKpiCards .card[data-marine-kpi="exposure"]::before     { content: "\21D4"; }
.marine-source-badge { display: none !important; }
/* SIG badge */
#marineKpiCards .card[data-marine-kpi="wave-height"]::after {
  content: "SIG."; position: absolute; top: 10px; right: 10px;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em;
  border-radius: 5px; padding: 2px 5px; line-height: 1.5;
}
body:not(.dark-theme) #marineKpiCards .card[data-marine-kpi="wave-height"]::after { color: #005E78; background: rgba(0,188,218,0.12); border: 1px solid rgba(0,188,218,0.26); }
body.dark-theme #marineKpiCards .card[data-marine-kpi="wave-height"]::after { color: #00E5FF; background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.22); }
/* Card labels: match weather .card h4 */
#marineKpiCards.marine-kpi-grid .card[data-marine-kpi] h4 {
  margin: 0 0 6px; font-size: 0.69rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3;
}
body:not(.dark-theme) #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] h4 { color: #3A7A8C !important; }
body.dark-theme #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] h4 { color: #7B9AB8 !important; }
/* Card values: match weather .card p */
#marineKpiCards.marine-kpi-grid .card[data-marine-kpi] p {
  margin: 0; font-size: clamp(0.95rem,1.4vw,1.35rem);
  line-height: 1.15; font-weight: 800; letter-spacing: -0.01em;
}
body:not(.dark-theme) #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] p { color: #0B2533 !important; }
body.dark-theme #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] p { color: #E8F0FE !important; }

/* ── Charts panel: match weather chart-panel + chart-card ── */
#marineChartsPanel .marine-chart-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px; padding-bottom: 10px;
}
body:not(.dark-theme) #marineChartsPanel .marine-chart-top { border-bottom: 1px solid rgba(173,193,214,0.58); }
body.dark-theme #marineChartsPanel .marine-chart-top { border-bottom: 1px solid rgba(0,229,255,0.1); }

#marineChartsPanel .marine-chart-subtitle { margin: 5px 0 0; font-size: 0.8rem; line-height: 1.45; }
body:not(.dark-theme) #marineChartsPanel .marine-chart-subtitle { color: #56708e; }
body.dark-theme #marineChartsPanel .marine-chart-subtitle { color: #7B9AB8; }

#marineChartsPanel .marine-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#marineChartsPanel #marineWaveChartCard { grid-column: 1 / -1; min-height: 340px; }

/* Match .chart-card */
#marineChartsPanel .marine-chart-card {
  border-radius: 14px !important; padding: 12px;
  display: grid; grid-template-rows: auto 1fr; gap: 10px;
  min-height: 280px;
}
body:not(.dark-theme) #marineChartsPanel .marine-chart-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,188,218,0.14) !important;
  box-shadow: 0 6px 15px rgba(16,33,58,0.07) !important;
}
body.dark-theme #marineChartsPanel .marine-chart-card {
  background: #162238 !important;
  border: 1px solid rgba(0,229,255,0.08) !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
}
/* Match .chart-card-head */
#marineChartsPanel .chart-card-head { display: grid; gap: 3px; padding-bottom: 8px; }
body:not(.dark-theme) #marineChartsPanel .chart-card-head { border-bottom: 1px solid #dce7f3; }
body.dark-theme #marineChartsPanel .chart-card-head { border-bottom: 1px solid rgba(0,229,255,0.1); }
#marineChartsPanel .marine-chart-card .chart-card-head h4 { font-size: 0.77rem !important; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; line-height: 1.35; margin: 0; }
body:not(.dark-theme) #marineChartsPanel .marine-chart-card .chart-card-head h4 { color: #244a70 !important; }
body.dark-theme #marineChartsPanel .marine-chart-card .chart-card-head h4 { color: #E8F0FE !important; }
#marineChartsPanel .marine-chart-card .chart-card-head p { font-size: 0.74rem; letter-spacing: 0.01em; line-height: 1.4; margin: 0; }
body:not(.dark-theme) #marineChartsPanel .marine-chart-card .chart-card-head p { color: #607995 !important; }
body.dark-theme #marineChartsPanel .marine-chart-card .chart-card-head p { color: #7B9AB8 !important; }
/* Match chart-card canvas */
#marineChartsPanel .marine-chart-canvas { width: 100% !important; height: 200px !important; border-radius: 10px; display: block; }
body:not(.dark-theme) #marineChartsPanel .marine-chart-canvas { background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important; border: 1px solid #cedbed !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
body.dark-theme #marineChartsPanel .marine-chart-canvas { background: linear-gradient(180deg,#0f1c32,#162238) !important; border: 1px solid rgba(0,229,255,0.1) !important; }
#marineChartsPanel #marineWaveChart { height: 220px !important; }
/* Guide collapsible */
#marineChartsPanel .marine-guide { margin-top: 12px; border-radius: 10px; font-size: 0.82rem; }
body:not(.dark-theme) #marineChartsPanel .marine-guide { border-color: rgba(0,188,218,0.16) !important; background: rgba(0,188,218,0.04) !important; }
body.dark-theme #marineChartsPanel .marine-guide { border-color: rgba(0,229,255,0.1) !important; background: rgba(0,229,255,0.04) !important; }
body:not(.dark-theme) #marineChartsPanel .marine-guide summary, body:not(.dark-theme) #marineChartsPanel .marine-guide ul { color: #5B8E9F !important; font-size: 0.81rem; }
body.dark-theme #marineChartsPanel .marine-guide summary, body.dark-theme #marineChartsPanel .marine-guide ul { color: #7B9AB8 !important; font-size: 0.81rem; }

/* ── Table panel: match weather .detail-panel + .table-wrap ── */
#marineTablePanel .marine-forecast-head {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  align-items: baseline; gap: 12px; margin-bottom: 12px;
}
#marineTablePanel .forecast-summary { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
body:not(.dark-theme) #marineTablePanel .forecast-summary { color: #45607f !important; }
body.dark-theme #marineTablePanel .forecast-summary { color: #7B9AB8 !important; }
/* Match .table-wrap */
#marineTablePanel .marine-table-wrap { border-radius: 13px; overflow-x: auto; }
body:not(.dark-theme) #marineTablePanel .marine-table-wrap { background: #fff !important; border: 1px solid #C8EAF2 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px rgba(10,27,53,0.06) !important; }
body.dark-theme #marineTablePanel .marine-table-wrap { background: #0f1c32 !important; border: 1px solid rgba(0,229,255,0.08) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
#marineTablePanel .marine-table-wrap table { min-width: 980px; border-collapse: separate; border-spacing: 0; }
/* th: match weather header */
#marineTablePanel .marine-table-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 800;
  padding: 11px 12px;
}
body:not(.dark-theme) #marineTablePanel .marine-table-wrap thead th { background: linear-gradient(180deg,#F2FBFE,#E8F6FB) !important; color: #2A6070 !important; border-bottom: 1px solid #C0E5EE !important; }
body.dark-theme #marineTablePanel .marine-table-wrap thead th { background: rgba(0,229,255,0.06) !important; color: #7B9AB8 !important; border-bottom: 1px solid rgba(0,229,255,0.12) !important; }
/* td rows */
#marineTablePanel .marine-table-wrap tbody tr:not(.day-separator) td { padding: 11px 12px; font-size: 0.88rem; }
body:not(.dark-theme) #marineTablePanel .marine-table-wrap tbody tr:not(.day-separator) td { background: #ffffff !important; border-bottom: 1px solid #dee6f1 !important; }
body.dark-theme #marineTablePanel .marine-table-wrap tbody tr:not(.day-separator) td { background: transparent !important; border-bottom: 1px solid rgba(0,229,255,0.05) !important; }
body:not(.dark-theme) #marineTablePanel .marine-table-wrap tbody tr.row-alt:not(.day-separator) td { background: #F5FBFE !important; }
body.dark-theme #marineTablePanel .marine-table-wrap tbody tr.row-alt:not(.day-separator) td { background: rgba(0,229,255,0.03) !important; }
body:not(.dark-theme) #marineTablePanel .marine-table-wrap tbody tr:not(.day-separator):hover td { background: #E8F7FB !important; }
body.dark-theme #marineTablePanel .marine-table-wrap tbody tr:not(.day-separator):hover td { background: rgba(0,229,255,0.06) !important; }
#marineTablePanel .marine-table-wrap tbody tr.current-row td { background: var(--marine-row-current) !important; }
#marineTablePanel .marine-table-wrap tbody tr td:first-child { font-weight: 600; }
#marineTablePanel .marine-footnote { margin-top: 10px; font-size: 0.78rem; }
body:not(.dark-theme) #marineTablePanel .marine-footnote { color: #5B8E9F !important; }
body.dark-theme #marineTablePanel .marine-footnote { color: #7B9AB8 !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  #marineKpiCards.marine-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] { min-height: 106px; }
}
@media (max-width: 820px) {
  #marineMetaPanel .marine-head-copy { min-width: 0; }
  #marineChartsPanel .marine-chart-grid { grid-template-columns: 1fr !important; }
  #marineChartsPanel #marineWaveChartCard { grid-column: auto; min-height: auto; }
  #marineChartsPanel .marine-chart-canvas, #marineChartsPanel #marineWaveChart { height: 178px !important; }
  #marineTablePanel .marine-table-wrap table { min-width: 880px; }
}
@media (max-width: 560px) {
  #marineMetaPanel .marine-hero-shell { padding: 12px; }
  #marineKpiCards.marine-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; }
  #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] { min-height: 96px; padding: 10px 11px 11px; }
  #marineKpiCards.marine-kpi-grid .card[data-marine-kpi] p { font-size: clamp(0.88rem,3.5vw,1.05rem); }
  #marineChartsPanel .marine-chart-canvas, #marineChartsPanel #marineWaveChart { height: 155px !important; }
}