/* ═══════════════════════════════════════════════════════════
   APP STYLES (app.html)
═══════════════════════════════════════════════════════════ */

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

    :root {
      --bg: #050D1A;
      --accent: #38BDF8;
      --accent-glow: rgba(56, 189, 248, 0.3);
      --glass: rgba(255, 255, 255, 0.06);
      --glass-border: rgba(255, 255, 255, 0.10);
      --text: #F0F6FF;
      --text-muted: rgba(240, 246, 255, 0.55);
      --text-faint: rgba(240, 246, 255, 0.28);
      --text-faded: rgba(240, 246, 255, 0.3);
      --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --nav-h: 68px;
    }

    :root[data-theme="light"] {
      --bg: #F4F1EC;
      --accent: #2563EB;
      --accent-glow: rgba(37, 99, 235, 0.18);
      --glass: rgba(255, 255, 255, 0.75);
      --glass-border: rgba(0, 0, 0, 0.07);
      --text: #000000;
      --text-muted: #000000;
      --text-faint: #000000;
      --text-faded: #6B7280;
    }

    /* ── LIGHT MODE OVERRIDES ───────────────────────────── */
    [data-theme="light"] body {
      background: #F4F1EC;
    }

    /* Scrollbar */
    [data-theme="light"] ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.03);
    }

    [data-theme="light"] ::-webkit-scrollbar-thumb {
      background: rgba(37, 99, 235, 0.25);
    }

    [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
      background: rgba(37, 99, 235, 0.45);
    }

    /* Top bar (mobile) */
    [data-theme="light"] #top-bar {
      background: transparent;
      border-bottom-color: transparent;
    }

    [data-theme="light"] #mobile-menu-btn {
      color: rgba(28, 28, 40, 0.75) !important;
    }

    [data-theme="light"] #mobile-menu-btn:hover {
      color: var(--accent) !important;
    }

    /* Change logo on light mode */
    [data-theme="light"] .side-logo img,
    [data-theme="light"] .logo-img {
      content: url("./public/awaiit-logo-black.webp");
    }

    [data-theme="light"] .avatar-btn {
      color: rgba(28, 28, 40, 0.75) !important;
      background: none !important;
      border: none !important;
    }

    [data-theme="light"] .avatar-btn:hover {
      color: var(--accent) !important;
      background: rgba(37, 99, 235, 0.06) !important;
    }

    /* Mobile side panel (light mode) */
    [data-theme="light"] #mobile-panel {
      background: rgba(255, 255, 255, 0.98) !important;
      border-right-color: rgba(0, 0, 0, 0.08) !important;
    }

    [data-theme="light"] .mobile-panel-header {
      border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .mobile-panel-close {
      color: rgba(28, 28, 40, 0.5) !important;
    }

    [data-theme="light"] .mobile-panel-close:hover {
      color: rgba(28, 28, 40, 0.8) !important;
    }

    [data-theme="light"] .mobile-nav-item {
      color: rgba(28, 28, 40, 0.6) !important;
    }

    [data-theme="light"] .mobile-nav-item:hover {
      color: var(--text) !important;
      background: rgba(0, 0, 0, 0.03) !important;
    }

    [data-theme="light"] .mobile-nav-item.active {
      color: var(--accent) !important;
      background: rgba(37, 99, 235, 0.08) !important;
    }

    [data-theme="light"] .mobile-panel-bottom {
      border-top-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .mobile-nav-signout {
      color: #EF4444 !important;
    }

    [data-theme="light"] .mobile-nav-signout:hover {
      background: rgba(239, 68, 68, 0.08) !important;
    }

    /* Desktop sidebar */
    [data-theme="light"] #desktop-sidebar {
      background: rgba(255, 255, 255, 0.92) !important;
      border-right-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .side-item {
      color: rgba(28, 28, 40, 0.5) !important;
    }

    [data-theme="light"] .side-item:hover {
      color: var(--text) !important;
      background: rgba(0, 0, 0, 0.03) !important;
    }

    [data-theme="light"] .side-item.active {
      color: var(--accent) !important;
      background: rgba(37, 99, 235, 0.08) !important;
    }

    [data-theme="light"] .side-bottom {
      border-top-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .side-settings-btn {
      color: rgba(28, 28, 40, 0.75) !important;
    }

    [data-theme="light"] .side-settings-btn:hover {
      color: var(--accent) !important;
      background: rgba(37, 99, 235, 0.06) !important;
    }

    /* Glass cards */
    [data-theme="light"] .glass-card {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(0, 0, 0, 0.10);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    /* Explore cards + Home cards (override inline styles) */
    [data-theme="light"] .explore-card {
      background: rgba(255, 255, 255, 0.92) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    [data-theme="light"] .explore-card:hover {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(37, 99, 235, 0.25) !important;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    }

    /* Card text color overrides for inline-styled text — off-black for contrast */
    [data-theme="light"] .explore-card div[style*="color:#F0F6FF"],
    [data-theme="light"] .explore-card div[style*="color: #F0F6FF"] {
      color: #000000 !important;
    }

    [data-theme="light"] .explore-card div[style*="color:rgba(240,246,255,0.4"],
    [data-theme="light"] .explore-card div[style*="color: rgba(240,246,255,0.4"] {
      color: #000000 !important;
    }

    [data-theme="light"] .explore-card span[style*="color:rgba(240,246,255,0.45"],
    [data-theme="light"] .explore-card span[style*="color: rgba(240,246,255,0.45"] {
      color: #000000 !important;
    }

    [data-theme="light"] .explore-card span[style*="color:rgba(240,246,255,0.28"],
    [data-theme="light"] .explore-card span[style*="color: rgba(240,246,255,0.28"] {
      color: #000000 !important;
    }

    [data-theme="light"] .explore-card button.fav-btn svg {
      stroke: #000000 !important;
    }

    /* Glass card text overrides */
    [data-theme="light"] .glass-card div[style*="color:#F0F6FF"],
    [data-theme="light"] .glass-card div[style*="color: #F0F6FF"] {
      color: #000000 !important;
    }

    [data-theme="light"] .glass-card div[style*="color:var(--text-faint)"] {
      color: #000000 !important;
    }

    /* Stat tiles */
    [data-theme="light"] .stat-tile {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(0, 0, 0, 0.10);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    /* Rank & stats card */
    [data-theme="light"] .rank-stats-card {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(0, 0, 0, 0.10);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    [data-theme="light"] .rank-header {
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    [data-theme="light"] .rank-tier-label {
      color: rgba(0, 0, 0, 0.38);
    }

    [data-theme="light"] .rank-name {
      color: #1C1C28;
    }

    [data-theme="light"] .rank-xp-current {
      color: #2563EB;
    }

    [data-theme="light"] .rank-xp-sep {
      color: rgba(0, 0, 0, 0.28);
    }

    [data-theme="light"] .rank-xp-max {
      color: rgba(0, 0, 0, 0.50);
    }

    [data-theme="light"] .rank-xp-sublabel {
      color: rgba(0, 0, 0, 0.35);
    }

    /* Rank progress bar */
    [data-theme="light"] .rank-progress-track {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.08);
    }

    [data-theme="light"] .rank-progress-label {
      color: rgba(0, 0, 0, 0.40);
    }

    [data-theme="light"] .rank-progress-label-next {
      color: rgba(0, 0, 0, 0.58);
    }

    /* Stat tiles */
    [data-theme="light"] .stat-tile + .stat-tile::before {
      background: rgba(0, 0, 0, 0.08);
    }

    [data-theme="light"] .stat-tile-label {
      color: rgba(0, 0, 0, 0.38);
    }

    [data-theme="light"] .stat-tile-val {
      color: #1C1C28;
    }

    [data-theme="light"] .stat-tile-unit {
      color: rgba(0, 0, 0, 0.35);
    }

    [data-theme="light"] .stat-tile-sub {
      color: rgba(0, 0, 0, 0.40);
    }

    /* Location cards */
    [data-theme="light"] .loc-card {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(0, 0, 0, 0.10);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    [data-theme="light"] .loc-card:hover {
      border-color: rgba(37, 99, 235, 0.25);
    }

    /* Placeholder card */
    [data-theme="light"] .placeholder-card {
      background: rgba(255, 255, 255, 0.6);
      border-color: rgba(0, 0, 0, 0.12);
      color: rgba(28, 28, 40, 0.5);
    }

    /* AI strip */
    [data-theme="light"] .ai-strip {
      border-left-color: #0284C7;
      background: transparent;
    }

    [data-theme="light"] .ai-strip-text {
      color: #0F172A;
    }

    /* Search */
    [data-theme="light"] .explore-search {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(0, 0, 0, 0.1);
      color: var(--text);
    }

    [data-theme="light"] .explore-search::placeholder {
      color: rgba(28, 28, 40, 0.3);
    }

    [data-theme="light"] .explore-search:focus {
      border-color: rgba(37, 99, 235, 0.4);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    }

    /* Filter button */
    [data-theme="light"] .filter-btn {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--text-muted);
    }

    [data-theme="light"] .filter-btn:hover {
      border-color: rgba(37, 99, 235, 0.25);
      color: var(--accent);
    }

    /* Filter sheet */
    [data-theme="light"] #filter-overlay {
      background: rgba(0, 0, 0, 0.25);
    }

    [data-theme="light"] #filter-sheet {
      background: rgba(255, 255, 255, 0.97);
      border-top-color: rgba(0, 0, 0, 0.08);
    }

    [data-theme="light"] .filter-pill {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--text-muted);
    }

    /* Settings popup */
    [data-theme="light"] #settings-overlay {
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(8px);
    }

    [data-theme="light"] #settings-popup {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    }

    [data-theme="light"] #settings-popup .popup-name {
      color: var(--text);
    }

    [data-theme="light"] .profile-avatar {
      background: rgba(37, 99, 235, 0.08);
      border-color: rgba(37, 99, 235, 0.2);
      color: var(--accent);
    }

    [data-theme="light"] .drawer-input {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
      color: var(--text);
    }

    [data-theme="light"] .drawer-input:focus {
      border-color: rgba(37, 99, 235, 0.4);
    }

    [data-theme="light"] .seg-ctrl {
      background: rgba(0, 0, 0, 0.04);
    }

    [data-theme="light"] .seg-btn {
      color: var(--text-muted);
    }

    [data-theme="light"] .seg-btn.active {
      background: rgba(37, 99, 235, 0.12);
      color: var(--accent);
    }

    [data-theme="light"] .toggle-slider {
      background: rgba(0, 0, 0, 0.12);
    }

    [data-theme="light"] .toggle input:checked+.toggle-slider {
      background: var(--accent);
    }

    [data-theme="light"] .signout-btn {
      background: transparent !important;
      border: 1px solid rgba(127, 29, 29, 0.6) !important;
      color: #EF4444 !important;
    }

    [data-theme="light"] .signout-btn:hover {
      background: rgba(239, 68, 68, 0.08) !important;
      border-color: #EF4444 !important;
    }

    [data-theme="light"] .help-link {
      background: rgba(37, 99, 235, 0.06) !important;
      border-color: rgba(37, 99, 235, 0.22) !important;
      color: #1D4ED8 !important;
    }

    [data-theme="light"] .help-link:hover {
      background: rgba(37, 99, 235, 0.12) !important;
      color: #1E40AF !important;
    }

    [data-theme="light"] .help-link-icon {
      stroke: #2563EB !important;
    }

    /* Location popup */
    [data-theme="light"] #popup-overlay {
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(8px);
    }

    [data-theme="light"] #location-popup {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    }

    /* Location permission popup */
    [data-theme="light"] #location-permission-popup {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    }

    [data-theme="light"] .location-permission-close {
      color: rgba(28, 28, 40, 0.35) !important;
    }

    [data-theme="light"] .location-permission-close:hover {
      color: rgba(28, 28, 40, 0.6) !important;
    }

    [data-theme="light"] .popup-name {
      color: var(--text);
    }


    [data-theme="light"] .full-bar {
      opacity: 0.85;
    }

    [data-theme="light"] .info-tile {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.06);
    }

    [data-theme="light"] .info-tile-val {
      color: var(--text);
    }

    [data-theme="light"] .stepper-btn {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--text);
    }

    [data-theme="light"] .stepper-btn:hover {
      border-color: rgba(37, 99, 235, 0.3);
      background: rgba(37, 99, 235, 0.06);
      color: var(--accent);
    }

    [data-theme="light"] .stepper-value-input {
      color: var(--accent);
    }

    [data-theme="light"] .popup-action-btn {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--text-muted);
    }

    [data-theme="light"] .popup-action-btn:hover {
      border-color: rgba(37, 99, 235, 0.25);
      color: var(--accent);
    }

    [data-theme="light"] #popup-fav-btn {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: var(--text) !important;
    }

    [data-theme="light"] .popup-close,
    [data-theme="light"] #settings-popup button[onclick*="closeSettings"] {
      color: rgba(28, 28, 40, 0.35) !important;
    }

    [data-theme="light"] #graph-tooltip {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
      color: var(--text) !important;
    }

    [data-theme="light"] .report-submit-btn {
      background: var(--accent);
    }

    [data-theme="light"] .report-submit-btn:disabled {
      color: #1C1C28;
    }

    /* Map page */
    [data-theme="light"] #page-map .map-grid {
      background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    }

    /* Closed store wait times (inline color override) */
    [data-theme="light"] [style*="rgba(240,246,255,0.3)"],
    [data-theme="light"] [style*="rgba(240, 246, 255, 0.3)"],
    [data-theme="light"] [style*="rgba(240,246,255,0.4)"],
    [data-theme="light"] [style*="rgba(240, 246, 255, 0.4)"],
    [data-theme="light"] [style*="rgba(240,246,255,0.45)"],
    [data-theme="light"] [style*="rgba(240, 246, 255, 0.45)"] {
      color: #6B7280 !important;
    }

    /* ── MAP PAGE — LIGHT THEME OVERRIDES ────────────────────── */
    [data-theme="light"] #map-sidebar,
    [data-theme="light"] #map-sidebar-inner {
      background: rgba(255, 255, 255, 0.92) !important;
      color: #000000 !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] #map-bottom-sheet {
      background: rgba(255, 255, 255, 0.97) !important;
      color: #000000 !important;
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }

    [data-theme="light"] #map-bottom-sheet-handle {
      background: rgba(0, 0, 0, 0.12) !important;
    }

    [data-theme="light"] .map-loc-card {
      background: rgba(255, 255, 255, 0.92) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #000000 !important;
    }

    [data-theme="light"] .map-loc-card:hover {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(37, 99, 235, 0.25) !important;
    }

    [data-theme="light"] .map-loc-card-name {
      color: #000000 !important;
    }

    [data-theme="light"] .map-loc-card-cat {
      color: rgba(28, 28, 40, 0.55) !important;
    }

    [data-theme="light"] .map-fpill {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: rgba(28, 28, 40, 0.7) !important;
    }

    [data-theme="light"] .map-sort-btn {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: rgba(28, 28, 40, 0.7) !important;
    }

    [data-theme="light"] .map-search-input {
      background: rgba(255, 255, 255, 0.9) !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
      color: #000000 !important;
    }

    [data-theme="light"] .map-search-input::placeholder {
      color: rgba(28, 28, 40, 0.3) !important;
    }

    [data-theme="light"] .map-search-input:focus {
      border-color: rgba(37, 99, 235, 0.4) !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
    }

    [data-theme="light"] #map-filter-bar {
      border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] #map-sort-bar,
    [data-theme="light"] #map-sort-bar-desktop {
      border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .map-sidebar-label {
      color: rgba(28, 28, 40, 0.5) !important;
    }

    [data-theme="light"] #map-sidebar-toggle {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(37, 99, 235, 0.45) !important;
      color: #2563EB !important;
      box-shadow: -4px 0 16px rgba(37, 99, 235, 0.15) !important;
    }

    [data-theme="light"] #map-bottom-toggle {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #000000 !important;
    }

    body.page-app {
      height: 100%;
      overflow: hidden;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
    }

    /* ── SCROLLBAR ──────────────────────────────────────── */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(5, 13, 26, 0.85);
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(56, 189, 248, 0.35);
      border-radius: 12px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(56, 189, 248, 0.6);
    }

    /* ── LAYOUT ─────────────────────────────────────────── */
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
    }

    #top-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 58px;
      background: rgba(5, 13, 26, 0.85);
      backdrop-filter: blur(20px);
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    }

    #top-bar .logo-img {
      height: 28px;
      width: auto;
    }

    #top-bar .avatar-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: none;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(240, 246, 255, 0.45);
      padding: 4px;
      transition: all 0.3s ease;
    }

    #top-bar .avatar-btn:hover {
      color: var(--accent);
      background: rgba(56, 189, 248, 0.08);
      transform: rotate(45deg);
    }

    #content-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 36px;
      will-change: scroll-position;
    }

    /* ── PAGES ──────────────────────────────────────────── */
    .page-view {
      display: none;
      padding: 20px;
    }

    .page-view.active {
      display: block;
    }

    /* ── CARDS ──────────────────────────────────────────── */
    .glass-card {
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      backdrop-filter: blur(16px);
      padding: 16px;
      box-shadow: 0 0 0 0.5px rgba(56, 189, 248, 0.08), 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .section-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .h-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .h-scroll::-webkit-scrollbar {
      display: none;
    }

    /* ── HOME PAGE ──────────────────────────────────────── */
    .greeting-muted {
      font-size: 13px;
      color: var(--text-muted);
    }

    .greeting-name {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 24px;
    }

    .loc-card {
      flex-shrink: 0;
      width: 200px;
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      padding: 14px;
      cursor: pointer;
      transition: border-color 0.15s;
      will-change: transform;
    }

    .loc-card:hover {
      border-color: rgba(56, 189, 248, 0.3);
    }

    .loc-card-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .loc-card-cat {
      font-size: 11px;
      color: var(--text-faint);
      margin-bottom: 10px;
    }

    .wait-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .wait-low {
      background: rgba(52, 211, 153, 0.15);
      color: #34D399;
      border: 0.5px solid rgba(52, 211, 153, 0.3);
    }

    .wait-med {
      background: rgba(251, 191, 36, 0.12);
      color: #FBBF24;
      border: 0.5px solid rgba(251, 191, 36, 0.3);
    }

    .wait-hi {
      background: rgba(248, 113, 113, 0.12);
      color: #F87171;
      border: 0.5px solid rgba(248, 113, 113, 0.3);
    }

    .placeholder-card {
      width: 200px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.03);
      border: 0.5px dashed rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 12px;
      color: var(--text-faint);
      line-height: 1.5;
      min-height: 100px;
    }

    .mini-bars {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 28px;
      margin-top: 8px;
    }

    .mini-bar {
      flex: 1;
      border-radius: 8px;
    }

    .ai-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 12px;
      background: transparent;
      border-left: 2px solid #38BDF8;
      border-radius: 0;
    }

    .ai-strip-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: #38BDF8;
    }

    .ai-strip-text {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #F0F6FF;
      line-height: 1.4;
    }

    /* ── ORACLE RANK GLOW ────────────────────────────── */
    @keyframes oracleBreath {
      0%, 100% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.10), 0 2px 18px rgba(212, 175, 55, 0.07);
        border-color: rgba(212, 175, 55, 0.18);
      }
      50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.22), 0 2px 28px rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.35);
      }
    }

    .rank-oracle-glow {
      border: 1px solid rgba(212, 175, 55, 0.18) !important;
      animation: oracleBreath 3s ease-in-out infinite;
    }

    /* ── SKELETON LOADING ─────────────────────────────── */
    @keyframes shimmer {
      0% { background-position: -600px 0; }
      100% { background-position: 600px 0; }
    }

    .skeleton-card {
      min-width: 200px;
      height: 120px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.04);
      background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
      background-size: 600px 100%;
      border: 0.5px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      animation: shimmer 1.8s infinite linear;
    }

    /* ── LIVE PULSE DOT ───────────────────────────────── */
    @keyframes livePulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.6); opacity: 0.55; }
    }

    .live-pulse-dot {
      display: none;
    }

    /* ── RANK & STATS CARD ───────────────────────────────── */
    .rank-stats-card {
      background: #0D1727;
      border: 1px solid #1A2438;
      border-radius: 12px;
      margin-bottom: 24px;
      overflow: hidden;
    }

    /* Rank Header */
    .rank-header {
      padding: 16px 18px 14px;
      border-bottom: 1px solid #1A2438;
    }

    .rank-tier-label {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 9px;
      color: rgba(240,246,255,0.3);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .rank-name-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .rank-name {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #F0F6FF;
      letter-spacing: -0.3px;
    }

    .rank-xp-group {
      display: flex;
      align-items: baseline;
      gap: 0;
    }

    .rank-xp-current {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 26px;
      color: #38BDF8;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .rank-xp-sep {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: rgba(240,246,255,0.3);
      margin: 0 2px;
    }

    .rank-xp-max {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: rgba(240,246,255,0.55);
    }

    .rank-xp-sublabel {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 9px;
      color: rgba(240,246,255,0.3);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-left: 5px;
      align-self: flex-end;
      margin-bottom: 2px;
    }

    /* Progress Bar */
    .rank-progress-track {
      width: 100%;
      height: 10px;
      background: #0D1727;
      border: 1px solid #1A2438;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }

    .rank-progress-fill {
      height: 100%;
      width: 0%;
      background: #38BDF8;
      border-radius: 5px;
      transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rank-progress-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 7px;
    }

    .rank-progress-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 10px;
      color: rgba(240,246,255,0.4);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .rank-progress-label-next {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 10px;
      color: rgba(240,246,255,0.6);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* Stats Grid */
    .stat-tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 0;
    }

    .stat-tile {
      padding: 14px 12px;
      text-align: center;
      position: relative;
    }

    .stat-tile + .stat-tile::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14px;
      bottom: 14px;
      width: 1px;
      background: #1A2438;
    }

    .stat-tile-label {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 9px;
      color: rgba(240,246,255,0.3);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .stat-tile-val {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 32px;
      color: #F0F6FF;
      font-variant-numeric: tabular-nums;
      letter-spacing: -1px;
      line-height: 1;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 1px;
    }

    .stat-tile-unit {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 18px;
      color: rgba(240,246,255,0.4);
    }

    .stat-tile-sub {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 10px;
      color: rgba(240,246,255,0.4);
      font-variant-numeric: tabular-nums;
      margin-top: 3px;
    }

    .stat-tile-sub.positive {
      color: #34D399;
    }

    /* ── EXPLORE PAGE ───────────────────────────────────── */
    .explore-search-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .explore-search {
      flex: 1;
      height: 48px;
      background: rgba(255, 255, 255, 0.07);
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 0 16px;
      color: var(--text);
      font-size: 14px;
      font-family: var(--font);
      outline: none;
      line-height: 48px;
    }

    .explore-search::placeholder {
      color: rgba(240, 246, 255, 0.3);
    }

    .explore-search:focus {
      border-color: rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
    }

    .filter-btn {
      height: 48px;
      width: 48px;
      flex-shrink: 0;
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      font-family: var(--font);
      transition: all 0.2s;
    }

    .filter-btn:hover {
      border-color: rgba(56, 189, 248, 0.3);
      color: var(--accent);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
      padding-bottom: 40px;
    }

    @media(min-width:640px) {
      .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-bottom: 60px;
      }
    }

    .explore-card {
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      padding: 14px;
      cursor: pointer;
      transition: border-color 0.15s;
      will-change: transform;
    }

    .explore-card:hover {
      border-color: rgba(56, 189, 248, 0.3);
    }

    .explore-card-name {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .explore-card-cat {
      font-size: 11px;
      color: var(--text-faint);
      margin-bottom: 8px;
    }

    .explore-card-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 6px;
    }

    .dist-tag {
      font-size: 11px;
      color: var(--text-faint);
    }

    /* ── MAP PAGE ───────────────────────────────────────── */
    #page-map.active {
      display: flex;
    }

    #page-map {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - var(--nav-h) - 58px);
      padding: 40px 20px;
      text-align: center;
    }

    .map-icon {
      font-size: 3rem;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .map-coming-soon {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .map-note {
      font-size: 13px;
      color: var(--text-muted);
    }

    #page-map .map-grid {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      z-index: 0;
    }

    #page-explore,
    #explore-grid,
    #page-home,
    #page-map,
    .main-content {
      pointer-events: auto !important;
      position: relative;
      z-index: 1;
    }

    #explore-grid>div {
      position: relative;
      z-index: 12;
      pointer-events: auto;
      cursor: pointer;
    }

    /* ── FILTER SHEET ───────────────────────────────────── */
    #filter-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 200;
      display: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s;
    }

    #filter-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 201;
      background: rgba(5, 13, 26, 0.97);
      backdrop-filter: blur(32px);
      border-radius: 12px 12px 0 0;
      border-top: 0.5px solid rgba(255, 255, 255, 0.12);
      padding: 20px;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #filter-sheet .drag-handle {
      width: 36px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      margin: 0 auto 16px;
    }

    #filter-sheet .sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    #filter-sheet .sheet-title {
      font-weight: 700;
      font-size: 1rem;
    }

    #filter-sheet .sheet-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.2rem;
      cursor: pointer;
      padding: 4px;
    }

    .filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-pill {
      height: 28px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid #1A2438;
      background: transparent;
      color: rgba(240,246,255,0.55);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .filter-pill.active {
      border-color: #38BDF8;
      color: #38BDF8;
      background: rgba(56,189,248,0.06);
    }

    .filter-apply {
      width: 100%;
      margin-top: 20px;
      height: 44px;
      background: #38BDF8;
      color: #050D1A;
      border: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      cursor: pointer;
      font-family: var(--font);
    }

    /* ── MOBILE SIDE PANEL ───────────────────────────────── */
    #mobile-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 150;
      display: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #mobile-panel {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 280px;
      max-width: 85vw;
      z-index: 151;
      background: rgba(5, 13, 26, 0.98);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-right: 0.5px solid rgba(255, 255, 255, 0.12);
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      pointer-events: none;
      opacity: 0;
    }

    #mobile-panel.show {
      transform: translateX(0);
      pointer-events: auto;
      opacity: 1;
    }

    #mobile-panel-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-panel-header {
      padding: 20px;
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mobile-panel-logo img {
      height: 28px;
      width: auto;
      display: block;
    }

    .mobile-panel-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.3rem;
      cursor: pointer;
      padding: 4px;
      transition: color 0.2s;
    }

    .mobile-panel-close:hover {
      color: var(--text);
    }

    .mobile-panel-nav {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
    }

    .mobile-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 12px;
      color: rgba(240, 246, 255, 0.55);
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 500;
      transition: all 0.2s;
      text-align: left;
      width: 100%;
    }

    .mobile-nav-item svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }

    .mobile-nav-item:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
    }

    .mobile-nav-item.active {
      color: var(--accent);
      background: rgba(56, 189, 248, 0.1);
    }

    .mobile-nav-signout {
      color: #F87171 !important;
    }

    .mobile-nav-signout:hover {
      background: rgba(248, 113, 113, 0.08) !important;
    }

    .mobile-panel-bottom {
      padding: 12px;
      border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    }

    /* ── SETTINGS POPUP ──────────────────────────────────── */
    #settings-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 300;
      display: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }

    #settings-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      width: calc(100vw - 48px);
      max-width: 620px;
      max-height: 90vh;
      z-index: 301;
      background: rgba(5, 13, 26, 0.97);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-radius: 12px;
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      transform: translate(-50%, -50%) scale(0.96);
      opacity: 0;
      pointer-events: none;
      -webkit-font-smoothing: antialiased;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
      will-change: opacity;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #settings-popup::-webkit-scrollbar {
      display: none;
    }

    #settings-popup.show {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    }

    .drawer-title {
      font-weight: 700;
      font-size: 1.1rem;
    }

    .drawer-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.3rem;
      cursor: pointer;
      padding: 4px;
    }

    .drawer-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .drawer-section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-bottom: 10px;
    }

    .profile-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .profile-avatar {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(56, 189, 248, 0.15);
      border: 1.5px solid rgba(56, 189, 248, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--accent);
      flex-shrink: 0;
    }

    .profile-name {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
    }

    .profile-email {
      font-size: 12px;
      color: var(--text-faint);
    }

    .seg-ctrl {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 3px;
      gap: 2px;
    }

    .seg-btn {
      flex: 1;
      padding: 6px;
      border-radius: 8px;
      border: none;
      background: none;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
    }

    .seg-btn.active {
      background: rgba(56, 189, 248, 0.2);
      color: var(--accent);
    }

    .drawer-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.07);
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--text);
      font-size: 14px;
      font-family: var(--font);
      outline: none;
    }

    .drawer-input:focus {
      border-color: rgba(56, 189, 248, 0.5);
    }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .toggle-label {
      font-size: 14px;
      color: var(--text-muted);
    }

    .toggle {
      position: relative;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.3s;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      border-radius: 12px;
      transition: 0.3s;
    }

    .toggle input:checked+.toggle-slider {
      background: var(--accent);
    }

    .toggle input:checked+.toggle-slider::before {
      transform: translateX(20px);
    }

    .signout-btn {
      width: 100%;
      height: 44px;
      background: transparent;
      border: 1px solid #7F1D1D;
      color: #F87171;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
      margin-top: auto;
      padding: 0 22px;
    }

    .signout-btn:hover {
      background: rgba(248, 113, 113, 0.08);
      border-color: #F87171;
    }

    .help-link:hover {
      background: rgba(56, 189, 248, 0.11);
      color: #F0F6FF;
    }

    /* ── LOCATION POPUP ────────────────────────────────── */
    #popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 400;
      display: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #location-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      width: calc(100vw - 48px);
      max-width: 540px;
      min-height: min(560px, 90vh);
      height: fit-content;
      max-height: 95vh;
      display: flex;
      flex-direction: column;
      z-index: 401;
      background: rgba(5, 13, 26, 0.97);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-radius: 12px;
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      opacity: 0;
      pointer-events: none;
      -webkit-font-smoothing: antialiased;
      transform: translate(-50%, -46%) scale(0.96);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
      will-change: opacity;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #location-popup::-webkit-scrollbar {
      display: none;
    }

    .explore-card {
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s, border-color 0.15s;
      cursor: pointer;
      will-change: transform;
    }

    .explore-card:hover {
      transform: scale(0.97);
      border-color: rgba(56, 189, 248, 0.35) !important;
      box-shadow: 0 0 0 0.5px rgba(56, 189, 248, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      background: rgba(255, 255, 255, 0.09) !important;
    }

    .popup-body {
      padding: 20px;
    }

    .popup-name {
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }

    .popup-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }


    .wait-large {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .wait-sub {
      font-size: 12px;
      color: var(--text-faint);
      margin-bottom: 20px;
    }

    .full-bars {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 64px;
      margin-bottom: 8px;
    }

    .full-bar {
      flex: 1;
      border-radius: 8px;
      position: relative;
      transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .bar-labels {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bar-label {
      font-size: 9px;
      color: var(--text-faint);
      text-align: center;
      flex: 1;
    }

    .info-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 16px 0;
    }

    .info-tile {
      background: rgba(255, 255, 255, 0.04);
      border: 0.5px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
    }

    .info-tile-label {
      font-size: 10px;
      color: var(--text-faint);
      margin-bottom: 4px;
    }

    .info-tile-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .popup-report-btn {
      width: 100%;
      height: 44px;
      background: #38BDF8;
      color: #050D1A;
      border: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      cursor: pointer;
      font-family: var(--font);
      margin-bottom: 10px;
    }

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

    .popup-action-btn {
      height: 44px;
      background: transparent;
      border: 1px solid #2A3650;
      border-radius: 8px;
      color: #F0F6FF;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
      padding: 0 22px;
    }

    .popup-action-btn:hover {
      border-color: rgba(56, 189, 248, 0.3);
      color: var(--accent);
    }

    /* ── REPORT STEPPER ─────────────────────────────────── */
    .report-stepper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .stepper-btn {
      touch-action: manipulation;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 0.5px solid var(--glass-border);
      background: var(--glass);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .stepper-btn:hover {
      border-color: rgba(56, 189, 248, 0.35);
      background: rgba(56, 189, 248, 0.1);
      color: var(--accent);
    }

    .stepper-btn:active {
      transform: scale(0.93);
    }

    .stepper-input-container {
      display: flex;
      align-items: baseline;
      justify-content: center;
      min-width: 80px;
    }

    .stepper-value-input {
      width: 50px;
      text-align: center;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--accent);
      background: transparent;
      border: none;
      outline: none;
      font-family: inherit;
      padding: 0;
      margin: 0;
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .stepper-value-input::-webkit-outer-spin-button,
    .stepper-value-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .stepper-unit {
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--text-muted);
      margin-left: 2px;
    }

    .report-submit-btn {
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: #38BDF8;
      color: #050D1A;
      border: none;
      border-radius: 6px;
      font-weight: 800;
      font-size: 11.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      cursor: pointer;
      font-family: var(--font);
      margin-bottom: 10px;
      position: relative;
      transition: background 0.16s, transform 0.13s, box-shadow 0.16s;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 0 rgba(0, 0, 0, 0.30),
        0 4px 18px rgba(56, 189, 248, 0.16);
    }

    .report-submit-btn:hover {
      background: #4DD0FF;
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 0 rgba(0, 0, 0, 0.30),
        0 7px 24px rgba(56, 189, 248, 0.26);
    }

    .report-submit-btn:active {
      background: #28AAEC;
      transform: translateY(1px);
      box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(0, 0, 0, 0.30);
    }

    .report-submit-btn:disabled {
      opacity: 0.42;
      cursor: not-allowed;
      color: rgba(5, 13, 26, 0.65);
      transform: none;
      box-shadow: none;
    }

    .rsb-icon {
      flex-shrink: 0;
    }


    /* ── ANIMATION KEYFRAMES ────────────────────────────────── */
    @keyframes popScale {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.35);
      }

      70% {
        transform: scale(0.92);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes popScaleSubtle {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.1);
      }

      70% {
        transform: scale(0.95);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes glowPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4);
      }

      50% {
        box-shadow: 0 0 16px 4px rgba(56, 189, 248, 0.25);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
      }
    }

    .anim-pop {
      animation: popScale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .anim-pop-subtle {
      animation: popScaleSubtle 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .anim-glow {
      animation: glowPulse 0.8s ease-out forwards;
    }

    /* ── FIRE ANIMATION ────────────────────────────────── */
    @keyframes fireFlicker {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }

      25% {
        transform: scale(1.1) rotate(-3deg);
        opacity: 0.9;
      }

      50% {
        transform: scale(var(--fire-scale, 1.15)) rotate(2deg);
        opacity: 1;
      }

      75% {
        transform: scale(1.05) rotate(-1deg);
        opacity: 0.85;
      }
    }

    .streak-fire {
      display: inline-block;
      animation: fireFlicker var(--fire-speed, 3s) ease-in-out infinite;
      will-change: transform, filter;
      filter: drop-shadow(0 0 var(--fire-glow, 0px) var(--fire-color, transparent));
    }

    /* ── SIDE SETTINGS BUTTON ──────────────────────────── */
    .side-settings-btn {
      background: none;
      border: none;
      color: rgba(240, 246, 255, 0.45);
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .side-settings-btn:hover {
      color: var(--accent);
      background: rgba(56, 189, 248, 0.08);
      transform: rotate(45deg);
    }

    .side-settings-btn svg {
      width: 24px;
      height: 24px;
    }

    /* ── RESPONSIVE BKPTS ──────────────────────────────── */
    /* Mobile (max-width: 768px) */
    @media (max-width: 768px) {
      #desktop-sidebar {
        display: none;
      }

      #content-area {
        padding-bottom: calc(62px + 16px + env(safe-area-inset-bottom, 0px) + 40px);
      }

      .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 0 80px 0;
        width: 100%;
        box-sizing: border-box;
      }

      .start-tiles,
      .stat-tiles,
      .h-scroll {
        padding: 0 16px;
      }

      .section-title,
      .greeting-muted,
      .greeting-name {
        padding: 0 16px;
      }

      #filter-sheet {
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        top: auto;
        right: 0;
        border-radius: 12px 12px 0 0;
        border-left: none;
        transform: translateY(100%);
      }

      #location-popup {
        height: 80vh;
        width: 100%;
        border-radius: 12px 12px 0 0;
      }
    }

    /* Desktop (min-width: 769px) */
    @media (min-width: 769px) {
      #top-bar {
        display: none;
      }

      /* Replaced by sidebar */

      #app {
        flex-direction: row;
      }

      /* Desktop Sidebar */
      #desktop-sidebar {
        width: 220px;
        flex-shrink: 0;
        background: rgba(5, 13, 26, 0.95);
        backdrop-filter: blur(20px);
        border-right: 0.5px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        height: 100vh;
        z-index: 100;
      }

      .side-logo {
        padding: 24px 20px;
      }

      .side-logo img {
        height: 32px;
        width: auto;
        display: block;
      }

      .side-nav {
        flex: 1;
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .side-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 12px;
        color: rgba(240, 246, 255, 0.55);
        cursor: pointer;
        border: none;
        background: transparent;
        font-family: var(--font);
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        text-align: left;
      }

      .side-item:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.04);
      }

      .side-item.active {
        color: var(--accent);
        background: rgba(56, 189, 248, 0.1);
        font-weight: 600;
      }

      .side-item svg {
        width: 20px;
        height: 20px;
        opacity: 0.8;
      }

      .side-item.active svg {
        opacity: 1;
      }

      .side-bottom {
        padding: 16px 12px;
        border-top: 0.5px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      /* Content Adjustments */
      #content-area {
        padding: 40px;
        padding-bottom: 40px;
        position: relative;
        z-index: 1;
        pointer-events: auto;
      }

      .main-content {
        padding: 40px;
        padding-bottom: 40px;
      }

      .cards-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      #page-home>div {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }



      #location-popup {
        width: 480px;
        height: auto;
        max-height: 85vh;
        left: 50%;
        bottom: 50%;
        border-radius: 12px;
        transform: translate(-50%, 50%) scale(0.95);
        opacity: 0;
      }

      #location-popup.show {
        transform: translate(-50%, 50%) scale(1);
        opacity: 1;
      }

      .popup-drag {
        display: none;
      }

      /* Hide handle on desktop */
    }

    /* ══ MAP PAGE — NEW CSS ════════════════════════════════════ */

    /* Override page-map layout for actual map */
    /* When map page is active, content-area becomes a flex host (no scroll) */
    #content-area:has(#page-map.active) {
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    #page-map {
      padding: 0 !important;
      position: relative !important;
      overflow: hidden !important;
    }

    #page-map.active {
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      min-height: unset !important;
      height: 100% !important;
      text-align: left !important;
    }

    /* Leaflet container */
    #leaflet-map {
      flex: 1;
      height: 100%;
      min-height: 400px;
      position: relative;
      z-index: 1;
      background: #0a1628;
      transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Leaflet tile overlay - applied to pane to save GPU */
    .leaflet-tile-pane {
      filter: brightness(0.95) saturate(1.05);
    }

    /* ── Map pin hover tooltip ───────────────────────────────── */
    .map-pin-tooltip-card {
      background: rgba(15, 17, 26, 0.97);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(16px);
    }

    .map-pin-tooltip-name {
      color: #F0F6FF;
    }

    .map-pin-tooltip-glance {
      color: rgba(240, 246, 255, 0.55);
    }

    .map-pin-tooltip-unit {
      color: rgba(240, 246, 255, 0.5);
    }

    .map-pin-tooltip-label {
      color: rgba(240, 246, 255, 0.35);
    }

    [data-theme="light"] .map-pin-tooltip-card {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
      backdrop-filter: blur(16px);
    }

    [data-theme="light"] .map-pin-tooltip-name {
      color: #111;
    }

    [data-theme="light"] .map-pin-tooltip-glance {
      color: rgba(0, 0, 0, 0.55);
    }

    [data-theme="light"] .map-pin-tooltip-unit {
      color: rgba(0, 0, 0, 0.45);
    }

    [data-theme="light"] .map-pin-tooltip-label {
      color: rgba(0, 0, 0, 0.35);
    }

    /* ── SVG pin markers ─────────────────────────────────────── */
    .map-pin-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .map-pin-svg {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    .map-pin-wrapper:hover .map-pin-svg {
      transform: scale(1.15);
    }

    /* Pulse ring for live reports */
    @keyframes mapPinPulse {
      0% {
        transform: scale(1);
        opacity: 0.7;
      }

      70% {
        transform: scale(2.2);
        opacity: 0;
      }

      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    .map-pin-pulse {
      position: absolute;
      width: 28px;
      height: 28px;
      border-radius: 12px;
      background: currentColor;
      animation: mapPinPulse 1.8s ease-out infinite;
      pointer-events: none;
    }

    /* ── Dark MarkerCluster ────────────────────────────────── */
    .marker-cluster-small,
    .marker-cluster-medium,
    .marker-cluster-large {
      background-clip: padding-box;
    }

    .marker-cluster-small {
      background-color: rgba(56, 189, 248, 0.18);
    }

    .marker-cluster-small div {
      background-color: rgba(56, 189, 248, 0.7);
    }

    .marker-cluster-medium {
      background-color: rgba(251, 191, 36, 0.18);
    }

    .marker-cluster-medium div {
      background-color: rgba(251, 191, 36, 0.7);
    }

    .marker-cluster-large {
      background-color: rgba(248, 113, 113, 0.18);
    }

    .marker-cluster-large div {
      background-color: rgba(248, 113, 113, 0.7);
    }

    .marker-cluster div {
      width: 30px;
      height: 30px;
      margin-left: 5px;
      margin-top: 5px;
      text-align: center;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      line-height: 30px;
      font-family: 'Inter', sans-serif;
    }

    /* ── Map sidebar ──────────────────────────────────────── */
    #map-sidebar {
      overflow: visible;
      height: 100%;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: row;
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      z-index: 10;
      position: relative;
      width: 0;
    }

    #map-sidebar.open {
      width: 320px;
    }

    #map-sidebar-inner {
      width: 320px;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      background: var(--bg);
      color: var(--text);
      border-left: 1px solid var(--glass-border);
      flex-shrink: 0;
    }

    /* Sidebar toggle button — protrudes left out of #map-sidebar into the map area */
    #map-sidebar-toggle {
      position: absolute;
      left: -40px;
      /* hangs 40px left of the sidebar's left edge, into the map */
      top: 50%;
      transform: translateY(-50%);
      z-index: 1000;
      width: 40px;
      height: 40px;
      background: #1e293b;
      border: 2px solid #38BDF8;
      border-right: none;
      border-radius: 8px 0 0 8px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #38BDF8;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      box-shadow: -4px 0 16px rgba(56, 189, 248, 0.28), 0 0 0 0.5px rgba(56, 189, 248, 0.15);
      transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    }

    #map-sidebar-toggle:hover {
      color: #fff;
      background: rgba(56, 189, 248, 0.18);
      box-shadow: -4px 0 24px rgba(56, 189, 248, 0.45), 0 0 0 0.5px rgba(56, 189, 248, 0.3);
    }

    /* Search input inside map sidebar / bottom sheet */
    .map-search-input {
      width: 100%;
      background: var(--glass) !important;
      border: 1px solid var(--glass-border) !important;
      border-radius: 8px;
      padding: 9px 14px;
      color: var(--text) !important;
      caret-color: var(--accent);
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none;
      appearance: none;
    }

    .map-search-input::placeholder {
      color: var(--text-faded) !important;
    }

    .map-search-input:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    /* Section labels inside sidebar */
    .map-sidebar-label {
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Sidebar filter/sort bar */
    #map-filter-bar {
      padding: 12px 14px 8px;
      border-bottom: 0.5px solid var(--glass-border);
      flex-shrink: 0;
    }

    /* Sidebar filter scroll row — pills scroll horizontally */
    .map-filter-scroll-row {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: visible;
      white-space: nowrap;
      gap: 8px;
      padding-bottom: 4px;
      padding-right: 24px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .map-filter-scroll-row::-webkit-scrollbar {
      display: none;
    }

    .map-fpill {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #1A2438;
      background: transparent;
      color: rgba(240,246,255,0.55);
      transition: all 0.2s;
    }

    .map-fpill.active {
      border-color: #38BDF8;
      color: #38BDF8;
      background: rgba(56,189,248,0.06);
    }

    #map-sort-bar {
      display: flex;
      gap: 6px;
      padding: 8px 14px;
      border-bottom: 0.5px solid var(--glass-border);
      flex-shrink: 0;
    }

    .map-sort-btn {
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--glass-border);
      background: var(--glass);
      color: var(--text-muted);
      transition: all 0.2s;
      white-space: nowrap;
    }

    .map-sort-btn.active {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
    }

    /* Sidebar location list */
    #map-loc-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 10px;
      scrollbar-width: thin;
    }

    #map-loc-list::-webkit-scrollbar {
      width: 4px;
    }

    #map-loc-list::-webkit-scrollbar-thumb {
      background: rgba(56, 189, 248, 0.25);
      border-radius: 12px;
    }

    .map-loc-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--glass-border);
      background: var(--glass);
      color: var(--text);
      cursor: pointer;
      margin-bottom: 6px;
      transition: border-color 0.15s, background 0.15s;
    }

    .map-loc-card:hover {
      border-color: var(--accent-glow);
      background: rgba(255, 255, 255, 0.08);
    }

    .map-loc-card-info {
      flex: 1;
      min-width: 0;
    }

    .map-loc-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .map-loc-card-cat {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .map-wait-badge {
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ── Map legend ────────────────────────────────────── */
    #map-legend {
      position: absolute;
      top: 10px;
      left: 46px;
      z-index: 1000;
      background: rgba(20, 20, 30, 0.82);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .map-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      white-space: nowrap;
    }

    .map-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .map-legend-note {
      color: rgba(255, 255, 255, 0.5);
      font-size: 10px;
      padding-top: 2px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 1px;
    }

    /* ── Locate Me button ──────────────────────────────── */
    #map-locate-btn {
      position: absolute;
      top: 80px;
      right: 12px;
      z-index: 1000;
      background: #ffffff;
      border: 2px solid #38BDF8;
      border-radius: 8px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      font-size: 18px;
      color: #0a1628;
      transition: color 0.2s, background 0.2s, transform 0.2s;
    }

    #map-locate-btn:hover {
      color: var(--accent);
      background: #f0f9ff;
      transform: scale(1.08);
    }

    /* ── Bottom sheet (mobile only) ───────────────────── */
    #map-bottom-sheet {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 40vh;
      max-height: 90vh;
      overflow: hidden;
      touch-action: none;
      background: var(--bg);
      color: var(--text);
      border-top: 1px solid var(--glass-border);
      border-radius: 12px 12px 0 0;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.3s ease, height 0.3s ease;
    }

    #map-bottom-sheet.open {
      transform: translateY(0);
    }

    #map-bottom-sheet.dragging {
      transition: none;
    }

    #map-bottom-sheet-handle {
      width: 48px;
      height: 5px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 12px;
      margin: 10px auto 8px;
      flex-shrink: 0;
      cursor: grab;
      /* Larger invisible touch target */
      padding: 10px 0;
      box-sizing: content-box;
    }

    #map-bottom-sheet-handle:active {
      cursor: grabbing;
    }

    #map-bottom-toggle {
      position: absolute;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1001;
      background: #ffffff;
      color: #0a1628;
      border: 2px solid #38BDF8;
      border-radius: 12px;
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
      display: none;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s;
    }

    #map-bottom-toggle:hover {
      background: #f0f9ff;
    }

    /* Leaflet attribution dark theme */
    .leaflet-control-attribution {
      background: rgba(5, 13, 26, 0.75) !important;
      color: rgba(240, 246, 255, 0.35) !important;
      font-size: 10px !important;
    }

    .leaflet-control-attribution a {
      color: rgba(56, 189, 248, 0.6) !important;
    }

    /* Leaflet zoom controls */
    .leaflet-control-zoom a {
      background: rgba(5, 13, 26, 0.92) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: rgba(240, 246, 255, 0.7) !important;
    }

    .leaflet-control-zoom a:hover {
      background: rgba(56, 189, 248, 0.12) !important;
      color: var(--accent) !important;
    }

    /* "You are here" marker */
    .you-are-here-icon {
      width: 20px;
      height: 20px;
      border-radius: 12px;
      background: #38BDF8;
      border: 3px solid #fff;
      box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3);
    }

    /* ── Mobile responsive overrides ─────────────────── */
    @media (max-width: 767px) {
      #map-sidebar {
        display: none !important;
      }

      #map-sidebar-toggle {
        display: none !important;
      }

      #map-bottom-sheet {
        display: flex;
      }

      #map-bottom-toggle {
        display: flex;
      }

      #map-bottom-toggle.sheet-open {
        display: none !important;
      }
    }

    @media (min-width: 768px) {
      #map-bottom-sheet {
        display: none !important;
      }

      #map-bottom-toggle {
        display: none !important;
      }
    }

    /* ══ SPOTLIGHT OVERLAY ══════════════════════════════════════════ */

    /* The single full-screen overlay element that uses a massive box-shadow
       to create the dark surround while the element itself stays transparent,
       revealing the cutout beneath it. */
    #spotlight-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #spotlight-overlay.sp-visible {
      opacity: 1;
      pointer-events: none;
      /* Allows clicks to pass through the shadow to the highlighted element */
    }

    /* The "hole" — its position/size is set inline by JS */
    #spotlight-hole {
      position: absolute;
      border-radius: 12px;
      /* The actual dark overlay is the enormous box-shadow */
      box-shadow: 0 0 0 9999px rgba(5, 13, 26, 0.82);
      transition:
        top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      /* Subtle accent ring around the highlighted element */
      outline: 2px solid rgba(56, 189, 248, 0.55);
      outline-offset: 3px;
    }

    /* ── Tooltip card ─────────────────────────────────────── */
    #spotlight-tooltip {
      position: fixed;
      z-index: 9001;
      width: 320px;
      max-width: calc(100vw - 32px);
      background: rgba(8, 18, 36, 0.96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-radius: 12px;
      padding: 22px 22px 18px;
      box-shadow:
        0 0 0 0.5px rgba(56, 189, 248, 0.1),
        0 8px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
      opacity: 0;
      transform: scale(0.94) translateY(6px);
      transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    #spotlight-tooltip.sp-visible {
      opacity: 1;
      transform: scale(1) translateY(0);
      pointer-events: auto;
    }

    /* Step counter */
    .sp-step-counter {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--accent, #38BDF8);
      margin-bottom: 10px;
      opacity: 0.8;
    }

    /* Title */
    .sp-title {
      font-size: 16px;
      font-weight: 700;
      color: #F0F6FF;
      margin-bottom: 8px;
      line-height: 1.35;
    }

    /* Body text */
    .sp-body {
      font-size: 13.5px;
      color: rgba(240, 246, 255, 0.65);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    /* Button row */
    .sp-btn-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .sp-btn {
      font-family: var(--font, 'Inter', sans-serif);
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      padding: 9px 18px;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .sp-btn-back {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(240, 246, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sp-btn-back:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(240, 246, 255, 0.8);
    }

    .sp-btn-next {
      background: var(--accent, #38BDF8);
      color: #050D1A;
      flex: 1;
      max-width: 140px;
    }

    .sp-btn-next:hover:not(:disabled) {
      opacity: 0.9;
    }

    .sp-btn-next:active:not(:disabled) {
      transform: translateY(0);
    }

    .sp-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* Arrow / caret pointing toward the highlighted element */
    #spotlight-arrow {
      position: fixed;
      z-index: 9002;
      width: 14px;
      height: 14px;
      background: rgba(8, 18, 36, 0.96);
      border-left: 1px solid rgba(56, 189, 248, 0.22);
      border-bottom: 1px solid rgba(56, 189, 248, 0.22);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease, top 0.32s cubic-bezier(0.4, 0, 0.2, 1), left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #spotlight-arrow.sp-visible {
      opacity: 1;
    }

    /* ══ WELCOME MODAL ══════════════════════════════════════════════ */

    #wm-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9500;
      background: rgba(5, 13, 26, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    #wm-backdrop.wm-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .wm-card {
      background: rgba(8, 18, 36, 0.97);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-radius: 12px;
      padding: 36px 32px 28px;
      width: 100%;
      max-width: 420px;
      box-shadow:
        0 0 0 0.5px rgba(56, 189, 248, 0.1),
        0 24px 64px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
      transform: scale(0.93) translateY(12px);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
    }

    /* Subtle top-accent line */
    .wm-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 16px;
      right: 16px;
      height: 2px;
      border-radius: 0 0 8px 8px;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55) 40%, rgba(56, 189, 248, 0.55) 60%, transparent);
    }

    #wm-backdrop.wm-visible .wm-card {
      transform: scale(1) translateY(0);
    }

    .wm-icon {
      font-size: 42px;
      margin-bottom: 14px;
      display: block;
      filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.45));
    }

    .wm-title {
      font-size: 24px;
      font-weight: 800;
      color: #F0F6FF;
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }

    .wm-body {
      font-size: 14.5px;
      color: rgba(240, 246, 255, 0.6);
      line-height: 1.65;
      margin-bottom: 28px;
    }

    .wm-body-warn {
      font-size: 14px;
      color: rgba(251, 191, 36, 0.75);
      line-height: 1.65;
      margin-bottom: 28px;
    }

    .wm-btn-row {
      display: flex;
      gap: 10px;
    }

    .wm-btn {
      font-family: var(--font, 'Inter', sans-serif);
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      padding: 12px 20px;
      transition: all 0.2s;
      flex: 1;
    }

    #wm-btn-yes {
      background: var(--accent, #38BDF8);
      color: #050D1A;
    }

    #wm-btn-yes:hover {
      opacity: 0.9;
    }

    #wm-btn-yes:active {
      opacity: 1;
    }

    #wm-btn-skip {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(240, 246, 255, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.1);
      flex: 0 0 auto;
      padding: 12px 16px;
    }

    #wm-btn-skip:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(240, 246, 255, 0.7);
    }

    /* Confirm-skip panel — same card, different content */
    #wm-btn-goback {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(240, 246, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    #wm-btn-goback:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(240, 246, 255, 0.8);
    }

    #wm-btn-confirm-skip {
      background: rgba(248, 113, 113, 0.15);
      color: #F87171;
      border: 1px solid rgba(248, 113, 113, 0.3);
    }

    #wm-btn-confirm-skip:hover {
      background: rgba(248, 113, 113, 0.25);
      transform: translateY(-1px);
    }

    #wm-btn-confirm-skip:active {
      transform: translateY(0);
    }

    /* ── LOADER OVERLAY ─────────────────────────────────── */
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: var(--bg);
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    }

    #loader-wrapper .logo-container {
      width: 300px;
      height: 300px;
      position: relative;
    }

    #loader-wrapper svg {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: visible;
    }

    .outline-layer {
      fill: none;
      stroke: #00e5ff;
      stroke-width: 2.5;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      stroke-linecap: round;
      filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 10px #00e5ff);
      animation: drawOutline 2.5s ease-in-out forwards;
    }

    .fill-layer {
      fill: #00b0f0;
      clip-path: circle(0% at 100% 0%);
      animation: fillIcon 1.667s ease-out forwards;
      animation-delay: 0.625s;
    }

    @keyframes drawOutline {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes fillIcon {
      to {
        clip-path: circle(150% at 100% 0%);
      }
    }

    .fade-out {
      opacity: 0;
      visibility: hidden;
    }
  

/* ═══════════════════════════════════════════════════════════
   INDEX / LANDING PAGE STYLES (index.html)
═══════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════
       DESIGN SYSTEM
    ═══════════════════════════════════════════════════════════ */
    body.page-index {
      --bg: #060B14;
      --bg-elevated: #0A1120;
      --accent: #EDE4CB;
      --accent-glow: transparent;
      --accent-dim: rgba(237, 228, 203, 0.10);
      --violet: #EDE4CB;
      --violet-dim: rgba(237, 228, 203, 0.08);
      --blue: #38BDF8;
      --glass: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.10);
      --glass-border-hover: rgba(255, 255, 255, 0.20);
      --text: #F0F6FF;
      --text-muted: rgba(240, 246, 255, 0.60);
      --text-faint: rgba(240, 246, 255, 0.35);
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --radius-lg: 12px;
      --radius-md: 12px;
      --radius-sm: 8px;
      --radius-pill: 12px;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body.page-index {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.7;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }


    /* ═══════════════════════════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════════════════════════ */
    .main-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(24px, 5vw, 80px);
      height: 64px;
      max-width: 100%;
      background: transparent;
      transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
      border-bottom: 1px solid transparent;
    }

    body.page-index {
      padding-top: 64px;
    }

    .main-nav.nav-scrolled {
      background: rgba(6, 11, 20, 0.92);
      backdrop-filter: blur(24px) saturate(1.2);
      -webkit-backdrop-filter: blur(24px) saturate(1.2);
      border-bottom-color: var(--glass-border);
    }

    .nav-logo img {
      height: 28px;
      width: auto;
      display: block;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      cursor: default;
      user-select: none;
    }

    .nav-links {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
      align-items: center;
      z-index: 10;
    }

    .nav-link {
      padding: 8px 16px;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.2s, background 0.2s;
    }

    .nav-link:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
    }

    .nav-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nav-btn {
      padding: 8px 18px;
      border-radius: var(--radius-sm);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 0.01em;
    }

    .nav-btn--ghost {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      color: var(--text);
    }

    .nav-btn--ghost:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--glass-border-hover);
      color: var(--blue);
    }

    .nav-btn--primary {
      background: var(--accent);
      border: none;
      color: #060B14;
    }

    .nav-btn--primary:hover {
      opacity: 0.9;
      color: var(--blue);
    }

    /* ═══════════════════════════════════════════════════════════
       SCROLL PROGRESS
    ═══════════════════════════════════════════════════════════ */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 2px;
      background: var(--blue);
      z-index: 9999;
      transition: width 0.06s linear;
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════════ */
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 100vh;
      width: 100%;
      overflow: hidden;
      perspective: 1200px;
    }

    /* ─── Parallax background layers ─────────────────── */
    .hero__orb {
      position: absolute;
      border-radius: 12px;
      pointer-events: none;
      will-change: transform;
    }

    .hero__orb--1,
    .hero__orb--2,
    .hero__orb--3 {
      display: none;
    }

    .hero__grid {
      display: none;
    }


    /* ─── Hero content ───────────────────────────────── */
    .hero__content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 800px;
      padding: 0 24px;
      will-change: transform;
    }

    .hero__title {
      font-size: clamp(44px, 7.5vw, 88px);
      font-weight: 900;
      letter-spacing: -3px;
      line-height: 0.92;
      color: #FFFFFF;
      margin-bottom: 28px;
      animation: fadeUp 0.7s 0.08s var(--ease) both;
    }

    .hero__title em {
      font-style: normal;
      color: var(--blue);
    }

    .hero__subtitle {
      font-size: clamp(16px, 1.8vw, 20px);
      color: var(--text-muted);
      max-width: 520px;
      line-height: 1.65;
      margin-bottom: 48px;
      animation: fadeUp 0.7s 0.16s var(--ease) both;
    }

    /* ─── Search bar ─────────────────────────────────── */
    .hero__search {
      width: 100%;
      max-width: 560px;
      position: relative;
      animation: fadeUp 0.7s 0.24s var(--ease) both;
    }


    .search-form {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s var(--ease);
    }

    .search-form:hover {
      background: rgba(255, 255, 255, 0.09);
      border-color: var(--glass-border-hover);
    }

    .search-form:focus-within {
      border-color: rgba(237, 228, 203, 0.35);
    }

    .search-form__field {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      padding: 18px 24px;
    }

    .search-form__icon {
      color: var(--text-faint);
      flex-shrink: 0;
      display: flex;
      transition: color 0.25s;
    }

    .search-form:focus-within .search-form__icon {
      color: var(--blue);
    }

    .search-form__input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: #FFFFFF;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 400;
      caret-color: var(--blue);
    }

    .search-form__input::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }

    .search-form__submit {
      padding: 18px 28px;
      background: var(--accent);
      border: none;
      color: #060B14;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
      letter-spacing: 0.02em;
    }

    .search-form__submit:hover {
      background: #F5EDD8;
      color: var(--blue);
    }

    /* ─── Floating mock card ─────────────────────────── */
    .hero__mock {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 400px;
      margin-top: 48px;
      animation: fadeUp 0.7s 0.34s var(--ease) both, mockFloat 5s ease-in-out infinite;
      clip-path: inset(-100px -100px 10% -100px);
    }

    @keyframes mockFloat {

      0%,
      100% {
        transform: translateY(-6px);
      }

      50% {
        transform: translateY(6px);
      }
    }

    .hero__mock-inner {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 20px;
    }

    .mock__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .mock__name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    .mock__meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .mock__badge {
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: rgba(248, 113, 113, 0.12);
      border: 1px solid rgba(248, 113, 113, 0.3);
      color: #F87171;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .mock__chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 36px;
      margin-bottom: 10px;
    }

    .mock__bar {
      flex: 1;
      border-radius: 8px 8px 0 0;
      min-height: 3px;
      transition: height 0.6s var(--ease);
    }

    .mock__bar--low {
      background: rgba(52, 211, 153, 0.65);
    }

    .mock__bar--med {
      background: rgba(251, 191, 36, 0.65);
    }

    .mock__bar--high {
      background: rgba(248, 113, 113, 0.7);
    }

    .mock__bar--now {
      background: transparent;
      border: 2px solid var(--accent);
      transform-origin: bottom;
    }

    .mock__ai {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      background: var(--violet-dim);
      border: 1px solid rgba(237, 228, 203, 0.15);
    }


    .mock__ai-icon {
      font-size: 13px;
    }

    .mock__ai-text {
      font-size: 12px;
      color: var(--blue);
      font-weight: 600;
    }

    /* ═══════════════════════════════════════════════════════════
       STATS SECTION
    ═══════════════════════════════════════════════════════════ */
    .stats {
      position: relative;
      padding: 120px clamp(24px, 5vw, 80px);
      border-top: 1px solid var(--glass-border);
      overflow: visible;
      perspective: 1200px;
    }

    .stats__inner {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .stats__card {
      background: var(--glass);
      padding: 48px 36px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      transition: all 0.4s var(--ease);
      will-change: transform;
      position: relative;
      overflow: hidden;
    }

    .stats__card:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(237, 228, 203, 0.25);
      transform: translateY(-4px);
    }

    .stats__number {
      font-size: clamp(40px, 4.5vw, 56px);
      font-weight: 900;
      color: var(--blue);
      line-height: 1;
      margin-bottom: 12px;
      letter-spacing: -2px;
      font-variant-numeric: tabular-nums;
    }

    .stats__label {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .stat-source {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.3);
      font-size: 9px;
      font-weight: 600;
      text-decoration: none;
      vertical-align: super;
      margin-left: 4px;
      line-height: 1;
      transition: color 0.2s, border-color 0.2s;
    }
    .stat-source:hover {
      color: rgba(255,255,255,0.7);
      border-color: rgba(255,255,255,0.5);
    }

    /* ═══════════════════════════════════════════════════════════
       HOW IT WORKS
    ═══════════════════════════════════════════════════════════ */
    .how {
      padding: 120px clamp(24px, 5vw, 80px);
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-heading {
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 64px;
    }

    .how__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
    }

    .how__card {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s var(--ease);
    }


    .how__card:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(237, 228, 203, 0.25);
      transform: translateY(-4px);
    }

    .how__step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--accent-dim);
      border: 1px solid rgba(237, 228, 203, 0.20);
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 20px;
    }

    .how__icon {
      font-size: 28px;
      margin-bottom: 16px;
    }

    .how__title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    .how__body {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* ═══════════════════════════════════════════════════════════
       LIVE PROOF — PREVIEW + TRACKER
    ═══════════════════════════════════════════════════════════ */
    .proof {
      padding: 120px clamp(24px, 5vw, 80px);
      max-width: 1200px;
      margin: 0 auto;
    }

    .proof__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    /* Preview card (left side) */
    .proof__preview {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 28px;
    }

    .preview__topbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--glass-border);
    }

    .preview__dot {
      width: 9px;
      height: 9px;
      border-radius: 12px;
    }

    .preview__dot:nth-child(1) {
      background: rgba(255, 95, 87, 0.6);
    }

    .preview__dot:nth-child(2) {
      background: rgba(255, 189, 46, 0.6);
    }

    .preview__dot:nth-child(3) {
      background: rgba(40, 200, 64, 0.6);
    }

    .preview__topbar-label {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-faint);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .preview__rows {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .preview__row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-md);
      transition: border-color 0.2s;
    }

    .preview__row:first-child {
      border-color: rgba(237, 228, 203, 0.2);
      background: rgba(237, 228, 203, 0.04);
    }

    .preview__row-emoji {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--accent-dim);
      border: 1px solid rgba(237, 228, 203, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    .preview__row-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .preview__row-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    .preview__row-info {
      flex: 1;
    }

    .preview__row-wait {
      font-size: 15px;
      font-weight: 800;
      color: var(--blue);
      white-space: nowrap;
    }

    .preview__row-wait--med {
      color: #FCD34D;
    }

    .preview__row-wait--hi {
      color: #F87171;
    }

    /* Tracker (right side) */
    .proof__tracker {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .tracker__heading {
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.2;
    }

    .tracker__subtitle {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 400px;
    }

    .tracker__cards {
      display: flex;
      gap: 16px;
      margin-top: 8px;
    }

    .tracker__card {
      flex: 1;
      background: var(--glass);
      padding: 32px 24px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      text-align: center;
      transition: border-color 0.3s;
    }

    .tracker__card:hover {
      border-color: rgba(237, 228, 203, 0.25);
    }

    .tracker__num {
      font-size: 40px;
      font-weight: 900;
      color: var(--blue);
      margin-bottom: 4px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -1px;
    }

    .tracker__label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-faint);
      font-weight: 600;
    }

    /* ═══════════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════════ */
    footer {
      border-top: 1px solid var(--glass-border);
    }

    .footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px clamp(24px, 5vw, 80px);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer__logo img {
      height: 22px;
      width: auto;
      display: block;
    }

    .footer__logo {
      display: flex;
      align-items: center;
      cursor: default;
      user-select: none;
    }

    .footer__links {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .footer__link {
      padding: 6px 14px;
      border-radius: 8px;
      color: var(--text-faint);
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.2s, background 0.2s;
    }

    .footer__link:hover {
      color: var(--blue);
      background: rgba(237, 228, 203, 0.06);
    }

    .footer__copy {
      font-size: 12px;
      color: var(--text-faint);
    }

    /* ═══════════════════════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════════════════════ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-d1 {
      transition-delay: 0.08s;
    }

    .reveal-d2 {
      transition-delay: 0.16s;
    }

    .reveal-d3 {
      transition-delay: 0.24s;
    }

    #cursor-glow {
      display: none;
    }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .stats__inner {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .stats__card {
        padding: 36px 28px;
      }

      .how__grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .proof__grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .tracker__cards {
        flex-direction: column;
      }
    }

    @media (max-width: 640px) {
      .hero__title {
        letter-spacing: -2px;
      }

      .hero__mock {
        max-width: 320px;
      }

      .search-form {
        flex-direction: column;
      }

      .search-form__field {
        padding: 16px 20px;
      }

      .search-form__submit {
        padding: 14px 20px;
        width: 100%;
      }

      .footer__inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      .footer__links {
        justify-content: center;
      }
    }

    /* visually-hidden utility for a11y */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* ═══════════════════════════════════════════════════════════
       GLOWING SECTION DIVIDERS
    ═══════════════════════════════════════════════════════════ */
    .glow-divider {
      height: 1px;
      background: var(--glass-border);
    }

    /* ═══════════════════════════════════════════════════════════
       INFINITE MARQUEE
    ═══════════════════════════════════════════════════════════ */
    .marquee-section {
      padding: 32px 0;
      overflow: hidden;
      position: relative;
      border-top: 1px solid var(--glass-border);
      border-bottom: 1px solid var(--glass-border);
    }

    .marquee-section::before,
    .marquee-section::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 2;
      pointer-events: none;
    }

    .marquee-section::before {
      left: 0;
      background: linear-gradient(90deg, #060B14, transparent);
    }

    .marquee-section::after {
      right: 0;
      background: linear-gradient(270deg, #060B14, transparent);
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll 40s linear infinite;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    @keyframes marqueeScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .marquee-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 28px;
      margin: 0 8px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-pill);
      white-space: nowrap;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      transition: all 0.3s;
    }

    .marquee-item:hover {
      background: rgba(237, 228, 203, 0.08);
      border-color: rgba(237, 228, 203, 0.20);
      color: var(--text);
    }

    .marquee-item__dot {
      width: 6px;
      height: 6px;
      border-radius: 12px;
      flex-shrink: 0;
    }

    .marquee-item__dot--green {
      background: #34D399;
    }

    .marquee-item__dot--yellow {
      background: #FCD34D;
    }

    .marquee-item__dot--red {
      background: #F87171;
    }

    /* ═══════════════════════════════════════════════════════════
       BEFORE / AFTER COMPARISON
    ═══════════════════════════════════════════════════════════ */
    .compare {
      padding: 120px clamp(24px, 5vw, 80px);
      max-width: 1200px;
      margin: 0 auto;
    }

    .compare__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .compare__card {
      padding: 40px 32px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      position: relative;
      overflow: hidden;
    }

    .compare__card--before,
    .compare__card--after {
      background: var(--glass);
      border-color: var(--glass-border);
    }

    .compare__card--before:hover,
    .compare__card--after:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(237, 228, 203, 0.25);
    }

    .compare__badge {
      display: inline-flex;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .compare__badge--before {
      background: rgba(248, 113, 113, 0.1);
      color: #F87171;
      border: 1px solid rgba(248, 113, 113, 0.2);
    }

    .compare__badge--after {
      background: rgba(52, 211, 153, 0.1);
      color: #34D399;
      border: 1px solid rgba(52, 211, 153, 0.2);
    }

    .compare__title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--text);
    }

    .compare__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .compare__item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .compare__icon {
      flex-shrink: 0;
      font-size: 16px;
      margin-top: 1px;
    }

    /* ═══════════════════════════════════════════════════════════
       LIVE ACTIVITY FEED
    ═══════════════════════════════════════════════════════════ */
    .feed {
      padding: 80px clamp(24px, 5vw, 80px);
      max-width: 1200px;
      margin: 0 auto;
    }

    .feed__header {
      text-align: center;
      margin-bottom: 48px;
    }

    .feed__container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .feed__item {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      opacity: 0;
      transform: translateY(16px) scale(0.97);
      transition: all 0.5s var(--ease);
    }

    .feed__item.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .feed__item-emoji {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--accent-dim);
      border: 1px solid rgba(237, 228, 203, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .feed__item-info {
      flex: 1;
      min-width: 0;
    }

    .feed__item-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .feed__item-action {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .feed__item-time {
      font-size: 11px;
      color: var(--text-faint);
      white-space: nowrap;
    }

    .feed__item-pulse {
      width: 8px;
      height: 8px;
      border-radius: 12px;
      background: #34D399;
      flex-shrink: 0;
      animation: feedPulse 2s ease-in-out infinite;
    }

    @keyframes feedPulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(0.7);
      }
    }

    /* ═══════════════════════════════════════════════════════════
       FINAL CTA
    ═══════════════════════════════════════════════════════════ */
    .final-cta {
      padding: 120px clamp(24px, 5vw, 80px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }


    .final-cta__title {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 900;
      letter-spacing: -2px;
      margin-bottom: 20px;
      line-height: 1.05;
    }

    .final-cta__sub {
      font-size: 17px;
      color: var(--text-muted);
      max-width: 460px;
      margin: 0 auto 40px;
      line-height: 1.6;
    }

    .final-cta__btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 40px;
      border-radius: var(--radius-sm);
      background: var(--accent);
      color: #060B14;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.25s var(--ease);
      position: relative;
    }

    .final-cta__btn:hover {
      opacity: 0.9;
      color: var(--blue);
    }

    .final-cta__btn::after {
      display: none;
    }

    @keyframes ctaPulse {

      0%,
      100% {
        opacity: 0.2;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(1.05);
      }
    }

    .final-cta__arrow {
      transition: transform 0.2s;
    }

    .final-cta__btn:hover .final-cta__arrow {
      transform: translateX(4px);
    }

    /* ═══════════════════════════════════════════════════════════
       3D TILT ON MOCK CARD
    ═══════════════════════════════════════════════════════════ */
    .hero__mock {
      perspective: 800px;
    }

    .hero__mock-inner {
      transition: transform 0.15s ease-out;
      transform-style: preserve-3d;
    }

    /* ═══════════════════════════════════════════════════════════
       ENHANCED REVEALS
    ═══════════════════════════════════════════════════════════ */
    .reveal-scale {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }

    .reveal-scale.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* ═══════════════════════════════════════════════════════════
       NEW RESPONSIVE RULES
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .compare__grid {
        grid-template-columns: 1fr;
      }

      .feed__container {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .marquee-item {
        padding: 8px 20px;
        font-size: 12px;
      }

      .final-cta__title {
        letter-spacing: -1px;
      }

      .nav-links {
        display: none;
      }
    }
  

/* ═══════════════════════════════════════════════════════════
   AUTH STYLES (auth.html)
═══════════════════════════════════════════════════════════ */
    /* Uses base :root variables */

    html {
      overflow-x: hidden;
    }

    body.page-auth {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.7;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ─── NAVBAR ─────────────────────────────────────────── */
    body.page-auth nav {
      position: sticky;
      top: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 48px;
      height: 66px;
      background: rgba(5, 13, 26, 0.80);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .logo {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -1px;
    }

    .logo img {
      display: block;
      height: 32px;
      width: auto;
    }

    /* ─── ENTRANCE ANIMATION ─────────────────────────────── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ─── AUTH WRAPPER ───────────────────────────────────── */
    .auth-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 24px;
    }

    /* ─── AUTH CARD ──────────────────────────────────────── */
    .auth-card {
      background: #0D1829;
      border: 1px solid #1E2D45;
      border-radius: 12px;
      padding: 40px;
      width: 100%;
      max-width: 420px;
      overflow: hidden;
      position: relative;
      transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ─── VIEWS SLIDER ───────────────────────────────────── */
    .views-clip {
      overflow: hidden;
      width: 100%;
    }

    .views-track {
      display: flex;
      width: 200%;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .auth-view {
      flex: 0 0 50%;
      min-width: 0;
    }

    /* ─── FORM ELEMENTS ──────────────────────────────────── */
    .auth-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .auth-title {
      font-weight: 800;
      font-size: 1.5rem;
      color: #fff;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }

    .auth-subtitle {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .form-group {
      margin-bottom: 16px;
    }

    .pw-wrap {
      position: relative;
    }

    .form-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.07);
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 14px 16px;
      color: #F0F6FF;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: all 0.2s ease;
    }

    .form-input::placeholder {
      color: rgba(240, 246, 255, 0.3);
    }

    .form-input:focus {
      border-color: rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
      background: rgba(255, 255, 255, 0.09);
    }

    .pw-wrap .form-input {
      padding-right: 44px;
    }

    .pw-toggle {
      position: absolute;
      right: 12px;
      top: 0;
      bottom: 0;
      height: 100%;
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
      transition: opacity 0.2s;
      z-index: 1;
    }

    .pw-toggle:hover {
      opacity: 1;
      color: var(--text);
    }

    .forgot-link {
      display: block;
      text-align: center;
      font-size: 13px;
      color: rgba(56, 189, 248, 0.8);
      text-decoration: none;
      margin-bottom: 24px;
    }

    .forgot-link:hover {
      color: var(--accent);
      text-decoration: underline;
    }

    /* ─── BUTTONS ────────────────────────────────────────── */
    #login-btn,
    #signup-btn {
      background: #F5EDD8;
      color: #1A1A1A;
      font-weight: 700;
      border-radius: 8px;
      height: 44px;
      border: none;
      font-size: 14px;
      letter-spacing: 0.02em;
      cursor: pointer;
      font-family: inherit;
      width: 100%;
      display: block;
      transition: color 0.2s ease;
      margin-top: 24px;
      margin-bottom: 12px;
    }

    #login-btn:hover,
    #signup-btn:hover {
      color: #38BDF8;
    }

    .google-btn:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      border-color: rgba(56, 189, 248, 0.35) !important;
    }

    /* ─── SWITCH FOOTER (below card) ─────────────────────── */
    .switch-footer {
      text-align: center;
      margin-top: 16px;
      font-size: 14px;
      color: var(--text-muted);
      animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: 0.08s;
    }

    .switch-footer button {
      background: none;
      border: none;
      color: #fff;
      font-weight: 600;
      font-family: inherit;
      font-size: inherit;
      cursor: pointer;
      margin-left: 4px;
      transition: color 0.2s;
      padding: 0;
    }

    .switch-footer button:hover {
      color: var(--accent);
      text-decoration: underline;
    }

    /* ─── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 768px) {
      body.page-auth nav {
        padding: 0 24px;
      }

      .auth-wrapper {
        padding: 16px;
      }

      .auth-card {
        padding: 32px 24px;
        max-width: 100%;
        margin: 0;
      }

      .form-input {
        padding: 16px;
        height: 52px;
      }

      #login-btn,
      #signup-btn,
      .google-btn {
        height: 48px !important;
      }
    }

    @media (min-width: 769px) {
      .auth-card {
        max-width: 420px;
      }
    }
  

/* ═══════════════════════════════════════════════════════════
   SUBPAGE: PRIVACY (privacy.html)
═══════════════════════════════════════════════════════════ */
    /* Uses base :root variables */
    html { scroll-behavior: smooth; }
    body.page-subpage {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    body.page-subpage nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      height: 66px;
      background: rgba(5,13,26,0.85);
      backdrop-filter: blur(20px);
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
    }
    .logo img { height: 28px; width: auto; display: block; }
    .nav-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(240,246,255,0.5);
      font-size: 0.875rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-back:hover { color: var(--accent); }
    body.page-subpage main {
      flex: 1;
      max-width: 720px;
      margin: 0 auto;
      padding: 80px 40px;
      width: 100%;
    }
    .page-label {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      border-radius: 12px;
      border: 0.5px solid rgba(56,189,248,0.25);
      background: rgba(56,189,248,0.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    body.page-subpage h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 24px;
    }
    body.page-subpage h1 span { color: var(--accent); }
    .lead {
      font-size: 1.1rem;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 48px;
    }
    .privacy-section {
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      padding: 28px;
      backdrop-filter: blur(16px);
      margin-bottom: 16px;
    }
    .privacy-section h2 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .privacy-section p, .privacy-section ul {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .privacy-section ul {
      padding-left: 18px;
      margin-top: 8px;
    }
    .privacy-section ul li { margin-bottom: 4px; }
    .last-updated {
      font-size: 12px;
      color: rgba(240,246,255,0.25);
      margin-top: 40px;
    }
    body.page-subpage footer {
      text-align: center;
      padding: 24px 40px;
      border-top: 0.5px solid rgba(255,255,255,0.06);
      font-size: 13px;
      color: rgba(240,246,255,0.28);
    }
    @media (max-width: 640px) {
      body.page-subpage nav { padding: 0 20px; }
      body.page-subpage main { padding: 48px 20px; }
    }
  

/* ═══════════════════════════════════════════════════════════
   SUBPAGE: CONTACT (contact.html)
═══════════════════════════════════════════════════════════ */
    /* Uses base :root variables */
    html { scroll-behavior: smooth; }
    body.page-subpage {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    body.page-subpage nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      height: 66px;
      background: rgba(5,13,26,0.85);
      backdrop-filter: blur(20px);
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
    }
    .logo img { height: 28px; width: auto; display: block; }
    .nav-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(240,246,255,0.5);
      font-size: 0.875rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-back:hover { color: var(--accent); }
    body.page-subpage main {
      flex: 1;
      max-width: 720px;
      margin: 0 auto;
      padding: 80px 40px;
      width: 100%;
    }
    .page-label {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      border-radius: 12px;
      border: 0.5px solid rgba(56,189,248,0.25);
      background: rgba(56,189,248,0.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    body.page-subpage h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 24px;
    }
    body.page-subpage h1 span { color: var(--accent); }
    .lead {
      font-size: 1.1rem;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 48px;
    }
    .contact-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }
    .contact-card {
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      padding: 28px;
      backdrop-filter: blur(16px);
      transition: border-color 0.2s, background 0.2s;
    }
    .contact-card:hover {
      border-color: rgba(56,189,248,0.3);
      background: rgba(255,255,255,0.09);
    }
    .contact-card-icon {
      font-size: 1.6rem;
      margin-bottom: 14px;
    }
    .contact-card h2 {
      font-size: 0.975rem;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .contact-card p {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .contact-card a {
      color: var(--accent);
      text-decoration: none;
    }
    .contact-card a:hover { text-decoration: underline; }
    body.page-subpage footer {
      text-align: center;
      padding: 24px 40px;
      border-top: 0.5px solid rgba(255,255,255,0.06);
      font-size: 13px;
      color: rgba(240,246,255,0.28);
    }
    @media (max-width: 640px) {
      body.page-subpage nav { padding: 0 20px; }
      body.page-subpage main { padding: 48px 20px; }
    }
  

/* ═══════════════════════════════════════════════════════════
   SUBPAGE: ABOUT (about.html)
═══════════════════════════════════════════════════════════ */
    /* Uses base :root variables */
    html { scroll-behavior: smooth; }
    body.page-subpage {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    body.page-subpage nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      height: 66px;
      background: rgba(5,13,26,0.85);
      backdrop-filter: blur(20px);
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
    }
    .logo img { height: 28px; width: auto; display: block; }
    .nav-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(240,246,255,0.5);
      font-size: 0.875rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-back:hover { color: var(--accent); }
    body.page-subpage main {
      flex: 1;
      max-width: 720px;
      margin: 0 auto;
      padding: 80px 40px;
      width: 100%;
    }
    .page-label {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      border-radius: 12px;
      border: 0.5px solid rgba(56,189,248,0.25);
      background: rgba(56,189,248,0.08);
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    body.page-subpage h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 24px;
    }
    body.page-subpage h1 span { color: var(--accent); }
    .lead {
      font-size: 1.1rem;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 48px;
    }
    body.page-subpage .glass-card {
      background: var(--glass);
      border: 0.5px solid var(--glass-border);
      border-radius: 12px;
      padding: 28px;
      backdrop-filter: blur(16px);
      margin-bottom: 16px;
    }
    body.page-subpage .glass-card h2 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text);
    }
    body.page-subpage .glass-card p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.7;
    }
    body.page-subpage footer {
      text-align: center;
      padding: 24px 40px;
      border-top: 0.5px solid rgba(255,255,255,0.06);
      font-size: 13px;
      color: rgba(240,246,255,0.28);
    }
    @media (max-width: 640px) {
      body.page-subpage nav { padding: 0 20px; }
      body.page-subpage main { padding: 48px 20px; }
    }
  
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ─── CONTACT FAB ─────────────────────────────────────────── */
    .contact-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 999;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(5, 13, 26, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 0.5px solid rgba(56, 189, 248, 0.22);
      border-radius: 99px;
      padding: 10px 16px 10px 13px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: rgba(240, 246, 255, 0.70);
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(56, 189, 248, 0.08);
      transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.18s;
    }
    .contact-fab svg {
      color: #38BDF8;
      flex-shrink: 0;
    }
    .contact-fab:hover {
      color: #F0F6FF;
      border-color: rgba(56, 189, 248, 0.45);
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(56, 189, 248, 0.22);
      transform: translateY(-2px);
    }
    @media (max-width: 480px) {
      .contact-fab span { display: none; }
      .contact-fab { padding: 11px 13px; }
    }