/* ── MANUKA FONT ───────────────────────────────────────────── */
@font-face {
  font-family:'Manuka';
  src:url('/fonts/manuka-condensed-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Manuka';
  src:url('/fonts/manuka-condensed-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ── DENIM INK FONT ────────────────────────────────────────── */
@font-face {
  font-family:'Denim INK';
  src:url('/fonts/DenimINK-Light.woff2') format('woff2'),
      url('/fonts/DenimINK-Light.woff') format('woff');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Denim INK';
  src:url('/fonts/DenimINK-Regular.woff2') format('woff2'),
      url('/fonts/DenimINK-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Denim INK';
  src:url('/fonts/DenimINK-Medium.woff2') format('woff2'),
      url('/fonts/DenimINK-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Denim INK';
  src:url('/fonts/DenimINK-Bold.woff2') format('woff2'),
      url('/fonts/DenimINK-Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ── RESET & BASE ──────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:           #0e0e0e;
  --bg-chrome:    #141414;
  --bg-surface:   #1a1a1a;
  --bg-raised:    #222;
  --bg-raised-2:  #2a2a2a;
  --border:       #242424;
  --border-hi:    rgba(255,255,255,.10);
  --text:         #D8E4D6;
  --text-muted:   #888;
  --text-dim:     #aaa;
  --blue:         #637AAA;
  --blue-l:       #8aa4d4;
  --gold:         #c8b84a;
  --sidebar-w:    520px;
  --overlay-soft: rgba(255,255,255,.06);
  --overlay-med:  rgba(255,255,255,.10);
  --overlay-hi:   rgba(255,255,255,.15);
  --shadow:       none;
  --map-bg:       #0d1b2a;
  --page-bg:      #050505;
  --ink:          #1c1a00;
  --panel-bg:     rgba(14,14,18,.95);
}
html, body { margin:0; padding:0; height:100%; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; background:var(--page-bg); color:var(--text); }
.skip-link {
  position:absolute; top:-100%; left:8px; z-index:10000;
  background:var(--gold); color:#1c1a00; padding:8px 16px; border-radius:0 0 8px 8px;
  font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:1px;
  text-decoration:none; transition:top .15s;
}
.skip-link:focus { top:0; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }
.leaflet-control-zoom { display:none !important; }
.leaflet-control-attribution {
  background: rgba(5,5,5,.65) !important;
  color: rgba(255,255,255,.35) !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
}
.leaflet-control-attribution a {
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important;
}
.leaflet-control-attribution a:hover {
  color: var(--gold) !important;
  text-decoration: underline !important;
}
.leaflet-container { background:var(--map-bg) !important; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥768px)
   ═══════════════════════════════════════════════════════════ */
#app { width:100vw; height:100vh; display:flex; flex-direction:column; background:var(--page-bg); padding-top:92px; box-sizing:border-box; }

.topnav {
  height:52px; background:var(--overlay-soft); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:none;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  padding:0 16px; flex-shrink:0;
  position:fixed; top:20px; left:20px; right:20px; border-radius:0;
  z-index:1000;
  overflow:hidden;
}
.nav-left  { display:flex; align-items:center; gap:6px; justify-content:flex-start; min-width:0; overflow:hidden; }
.nav-right { display:flex; align-items:center; gap:6px; justify-content:flex-end; min-width:0; overflow:hidden; }
.nav-pill {
  height:30px; padding:0 14px; background:transparent;
  border:1px solid transparent; border-radius:0;
  color:var(--text-muted); font-family:'Space Mono',monospace;
  font-weight:400; font-size:10px; letter-spacing:1px; cursor:pointer; transition:all .15s;
  text-transform:uppercase;
}
.nav-pill:hover  { background:rgba(255,255,255,.06); color:var(--text); }
.nav-pill.active { background:rgba(255,255,255,.06); color:var(--text); border-color:rgba(255,255,255,.12); }
.nav-logo { display:flex; align-items:center; justify-content:center; padding:0 12px; }
.nav-logo svg { height:26px; width:auto; }

.app-body { flex:1; display:flex; overflow:hidden; }

#app.home-view .sidebar { display:none; }
#app.home-view .mob-bottom,
#app.home-view .mob-search { display:none !important; }
/* Hide all map markers/overlays on homepage — keep tile layer for blurred bg */
#app.home-view .leaflet-marker-pane,
#app.home-view .leaflet-shadow-pane,
#app.home-view .leaflet-overlay-pane,
#app.home-view .leaflet-tooltip-pane,
#app.home-view .leaflet-popup-pane { visibility:hidden; }

/* Map view: make the topnav flush with the viewport edges instead of
   floating with 20px gutters. On the homepage the floating chrome reads
   as intentional because the hero video fills the viewport behind it.
   On the map, the gutters expose body bg as a black "frame" — flush is
   cleaner. */
.map-view .topnav { top:0; left:0; right:0; }
#app.map-view { padding-top:52px; }
/* Pro banner pushes the nav (and #app padding) down 36px */
body.has-pro-banner .map-view .topnav { top:36px; }
body.has-pro-banner #app.map-view { padding-top:88px; }

/* sidebar */
.sidebar {
  flex-shrink:0; background:var(--bg-chrome);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
.sidebar.sidebar-wide { width: 520px; }

/* Sidebar collapse / expand / drag-to-resize */
.sidebar-inner {
  display: flex; flex-direction: column; height: 100%;
  position: relative; overflow: hidden;
}
.sidebar.sidebar-collapsed .sidebar-inner { visibility: hidden; }
.sidebar-expand-strip {
  position: absolute; inset: 0; z-index: 25;
  border: none; padding: 0; background: var(--bg-chrome); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.15s, background 0.15s;
}
.sidebar-expand-strip:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sidebar-collapse-btn {
  width: 24px; height: 24px; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; margin-left: 8px;
  transition: color 0.15s;
}
.sidebar-collapse-btn:hover { color: var(--text); }
.bd-collapse-btn {
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: color 0.15s;
}
.bd-collapse-btn:hover { color: var(--text); }
.sidebar-drag-handle {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 20;
}
.sidebar-drag-handle:hover,
.sidebar-drag-handle:active { background: var(--gold); opacity: 0.3; }

/* Map marker clusters — angular brand */
.bc-wrap { cursor:pointer; user-select:none; display:inline-block; }
.bc-inner {
  border-radius:0; padding:5px 10px; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.85); border:2px solid var(--gold);
  white-space:nowrap; backdrop-filter:blur(4px);
}
.bc-count { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; color:var(--gold); letter-spacing:1px; }
.bc-light .bc-inner { background:rgba(255,255,255,.92) !important; border-color:#d4c880 !important; backdrop-filter:blur(6px); }
.bc-light .bc-count { color:#1a1a1a !important; }
/* Override leaflet.markercluster defaults */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background:none !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background:none !important; }
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition:transform 0.25s ease-out, opacity 0.25s ease-out; }
.search-box { padding:12px 12px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.search-inner { position:relative; display:flex; align-items:stretch; border:1px solid rgba(255,255,255,.18); }
.search-inner::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:rgba(255,255,255,.5); transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.search-inner:focus-within::after { transform:scaleX(1); }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; display:flex; align-items:center; }
.search-input {
  width:100%; background:transparent; border:none; border-radius:0;
  padding:12px 36px 12px 36px; font-family:'Space Mono',monospace;
  font-weight:400; font-size:11px; letter-spacing:1px; color:var(--text); outline:none;
}
.search-input::placeholder { color:var(--text-muted); opacity:.5; }
.search-input:focus { background:rgba(255,255,255,.03); }
.search-clear {
  position:absolute; right:0; top:0; bottom:0; width:36px;
  background:rgba(255,255,255,.06); border:none; border-left:1px solid rgba(255,255,255,.12);
  color:var(--text-muted); cursor:pointer;
  display:none; align-items:center; justify-content:center; transition:background .12s, color .12s;
}
.search-clear:hover { background:rgba(255,255,255,.12); color:var(--text); }
.search-input:not(:placeholder-shown) ~ .search-clear { display:flex; }
.search-input.error  { border-color:#e05a5a !important; }
.search-icon.loading { animation:spin .7s linear infinite; }

.suggestions {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--bg-surface); border:1.5px solid rgba(255,255,255,.12);
  border-radius:0; overflow:hidden; z-index:600;
  box-shadow:0 8px 24px rgba(0,0,0,.5); display:none;
}
.suggestions.open { display:block; }
.sug-item {
  padding:10px 14px; font-size:12px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .1s, color .1s;
}
.sug-item:last-child { border-bottom:none; }
.sug-item:hover, .sug-item.active { background:var(--bg-raised); color:var(--text); }

/* saved spot map pin */
.spot-pin-wrap {
  cursor:pointer;
  transition:transform .15s;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.spot-pin-wrap:hover { transform:scale(1.15) translateY(-2px); }

/* main */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.map-wrap { flex:1; position:relative; overflow:hidden; }
#map { width:100%; height:100%; background:var(--map-bg); }

/* search this area */
/* ── VIEW SWITCHER ─────────────────────────────────────────── */
#viewSwitcher {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 450;
}
#viewSwitcherBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,14,18,.85);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 0;
  padding: 8px 12px;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transition: border-color .15s;
}
#viewSwitcherBtn:hover { border-color: rgba(255,255,255,.35); }
#viewSwitcherMenu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: rgba(14,14,18,.95);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 0;
  overflow: hidden;
  z-index: 500;
  min-width: 140px;
  backdrop-filter: blur(12px);
}
#viewSwitcherMenu.open { display: block; }
.vs-opt {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.vs-opt:last-child { border-bottom: none; }
.vs-opt:hover { background: rgba(255,255,255,.06); color: var(--text); }
.vs-opt.active { color: var(--text); }
.vs-opt.active::before { content: '· '; }

.wind-legend {
  margin-top: 6px;
  background: rgba(14,14,18,.85);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  padding: 8px 10px 6px;
}
.wind-legend-bar {
  display: flex;
  height: 6px;
  gap: 1px;
}
.wind-legend-swatch {
  flex: 1;
}
.wind-legend-labels {
  display: flex;
  margin-top: 4px;
  gap: 1px;
}
.wind-legend-label {
  flex: 1;
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 0;
  text-align: center;
}
.wind-legend-unit {
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
  opacity: 0.6;
}

/* ── MAP LAYER PICKER ─────────────────────────────────────── */
/* ── Map Controls — 3 dropdowns ─────────────────────────────── */
.map-controls-bar {
  position: absolute;
  bottom: 16px;
  left: 14px;
  z-index: 500;
  display: flex;
  gap: 6px;
}
.mc-dropdown { position: relative; }
.mc-dd-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14,14,18,.85);
  border: 1px solid rgba(255,255,255,.15);
  padding: 7px 10px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  cursor: pointer;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  border-radius: 0;
}
.mc-dd-btn:hover { background: rgba(255,255,255,.06); color: var(--text); border-color: rgba(255,255,255,.3); }
.mc-dd-active { color: var(--gold); border-color: rgba(200,184,74,.4); background: rgba(200,184,74,.1); }
.mc-dd-loading { opacity: 0.7; }
.mc-dd-label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.5;
}
.mc-dd-value {
  text-transform: uppercase;
  font-weight: 400;
}
.mc-dd-chev {
  transition: transform .15s;
  opacity: 0.5;
  flex-shrink: 0;
}
.mc-dd-chev.open { transform: rotate(180deg); }
.mc-dd-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: rgba(14,14,18,.95);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  z-index: 900;
  min-width: 140px;
  overflow: hidden;
}
.mc-dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.mc-dd-opt:hover { background: rgba(255,255,255,.06); color: var(--text); }
.mc-dd-opt.active { color: var(--gold); background: rgba(200,184,74,.08); }
.mc-dd-opt.mc-dd-locked { color: rgba(255,255,255,.25); cursor: default; display: flex; align-items: center; justify-content: space-between; }
.mc-dd-opt.mc-dd-locked:hover { background: none; color: rgba(255,255,255,.25); }
.mc-pro-badge {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--gold); background: rgba(200,184,74,.15);
  padding: 2px 6px; border-radius: 2px;
}
.mc-dd-checks { padding: 4px 0; }
.mc-dd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .1s;
}
.mc-dd-check:hover { background: rgba(255,255,255,.06); color: var(--text); }
.mc-dd-check input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
/* leaflet-velocity overlay */
.velocity-overlay { position: absolute; z-index: 1; }

/* Ocean overlay legend */
.ocean-legend {
  position: absolute; bottom: 48px; right: 14px; z-index: 500;
  background: rgba(10,10,10,0.9); border: 1px solid var(--border);
  backdrop-filter: blur(8px); padding: 10px 14px; min-width: 160px;
}
.ocean-legend-title {
  font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 6px;
}
.ocean-legend-bar {
  height: 8px; width: 100%; margin-bottom: 4px;
}
.ocean-legend-chl {
  background: linear-gradient(to right, #000080, #0000ff, #00ffff, #00ff00, #ffff00, #ff8000, #ff0000);
}
.ocean-legend-cur {
  background: linear-gradient(to right, #000066, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
}
.ocean-legend-sst {
  background: linear-gradient(to right, #000080, #0000ff, #00ffff, #00ff00, #ffff00, #ff8000, #ff0000);
}
.ocean-legend-labels {
  display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace; font-size: 8px; color: var(--text-muted);
  letter-spacing: 0.3px;
}
.ocean-legend-source {
  font-family: 'Space Mono', monospace; font-size: 7px; color: var(--text-muted);
  opacity: 0.5; margin-top: 6px; letter-spacing: 0.5px;
}
.ocean-legend-loading {
  color: var(--gold); font-size: 8px; letter-spacing: 1px; margin-left: 8px;
  animation: blink 1s infinite;
}

/* CHL Region Picker */
.chl-region-picker {
  position: absolute; bottom: 56px; left: 14px;
  z-index: 600; background: rgba(10,10,10,0.92); border: 1px solid var(--border);
  backdrop-filter: blur(12px); padding: 16px; border-radius: 8px;
  min-width: 300px;
}
.chl-region-title {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; color: var(--text-muted); margin-bottom: 14px; text-align: center;
}
.chl-region-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.chl-region-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.chl-region-card:hover {
  border-color: rgba(200,184,74,.5); background: rgba(200,184,74,.06);
}
.chl-region-thumb {
  width: 100%; height: 90px; background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.03);
}
.chl-region-label {
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: var(--text); padding: 8px 10px; text-align: center;
}
.chl-region-lag {
  font-family: 'Space Mono', monospace; font-size: 8px; color: var(--text-muted);
  opacity: 0.6; text-align: center; margin-top: 12px; letter-spacing: 0.3px;
}

/* CHL back button */
.chl-back-btn {
  position: absolute; top: 14px; left: 14px; z-index: 500;
  background: rgba(10,10,10,0.85); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px); padding: 8px 14px; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-muted); border-radius: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.chl-region-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px;
  transition: color .15s;
}
.chl-region-close:hover { color: var(--text); }
.chl-back-btn:hover { border-color: rgba(200,184,74,.5); color: var(--gold); }
.ocean-zoom-hint {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 600; background: rgba(10,10,10,0.9); border: 1px solid var(--gold);
  backdrop-filter: blur(8px); padding: 10px 18px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--gold); white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
body.light .ocean-zoom-hint { background: rgba(255,255,255,0.95); }
body.light .ocean-legend { background: rgba(255,255,255,0.92); border-color: var(--border); }

/* ── OFFLINE TOOLTIP (Your Spots, one-time) ─────────────── */
.offline-tooltip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin: 0 12px 10px;
  background: rgba(180, 158, 14, 0.08);
  border: 1px solid rgba(180, 158, 14, 0.25);
  border-radius: 6px;
}
.offline-tooltip-icon {
  flex-shrink: 0; color: var(--gold);
  display: flex; align-items: center; padding-top: 1px;
}
.offline-tooltip-text {
  flex: 1; font-size: 11px; line-height: 1.4; color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.offline-tooltip-close {
  flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-muted);
  padding: 0 4px; opacity: 0.6;
}
.offline-tooltip-close:hover { opacity: 1; }

/* ── OFFLINE BANNER ───────────────────────────────────────
   Courtesy strip shown when navigator.onLine flips to false. */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px;
  background: #8a3a00;
  color: #fff;
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.offline-banner-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #ffb347;
  animation: offline-pulse 1.5s ease-in-out infinite;
}
@keyframes offline-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
body:has(.offline-banner) #app { padding-top: 34px; }

/* ── PRO BETA BANNER ──────────────────────────────────────
   Top-of-page strip promoting Pro beta access. 36px tall.
   Body gets `has-pro-banner` class to push fixed topnav + #app padding down. */
.pro-beta-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 2500;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 16px;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(12px);
}
.pbb-text {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 0.5px; color: rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pbb-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--gold); color: var(--gold);
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; padding: 5px 11px; cursor: pointer;
  text-decoration: none; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pbb-cta:hover { background: var(--gold); color: #0e0e0e; }
.pbb-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  color: rgba(255,255,255,0.35); font-size: 18px; line-height: 1;
  font-family: inherit; transition: color 0.15s;
}
.pbb-close:hover { color: rgba(255,255,255,0.85); }

/* Push the fixed topnav and #app content down when banner is visible */
body.has-pro-banner #app { padding-top: 128px; }
body.has-pro-banner .topnav { top: 56px; }

@media (max-width: 767px) {
  .pro-beta-banner { gap: 10px; padding: 0 10px; }
  .pbb-text { font-size: 9px; }
  .pbb-cta { font-size: 8px; padding: 4px 9px; letter-spacing: 1.2px; }
  /* On mobile, #app stays at padding-top:0 — the mob-header is in flow and
     gets the banner offset via its own padding-top below. */
  body.has-pro-banner #app { padding-top: 0; }
  body.has-pro-banner .mob-header {
    padding-top: calc(max(env(safe-area-inset-top), 20px) + 36px);
  }
  /* The pro banner (z-index 2500) sits above the mobile nav overlay
     (z-index 1100). Push the menu's content down so the close button
     and links clear the banner. */
  body.has-pro-banner .mob-nav-overlay {
    padding-top: calc(max(env(safe-area-inset-top), 20px) + 36px);
  }
}

body.light .pro-beta-banner { background: rgba(248,246,238,0.96); }
body.light .pbb-text { color: rgba(0,0,0,0.65); }
body.light .pbb-cta { border-color: var(--gold); color: var(--gold); }
body.light .pbb-cta:hover { background: var(--gold); color: #1a1a1a; }
body.light .pbb-close { color: rgba(0,0,0,0.4); }
body.light .pbb-close:hover { color: rgba(0,0,0,0.85); }

/* Wind model badge — small label shown at top-right when wind layer is active.
   Positioned inside .map-wrap (which sits below the topnav), so top:14px gives
   a small gap from the top of the map area. Top-right avoids the bottom map
   controls, BETA flag, and wind time scrubber. */
.wind-model-badge {
  position: absolute; top: 14px; right: 14px; z-index: 500;
  background: rgba(10,10,10,0.9); border: 1px solid var(--border);
  backdrop-filter: blur(8px); padding: 6px 10px;
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-muted);
}
body.light .wind-model-badge { background: rgba(255,255,255,0.92); border-color: var(--border); }

/* Tide station markers */
.tide-pin { pointer-events: auto; }
.tide-station-tip {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--gold) !important; background:rgba(10,10,10,.9) !important;
  border:1px solid var(--gold) !important; border-radius:0 !important;
  padding:5px 10px !important; backdrop-filter:blur(4px);
  box-shadow:none !important;
}
.tide-station-tip::before { border-top-color:var(--gold) !important; }

/* ── WIND POPUP (map click in wind mode) ──────────────────── */
.wind-popup .leaflet-popup-content-wrapper {
  background: rgba(14,14,18,.92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  padding: 0;
}
.wind-popup .leaflet-popup-content { margin: 0; }
.wind-popup .leaflet-popup-tip { display: none; }
.wind-popup .leaflet-popup-close-button { display: none; }
.wind-pop-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 180px;
}
.wind-pop-speed {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  white-space: nowrap;
}
.wind-pop-val { font-size: 18px; }
.wind-pop-unit { font-size: 9px; letter-spacing: 1px; opacity: 0.7; align-self: flex-end; margin-bottom: 2px; }
.wind-pop-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  gap: 1px;
}
.wind-pop-dir {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.wind-pop-coord {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.wind-pop-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  padding: 12px 16px;
  letter-spacing: 1px;
}
.wind-pop-clickable {
  cursor: pointer;
  transition: filter 0.15s ease;
}
@media (hover: hover) {
  .wind-pop-clickable:hover {
    background: rgba(255,255,255,0.08);
  }
  .wind-pop-clickable:hover .wind-pop-arrow {
    transform: translateX(3px);
  }
}
.wind-pop-clickable:active {
  filter: brightness(0.9);
  transform: scale(0.97);
}
.wind-pop-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* ── WIND TIME SCRUBBER ───────────────────────────────────── */
.wind-time-scrubber {
  position: absolute;
  bottom: 52px;
  left: 14px;
  z-index: 450;
  background: rgba(14,14,18,.88);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
}
.wts-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wts-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-muted);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  transition: color .15s, border-color .15s;
}
.wts-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.3); }
.wts-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.wts-btn.wts-play { font-size: 12px; padding: 3px 7px; }
.wts-btn.wts-play.active { color: var(--gold); border-color: rgba(200,184,74,.5); }
.wts-label {
  flex: 1;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
}
.wts-label.loading { color: var(--gold); opacity: 0.7; }
.wts-range-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  opacity: 0.5;
}
.wts-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.12);
  outline: none;
  border-radius: 2px;
  margin: 2px 0;
}
.wts-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid rgba(14,14,18,.9);
}
.wts-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid rgba(14,14,18,.9);
}

#searchBtn {
  position:absolute; top:14px; left:50%; transform:translateX(-50%) translateY(-6px);
  background:rgba(14,14,18,.93); border:1px solid rgba(255,255,255,.12); border-radius:0;
  padding:9px 20px; font-family:'Space Mono',monospace; font-weight:400; font-size:10px;
  letter-spacing:1px; text-transform:uppercase; color:var(--text); cursor:pointer; z-index:450;
  display:flex; align-items:center; gap:9px; backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(0,0,0,.6); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#searchBtn.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
@media (max-width: 767px) {
  #searchBtn         { left:14px; transform:translateY(-6px); }
  #searchBtn.show    { transform:translateY(0); }
}
#btnDot { width:7px; height:7px; border-radius:0; background:var(--blue); box-shadow:0 0 6px var(--blue); flex-shrink:0; animation:blink 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
#searchBtn.loading #btnDot { border:2px solid #555; border-top-color:#fff; background:transparent; width:10px; height:10px; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* map controls */
.map-ctrl-group { position:absolute; z-index:400; display:flex; flex-direction:column; gap:6px; }
.mcg-br { bottom:16px; right:14px; }
.mc {
  width:36px; height:36px; background:rgba(14,14,18,.92); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(8px); transition:background .2s;
  font-size:14px; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.mc:hover { background:var(--bg-raised); }

/* forecast strip */
.forecast {
  height:150px; flex-shrink:0; background:var(--bg-chrome); border-top:1px solid var(--border);
  display:flex; align-items:stretch; overflow-x:hidden; overflow-y:hidden; scrollbar-width:none;
}
.forecast::-webkit-scrollbar { display:none; }
.fc-label {
  padding:0 18px; font-family:'Space Mono',monospace; font-weight:700; font-size:11px;
  letter-spacing:2px; color:var(--text-muted); text-transform:uppercase;
  display:flex; align-items:center; white-space:nowrap; flex-shrink:0;
  border-right:1px solid var(--border); line-height:1.4;
}
.fc-day {
  display:flex; align-items:center; gap:10px; padding:0 16px; cursor:pointer; flex-shrink:0;
  border-right:1px solid var(--border); transition:background .15s; position:relative;
}
.fc-day:hover { background:rgba(255,255,255,.03); }
.fc-day.active { background:rgba(255,255,255,.05); }
.fc-day.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--blue); }
.fc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.fc-dayname { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:1.8px; color:var(--text-dim); text-transform:uppercase; white-space:nowrap; }
.fc-wave-col { display:flex; flex-direction:column; align-items:center; gap:3px; }
.fc-wave-ht { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.5px; color:var(--text); white-space:nowrap; }
.fc-wave-line { display:block; }
.fc-period { display:flex; align-items:center; gap:5px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-weight:800; font-size:16px; letter-spacing:.5px; color:var(--text); white-space:nowrap; }
.pc-arrow { color:var(--text-muted); flex-shrink:0; }
.fc-chev { color:var(--text-muted); flex-shrink:0; }

/* pill markers */
.bp-wrap { cursor:pointer; transition:opacity .15s; user-select:none; display:inline-block; }
.bp-wrap:hover { opacity:.8; }
.bp-outer { padding:0; background:none; border-radius:0; box-shadow:none; }
.bp-inner {
  border-radius:0; padding:5px 8px; display:flex; align-items:center; gap:6px;
  background:rgba(10,10,10,.85); border:1px solid rgba(255,255,255,.2);
  white-space:nowrap; backdrop-filter:blur(4px);
}
.bp-load .bp-inner { opacity:.5; }
.bp-stale .bp-inner { border-color:rgba(200,144,42,.4); }
.bp-stale .bp-temp { color:#c8902a; }
.bp-nodata .bp-inner { border-color:rgba(255,255,255,.1); }
.bp-nofield .bp-inner { opacity:0.25; }
.bp-nofield .bp-temp { color:rgba(255,255,255,0.4); }
.bp-nodata .bp-temp { color:rgba(255,255,255,.35); }
.bp-temp { font-family:'Space Mono',monospace; font-weight:400; font-size:11px; color:#D8E4D6; letter-spacing:.5px; line-height:1; }
.bp-icon { flex-shrink:0; display:flex; align-items:center; opacity:.6; }

/* buoy detail panel inside sidebar */
.buoy-detail {
  position:absolute; inset:0; z-index:10; background:var(--bg-chrome);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(-105%); transition:transform .28s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.buoy-detail.open { transform:translateX(0); pointer-events:auto; }
.bd-head { flex-shrink:0; padding:14px 14px 12px; border-bottom:1px solid var(--border); background:var(--bg-chrome); }
.bd-back {
  display:flex; align-items:center; gap:6px; background:none; border:none;
  color:var(--text-muted); font-family:'Space Mono',monospace; font-weight:400; font-size:10px;
  cursor:pointer; padding:0 0 10px; letter-spacing:1px; transition:color .15s; text-transform:uppercase;
}
.bd-back:hover { color:var(--text); }
.bd-title-row { display:flex; flex-direction:column; gap:4px; }
.panel-title { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:22px; font-weight:400; color:var(--text); letter-spacing:-0.02em; line-height:1.1; text-transform:none; }
.panel-sub { font-family:'Space Mono',monospace; font-size:10px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }
.loc-name-row { display:flex; align-items:center; gap:6px; width:100%; }
.loc-title-actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.loc-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-muted);
  width:32px; height:32px; cursor:pointer; transition:color 0.15s;
}
.loc-icon-btn:hover { color:var(--text); }
.loc-icon-btn.loc-icon-saved { color:var(--gold); }
.loc-icon-btn.loc-icon-saved:hover { color:#a89838; }
.loc-meta-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.spot-edit-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; width:32px; height:32px; cursor:pointer; color:var(--text-muted); flex-shrink:0; transition:color .15s; }
.spot-edit-btn:hover { color:var(--gold); }
.spot-name-input { background:none; border:none; border-bottom:1.5px solid var(--gold); color:var(--text); font-family:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit; outline:none; padding:0 0 2px; width:180px; max-width:100%; }
.spot-name-input:focus { border-bottom-color:var(--blue-l); }
.status-badge { background:transparent; color:var(--text-muted); border:1px solid var(--border); border-radius:0; padding:3px 8px; font-family:'Space Mono',monospace; font-size:10px; font-weight:400; letter-spacing:1.5px; flex-shrink:0; margin-top:4px; text-transform:uppercase; }
.status-badge.off { opacity:.5; }
.bd-body { flex:1; overflow-y:auto; padding:14px 14px 24px; scrollbar-width:thin; scrollbar-color:var(--bg-raised) transparent; }
#locBody, #mobLocBody { padding: 0; }
.bd-body::-webkit-scrollbar { width:3px; }
.bd-body::-webkit-scrollbar-thumb { background:var(--bg-raised); border-radius:3px; }

/* data cards (desktop sizing) */
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-bottom:12px; }
.hero-card { background:var(--bg-surface); border-radius:0; padding:11px 12px; border:1px solid var(--border); min-width:0; }
.hc-label { font-size:10px; font-weight:600; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.hc-val { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:30px; color:var(--text); line-height:1; }
.hc-unit { font-size:12px; color:var(--text-muted); }
.hc-sub { font-size:10px; color:var(--text-dim); margin-top:4px; }
.sec-title { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin:14px 0 8px; }
.data-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; }
.dc { background:var(--bg-surface); border-radius:0; padding:9px 10px; border:1px solid var(--border); min-width:0; }
.dc-lbl { font-size:10px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; font-weight:600; }
.dc-val { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:18px; color:var(--text); letter-spacing:.5px; margin:2px 0 1px; }
.dc-unit { font-size:10px; color:var(--text-muted); }
.dc-note { font-size:10px; color:var(--text-dim); }
/* ── TIDE EVENT LIST ──────────────────────────────── */
.tide-event-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding-bottom: 6px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
  gap: 2px;
}
.tide-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tide-event-row:last-child { border-bottom: none; }
.tide-event-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  width: 36px;
}
.cur-event-dir {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.cur-event-dir .wx-wind-arrow {
  width: 18px;
  height: 18px;
}
.tide-event-label.high { color: var(--gold); }
.tide-event-label.low  { color: var(--text-muted); }
.tide-event-ft {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
  flex: 1;
}
.tide-event-time {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--text);
  background: var(--bg-raised);
  border-radius: 0;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* ── LOC DATE DROPDOWN ────────────────────────────────── */
.loc-date-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.loc-date-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  color: var(--text-muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.loc-date-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.25);
}
.loc-date-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  z-index: 200;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.loc-date-menu.open { display: block; }
.loc-date-opt {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  padding: 12px 14px;
  min-height: 44px; box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.loc-date-opt:last-child { border-bottom: none; }
.loc-date-opt:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.loc-date-opt.active { color: var(--text); font-weight: 700; }

/* ── NEARBY BUOYS SIDEBAR ─────────────────────────────── */
.nearby-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  min-height: 0;
}
.sidebar-tabs {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-tab {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 0;
  margin-right: 20px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sidebar-tab.active { color: var(--text); border-bottom-color: var(--gold); }
.sidebar-tab:hover:not(.active) { color: var(--text-dim); }
.nearby-count {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}
.tab-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-raised) transparent;
}
.nearby-list { display: flex; flex-direction: column; }
#panelSpots { padding: 0; }
.spots-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px 20px 10% 20px;
  gap: 16px;
}
.spots-empty-icon {
  width: 36px;
  height: 36px;
  opacity: 0.25;
}
.spots-empty-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.3px;
}
.spots-empty-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
.spots-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.spots-auth-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}
.spots-auth-btn:hover { opacity: 0.85; }
.spots-auth-btn:active { opacity: 0.7; }
.spots-auth-btn.primary { background: var(--gold); color: #1c1a00; }
.spots-auth-btn.secondary { background: var(--bg-raised); color: var(--text); }

/* ── SPOT CARDS ───────────────────────────────────────────────── */
/* spots grid */
/* ─── SPOTS HEADER + FILTER DROPDOWN ─── */
.spots-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 1px solid var(--border);
}
.spots-header-title {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--text);
  padding: 14px 0; margin-right: auto;
}
.spots-filter-wrap { position: relative; }
.spots-filter-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 0; padding: 8px 14px;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); cursor: pointer; transition: background .15s, border-color .15s;
}
.spots-filter-btn:hover { background: var(--bg-raised); border-color: rgba(255,255,255,0.25); }
.spots-filter-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 0; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  min-width: 120px;
}
.spots-filter-opt {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 14px; min-height: 44px; box-sizing: border-box;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s;
}
.spots-filter-opt:last-child { border-bottom: none; }
.spots-filter-opt:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.spots-filter-opt.active { color: var(--text); font-weight: 700; }
/* ─── SPOT SUMMARY ROW (flat, matches .nb-row) ─── */
.sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none; transition: background .12s;
}
.sp-row:hover { background: var(--bg-raised); }
.sp-info { flex: 1; min-width: 0; }
.sp-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 300; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-freshness {
  display: inline-block;
  margin-left: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.4px; text-transform: lowercase;
  color: var(--text-muted); opacity: 0.55;
  vertical-align: 1px;
}
.sp-data {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.sp-wind {
  font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.sp-compass { font-weight: 400; opacity: 0.7; }
.sp-gust { font-weight: 400; opacity: 0.5; }
.sp-tide {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap;
}
.sp-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sp-action-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 6px; display: flex; align-items: center;
  transition: color .15s; flex-shrink: 0;
}
.sp-action-btn:hover { color: var(--text); }

/* Pin button — left side of spot row */
.sp-pin-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; display: flex; align-items: center; flex-shrink: 0;
  transition: color .15s; opacity: 0.4;
}
.sp-pin-btn:hover { opacity: 0.8; }
.sp-pin-btn.pinned { color: var(--gold); opacity: 1; }
.sp-action-del:hover { color: #e05a5a; }
.sp-chevron { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
/* Shimmer loading placeholder */
.ss-shimmer {
  display: inline-block; width: 36px; height: 12px;
  background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-raised-2) 50%, var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: ss-shimmer 1.5s infinite;
}
@keyframes ss-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ─── SPOTS GRID / LIST ─── */
.spots-grid { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 16px; }
.spots-list { display: flex; flex-direction: column; }
.spot-card {
  display: flex; flex-direction: column; position: relative;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 0; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.spot-card:hover { border-color: var(--border-hi); background: rgba(255,255,255,.02); }
.spot-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 8px;
}
.spot-card-main { flex: 1; min-width: 0; }
.spot-card-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text); text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spot-card-score {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 20px; color: var(--text);
  letter-spacing: .5px; line-height: 1.2;
}
.spot-card-tag {
  display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px;
  font-weight: 700; letter-spacing: 1px; padding: 2px 7px;
  border-radius: 0; margin-top: 4px; text-transform: uppercase;
}
.spot-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.spot-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.spot-card-del {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 6px; border-radius: 0; display: flex; align-items: center;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.spot-card-del:hover { color: #e05a5a; background: rgba(224,90,90,0.1); }
.spot-card-gear {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 6px; border-radius: 0; display: flex; align-items: center;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.spot-card-gear:hover { color: #c8b84a; background: rgba(200,184,74,0.1); }
/* ─── SPOT MATCH BADGE ─── */
.spot-match-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.sp-info .spot-match-badge { margin-top: 2px; }
.spot-card .spot-match-badge { margin-top: 4px; }
.spot-match-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.spot-match-all_ideal .spot-match-dot { background: #21B600; }
.spot-match-all_ideal { color: #21B600; }
.spot-match-mostly_ideal .spot-match-dot { background: #4A90D9; }
.spot-match-mostly_ideal { color: #4A90D9; }
.spot-match-some_ideal .spot-match-dot { background: #D9A825; }
.spot-match-some_ideal { color: #D9A825; }
.spot-match-not_ideal .spot-match-dot { background: #666; }
.spot-match-not_ideal { color: #666; }
/* Colored left border on spot cards/rows with match data */
.spot-card.match-all_ideal, .sp-row.match-all_ideal { border-left: 3px solid #21B600; }
.spot-card.match-mostly_ideal, .sp-row.match-mostly_ideal { border-left: 3px solid #4A90D9; }
.spot-card.match-some_ideal, .sp-row.match-some_ideal { border-left: 3px solid #D9A825; }
.spot-card.match-not_ideal, .sp-row.match-not_ideal { border-left: 3px solid #666; }
/* Match banner on location detail panel */
.loc-match-banner {
  margin-top: 10px; padding: 0; border: 1px solid rgba(255,255,255,.08);
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s;
}
.loc-match-banner:hover { border-color: rgba(255,255,255,.15); }
.loc-match-top {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
}
.loc-match-banner .spot-match-dot { width: 10px; height: 10px; }
.loc-match-banner-label { flex: 1; }
.loc-match-banner-detail {
  font-weight: 400; color: var(--text-muted); letter-spacing: 1px;
}
.loc-match-details {
  border-top: 1px solid rgba(255,255,255,.06); padding: 4px 12px 8px;
}
.loc-match-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
}
.loc-match-detail-label {
  font-size: 10px; font-weight: 400; letter-spacing: 1px; color: var(--text-muted);
}
.loc-match-detail-status {
  font-size: 12px; font-weight: 700;
}
.loc-match-detail-status.met { color: #21B600; }
.loc-match-detail-status.unmet { color: #666; }
/* ─── FORECAST DOTS (compact 7-day on spot cards) ─── */
.forecast-dots {
  display: flex; gap: 3px; align-items: center; margin-top: 3px;
}
.forecast-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.forecast-dot--all_ideal { background: #21B600; }
.forecast-dot--mostly_ideal { background: #4A90D9; }
.forecast-dot--some_ideal { background: #D9A825; }
.forecast-dot--not_ideal { background: #444; }
.forecast-dots-label {
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; margin-left: 4px; white-space: nowrap;
}
.forecast-dots-label--all_ideal { color: #21B600; }
.forecast-dots-label--mostly_ideal { color: #4A90D9; }
.forecast-dots-label--some_ideal { color: #D9A825; }
.forecast-dots-label--not_ideal { color: var(--text-muted); }
.forecast-dots--loading {
  width: 54px; height: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: ss-shimmer 1.5s infinite;
}
/* ─── FORECAST DETAIL (7-day in location panel) ─── */
.forecast-detail {
  padding: 8px 0 0;
}
.forecast-detail .tc-section-header {
  padding: 0 12px;
}
.forecast-detail-grid {
  padding: 0 12px;
}
.forecast-detail-loading {
  padding: 8px 12px;
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: var(--text-muted); letter-spacing: 1px;
}
.forecast-day-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.forecast-day-row:last-child { border-bottom: none; }
.forecast-day-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-muted);
  width: 44px; flex-shrink: 0; text-transform: uppercase;
}
.forecast-day-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.forecast-day-level {
  font-family: 'Space Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  width: 52px; flex-shrink: 0;
}
.forecast-day-conds {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.forecast-cond {
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.5px;
}
.forecast-cond.met { color: rgba(255,255,255,0.5); }
.forecast-cond.unmet { color: #444; text-decoration: line-through; }
/* ─── SPOT 7-DAY CARD (spots list 7-day filter) ─── */
.s7d-card {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 12px 16px; cursor: pointer;
  transition: background .12s;
}
.s7d-card:hover { background: var(--bg-raised); }
.s7d-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.s7d-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 300; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s7d-chevron { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.s7d-no-config {
  font-family: 'Space Mono', monospace; font-size: 9px;
  color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase;
}
.s7d-loading {
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: var(--text-muted); letter-spacing: 1px; padding: 4px 0;
}
.s7d-grid { display: flex; flex-direction: column; }
.s7d-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.s7d-row:last-child { border-bottom: none; }
.s7d-day {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-muted);
  width: 44px; flex-shrink: 0; text-transform: uppercase;
}
.s7d-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.s7d-level {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; width: 52px; flex-shrink: 0;
}
.s7d-conds {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.s7d-cond {
  font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.5px;
}
.s7d-cond.met { color: rgba(255,255,255,0.5); }
.s7d-cond.unmet { color: #444; text-decoration: line-through; }
/* ─── FORECAST EMPTY STATE ─── */
.forecast-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 10%;
  gap: 16px;
}
.forecast-empty-icon {
  width: 36px;
  height: 36px;
  opacity: 0.25;
}
.forecast-empty-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.3px;
}
.forecast-empty-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
.forecast-empty-actions {
  margin-top: 4px;
  width: 100%;
}
.forecast-empty-btn {
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: #c8b84a;
  color: #000;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.forecast-empty-btn:hover { background: #d9c95b; }
/* ─── SPOT ALERT SETTINGS PANEL ─── */
.sa-panel {
  position: absolute; inset: 0; z-index: 11; background: var(--bg-chrome);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-105%); transition: transform .28s cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.sa-panel.open { transform: translateX(0); pointer-events: auto; }
.sa-head {
  flex-shrink: 0; padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg-chrome);
}
.sa-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sa-head-actions { display: flex; align-items: center; gap: 8px; }
.sa-clear-btn {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: none; color: var(--text-muted); border: 1px solid var(--border);
  padding: 8px 14px; cursor: pointer; transition: color .15s, border-color .15s;
}
.sa-clear-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
.sa-save-btn {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: #c8b84a; color: #1c1a00; border: none; padding: 8px 18px;
  cursor: pointer; transition: opacity .15s;
}
.sa-save-btn:disabled { opacity: 0.5; cursor: default; }
.sa-save-btn:hover:not(:disabled) { opacity: 0.85; }
.sa-body {
  flex: 1; overflow-y: auto; padding: 0 14px 24px;
  -webkit-overflow-scrolling: touch;
}
.sa-section { border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 4px; }
.sa-section:last-child { border-bottom: none; }
.sa-pills {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px;
}
.sa-pills-moon { gap: 6px; }
.sa-pill {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  color: var(--text-muted); padding: 6px 14px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sa-pill.active {
  background: #c8b84a; color: #1c1a00; border-color: #c8b84a;
}
.sa-pill-icon { font-size: 14px; margin-right: 4px; }
.sa-pill-label { vertical-align: middle; }
.sa-range { padding: 4px 0 14px; }
.sa-range-labels {
  display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: var(--text-muted); letter-spacing: 1px; margin-bottom: 8px;
}
.sa-range-track {
  position: relative; height: 28px;
}
.sa-range-track input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 28px;
  -webkit-appearance: none; appearance: none; background: transparent;
  pointer-events: none; margin: 0;
}
.sa-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; background: #c8b84a; border: none;
  cursor: pointer; pointer-events: auto; border-radius: 0;
}
.sa-range-track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; background: #c8b84a; border: none;
  cursor: pointer; pointer-events: auto; border-radius: 0;
}
.sa-range-track input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(255,255,255,.1); border-radius: 0;
}
.sa-range-track input[type="range"]::-moz-range-track {
  height: 4px; background: rgba(255,255,255,.1); border-radius: 0;
}
.sa-stars {
  display: flex; gap: 6px; padding: 4px 0 14px;
}
.sa-star {
  font-size: 24px; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.15); transition: color .15s; padding: 2px;
}
.sa-star.active { color: #c8b84a; }
/* ─── WIND CHART (unified) ─── */
.wc-wrap { padding: 0 14px 10px; }
.wc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.wc-label {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
}
.wc-unit { color: var(--text-dim); }
.wc-range-wrap { position: relative; }
/* Chart dropdown pills — match the mobile back-button glass aesthetic:
   pill-shaped, dark translucent with blur, thin translucent border, soft
   shadow, light Space Mono label. Applies to wind/wave model + range
   pills and the tide gauge picker. */
.wc-range-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.55); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.wc-range-btn:hover {
  background: rgba(28,28,28,0.9);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
.wc-range-menu {
  z-index: 9999;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; overflow: hidden;
  min-width: 120px;
  padding: 4px 0;
}
.wc-range-opt {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 10px 14px; min-height: 40px; box-sizing: border-box;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 1.5px; color: rgba(255,255,255,0.55); cursor: pointer;
  transition: background 0.1s, color 0.1s; white-space: nowrap;
}
.wc-range-opt:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95); }
.wc-range-opt.active { color: #fff; font-weight: 700; }

/* Tide station picker — re-uses .wc-range-btn sizing so it visually matches
   the wind/wave model pill, and renders menu rows with name + distance.
   Smaller vertical padding so the pill doesn't stretch the .wx-block-hdr
   row and push the "X.Y ft · Rising" data line down. */
.tide-picker-btn { max-width: 180px; padding: 4px 10px; }
.tide-picker-row-right {
  display: flex; justify-content: flex-end; padding: 4px 0 10px;
}
/* Tide chart wrapper — anchors the picker overlay to the upper-right of
   the .tide-card inside. .tide-card has `margin: 14px 0 6px` so top:22px
   aligns the pill vertically just inside the card's top edge. */
.tide-chart-wrap { position: relative; }
.tide-chart-picker-overlay {
  position: absolute; top: 22px; right: 12px; z-index: 3;
}
.tide-picker-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tide-picker-menu {
  z-index: 9999;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; overflow: hidden;
  min-width: 280px; max-width: 340px;
  max-height: 320px; overflow-y: auto;
  padding: 4px 0;
}
.tide-picker-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none;
  padding: 10px 14px; min-height: 40px; box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.6); cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.tide-picker-opt:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95); }
.tide-picker-opt.active { color: #fff; font-weight: 700; }
.tide-picker-opt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tide-picker-opt-dist {
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: rgba(255,255,255,0.4); letter-spacing: 1px;
}
.tide-picker-reset {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.4); justify-content: center;
}
.tide-picker-empty {
  padding: 14px; font-size: 12px; color: rgba(255,255,255,0.4); text-align: center;
}

/* Current wind info label */
.wc-now-info {
  display: flex; align-items: baseline; gap: 3px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size: 11px; color: var(--text-muted); line-height: 1; white-space: nowrap;
}
.wc-now-val { font-size: 14px; font-weight: 400; }
.wc-now-unit { font-size: 14px; font-weight: 400; color: var(--text); margin-right: 4px; }
.wc-now-dir { font-size: 14px; font-weight: 400; color: var(--text); margin-right: 2px; }
.wc-now-gust { font-size: 14px; font-weight: 400; color: var(--text); margin-left: 6px; }
.wc-now-time { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.wc-time-label {
  display: none; position: absolute; top: 2px; z-index: 3; pointer-events: none;
  transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  color: rgba(255,255,255,0.6); white-space: nowrap;
}
.wc-scroll {
  overflow-x: auto; overflow-y: hidden; border-radius: 0;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.wc-scroll::-webkit-scrollbar { height: 4px; }
.wc-scroll::-webkit-scrollbar-track { background: transparent; }
.wc-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.wc-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.wc-bars { position: relative; }
.wc-bar-col {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  position: relative;
}
.wc-bar-fill {
  opacity: 0.6;
  min-height: 2px;
  transition: opacity 0.1s;
}
.wc-bar-gust {
  opacity: 0.2;
  min-height: 1px;
}
.wc-bar-col:hover .wc-bar-fill { opacity: 1; }
.wc-bar-col:hover .wc-bar-gust { opacity: 0.4; }
.wc-bar--now .wc-bar-fill { opacity: 1; }
.wc-arrow-cell {
  display: flex; align-items: center; justify-content: center;
}
.wc-day-cell {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wc-hover-line {
  display: none; position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.5); pointer-events: none; z-index: 2;
}
.wc-loading {
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--text-dim);
}
/* ─── WAVE CHART ─── */
.wv-wrap { padding: 0 14px 10px; }
.wv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.wv-label {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
}
.wv-now-info {
  display: flex; align-items: baseline; gap: 3px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size: 11px; color: var(--text-muted); line-height: 1; white-space: nowrap;
}
.wv-now-val { font-size: 14px; font-weight: 400; }
.wv-now-unit { font-size: 14px; font-weight: 400; color: var(--text); margin-right: 4px; }
.wv-now-per { font-size: 14px; font-weight: 400; color: var(--text); }
.wv-now-dir { font-size: 14px; font-weight: 400; color: var(--text); margin-left: 2px; }
.wv-now-swell { font-size: 14px; font-weight: 400; color: var(--text); margin-left: 6px; }
.wv-now-time { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.wv-time-label {
  display: none; position: absolute; top: 2px; z-index: 3; pointer-events: none;
  transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  color: rgba(255,255,255,0.6); white-space: nowrap;
}
.wv-scroll {
  overflow-x: auto; overflow-y: hidden; border-radius: 0;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.wv-scroll::-webkit-scrollbar { height: 4px; }
.wv-scroll::-webkit-scrollbar-track { background: transparent; }
.wv-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.wv-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.wv-bars { position: relative; }
.wv-bar-col {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  position: relative;
}
.wv-bar-fill {
  opacity: 0.6;
  min-height: 2px;
  transition: opacity 0.1s;
}
.wv-bar-col:hover .wv-bar-fill { opacity: 1; }
.wv-bar--now .wv-bar-fill { opacity: 1; }
.wv-swell-cell {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wv-swell-info {
  font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 400;
  letter-spacing: 0.5px; color: rgba(255,255,255,0.3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.wv-day-cell {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wv-hover-line {
  display: none; position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.5); pointer-events: none; z-index: 2;
}
.wv-loading {
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--text-dim);
}
/* Save Spot button in location detail panels */
/* Logged-in, no spots empty state */
.spots-logged-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; padding: 32px 20px 10% 20px; gap: 10px; text-align: center;
}
.spots-logged-empty-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
.spots-logged-empty-body { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.spots-loading {
  display: flex; align-items: center; justify-content: center;
  flex: 1; padding: 32px 20px; color: var(--text-muted);
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
/* Toast for save/delete errors */
.spots-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #e05a5a; color: #fff; padding: 10px 18px; border-radius: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .3px;
  z-index: 2000; pointer-events: none; opacity: 0; white-space: nowrap;
  transition: opacity .2s, transform .2s;
}
.spots-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.nb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
}
.nb-row:hover { background: var(--bg-raised); }
.nb-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-id {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.nb-signal {
  display: inline-block;
  width: 5px; height: 5px;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
  position: relative; top: -1px;
}
.nb-temp {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  display: flex; align-items: center;
  color: var(--text);
  flex-shrink: 0;
}
.nb-dist {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  text-align: right;
}
.nb-chevron {
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── NEARBY STATIONS (buoy detail panel) ─────────────── */
.nearby-stations {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.nearby-stations-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0 8px;
}
.nearby-station-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: color 0.1s;
  text-decoration: none;
  color: inherit;
}
.nearby-station-link:hover { color: var(--text); }
.nearby-station-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nearby-station-id {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: .6;
}
.nearby-station-dist {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.nearby-station-chevron {
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
  opacity: .4;
}

/* ── DETAIL TABS (desktop + mobile) ──────────────────── */
.tab-section-sentinel {
  height: 1px; margin: 0; visibility: hidden; pointer-events: none;
}
.tab-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0; margin: 0 0 8px;
  position: sticky; top: 34px; z-index: 90;
  transition: padding 0.18s ease, box-shadow 0.18s ease, margin 0.18s ease, background 0.18s ease;
}
.tab-section-header[data-stuck="true"] {
  padding: 20px 0 10px;
  margin-top: -10px;
  margin-bottom: 4px;
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
body.light .tab-section-header[data-stuck="true"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tab-section-left {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tab-section-title { color: var(--text-muted); }
.tab-section-subtitle { opacity: 0.5; }
.tab-section-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.det-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-chrome);
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.det-tabs::-webkit-scrollbar { display: none; }
.det-tab {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 12px 4px;
  min-height: 44px; box-sizing: border-box;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.det-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.det-tab-panel { display: none; padding: 12px 14px 24px; }
.det-tab-panel.active { display: block; }

.wx-list { display: flex; flex-direction: column; gap: 10px; }
.wx-row {
  display: flex; align-items: center;
  background: var(--bg-surface); border-radius: 0;
  padding: 14px 16px; gap: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.wx-day {
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text); width: 52px; flex-shrink: 0;
}
.wx-hour {
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--text-muted); width: 68px; flex-shrink: 0;
}
.wx-temp-single {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 20px; color: var(--text); flex: 1;
}
.wx-temps {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; gap: 1px;
}
.wx-hi {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 22px;
  color: var(--text); line-height: 1;
}
.wx-lo {
  font-family: 'Space Mono', monospace; font-size: 11px;
  color: var(--text-muted); font-weight: 600;
}
.wx-wind {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.wx-wind-arrow {
  width: 24px; height: 24px; border-radius: 0;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wx-wind-spd {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 700;
  font-size: 13px; color: var(--text); white-space: nowrap;
}
.wx-wind-unit {
  font-size: 10px; color: var(--text-muted); font-weight: 600;
  letter-spacing: 0.5px;
}
.wx-icon {
  font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase;
  flex-shrink: 0; width: 52px; text-align: center;
}
.wx-chevron {
  margin-left: auto; color: var(--text-muted); font-size: 16px; flex-shrink: 0;
  width: 20px; text-align: center;
}

/* ── SOLUNAR ───────────────────────────────────────── */
.sol-rating-block {
  background: var(--bg-surface);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.sol-rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sol-rating-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.sol-rating-value {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}
.sol-rating-bar {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.sol-star {
  font-size: 16px;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  transition: color 0.2s;
}
.sol-star.filled {
  text-shadow: 0 0 8px currentColor;
}
.solunar-section { }
.solunar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0 16px;
  margin: 14px 0 6px;
}
.solunar-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0;
  padding: 0;
}
.solunar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.solunar-row:last-child { border-bottom: none; }
.solunar-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.solunar-value {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  background: none;
  border-radius: 0;
  padding: 0;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.solunar-value.major { color: var(--gold); }
.solunar-loading {
  color: var(--text-muted);
  font-size: 10px;
  font-family: 'Space Mono', monospace;
  padding: 10px 0;
}

/* ── LOCATION DETAIL ──────────────────────────────── */
.loc-loading {
  display: flex;
  flex-direction: column;
}
.loc-buoy-slot {
  color: var(--text-muted);
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  padding: 8px 0;
}

/* ── COORDINATE TOOLTIP ───────────────────────────── */
.coord-popup .leaflet-popup-content-wrapper {
  background: var(--gold);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  border: none;
}
.coord-popup .leaflet-popup-tip-container { display: none; }
.coord-popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
}
.coord-popup .leaflet-popup-close-button { display: none; }
.coord-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 10px 12px 18px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.coord-inner:hover {
  background: rgba(255,255,255,0.15);
  border-radius: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.coord-inner:hover .coord-arrow {
  transform: translateX(3px);
}
.coord-arrow {
  transition: transform 0.15s ease;
}
.coord-inner:active {
  background: rgba(255,255,255,0.08);
  transform: scale(0.97);
}
.coord-text {
  flex: 1;
}
.coord-line {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  color: #1a1a0a;
  line-height: 1.4;
  letter-spacing: 1px;
}
.coord-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a0a;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 4px;
}

.coord-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #aa9911;
  border: 3px solid #000000;
  box-shadow: 0 0 0 2px #aa9911, 0 2px 8px rgba(0,0,0,0.6);
}

/* ── CURRENT CONDITIONS CARDS ─────────────────────── */
.cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 12px;
}
.cc-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.cc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 1px;
  border: 1px solid var(--border);
}

/* ─── BASE CARD ─── */
.cc-card {
  border-radius: 0;
  padding: 14px 14px 16px;
  border: none;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}
.cc-card--gold { background: var(--gold); }
.cc-card--dark { background: var(--bg-raised); }

/* ─── LABEL top-left ─── */
.cc-card-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-align: left;
  flex-shrink: 0;
}
.cc-card--gold .cc-card-lbl { color: rgba(0,0,0,0.45); }

/* ─── BIG NUMBER simple cards (water temp, period, pressure) ─── */
.cc-card-val {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
}
.cc-card-big {
  font-family: 'Space Mono', monospace;
  font-size: 34px;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  text-align: left;
}
.cc-card--gold .cc-card-big { color: #0e0e0e; }
.cc-unit {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.5;
}
.cc-card-sub {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  text-align: left;
}
.cc-no-data {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  text-align: left;
  margin-top: auto;
}
.cc-card--gold .cc-no-data { color: rgba(0,0,0,0.2); }

/* ─── INFO TOOLTIP (bottom-right of card) ─── */
.cc-info {
  position: absolute;
  bottom: 8px;
  right: 10px;
  z-index: 4;
}
.cc-info-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  transition: color .15s, border-color .15s;
}
.cc-info-btn:hover,
.cc-info-btn:focus { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.3); }
.cc-info-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: 200px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 10;
}
.cc-info:hover .cc-info-tip,
.cc-info:focus-within .cc-info-tip { display: block; }

/* ─── HEIGHT CARD ───
   label top, wave SVG fills center (absolute), number at bottom (z-index above wave) */
.cc-wave-svg {
  position: absolute;
  /* position wave so its top is below the label and its bottom is above the number */
  top: 28px;
  bottom: 34px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
}
.cc-wave-svg svg { width: 100%; height: 100%; }
.cc-height-num {
  font-family: 'Space Mono', monospace;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: #0e0e0e;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

/* ─── DIRECTION CARDS: swell + wind ───
   label top | then row: [compass-stack] [big number+units]
   align-items:flex-end so circle+label stack aligns with number bottom */
.cc-dir-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.cc-dir-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-bottom: 2px;
  position: absolute;
  top: 14px;
  right: 14px;
}
.cc-dir-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  line-height: 1;
}
.cc-card--gold .cc-dir-lbl { color: rgba(0,0,0,0.4); }
.cc-dir-num {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}
.cc-card--gold .cc-dir-num { color: #0e0e0e; }
.cc-dir-num .u {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  line-height: 1;
  padding-bottom: 4px;
  margin: 0 1px;
  opacity: 0.5;
}
.cc-card--gold .cc-dir-num .u { color: rgba(0,0,0,0.45); }

/* ── ONBOARDING ───────────────────────────────────── */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.onboard-card {
  background: var(--bg-chrome); border: 1px solid var(--border);
  max-width: 380px; width: 100%; padding: 28px 24px;
}
.onboard-title {
  font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; color: var(--gold); margin-bottom: 20px;
}
.onboard-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.onboard-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text); line-height: 1.5;
}
.onboard-icon { color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.onboard-btn {
  background: var(--gold); border: none; color: #0e0e0e;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; padding: 10px 24px; cursor: pointer; width: 100%;
}
.onboard-btn:hover { opacity: 0.9; }
.map-hint {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 600; background: rgba(10,10,10,0.9); border: 1px solid var(--gold);
  backdrop-filter: blur(8px); padding: 10px 18px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--gold); white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  animation: hintFadeIn 0.4s ease-out;
}
@keyframes hintFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
body.light .onboard-card { background: var(--bg-chrome); border-color: var(--border); }
body.light .onboard-item { color: var(--text); }
body.light .onboard-btn { background: var(--gold-bg); color: #1a1a1a; }
body.light .map-hint { background: rgba(255,255,255,0.95); border-color: var(--gold); color: var(--gold); }

/* ── 7-DAY TIDE SUMMARY ──────────────────────────── */
.tide-week-summary {
  background: var(--bg-surface); border: 1px solid var(--border);
  margin: 0 0 6px; padding: 0;
}
.tw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s; cursor: pointer;
}
.tw-row:last-child { border-bottom: none; }
.tw-row:hover { background: var(--bg-raised); }
.tw-today .tw-day-name { color: var(--gold); }
.tw-day {
  width: 52px; flex-shrink: 0;
}
.tw-day-name {
  display: block; font-family: 'Space Mono', monospace; font-size: 11px;
  font-weight: 700; color: var(--text); letter-spacing: 0.5px; line-height: 1.2;
}
.tw-day-date {
  display: block; font-family: 'Space Mono', monospace; font-size: 8px;
  color: var(--text-muted); letter-spacing: 0.5px; margin-top: 2px;
}
.tw-times {
  flex: 1; display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0;
}
.tw-time {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.3px;
}
.tw-high { color: var(--gold); font-weight: 700; }
.tw-low { color: var(--text-muted); }
.tw-range {
  width: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  flex-direction: column;
}
.tw-range-bar {
  height: 3px; background: var(--gold); opacity: 0.4; min-width: 2px;
  width: 100%;
}
.tw-range-ft {
  font-family: 'Space Mono', monospace; font-size: 8px; color: var(--text-muted);
  white-space: nowrap; letter-spacing: 0.5px;
}

/* Light mode */
body.light .tide-week-summary { background: var(--bg-surface); border-color: var(--border); }
body.light .tw-row { border-bottom-color: rgba(0,0,0,0.04); }
body.light .tw-row:hover { background: var(--bg-raised); }
body.light .tw-today .tw-day-name { color: var(--gold); }
body.light .tw-day-name { color: var(--text); }
body.light .tw-high { color: var(--gold); }

/* ── LOCATION HEADER ──────────────────────────────── */
.loc-header-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 14px 0;
}
.loc-header-left { flex: 1; min-width: 0; }
.loc-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── SAVE SPOT BAR ────────────────────────────────── */
.save-spot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.save-spot-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--gold); color: var(--gold);
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; padding: 8px 16px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.save-spot-btn:hover { background: var(--gold); color: #0e0e0e; }
.save-spot-input {
  flex: 1; background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text); font-family: 'Space Mono', monospace; font-size: 11px;
  padding: 8px 10px; outline: none; min-width: 0;
}
.save-spot-input:focus { border-color: var(--gold); }
.save-spot-confirm {
  background: var(--gold); border: none; color: #0e0e0e;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; padding: 8px 14px; cursor: pointer; flex-shrink: 0;
}
.save-spot-cancel {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; padding: 4px; flex-shrink: 0;
}
.save-spot-bar.saved { color: var(--gold); }
.save-spot-saved-label {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--gold);
}
.save-spot-remove {
  margin-left: auto; background: none; border: none;
  font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: 1px; color: var(--text-muted); cursor: pointer;
  transition: color 0.15s;
}
.save-spot-remove:hover { color: #e05a5a; }
body.light .save-spot-btn { border-color: var(--gold); color: var(--gold); }
body.light .save-spot-btn:hover { background: var(--gold-bg); color: #1a1a1a; }
body.light .save-spot-input { background: var(--bg-surface); border-color: var(--border); color: var(--text); }
body.light .save-spot-confirm { background: var(--gold-bg); color: #1a1a1a; }

/* ── CHANGELOG PAGE ───────────────────────────────── */
.changelog-page { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:40px 20px; background:var(--bg); }
.changelog-inner { max-width:600px; margin:0 auto; }
.changelog-title { font-family:'Space Mono',monospace; font-size:14px; font-weight:700; letter-spacing:3px; color:var(--text); margin:0 0 6px; }
.changelog-subtitle { font-family:'Space Mono',monospace; font-size:10px; color:var(--text-muted); letter-spacing:1px; margin:0 0 32px; }
.changelog-release { margin-bottom:36px; }
.changelog-date { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:2px; color:var(--gold); margin-bottom:16px; text-transform:uppercase; }
.changelog-group { margin-bottom:16px; }
.changelog-group-header { font-family:'Space Mono',monospace; font-size:9px; font-weight:700; letter-spacing:1.5px; border:1px solid; display:inline-block; padding:2px 8px; margin-bottom:8px; }
.changelog-list { list-style:none; padding:0; margin:0; }
.changelog-list-item { font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-muted); line-height:1.6; padding:4px 0 4px 14px; position:relative; }
.changelog-list-item::before { content:''; position:absolute; left:0; top:12px; width:4px; height:4px; background:var(--border-hi); border-radius:50%; }
.changelog-desc { margin:4px 0 0; font-size:12px; color:var(--text-dim); line-height:1.6; }

/* ── FAQ PAGE ────────────────────────────────────── */
.faq-page { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:40px 20px; background:var(--bg); }
.faq-inner { max-width:680px; margin:0 auto; }
.faq-title { font-family:'Space Mono',monospace; font-size:14px; font-weight:700; letter-spacing:3px; color:var(--text); margin:0 0 6px; }
.faq-subtitle { font-family:'Space Mono',monospace; font-size:10px; color:var(--text-muted); letter-spacing:1px; margin:0 0 32px; }
.faq-section { margin-bottom:32px; }
.faq-section-label { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:2px; color:var(--gold); margin-bottom:12px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-of-type { border-top:1px solid var(--border); }
.faq-q {
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  background:none; border:none; padding:14px 0; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:var(--text);
  text-align:left; line-height:1.4;
  transition:color 0.15s;
}
.faq-q:hover { color:var(--gold); }
.faq-q-text { flex:1; min-width:0; }
.faq-q-icon {
  flex-shrink:0; font-family:'Space Mono',monospace; font-size:18px; font-weight:400;
  color:var(--text-muted); line-height:1; margin-top:1px;
}
.faq-item.open .faq-q-icon { color:var(--gold); }
.faq-a {
  font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-muted);
  line-height:1.65; padding:0 0 16px; max-width:600px;
}

/* Nav "new" indicator dot */
.nav-new-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#21B600; margin-left:6px; vertical-align:middle; }
.nav-pro-badge { font-size:8px; font-weight:700; letter-spacing:1.5px; color:var(--gold); background:rgba(200,184,74,.15); padding:2px 6px; border-radius:2px; margin-left:8px; vertical-align:middle; }

/* ── TIDE CARD ─────────────────────────────────────── */
.tide-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0 16px 0;
  text-align: left;
  margin: 14px 0 6px;
  position: relative;
  overflow: visible;
}
.tide-card-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 6px;
}
.tide-station-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-align: left;
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 4px;
}
.tide-chart-area {
  position: relative;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -70px;
  height: 200px;
  overflow: visible;
  z-index: 0;
}
.tide-wave-chart {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.tide-wave-bars {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-top: 70px;
  box-sizing: border-box;
  gap: 1px;
  overflow: visible;
}
.tide-bar {
  flex: 1;
  background: #8a7a2a;
  opacity: 0.7;
  min-height: 2px;
  position: relative;
}
.tide-bar:hover {
  opacity: 1;
}
.tide-bar[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-chrome);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 200;
}
/* Touch scrubber for mobile */
.tide-scrubber-line {
  display: none; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--gold); z-index: 5; pointer-events: none;
  transform: translateX(-50%);
}
.tide-scrubber-label {
  display: none; position: absolute; top: -24px; transform: translateX(-50%);
  background: var(--bg-chrome); border: 1px solid var(--border);
  color: var(--text); font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: 0.5px; padding: 3px 8px; white-space: nowrap; z-index: 6;
  pointer-events: none;
}
.tide-bar--now {
  opacity: 1 !important;
  background: #d4b800 !important;
  z-index: 1;
}
.tide-bar--now::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4b800;
  pointer-events: none;
}
.tide-wave-midline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, transparent 4px, transparent 8px);
  pointer-events: none;
  z-index: 1;
}
/* Sunrise/sunset vertical marker lines — only in bar area (below padding) */
.tide-sun-marker {
  position: absolute; top: 70px; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.18);
  pointer-events: auto;
  z-index: 4;
}
.tide-sun-marker:hover {
  background: rgba(255,255,255,0.45);
}
.tide-sun-marker[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-chrome); color: var(--text);
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.5px; white-space: nowrap;
  padding: 4px 8px; border: 1px solid var(--border);
  pointer-events: none; z-index: 200;
}
.tide-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 16px;
  padding-bottom: 10px;
}
.tide-phase {
  font-size: 22px;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.tide-phase-word {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tide-phase span:not(.tide-phase-word) {
  color: var(--text-muted);
  font-size: 22px;
  margin: 0 4px;
}
.tide-next {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tide-loading {
  text-align: left;
  color: var(--text-muted);
  font-size: 10px;
  padding: 10px 0;
  letter-spacing: 2px;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
}

.updated { text-align:left; color:var(--text-muted); font-size:10px; margin-top:20px; font-family:'Space Mono',monospace; letter-spacing:1px; }

/* ── TIDES & CURRENTS SECTION ─────────────────────────────── */
.tc-section-header {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  text-transform: uppercase;
}
.tc-section-header:first-child { margin-top: 0; }
.tc-section-header span {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Current chart */
.cur-wave-chart {
  position: relative;
  display: flex;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  height: 80px;
  gap: 1px;
  overflow: visible;
  margin-bottom: 0;
}
.cur-wave-midline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.cur-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cur-bar-col:hover .cur-bar-fill { opacity: 1; }
.cur-bar-col[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(50% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-chrome);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 200;
}
.cur-bar-flood-space {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cur-bar-ebb-space {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cur-bar-fill {
  width: 100%;
  min-height: 1px;
  transition: opacity 0.1s;
}
.cur-bar-flood { background: #4a9eff; opacity: 0.5; }
.cur-bar-ebb   { background: #ff7f50; opacity: 0.5; }
.cur-bar-col--now .cur-bar-flood { opacity: 1; background: #6ab4ff; }
.cur-bar-col--now .cur-bar-ebb   { opacity: 1; background: #ff9060; }
.cur-bar-col--now::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.8;
  pointer-events: none;
}

/* Current info row (state + speed + direction + next event) */
.cur-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 10px;
  flex-wrap: wrap;
}
.cur-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cur-state-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cur-state {
  font-size: 22px;
  line-height: 1;
}
.cur-state-word {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
}
.cur-speed {
  font-size: 18px;
  color: var(--text);
  line-height: 1;
}
.cur-speed-num {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
}
.cur-unit {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}
.cur-dir-block {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cur-dir-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cur-next {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  width: 100%;
}
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#3ec93e; margin-right:5px; vertical-align:middle; animation:blink 2s infinite; }

/* mobile-only elements hidden on desktop */
.mob-header, .mob-search, .mob-bottom, .mob-panel, .mob-nav-overlay { display:none; }
#buoyCount { display:none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT (<768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html, body { display:block; }

  #app {
    width:100%; height:100dvh; border-radius:0;
    box-shadow:none; position:relative; overflow:hidden;
    padding-top:0;
  }

  /* Reset map-view padding — on mobile the mob-header is in flow,
     not fixed, so no padding-top offset is needed. */
  #app.map-view { padding-top:0; }
  body.has-pro-banner #app.map-view { padding-top:0; }

  /* hide desktop chrome */
  .topnav, .sidebar, .forecast { display:none !important; }
  .skip-link { display:none !important; }
  .ca-footer { display:none !important; }

  /* layout */
  .app-body { display:block; height:100%; }
  .main { height:100%; display:flex; flex-direction:column; position:relative; }
  .map-wrap { flex:1; min-height:0; overflow:visible; }

  .mob-header { position:relative; z-index:1000; }

  .hp-headline { font-size:22px; margin-bottom:24px; }

  /* wind chart — hide current info on narrow screens */
  /* wave chart */
  /* mobile header */
  .mob-header {
    display:grid !important; grid-template-columns:auto 1fr auto; align-items:center;
    padding-top:max(env(safe-area-inset-top), 20px); padding-bottom:16px;
    padding-left:18px; padding-right:18px;
    flex-shrink:0; background:var(--bg);
  }
  .mob-logo-wrap {
    display:flex; align-items:center; justify-content:center; justify-self:center;
  }
  .mob-logo-wrap svg {
    width:120px; height:auto;
  }
  .mob-menu-btn {
    justify-self:start; background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
    font-family:'Space Mono',monospace; font-weight:700; font-size:10px;
    letter-spacing:2px; border-radius:0; padding:12px 18px; min-height:44px; cursor:pointer;
  }
  .mob-star-btn {
    background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
    font-family:'Space Mono',monospace; font-weight:700; font-size:10px;
    letter-spacing:2px; border-radius:0; padding:12px 18px; min-height:44px; cursor:pointer;
  }

  /* mobile nav overlay */
  .mob-nav-overlay {
    position:fixed; inset:0; z-index:1100; background:var(--bg);
    display:flex !important; flex-direction:column;
    padding-top:max(env(safe-area-inset-top), 20px);
    padding-bottom:max(env(safe-area-inset-bottom), 24px);
    transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .mob-nav-overlay.open { transform:none; }
  .mob-nav-top {
    display:flex; align-items:center; justify-content:space-between; padding:0 18px;
  }
  .mob-nav-close {
    background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
    font-family:'Space Mono',monospace; font-weight:700; font-size:10px;
    letter-spacing:2px; border-radius:0; padding:12px 18px; min-height:44px; cursor:pointer;
  }
  .mob-nav-links {
    flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 28px; gap:2px;
  }
  .mob-nav-link {
    background:none; border:none; text-align:left; cursor:pointer;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:38px; font-weight:400; line-height:1.1;
    color:var(--text); padding:4px 0; letter-spacing:-.5px; transition:opacity .15s;
    white-space:nowrap;
  }
  .mob-nav-link:active { opacity:.5; }

  /* mobile search — overlays the map so map fills full height */
  .mob-search { display:block !important; position:absolute; left:0; right:0; bottom:116px; z-index:500; padding:0 18px 0; }
  .mob-search-bar {
    background:rgba(14,14,14,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.12); border-radius:0;
    padding:13px 44px; width:100%; color:var(--text-muted);
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; line-height:1.2; outline:none; transition:background .2s, box-shadow .2s;
    box-sizing:border-box; -webkit-appearance:none; appearance:none;
  }
  .mob-search-bar:focus { background:#2c2c2c; color:var(--text); border-color:var(--gold); }
  .mob-search-bar.error { border-color:#e05a5a !important; }
  .mob-s-icon { position:absolute; left:34px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
  .mob-s-icon.searching { animation:spin .7s linear infinite; }
  .mob-s-clear {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    width:44px; height:44px; border-radius:0; display:none; align-items:center; justify-content:center;
  }
  .mob-search-bar:not(:placeholder-shown) ~ .mob-s-clear { display:flex; }
  .mob-suggestions { top:calc(100% - 4px); border-radius:0; }

  /* hide desktop map controls on mobile */
  .mcg-br { display:none !important; }

  /* mobile bottom bar — overlays the map */
  .mob-bottom {
    display:flex !important; align-items:center; gap:10px; padding:10px 18px;
    padding-bottom:max(env(safe-area-inset-bottom), 16px);
    background:var(--bg); position:absolute; left:0; right:0; bottom:0; z-index:500;
  }
  .mob-list-btn {
    flex:1; background:var(--bg-raised); border:1px solid var(--border); border-radius:0; padding:12px; color:var(--text);
    font-family:'Space Mono',monospace; font-weight:700; font-size:9px; line-height:1.2; letter-spacing:2px; cursor:pointer;
    text-transform:uppercase;
  }
  .mob-locate-btn {
    flex-shrink:0; width:44px; align-self:stretch; background:var(--bg-raised); border:1px solid var(--border); border-radius:0;
    color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .mob-locate-btn:active { background:#333; }

  /* mobile panels slide up from bottom */
  .mob-panel {
    display:flex !important; position:fixed; inset:0; z-index:1050; background:var(--bg);
    transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,0,1);
    overflow:hidden; border-radius:0; flex-direction:column;
  }
  .mob-panel.open { transform:translateY(0); }
  .mob-panel { border-radius: 0 !important; }
  .mob-drag-handle {
    display: flex; justify-content: center;
    padding: 10px 0 4px; flex-shrink: 0; cursor: grab;
  }
  .mob-drag-pill {
    width: 44px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.35);
  }
  .mob-panel-head {
    flex-shrink:0; z-index:10; background:var(--bg);
    padding:max(env(safe-area-inset-top), 20px) 16px 14px;
    border-bottom:1px solid var(--bg-raised-2);
  }
  .mob-back {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(18,18,18,0.85);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.10); border-radius:999px;
    color:rgba(255,255,255,0.55);
    font-family:'Space Mono',monospace; font-weight:400; font-size:9px;
    letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; padding:6px 14px 6px 10px; margin-bottom:10px;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
  }
  .mob-panel-title { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:24px; font-weight:400; color:var(--text); letter-spacing:-0.02em; line-height:1.1; text-transform:none; }
  .mob-panel-sub { font-family:'Space Mono',monospace; font-size:10px; color:var(--text-muted); margin-top:6px; letter-spacing:1px; text-transform:uppercase; }
  .mob-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .mob-panel-body {
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:0 16px max(env(safe-area-inset-bottom, 0px), 44px);
  }
  /* List panels: rows carry their own 16px padding, so strip body indent */
  #mobSpotsList.mob-panel-body, #buoyList.mob-panel-body {
    padding-left:0; padding-right:0;
  }

  /* scrollable tab strip */
  .det-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .det-tabs::-webkit-scrollbar { display: none; }

  /* cc- cards inherit desktop rules, no mobile overrides needed */

  .det-tab-panel.active { display: block; }

  /* buoy detail slides up */
  .buoy-detail {
    position:fixed !important; inset:0 !important; border-radius:0 !important;
    transform:translateY(105%) !important;
    transition:transform .35s cubic-bezier(.32,.72,0,1) !important;
  }
  .buoy-detail.open { transform:translateY(0) !important; }
  /* alert settings slides up on mobile */
  .sa-panel {
    position:fixed !important; inset:0 !important;
    transform:translateY(105%) !important;
    transition:transform .35s cubic-bezier(.32,.72,0,1) !important;
    z-index:900;
  }
  .sa-panel.open { transform:translateY(0) !important; }
  .sa-head { padding:max(env(safe-area-inset-top), 20px) 16px 14px; }
  .bd-head { padding:max(env(safe-area-inset-top), 20px) 16px 14px; }
  .bd-back { margin-bottom:14px; font-size:13px; }
  .panel-title { font-size:28px; }
  .bd-body { padding:16px 18px 44px; }

  /* data cards */
  .hero-grid { gap:10px; margin-bottom:14px; }
  .hero-card { border-radius:0; padding:16px; }
  .hc-val { font-size:38px; }
  .data-grid { gap:8px; }
  .dc { border-radius:0; padding:12px 14px; }
  .dc-val { font-size:22px; }

  /* list items */
  .bli { display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid #1c1c1c; cursor:pointer; transition:opacity .15s; }
  .bli:hover { opacity:.7; }
  .bli-pill { border-radius:0; padding:7px 11px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; flex-shrink:0; background:var(--blue); display:flex; align-items:center; gap:6px; }
  .bli-pill img { width:16px; height:16px; object-fit:contain; flex-shrink:0; }
  .bli-info { flex:1; min-width:0; }
  .bli-name { font-weight:600; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bli-id { font-size:11px; color:var(--text-muted); margin-top:1px; }
  .bli-temp { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:22px; color:var(--blue-l); flex-shrink:0; }
  .bli-map-btn {
    flex-shrink:0; background:none; border:none; color:var(--text-muted);
    padding:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    border-radius:0; transition:background .1s, color .1s;
  }
  .bli-map-btn:active { background:var(--bg-raised); color:var(--text); }

  #buoyCount {
    position:absolute; bottom:80px; left:14px; z-index:400;
    background:rgba(14,14,14,.88); border:1px solid rgba(255,255,255,.08);
    border-radius:0; padding:7px 13px; backdrop-filter:blur(8px);
    font-size:11px; color:var(--text-muted); letter-spacing:1px;
    box-shadow:0 2px 10px rgba(0,0,0,.4); display:none;
  }
  #buoyCount span { color:var(--text); font-weight:700; }

  /* Prevent iOS auto-zoom on inputs smaller than 16px */
  .hp-input  { font-size:16px; }
  .ca-input  { font-size:16px; line-height:1.4; -webkit-appearance:none; appearance:none; }

  /* ── MAP CONTROLS (mobile) ── */
  .map-controls-bar {
    left: 20px;
    right: 20px;
    bottom: calc(164px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }
  .mc-dropdown { flex: 1; min-width: 0; }
  .mc-dd-btn { width: 100%; padding: 8px 6px; font-size: 8px; gap: 3px; justify-content: center; }
  .mc-dd-label { font-size: 7px; letter-spacing: 1px; }
  .mc-dd-value { font-size: 8px; overflow: hidden; text-overflow: ellipsis; }
  .mc-dd-menu { min-width: 130px; }
  .mc-dropdown:last-child .mc-dd-menu { left:auto; right:0; }
  .chl-region-picker {
    bottom: calc(210px + env(safe-area-inset-bottom, 0px));
    left: 20px; right: 20px;
    min-width: 0;
  }

  /* ── WIND TIME SCRUBBER (mobile) ── */
  .wind-time-scrubber {
    left: 18px;
    right: 18px;
    bottom: calc(208px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
    width: auto;
  }
  .wts-controls { gap: 4px; }
  .wts-btn { padding: 4px 6px; font-size: 9px; }
  .wts-label { font-size: 10px; min-width: 0; }
  .wts-slider { width: 100%; }

  /* ── WIND / COORD POPUPS (mobile) ── */
  .wind-popup .leaflet-popup-content-wrapper,
  .coord-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px);
  }
  .wind-pop-inner { min-width: 0; }
  .wind-pop-val { font-size: 16px; }
  .wind-pop-speed { padding: 8px 10px; }
  .wind-pop-meta { padding: 6px 10px; }

  /* ── ATTRIBUTION + BETA (mobile) ── */
  .leaflet-control-attribution { display: none !important; }
  .beta-flag { display: none; }

  /* restructure mob-bottom for attribution below buttons */
  .mob-bottom {
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }
  .mob-bottom-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .mob-attribution {
    display: block;
    margin-top: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 7px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,.3);
    text-align: center;
    padding-bottom: 0;
  }
  .mob-attribution a {
    color: rgba(255,255,255,.4);
    text-decoration: none;
  }
}

.forecast { display:none; }
.forecast.open { display:flex; }

/* ── WEATHER CHARTS ─────────────────────────────────────────── */
/* ── CONDITIONS PANEL HEADER ──────────────────────────────── */
.cond-header {
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 8px;
}
.cond-range-bar {
  display:flex; gap:0;
  border:1px solid rgba(255,255,255,0.1); border-radius:0;
}
.cond-range-opt {
  background:none; border:none; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-muted); padding:5px 10px;
  transition:color 0.15s, background 0.15s;
}
.cond-range-opt:not(:last-child) { border-right:1px solid rgba(255,255,255,0.1); }
.cond-range-opt:hover { color:var(--text); }
.cond-range-opt.active { color:var(--text); background:rgba(255,255,255,0.08); }

.wx-block { background:var(--bg-surface); border-radius:0; overflow:hidden; margin:8px 0 4px; border:1px solid var(--border); }
.wx-block-hdr { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 4px; }
.wx-block-data { padding:0 16px 8px; }
.wx-block-title { font-family:'Space Mono',monospace; font-size:10px; font-weight:400; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }
.wx-block-cur { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:14px; font-weight:400; color:var(--text); line-height:1; transition:color 0.1s; }
.wx-block-time { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:11px; color:var(--text-muted); margin-left:6px; }
.wx-block-sub { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:14px; font-weight:400; color:var(--text); margin-left:2px; }
.wx-trend-pill { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:1.5px; padding:3px 8px; border-radius:0; margin-left:8px; }
.wx-chart-wrap { height:60px; position:relative; cursor:crosshair; }
.wx-chart-svg { display:block; width:100%; height:60px; }
.wx-hover-line { display:none; position:absolute; top:0; height:60px; width:1px; background:rgba(255,255,255,0.5); pointer-events:none; z-index:2; transform:translateX(-50%); }
.wx-time-label { display:none; position:absolute; top:2px; z-index:3; pointer-events:none; transform:translateX(-50%); font-family:'DM Sans',sans-serif; font-size:9px; color:rgba(255,255,255,0.6); white-space:nowrap; }
/* Wind chart — scrollable, fixed-width */
.wx-wind-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.12) transparent; }
.wx-wind-scroll::-webkit-scrollbar { height:3px; }
.wx-wind-scroll::-webkit-scrollbar-track { background:transparent; }
.wx-wind-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:2px; }
.wx-wind-chart { height:120px; position:relative; cursor:crosshair; }
.wx-wind-chart .wx-hover-line { height:120px; }
.wx-axis-row { position:relative; height:22px; pointer-events:none; }
.wx-axis-row span { position:absolute; bottom:4px; font-family:'Space Mono',monospace; font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(255,255,255,0.4); transform:translateX(-50%); white-space:nowrap; }
.wx-now-label { position:absolute; top:3px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.1); padding:1px 5px; border-radius:0; transform:translateX(-50%); pointer-events:none; z-index:3; }
#wx-tooltip { display:none; position:fixed; z-index:9999; pointer-events:none; background:var(--bg-surface); border:1px solid var(--border); border-radius:0; padding:10px 13px; min-width:100px; box-shadow:0 4px 16px rgba(0,0,0,0.6); }
.wx-tt-time { font-family:'Space Mono',monospace; font-size:10px; font-weight:400; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px; }
.wx-tt-val { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:22px; color:var(--text); line-height:1; display:flex; align-items:baseline; gap:3px; }
.wx-tt-unit { font-family:'Space Mono',monospace; font-size:10px; color:var(--text-muted); font-weight:400; letter-spacing:1px; }
.wx-tt-gust { display:flex; align-items:baseline; gap:5px; margin-top:3px; }
.wx-tt-gust-lbl { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--text-muted); text-transform:uppercase; }
.wx-tt-gust-val { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:18px; line-height:1; color:var(--text); }

/* ── HOME PAGE ──────────────────────────────────────────────── */
/* Scrollable column with multiple sections (hero, trust, stats, features, why, email, footer).
   Was previously a fixed-position centered single-screen overlay. */
#homePage {
  position:fixed; inset:0; z-index:900;
  display:flex; flex-direction:column;
  background:#0e0e0e;
  transition:opacity .35s ease;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  /* Hide the scrollbar so the 20px page margin stays consistent on both sides.
     Page is still scrollable via trackpad / wheel / keyboard. */
  scrollbar-width:none;
}
#homePage::-webkit-scrollbar { display:none; }

/* Topnav uses the global 12px margin from the viewport edges. The hero
   and all landing-page sections below match that 12px margin so the layout
   has consistent edge spacing all the way down. */
body.has-pro-banner #homePage { top: 36px; }
#homePage.hidden { opacity:0; pointer-events:none; }

@media (max-width: 767px) {
  #homePage {
    position:absolute; inset:0; z-index:500;
  }
  body.has-pro-banner #homePage { top: 0; }
  #homePage.hidden { display:none; }
  .hp-headline { margin:0 0 24px; }
  .hp-suggestions { max-height:160px; }
}

.hp-content {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0; width:100%; max-width:700px; text-align:left;
}
.hp-headline {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(28px, 5vw, 48px); font-weight:700; text-transform:none;
  letter-spacing:-0.02em; line-height:1.15;
  color:var(--text); margin:0 0 24px;
}
/* ── HOMEPAGE ANIMATIONS ───────────────────────────────────── */
@keyframes hp-fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes hp-blink {
  0%, 100% { opacity:1; }
  50%       { opacity:0; }
}

.hp-line { display:block; opacity:0; animation:hp-fade-up 0.7s cubic-bezier(.22,.61,.36,1) forwards; }
.hp-line:first-child { animation-delay:0.1s; }
.hp-line + .hp-line { animation-delay:0.25s; }
.hp-search-wrap { opacity:0; animation:hp-fade-up 0.6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:0.45s; }
.hp-popular { opacity:0; animation:hp-fade-up 0.6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:0.55s; }
.hp-legal { opacity:0; animation:hp-fade-up 0.5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:0.65s; }

.hp-ticker-wrap {
  display:inline; overflow:hidden;
}
.hp-ticker-word {
  display:inline-block; color:#c8b84a;
  animation:hp-slide-in .45s cubic-bezier(.22,.61,.36,1) both;
}
.hp-ticker-word.hp-exit {
  animation:hp-slide-out .35s cubic-bezier(.55,0,1,.45) both;
}
@keyframes hp-slide-in {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes hp-slide-out {
  from { transform:translateY(0);    opacity:1; }
  to   { transform:translateY(-100%); opacity:0; }
}
.hp-search-wrap {
  width:100%; position:relative; z-index:50; display:flex; align-items:stretch;
  border:1px solid rgba(255,255,255,.18); margin-bottom:2px;
  background:rgba(14,14,14,0.9);
}
.hp-suggestions {
  position:absolute; top:100%; left:-1px; right:-1px; z-index:200;
  background:#141414; border:1px solid var(--border); border-top:none;
  max-height:200px; overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.hp-suggestions .sug-item {
  padding:10px 14px; font-family:'Space Mono',monospace; font-size:12px;
  color:var(--text); cursor:pointer; letter-spacing:0.3px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.hp-suggestions .sug-item:last-child { border-bottom:none; }
.hp-suggestions .sug-item:hover { background:var(--bg-raised); }
.hp-search-wrap::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:rgba(255,255,255,.5); transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.hp-search-wrap:focus-within::after { transform:scaleX(1); }
.hp-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none; display:flex;
}
.hp-input {
  width:100%; background:transparent; border:none;
  border-radius:0; padding:14px 52px 14px 42px;
  font-family:'Space Mono',monospace; font-weight:400; font-size:11px;
  letter-spacing:1px; color:var(--text); outline:none; box-sizing:border-box;
}
.hp-input::placeholder { color:var(--text-muted); opacity:.5; }
.hp-input:focus { background:rgba(255,255,255,.03); }
.hp-search-btn {
  position:absolute; right:0; top:0; bottom:0; width:44px;
  background:rgba(255,255,255,.06); border:none; border-left:1px solid rgba(255,255,255,.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:background .12s, color .12s; flex-shrink:0;
}
.hp-search-btn:hover { background:rgba(255,255,255,.12); color:var(--text); }
.hp-map-btn {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-family:'Space Mono',monospace; font-weight:400; font-size:10px;
  letter-spacing:2px; display:flex; align-items:center; gap:6px;
  transition:color .15s; padding:0; margin-bottom:40px;
}
.hp-map-btn:hover { color:var(--text); }
.hp-popular { width:100%; margin-bottom:40px; margin-top:24px; }
.hp-popular-title {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:3px; color:var(--text-muted); margin-bottom:0;
  padding-bottom:8px; border-bottom:none;
}
.hp-popular-grid {
  display:flex; flex-wrap:wrap; gap:8px;
}
.hp-popular-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; min-height:44px; box-sizing:border-box; border:1px solid var(--border);
  background:rgba(14,14,14,0.85);
  font-family:'Space Mono',monospace; font-size:11px; font-weight:400;
  color:var(--text-dim); text-decoration:none;
  transition:background .12s, color .12s;
  opacity:0; animation:hp-fade-up 0.4s cubic-bezier(.22,.61,.36,1) forwards;
}
.hp-popular-link:hover { background:var(--bg-raised); color:var(--text); }
.hp-popular-id {
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px;
  color:var(--text-muted); opacity:.6;
}
.hp-legal { display:flex; align-items:center; gap:12px; }
.hp-legal-link {
  background:none; border:none; font-family:'Space Mono',monospace; font-size:10px;
  letter-spacing:1px; color:var(--text-muted); cursor:pointer;
  padding:0; opacity:.4; transition:opacity .15s; text-transform:uppercase;
}
.hp-legal-link:hover { opacity:.8; }
.hp-legal-sep { color:var(--text-muted); font-size:10px; opacity:.2; }

/* ── LANDING PAGE SECTIONS (lp-*) ────────────────────────────
   Visual structure ported from BigBuoy2 redesign. Uses BigBuoy's
   existing fonts (Bebas Neue, DM Sans, Space Mono) and colors. */

/* Hero with looping background video.
   Content is vertically centered to match the BigBuoy2 design reference.
   Top padding is large enough that on short viewports (where content
   would overflow) it still sits below the topnav rather than under it.
   64px side padding is the design wrapper — sits further in than the
   20px topnav margin so the content has visible breathing room. */
.lp-hero {
  min-height:100vh; display:flex; align-items:center;
  padding:128px 64px 64px; box-sizing:border-box;
  position:relative; overflow:hidden;
}
body.has-pro-banner .lp-hero { padding-top:164px; }
.lp-hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.lp-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(5,5,5,.70) 0%, rgba(5,5,5,.62) 55%, rgba(5,5,5,.78) 100%);
}
.lp-hero .lp-hero-content,
.lp-hero .hp-content { position:relative; z-index:2; }
.lp-hero-content { max-width:640px; flex-shrink:0; }
.lp-hero .hp-headline { text-shadow:0 2px 24px rgba(0,0,0,.5); }
.lp-hero .lp-descriptor { color:rgba(216,228,214,.82); }
.lp-hero .hp-popular-title { color:rgba(216,228,214,.55); }
.lp-hero .hp-popular-link { background:rgba(5,5,5,.45); border-color:rgba(255,255,255,.18); color:rgba(216,228,214,.9); }
.lp-hero .hp-popular-link:hover { background:rgba(255,255,255,.1); color:var(--text); }
.lp-hero .hp-popular-id { color:rgba(216,228,214,.45); opacity:1; }
.lp-hero .hp-search-wrap { border-color:rgba(255,255,255,.28); background:rgba(5,5,5,.35); }
.lp-hero .hp-input { background:transparent; }
.lp-hero .lp-scroll-hint { color:rgba(216,228,214,.5); }
.lp-hero .lp-scroll-hint:hover { color:rgba(216,228,214,.85); }

/* Reset margins on existing .hp-* classes when used inside the new hero
   layout, so they participate in the lp-* vertical rhythm cleanly. */
.lp-hero .hp-headline { margin:0 0 20px; }
.lp-hero .hp-search-wrap { margin:0 0 28px; }
.lp-hero .hp-popular { margin:0 0 32px; margin-top:0; }

.lp-descriptor {
  font-family:'DM Sans',sans-serif; font-size:16px; color:var(--text-muted);
  line-height:1.55; margin:0 0 28px; max-width:520px;
  opacity:0; animation:hp-fade-up 0.6s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.3s;
}

.lp-scroll-hint {
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px;
  color:var(--text-muted); text-transform:uppercase;
  opacity:0; animation:hp-fade-up 0.5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.75s; transition:color .15s; margin-top:8px;
}
.lp-scroll-hint:hover { color:var(--text); }
.lp-scroll-hint svg { animation:lp-bob 1.8s ease-in-out infinite; }
@keyframes lp-bob {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(4px); }
}

/* Trust bar */
.lp-trust {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:16px 64px;
  display:flex; align-items:center; justify-content:flex-start;
  gap:14px; flex-wrap:wrap;
}
.lp-trust-item {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
  color:var(--text-muted); text-transform:uppercase; white-space:nowrap;
  flex-shrink:0;
}
.lp-trust-sep {
  color:var(--border-hi); font-size:11px; line-height:1;
  flex-shrink:0; user-select:none;
}

/* Stats strip — full bleed edge to edge, line runs the full width */
.lp-proof {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  border-bottom:1px solid var(--border);
}
.lp-proof-item {
  padding:36px 32px;
  border-right:1px solid var(--border);
  min-width:0;
}
/* First and last items get extra side padding so their text aligns with the
   trust bar's 64px wrapper above (and the section visually anchors to the
   page margin instead of looking flush against the viewport edge). */
.lp-proof-item:first-child { padding-left:64px; }
.lp-proof-item:last-child { padding-right:64px; border-right:none; }
.lp-proof-num {
  font-family:'Bebas Neue',sans-serif; font-size:56px; font-weight:400;
  color:var(--text); line-height:1; letter-spacing:1px;
}
.lp-proof-label {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
  color:var(--text-muted); text-transform:uppercase; margin-top:8px;
}

/* Feature grid (4 mock app panel cards) — full bleed, edge to edge.
   Outer borders removed (no 1px lines at the viewport edges); the inner
   card borders provide the grid separators between cards. */
.lp-features {
  margin:0;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  border:none;
}
.lp-feature-card {
  padding:44px 40px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column;
  min-width:0;
}
.lp-feature-card:nth-child(2n) { border-right:none; }
.lp-feature-card:nth-child(3),
.lp-feature-card:nth-child(4)  { border-bottom:none; }
/* First column cards (1 & 3) get extra left padding so their content
   aligns with the 64px wrapper. Right column cards (2 & 4) get extra
   right padding so their right edge aligns with the wrapper too. */
.lp-feature-card:nth-child(2n+1) { padding-left:64px; }
.lp-feature-card:nth-child(2n)   { padding-right:64px; }
.lp-feature-tag {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px;
  color:var(--gold); text-transform:uppercase; margin-bottom:18px;
}
.lp-feature-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:22px; font-weight:700; letter-spacing:-0.02em;
  color:var(--text); line-height:1.25; margin-bottom:10px;
}
.lp-feature-body {
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--text-muted); line-height:1.65;
}
.lp-app-panel {
  background:var(--bg-chrome); border:1px solid var(--border);
  margin-bottom:24px; overflow:hidden;
}
.lp-app-head {
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--bg-chrome);
}
.lp-app-body { padding:16px; }
/* Horizontal title row used inside mock app panels — overrides the
   real .bd-title-row which is column-stacked for the real buoy detail. */
.lp-app-titlerow {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.lp-app-titlerow .panel-title { font-size:18px; }
.lp-app-titlerow .panel-sub { margin-top:2px; }
.lp-app-titlerow .status-badge { margin-top:0; }

/* Pro Beta section — full bleed, gold accents, surfaces all 6 Pro features */
.lp-pro {
  margin:0; padding:80px 64px;
  background:rgba(200,184,74,0.025);
  border-bottom:1px solid var(--border);
  border-top:1px solid rgba(200,184,74,0.18);
}
/* 2-column hero: text left, image slider right */
.lp-pro-hero {
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap:64px; align-items:center;
  margin-bottom:64px;
}
.lp-pro-head { max-width:520px; }
.lp-pro-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:2px; color:var(--gold); text-transform:uppercase;
  margin-bottom:18px;
}
.lp-pro-beta-badge {
  font-size:8px; font-weight:700; letter-spacing:1.5px;
  border:1px solid rgba(200,184,74,.5); padding:2px 7px;
  color:var(--gold); background:rgba(200,184,74,.1);
}
.lp-pro-headline {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:38px; font-weight:700; letter-spacing:-0.03em;
  color:var(--text); line-height:1.12; margin:0 0 18px;
}
.lp-pro-subline {
  font-family:'DM Sans',sans-serif; font-size:15px;
  color:var(--text-muted); line-height:1.65; margin:0 0 28px;
}
.lp-pro-cta-note {
  display:block; margin-top:14px;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.5px;
  color:var(--text-muted); text-transform:uppercase;
}

/* Image slider — 3 overlays of the East Coast map */
.lp-pro-slider {
  display:flex; flex-direction:column; gap:14px; min-width:0;
}
.lp-pro-slider-stage {
  position:relative; width:100%;
  aspect-ratio: 910 / 1123;
  max-height: 560px;
  border:1px solid var(--border);
  background:#0a0a0a;
  overflow:hidden;
}
.lp-pro-slide {
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 0.5s ease;
  pointer-events:none;
}
.lp-pro-slide.active { opacity:1; pointer-events:auto; }
.lp-pro-slide img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.lp-pro-img-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:24px 24px 16px;
  background:linear-gradient(transparent, rgba(0,0,0,0.85));
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
  color:rgba(216,228,214,0.7); text-transform:uppercase;
  pointer-events:none;
}
.lp-pro-slider-tabs {
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
}
.lp-pro-slider-tab {
  background:var(--bg); border:none; cursor:pointer;
  padding:14px 10px; min-width:0;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:1.5px; color:var(--text-muted); text-transform:uppercase;
  transition:color 0.15s, background 0.15s;
}
.lp-pro-slider-tab:hover { color:var(--text); }
.lp-pro-slider-tab.active {
  color:var(--gold);
  background:rgba(200,184,74,0.06);
}
.lp-pro-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); margin-bottom:48px;
}
.lp-pro-card {
  background:var(--bg); padding:32px 28px; min-width:0;
}
.lp-pro-card-tag {
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:2px; color:var(--gold); text-transform:uppercase;
  margin-bottom:14px;
}
.lp-pro-card-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:18px; font-weight:700; letter-spacing:-0.02em;
  color:var(--text); line-height:1.25; margin-bottom:10px;
}
.lp-pro-card-body {
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--text-muted); line-height:1.6;
}
.lp-pro-cta-actions { display:block; }
.lp-pro-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); border:1px solid var(--gold); color:#1c1a00;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:1.5px; padding:14px 22px; cursor:pointer;
  transition:opacity 0.15s;
}
.lp-pro-cta-btn:hover { opacity:0.85; }

/* Email capture band — full bleed; horizontal padding aligns content with the 64px wrapper. */
.lp-email-band {
  margin:0;
  border-bottom:1px solid var(--border);
  background:var(--bg-chrome);
  padding:64px;
  display:flex; align-items:center; gap:56px;
}
.lp-email-left { flex:1; min-width:0; }
.lp-email-right { flex:0 0 340px; }
.lp-email-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:24px; font-weight:700; letter-spacing:-0.03em;
  color:var(--text); line-height:1.25; margin:12px 0 12px;
}
.lp-email-body {
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--text-muted); line-height:1.65; margin:0; max-width:480px;
}
.lp-email-btn {
  display:inline-flex; align-items:center;
  background:var(--gold); border:1px solid var(--gold); cursor:pointer;
  padding:14px 22px;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1.5px;
  color:#1c1a00; font-weight:700;
  transition:opacity .15s;
}
.lp-email-btn:hover { opacity:.88; }
.lp-email-fine {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  color:var(--text-muted); margin:14px 0 0; text-transform:uppercase;
  max-width:280px;
}

/* Footer */
.lp-foot {
  margin:0; padding:32px 64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.lp-foot-left { flex:1; min-width:0; }
.lp-foot-copy {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  color:var(--text-muted); text-transform:uppercase;
}
.lp-foot .hp-legal { animation:none; opacity:1; }

/* Mobile overrides for landing page sections */
@media (max-width: 767px) {
  .lp-hero {
    min-height:auto;
    /* flex-shrink:0 — #homePage is a flex column; without this the hero
       gets squashed and clips descriptor/search/popular/scroll-hint */
    flex-shrink:0;
    /* clear the mob-header (safe-area + padding-bottom 16px + 44px button) plus breathing room */
    padding:calc(max(env(safe-area-inset-top), 20px) + 16px + 44px + 40px) 20px 56px;
    align-items:flex-start;
  }
  body.has-pro-banner .lp-hero {
    padding-top: calc(max(env(safe-area-inset-top), 20px) + 16px + 44px + 40px + 36px);
  }
  /* ── Mobile section rhythm ───────────────────────────────────
     Gutter: 20px on every side. Vertical: ~40px per section side
     so adjacent sections produce ~80px breathing room. All outer
     spacing comes from PADDING (no margin: y x y patterns). */

  /* Trust strip — compact */
  .lp-trust { padding:14px 20px; gap:6px 18px; flex-wrap:wrap; justify-content:center; }
  .lp-trust-item { padding:0; font-size:8px; letter-spacing:1.5px; }
  .lp-trust-sep { display:none; }

  /* KPI grid — full bleed, items provide vertical density.
     Reset desktop nth-child padding overrides so the 2x2 grid aligns. */
  .lp-proof { grid-template-columns:1fr 1fr; padding:0; }
  .lp-proof-item { padding:40px 20px; }
  .lp-proof-item:first-child,
  .lp-proof-item:last-child,
  .lp-proof-item:nth-child(3) { padding:40px 20px; }
  .lp-proof-item:nth-child(2) { border-right:none; }
  .lp-proof-num { font-size:40px; }

  /* Feature cards — full bleed, no margin gutter. Cards provide vertical. */
  .lp-features { grid-template-columns:1fr; margin:0; padding:0; }
  .lp-feature-card { padding:40px 20px; border-right:none; }
  .lp-feature-card:nth-child(2n+1),
  .lp-feature-card:nth-child(2n) { padding:40px 20px; }
  .lp-feature-card:nth-child(3) { border-bottom:1px solid var(--border); }

  /* Pro section — full bleed with gold tint, section-level padding */
  .lp-pro { padding:40px 20px; }
  .lp-pro-hero { grid-template-columns:1fr; gap:32px; margin-bottom:32px; }
  .lp-pro-headline { font-size:28px; }
  .lp-pro-slider-stage { aspect-ratio:auto; height:380px; max-height:60vh; }
  .lp-pro-slide img { object-position:center; }
  .lp-pro-slider-tab { font-size:8px; padding:12px 6px; letter-spacing:1px; }
  .lp-pro-grid { grid-template-columns:1fr; }
  .lp-pro-card { padding:28px 20px; }

  /* Email CTA — full bleed, no margin gutter.
     Override desktop align-items:center so children left-align in column flow. */
  .lp-email-band { flex-direction:column; align-items:stretch; gap:24px; padding:40px 20px; margin:0; }
  .lp-email-left, .lp-email-right { flex:1 0 auto; width:100%; min-width:0; }
  .lp-email-title { font-size:20px; }
  .lp-email-fine { max-width:none; }

  /* Footer — full bleed, no margin gutter */
  .lp-foot { flex-direction:column; align-items:flex-start; gap:16px; padding:40px 20px; margin:0; }
}

/* ── COOKIE BANNER ────────────────────────────────────────── */
#cookieBanner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 20px; background: rgba(10,10,10,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.5px;
}
#cookieBanner button {
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.2); background: transparent;
  color: var(--text); cursor: pointer; transition: all 0.15s;
}
#cookieBanner button:first-of-type { background: var(--gold); color: #1c1a00; border-color: var(--gold); }
#cookieBanner button:hover { opacity: 0.85; }
body.light #cookieBanner { background: rgba(255,255,255,0.95); border-top-color: rgba(0,0,0,0.08); }
body.light #cookieBanner button:last-of-type { border-color: rgba(0,0,0,0.15); color: var(--text); }

/* ── BETA FLAG ─────────────────────────────────────────── */
.beta-flag {
  position:fixed; bottom:140px; right:14px; z-index:800;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:400;
  letter-spacing:2px; color:rgba(200,184,74,.6);
  border:1px solid rgba(200,184,74,.25); padding:3px 10px;
  background:rgba(10,10,10,.7); pointer-events:none;
}

/* ── 404 PAGE ──────────────────────────────────────────── */
.nf-page {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:40px 20px;
}
.nf-content {
  text-align:center; max-width:420px;
}
.nf-headline {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:32px; font-weight:700;
  color:var(--text); margin:0 0 12px; line-height:1.2;
}
.nf-body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:14px;
  color:var(--text-muted); margin:0 0 28px; line-height:1.5;
}
.nf-btn {
  display:inline-block; padding:12px 32px; border-radius:0;
  background:var(--gold); color:#000; border:none; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:2px; transition:opacity .15s; text-transform:uppercase;
}
.nf-btn:hover { opacity:.8; }

/* Legal pages */
#legalPage {
  position:fixed; inset:0; z-index:800; background:var(--bg);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:72px 24px;
}
.legal-wrap { width:100%; max-width:640px; padding:0 0 80px; }
.legal-back {
  display:flex; align-items:center; gap:7px; background:none; border:none;
  color:var(--text-muted); font-family:'Space Mono',monospace; font-weight:700;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; padding:8px 0; margin-bottom:24px; min-height:44px;
  transition:color 0.15s;
}
.legal-back:hover { color:var(--text); }
.legal-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:28px; font-weight:700;
  color:var(--text); margin:0 0 24px; letter-spacing:-0.02em;
}
.legal-body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:14px; color:var(--text-muted); line-height:1.8; }
.legal-placeholder { color:var(--text-muted); font-style:italic; }
/* Dark-theme overrides for Termly-generated content */
.legal-body span { color:inherit !important; }
.legal-body h1, .legal-body h2, .legal-body h3 { color:var(--text) !important; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important; }
.legal-body a, .legal-body a span { color:var(--gold) !important; }
.legal-body table { width:100%; border-collapse:collapse; margin:16px 0; border:1px solid var(--border); display:block; overflow-x:auto; }
.legal-body td, .legal-body th { border-color:var(--border) !important; padding:10px 14px; vertical-align:top; font-size:13px; }
.legal-body ul { list-style-type:square; padding-left:24px; }
.legal-body ul ul { list-style-type:circle; }

/* Signup legal note */
.ca-legal-note {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:11px; color:var(--text-muted);
  line-height:1.6; opacity:.7; margin:0;
}
.ca-legal-btn {
  background:none; border:none; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:11px;
  color:var(--text-muted); cursor:pointer; padding:0; text-decoration:underline;
  text-underline-offset:2px;
}

/* ── CONTACT PAGE ──────────────────────────────────────────── */
.contact-page {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; padding: 60px 28px 40px;
}
.contact-inner {
  width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 20px;
}
.contact-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 28px; font-weight: 300; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
}
.contact-body {
  font-family: 'Space Mono', monospace; font-size: 11px;
  color: var(--text-muted); line-height: 1.7; letter-spacing: 0.3px;
}
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-label {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
}
.contact-type-row { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-type-btn {
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; padding: 8px 14px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.contact-type-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
.contact-type-btn.active {
  background: var(--gold); border-color: var(--gold); color: #1c1a00;
}
.contact-textarea {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; padding: 14px; font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.5px; color: var(--text);
  outline: none; resize: vertical; min-height: 120px; box-sizing: border-box;
  transition: border-color 0.2s;
}
.contact-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
.contact-textarea:focus { border-color: var(--gold); }
.contact-error {
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: #e05a5a; letter-spacing: 0.5px;
}

/* ── CREATE ACCOUNT PAGE ─────────────────────────────────── */
#createAccountPage { overflow-y:auto; }
.ca-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:60px 28px 40px; gap:32px; width:100%; box-sizing:border-box;
}
.ca-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:28px; font-weight:300; letter-spacing:-0.02em;
  color:var(--text); text-align:left; margin:0; width:100%; max-width:420px;
}
.ca-form { display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; }
.ca-google-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 18px; border-radius:0; border:1px solid rgba(255,255,255,.2);
  background:transparent; box-sizing:border-box; cursor:pointer;
  font-family:'Space Mono',monospace; font-weight:400; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--text);
  transition:border-color .2s, background .2s;
}
.ca-google-btn:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.04); }
.ca-google-btn svg { flex-shrink:0; }
.ca-divider {
  display:flex; align-items:center; gap:12px; width:100%; margin:6px 0;
}
.ca-divider::before, .ca-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.12);
}
.ca-divider span {
  font-family:'Space Mono',monospace; font-size:9px; font-weight:400;
  letter-spacing:2px; color:var(--text-muted);
}
.ca-input {
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0; padding:14px 0; font-family:'Space Mono',monospace;
  font-weight:400; font-size:11px; letter-spacing:1.5px; color:var(--text);
  outline:none; box-sizing:border-box; transition:border-color .2s;
}
.ca-input::placeholder { color:var(--text-muted); }
.ca-input:focus { border-bottom-color:var(--gold); }
.ca-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:16px 18px; border-radius:0; margin-top:12px;
  background:#c8b84a; border:none; box-sizing:border-box;
  font-family:'Space Mono',monospace; font-weight:400; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:#1c1a00;
  opacity:0.55; cursor:default; pointer-events:none;
}
.ca-btn.active { opacity:1; cursor:pointer; pointer-events:auto; }
.ca-btn.active:hover { opacity:0.88; }
.ca-btn.active:active { opacity:0.78; }
.ca-btn.active.loading { opacity:0.6; pointer-events:none; cursor:default; }
.ca-btn-spinner { animation:spin .7s linear infinite; flex-shrink:0; }
.ca-section-lbl {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:2px; color:var(--text-muted); text-transform:uppercase;
}
/* ── Account field rows ──────────────────────────────────────── */
.ca-field-row {
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.1);
  padding:14px 0; cursor:pointer;
}
.ca-field-row-static { cursor:default; opacity:.6; }
.ca-field-text {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; font-weight:300; color:var(--text);
}
.ca-field-label {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
  display:block; margin-bottom:3px;
}
.ca-field-edit-btn {
  background:none; border:none; color:var(--text-muted); opacity:.6;
  cursor:pointer; padding:0; flex-shrink:0; transition:opacity .15s;
}
.ca-field-row:hover .ca-field-edit-btn { opacity:1; }
/* ── Toggle switch ───────────────────────────────────────────── */
.ca-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.ca-toggle-row:last-of-type { border-bottom:none; }
.ca-toggle-label {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text);
}
.ca-toggle {
  position:relative; width:40px; height:22px; border-radius:0;
  background:transparent; border:1px solid rgba(255,255,255,.2); cursor:pointer;
  transition:background .2s, border-color .2s; flex-shrink:0;
}
.ca-toggle::after {
  content:''; position:absolute; width:14px; height:14px; border-radius:0;
  background:rgba(255,255,255,.3); top:3px; left:3px;
  transition:transform .2s, background .2s;
}
.ca-toggle.active { background:#c8b84a; border-color:#c8b84a; }
.ca-toggle.active::after { transform:translateX(18px); background:#1c1a00; }
/* ── Action rows (log out / delete) ─────────────────────────── */
.ca-action-row {
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:0;
  padding:14px 16px; width:100%; cursor:pointer; box-sizing:border-box;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); transition:border-color .15s, color .15s;
}
.ca-action-row:hover { border-color:rgba(255,255,255,.28); color:var(--text); }
.ca-action-row.danger:hover { border-color:rgba(255,107,107,.45); color:#ff6b6b; }
.auth-tabs {
  display:flex; width:100%; max-width:420px;
  border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:4px;
}
.auth-tab {
  flex:1; background:none; border:none; border-bottom:2px solid transparent;
  padding:12px 0; font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:2px; color:var(--text-muted); text-transform:uppercase;
  cursor:pointer; transition:color .15s, border-color .15s; margin-bottom:-1px;
}
.auth-tab.active { color:var(--text); border-bottom-color:var(--gold); }
.ca-checkbox-row {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px;
  color:var(--text-muted); line-height:1.6; padding:4px 0 6px; user-select:none;
}
.ca-checkbox-row input[type="checkbox"] {
  flex-shrink:0; margin-top:2px; width:14px; height:14px;
  accent-color:#c8b84a; cursor:pointer; border-radius:0;
}
.ca-link {
  background:none; border:none; font-family:'Space Mono',monospace; font-size:10px;
  font-weight:400; color:var(--text-muted); cursor:pointer; padding:4px 0;
  letter-spacing:1px; text-align:left; transition:color .15s; text-transform:uppercase;
}
.ca-link:hover { color:var(--text); }
.ca-msg {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:400;
  letter-spacing:1px; text-align:left; padding:8px 0; line-height:1.8;
}
.ca-msg.error { color:#e05a5a; }
.ca-msg.success { color:#6abf7b; }
.ca-legal-note {
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.5px;
  color:var(--text-muted); line-height:1.8; margin:0;
}
.ca-legal-btn {
  background:none; border:none; font-family:inherit; font-size:inherit;
  letter-spacing:inherit; color:var(--text); cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:2px;
}
.ca-footer {
  padding:24px 28px; text-align:center; font-size:10px; color:var(--text-muted);
  font-family:'Space Mono',monospace; flex-shrink:0; letter-spacing:1px;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}

/* ── WELCOME MODAL ─────────────────────────────────────────── */
.welcome-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:welcomeFadeIn .3s ease;
}
.welcome-modal {
  background:var(--bg-surface); border:1px solid var(--border-hi);
  border-radius:0; padding:36px 32px 32px; max-width:420px; width:100%;
  text-align:center;
  animation:welcomeSlideUp .35s ease;
}
.welcome-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:32px; font-weight:400; letter-spacing:2px;
  color:var(--gold); margin-bottom:16px;
}
.welcome-body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-size:14px; line-height:1.7;
  color:var(--text-dim); margin-bottom:28px;
}
.welcome-btn {
  font-family:'Space Mono',monospace; font-size:14px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  background:var(--gold); color:#1c1a00; border:none; border-radius:8px;
  padding:12px 36px; cursor:pointer; transition:opacity .15s;
}
.welcome-btn:hover { opacity:.85; }
@keyframes welcomeFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes welcomeSlideUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   Activated by body.light class — toggled via account settings or localStorage
   Brand palette: cream, sky blue, sage, gold, lavender, coral
   ═══════════════════════════════════════════════════════════════════════════════ */

body.light {
  --bg:           #f4f1e8;
  --bg-chrome:    #ffffff;
  --bg-surface:   #faf8f2;
  --bg-raised:    #edeadf;
  --bg-raised-2:  #e4e1d6;
  --border:       #d4dcc8;
  --border-hi:    rgba(0,0,0,.10);
  --text:         #1a1a1a;
  --text-muted:   #666;
  --text-dim:     #888;
  --blue:         #42b0f5;
  --blue-l:       #2e8fd4;
  --gold:         #8a7400;
  --gold-bg:      #c8a82a;
  --overlay-soft: rgba(0,0,0,.04);
  --overlay-med:  rgba(0,0,0,.07);
  --overlay-hi:   rgba(0,0,0,.10);
  --shadow:       0 1px 3px rgba(0,0,0,.08);
  --map-bg:       #c8dff0;
  --page-bg:      #f0ece0;
  --ink:          #1a1a1a;
  --panel-bg:     rgba(255,255,255,.97);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body.light { background:var(--page-bg); color:var(--text); }
body.light #app { background:var(--bg); }

/* ── Top nav ──────────────────────────────────────────────────────────────── */
body.light .topnav { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
body.light .nav-logo img { filter:brightness(0) saturate(100%); }
body.light .nav-pill { color:var(--text-muted); }
body.light .nav-pill:hover { background:rgba(0,0,0,.04); color:var(--text); }
body.light .nav-pill.active { background:rgba(0,0,0,.04); color:var(--text); border-color:rgba(0,0,0,.10); }

/* ── Search (sidebar) ─────────────────────────────────────────────────────── */
body.light .search-inner { border-color:var(--border); }
body.light .search-inner::after { background:var(--gold-bg); }
body.light .search-input { color:var(--text); }
body.light .search-input::placeholder { color:var(--text-muted); }
body.light .search-input:focus { background:rgba(0,0,0,.02); }
body.light .search-clear { background:rgba(0,0,0,.04); border-left-color:var(--border); color:var(--text-muted); }
body.light .search-clear:hover { background:rgba(0,0,0,.08); color:var(--text); }
body.light .suggestions { background:var(--bg-chrome); border-color:var(--border); box-shadow:0 8px 24px rgba(0,0,0,.12); }
body.light .sug-item:hover { background:var(--bg-raised); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
body.light .sidebar { background:var(--bg-chrome); border-right:1px solid var(--border); }
body.light .search-box { border-bottom-color:var(--border); }

/* ── Panels (Buoy Detail, Location Detail, Alert Settings) ────────────── */
body.light .buoy-detail,
body.light .sa-panel { background:var(--bg-chrome); border-left:1px solid var(--border); }
body.light .bd-head { border-bottom:1px solid var(--border); }
body.light .bd-back,
body.light .mob-back {
  background:rgba(250,248,242,0.88);
  border-color:rgba(0,0,0,0.10);
  color:rgba(0,0,0,0.45);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* ── Detail Tabs ──────────────────────────────────────────────────────────── */
body.light .det-tabs { background:var(--bg-chrome); border-bottom:1px solid var(--border); }
body.light .det-tab { color:var(--text-muted); }
body.light .det-tab.active { color:var(--text); border-bottom-color:var(--blue); }
body.light .det-tab:hover { color:var(--text); }

/* ── Data cards ───────────────────────────────────────────────────────────── */
body.light .dc { background:var(--bg-surface); border:1px solid var(--border); box-shadow:var(--shadow); }
body.light .cc-card { background:var(--bg-surface); border:1px solid var(--border); }
body.light .cc-card--gold { background:#f5edc4; border-color:#d4c880; }
body.light .cc-card--gold .cc-card-lbl { color:rgba(0,0,0,.5); }
body.light .cc-card--gold .cc-card-big { color:#1a1a1a; }
body.light .cc-card-lbl { color:var(--text-muted); }
body.light .cc-card-big { color:var(--text); }
body.light .tc-section-header { color:var(--text-muted); }
body.light .cc-info-tip { background:var(--bg-chrome); border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,.1); color:var(--text-muted); }
body.light .cc-info-btn { color:var(--text-muted); border-color:var(--border); }
body.light .cc-info-btn:hover,
body.light .cc-info-btn:focus { color:var(--text); border-color:rgba(0,0,0,.2); }

/* ── Tide & current cards ─────────────────────────────────────────────────── */
body.light .tide-card { background:var(--bg-surface); border:1px solid var(--border); }
body.light .tide-event-label.high { color:#2e8fd4; }
body.light .tide-event-label.low { color:var(--text-muted); }
body.light .tide-event-ft { color:var(--text); }
body.light .tide-event-time { color:var(--text-muted); }
body.light .tide-event-row { border-bottom-color:var(--border); }
body.light .tide-loading { color:var(--text-muted); }
body.light .tide-bar { opacity:.85; }
body.light .cur-bar-col--now::after { background:var(--text); }

/* ── Solunar card ─────────────────────────────────────────────────────────── */
body.light .solunar-card { background:var(--bg-surface); border:1px solid var(--border); }

/* ── Weather block ────────────────────────────────────────────────────────── */
body.light .wx-block { background:var(--bg-surface); border:1px solid var(--border); }

/* ── Wind chart ───────────────────────────────────────────────────────────── */
body.light .wind-chart-wrap { background:var(--bg-surface); border:1px solid var(--border); }
body.light .wc-y-label { color:var(--text-muted); }
body.light .wc-time-label { color:var(--text-muted); }

/* ── Spot cards ───────────────────────────────────────────────────────────── */
body.light .spot-card { background:var(--bg-surface); border:1px solid var(--border); box-shadow:var(--shadow); }
body.light .spot-card:hover { background:var(--bg-raised); }
body.light .spot-card-name { color:var(--text); }
body.light .spot-card-coords { color:var(--text-muted); }
body.light .sp-stat-label { color:var(--text-muted); }
body.light .sp-stat-val { color:var(--text); }

/* ── Spot alert settings panel ────────────────────────────────────────────── */
body.light .sa-section { border-bottom-color:var(--border); }
body.light .sa-section-title { color:var(--text); }
body.light .sa-pill { background:var(--bg-raised); color:var(--text-muted); border:1px solid var(--border); }
body.light .sa-pill.active { background:var(--gold-bg); color:#1a1a1a; border-color:var(--gold-bg); }
body.light .sa-range-val { color:var(--text-muted); }
body.light .sa-save-btn { background:var(--gold-bg); color:#1a1a1a; }
body.light .sa-star { color:var(--border); }
body.light .sa-star.active { color:var(--gold); }

/* ── Match badge ──────────────────────────────────────────────────────────── */
body.light .spot-match-badge { background:var(--bg-raised); }

/* ── Forecast detail ──────────────────────────────────────────────────────── */
body.light .forecast-day-label { color:var(--text-muted); }
body.light .forecast-cond.met { color:var(--text); }
body.light .forecast-cond.unmet { color:#bbb; }
body.light .forecast-empty { background:var(--bg-surface); border:1px solid var(--border); }
body.light .forecast-empty-title { color:var(--text); }
body.light .forecast-empty-body { color:var(--text-muted); }
body.light .forecast-empty-btn { background:var(--gold-bg); color:#1a1a1a; }

/* ── Mobile panel ─────────────────────────────────────────────────────────── */
body.light .mob-panel { background:var(--bg-chrome); }
body.light .mob-panel-head { background:var(--bg-chrome); border-bottom:1px solid var(--border); }
body.light .mob-drag-pill { background:var(--border); }
body.light .mob-panel-title { color:var(--text); }
body.light .mob-panel-sub { color:var(--text-muted); }

/* ── Mobile header & nav ──────────────────────────────────────────────────── */
body.light .mob-header { background:rgba(255,255,255,.92) !important; backdrop-filter:blur(12px); }
body.light .mob-header img[alt="BigBuoy"] { filter:brightness(0) saturate(100%); }
body.light .mob-menu-btn { background:var(--bg-raised); border-color:var(--border); color:var(--text); }
body.light .mob-star-btn { background:var(--bg-raised); border-color:var(--border); color:var(--text); }
body.light .mob-nav-overlay { background:var(--bg-chrome) !important; }
body.light .mob-nav-close { background:var(--bg-raised); border-color:var(--border); color:var(--text); }
body.light .mob-nav-link { color:var(--text); }
body.light .mob-nav-link:active { opacity:.5; }

/* ── Mobile search ────────────────────────────────────────────────────────── */
body.light .mob-search-bar { background:rgba(255,255,255,.9); border-color:var(--border); color:var(--text-muted); }
body.light .mob-search-bar::placeholder { color:var(--text-muted); }

/* ── Account / Auth pages ─────────────────────────────────────────────────── */
body.light .ca-page { background:var(--bg); }
body.light .changelog-page { background:var(--bg); }
body.light .changelog-entry-title { color:var(--text); }
body.light .changelog-entry-desc { color:var(--text-muted); }
body.light .ca-card { background:var(--bg-chrome); border:1px solid var(--border); box-shadow:var(--shadow); }
body.light .ca-input { background:var(--bg-surface); border:1px solid var(--border); color:var(--text); }
body.light .ca-input:focus { border-color:var(--gold-bg); }
body.light .ca-input::placeholder { color:var(--text-muted); }
body.light .ca-section-lbl { color:var(--text-muted); }
body.light .ca-toggle-label { color:var(--text); }
body.light .ca-toggle { background:var(--bg-raised); border:1px solid var(--border); }
body.light .ca-toggle.active { background:var(--gold-bg); border-color:var(--gold-bg); }
body.light .ca-action-row { color:var(--text); border:1px solid var(--border); }
body.light .ca-action-row:hover { background:var(--bg-raised); border-color:rgba(0,0,0,.2); }
body.light .ca-action-row.danger { color:#d43030; }
body.light .ca-action-row.danger:hover { background:rgba(212,48,48,.06); }
body.light .ca-btn { background:var(--gold-bg); color:#1a1a1a; }
body.light .ca-google-btn { border-color:rgba(0,0,0,.15); color:var(--text); }
body.light .ca-google-btn:hover { border-color:rgba(0,0,0,.3); background:rgba(0,0,0,.03); }
body.light .contact-type-btn { border-color:rgba(0,0,0,.12); color:var(--text-muted); }
body.light .contact-type-btn:hover { border-color:rgba(0,0,0,.25); }
body.light .contact-type-btn.active { background:var(--gold-bg); border-color:var(--gold-bg); color:#1a1a1a; }
body.light .contact-textarea { border-color:rgba(0,0,0,.12); color:var(--text); }
body.light .contact-textarea:focus { border-color:var(--gold); }
body.light .ca-divider::before, body.light .ca-divider::after { background:rgba(0,0,0,.1); }
body.light .ca-link { color:var(--blue); }
body.light .ca-msg.success { color:#1a8a30; }
body.light .ca-msg.error { color:#d43030; }

/* ── Map controls ─────────────────────────────────────────────────────────── */
body.light .mc { background:rgba(255,255,255,.9); border-color:var(--border); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.1); }
body.light .mc:hover { background:var(--bg-raised); }

/* ── Buoy pill markers ────────────────────────────────────────────────────── */
body.light .bp-inner { background:rgba(255,255,255,.9) !important; border-color:var(--border) !important; backdrop-filter:blur(6px); }
body.light .bp-temp { color:var(--text); }
body.light .bp-nodata .bp-temp { color:var(--text-muted); }
body.light .bp-nofield .bp-temp { color:var(--text-muted); }
body.light .bp-nodata .bp-inner { border-color:var(--border); }
body.light .bp-stale .bp-inner { border-color:rgba(200,144,42,.5); }

/* ── Wind popup ───────────────────────────────────────────────────────────── */
body.light .wind-popup .leaflet-popup-content-wrapper { background:rgba(255,255,255,.95) !important; border-color:var(--border) !important; box-shadow:0 4px 16px rgba(0,0,0,.12) !important; backdrop-filter:blur(12px); }

/* ── Coord popup ──────────────────────────────────────────────────────────── */
body.light .coord-popup .leaflet-popup-content-wrapper { background:var(--gold-bg) !important; box-shadow:0 4px 16px rgba(0,0,0,.12) !important; }

/* ── Leaflet / map ────────────────────────────────────────────────────────── */
body.light .leaflet-container { background:var(--map-bg) !important; }
body.light .leaflet-control-attribution { background:rgba(255,255,255,.75) !important; color:rgba(0,0,0,.45) !important; }
body.light .leaflet-control-attribution a { color:rgba(0,0,0,.55) !important; }

/* ── Buoy list items ──────────────────────────────────────────────────────── */
body.light .bli { border-bottom-color:var(--border); }
body.light .bli:hover { background:var(--bg-raised); }
body.light .bli-name { color:var(--text); }
body.light .bli-temp { color:var(--blue); }
body.light .bli-sub { color:var(--text-muted); }

/* ── Forecast strip (desktop) ─────────────────────────────────────────────── */
body.light .forecast { background:var(--bg-chrome); border-top-color:var(--border); }
body.light .fc-label { color:var(--text-muted); border-right-color:var(--border); }
body.light .fc-day { border-right-color:var(--border); }
body.light .fc-day:hover { background:rgba(0,0,0,.03); }
body.light .fc-day.active { background:rgba(0,0,0,.04); }
body.light .fc-dayname { color:var(--text-dim); }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
body.light ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); }
body.light ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.25); }

/* ── Homepage ─────────────────────────────────────────────────────────────── */
body.light #homePage { background:#f4f1e8; }
body.light .hp-hero-art img { filter:invert(1); opacity:0.15; }
body.light .hp-flag { filter:invert(1) brightness(0.3); }
body.light .hp-search-wrap { background:rgba(255,255,255,0.9); }
body.light .hp-popular-link { background:rgba(255,255,255,0.85); }
body.light .hp-suggestions { background:#fff; border-color:var(--border); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
body.light .hp-suggestions .sug-item { color:var(--text); border-bottom-color:rgba(0,0,0,0.04); }
body.light .hp-suggestions .sug-item:hover { background:var(--bg-raised); }
body.light .hp-headline { color:var(--text); }
body.light .hp-ticker-word { color:var(--gold); }
body.light .hp-search-wrap { border-color:var(--border); }
body.light .hp-search-wrap::after { background:var(--gold-bg); }
body.light .hp-input { color:var(--text); }
body.light .hp-input::placeholder { color:var(--text-muted); }
body.light .hp-input:focus { background:rgba(0,0,0,.02); }
body.light .hp-search-btn { background:rgba(0,0,0,.04); border-left-color:var(--border); color:var(--text-muted); }
body.light .hp-search-btn:hover { background:rgba(0,0,0,.08); color:var(--text); }
body.light .hp-search-icon { color:var(--text-muted); }
body.light .hp-popular-title { color:var(--text-muted); }
body.light .hp-popular-link { border-color:var(--border); color:var(--text-dim); }
body.light .hp-popular-link:hover { background:var(--bg-raised); color:var(--text); }
body.light .hp-popular-id { color:var(--text-muted); }
body.light .hp-legal-link { color:var(--text-muted); }
body.light .hp-map-btn { color:var(--text-muted); }
body.light .hp-map-btn:hover { color:var(--text); }

/* ── Beta flag ────────────────────────────────────────────────────────────── */
body.light .beta-flag { background:rgba(255,255,255,.8); color:rgba(160,138,42,.7); border-color:rgba(200,168,42,.3); }

/* ── Welcome ──────────────────────────────────────────────────────────────── */
body.light .welcome-overlay { background:rgba(244,241,232,.92); }
body.light .welcome-card { background:var(--bg-chrome); border:1px solid var(--border); box-shadow:0 4px 24px rgba(0,0,0,.08); }
body.light .welcome-title { color:var(--text); }
body.light .welcome-body { color:var(--text-muted); }

/* ── Spots filter & toast ─────────────────────────────────────────────────── */
body.light .spots-filter-btn { background:var(--bg-surface); border:1px solid var(--border); color:var(--text-muted); }
body.light .spots-filter-btn:hover { background:var(--bg-raised); border-color:rgba(0,0,0,.18); }
body.light .spots-filter-btn.active { background:var(--gold-bg); color:#1a1a1a; border-color:var(--gold-bg); }
body.light .spots-filter-menu { background:var(--bg-chrome); border-color:var(--border); box-shadow:0 4px 16px rgba(0,0,0,.1); }
body.light .spots-empty { color:var(--text-muted); }
body.light .spots-auth-btn { border-color:var(--border); color:var(--text-muted); }
body.light .spots-auth-btn.primary { background:var(--gold-bg); color:#1a1a1a; border-color:var(--gold-bg); }

/* ── LocMatchBanner ───────────────────────────────────────────────────────── */
body.light .loc-match-banner { background:var(--bg-surface); border:1px solid var(--border); }
body.light .loc-match-banner:hover { background:var(--bg-raised); border-color:rgba(0,0,0,.12); }

/* ── Date selector ────────────────────────────────────────────────────────── */
body.light .loc-date-btn { color:var(--text-muted); border-color:var(--border); }
body.light .loc-date-btn:hover { background:var(--bg-raised); border-color:rgba(0,0,0,.18); }
body.light .loc-date-menu { background:var(--bg-chrome); border:1px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,.1); }
body.light .loc-date-opt { color:var(--text-muted); border-bottom-color:rgba(0,0,0,.06); }
body.light .loc-date-opt:hover { background:rgba(0,0,0,.04); }
body.light .loc-date-opt.active { color:var(--gold); }

/* ── Icon buttons ─────────────────────────────────────────────────────────── */
body.light .loc-icon-btn { color:var(--text-muted); }
body.light .loc-icon-btn:hover { background:var(--bg-raised); }
body.light .loc-icon-btn.loc-icon-saved { color:var(--gold); }
body.light .spot-edit-btn { color:var(--text-muted); }

/* ── Glass dropdowns (light-mode inverse) ─────────────────────────────────── */
body.light .wc-range-btn {
  background:rgba(255,255,255,0.85);
  border-color:rgba(0,0,0,0.12);
  color:rgba(0,0,0,0.55);
}
body.light .wc-range-btn:hover {
  background:rgba(255,255,255,0.95);
  border-color:rgba(0,0,0,0.20);
  color:rgba(0,0,0,0.85);
}
body.light .wc-range-menu {
  background:rgba(255,255,255,0.9);
  border-color:rgba(0,0,0,0.12);
}
body.light .wc-range-opt { color:rgba(0,0,0,0.55); }
body.light .wc-range-opt:hover { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.95); }
body.light .wc-range-opt.active { color:var(--gold); }
body.light .tide-picker-menu {
  background:rgba(255,255,255,0.9);
  border-color:rgba(0,0,0,0.12);
}
body.light .tide-picker-opt { color:rgba(0,0,0,0.55); }
body.light .tide-picker-opt:hover { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.95); }
body.light .tide-picker-opt.active { color:var(--gold); }
body.light .tide-picker-opt-dist { color:rgba(0,0,0,0.4); }
body.light .tide-picker-reset { color:rgba(0,0,0,0.4); }
body.light .tide-picker-empty { color:rgba(0,0,0,0.4); }

/* ── Map overlay controls ─────────────────────────────────────────────────── */
body.light .mc-dd-btn { background:rgba(255,255,255,.9); border-color:var(--border); color:var(--text); backdrop-filter:blur(12px); }
body.light .mc-dd-btn:hover { background:var(--bg-raised); border-color:rgba(0,0,0,.25); }
body.light .mc-dd-active { background:rgba(200,168,42,.12); color:var(--gold); }
body.light .mc-dd-menu { background:var(--bg-chrome); border-color:var(--border); box-shadow:0 4px 16px rgba(0,0,0,.1); }
body.light .mc-dd-opt { color:var(--text-muted); }
body.light .mc-dd-opt:hover { background:var(--bg-raised); color:var(--text); }
body.light .mc-dd-opt.active { color:var(--gold); }
body.light .mc-dd-opt.mc-dd-locked { color:rgba(0,0,0,.25); }
body.light .mc-dd-opt.mc-dd-locked:hover { background:none; color:rgba(0,0,0,.25); }
body.light .mc-dd-check { color:var(--text-muted); }
body.light .mc-dd-check:hover { background:var(--bg-raised); color:var(--text); }
body.light .wind-legend { background:rgba(255,255,255,.9); border-color:var(--border); backdrop-filter:blur(12px); }
body.light .wind-time-scrubber { background:rgba(255,255,255,.92); border-color:var(--border); backdrop-filter:blur(12px); }
body.light #searchBtn { background:rgba(255,255,255,.9); border-color:var(--border); color:var(--text); backdrop-filter:blur(12px); }
body.light #searchBtn:hover { background:var(--bg-raised); }
body.light .wts-label { color:var(--text-muted); }
body.light .wts-time { color:var(--text); }

/* ── Spot name input ──────────────────────────────────────────────────────── */
body.light .spot-name-input { background:var(--bg-surface); border-color:var(--border); color:var(--text); }

/* ── Live dot ─────────────────────────────────────────────────────────────── */
body.light .live-dot { background:#1a9a1a; }

/* ── Wind chart hover line ───────────────────────────────────────────────── */
body.light .wc-hover-line { background:rgba(0,0,0,.35); }

/* ── Wave chart light mode ──────────────────────────────────────────────── */
body.light .wv-hover-line { background:rgba(0,0,0,.35); }
body.light .wv-swell-info { color:rgba(0,0,0,.3); }

/* ── Tide / current midlines & markers ───────────────────────────────────── */
body.light .tide-wave-midline { background:repeating-linear-gradient(to right, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 4px, transparent 4px, transparent 8px); }
body.light .tide-sun-marker { background:rgba(0,0,0,.15); }
body.light .tide-sun-marker:hover { background:rgba(0,0,0,.35); }
body.light .cur-wave-midline { background:rgba(0,0,0,.10); }

/* ── Solunar ─────────────────────────────────────────────────────────────── */
body.light .sol-rating-block { border-color:var(--border); }
body.light .sol-star { color:rgba(0,0,0,.12); }
body.light .solunar-row { border-bottom-color:rgba(0,0,0,.08); }

/* ── Weather rows & wind arrow ───────────────────────────────────────────── */
body.light .wx-row { border-color:var(--border); }
body.light .wx-wind-arrow { border-color:rgba(0,0,0,.12); }

/* ── Time scrubber controls ──────────────────────────────────────────────── */
body.light .wts-btn { border-color:rgba(0,0,0,.15); }
body.light .wts-btn:hover:not(:disabled) { border-color:rgba(0,0,0,.3); }
body.light .wts-slider { background:rgba(0,0,0,.10); }
body.light .wts-slider::-webkit-slider-thumb { border-color:rgba(255,255,255,.9); }
body.light .wts-slider::-moz-range-thumb { border-color:rgba(255,255,255,.9); }

/* ── Forecast dots loading shimmer ───────────────────────────────────────── */
body.light .forecast-dots--loading { background:linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%); background-size:200% 100%; }

/* ── Location match details ───────────────────────────────────────────────── */
body.light .loc-match-details { border-top-color:rgba(0,0,0,.08); }

/* ── No-data text ────────────────────────────────────────────────────────── */
body.light .cc-no-data { color:rgba(0,0,0,.2); }

/* ── Mobile locate button ────────────────────────────────────────────────── */
body.light .mob-locate-btn { background:var(--bg-raised); border-color:var(--border); color:var(--text); }
body.light .mob-locate-btn:active { background:rgba(0,0,0,.06); }


/* ── Map layer picker ────────────────────────────────────────────────────── */
body.light .mlp-btn { background:rgba(255,255,255,.9); border-color:var(--border); color:var(--text); backdrop-filter:blur(12px); }
body.light .mlp-btn:hover { background:var(--bg-raised); }
body.light .mlp-btn.active { background:rgba(200,168,42,.12); color:var(--gold); }
body.light .mlp-btn:last-child { border-right-color:var(--border); }

/* ── View switcher menu ──────────────────────────────────────────────────── */
body.light #viewSwitcherMenu { background:var(--bg-chrome); border-color:var(--border); box-shadow:0 4px 16px rgba(0,0,0,.1); }

/* ── Auth tabs ───────────────────────────────────────────────────────────── */
body.light .auth-tabs { border-bottom-color:var(--border); }
body.light .auth-tab { color:var(--text-muted); }
body.light .auth-tab:hover { color:var(--text); }
body.light .auth-tab.active { color:var(--text); border-bottom-color:var(--gold-bg); }

/* ── Account field & toggle rows ─────────────────────────────────────────── */
body.light .ca-field-row { border-bottom-color:var(--border); }
body.light .ca-toggle-row { border-bottom-color:rgba(0,0,0,.06); }
body.light .ca-toggle::after { background:rgba(0,0,0,.25); }
body.light .ca-toggle.active::after { background:#fff; }

/* ── Weather chart (hourly scroll) ───────────────────────────────────────── */
body.light .wx-hover-line { background:rgba(0,0,0,.35); }
body.light .wx-axis-row span { color:rgba(0,0,0,.4); }
body.light .wx-now-label { color:rgba(0,0,0,.8); background:rgba(0,0,0,.06); }
body.light .wx-wind-scroll::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); }

/* ── Compass direction label ─────────────────────────────────────────────── */
body.light .cc-dir-lbl { color:rgba(0,0,0,.4); }

/* ── Mobile search focus & attribution ───────────────────────────────────── */
body.light .mob-search-bar:focus { background:rgba(0,0,0,.03); }
body.light .mob-attribution { color:rgba(0,0,0,.3); }
body.light .mob-attribution a { color:rgba(0,0,0,.4); }

/* ── Buoy count badge ────────────────────────────────────────────────────── */
body.light #buoyCount { background:rgba(255,255,255,.88); border-color:var(--border); }

/* ── Buoy list pill ──────────────────────────────────────────────────────── */
body.light .bli-pill { color:var(--text); }

/* ── Spot rows & filter options ──────────────────────────────────────────── */
body.light .sp-row { border-bottom-color:rgba(0,0,0,.06); }
body.light .spots-filter-opt { border-bottom-color:rgba(0,0,0,.06); }
body.light .spots-filter-opt:hover { background:rgba(0,0,0,.04); }

/* ── Nearby buoy rows ───────────────────────────────────────────────────── */
body.light .nb-row { border-bottom-color:rgba(0,0,0,.06); }

/* ── Tide event list ─────────────────────────────────────────────────────── */
body.light .tide-event-list { border-top-color:rgba(0,0,0,.08); }

/* ── Forecast day rows ───────────────────────────────────────────────────── */
body.light .forecast-day-row { border-bottom-color:rgba(0,0,0,.06); }
body.light .s7d-card { border-bottom-color:rgba(0,0,0,.06); }
body.light .s7d-card:hover { background:var(--bg-raised); }
body.light .s7d-row { border-bottom-color:rgba(0,0,0,.04); }
body.light .s7d-cond.met { color:var(--text-muted); }
body.light .s7d-cond.unmet { color:#bbb; }

/* ── Suggestion item divider ─────────────────────────────────────────────── */
body.light .sug-item { border-bottom-color:rgba(0,0,0,.06); }

/* ── Alert settings range track & clear button ───────────────────────────── */
body.light .sa-range-track input::-webkit-slider-runnable-track { background:rgba(0,0,0,.08); }
body.light .sa-range-track input::-moz-range-track { background:rgba(0,0,0,.08); }
body.light .sa-clear-btn:hover { border-color:rgba(0,0,0,.18); }

/* ── Search button loading spinner ───────────────────────────────────────── */
body.light #searchBtn.loading #btnDot { border-top-color:var(--text); }


/* ═══════════════════════════════════════════════════════════
   LOCATION SEO PAGES  (/location/:slug)
   Prefix: loc-
   ═══════════════════════════════════════════════════════════ */

#locationPage {
  position:fixed; inset:0; z-index:900;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:var(--bg); scroll-behavior:smooth;
  scrollbar-width:none;
}
#locationPage::-webkit-scrollbar { display:none; }

/* ── HERO ────────────────────────────────────────────────── */
.loc-hero {
  min-height:92vh; display:flex; align-items:center;
  padding:128px 64px 72px; box-sizing:border-box;
  position:relative; overflow:hidden;
}
.loc-hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.loc-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(5,5,5,.72) 0%, rgba(5,5,5,.62) 55%, rgba(5,5,5,.80) 100%);
}
.loc-hero-content {
  position:relative; z-index:2; max-width:680px;
}

/* Breadcrumb */
.loc-breadcrumb {
  display:flex; align-items:center; gap:8px; margin-bottom:28px;
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-muted);
}
.loc-bc-link {
  color:var(--text-muted); text-decoration:none; transition:color .15s;
}
.loc-bc-link:hover { color:var(--text); }
.loc-bc-sep { opacity:.35; }
.loc-bc-cur { opacity:.6; }

/* Tags */
.loc-tags { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.loc-tag {
  font-family:'Space Mono',monospace; font-size:8px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(200,184,74,.3); padding:3px 9px;
  background:rgba(200,184,74,.07);
}

/* Headline */
.loc-headline {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:56px; font-weight:700; letter-spacing:-0.03em;
  color:var(--text); line-height:1.05; margin:0 0 6px;
}
.loc-region {
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:18px;
}
.loc-tagline {
  font-family:'DM Sans',sans-serif; font-size:16px; color:rgba(216,228,214,.75);
  line-height:1.55; margin:0 0 32px; max-width:540px;
}

/* Search — reuses hp- classes, just scoped inside hero */
.loc-search { margin-bottom:28px; max-width:520px; }

/* Quick buoy pills */
.loc-quick-label {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;
}
.loc-quick-buoys { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.loc-quick-buoy {
  display:flex; flex-direction:column; gap:2px;
  padding:10px 14px;
  background:rgba(5,5,5,.35); border:1px solid rgba(255,255,255,.14);
  text-decoration:none; transition:background .15s, border-color .15s;
}
.loc-quick-buoy:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.25); }
.loc-qb-name {
  font-family:'Space Mono',monospace; font-size:10px; color:rgba(216,228,214,.9);
}
.loc-qb-id {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.5px;
  color:rgba(216,228,214,.4);
}

/* Map open button */
.loc-map-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid rgba(255,255,255,.15);
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
  text-transform:uppercase; color:rgba(216,228,214,.55);
  padding:10px 18px; cursor:pointer; transition:color .15s, border-color .15s;
}
.loc-map-btn:hover { color:var(--text); border-color:rgba(255,255,255,.35); }

/* ── SECTION HEADERS (shared) ────────────────────────────── */
.loc-section-header {
  padding:64px 64px 40px;
  border-bottom:1px solid var(--border);
}
.loc-section-label {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.loc-section-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:30px; font-weight:700; letter-spacing:-0.025em;
  color:var(--text); line-height:1.2; margin:0 0 10px;
}
.loc-section-sub {
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--text-muted); line-height:1.55; margin:0;
  max-width:560px;
}
.loc-map-link {
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; color:var(--gold); text-decoration:underline;
  text-underline-offset:2px;
}
.loc-map-link:hover { opacity:.8; }

/* ── STATIONS GRID ───────────────────────────────────────── */
.loc-stations { border-bottom:1px solid var(--border); }
.loc-buoy-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  border-top:1px solid var(--border);
}
.loc-buoy-card {
  display:flex; flex-direction:column;
  padding:24px 28px; text-decoration:none;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transition:background .15s;
  background:var(--bg);
}
.loc-buoy-card:hover { background:var(--bg-surface); }

.loc-bc-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px; margin-bottom:4px;
}
.loc-bc-name {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:14px; font-weight:600; color:var(--text); letter-spacing:-0.01em;
  line-height:1.3;
}
.loc-bc-note {
  font-family:'Space Mono',monospace; font-size:8px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted);
  border:1px solid var(--border); padding:2px 7px; white-space:nowrap;
  flex-shrink:0;
}
.loc-bc-id {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  color:var(--text-muted); margin-bottom:18px;
}
.loc-bc-fields {
  display:flex; flex-wrap:wrap; gap:14px 20px; margin-bottom:18px;
}
.loc-bc-field { display:flex; flex-direction:column; gap:4px; }
.loc-bc-data-label {
  font-family:'Space Mono',monospace; font-size:8px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted);
}
.loc-bc-val {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:15px; font-weight:500; color:var(--text);
}
.loc-bc-no-data {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  color:var(--text-muted); margin-bottom:18px; line-height:1.5;
}
/* Shimmer placeholder while buoy data loads */
.loc-bc-shimmer {
  color:transparent; background:var(--bg-raised);
  border-radius:2px; animation:loc-shimmer 1.4s ease-in-out infinite;
  user-select:none;
}
@keyframes loc-shimmer {
  0%, 100% { opacity:.4; }
  50%       { opacity:.9; }
}
.loc-bc-cta {
  display:flex; align-items:center; gap:6px;
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); margin-top:auto;
  transition:gap .15s;
}
.loc-buoy-card:hover .loc-bc-cta { gap:9px; }

/* ── FEATURES GRID ───────────────────────────────────────── */
.loc-features { border-bottom:1px solid var(--border); }
.loc-feat-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
}
.loc-feat-card {
  padding:36px 40px;
  border-right:1px solid var(--border);
}
.loc-feat-card:last-child { border-right:none; }
.loc-feat-card:first-child { padding-left:64px; }
.loc-feat-card:last-child { padding-right:64px; }
.loc-feat-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:15px; font-weight:700; letter-spacing:-0.01em;
  color:var(--text); line-height:1.3; margin-bottom:8px;
}
.loc-feat-body {
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--text-muted); line-height:1.65; margin:0;
}

/* ── ABOUT SECTION ───────────────────────────────────────── */
.loc-about {
  padding:72px 64px;
  border-bottom:1px solid var(--border);
}
.loc-about-inner { max-width:720px; }
.loc-about-label {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.loc-about-title {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:26px; font-weight:700; letter-spacing:-0.02em;
  color:var(--text); line-height:1.25; margin:0 0 28px;
}
.loc-about-body { display:flex; flex-direction:column; gap:16px; }
.loc-about-body p {
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--text-muted); line-height:1.75; margin:0;
}
.loc-about-meta {
  display:flex; align-items:center; gap:12px; margin-top:28px;
  flex-wrap:wrap;
}
.loc-about-meta-item {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted);
}
.loc-about-meta-sep { color:var(--border-hi); font-size:11px; }

/* ── NOT FOUND ───────────────────────────────────────────── */
.loc-not-found {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.loc-nf-inner { text-align:center; padding:48px 24px; max-width:420px; }
.loc-nf-headline {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:22px; font-weight:700; color:var(--text); margin-bottom:12px;
}
.loc-nf-body {
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--text-muted); line-height:1.6; margin:0 0 24px;
}
.loc-nf-btn {
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; background:var(--gold); color:var(--ink);
  border:none; padding:14px 28px; cursor:pointer;
}
.loc-nf-btn:hover { opacity:.85; }

/* ── LOCATIONS INDEX PAGE ────────────────────────────────── */
#locationsIndexPage {
  position:fixed; inset:0; z-index:900;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:var(--bg); scrollbar-width:none;
}
.lxi-hero {
  padding:140px 64px 64px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(99,122,170,.07) 0%, transparent 100%);
}
.lxi-hero-inner { max-width:900px; margin:0 auto; }
.lxi-headline {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  font-size:clamp(32px,4vw,52px); font-weight:700;
  color:var(--text); letter-spacing:-1px; line-height:1.1; margin:0 0 20px;
}
.lxi-sub {
  font-family:'DM Sans',sans-serif; font-size:17px; color:var(--text-muted);
  line-height:1.7; max-width:520px; margin:0 0 48px;
}
.lxi-stats {
  display:flex; gap:0; border:1px solid var(--border);
  width:fit-content;
}
.lxi-stat {
  padding:20px 36px; border-right:1px solid var(--border); text-align:left;
}
.lxi-stat:last-child { border-right:none; }
.lxi-stat-n {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  font-size:28px; font-weight:700; letter-spacing:-0.5px;
  color:var(--gold); line-height:1;
}
.lxi-stat-label {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted); margin-top:4px;
}
.lxi-region {
  border-bottom:1px solid var(--border);
}
.lxi-region-header {
  display:flex; align-items:center; gap:16px;
  padding:36px 64px 24px;
}
.lxi-region-title {
  font-family:'DM Sans',sans-serif; font-size:18px; font-weight:700;
  color:var(--text); margin:0; letter-spacing:0;
}
.lxi-region-count {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-muted);
  background:rgba(255,255,255,.06); padding:3px 8px;
}
.lxi-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.lxi-card {
  display:flex; flex-direction:column;
  padding:32px 28px 28px; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-decoration:none; position:relative;
  transition:background .15s;
  min-height:160px;
}
.lxi-card:hover { background:rgba(255,255,255,.03); }
.lxi-card-region {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;
}
.lxi-card-name {
  font-family:'DM Sans',sans-serif; font-size:22px; font-weight:700;
  color:var(--text); line-height:1.15; margin-bottom:10px;
}
.lxi-card-tagline {
  font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-muted);
  line-height:1.6; margin:0; flex:1;
}
.lxi-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px;
}
.lxi-card-stations {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-muted);
}
.lxi-card-cta {
  display:flex; align-items:center; gap:5px;
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--gold);
  transition:gap .15s;
}
.lxi-card:hover .lxi-card-cta { gap:8px; }
.lxi-about {
  padding:72px 64px; border-bottom:1px solid var(--border);
}
.lxi-about-inner { max-width:900px; margin:0 auto; }
.lxi-about-title {
  font-family:'DM Sans',sans-serif; font-size:28px; font-weight:700;
  color:var(--text); margin:0 0 16px; line-height:1.2;
}
.lxi-about-body {
  font-family:'DM Sans',sans-serif; font-size:15px; color:var(--text-muted);
  line-height:1.8; margin:0 0 48px; max-width:640px;
}
.lxi-about-features {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border:1px solid var(--border);
}
.lxi-about-feat {
  padding:28px 24px; border-right:1px solid var(--border);
}
.lxi-about-feat:last-child { border-right:none; }
.lxi-about-feat-text {
  font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-muted);
  line-height:1.7; margin:10px 0 0;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.loc-faq {
  border-top:1px solid var(--border);
}
.loc-faq-list {
  display:grid; grid-template-columns:1fr 1fr;
}
.loc-faq-item {
  padding:32px 28px; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.loc-faq-item:nth-child(odd) { padding-left:64px; }
.loc-faq-item:nth-child(even) { padding-right:64px; }
.loc-faq-q {
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
  color:var(--text); margin-bottom:10px; line-height:1.3;
}
.loc-faq-a {
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--text-muted); line-height:1.7;
}

/* ── RELATED LOCATIONS ───────────────────────────────────── */
.loc-related {
  border-top:1px solid var(--border);
}
.loc-related-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-left:1px solid var(--border);
}
.loc-related-card {
  display:flex; flex-direction:column; gap:4px;
  padding:28px 24px; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-decoration:none; position:relative;
  transition:background .15s;
}
.loc-related-card:hover { background:rgba(255,255,255,.03); }
.loc-rel-region {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:2px;
}
.loc-rel-name {
  font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600;
  color:var(--text); line-height:1.2;
}
.loc-rel-buoys {
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--gold); margin-top:4px;
}
.loc-rel-arrow {
  position:absolute; bottom:24px; right:20px;
  color:var(--text-muted); opacity:.5;
  transition:opacity .15s, transform .15s;
}
.loc-related-card:hover .loc-rel-arrow { opacity:1; transform:translateX(3px); }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width:768px) {
  /* Fix position:fixed pages — flow under mob-header instead of overlapping */
  #locationPage, #locationsIndexPage {
    position:relative; inset:auto; z-index:auto;
    flex:1; overflow-y:auto; height:auto;
  }
  .loc-hero {
    min-height:auto; padding:32px 20px 48px; align-items:flex-start;
  }
  .loc-headline { font-size:34px; }
  .loc-tagline { font-size:14px; }
  .loc-search { max-width:100%; }
  .loc-quick-buoy { padding:12px 14px; min-height:44px; box-sizing:border-box; }
  .loc-quick-buoys { gap:6px; }
  .loc-map-btn { padding:16px 18px; min-height:44px; box-sizing:border-box; }
  .loc-section-header { padding:40px 20px 28px; }
  .loc-section-title { font-size:22px; }
  .loc-buoy-grid { grid-template-columns:1fr; }
  .loc-buoy-card { border-right:none; padding:20px; }
  .loc-feat-grid { grid-template-columns:1fr 1fr; }
  .loc-feat-card { padding:28px 20px; }
  .loc-feat-card:first-child { padding-left:20px; }
  .loc-feat-card:last-child { padding-right:20px; border-right:none; }
  .loc-feat-card:nth-child(2) { border-right:none; }
  .loc-feat-card:nth-child(1),
  .loc-feat-card:nth-child(2) { border-bottom:1px solid var(--border); }
  .loc-about { padding:40px 20px; }
  .loc-about-title { font-size:20px; }
  .loc-related-grid { grid-template-columns:1fr 1fr; border-left:none; }
  .loc-related-card:nth-child(2n) { border-right:none; }
  .loc-faq-list { grid-template-columns:1fr; border-left:none; }
  .loc-faq-item { padding:24px 20px; border-right:none; }
  .lxi-hero { padding:20px 20px 40px; }
  .lxi-stats { flex-direction:column; width:100%; }
  .lxi-stat { padding:14px 20px; border-right:none; border-bottom:1px solid var(--border); }
  .lxi-stat:last-child { border-bottom:none; }
  .lxi-stat-n { font-size:24px; }
  .lxi-region-header { padding:24px 20px 16px; }
  .lxi-grid { grid-template-columns:1fr 1fr; border-left:none; }
  .lxi-card { padding:24px 16px 20px; min-height:auto; }
  .lxi-card-name { font-size:17px; }
  .lxi-card:nth-child(2n) { border-right:none; }
  .lxi-card:last-child:nth-child(odd) { border-right:none; }
  .lxi-about { padding:40px 20px; }
  .lxi-about-features { grid-template-columns:1fr 1fr; }
  .lxi-about-feat:nth-child(2n) { border-right:none; }
  .lxi-about-feat:nth-child(1),
  .lxi-about-feat:nth-child(2) { border-bottom:1px solid var(--border); }
}

/* ── BigBuoy Referral Pages ─────────────────────────────────────────────────
   Append this to public/components.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Shared utils ─────────────────────────────────────────────────────────── */

.ref-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Referral Dashboard (/refer) ─────────────────────────────────────────── */

#referPage {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  padding-top: 76px; /* matches .app padding-top for topnav */
}

/* Hero */
.ref-hero {
  padding: 56px 64px 48px;
  max-width: 900px;
  margin: 0 auto;
}

.ref-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.ref-headline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.1;
}

.ref-subtext {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
}

/* Share block */
.ref-share-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px 48px;
}

.ref-link-row {
  display: flex;
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 14px;
  overflow: hidden;
}

.ref-link-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface);
  border: none;
  padding: 14px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text);
  outline: none;
}

.ref-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  min-width: 130px;
  background: var(--gold);
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.ref-copy-btn:hover { opacity: 0.9; }

.ref-copy-btn.copied {
  background: #21B600;
  color: #fff;
}

.ref-share-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ref-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ref-share-btn:hover {
  border-color: rgba(255,255,255,.15);
  color: var(--text);
}

.ref-share-primary {
  border-color: var(--blue);
  color: var(--blue);
}

.ref-share-primary:hover {
  border-color: var(--blue);
  background: rgba(99,122,170,.1);
  color: var(--blue);
}

/* Stats */
.ref-stats-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px 48px;
}

.ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}

.ref-stat-card {
  background: var(--bg-surface);
  padding: 20px 24px;
}

.ref-stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ref-stat-value {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.ref-stat-tier-name {
  font-size: 20px;
  padding-top: 4px;
}

.ref-stat-reward {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 6px;
}

/* Referral list */
.ref-list {
  border: 1px solid var(--border);
}

.ref-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.ref-list-row:last-child { border-bottom: none; }

.ref-list-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

.ref-list-date {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.ref-list-empty {
  padding: 28px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Tier block */
.ref-tier-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px 48px;
}

.ref-progress-wrap { margin-bottom: 20px; }

.ref-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ref-progress-bar {
  height: 4px;
  background: rgba(255,255,255,.08);
}

.ref-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transition: width 0.5s ease;
  min-width: 4px;
}

.ref-tiers { display: flex; flex-direction: column; gap: 8px; }

.ref-tier-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.ref-tier-row.active {
  border-color: var(--gold);
  background: rgba(200,184,74,.05);
}

.ref-tier-row.unlocked { border-color: rgba(33,182,0,.25); }

.ref-tier-icon {
  width: 28px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ref-tier-row.active  .ref-tier-icon,
.ref-tier-row.unlocked .ref-tier-icon { color: var(--gold); }

.ref-tier-info { flex: 1; }

.ref-tier-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.ref-tier-row.active   .ref-tier-name,
.ref-tier-row.unlocked .ref-tier-name { color: var(--text); }

.ref-tier-desc {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ref-tier-req {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ref-tier-row.active   .ref-tier-req { color: var(--gold); }
.ref-tier-row.unlocked .ref-tier-req { color: #21B600; }

/* FAQ */
.ref-faq-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px 80px;
}

.ref-faq-list { border-top: 1px solid var(--border); }

.ref-faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.ref-faq-q {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.ref-faq-a {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Loading / auth gate */
.ref-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.ref-auth-gate {
  max-width: 480px;
  margin: 100px auto;
  padding: 0 64px;
  text-align: center;
}

.ref-auth-headline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

.ref-auth-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.ref-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--gold);
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.15s;
}

.ref-auth-btn:hover { opacity: 0.9; }


/* ── Referral Landing Page (/r/:code) ────────────────────────────────────── */

#referralLandingPage {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

/* Hero */
.rl-hero {
  padding: 80px 64px 60px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.rl-byline {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.rl-referrer-name { color: var(--gold); }

.rl-headline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.1;
}

.rl-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Value props */
.rl-props-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px 56px;
}

.rl-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.rl-prop {
  background: var(--bg-surface);
  padding: 24px 20px;
}

.rl-prop-tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.rl-prop-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.rl-prop-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Form */
.rl-form-section {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 64px 56px;
}

.rl-form-wrap {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 32px;
}

.rl-form-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.rl-form { display: flex; flex-direction: column; gap: 14px; }

.rl-input-wrap { display: flex; flex-direction: column; gap: 6px; }

.rl-input-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rl-input {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.rl-input:focus { border-color: var(--gold); }
.rl-input::placeholder { color: var(--text-muted); opacity: 0.5; }

.rl-activity-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rl-activity-pill {
  padding: 12px 16px;
  min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--border);
  background: transparent;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.rl-activity-pill.active {
  border-color: var(--gold);
  background: rgba(200,184,74,.1);
  color: var(--gold);
}

.rl-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--blue);
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
  margin-top: 4px;
}

.rl-submit-btn:hover    { opacity: 0.9; }
.rl-submit-btn:disabled { opacity: 0.5; cursor: default; }

.rl-fine {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  opacity: 0.65;
}

.rl-error {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #ff6b6b;
  padding: 10px 14px;
  border: 1px solid rgba(255,107,107,.3);
  background: rgba(255,107,107,.05);
}

/* Success state */
.rl-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.rl-success-icon {
  margin-bottom: 4px;
}

.rl-success-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.rl-success-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.rl-success-body strong { color: var(--text); }

.rl-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 20px;
  min-height: 44px; box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.rl-explore-btn:hover {
  border-color: rgba(255,255,255,.15);
  color: var(--text);
}

/* Social proof */
.rl-social-proof {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 64px 80px;
  text-align: center;
}

.rl-social-count {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.rl-no-account-btn {
  background: transparent;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.rl-no-account-btn:hover { color: var(--text); }


/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Referral Dashboard */
  #referPage { padding-top: 0; }

  .ref-hero          { padding: 48px 20px 32px; }
  .ref-headline      { font-size: 28px; }

  .ref-share-block,
  .ref-stats-block,
  .ref-tier-block,
  .ref-faq-block     { padding-left: 20px; padding-right: 20px; }

  .ref-link-row      { flex-direction: column; }
  .ref-copy-btn      { height: 52px; }

  .ref-share-btns    { flex-direction: column; }
  .ref-share-btn     { justify-content: center; height: 52px; }

  .ref-stats-grid    { grid-template-columns: 1fr; }

  .ref-auth-gate     { padding: 0 20px; margin: 60px auto; }

  /* Landing Page */
  .rl-hero           { padding: 60px 20px 40px; }
  .rl-headline       { font-size: 28px; }

  .rl-props-wrap     { padding: 0 20px 40px; }
  .rl-props          { grid-template-columns: 1fr; }

  .rl-form-section   { padding: 0 20px 40px; }
  .rl-form-wrap      { padding: 24px 20px; }

  .rl-social-proof   { padding: 0 20px 60px; }

  .rl-submit-btn     { padding: 18px 24px; }
}