:root {
  --brand-navy: #003B4A;
  --brand-cyan: #1BBFDD;
  --brand-red: #EE2B37;
  --brand-yellow: #FDD964;
  --brand-wood: #6B4230;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;

  --radius-nav: 14px;
  --radius-card: 16px;
  --radius-tile: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px rgba(0, 59, 74, .14);
  --shadow-nav: 0 6px 18px rgba(0, 59, 74, .12), 0 2px 6px rgba(0, 59, 74, .08);
  --shadow-menu: 0 24px 55px rgba(0, 59, 74, .20);

  --ease: 180ms ease;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --page: #F7F8F9;
  --card: #FFFFFF;
  --soft: #FFFFFF;
  --soft2: #F5F6F8;
  --soft3: #EEF0F3;
  --border: #E6E8EB;
  --text: #1C1F22;
  --muted: #6F767D;
  --ink: #003B4A;
  --grid: #ECEEF1;
  --dots: rgba(0, 59, 74, .13);
  --navy: #003B4A;
  --good: #3D6B4F;
  --bad: #B4433F;
  --neutral: #6F767D;
  --soon-bg: rgba(253, 217, 100, .18);
  --soon-border: rgba(253, 217, 100, .55);
  --soon-text: #B07B3E;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0F1A1F;
  --card: #15242B;
  --soft: #1B2C34;
  --soft2: #1F3139;
  --soft3: #27404A;
  --border: rgba(255, 255, 255, .10);
  --text: #F2F1EC;
  --muted: #A3AFB4;
  --ink: #DCE9EE;
  --grid: rgba(255, 255, 255, .08);
  --dots: rgba(255, 255, 255, .07);
  --navy: #7FD3E6;
  --good: #8FD9A8;
  --bad: #F29B97;
  --neutral: #A3AFB4;
  --soon-bg: rgba(253, 217, 100, .14);
  --soon-border: rgba(253, 217, 100, .40);
  --soon-text: #FDD964;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--page);
  background-image: radial-gradient(var(--dots) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 2px; }

.card-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.micro-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.shell-footer {
  box-sizing: border-box;
  width: calc(100% - 80px);
  max-width: 1432px;
  margin: 0 auto 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}
.shell-footer p { margin: 0; }

@media (max-width: 900px) {
  .shell-footer { width: calc(100% - 32px); }
}

/* Shared components (surfhub-ui.js) ———————————————————————— */

.picker { position: relative; }
.picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px 0 13px;
  border-radius: var(--radius-input);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease;
}
.picker-btn:hover, .picker-btn[aria-expanded="true"] { border-color: var(--brand-cyan); }
.picker-icon, .picker-caret { display: inline-flex; flex-shrink: 0; }
.picker-icon svg, .picker-caret svg { width: 100%; height: 100%; }
.picker-icon { width: 15px; height: 15px; color: var(--brand-cyan); }
.picker-caret { width: 13px; height: 13px; color: var(--muted); transition: transform 200ms ease; }
.picker-btn[aria-expanded="true"] .picker-caret { transform: rotate(180deg); }

.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 43, 55, .22);
}
.popover[hidden] { display: none; }

.loc-menu { width: 268px; max-height: 320px; overflow-y: auto; padding: 6px; }
.loc-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; }
.loc-option:hover { background: var(--soft3); }
.loc-option.selected { background: var(--soft2); }
.loc-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--border); flex-shrink: 0; }
.loc-option.selected .loc-dot { background: var(--brand-cyan); }
.loc-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-option.selected .loc-name { font-weight: 600; }
.loc-area { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }