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

    :root {
      --sidebar-w: 320px;
      --sidebar-bg: #16130d;
      --sidebar-border: rgba(255, 245, 210, 0.10);
      --accent: #fbb130;
      --accent-dark: #e8960a;
      --text-primary: rgba(255, 245, 215, 0.92);
      --text-muted: rgba(255, 245, 215, 0.52);
      --text-dim: rgba(255, 245, 215, 0.28);
      --badge-24h: #fbb130;
      --badge-indoor: #a78bfa;
      --badge-outdoor: #4ade80;
      --card-bg: rgba(22, 18, 12, 0.68);
    }

    html, body { height: 100%; font-family: 'Noto Sans TC', system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; }

    /* ════════════════════════════════
       DESKTOP LAYOUT
    ════════════════════════════════ */
    .app { display: flex; height: 100vh; }

    .sidebar {
      width: var(--sidebar-w); flex-shrink: 0;
      background: var(--sidebar-bg); display: flex; flex-direction: column;
      border-right: 1px solid var(--sidebar-border); z-index: 100; position: relative;
    }
    .sidebar-header { padding: 24px 20px 18px; border-bottom: 1px solid var(--sidebar-border); }
    .logo-eyebrow {
      font-family: 'DM Mono', monospace; font-size: 10px; color: var(--accent-dark);
      letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px;
    }
    .logo-title {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 44px;
      color: var(--text-primary); line-height: 0.92;
    }
    .logo-title span { color: var(--accent-dark); }
    .logo-subtitle {
      font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-muted);
      letter-spacing: 2px; text-transform: uppercase; margin-top: 8px;
    }

    .sidebar-search { padding: 14px 20px 0; }
    .search-wrap { position: relative; }
    .search-wrap svg {
      position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%); color: var(--text-dim); pointer-events: none;
    }
    .search-input {
      width: 100%; background: rgba(255,245,215,0.05);
      border: 1px solid var(--sidebar-border); border-radius: 8px;
      padding: 10px 12px 10px 38px; color: var(--text-primary);
      font-family: 'Noto Sans TC', system-ui, sans-serif; font-size: 14px;
      outline: none; transition: border-color 0.2s;
    }
    .search-input::placeholder { color: var(--text-dim); }
    .search-input:focus { border-color: var(--accent); }

    .sidebar-filters {
      padding: 12px 20px 14px; display: flex; gap: 6px; flex-wrap: wrap;
      border-bottom: 1px solid var(--sidebar-border);
    }
    .filter-chip {
      padding: 5px 12px; border-radius: 20px; border: 1px solid var(--sidebar-border);
      background: transparent; color: var(--text-muted);
      font-family: 'Noto Sans TC', system-ui, sans-serif; font-size: 13px; font-weight: 500;
      cursor: pointer; transition: all 0.15s;
    }
    .filter-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
    .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

    .station-list {
      flex: 1; overflow-y: auto; padding: 6px 0;
      scrollbar-width: thin; scrollbar-color: rgba(255,245,215,0.12) transparent;
    }
    .station-list::-webkit-scrollbar { width: 4px; }
    .station-list::-webkit-scrollbar-thumb { background: rgba(255,245,215,0.12); border-radius: 2px; }

    .station-item {
      padding: 13px 20px; cursor: pointer; border-left: 3px solid transparent;
      transition: all 0.15s; display: flex; gap: 12px; align-items: flex-start;
    }
    .station-item:hover { background: rgba(255,245,215,0.05); border-left-color: var(--text-dim); }
    .station-item.active { background: rgba(232,168,56,0.1); border-left-color: var(--accent); }

    .station-icon {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(232,168,56,0.1); border: 1px solid rgba(232,168,56,0.3);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 2px; color: var(--accent-dark);
    }
    .station-info { flex: 1; min-width: 0; }
    .station-name {
      font-family: 'Noto Sans TC', system-ui, sans-serif; font-weight: 600; font-size: 15px;
      color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .station-name-zh { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); margin-top: 1px; }
    .station-badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

    .badge {
      font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.4px;
      padding: 4px 9px; border-radius: 4px; font-weight: 500; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 4px; line-height: 1;
    }
    .badge-24h      { background: rgba(232,168,56,0.15);  color: var(--badge-24h);    border: 1px solid rgba(232,168,56,0.35); }
    .badge-indoor   { background: rgba(124,58,237,0.1);   color: var(--badge-indoor); border: 1px solid rgba(124,58,237,0.25); }
    .badge-outdoor  { background: rgba(58,138,92,0.12);   color: var(--badge-outdoor);border: 1px solid rgba(58,138,92,0.3); }
    .badge-cold     { background: rgba(56,189,248,0.12);  color: #7dd3fc; border: 1px solid rgba(56,189,248,0.3); }
    .badge-warm     { background: rgba(250,204,21,0.12);  color: #fde68a; border: 1px solid rgba(250,204,21,0.3); }
    .badge-hot      { background: rgba(249,115,22,0.12);  color: #fdba74; border: 1px solid rgba(249,115,22,0.3); }
    /* cleanliness — dot rating badge */
    .badge-clean    { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: #e2e8f0; }
    .clean-dot      { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .clean-dot.on   { background: currentColor; }
    .clean-dot.off  { background: currentColor; opacity: 0.2; }
    .badge-paper    { background: rgba(167,139,250,0.12); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.3); }
    .badge-access   { background: rgba(96,165,250,0.12);  color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); }
    .badge-sitting  { background: rgba(251,191,36,0.10);  color: #fcd34d; border: 1px solid rgba(251,191,36,0.28); }
    .badge-squat    { background: rgba(251,191,36,0.10);  color: #fcd34d; border: 1px solid rgba(251,191,36,0.28); }
    .badge-family   { background: rgba(244,114,182,0.10); color: #f9a8d4; border: 1px solid rgba(244,114,182,0.28); }

    .sidebar-footer {
      padding: 10px 20px; border-top: 1px solid var(--sidebar-border);
      font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim);
      display: flex; justify-content: space-between;
    }
    .count-label { color: var(--accent-dark); }
    .empty-state {
      padding: 32px 20px; text-align: center; color: var(--text-dim);
      font-family: 'DM Mono', monospace; font-size: 12px; display: none;
    }

    /* ── MAP ── */
    .map-area { flex: 1; position: relative; }
    #map { width: 100%; height: 100%; }

    /* Hide MapLibre default logo + attribution */
    .maplibregl-ctrl-bottom-left { display: none !important; }
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { font-size: 9px; opacity: 0.5; }


    /* ── LOCATE BUTTON ── */
    .locate-btn {
      position: absolute; top: calc(100% - 160px); right: 12px; z-index: 200;
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(22,18,12,0.88); border: 1.5px solid rgba(255,245,215,0.15);
      color: var(--text-muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.35); transition: all 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) { .locate-btn:hover { border-color: var(--accent); color: var(--accent-dark); } }
    .locate-btn:active { background: rgba(232,168,56,0.22); border-color: var(--accent); color: var(--accent-dark); }
    .locate-btn.locating { color: var(--accent-dark); border-color: var(--accent); animation: spin 1s linear infinite; }
    .locate-btn.located  { color: var(--accent-dark); border-color: var(--accent); }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── COMPASS ── */
    .compass-btn {
      position: absolute; top: calc(100% - 226px); right: 12px; z-index: 200;
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(22,18,12,0.88); border: 1.5px solid rgba(255,245,215,0.15);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: border-color 0.2s;
    }
    .compass-btn:active { border-color: var(--accent); }
    .compass-btn.heading-up { border-color: var(--accent); background: rgba(251,177,48,0.15); }
    .compass-btn, .locate-btn { transition: all 0.2s; }


    /* ── USER DOT & ARROW ── */
    .user-dot-wrap { position: relative; width: 40px; height: 40px; }
    .user-arrow {
      width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
      transition: transform 0.6s ease;
    }
    .user-dot {
      width: 20px; height: 20px; background: #3B82F6; border: 3px solid white;
      border-radius: 50%; position: absolute; top: 10px; left: 10px;
      box-shadow: 0 2px 8px rgba(59,130,246,0.6);
    }
    @keyframes user-breathe {
      0%   { transform: scale(1); opacity: 0.3; }
      50%  { transform: scale(1.6); opacity: 0.08; }
      100% { transform: scale(1); opacity: 0.3; }
    }
    .user-breathe { animation: user-breathe 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

    /* ── MARKERS ── */
    .my-marker { cursor: pointer; }
    .my-marker svg { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); transition: all 0.2s; }
    .my-marker:hover svg { filter: drop-shadow(0 4px 10px rgba(232,168,56,0.5)); transform: scale(1.1); }
    .my-marker.active svg { filter: drop-shadow(0 4px 14px rgba(14,165,233,0.7)); }

    @keyframes pulse-ring {
      0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.7; }
      100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
    }
    .pulse-ring {
      position: absolute; bottom: 2px; left: 50%;
      width: 14px; height: 14px; border: 2px solid #0EA5E9; border-radius: 50%;
      animation: pulse-ring 1.6s ease-out infinite; pointer-events: none;
    }

    /* ── DETAIL CARD (desktop) ── */
    .detail-card {
      position: absolute; bottom: 24px; right: 24px; width: 310px;
      background: var(--card-bg); backdrop-filter: blur(18px);
      border: 1px solid var(--sidebar-border); border-radius: 16px;
      padding: 0; color: var(--text-primary); overflow: hidden;
      transform: translateY(16px); opacity: 0; pointer-events: none;
      transition: all 0.22s cubic-bezier(0.2,0,0,1);
      box-shadow: 0 8px 40px rgba(0,0,0,0.35); z-index: 200;
    }
    .detail-card.visible { transform: translateY(0); opacity: 1; pointer-events: all; }

    /* Hero = photo or dark fallback, always shown */
    .detail-hero {
      position: relative; height: 200px; overflow: hidden;
      background: linear-gradient(160deg, #1e180e 0%, #0f0c07 100%);
      border-radius: 16px 16px 0 0;
    }
    .detail-photo { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.15s ease; }
    .detail-photo.loaded { opacity: 1; }

    /* Top vignette — photo blends into the dark rounded edge */
    .detail-hero::before {
      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, transparent 38%);
      border-radius: 16px 16px 0 0;
    }

    /* Bottom gradient overlay — name readability */
    .detail-hero::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, transparent 30%, rgba(12,9,4,0.78) 70%, rgba(12,9,4,0.96) 100%);
    }

    /* Name/badge overlaid on hero */
    .detail-hero-content {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
      padding: 14px 16px 16px;
    }
    .detail-type-badges { display: flex; gap: 4px; margin-bottom: 8px; }
    .detail-name {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 24px;
      line-height: 1.15; color: #fff; margin-bottom: 3px; padding-right: 36px;
      text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    }
    .detail-name-zh {
      font-family: 'DM Mono', monospace; font-size: 10px;
      color: rgba(255,245,215,0.55); letter-spacing: 0.5px;
    }

    /* Cleanliness star overlay — top-left of hero photo */
    .detail-clean-overlay {
      position: absolute; top: 14px; left: 14px; z-index: 3;
    }
    .clean-rating-badge {
      display: inline-flex; align-items: center;
      background: rgba(0,0,0,0.48); backdrop-filter: blur(8px);
      border: 1px solid; border-radius: 6px;
      padding: 5px 11px; font-family: 'DM Mono', monospace;
      font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
    }

    /* Toilet type tags row — below hours */
    .detail-tags-row {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 8px 0 4px;
    }
    .detail-tags-row:empty { display: none; }

    /* Close button */
    .detail-close {
      position: absolute; top: 12px; right: 12px; width: 42px; height: 42px;
      background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
      cursor: pointer; color: rgba(255,255,255,0.9);
      display: flex; align-items: center; justify-content: center; transition: all 0.15s;
      backdrop-filter: blur(8px); z-index: 10;
    }
    .detail-close:hover { background: rgba(0,0,0,0.7); color: #fff; }

    /* Body section */
    .detail-body { padding: 14px 16px 20px; }
    .detail-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
    .detail-row-icon { color: var(--accent-dark); flex-shrink: 0; margin-top: 1px; }
    .detail-row-label {
      font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-dim);
      letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px;
    }
    .detail-row-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
    .water-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.2); color: #0284c7;
      font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px;
      padding: 3px 8px; border-radius: 3px; text-transform: uppercase;
    }
    .detail-divider { height: 1px; background: var(--sidebar-border); margin: 12px 0; }
    .detail-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
    .detail-desc-zh { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; }
    .detail-blog {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      width: 100%; padding: 9px; margin-bottom: 8px;
      background: transparent; color: var(--accent);
      border: 1px solid var(--accent); border-radius: 8px;
      font-family: 'Noto Sans TC', system-ui, sans-serif;
      font-weight: 600; font-size: 13px; cursor: pointer;
      transition: all 0.15s; text-decoration: none;
    }
    .detail-blog:hover { background: rgba(232,168,56,0.1); }
    .detail-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 12px; background: var(--accent); color: #fff;
      border: none; border-radius: 10px; font-family: 'Noto Sans TC', system-ui, sans-serif;
      font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
      cursor: pointer; transition: all 0.15s; text-decoration: none;
    }
    .detail-cta:hover { background: var(--accent-dark); }
    .detail-cta:active { transform: scale(0.98); }

    /* ── LAYER CHIPS (mobile top bar) ── */
    .layer-chips {
      display: flex; gap: 6px; overflow-x: auto; flex: 1;
      scrollbar-width: none;
    }
    .layer-chips::-webkit-scrollbar { display: none; }
    .layer-chip {
      display: flex; align-items: center; gap: 5px; flex-shrink: 0;
      padding: 6px 12px; border-radius: 20px;
      border: 1px solid var(--sidebar-border);
      background: transparent; color: var(--text-muted);
      font-family: 'Noto Sans TC', system-ui, sans-serif;
      font-size: 13px; font-weight: 500;
      cursor: pointer; transition: all 0.15s;
    }
    .layer-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
    .layer-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .layer-chip.unavailable { opacity: 0.38; cursor: not-allowed; }

    /* ── DESKTOP SIDEBAR HEADER TOP ── */
    .sidebar-header-top {
      display: flex; align-items: flex-start; justify-content: space-between;
    }

    /* ── DESKTOP LAYER TABS ── */
    .sidebar-layers {
      display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--sidebar-border);
    }
    .layer-tab {
      flex: 1; padding: 10px 4px 8px; border: none;
      border-bottom: 2px solid transparent;
      background: transparent; color: var(--text-dim);
      font-family: 'Noto Sans TC', system-ui, sans-serif;
      font-size: 11px; font-weight: 500; cursor: pointer;
      transition: all 0.15s; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .layer-tab .tab-icon { font-size: 17px; }
    .layer-tab:hover { color: var(--text-muted); }
    .layer-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
    .layer-tab.unavailable { opacity: 0.35; cursor: not-allowed; }

    /* Mobile-only elements hidden on desktop */
    .mob-topbar { display: none !important; }
    .mob-sheet  { display: none; }

    /* ════════════════════════════════
       MOBILE LAYOUT  (≤ 768px)
    ════════════════════════════════ */
    @media (max-width: 768px) {

      .app { flex-direction: column; }
      .sidebar { display: none; }
      .map-area { flex: 1; position: fixed; inset: 0; z-index: 0; }
      #map { width: 100%; height: 100%; }

      /* ── TOP BAR ── */
      .mob-topbar {
        display: flex !important; align-items: center;
        position: fixed; top: 0; left: 0; right: 0; z-index: 300;
        background: rgba(24, 20, 14, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 2px 16px rgba(0,0,0,0.25);
        padding: 4px 12px; min-height: 48px; gap: 4px;
        transform: translateZ(0); /* force stacking context for Chrome iOS */
      }
      .mob-topbar-main { display: none; }
      .mob-layer-chips { display: none !important; }
      .mob-brand { display: flex; align-items: center; gap: 5px; }
      .mob-brand-logo { width: 34px; height: 34px; object-fit: contain; }
      .mob-brand-name {
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-weight: 600; font-size: 24px; color: rgba(255,255,255,0.92);
        line-height: 1; white-space: nowrap;
      }
      .mob-brand-name strong { color: #fbb130; font-weight: 700; }

      /* ── BREADCRUMB NAV ── */
      .bc-nav { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
      .bc-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
      .bc-sep { color: rgba(255,245,215,0.25); font-size: 16px; margin: 0 4px; flex-shrink: 0; }
      .bc-btn {
        padding: 5px 10px; border-radius: 8px; border: none;
        background: rgba(255,245,215,0.08); color: rgba(255,245,215,0.85);
        font-size: 13px; font-family: 'Noto Sans TC', system-ui, sans-serif;
        cursor: pointer; white-space: nowrap; transition: all 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .bc-btn:active { background: rgba(255,245,215,0.15); }
      .bc-btn .bc-arrow { font-size: 10px; margin-left: 3px; opacity: 0.5; }
      .bc-dropdown {
        position: fixed; z-index: 310; background: rgba(22,18,12,0.95);
        backdrop-filter: blur(16px); border: 1px solid rgba(255,245,215,0.12);
        border-radius: 12px; padding: 6px; min-width: 140px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5); display: none;
      }
      .bc-dropdown.show { display: block; }
      .bc-dropdown-item {
        display: block; width: 100%; padding: 10px 14px; border: none; border-radius: 8px;
        background: none; color: rgba(255,245,215,0.7); font-size: 14px; text-align: left;
        cursor: pointer; transition: all 0.1s;
        font-family: 'Noto Sans TC', system-ui, sans-serif;
      }
      .bc-dropdown-item:active, .bc-dropdown-item.active { background: rgba(251,177,48,0.15); color: var(--accent); }
      .bc-dropdown-overlay { display: none; }
      /* ── BOTTOM SHEET ── */
      .mob-sheet {
        display: flex; flex-direction: column;
        position: fixed; left: 0; right: 0;
        bottom: env(safe-area-inset-bottom, 0px); z-index: 300;
        max-height: 60vh;
        background: rgba(22, 18, 12, 0.55);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.30);
        transform: translateY(calc(100% - 52px));
        transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        pointer-events: none;
      }
      .mob-sheet-drag,
      .mob-nearest,
      .mob-sub-filters,
      .sub-filter-chip,
      .mob-sheet-filters,
      .mob-sheet-filters .filter-chip,
      .mob-poi-list,
      .mob-poi-card { pointer-events: all; }
      .mob-sheet.half { transform: translateY(0); }

      /* toggle button strip */
      .mob-sheet-drag { flex-shrink: 0; }
      .mob-sheet-toggle {
        width: 100%; padding: 14px 18px;
        background: none; border: none;
        border-bottom: 1px solid rgba(255,245,215,0.07);
        display: flex; align-items: center; justify-content: space-between;
        cursor: pointer; color: rgba(255,245,215,0.7);
        -webkit-tap-highlight-color: transparent;
        font-family: 'Noto Sans TC', system-ui, sans-serif;
        font-size: 1.1rem; font-weight: 600;
        touch-action: manipulation;
      }
      .mob-sheet-toggle:active { background: rgba(255,245,215,0.05); }
      .mob-sheet-toggle svg { transition: transform 0.32s cubic-bezier(0.32,0.72,0,1); flex-shrink: 0; }
      .mob-sheet.half .mob-sheet-toggle svg { transform: rotate(180deg); }
      /* expanded: 縮回去按鈕明顯化 */
      .mob-sheet.half .mob-sheet-toggle {
        background: rgba(251,177,48,0.10);
        border-bottom-color: rgba(251,177,48,0.20);
        color: var(--accent);
      }
      .mob-sheet.half .mob-sheet-toggle svg { stroke: var(--accent); width: 30px; height: 30px; }

      /* ── LAYER CHIPS (always visible in sheet) ── */
      .mob-layer-chips {
        display: flex; gap: 8px; padding: 6px 16px 10px;
        overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
      }
      .mob-layer-chips::-webkit-scrollbar { display: none; }
      .mob-layer-chips .layer-chip { flex-shrink: 0; }

      /* ── COLLAPSED state content ── */
      .mob-nearest { padding: 0 16px 20px; flex-shrink: 0; }
      .mob-nearest-label {
        font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-dim);
        letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px;
      }
      .mob-nearest-card {
        background: rgba(232,168,56,0.07); border: 1px solid rgba(232,168,56,0.22);
        border-radius: 12px; padding: 12px 14px; cursor: pointer;
        display: flex; align-items: center; gap: 12px; transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .mob-nearest-card:active { background: rgba(232,168,56,0.18); }
      .mob-nearest-icon {
        width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
        background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.25);
        display: flex; align-items: center; justify-content: center; color: #0284C7;
      }
      .mob-nearest-info { flex: 1; min-width: 0; }
      .mob-nearest-name {
        font-weight: 600; font-size: 16px; color: var(--text-primary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .mob-nearest-dist {
        font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent-dark); margin-top: 2px;
      }
      .mob-nearest-arrow { color: var(--text-dim); flex-shrink: 0; }
      .mob-nearest-prompt {
        font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim);
        text-align: center; padding: 6px 0;
      }

      /* ── HALF/FULL state content ── */
      .mob-sheet-filters {
        padding: 0 16px 10px; display: flex; gap: 6px;
        overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
        border-bottom: 1px solid var(--sidebar-border);
      }
      .mob-sheet-filters::-webkit-scrollbar { display: none; }
      .mob-sheet-filters .filter-chip { flex-shrink: 0; font-size: 12px; padding: 4px 10px; }

      /* POI card list — show all, constrain height to ~3 cards, scroll */
      .mob-poi-list {
        max-height: calc(3 * 82px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      .mob-poi-card {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px; cursor: pointer;
        border-bottom: 1px solid rgba(255,245,215,0.06);
        transition: background 0.1s; -webkit-tap-highlight-color: transparent;
      }
      .mob-poi-card:active { background: rgba(255,245,215,0.06); }
      .mob-poi-card.active { background: rgba(14,165,233,0.05); }

      /* thumbnail */
      .mob-poi-thumb {
        width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
        flex-shrink: 0; display: block;
      }
      .mob-poi-thumb-ph {
        width: 54px; height: 54px; border-radius: 10px; flex-shrink: 0;
        background: rgba(255,245,215,0.06); border: 1px solid rgba(255,245,215,0.10);
        display: flex; align-items: center; justify-content: center; font-size: 22px;
      }

      .mob-poi-info { flex: 1; min-width: 0; }
      .mob-poi-name {
        font-weight: 600; font-size: 15px; color: var(--text-primary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      /* status row */
      .mob-poi-status {
        display: flex; align-items: center; gap: 5px; margin-top: 3px;
        font-family: 'DM Mono', monospace; font-size: 10px;
        white-space: nowrap; overflow: hidden;
      }
      .status-dot {
        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      }
      .status-dot.open  { background: #4ade80; }
      .status-dot.closed { background: #f87171; }
      .status-open  { color: #4ade80; }
      .status-closed { color: #f87171; }
      .status-hours { color: var(--text-dim); }
      /* distance — right side */
      .mob-poi-dist {
        font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 600;
        color: var(--text-primary); flex-shrink: 0; text-align: right; min-width: 40px;
      }

      /* sub-filter chips — hidden on mobile, breadcrumb replaces them */
      .mob-sub-filters {
        display: none !important;
      }
      .sub-filter-chip {
        display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
        padding: 5px 13px; border-radius: 16px;
        border: 1px solid rgba(255,245,215,0.12);
        background: transparent; color: var(--text-muted);
        font-size: 12px; font-family: 'Noto Sans TC', system-ui, sans-serif;
        cursor: pointer; transition: all 0.15s;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
      }
      .sub-filter-chip.active { background: rgba(232,168,56,0.15); border-color: var(--accent); color: var(--accent); }
      .sub-filter-chip:active { background: rgba(255,245,215,0.06); }

      /* State visibility */
      .mob-sheet:not(.half):not(.full) .mob-poi-list { display: none; }

      /* ── DETAIL CARD (mobile) ── */
      .detail-card {
        position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
        border-radius: 20px 20px 0 0; padding: 0;
        transform: translateY(100%); opacity: 1; z-index: 400;
        max-height: 90vh; overflow-y: auto;
        box-shadow: 0 -16px 60px rgba(0,0,0,0.55), 0 -4px 16px rgba(0,0,0,0.35);
      }
      .detail-card.visible { transform: translateY(0); opacity: 1; }
      .detail-hero { height: 260px; border-radius: 20px 20px 0 0; }
      .detail-hero::before { border-radius: 20px 20px 0 0; }
      .detail-body { padding: 16px 20px calc(env(safe-area-inset-bottom, 16px) + 16px); }

      /* Controls positioning */
      .compass-btn   { top: auto; bottom: 160px; right: 12px; }
      .locate-btn    { top: auto; bottom: 90px; right: 12px; }
    }

    /* ── ROUTE CARDS ──────────────────────────────── */
    .route-list {
      flex: 1; overflow-y: auto; padding: 6px 0;
      scrollbar-width: thin; scrollbar-color: rgba(255,245,215,0.12) transparent;
    }
    .route-list::-webkit-scrollbar { width: 4px; }
    .route-list::-webkit-scrollbar-thumb { background: rgba(255,245,215,0.12); border-radius: 2px; }

    .route-card {
      padding: 10px 16px; cursor: pointer; border-left: 4px solid var(--route-color, transparent);
      transition: all 0.15s; display: flex; flex-direction: column; gap: 4px;
    }
    .route-card:hover { background: rgba(255,245,215,0.05); }
    .route-card.active { background: rgba(251,177,48,0.1); }
    .route-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .route-card-name {
      font-family: 'Noto Sans TC', system-ui, sans-serif; font-weight: 600; font-size: 15px;
      color: var(--text-primary); line-height: 1.3;
    }
    .route-diff-badge {
      font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px; border: 1px solid; flex-shrink: 0;
    }
    .route-demo-badge {
      font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px;
      padding: 2px 6px; border-radius: 3px;
      background: rgba(251,177,48,0.15); color: var(--accent); border: 1px solid rgba(251,177,48,0.3);
    }
    .route-card-stats {
      display: flex; gap: 12px; flex-wrap: wrap;
      font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted);
    }

    /* Mini elevation chart in route card */
    .route-mini-chart {
      width: 100%; height: 40px; border-radius: 5px; overflow: hidden;
      opacity: 0.8;
    }
    .route-mini-chart svg { display: block; width: 100%; height: 100%; }

    /* Route label badge (A / B / C) */
    .route-label-badge {
      font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      padding: 2px 7px; border-radius: 3px;
      background: rgba(251,177,48,0.15); color: var(--accent);
      border: 1px solid rgba(251,177,48,0.35); flex-shrink: 0;
    }
    .route-code-text {
      font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim);
      letter-spacing: 0.5px;
    }

    /* A/B endpoint markers */
    .ab-marker {
      width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid white;
      display: flex; align-items: center; justify-content: center;
      font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700;
      color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.45); cursor: default;
    }
    .ab-marker.a { background: #22c55e; box-shadow: 0 2px 10px rgba(34,197,94,0.5); }
    .ab-marker.b { background: #ef4444; box-shadow: 0 2px 10px rgba(239,68,68,0.5); }

    /* Milestone markers */
    .ms-marker {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .ms-marker-dot {
      width: 12px; height: 12px; border-radius: 50%;
      background: #a78bfa; border: 2px solid white;
      box-shadow: 0 1px 6px rgba(167,139,250,0.6);
    }
    .ms-marker-label {
      font-family: 'DM Mono', monospace; font-size: 9px; color: white;
      background: rgba(0,0,0,0.6); padding: 1px 5px; border-radius: 3px;
      white-space: nowrap; pointer-events: none;
    }

    /* Mobile route cards — same class, different container */
    @media (max-width: 768px) {
      .route-card { padding: 13px 16px; }
    }

    /* ── ROUTE DETAIL CARD ──────────────────────────── */
    .route-detail {
      position: fixed; bottom: 0; left: 0; right: 0;
      max-height: 55vh;
      background: rgba(14, 11, 7, 0.96);
      backdrop-filter: blur(16px);
      border-top: 1px solid rgba(251,177,48,0.25);
      z-index: 500;
      display: flex; flex-direction: column;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .route-detail.open { transform: translateY(0); }
    .route-detail-header {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 16px 4px; flex-shrink: 0;
    }
    .route-detail-name {
      font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 18px;
      color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }
    .route-detail-close {
      background: rgba(255,245,215,0.1); border: 1px solid rgba(255,245,215,0.2); color: var(--text-muted); cursor: pointer;
      font-size: 18px; padding: 6px 10px; border-radius: 8px; flex-shrink: 0;
      transition: all 0.15s; line-height: 1;
    }
    .route-detail-close:hover { color: var(--text-primary); background: rgba(255,245,215,0.2); }
    .route-detail-desc {
      padding: 0 16px 6px;
      font-family: 'Noto Sans TC', system-ui, sans-serif; font-size: 12px;
      color: var(--text-muted); line-height: 1.45;
    }
    .route-detail-stats {
      display: flex; gap: 10px; padding: 0 16px 6px; flex-wrap: wrap; flex-shrink: 0;
      font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted);
    }
    .route-detail-photos {
      display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; flex-shrink: 0;
      scrollbar-width: none;
    }
    .route-detail-photos::-webkit-scrollbar { display: none; }
    .route-detail-photo {
      width: 110px; height: 70px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
      background: rgba(255,245,215,0.06); border: 1px solid var(--sidebar-border);
    }
    .route-detail-photo-placeholder {
      width: 110px; height: 70px; border-radius: 8px; flex-shrink: 0;
      background: rgba(255,245,215,0.04); border: 1px dashed var(--sidebar-border);
      display: flex; align-items: center; justify-content: center;
      font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim);
    }
    .route-detail-spacer { height: env(safe-area-inset-bottom, 8px); flex-shrink: 0; }

    /* ── RIDING MODE PILL ── */
    .riding-pill {
      display: none; position: fixed; top: 54px; left: 50%; transform: translateX(-50%);
      z-index: 310; padding: 7px 14px; border-radius: 20px;
      background: rgba(22,18,12,0.85); backdrop-filter: blur(12px);
      border: 1px solid rgba(251,177,48,0.3);
      color: var(--accent); font-size: 12px; font-weight: 600;
      white-space: nowrap; cursor: default;
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
      font-family: 'Noto Sans TC', system-ui, sans-serif;
    }
    .riding-pill .riding-close {
      background: none; border: none; color: rgba(255,245,215,0.5);
      font-size: 14px; margin-left: 8px; cursor: pointer; padding: 0 2px;
      transition: color 0.15s;
    }
    .riding-pill .riding-close:hover { color: white; }

    @media (max-width: 768px) {
      .route-detail { max-height: 55vh; border-radius: 14px 14px 0 0; }
    }

    /* Gov Toilet cluster & popup styles */
    .gov-toilet-popup .maplibregl-popup-content {
      background: rgba(20,10,40,0.95); color: #f0e6ff; border-radius: 12px;
      padding: 14px 16px; font-family: 'DM Sans', system-ui, sans-serif; max-width: 280px;
      border: 1px solid rgba(139,92,246,0.3); backdrop-filter: blur(8px);
    }
    .gov-toilet-popup .maplibregl-popup-tip { border-top-color: rgba(20,10,40,0.95); }
    .gov-toilet-popup .gtp-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .gov-toilet-popup .gtp-addr { font-size: 11px; color: rgba(240,230,255,0.6); margin-bottom: 8px; }
    .gov-toilet-popup .gtp-row { font-size: 12px; margin-bottom: 3px; }
    .gov-toilet-popup .gtp-grade { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
    .gov-toilet-popup .grade-excellent { background: rgba(16,185,129,0.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
    .gov-toilet-popup .grade-good { background: rgba(59,130,246,0.2); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
    .gov-toilet-popup .grade-average { background: rgba(234,179,8,0.2); color: #fde68a; border: 1px solid rgba(234,179,8,0.3); }
    .gov-toilet-popup .grade-poor { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
    .gov-toilet-popup .gtp-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
    .gov-toilet-popup .gtp-type-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; background: rgba(139,92,246,0.15); color: #ddd6fe; border: 1px solid rgba(139,92,246,0.25); white-space: nowrap; }
    .gov-toilet-popup .gtp-nav { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 8px; background: rgba(139,92,246,0.25); color: #c4b5fd; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(139,92,246,0.3); }
    .gov-toilet-popup .gtp-nav:hover { background: rgba(139,92,246,0.4); }

    /* CVS popup styles */
    .cvs-popup .maplibregl-popup-content {
      background: rgba(10,30,20,0.95); color: #e6fff0; border-radius: 12px;
      padding: 14px 16px; font-family: 'DM Sans', system-ui, sans-serif; max-width: 280px;
      border: 1px solid rgba(16,185,129,0.3); backdrop-filter: blur(8px);
    }
    .cvs-popup .maplibregl-popup-tip { border-top-color: rgba(10,30,20,0.95); }
    .cvs-popup .cvs-brand { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
    .cvs-popup .brand-7 { background: rgba(0,120,80,0.3); color: #6ee7b7; border: 1px solid rgba(0,120,80,0.4); }
    .cvs-popup .brand-fm { background: rgba(59,130,246,0.2); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
    .cvs-popup .cvs-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .cvs-popup .cvs-addr { font-size: 11px; color: rgba(230,255,240,0.6); margin-bottom: 8px; }
    .cvs-popup .cvs-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
    .cvs-popup .cvs-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; background: rgba(16,185,129,0.15); color: #a7f3d0; border: 1px solid rgba(16,185,129,0.25); }
    .cvs-popup .cvs-badge.off { opacity: 0.35; }
    .cvs-popup .cvs-nav { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(16,185,129,0.3); }
    .cvs-popup .cvs-nav { background: rgba(16,185,129,0.25); color: #6ee7b7; }
    .cvs-popup .cvs-nav:hover { background: rgba(16,185,129,0.4); }
    .cvs-popup .cvs-add { background: rgba(139,92,246,0.25); color: #c4b5fd; border-color: rgba(139,92,246,0.3); }
    .cvs-popup .cvs-add:hover { background: rgba(139,92,246,0.4); }

    /* ── POI Mini Popup (route mode) ── */
    .poi-popup {
      position: fixed; z-index: 500;
      left: 50%; transform: translateX(-50%);
      bottom: 180px;
      width: calc(100% - 32px); max-width: 360px;
      background: rgba(22,18,12,0.97); border: 1px solid rgba(255,245,215,0.12);
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      animation: popupSlideUp 0.25s ease-out;
      display: none;
    }
    .poi-popup.visible { display: block; }
    @keyframes popupSlideUp { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    .poi-popup-photo { width: 100%; height: 120px; object-fit: cover; display: none; }
    .poi-popup-photo.has-photo { display: block; }
    .poi-popup-body { padding: 12px 16px; }
    .poi-popup-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; color: rgba(255,245,215,0.92); line-height: 1.3; }
    .poi-popup-name-zh { font-size: 12px; color: rgba(255,245,215,0.45); margin-top: 2px; }
    .poi-popup-desc { font-size: 12px; color: rgba(255,245,215,0.55); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .poi-popup-actions { display: flex; gap: 8px; padding: 10px 16px 14px; }
    .poi-popup-btn { flex: 1; padding: 9px; border-radius: 8px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.15s; }
    .poi-popup-btn.nav { background: var(--accent); color: #1a1004; }
    .poi-popup-btn.close { background: transparent; border: 1px solid rgba(255,245,215,0.15); color: rgba(255,245,215,0.5); }
    .poi-popup-btn.nav:hover { opacity: 0.85; }
    .poi-popup-btn.close:hover { border-color: rgba(255,245,215,0.3); color: rgba(255,245,215,0.7); }
    @media (min-width: 769px) { .poi-popup { bottom: 40px; left: calc(var(--sidebar-w) + 50%); transform: translateX(calc(-50% - var(--sidebar-w)/2)); } }

    /* ── Milestone POI popup (map-anchored) ── */
    .ms-popup-wrap .maplibregl-popup-content {
      background: rgba(22,18,12,0.97); border: 1px solid rgba(255,245,215,0.12);
      border-radius: 12px; overflow: hidden; padding: 0;
      box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
    .ms-popup-wrap .maplibregl-popup-tip { border-top-color: rgba(22,18,12,0.97); }
    .ms-popup-card { width: 260px; }
    .ms-popup-actions { display: flex; gap: 8px; margin-top: 8px; }
    .ms-popup-btn {
      flex: 1; padding: 8px 0; border-radius: 6px; font-size: 12px; font-weight: 600;
      text-align: center; text-decoration: none; cursor: pointer; transition: all .15s;
      box-sizing: border-box;
    }
    .ms-popup-nav {
      background: var(--accent); color: #1a1004; border: 1px solid var(--accent);
    }
    .ms-popup-nav:hover { opacity: 0.85; }
    .ms-popup-carousel {
      position: relative; overflow: hidden; border-radius: 12px 12px 0 0;
    }
    .ms-popup-prev, .ms-popup-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
      width: 28px; height: 28px; font-size: 16px; cursor: pointer; z-index: 2;
      display: flex; align-items: center; justify-content: center;
    }
    .ms-popup-prev { left: 6px; }
    .ms-popup-next { right: 6px; }
    .ms-popup-prev:hover, .ms-popup-next:hover { background: rgba(0,0,0,0.7); }
    .ms-popup-dots {
      position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 5px; z-index: 2;
    }
    .ms-popup-dot {
      width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4);
      cursor: pointer; transition: background .2s;
    }
    .ms-popup-dot.active { background: #fff; }
    .ms-popup-close {
      position: absolute; top: 6px; right: 6px; z-index: 3;
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(0,0,0,0.55); color: #fff; border: none;
      font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .ms-popup-close:hover { background: rgba(0,0,0,0.8); }
    .ms-popup-close-btn {
      flex: 1; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
      background: transparent; border: 1px solid rgba(255,245,215,0.15); color: rgba(255,245,215,0.5);
      cursor: pointer; transition: all .15s;
    }
    .ms-popup-close-btn:hover { border-color: rgba(255,245,215,0.3); color: rgba(255,245,215,0.7); }