:root{--bg:#080e18;--bg2:#0d1726;--bg3:#111f33;--border:#1c2f4a;--border2:#243a57;--accent:#0ea5e9;--accent2:#38bdf8;--text:#cbd5e1;--text-dim:#4a6480;--text-muted:#334d68;--header-bg:#071020;--lake-head:#0a1928;--divider-bg:#071828;--divider-txt:#3b82f6;--calm:#22c55e;--fair:#84cc16;--breezy:#f59e0b;--rough:#f97316;--dangerous:#ef4444;--font-data:'JetBrains Mono',monospace;--font-ui:'Barlow Condensed',sans-serif}
[data-theme="light"]{--bg:#f1f5f9;--bg2:#ffffff;--bg3:#e2e8f0;--border:#cbd5e1;--border2:#94a3b8;--accent:#0369a1;--accent2:#0284c7;--text:#1e293b;--text-dim:#475569;--text-muted:#94a3b8;--header-bg:#0f2744;--lake-head:#1e3a5f;--divider-bg:#dbeafe;--divider-txt:#1d4ed8;--calm:#16a34a;--fair:#65a30d;--breezy:#d97706;--rough:#ea580c;--dangerous:#dc2626}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;min-height:100vh;transition:background 0.2s,color 0.2s}
.topbar{background:var(--header-bg);border-bottom:1px solid var(--border2);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-left{display:flex;flex-direction:column;gap:2px}.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-title{font-size:28px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff}
.topbar-title span{color:#fff}
.topbar-sub{font-size:11px;font-family:var(--font-data);color:#7a9bb5;letter-spacing:0.05em}
.icon-btn{background:var(--border);border:1px solid var(--border2);border-radius:10px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent2);font-size:13px;font-family:var(--font-ui);font-weight:600;letter-spacing:0.05em;padding:0 14px;gap:6px;transition:color 0.15s,border-color 0.15s,background 0.15s;white-space:nowrap;text-decoration:none}
.icon-btn:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
.gear-btn{background:var(--border);border:1px solid var(--border2);border-radius:10px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent2);font-size:26px;transition:color 0.15s,border-color 0.15s,background 0.15s;flex-shrink:0}
.gear-btn:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
.lake-nav{display:flex;gap:2px;padding:12px 24px 0 10px;background:var(--header-bg);border-bottom:1px solid var(--border);overflow-x:auto;align-items:center}
.lake-tab{padding:8px 18px 10px;font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#7a9bb5;border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;display:inline-block;transition:color 0.15s,border-color 0.15s}
.lake-tab:hover{color:#fff}.lake-tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
.lake-section{padding:20px 16px 40px}
.lake-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-left:4px}
.lake-heading h2{font-size:26px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text)}
.reload-btn{background:none;border:none;cursor:pointer;color:var(--accent2);font-size:32px;line-height:1;padding:0 6px 4px 0;border-radius:6px;transition:color 0.15s,transform 0.35s;opacity:0.85;flex-shrink:0;align-self:flex-start}
.reload-btn:hover{color:#fff;opacity:1;transform:rotate(-360deg)}
/* Column visibility toggles */
[data-bft="hide"]      .hide-bft{display:none}
[data-waveht="hide"]   .hide-waveht{display:none}
[data-waveper="hide"]  .hide-waveper{display:none}
[data-inactive="hide"] .inactive-buoy{display:none}
.fcast-only-badge{display:inline-flex;align-items:center;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;font-family:var(--font-ui);letter-spacing:0.08em;background:rgba(96,165,250,0.15);color:#60a5fa;margin-left:4px;white-space:nowrap}
tr.inactive-buoy td{opacity:0.55}
tr.fcast-zone-divider td{background:rgba(96,165,250,0.07);color:#60a5fa;letter-spacing:0.12em;font-size:9px}
.inactive-toggle-btn{background:none;border:1px solid var(--border2);border-radius:5px;color:var(--text-dim);font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.06em;padding:3px 9px;cursor:pointer;transition:color 0.15s,border-color 0.15s;white-space:nowrap}
.inactive-toggle-btn:hover{color:var(--accent2);border-color:var(--accent2)}
.inactive-toggle-hide{display:none}
[data-inactive="show"] .inactive-toggle-show{display:none}
[data-inactive="show"] .inactive-toggle-hide{display:inline}
.gen-ts{font-family:var(--font-data);font-size:11px;color:var(--text-muted);padding:6px 20px;background:var(--bg2);border-bottom:1px solid var(--border);letter-spacing:0.04em}
.gen-ts span{color:var(--accent2)}
/* ---- Sub-section headings (Buoys / METAR) ---- */
.sub-section{margin-bottom:28px;scroll-margin-top:80px}
.sub-heading{display:flex;align-items:center;gap:10px;padding:10px 4px 8px;border-bottom:2px solid var(--border2);margin-bottom:10px}
.scroll-top-btn{margin-left:auto;cursor:pointer;font-size:16px;line-height:1;color:var(--text-muted);transition:color 0.15s;user-select:none;padding:2px 6px;border-radius:4px}
.scroll-top-btn:hover{color:var(--text);background:var(--bg3)}
.sub-icon{font-size:18px;line-height:1}
.sub-title{font-size:16px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text)}
.sub-count{font-family:var(--font-data);font-size:11px;color:var(--text-dim);margin-left:4px}
.buoy-heading .sub-title{color:var(--accent2)}
.metar-heading .sub-title{color:#94a3b8}
[data-theme="light"] .buoy-heading .sub-title{color:var(--accent)}
[data-theme="light"] .metar-heading .sub-title{color:#475569}
/* ---- Stale buoy rows ---- */
tr.buoy-stale{opacity:0.55}
/* ---- Sailing condition badge ---- */
.sail-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:4px;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.07em;cursor:default;white-space:nowrap}
.sail-na{background:var(--bg3);color:var(--text-muted)}
.sail-ideal{background:#052e16;color:#4ade80}
.sail-good{background:#0c2233;color:#38bdf8}
.sail-rough{background:#2d1b00;color:#fb923c}
.sail-danger{background:#2d0000;color:#ef4444}
[data-theme="light"] .sail-na{background:#f1f5f9;color:#94a3b8}
[data-theme="light"] .sail-ideal{background:#dcfce7;color:#15803d}
[data-theme="light"] .sail-good{background:#e0f2fe;color:#0369a1}
[data-theme="light"] .sail-rough{background:#fff7ed;color:#c2410c}
[data-theme="light"] .sail-danger{background:#fee2e2;color:#b91c1c}
/* ---- Tables ---- */
.tbl-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border);background:var(--bg2)}
table.conditions{width:100%;border-collapse:collapse;font-size:13px}
table.conditions thead tr{background:var(--lake-head);border-bottom:2px solid var(--border2)}
table.conditions thead th{padding:9px 10px;font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#7a9bb5;text-align:left;white-space:nowrap}
[data-theme="light"] table.conditions thead th{color:#e0eaf5}
table.conditions thead th.r{text-align:right}table.conditions thead th.c{text-align:center}
table.conditions tbody tr{border-bottom:1px solid var(--border);transition:background 0.1s}
table.conditions tbody tr:last-child{border-bottom:none}
table.conditions tbody tr:hover{background:var(--bg3)}
table.conditions tbody td{padding:7px 10px;vertical-align:middle;font-family:var(--font-data);font-size:10px;color:var(--text);white-space:nowrap}
table.conditions tbody td.r{text-align:right}table.conditions tbody td.c{text-align:center}
tr.basin-divider td{background:var(--divider-bg);color:var(--divider-txt);font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:5px 14px;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.station-icao{font-weight:500;font-size:11px;color:var(--text-dim);letter-spacing:0.05em}
tr.buoy-row-clickable{cursor:pointer;transition:background 0.12s}
tr.buoy-row-clickable:hover{background:var(--row-hover,rgba(41,182,246,0.08))}
tr.buoy-row-clickable:hover .station-name{color:var(--accent2,#29b6f6)}
.buoy-open-hint{font-size:9px;color:var(--text-muted);margin-right:3px;opacity:0.6;transition:opacity 0.12s}
tr.buoy-row-clickable:hover .buoy-open-hint{opacity:1;color:var(--accent2,#29b6f6)}
.bft-legend-items{display:contents}
.bft-legend-items.bft-hidden{display:none !important}
.bft-toggle-arrow{font-size:11px;margin-left:4px}
.bft-toggle-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:11px;color:var(--text-dim);white-space:nowrap}
.bft-toggle-btn:hover{color:var(--text)}
.fav-star{cursor:pointer;font-size:21px;line-height:1;color:var(--text-muted);margin-left:5px;transition:color 0.15s;user-select:none;vertical-align:middle;position:relative;top:-1px}
.fav-star:hover{color:#f59e0b}
.fav-star.fav-on{color:#f59e0b}
.fav-empty-hint td{text-align:center;padding:8px 12px}
.fav-hint-text{font-family:var(--font-ui);font-size:11px;color:var(--text-muted);letter-spacing:0.03em;font-style:italic}
tr.fav-hidden{display:none}
.station-name{font-family:var(--font-ui);font-size:13px;color:var(--text);font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.station-name-row{display:flex;align-items:center;gap:3px;white-space:nowrap}
.station-map-link{flex-shrink:0;font-size:12px;text-decoration:none;opacity:0.5;transition:opacity 0.15s;line-height:1}
.station-map-link:hover{opacity:1}
.alert-badge{display:inline-block;font-size:10px;font-family:var(--font-ui);font-weight:700;margin-left:6px;padding:2px 6px;border-radius:8px;vertical-align:middle;cursor:pointer;line-height:1.3}
.alert-yellow{background:#dc2626;color:#fff}
.alert-orange{background:#ea580c;color:#fff}
.alert-red{background:#7f1d1d;color:#fff}
tr.buoy-alert-row{background:rgba(220,38,38,0.18) !important}
tr.buoy-alert-row td:first-child{border-left:4px solid #dc2626}
[data-theme="dark"] tr.buoy-alert-row{background:rgba(220,38,38,0.22) !important}
@keyframes alert-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.dist{font-size:10px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:4px}
.dist-point{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;font-family:var(--font-ui);letter-spacing:0.1em;background:var(--border);color:var(--accent2);line-height:1.4}
/* ---- Beaufort badges ---- */
.bft-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;font-family:var(--font-ui);font-size:14px;font-weight:700;cursor:default}
.bft-na{background:var(--bg3);color:var(--text-muted)}
.bft-0{background:#0c2233;color:#7dd3fc}.bft-1{background:#0a2233;color:#38bdf8}.bft-2{background:#0a2a1e;color:#34d399}
.bft-3{background:#052e16;color:#4ade80}.bft-4{background:#1a2e05;color:#a3e635}.bft-5{background:#2d2a00;color:#facc15}
.bft-6{background:#2d1b00;color:#fb923c}.bft-7{background:#2d1000;color:#f97316}.bft-8{background:#2d0800;color:#ef4444}
.bft-9{background:#2d0000;color:#dc2626}.bft-10{background:#25001a;color:#f43f5e}.bft-11{background:#1a0030;color:#c084fc}.bft-12{background:#150020;color:#a855f7}
[data-theme="light"] .bft-na{background:#f1f5f9;color:#94a3b8}
[data-theme="light"] .bft-0{background:#e0f7ff;color:#0369a1}[data-theme="light"] .bft-1{background:#bae6fd;color:#0284c7}[data-theme="light"] .bft-2{background:#ccfbf1;color:#0d9488}
[data-theme="light"] .bft-3{background:#dcfce7;color:#16a34a}[data-theme="light"] .bft-4{background:#ecfccb;color:#65a30d}[data-theme="light"] .bft-5{background:#fef9c3;color:#ca8a04}
[data-theme="light"] .bft-6{background:#fef3c7;color:#d97706}[data-theme="light"] .bft-7{background:#ffedd5;color:#ea580c}[data-theme="light"] .bft-8{background:#fee2e2;color:#dc2626}
[data-theme="light"] .bft-9{background:#fecaca;color:#b91c1c}[data-theme="light"] .bft-10{background:#ffe4e6;color:#e11d48}[data-theme="light"] .bft-11{background:#f3e8ff;color:#7c3aed}[data-theme="light"] .bft-12{background:#ede9fe;color:#4c1d95}
/* ---- Wind ---- */
.wind-arrow{font-size:16px;color:var(--accent2);line-height:1}.wind-var{font-size:10px;color:var(--breezy);font-family:var(--font-ui);font-weight:600}
.wind-calm{color:var(--text-muted)}.wind-speed{font-weight:500}.wind-gust{color:var(--rough);font-size:10px}.wind-card{font-size:10px;color:var(--text-dim);font-family:var(--font-ui)}
/* ---- Pressure trend ---- */
.ptrend{display:inline-block;font-size:16px;line-height:1;-webkit-text-stroke:0}
.ptrend-fall-fast{color:#dc2626;transform:rotate(180deg)}
.ptrend-fall     {color:#f97316;transform:rotate(135deg)}
.ptrend-steady   {color:var(--text-dim);transform:rotate(90deg)}
.ptrend-rise     {color:#84cc16;transform:rotate(45deg)}
.ptrend-rise-fast{color:#22c55e;transform:rotate(0deg)}
/* ---- Wind speed trend ---- */
.wtrend-up-fast,.wtrend-up,.wtrend-steady,.wtrend-down,.wtrend-down-fast{display:inline-block;font-size:16px;line-height:1;-webkit-text-stroke:0}
.wtrend-up-fast  {color:#dc2626;transform:rotate(0deg)}
.wtrend-up       {color:#f97316;transform:rotate(45deg)}
.wtrend-steady   {color:var(--text-dim);transform:rotate(90deg)}
.wtrend-down     {color:#84cc16;transform:rotate(135deg)}
.wtrend-down-fast{color:#22c55e;transform:rotate(180deg)}
/* ---- Misc ---- */
.temp-f{font-weight:700;color:var(--text)}.temp-c{color:var(--text-muted);font-size:10px;margin-left:2px}
.buoy-temp-val{font-weight:700;color:var(--text)}
.unit{font-size:10px;color:var(--text-muted);margin-left:1px}.na{color:var(--text-muted)}
.age{font-family:var(--font-ui);font-size:10px;font-weight:500}.age-ok{color:var(--calm)}.age-warn{color:var(--breezy)}.age-old{color:var(--dangerous)}
.wx{font-family:var(--font-ui);font-size:11px;color:var(--breezy)}.sky-icon{font-size:18px;line-height:1}
.wx-words{font-family:var(--font-ui);font-size:11px;color:var(--breezy);white-space:normal;max-width:110px}
.no-data{text-align:center;padding:40px;color:var(--text-dim);font-family:var(--font-ui);font-size:14px}
/* ---- Legend ---- */
.legend{display:flex;gap:10px;padding:12px 20px 12px 20px;border-top:1px solid var(--border);background:var(--bg2);flex-wrap:wrap;align-items:center;position:relative;padding-right:80px}
.legend-label{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.legend-item{display:flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:11px;color:var(--text-dim)}
/* ---- Unit toggles (CSS show/hide) ---- */
[data-unit="F"] .tv-c{display:none}[data-unit="C"] .tv-f{display:none}
[data-wind="kt"]  .wv-mph{display:none}[data-wind="kt"]  .wv-kmh{display:none}[data-wind="kt"]  .wv-ms{display:none}
[data-wind="mph"] .wv-kt{display:none} [data-wind="mph"] .wv-kmh{display:none}[data-wind="mph"] .wv-ms{display:none}
[data-wind="kmh"] .wv-kt{display:none} [data-wind="kmh"] .wv-mph{display:none}[data-wind="kmh"] .wv-ms{display:none}
[data-wind="ms"]  .wv-kt{display:none} [data-wind="ms"]  .wv-mph{display:none}[data-wind="ms"]  .wv-kmh{display:none}
[data-ceil="ft"] .cv-m{display:none}[data-ceil="m"] .cv-ft{display:none}
.wave-fcast{color:var(--text-dim);font-style:italic}
.wave-fcast .unit{color:var(--text-dim)}
.wave-dag{font-size:8px;vertical-align:super;margin-left:1px;font-style:normal;opacity:0.7}
.wave-occ{font-size:9px;color:var(--text-dim)}
/* Visibility: sm / km / nm  — applies to both METAR and buoy rows */
[data-vis="sm"] .vv-km{display:none}[data-vis="sm"] .vv-nm{display:none}
[data-vis="km"] .vv-sm{display:none}[data-vis="km"] .vv-nm{display:none}
[data-vis="nm"] .vv-sm{display:none}[data-vis="nm"] .vv-km{display:none}
/* Current/water speed toggle: kt / mph / kph */
[data-speed="kt"]  .sv-mph{display:none}[data-speed="kt"]  .sv-kph{display:none}
[data-speed="mph"] .sv-kt{display:none} [data-speed="mph"] .sv-kph{display:none}
[data-speed="kph"] .sv-kt{display:none} [data-speed="kph"] .sv-mph{display:none}
/* Wave section styles */
.wave-section-divider{border:none;border-top:1px solid var(--border2);margin:16px 0 14px;opacity:0.6}
.wave-section-title{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px}
.wave-no-sensor{font-family:var(--font-ui);font-size:12px;color:var(--text-dim);text-align:center;padding:18px 0;opacity:0.7}
[data-wx="code"] .wx-words{display:none}[data-wx="words"] .wx-code{display:none}
[data-sky="abbr"] .sky-icon{display:none}[data-sky="icons"] .sky-abbr{display:none}
.section-tabs{display:flex;gap:0;border-bottom:2px solid var(--border2);margin-bottom:16px}
.section-tab{padding:9px 20px;font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-dim);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color 0.15s,border-color 0.15s;user-select:none}
.section-tab:hover{color:var(--text)}
.section-tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
@media(max-width:768px){.section-tab{padding:8px 14px;font-size:12px}}
@media(max-width:450px){.section-tab{padding:6px 10px;font-size:11px;letter-spacing:0}}
/* ---- Settings drawer ---- */
.zone-toggle{cursor:pointer;user-select:none}
.zone-toggle td,.metar-zone-toggle td{position:relative}
.zone-toggle .ztoggle-arrow,.metar-zone-toggle .ztoggle-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;line-height:1}
tr.zone-body-hidden{display:none !important}
tbody.zone-collapsed tr:not(.basin-divider):not(.fav-divider){display:none !important}
.site-footer{background:#071020 !important;border-top:2px solid #1e3a5f;padding:32px 24px 20px;margin-top:40px}
[data-theme=light] .site-footer{background:#0f2744 !important}
.site-footer-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.site-footer-links a{color:#94a3b8;font-family:var(--font-ui);font-size:13px;text-decoration:none;letter-spacing:0.04em;transition:color 0.15s}
.site-footer-links a:hover{color:#e2e8f0}
.site-footer-bottom{padding:0 16px;text-align:right}
.site-footer-copy{color:#94a3b8;font-family:var(--font-ui);font-size:12px;margin-bottom:4px}
.site-footer-ver{color:#4a5568;font-family:var(--font-data);font-size:10px;letter-spacing:0.04em}
tr.buoy-row-clickable{cursor:pointer;transition:background 0.12s}
tr.buoy-row-clickable:hover{background:rgba(41,182,246,0.08)}
tr.buoy-row-clickable:hover .station-name{color:var(--accent2,#29b6f6)}
.buoy-open-hint{font-size:9px;color:var(--text-muted);margin-right:3px;opacity:0.6;transition:opacity 0.12s}
tr.buoy-row-clickable:hover .buoy-open-hint{opacity:1;color:var(--accent2,#29b6f6)}
.settings-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200}.settings-overlay.open{display:block}
.settings-drawer{position:fixed;top:0;right:-280px;width:260px;height:100vh;background:var(--bg2);border-left:1px solid var(--border2);z-index:201;transition:right 0.25s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;overflow-y:auto}
.settings-drawer.open{right:0}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px;border-bottom:1px solid var(--border)}
.settings-title{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text)}
.settings-close{background:none;border:none;color:var(--text-dim);font-size:17px;cursor:pointer;line-height:1;padding:2px 5px;border-radius:4px;transition:color 0.15s}.settings-close:hover{color:var(--text)}
.settings-body{padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.settings-group-label{font-family:var(--font-ui);font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
.settings-save-wrap{margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.settings-save{width:100%;padding:6px 0;background:var(--accent);border:none;border-radius:6px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#fff;cursor:pointer;transition:background 0.15s}
.settings-save:hover{background:var(--accent2)}
.settings-saved-msg{text-align:center;font-family:var(--font-ui);font-size:11px;color:var(--calm);margin-top:6px;height:14px;letter-spacing:0.05em;transition:opacity 0.4s}
.pill-toggle{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.pill-opt{flex:1;padding:4px 0;text-align:center;font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.04em;color:var(--text-dim);cursor:pointer;transition:background 0.15s,color 0.15s;user-select:none}
.pill-opt.active{background:var(--accent);color:#fff}.pill-opt:not(.active):hover{color:var(--text);background:var(--border)}
.tz-select{width:100%;padding:6px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-ui);font-size:12px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a6480' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.tz-select:focus{outline:none;border-color:var(--accent)}.tz-select option{background:#0d1726;color:#cbd5e1}
[data-theme="light"] .tz-select{background-color:#f1f5f9;color:#1e293b;border-color:#cbd5e1}
[data-theme="light"] .tz-select option{background:#ffffff;color:#1e293b}
@media(max-width:768px){.topbar{padding:10px 14px}.lake-nav{padding:10px 14px 0}.lake-section{padding:14px 8px 30px}table.conditions tbody td{padding:6px 7px}.hide-mobile{display:none}.settings-drawer{width:260px}.station-name{max-width:85px;font-size:12px}tr.basin-divider td{font-size:8px;letter-spacing:0.08em;padding:4px 8px}}
.tab-short{display:none}.tab-full{display:inline}
@media(max-width:450px){
  .hide-phone{display:none}
  .age-ago{display:none}
  table.conditions{font-size:10px}
  table.conditions thead th{font-size:9px;padding:5px 4px;letter-spacing:0}
  table.conditions tbody td{padding:5px 4px}
  .station-name{max-width:68px;font-size:11px}
  .bft-badge{width:16px!important;height:16px!important;font-size:9px!important}
  .lake-nav-tab{padding:8px 10px;font-size:11px}
  .topbar-title{font-size:14px}
  .gen-ts{font-size:9px}
  tr.basin-divider td{font-size:7px;padding:3px 6px}
  .legend{font-size:9px}
  .legend-item{margin-right:4px}
  .wind-cell{min-width:26px}
  .buoy-modal-title{font-size:10px}
  .buoy-tab{padding:5px 6px;font-size:9px;gap:0}
  .buoy-tabs{padding:0 8px;gap:0}
  .buoy-tab .tab-icon{display:none}
  .tab-full{display:none}
  .tab-short{display:inline}
  .fcast-period{padding:2px 6px;font-size:10px}
  .noaa-forecast-body{font-size:10px}
}
/* ---- Buoy popup trigger ---- */
.buoy-popup-trigger{cursor:pointer;transition:color 0.15s}
.buoy-popup-trigger:hover{color:var(--accent2) !important}
/* ---- Buoy history popup modal ---- */
.buoy-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300}
.buoy-overlay.open{display:block}
.buoy-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(96vw,760px);height:min(90vh,700px);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;z-index:301;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.buoy-modal.open{display:flex}
.buoy-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid var(--border)}
.buoy-modal-title{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--text);line-height:1.4;white-space:normal}
.buoy-time-range{font-family:var(--font-data);font-size:10px;color:var(--text-dim);padding:4px 0 8px;letter-spacing:0.04em}
.buoy-modal-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;line-height:1;padding:0 4px;border-radius:4px;transition:color 0.15s}.buoy-modal-close:hover{color:var(--text)}
.buoy-modal-body{padding:16px 18px 18px;flex:1;overflow:hidden;display:flex;flex-direction:column}
.buoy-chart-wrap{position:relative;height:450px}
.buoy-chart-small{height:160px}
.wind-section-label{display:flex;align-items:baseline;gap:6px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);padding:10px 0 4px;border-top:1px solid var(--border);margin-top:8px}
.wind-section-label:first-child{border-top:none;margin-top:0;padding-top:4px}
.wind-section-sub{font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buoy-no-data{text-align:center;padding:60px 20px;color:var(--text-dim);font-family:var(--font-ui);font-size:13px}
.buoy-sun-row{display:none;gap:6px;padding:6px 18px;background:var(--bg3);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.sun-today{font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--text-dim);letter-spacing:0.1em;margin-right:4px}
.sun-item{font-family:var(--font-data);font-size:10px;color:var(--text-dim);white-space:nowrap}
.sun-item b{color:var(--text);font-weight:600}
.sun-sep{color:var(--text-muted);font-size:10px}
.moon-phase{font-weight:500}
.moon-gain{color:var(--calm);font-size:9px}
.moon-wane{color:var(--text-dim);font-size:9px}
.buoy-fcast-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0 6px;flex-wrap:wrap}
.fcast-period-strip{display:flex;gap:4px;align-items:center;flex-shrink:0}
.fcast-period{padding:2px 9px;border-radius:4px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.06em;cursor:pointer;background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);transition:background 0.12s,color 0.12s,border-color 0.12s;user-select:none}
.fcast-period.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fcast-period:hover:not(.active){color:var(--accent2);border-color:var(--accent2)}
.tides-station-label{font-family:var(--font-data);font-size:10px;color:var(--text-dim);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.tides-widget{display:flex;gap:0;margin:8px 0 6px;border:1px solid var(--border2);border-radius:6px;overflow:hidden;background:var(--bg2)}
.tides-widget-cell{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--border)}
.tides-widget-cell:last-child{border-right:none}
.wind-stats-wrap{margin:4px 0 8px}
.wind-stats-table{width:100%;border-collapse:collapse}
.wind-stats-table thead tr{border-bottom:1px solid var(--border2)}
.wind-stats-table thead th{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);padding:4px 6px;text-align:left}
.wind-stats-table thead th:nth-child(2),.wind-stats-table thead th:nth-child(3),.wind-stats-table thead th:nth-child(4){text-align:right}
.wind-stats-table tbody tr{border-bottom:1px solid var(--border)}
.wind-stats-table tbody tr:last-child{border-bottom:none}
.wind-stats-table tbody td{padding:4px 6px;font-family:var(--font-data);font-size:11px;color:var(--text);vertical-align:middle}
.wind-stats-table tbody td:first-child{color:var(--text-dim);font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.03em}
.wind-stats-table tbody td:nth-child(2){color:var(--accent2);font-weight:700;text-align:right}
.wind-stats-table tbody td:nth-child(3){color:var(--text-dim);font-size:10px;text-align:right;white-space:nowrap}
.wind-stats-table tbody td:nth-child(4){color:var(--text-muted);font-size:10px;text-align:right;padding-left:8px}
.wind-stats-total{font-family:var(--font-ui);font-size:10px;color:var(--text-dim);text-align:right;padding:5px 6px 0;letter-spacing:0.04em}
.wind-stats-table .s-na{color:var(--text-muted);font-size:10px;text-align:center}
.tides-widget-label{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.tides-widget-value{font-family:var(--font-data);font-size:18px;font-weight:700;color:var(--accent2);line-height:1}
.tides-widget-sub{font-family:var(--font-ui);font-size:10px;color:var(--text-dim);margin-top:1px}
.buoy-tabs{display:flex;gap:2px;padding:0 18px;background:var(--bg);border-bottom:1px solid var(--border)}
.buoy-tab{padding:7px 16px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);border-bottom:2px solid transparent;cursor:pointer;transition:color 0.15s,border-color 0.15s;user-select:none;display:flex;align-items:center;gap:6px}
.buoy-tab.active{color:var(--accent2);border-bottom-color:var(--accent2)}
.tab-icon{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;vertical-align:middle}
[data-theme="dark"] .tab-icon{stroke:#fff}
[data-theme="light"] .tab-icon{stroke:#000}
.tab-icon circle[fill="currentColor"]{fill:currentColor}
[data-theme="dark"] .noaa-icon [fill="currentColor"]{fill:#fff}
[data-theme="light"] .noaa-icon [fill="currentColor"]{fill:#000}
.buoy-tab-panel{display:none}.buoy-tab-panel.active{display:block}
#panelForecast.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
#panelForecast::-webkit-scrollbar{width:4px}
#panelForecast::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#panelNoaa.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
#panelNoaa::-webkit-scrollbar{width:4px}
#panelNoaa::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#panelTides.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
#panelTides::-webkit-scrollbar{width:4px}
#panelTides::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#panelWxmap.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
#panelWxmap::-webkit-scrollbar{width:4px}
#panelWxmap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#panelWeather.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px;padding-bottom:24px}
#panelWeather::-webkit-scrollbar{width:4px}
#panelWeather::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.noaa-forecast-body{overflow-y:visible;font-family:var(--font-mono,monospace);font-size:11px;line-height:1.55;color:var(--text);padding:4px 0}
.noaa-zone-block{margin-bottom:14px;scroll-margin-top:4px}
.noaa-type-divider{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);background:var(--bg3);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:4px 6px;margin:10px 0 10px;}
.noaa-offshore-link{padding:4px 0 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.noaa-offshore-link a{font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--accent2);text-decoration:none;letter-spacing:0.04em}
.noaa-offshore-link a:hover{text-decoration:underline}
.noaa-zone-title{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent2);margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--border)}
.noaa-period{margin-bottom:6px}
.noaa-period-name{font-weight:700;color:var(--text);font-family:var(--font-ui);font-size:11px}
.noaa-period-wind{font-size:10px;font-weight:600;color:var(--accent2);margin-top:1px;font-family:var(--font-ui)}
.noaa-period-text{color:var(--text-dim);margin-top:1px}
.noaa-forecast-body::-webkit-scrollbar{width:4px}
.noaa-forecast-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.radar-status-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0 4px}
.radar-anim-controls{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.ranim-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-size:11px;padding:2px 8px;cursor:pointer;line-height:1.4;transition:background 0.12s}
.ranim-btn:hover{background:var(--accent)}
.ranim-scrub{width:110px;height:4px;cursor:pointer;accent-color:var(--accent2)}
.ranim-frame{font:600 10px var(--font-ui);color:var(--text-dim);white-space:nowrap;min-width:60px}
.buoy-radar-wrap{height:450px;width:100%;position:relative}
.wx-section-nav{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-bottom:4px}
.wx-nav-btn{background:none;border:1px solid var(--border2);border-radius:5px;color:var(--text-dim);font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:0.04em;padding:3px 8px;cursor:pointer;transition:color 0.15s,border-color 0.15s;white-space:nowrap}
.wx-nav-btn:hover{color:var(--accent2);border-color:var(--accent2)}
.wx-nav-btn:disabled{opacity:0.25;cursor:default}
@media(max-width:600px){.buoy-radar-wrap{height:220px}.ranim-scrub{width:70px}}
@media(max-width:600px){.buoy-modal{width:98vw;height:min(92vh,680px);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10px}.buoy-chart-wrap{height:220px}.buoy-radar-wrap{height:220px}}
.wxc-scroll{overflow-x:auto;display:flex;gap:7px;padding:8px 4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.wxc-scroll::-webkit-scrollbar{height:6px}
.wxc-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.wxc-hourly-label{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:10px}
.wxc-hourly-wrap{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.wxc-hourly-wrap::-webkit-scrollbar{width:4px}
.wxc-hourly-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.wxc-hour-row{display:flex;align-items:center;gap:7px;padding:5px 7px;border-bottom:1px solid var(--border)}
.wxc-hour-row.wxc-hour-now{background:var(--bg3)}
.wxc-hour-time{font-family:var(--font-data);font-size:10px;color:var(--text-dim);min-width:80px;flex-shrink:0}
.wxc-hour-icon{width:21px;height:21px;flex-shrink:0}
.wxc-hour-temp{font-family:var(--font-data);font-size:11px;color:var(--text);min-width:36px;flex-shrink:0}
.wxc-hour-unit{font-size:9px;color:var(--text-muted)}
.wxc-hour-pp{font-family:var(--font-data);font-size:10px;color:var(--text-dim);min-width:32px;flex-shrink:0}
.wxc-hour-wind{font-family:var(--font-data);font-size:10px;color:var(--text-dim)}
.wxc-hour-short{font-family:var(--font-ui);font-size:9px;color:var(--text-muted);margin-left:auto;flex-shrink:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.wxc-sun-row{display:none}
.wxc-sun-icon{display:none}
.wxc-sun-label{display:none}
.wxc-sun-time{display:none}
.wxc-hour-sun{font-family:var(--font-ui);font-size:10px;font-weight:600;color:var(--text-dim);white-space:nowrap;margin-left:auto;flex-shrink:0;text-align:right}
.wxc-card-sun{font-family:var(--font-data);font-size:9px;color:var(--text-dim);text-align:center;line-height:1.5}
.wxc-card{min-width:80px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;overflow:hidden;flex-shrink:0;cursor:pointer;transition:border-color 0.15s;display:flex;flex-direction:column}
.wxc-card:hover{border-color:var(--border2)}
.wxc-card.wxc-today{border-color:var(--accent)}
.wxc-card.wxc-selected{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.wxc-date{padding:5px 6px 4px;text-align:center;background:var(--bg2);border-bottom:1px solid var(--border)}
.wxc-dow{font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--accent2);text-transform:uppercase}
.wxc-dom{font-size:10px;color:var(--text-dim);font-family:var(--font-data)}
.wxc-half{padding:7px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg2);flex:1}
.wxc-night{background:var(--bg3);border-top:1px solid var(--border)}
.wxc-hlabel{font-size:9px;letter-spacing:0.1em;color:var(--text-muted);text-transform:uppercase;font-weight:700}
.wxc-icon{width:34px;height:34px}
.wxc-temp{font-family:var(--font-data);font-size:16px;color:var(--text)}
.wxc-unit{font-size:10px;color:var(--text-dim)}
.wxc-pprow{display:flex;align-items:center;gap:3px;width:100%}
.wxc-ppbar-wrap{flex:1;height:3px;background:var(--border2);border-radius:2px;overflow:hidden}
.wxc-ppbar{height:3px;border-radius:2px}
.wxc-ppval{font-family:var(--font-data);font-size:9px;color:var(--text-dim);min-width:22px;text-align:right}
.wxc-wind{font-family:var(--font-data);font-size:9px;color:var(--text);display:flex;align-items:center;justify-content:center}
.wxc-wu{color:var(--text-dim)}
.wxc-na{font-size:10px;color:var(--text-muted)}
.wxc-active-half{box-shadow:inset 0 0 0 1px var(--accent2)}
.wxc-header{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);padding:6px 6px 2px}
.wxc-legend{padding:4px 6px 8px;font-size:9px;color:var(--text-muted);letter-spacing:0.04em}
.popup-alert-banner{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;margin:0 0 8px 0;border-radius:5px;font-family:var(--font-ui);font-size:11px;font-weight:600;line-height:1.4;border:1px solid}
.popup-alert-banner.al-sca{background:rgba(220,38,38,0.13);border-color:#dc2626;color:#991b1b}
.popup-alert-banner.al-gale{background:rgba(249,115,22,0.13);border-color:#ea580c;color:#7c2d12}
.popup-alert-banner.al-storm{background:rgba(220,38,38,0.13);border-color:#dc2626;color:#7f1d1d}
[data-theme="dark"] .popup-alert-banner.al-sca{background:rgba(220,38,38,0.1);border-color:#b91c1c;color:#fca5a5}
[data-theme="dark"] .popup-alert-banner.al-gale{background:rgba(249,115,22,0.1);border-color:#c2410c;color:#fed7aa}
[data-theme="dark"] .popup-alert-banner.al-storm{background:rgba(220,38,38,0.1);border-color:#b91c1c;color:#fecaca}
.popup-alert-icon{font-size:14px;flex-shrink:0;line-height:1}
.alert-banner-head{display:flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}
.alert-expand-arrow{margin-left:auto;font-size:8px;flex-shrink:0;opacity:0.6;transition:transform 0.2s}
.alert-banner-detail{padding:8px 0 2px 22px;font-weight:400;font-size:11px;line-height:1.5}
.alert-detail-label{font-weight:700;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;margin-top:6px;opacity:0.8}
.alert-detail-label:first-child{margin-top:0}
.alert-detail-text{margin:1px 0 4px;white-space:pre-wrap}
#panelCelestial.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px;padding-bottom:24px}
#panelCelestial::-webkit-scrollbar{width:4px}
#panelCelestial::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.cel-section-label{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:0 0 5px}
.cel-timeline-wrap{padding:8px 6px 4px}
.cel-timeline-bar{height:22px;border-radius:3px;border:1px solid var(--border)}
.cel-timeline-labels{display:flex;justify-content:space-between;font-family:var(--font-data);font-size:9px;color:var(--text-muted);margin-top:3px;padding:0 1px}
.cel-section{padding:8px 6px 2px;border-top:1px solid var(--border)}
.cel-almanac-table{width:100%;border-collapse:collapse;font-family:var(--font-data);font-size:11px}
.cel-almanac-table tr td{padding:4px 3px;vertical-align:middle}
.cel-alm-lbl{color:var(--text-muted);font-size:10px;white-space:nowrap;width:110px}
.cel-alm-val{color:var(--text);font-weight:400}
.cel-alm-az{color:var(--accent2);font-size:10px;padding-left:6px}
.cel-moon-wrap{display:flex;align-items:flex-start;gap:14px;padding:4px 0 6px}
.cel-moon-svg-wrap{flex-shrink:0}
.cel-moon-info{display:flex;flex-direction:column;gap:5px;padding-top:4px}
.cel-moon-name{font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--text)}
.cel-moon-pct{font-family:var(--font-data);font-size:10px;color:var(--text-dim)}
.cel-moon-row{display:flex;gap:8px;align-items:baseline}
.cel-tidal-note{font-family:var(--font-ui);font-size:10px;color:var(--accent2);margin-top:3px;font-weight:600}
.cel-sailor-note{margin:6px 6px 10px;padding:8px 10px;border-radius:5px;background:var(--bg3);border:1px solid var(--border);font-family:var(--font-ui);font-size:11px;color:var(--text-dim);line-height:1.5}
.cel-phases-row{display:flex;justify-content:space-around;gap:8px;padding:6px 0}
.cel-phase-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.cel-phase-name{font-family:var(--font-ui);font-size:10px;font-weight:600;color:var(--text);text-align:center}
.cel-phase-date{font-family:var(--font-data);font-size:10px;color:var(--text-dim)}
/* ---- Marina section ---- */
.marina-section .sub-heading{border-bottom-color:var(--accent2)}
.marina-icon{color:var(--accent2)}
tr.marina-row-clickable{cursor:pointer;transition:background 0.12s}
tr.marina-row-clickable .station-icao{font-family:var(--font-ui);color:var(--text);font-weight:700;font-size:13px}
tr.marina-row-clickable:hover{background:var(--row-hover,rgba(41,182,246,0.08))}
tr.marina-row-clickable:hover .station-icao{color:var(--accent2)}
.marina-popup-trigger{cursor:pointer;transition:color 0.15s}
.marina-fav-star{font-family:var(--font-data)}
.marina-depth{font-family:var(--font-data);color:var(--text)}
.marina-depth-low{color:var(--dangerous)}
.marina-ref{font-family:var(--font-data);font-size:11px;color:var(--text-dim)}
.marina-status{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.06em;white-space:nowrap}
.marina-ok{background:rgba(34,197,94,0.12);color:var(--calm)}
.marina-warn{background:rgba(245,158,11,0.15);color:var(--breezy)}
.marina-severe{background:rgba(239,68,68,0.15);color:var(--dangerous)}
.marina-rise{background:rgba(56,189,248,0.12);color:var(--accent2)}
/* ---- Marina popup ---- */
.marina-modal-header{border-bottom-color:var(--accent2) !important}
/* ---- METAR popup ---- */
.metar-modal-header{border-bottom-color:var(--accent) !important}
#mtPanelForecast.active,#mtPanelMaps.active,#mtPanelConditions.active,#mtPanelInfo.active,#mtPanelCelestial.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
tr.metar-row-clickable{cursor:pointer;transition:background 0.12s}
tr.metar-row-clickable:hover{background:var(--row-hover,rgba(41,182,246,0.08))}
#mPanelForecast.active,#mPanelMaps.active,#mPanelConditions.active,#mPanelInfo.active{max-height:calc(90vh - 180px);overflow-y:auto;padding-right:4px}
.marina-forecast-body{padding:2px 0}
.marina-cond-body{padding:2px 0}
.marina-info-body{padding:2px 0}
.marina-fcast-card{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.marina-fcast-card:last-child{border-bottom:none}
.marina-fcast-period{font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--text);min-width:100px;flex-shrink:0}
.marina-fcast-detail{font-family:var(--font-ui);font-size:12px;color:var(--text-dim);line-height:1.5}
.marina-fcast-temp{font-family:var(--font-data);font-size:13px;font-weight:600;color:var(--text);margin-left:auto;white-space:nowrap}
.marina-fcast-temp .hi{color:var(--dangerous)}.marina-fcast-temp .lo{color:var(--accent2)}
.marina-cond-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 4px;border-bottom:1px solid var(--border)}
.marina-cond-row:last-child{border-bottom:none}
.marina-cond-label{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim)}
.marina-cond-value{font-family:var(--font-data);font-size:12px;font-weight:500;color:var(--text)}
.marina-warn-banner{padding:10px 12px;border-radius:6px;margin:8px 0;font-family:var(--font-ui);font-size:12px;line-height:1.5}
.marina-warn-banner.warn{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);color:var(--breezy)}
.marina-warn-banner.severe{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:var(--dangerous)}
.marina-warn-banner.rise{background:rgba(56,189,248,0.1);border:1px solid rgba(56,189,248,0.25);color:var(--accent2)}
.marina-info-row{padding:8px 4px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:baseline}
.marina-info-row:last-child{border-bottom:none}
.marina-info-label{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);min-width:100px;flex-shrink:0}
.marina-info-val{font-family:var(--font-data);font-size:12px;color:var(--text)}
.marina-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0}
.marina-loading-text{font-family:var(--font-ui);font-size:12px;color:var(--text-dim);letter-spacing:0.04em}
.marina-loading-boat{width:100px;height:112px}
.marina-loading-boat svg{width:100px;height:112px}
@keyframes mBoatBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes mWaveMove{0%{transform:translateX(0)}100%{transform:translateX(-20px)}}
.marina-boat-hull{animation:mBoatBob 2s ease-in-out infinite}
.marina-wave-line{animation:mWaveMove 1.5s linear infinite}
.marina-wl-section{margin-top:12px;border-top:2px solid var(--border2);padding-top:8px}
.marina-wl-title{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);padding:4px 0 2px}
.marina-wl-chart-wrap{position:relative;height:220px;margin-top:4px}
.marina-hourly-section{margin-top:12px;border-top:2px solid var(--border2);padding-top:8px}
.marina-hourly-title{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);padding:4px 0 6px}
.marina-hourly-grid{display:flex;gap:0;overflow-x:auto;padding-bottom:6px}
.marina-hour-cell{flex:0 0 60px;padding:6px 4px;text-align:center;border-right:1px solid var(--border);font-family:var(--font-data);font-size:10px;color:var(--text-dim)}
.marina-hour-cell:last-child{border-right:none}
.marina-hour-time{font-weight:700;color:var(--text);font-size:10px;margin-bottom:2px}
.marina-hour-temp{font-weight:600;color:var(--text);font-size:12px}
.marina-hour-wind{font-size:9px;color:var(--text-dim)}
.marina-hour-short{font-size:9px;color:var(--text-dim)}

/* === site logo (topbar) === */
.topbar-logo{display:block;line-height:0}
.topbar-logo img{height:60px;width:auto;display:block}
@media(max-width:768px){.topbar-logo img{height:48px}}