* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --cn-primary: #FF7A00;
            --cn-primary-dark: #FFB347;
            --cn-primary-light: rgba(255,122,0,0.08);
            --cn-accent: #FACC15;
            --cn-transit: #0d9488;
            --cn-success: #0d9488;
            --cn-danger: #ef4444;
            --cn-warning: #f59e0b;
            --cn-text: #1f2937;
            --cn-text-secondary: #6b7280;
            --cn-text-muted: #6b7280;
            --cn-bg: #f8fafc;
            --cn-surface: #ffffff;
            --cn-border: #e2e8f0;
            --cn-border-light: #f1f5f9;
            --cn-radius-sm: 8px;
            --cn-radius-md: 12px;
            --cn-radius-lg: 16px;
            --cn-radius-xl: 20px;
            --cn-radius-full: 9999px;
            --cn-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
            --cn-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
            --cn-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
            --cn-shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
            --cn-font: 'Inter', system-ui, -apple-system, sans-serif;
            --cn-bottom-nav-base: 64px;
            --cn-bottom-nav-height: calc(var(--cn-bottom-nav-base) + env(safe-area-inset-bottom, 0px));
            --cn-status-bar: env(safe-area-inset-top, 0px);
            --cn-navbar-base: 60px;
            --cn-navbar-height: calc(var(--cn-navbar-base) + var(--cn-status-bar));
        }
        html { scroll-behavior: smooth; }
        ::selection { background: rgba(59,157,227,0.2); color: #1d4ed8; }
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: #0f172a;
            min-height: 100vh;
            color: #f1f5f9;
            padding-top: var(--cn-navbar-height);
            padding-bottom: var(--cn-bottom-nav-height);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
        .main { min-height: calc(100vh - var(--cn-navbar-height)); }
        .cn-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
        .cn-heading { font-size: 1.4rem; font-weight: 700; color: #f1f5f9; }
        .cn-text-muted { color: #94a3b8; }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes ctaPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 4px 24px rgba(255,122,0,0.45); }
            50% { transform: scale(1.012); box-shadow: 0 8px 36px rgba(255,122,0,0.7); }
        }
        @keyframes orangeGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,0); }
            50% { box-shadow: 0 0 20px 6px rgba(255,122,0,0.3); }
        }
        @keyframes arArrowPulse {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-5px) scale(1.1); }
        }
        @keyframes livePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.75); }
        }
        @keyframes bounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
            40% { transform: translateY(-8px); opacity: 1; }
        }

        .demo-card {
            background: rgba(0,0,0,0.28);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 20px;
            padding: 18px;
            margin: 0 0 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 16px 40px rgba(0,0,0,0.35);
            transition: box-shadow 0.4s ease;
            animation: fadeInUp 0.7s ease-out both;
            animation-delay: 0.1s;
        }
        .demo-card-expanded { box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 24px 56px rgba(0,0,0,0.5); }
        .demo-route-row { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
        .demo-endpoint { display:flex;align-items:center;gap:7px;font-size:0.87rem;font-weight:600;color:rgba(255,255,255,0.92);flex:1;min-width:0; }
        .demo-endpoint span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
        .demo-dot { width:8px;height:8px;min-width:8px;border-radius:50%;flex-shrink:0; }
        .demo-dot-start { background:#34d399; }
        .demo-dot-end { background:#f87171; }
        .demo-route-arrow { color:rgba(255,255,255,0.35);font-size:1rem;flex-shrink:0; }
        .demo-meta-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
        .demo-tag { padding:3px 10px;border-radius:20px;font-size:0.74rem;font-weight:600; }
        .demo-tag-transit { background:rgba(99,102,241,0.3);color:#c7d2fe;border:1px solid rgba(99,102,241,0.3); }
        .demo-stat { font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.72);padding:3px 9px;background:rgba(255,255,255,0.1);border-radius:20px; }
        .demo-live-pill { display:flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:700;color:#34d399;padding:3px 9px;background:rgba(52,211,153,0.15);border-radius:20px;border:1px solid rgba(52,211,153,0.3);margin-left:auto; }
        .demo-live-dot { width:6px;height:6px;background:#34d399;border-radius:50%;animation:livePulse 1.5s ease-in-out infinite; }
        .ar-demo-widget { display:flex;align-items:center;gap:14px;background:rgba(255,122,0,0.12);border:1px solid rgba(255,122,0,0.3);border-radius:14px;padding:14px; }
        .ar-arrow-wrap { width:48px;height:48px;min-width:48px;background:linear-gradient(135deg,#FF7A00,#FFB347);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,122,0,0.55);animation:orangeGlow 2.2s ease-in-out infinite; }
        .ar-arrow { font-size:1.85rem;color:#fff;animation:arArrowPulse 1.8s ease-in-out infinite;line-height:1;display:block; }
        .ar-instruction-wrap { flex:1; }
        .ar-instruction { font-size:0.87rem;font-weight:700;color:#ffffff;margin-bottom:3px;transition:all 0.4s ease; }
        .ar-step-tag { font-size:0.71rem;color:rgba(255,255,255,0.5);font-weight:500; }
        .demo-steps-container { max-height:0;overflow:hidden;transition:max-height 0.45s ease,margin-top 0.3s ease; }
        .demo-card-expanded .demo-steps-container { max-height:240px;margin-top:14px; }
        .demo-step { padding:9px 0;font-size:0.82rem;color:rgba(255,255,255,0.8);font-weight:500;border-bottom:1px solid rgba(255,255,255,0.1);opacity:0;transform:translateX(-10px);transition:opacity 0.35s ease,transform 0.35s ease; }
        .demo-step:last-child { border-bottom:none; }
        .demo-step.demo-step-visible { opacity:1;transform:translateX(0); }
        .hero-ctas { display:flex;flex-direction:column;gap:10px;margin:0 0 14px; }
        .hero-cta-primary { background:linear-gradient(135deg,#FF7A00 0%,#FFB347 100%);color:#ffffff;border:none;border-radius:14px;padding:16px 24px;font-family:'Inter',system-ui,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;width:100%;min-height:52px;animation:ctaPulse 2.8s ease-in-out infinite;letter-spacing:0.01em;box-shadow:0 4px 24px rgba(255,122,0,0.45);transition:transform 0.2s,box-shadow 0.2s; }
        .hero-cta-primary:hover { transform:translateY(-2px);animation:none;box-shadow:0 8px 36px rgba(255,122,0,0.65); }
        .hero-cta-primary:active { transform:scale(0.99); }
        .hero-cta-secondary { background:rgba(255,255,255,0.1);backdrop-filter:blur(4px);color:rgba(255,255,255,0.85);border:1.5px solid rgba(255,255,255,0.3);border-radius:14px;padding:13px 24px;font-family:'Inter',system-ui,sans-serif;font-size:0.9rem;font-weight:600;cursor:pointer;width:100%;transition:background 0.2s,border-color 0.2s; }
        .hero-cta-secondary:hover { background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.5); }
        .trust-badges { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 4px; }
        .trust-badge { font-size:0.74rem;font-weight:600;color:rgba(255,255,255,0.68);padding:4px 11px;border-radius:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15); }
        /* Hero problem strip */
        .hero-problem-strip { display:flex;flex-direction:column;gap:10px;margin:0 0 16px; }
        @media (min-width:600px) { .hero-problem-strip { flex-direction:row; } }
        .hero-problem-card { flex:1;display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:13px 14px; }
        .hpc-icon { font-size:1.45rem;line-height:1;margin-top:2px;flex-shrink:0; }
        .hpc-problem { font-size:0.76rem;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:5px; }
        .hpc-fix { font-size:0.82rem;font-weight:700;color:#4ade80;line-height:1.35; }
        /* Demo offline pill */
        .demo-offline-pill { display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:3px 11px;font-size:0.71rem;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:11px; }
        /* AR camera mockup demo card */
        .ar-camera-mockup { background:linear-gradient(160deg,#080814 0%,#12122a 50%,#0d1020 100%);border:1.5px solid rgba(59,157,227,0.35);padding:16px 18px 0;overflow:hidden;cursor:pointer; }
        .ar-camera-hud-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
        .ar-camera-badge { background:linear-gradient(135deg,#3B9DE3,#6BB8EC);color:#fff;font-size:0.68rem;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:0.6px;text-transform:uppercase;animation:livePulse 1.5s ease-in-out infinite; }
        .ar-camera-walking-tag { font-size:0.7rem;font-weight:600;color:rgba(255,255,255,0.45);letter-spacing:0.4px; }
        .ar-camera-bg { position:relative;margin:0 -18px;height:138px;background:linear-gradient(180deg,#0a0a1e 0%,#101028 40%,#18183a 70%,#0c0c20 100%);overflow:hidden; }
        .ar-camera-bg::before { content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(59,157,227,0.04) 0,rgba(59,157,227,0.04) 1px,transparent 1px,transparent 52px),repeating-linear-gradient(0deg,rgba(59,157,227,0.04) 0,rgba(59,157,227,0.04) 1px,transparent 1px,transparent 52px); }
        .ar-camera-horizon { position:absolute;bottom:28%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(59,157,227,0.25) 30%,rgba(59,157,227,0.45) 50%,rgba(59,157,227,0.25) 70%,transparent 100%); }
        .ar-camera-arrow-zone { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2; }
        .ar-camera-big-arrow { font-size:3.8rem;color:#3B9DE3;filter:drop-shadow(0 0 18px rgba(59,157,227,0.9)) drop-shadow(0 0 36px rgba(59,157,227,0.5));animation:arArrowPulse 1.8s ease-in-out infinite;line-height:1;transition:transform 0.5s ease; }
        @keyframes scanLine { 0%{top:-2px} 100%{top:100%} }
        .ar-camera-scanline { position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(59,157,227,0.3),transparent);animation:scanLine 2.8s linear infinite;z-index:3; }
        .ar-camera-street-label { position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.72);color:rgba(255,255,255,0.65);font-size:0.68rem;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:0.4px;white-space:nowrap;z-index:4;border:1px solid rgba(255,255,255,0.1); }
        .ar-camera-instruction-bar { margin:0 -18px;padding:11px 18px 14px;background:rgba(0,0,0,0.55);border-top:1px solid rgba(59,157,227,0.28); }
        .ar-camera-dist { font-size:0.68rem;font-weight:800;color:#3B9DE3;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:2px; }
        .ar-camera-action { font-size:0.92rem;font-weight:700;color:#ffffff;margin-bottom:2px;transition:opacity 0.3s ease; }
        .ar-camera-step-tag { font-size:0.68rem;color:rgba(255,255,255,0.45);font-weight:500; }
        /* Why CityNav — moment cards */
        .moment-card { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:16px;overflow:hidden;margin-bottom:14px; }
        .moment-card:last-child { margin-bottom:0; }
        .moment-fail { display:flex;align-items:flex-start;gap:12px;padding:15px 16px;background:rgba(220,38,38,0.09);border-bottom:1px solid rgba(255,255,255,0.07); }
        .moment-fix { display:flex;align-items:flex-start;gap:12px;padding:15px 16px;background:rgba(22,163,74,0.09); }
        .moment-scenario-icon { font-size:1.55rem;line-height:1;margin-top:2px;flex-shrink:0; }
        .moment-fail-label { font-size:0.64rem;font-weight:800;color:#f87171;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px; }
        .moment-fail-text { font-size:0.84rem;color:rgba(255,255,255,0.7);line-height:1.45; }
        .moment-fix-label { font-size:0.64rem;font-weight:800;color:#4ade80;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px; }
        .moment-fix-text { font-size:0.84rem;color:rgba(255,255,255,0.85);font-weight:500;line-height:1.45; }
        /* ── Navigation-first landing page ──────────────────────────────────── */
        /* Mini-map animation */
        @keyframes routeDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
        @keyframes gpsPulse { 0%,100% { r: 6; opacity: 1; } 50% { r: 10; opacity: 0.3; } }
        @keyframes gpsPulse2 { 0%,100% { r: 3; opacity: 1; } 50% { r: 5; opacity: 0.6; } }
        @keyframes pinDrop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes dotMove { 0% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
        .nav-map-wrap { width:100%;height:240px;border-radius:24px 24px 0 0;overflow:hidden;position:relative;background:#1e293b;border:1px solid rgba(255,255,255,0.06);border-bottom:none;box-shadow:0 -1px 0 rgba(255,122,0,0.18) inset; }
        .nav-map-wrap #homeMap { width:100%;height:100%; }
        .home-map-locate-btn { position:absolute;bottom:12px;right:12px;z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(10,16,32,0.92);border:1px solid rgba(255,122,0,0.4);color:#FFB347;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all 0.18s;box-shadow:0 4px 16px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.04) inset; }
        .home-map-locate-btn:hover { background:rgba(255,122,0,0.85);color:#fff;transform:scale(1.08);box-shadow:0 6px 22px rgba(255,122,0,0.5); }
        .home-map-route-badge { position:absolute;top:12px;left:12px;z-index:5;background:linear-gradient(135deg,rgba(94,234,212,0.18),rgba(94,234,212,0.08));border:1px solid rgba(94,234,212,0.45);border-radius:24px;padding:6px 14px;font-size:0.72rem;font-weight:700;color:#5EEAD4;letter-spacing:0.4px;backdrop-filter:blur(8px);display:none;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(94,234,212,0.18); }
        /* Route card — FROM/TO inputs */
        .nav-route-card { background:linear-gradient(180deg,rgba(15,23,42,0.96),rgba(10,16,32,0.98));border:1px solid rgba(255,255,255,0.08);border-top:none;border-radius:0 0 24px 24px;padding:18px;backdrop-filter:blur(14px);box-shadow:0 16px 48px rgba(0,0,0,0.45),0 0 0 1px rgba(255,122,0,0.05) inset; }
        .nav-input-row { display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);margin-bottom:8px;transition:all 0.2s; }
        .nav-input-row:hover { background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12); }
        .nav-input-row:focus-within { border-color:rgba(255,122,0,0.55);background:rgba(255,122,0,0.04);box-shadow:0 0 0 3px rgba(255,122,0,0.08); }
        .nav-input-row:last-of-type { margin-bottom:0; }
        .nav-dot { width:11px;height:11px;border-radius:50%;flex-shrink:0;position:relative; }
        .nav-dot.from { background:#5EEAD4;box-shadow:0 0 0 3px rgba(94,234,212,0.18),0 0 8px rgba(94,234,212,0.6); }
        .nav-dot.to { background:#FF7A00;box-shadow:0 0 0 3px rgba(255,122,0,0.18),0 0 8px rgba(255,122,0,0.7); }
        .nav-input { flex:1;background:none;border:none;color:#f1f5f9;font-size:0.92rem;font-weight:500;outline:none;font-family:inherit;min-width:0; }
        .nav-input::placeholder { color:rgba(255,255,255,0.32); }
        .nav-gps-btn { background:linear-gradient(135deg,rgba(94,234,212,0.18),rgba(94,234,212,0.08));border:1px solid rgba(94,234,212,0.4);color:#5EEAD4;border-radius:10px;padding:5px 10px;font-size:0.7rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;transition:all 0.18s;letter-spacing:0.3px; }
        .nav-gps-btn:hover { background:rgba(94,234,212,0.28);transform:translateY(-1px);box-shadow:0 4px 12px rgba(94,234,212,0.25); }
        .nav-divider { display:flex;align-items:center;justify-content:center;margin:4px 0;position:relative; }
        .nav-divider-line { flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); }
        .nav-divider-icon { padding:0 12px;color:rgba(255,122,0,0.5);font-size:0.78rem;font-weight:700; }
        /* Mode selector */
        .nav-modes { display:flex;gap:8px;margin:14px 0 16px; }
        .nav-mode-btn { flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);cursor:pointer;font-family:inherit;transition:all 0.2s;min-height:60px;position:relative;overflow:hidden; }
        .nav-mode-btn.active { border-color:transparent;background:linear-gradient(135deg,rgba(255,122,0,0.18),rgba(250,204,21,0.12));box-shadow:0 0 0 1.5px rgba(255,122,0,0.5),0 6px 18px rgba(255,122,0,0.18); }
        .nav-mode-btn.active::before { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,#FF7A00,transparent); }
        .nav-mode-btn:hover:not(.active) { border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);transform:translateY(-1px); }
        .nav-mode-icon { font-size:1.3rem;line-height:1; }
        .nav-mode-label { font-size:0.72rem;font-weight:700;color:#f1f5f9;letter-spacing:0.2px; }
        .nav-mode-tag { font-size:0.58rem;font-weight:700;padding:1.5px 6px;border-radius:5px;letter-spacing:0.3px; }
        .nav-mode-tag.free { background:rgba(94,234,212,0.18);color:#5EEAD4; }
        .nav-mode-tag.premium { background:rgba(251,188,4,0.18);color:#FBBC04; }
        /* Get Directions CTA */
        .nav-go-btn { width:100%;padding:15px;border:none;border-radius:16px;background:linear-gradient(135deg,#FF6B35 0%,#FF7A00 50%,#FFB347 100%);color:#fff;font-size:1.02rem;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-0.2px;box-shadow:0 8px 28px rgba(255,122,0,0.42),0 0 0 1px rgba(255,255,255,0.08) inset;transition:all 0.2s;min-height:54px;position:relative;overflow:hidden; }
        .nav-go-btn::after { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);transition:left 0.6s; }
        .nav-go-btn:hover { transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,122,0,0.55),0 0 0 1px rgba(255,255,255,0.12) inset; }
        .nav-go-btn:hover::after { left:100%; }
        /* Trust + chips below hero */
        .landing-trust-line { text-align:center;font-size:0.74rem;color:rgba(255,255,255,0.5);letter-spacing:0.3px;margin:18px auto 14px;display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:100px; }
        .landing-trust-line span { color:#fff;font-weight:700; }
        /* center the trust pill */
        .hero-inner > .landing-trust-line { display:flex;width:fit-content;margin-left:auto;margin-right:auto; }
        .landing-quick-chips { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;justify-content:center; }
        .landing-quick-chip { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:100px;color:rgba(255,255,255,0.72);font-size:0.78rem;font-weight:600;padding:7px 14px;cursor:pointer;font-family:inherit;transition:all 0.18s;white-space:nowrap; }
        .landing-quick-chip:hover { background:linear-gradient(135deg,rgba(255,122,0,0.18),rgba(250,204,21,0.08));border-color:rgba(255,122,0,0.45);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,122,0,0.18); }
        .landing-chip-label { font-size:0.62rem;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:1.6px;font-weight:700;margin:18px 0 10px;text-align:center;font-family:ui-monospace,'SF Mono',Menlo,monospace; }
        /* Scenario section */
        .scenario-section { padding:32px 0 8px; }
        .scenario-section-label { font-size:0.65rem;font-weight:800;color:#FF7A00;text-transform:uppercase;letter-spacing:2.4px;text-align:center;margin-bottom:20px;font-family:ui-monospace,'SF Mono',Menlo,monospace;display:flex;align-items:center;justify-content:center;gap:10px; }
        .scenario-section-label::before, .scenario-section-label::after { content:'';flex:0 0 32px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,0,0.5)); }
        .scenario-section-label::after { background:linear-gradient(90deg,rgba(255,122,0,0.5),transparent); }
        .scenario-card { display:flex;align-items:flex-start;gap:14px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:18px;margin-bottom:12px;transition:all 0.22s;position:relative;overflow:hidden; }
        .scenario-card::before { content:'';position:absolute;top:0;left:0;width:3px;height:0;background:linear-gradient(180deg,#FF7A00,#FACC15);transition:height 0.3s; }
        .scenario-card:hover { border-color:rgba(255,122,0,0.35);background:linear-gradient(180deg,rgba(255,122,0,0.06),rgba(255,255,255,0.02));transform:translateX(2px); }
        .scenario-card:hover::before { height:100%; }
        .scenario-card:last-child { margin-bottom:0; }
        .sc-icon { font-size:2rem;line-height:1;flex-shrink:0;margin-top:2px;filter:drop-shadow(0 2px 6px rgba(255,122,0,0.25)); }
        .sc-situation { font-size:0.96rem;font-weight:700;color:#f1f5f9;margin-bottom:5px;line-height:1.3;letter-spacing:-0.2px; }
        .sc-fix { font-size:0.82rem;color:rgba(255,255,255,0.6);line-height:1.55;margin-bottom:10px; }
        .sc-badges { display:flex;gap:6px;flex-wrap:wrap; }
        .sc-badge { font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.6px; }
        .sc-badge.free { background:rgba(94,234,212,0.15);color:#5EEAD4;border:1px solid rgba(94,234,212,0.3); }
        .sc-badge.premium { background:rgba(251,188,4,0.15);color:#FBBC04;border:1px solid rgba(251,188,4,0.3); }
        /* City coverage strip */
        .city-strip { margin:32px 0 20px;padding:24px 20px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,122,0,0.02));border:1px solid rgba(255,255,255,0.07);border-radius:20px;text-align:center; }
        .city-strip-label { font-size:0.65rem;font-weight:800;color:#FF7A00;text-transform:uppercase;letter-spacing:2.2px;margin-bottom:14px;font-family:ui-monospace,'SF Mono',Menlo,monospace; }
        .city-strip-list { display:flex;flex-wrap:wrap;gap:7px;justify-content:center; }
        .city-strip-chip { font-size:0.76rem;color:rgba(255,255,255,0.62);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:100px;padding:5px 12px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.18s;font-weight:500; }
        .city-strip-chip:hover { background:rgba(255,122,0,0.15);color:#fff;border-color:rgba(255,122,0,0.4);transform:translateY(-1px); }

        /* ===========================================================
           LIGHT THEME — HOME PAGE REDESIGN
           Scoped to body.cn-light-home (map/AR pages stay dark)
           =========================================================== */
        body.cn-light-home { background: #FAFAF7 !important; color: #0F1419; }
        body.cn-light-home .main { background: #FAFAF7; }
        body.cn-light-home .navbar { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid #ECE9E0; box-shadow: 0 1px 0 rgba(15,20,25,0.03); backdrop-filter: blur(14px); }
        body.cn-light-home .navbar-brand, body.cn-light-home .navbar-brand span { color: #0F1419 !important; }
        body.cn-light-home .nav-link { color: #4B5563 !important; }
        body.cn-light-home .nav-link:hover { background: #FFF1E5 !important; color: #C2410C !important; }
        body.cn-light-home .nav-toggle, body.cn-light-home .navbar-toggler { color: #0F1419 !important; background: transparent !important; }
        body.cn-light-home .navbar-toggler span { background: #0F1419 !important; }
        body.cn-light-home .navbar-toggler:hover { background: #FFF1E5 !important; }
        body.cn-light-home .navbar-collapse { background: #FFFFFF !important; border-left: 1px solid #ECE9E0 !important; box-shadow: -8px 0 32px rgba(15,20,25,0.08) !important; }
        body.cn-light-home .navbar-collapse .nav-link { color: #0F1419 !important; }
        body.cn-light-home .navbar-collapse .nav-link:hover { background: #FFF1E5 !important; color: #C2410C !important; }
        body.cn-light-home #appFooter { background: #FFFFFF !important; color: #6B7280 !important; border-top: 1px solid #ECE9E0 !important; }
        body.cn-light-home #appFooter a { color: #4B5563 !important; }
        body.cn-light-home #appFooter h3, body.cn-light-home #appFooter h4 { color: #0F1419 !important; }

        .lh-page { max-width: 480px; margin: 0 auto; padding: 28px 16px 48px; display: flex; flex-direction: column; gap: 28px; font-family: 'Inter','SF Pro Display',-apple-system,system-ui,sans-serif; color: #0F1419; }
        .lh-top { display: contents; }

        .lh-hero { padding: 8px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
        .lh-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: #C2410C; letter-spacing: 1.6px; text-transform: uppercase; padding: 6px 12px; background: #FFF1E5; border: 1px solid #FFE3CC; border-radius: 100px; margin-bottom: 18px; }
        .lh-h1 { font-size: 2.2rem; font-weight: 800; color: #0F1419; line-height: 1.08; letter-spacing: -1.4px; margin: 0 0 14px; font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif; text-wrap: balance; }
        .lh-h1 em { font-style: italic; font-weight: 700; color: #E8590C; font-family: 'Fraunces',Georgia,serif; }
        .lh-lead { font-size: 0.97rem; color: #525866; line-height: 1.55; margin: 0 auto 18px; max-width: 380px; text-wrap: pretty; }
        .lh-meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; color: #6B7280; padding: 8px 18px; background: #FFFFFF; border: 1px solid #ECE9E0; border-radius: 100px; box-shadow: 0 1px 2px rgba(15,20,25,0.03); width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto; text-align: center; }
        .lh-meta strong { color: #0F1419; font-weight: 700; }
        .lh-meta-dot { width: 3px; height: 3px; background: #D4D0C5; border-radius: 50%; }
        .lh-store-badges { display: flex; justify-content: center; margin-top: 22px; }
        .lh-appstore-badge-img { display: inline-block; transition: transform 0.18s ease, opacity 0.18s ease; }
        .lh-appstore-badge-img:hover { transform: scale(1.05); opacity: 0.88; }
        .lh-badge-official { height: 50px; width: auto; display: block; }

        .lh-card { background: #FFFFFF; border: 1px solid #ECE9E0; border-radius: 22px; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 12px 32px rgba(15,20,25,0.05); }

        .lh-planner { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
        .lh-planner-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
        .lh-card-eyebrow { font-size: 0.66rem; font-weight: 700; color: #6B7280; letter-spacing: 1.4px; text-transform: uppercase; }
        .lh-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 700; color: #047857; letter-spacing: 1px; text-transform: uppercase; }
        .lh-live::before { content:''; width: 6px; height: 6px; background: #10B981; border-radius: 50%; box-shadow: 0 0 6px rgba(16,185,129,0.6); animation: lhLivePulse 1.8s infinite; }
        @keyframes lhLivePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

        .lh-map-frame { width: 100%; height: 200px; border-radius: 14px; overflow: hidden; background: #F5F4EE; position: relative; border: 1px solid #ECE9E0; }
        .lh-map-frame #homeMap { width: 100%; height: 100%; }
        body.cn-light-home .home-map-locate-btn { position: absolute; bottom: 10px; right: 10px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: 1px solid #ECE9E0; color: #E8590C; box-shadow: 0 2px 8px rgba(15,20,25,0.1); backdrop-filter: none; }
        body.cn-light-home .home-map-locate-btn:hover { background: #E8590C; color: #FFFFFF; transform: scale(1.05); box-shadow: 0 4px 14px rgba(232,89,12,0.35); }
        body.cn-light-home .home-map-route-badge { position: absolute; top: 10px; left: 10px; z-index: 5; background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0 !important; border-radius: 100px; padding: 5px 12px; font-size: 0.7rem; font-weight: 700; backdrop-filter: none; box-shadow: 0 2px 8px rgba(16,185,129,0.15); }

        .lh-input-stack { display: flex; flex-direction: column; gap: 6px; }
        .lh-input-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #FAFAF7; border: 1.5px solid #ECE9E0; transition: all 0.18s; }
        .lh-input-row:focus-within { background: #FFFFFF; border-color: #E8590C; box-shadow: 0 0 0 4px rgba(232,89,12,0.08); }
        .lh-pin { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
        .lh-pin-from { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
        .lh-pin-to { background: #E8590C; box-shadow: 0 0 0 3px rgba(232,89,12,0.16); }
        .lh-input { flex: 1; border: none; background: transparent; outline: none; font-size: 0.94rem; color: #0F1419; font-family: inherit; min-width: 0; font-weight: 500; }
        .lh-input::placeholder { color: #9CA3AF; font-weight: 400; }
        .lh-gps-btn { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; border-radius: 8px; padding: 6px 11px; font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.18s; letter-spacing: 0.4px; flex-shrink: 0; }
        .lh-gps-btn:hover { background: #D1FAE5; transform: translateY(-1px); }
        .lh-input-divider { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
        .lh-input-divider .lh-line { flex: 1; height: 1px; background: #ECE9E0; }
        .lh-input-divider span { color: #C5C0B0; font-size: 0.85rem; font-weight: 700; }

        .lh-mode-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
        .lh-mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 6px; border-radius: 12px; background: #FAFAF7; border: 1.5px solid #ECE9E0; cursor: pointer; transition: all 0.18s; min-height: 78px; font-family: inherit; }
        .lh-mode:hover:not(.active) { background: #F5F4EE; border-color: #D4D0C5; }
        .lh-mode.active { background: #FFF1E5 !important; border-color: #E8590C !important; box-shadow: 0 2px 8px rgba(232,89,12,0.15); }
        .lh-mode-icon { font-size: 1.4rem; line-height: 1; }
        .lh-mode-label { font-size: 0.78rem; font-weight: 700; color: #0F1419; }
        .lh-tag-free { font-size: 0.56rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: #ECFDF5; color: #047857; letter-spacing: 0.4px; text-transform: uppercase; }
        .lh-tag-premium { font-size: 0.56rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: #FEF3C7; color: #B45309; letter-spacing: 0.4px; text-transform: uppercase; }

        .lh-cta { width: 100%; padding: 16px; border: none; border-radius: 14px; background: #E8590C; color: #FFFFFF; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(232,89,12,0.28); transition: all 0.18s; min-height: 54px; letter-spacing: -0.2px; }
        .lh-cta:hover { background: #C2410C; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,89,12,0.38); }

        .lh-section { padding: 0 4px; }
        .lh-h2 { font-size: 1.18rem; font-weight: 800; color: #0F1419; margin: 0 0 14px; letter-spacing: -0.4px; font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif; }
        .lh-h2-center { text-align: center; }

        .lh-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
        .lh-chip { display: inline-block; background: #FFFFFF; border: 1px solid #ECE9E0; border-radius: 100px; color: #4B5563; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; cursor: pointer; transition: all 0.18s; font-family: inherit; text-decoration: none; }
        .lh-chip:hover { background: #FFF1E5; border-color: #E8590C; color: #C2410C; transform: translateY(-1px); }

        .lh-billboard { padding: 22px 18px; text-align: center; background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%); }
        .lh-billboard-row { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
        .lh-bb-loc { display: inline-flex; align-items: center; gap: 7px; color: #0F1419; font-size: 0.92rem; font-weight: 700; }
        .lh-bb-divider { width: 1px; height: 16px; background: #D4D0C5; }
        .lh-billboard-note { font-size: 0.74rem; color: #6B7280; margin: 14px 0 0; line-height: 1.4; }

        .lh-quote-grid { display: flex; flex-direction: column; gap: 10px; }
        .lh-quote-card { background: #FFFFFF; border: 1px solid #ECE9E0; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,20,25,0.03); transition: all 0.18s; }
        .lh-quote-card:hover { box-shadow: 0 6px 18px rgba(15,20,25,0.06); }
        .lh-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
        .lh-stars-icons { color: #F59E0B; font-size: 0.85rem; letter-spacing: 1px; }
        .lh-stars-label { font-size: 0.7rem; color: #9CA3AF; font-weight: 500; }
        .lh-quote-text { font-size: 0.88rem; color: #1F2937; line-height: 1.55; margin: 0 0 8px; }
        .lh-quote-author { font-size: 0.74rem; color: #6B7280; margin: 0; font-weight: 500; }

        .lh-scenario-grid { display: flex; flex-direction: column; gap: 10px; }
        .lh-scenario { background: #FFFFFF; border: 1px solid #ECE9E0; border-radius: 18px; padding: 18px; display: flex; gap: 14px; transition: all 0.2s; }
        .lh-scenario:hover { border-color: #E8590C; box-shadow: 0 4px 14px rgba(232,89,12,0.08); transform: translateY(-1px); }
        .lh-scenario-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: #FFF1E5; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
        .lh-scenario-body { flex: 1; min-width: 0; }
        .lh-scenario h3 { font-size: 0.97rem; font-weight: 700; color: #0F1419; margin: 0 0 6px; line-height: 1.3; }
        .lh-scenario p { font-size: 0.83rem; color: #525866; line-height: 1.5; margin: 0 0 10px; }
        .lh-scenario-tags { display: flex; gap: 6px; flex-wrap: wrap; }

        .lh-cities { padding: 22px 20px; text-align: center; }
        .lh-cities-label { font-size: 0.66rem; font-weight: 800; color: #C2410C; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
        .lh-cities-grid { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
        .lh-city-chip { display: inline-block; font-size: 0.78rem; color: #4B5563; background: #FAFAF7; border: 1px solid #ECE9E0; border-radius: 100px; padding: 6px 12px; cursor: pointer; transition: all 0.15s; font-family: inherit; font-weight: 500; text-decoration: none; }
        .lh-city-chip:hover { background: #FFF1E5; color: #C2410C; border-color: #E8590C; transform: translateY(-1px); }

        @media (max-width: 420px) {
          .lh-h1 { font-size: 1.85rem; letter-spacing: -1px; }
          .lh-page { padding: 20px 12px 40px; gap: 24px; }
        }

        /* DESKTOP — 2-col hero+planner layout */
        @media (min-width: 880px) {
          .lh-page { max-width: 1080px; padding: 40px 32px 56px; gap: 40px; }
          .lh-top {
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            gap: 48px;
            align-items: center;
            padding: 28px 0 8px;
          }
          .lh-hero {
            text-align: left;
            align-items: flex-start;
            padding: 0;
          }
          .lh-h1 { font-size: 3.2rem; letter-spacing: -1.8px; line-height: 1.04; }
          .lh-lead { font-size: 1.05rem; max-width: 460px; margin: 0 0 22px; }
          .lh-section, .lh-card:not(.lh-planner) { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
          .lh-h2 { font-size: 1.6rem; }
          .lh-h2-center { text-align: center; }
          .lh-cities-grid { gap: 8px; }
          .lh-scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
          .lh-quote-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
        }
        @media (min-width: 1100px) {
          .lh-h1 { font-size: 3.6rem; }
        }

        /* ───────────────────────────────────────────────────────────────────
           LIGHT-THEME OVERRIDES FOR IN-APP SURFACES (Account, Subscription,
           Checkout, Map sheet, SOS, Tourist Guide, etc.)
           Keeps the off-white + warm-orange palette consistent app-wide.
           Driving navigation, AR camera overlay and the Google Map tiles
           themselves stay dark by design (they're functional surfaces).
           ─────────────────────────────────────────────────────────────────── */
        body.cn-light-home .map-btn { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; color: #0F1419 !important; box-shadow: 0 2px 8px rgba(15,20,25,0.08) !important; }
        body.cn-light-home .map-btn:hover { background: #FFF1E5 !important; }
        body.cn-light-home .map-btn svg { color: #0F1419 !important; stroke: #0F1419 !important; }
        body.cn-light-home .map-bottom-sheet { background: #FFFFFF !important; box-shadow: 0 -4px 24px rgba(15,20,25,0.10) !important; border-top: 1px solid #ECE9E0 !important; }
        body.cn-light-home .sheet-handle-bar { background: #D4D0C5 !important; }
        body.cn-light-home .sheet-input { background: #FAFAF7 !important; border-color: #ECE9E0 !important; color: #0F1419 !important; }
        body.cn-light-home .sheet-input input { color: #0F1419 !important; }
        body.cn-light-home .sheet-input:focus-within { border-color: #E8590C !important; box-shadow: 0 0 0 3px rgba(232,89,12,0.12) !important; background: #FFFFFF !important; }
        body.cn-light-home .sheet-gps-btn { background: #FAFAF7 !important; border-color: #ECE9E0 !important; }
        body.cn-light-home .sheet-gps-btn:active { background: #F0EDE4 !important; }
        body.cn-light-home .swap-from-to-btn { background: #FFFFFF !important; border-color: #ECE9E0 !important; border-width: 2px !important; color: #E8590C !important; box-shadow: 0 2px 8px rgba(15,20,25,0.10) !important; }
        body.cn-light-home .sheet-mode-tabs { background: #F0EDE4 !important; }
        body.cn-light-home .sheet-mode-tab { color: #9CA3AF !important; }
        body.cn-light-home .sheet-mode-tab.active { background: #FFFFFF !important; color: #E8590C !important; box-shadow: 0 1px 6px rgba(15,20,25,0.10) !important; }
        body.cn-light-home .sheet-mode-tab.active svg { stroke: #E8590C !important; }
        body.cn-light-home .tab-pro-badge { background: linear-gradient(135deg, #FACC15, #E8590C) !important; }

        body.cn-light-home .acct-tab { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; border-bottom: none !important; color: #6B7280 !important; }
        body.cn-light-home .acct-tab.active { background: #FFF1E5 !important; border-color: #FFE3CC !important; color: #C2410C !important; }

        body.cn-light-home .pricing-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 12px 32px rgba(15,20,25,0.06) !important; }
        body.cn-light-home .pricing-header { background: linear-gradient(135deg, #E8590C 0%, #C2410C 100%) !important; color: #FFFFFF !important; }
        body.cn-light-home .feature-item { border-bottom: 1px solid #ECE9E0 !important; }
        body.cn-light-home .feature-item .feature-text strong { color: #0F1419 !important; }
        body.cn-light-home .feature-item .feature-text p { color: #6B7280 !important; }
        body.cn-light-home .subscribe-btn { background: linear-gradient(135deg, #E8590C 0%, #C2410C 100%) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(232,89,12,0.25) !important; }
        body.cn-light-home .subscribe-btn:hover { box-shadow: 0 4px 16px rgba(232,89,12,0.35) !important; }
        body.cn-light-home .subscription-note { color: #6B7280 !important; }

        body.cn-light-home .feature-comparison h3 { color: #0F1419 !important; }
        body.cn-light-home .comparison-table { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.05) !important; }
        body.cn-light-home .comparison-row { border-bottom: 1px solid #ECE9E0 !important; }
        body.cn-light-home .feature-name { color: #0F1419 !important; }
        body.cn-light-home .free-feature { color: #6B7280 !important; }
        body.cn-light-home .premium-feature { color: #10B981 !important; }

        body.cn-light-home .checkout-summary { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.05) !important; }
        body.cn-light-home .checkout-summary h3 { color: #0F1419 !important; }
        body.cn-light-home .summary-item { color: #525866 !important; border-bottom: 1px solid #ECE9E0 !important; }
        body.cn-light-home .summary-total { color: #0F1419 !important; }
        body.cn-light-home .billing-note { color: #6B7280 !important; }
        body.cn-light-home .payment-form { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.05) !important; }
        body.cn-light-home .payment-form h3 { color: #0F1419 !important; }
        body.cn-light-home .payment-btn { background: linear-gradient(135deg, #E8590C 0%, #C2410C 100%) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(232,89,12,0.25) !important; }
        body.cn-light-home .security-note { color: #6B7280 !important; }

        body.cn-light-home .plan-card { background: #FFFFFF !important; border: 2px solid #ECE9E0 !important; }
        body.cn-light-home .plan-card:hover { border-color: #E8590C !important; box-shadow: 0 6px 20px rgba(232,89,12,0.18) !important; }
        body.cn-light-home .plan-card.selected { border-color: #E8590C !important; background: #FFF8F0 !important; box-shadow: 0 4px 20px rgba(232,89,12,0.20) !important; }
        body.cn-light-home .plan-badge { background: #FAFAF7 !important; color: #6B7280 !important; }
        body.cn-light-home .plan-badge.popular { background: #FEF3C7 !important; color: #B45309 !important; }
        body.cn-light-home .plan-badge.best { background: #ECFDF5 !important; color: #047857 !important; }
        body.cn-light-home .plan-price { color: #0F1419 !important; }
        body.cn-light-home .plan-period { color: #6B7280 !important; }
        body.cn-light-home .plan-desc { color: #525866 !important; }
        body.cn-light-home .plan-card.selected .plan-price { color: #E8590C !important; }

        body.cn-light-home .section-title { color: #0F1419 !important; }
        body.cn-light-home .section-subtitle { color: #525866 !important; }
        body.cn-light-home .skeleton { background: linear-gradient(90deg, #F5F1E8 25%, #FAFAF7 50%, #F5F1E8 75%) !important; background-size: 200% 100% !important; }

        body.cn-light-home .tourist-guide-panel { background: #FFFFFF !important; color: #0F1419 !important; box-shadow: 0 -8px 32px rgba(15,20,25,0.18) !important; border-top: 1px solid #ECE9E0 !important; }
        body.cn-light-home .tg-header { border-bottom: 1px solid #ECE9E0 !important; background: #FFFFFF !important; }
        body.cn-light-home .tg-header h2 { color: #0F1419 !important; }
        body.cn-light-home .tg-close-btn { color: #6B7280 !important; }
        body.cn-light-home .tg-close-btn:hover { background: #FFF1E5 !important; color: #C2410C !important; }
        body.cn-light-home .tg-city-label { color: #6B7280 !important; }
        body.cn-light-home .tg-search-input { background: #FAFAF7 !important; border: 1px solid #ECE9E0 !important; color: #0F1419 !important; }
        body.cn-light-home .tg-search-input::placeholder { color: #9CA3AF !important; }
        body.cn-light-home .tg-tabs { border-bottom: 1px solid #ECE9E0 !important; background: #FFFFFF !important; }
        body.cn-light-home .tg-tab { color: #6B7280 !important; }
        body.cn-light-home .tg-tab.active { color: #E8590C !important; border-bottom-color: #E8590C !important; }
        body.cn-light-home .tg-tab.active svg { color: #E8590C !important; }
        body.cn-light-home .tg-insider-section { background: #FAFAF7 !important; border: 1px solid #ECE9E0 !important; }
        body.cn-light-home .tg-insider-section-header span:first-child { color: #0F1419 !important; }
        body.cn-light-home .tg-insider-chevron { color: #6B7280 !important; }
        body.cn-light-home .tg-insider-section-body { color: #525866 !important; }
        body.cn-light-home .tg-scam-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; }
        body.cn-light-home .tg-scam-text { color: #B45309 !important; }
        body.cn-light-home .tg-place-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.03) !important; }
        body.cn-light-home .tg-place-name { color: #0F1419 !important; }
        body.cn-light-home .tg-place-address { color: #6B7280 !important; }
        body.cn-light-home .tg-itinerary-title { color: #0F1419 !important; }
        body.cn-light-home .tg-toggle-btn { background: #FAFAF7 !important; color: #6B7280 !important; border: 1px solid #ECE9E0 !important; }
        body.cn-light-home .tg-toggle-btn.active { background: #FFF1E5 !important; color: #E8590C !important; border-color: #FFE3CC !important; }

        body.cn-light-home .sos-overlay { background: #FAFAF7 !important; color: #0F1419 !important; }
        body.cn-light-home .sos-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.05) !important; }
        body.cn-light-home .sos-card h3 { color: #0F1419 !important; }
        body.cn-light-home .sos-card label { color: #6B7280 !important; }
        body.cn-light-home .sos-input { background: #FAFAF7 !important; border: 1px solid #ECE9E0 !important; color: #0F1419 !important; }
        body.cn-light-home .sos-input::placeholder { color: #9CA3AF !important; }
        body.cn-light-home .sos-save-btn { background: linear-gradient(135deg,#E8590C 0%,#C2410C 100%) !important; }
        body.cn-light-home .sos-status-item { background: #FAFAF7 !important; border: 1px solid #ECE9E0 !important; }
        body.cn-light-home .sos-status-value { color: #0F1419 !important; }

        body.cn-light-home .feature-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.05) !important; }
        body.cn-light-home .feature-card h3 { color: #0F1419 !important; }
        body.cn-light-home .feature-card p { color: #525866 !important; }

        body.cn-light-home .home-upgrade-nudge { background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%) !important; color: #0F1419 !important; border: 1px solid #FFE3CC !important; box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 12px 32px rgba(15,20,25,0.10), 0 0 0 1px rgba(232,89,12,0.08) !important; }
        body.cn-light-home .home-upgrade-nudge .nudge-title { color: #0F1419 !important; }
        body.cn-light-home .home-upgrade-nudge .nudge-sub { color: #6B7280 !important; }
        body.cn-light-home .home-upgrade-nudge .nudge-cta { background: linear-gradient(135deg, #E8590C, #F59E0B) !important; color: #FFFFFF !important; }
        body.cn-light-home .home-upgrade-nudge .nudge-close { color: #9CA3AF !important; }
        body.cn-light-home .cn-currency-fab { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; color: #E8590C !important; box-shadow: 0 4px 16px rgba(15,20,25,0.10) !important; }

        body.cn-light-home #activeSharesContainer { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; }

        .navbar {
            background: rgba(15,23,42,0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 0;
            padding-top: env(safe-area-inset-top, 0px);
        }
        .navbar .container {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }
        .navbar-brand {
            font-weight: 900;
            font-size: 1.35rem;
            color: #FF7A00;
            display: flex;
            align-items: center;
            text-decoration: none;
            gap: 8px;
            letter-spacing: -0.5px;
        }
        .navbar-brand-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(255,122,0,0.45);
        }
        .navbar-brand-text .brand-city { color: #FF7A00; }
        .navbar-brand-text .brand-nav { color: #FF7A00; }
        .navbar-brand img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }
        .navbar-toggler {
            border: 0;
            padding: 10px;
            background: transparent;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 44px;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        .navbar-toggler:hover { background: rgba(255,255,255,0.08); }
        .navbar-toggler span {
            width: 18px;
            height: 2px;
            background: rgba(255,255,255,0.75);
            border-radius: 1px;
            transition: all 0.3s;
        }
        .navbar-collapse {
            position: fixed;
            top: var(--cn-navbar-height);
            right: 0;
            width: 320px;
            height: calc(100vh - var(--cn-navbar-height));
            background: rgba(15,23,42,0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-left: 1px solid rgba(255,255,255,0.1);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 24px;
            overflow-y: auto;
            z-index: 1002;
            visibility: hidden;
            box-shadow: -4px 0 24px rgba(0,0,0,0.08);
        }
        .navbar-collapse.show {
            transform: translateX(0);
            visibility: visible;
        }
        .navbar-nav {
            list-style: none;
            padding: 0;
            margin-bottom: 24px;
        }
        .nav-item {
            margin-bottom: 4px;
        }
        .nav-link {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            color: #e2e8f0;
            text-decoration: none;
            border-radius: 10px;
            transition: background 0.15s, color 0.15s, transform 0.1s;
            font-size: 0.95rem;
            font-weight: 500;
            min-height: 44px;
        }
        .nav-link:hover {
            background: rgba(59,157,227,0.1);
            color: #3B9DE3;
        }
        .nav-link:active {
            transform: scale(0.98);
        }
        .nav-link i {
            margin-right: 12px;
            width: 16px;
            height: 16px;
        }

        .hero-gradient-wrap {
            margin: 0 -24px;
            padding: 0 24px 44px;
            background:
                radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,122,0,0.13) 0%, transparent 65%),
                radial-gradient(ellipse 60% 40% at 100% 30%, rgba(94,234,212,0.08) 0%, transparent 70%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
                linear-gradient(165deg, #060a14 0%, #0a1020 35%, #0f172a 70%, #131a2e 100%);
            border-radius: 0 0 32px 32px;
            animation: fadeInUp 0.5s ease-out;
            position: relative;
            overflow: hidden;
        }
        .hero-gradient-wrap::after {
            content: '';
            position: absolute;
            top: 0; left: 50%; transform: translateX(-50%);
            width: 70%; max-width: 360px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,122,0,0.5) 50%, transparent);
        }
        .hero-inner {
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        .hero {
            text-align: center;
            padding: 44px 0 0;
            margin: 0;
        }
        .hero-content h1 {
            font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
            font-size: 3.2rem;
            font-weight: 900;
            margin-bottom: 14px;
            color: #ffffff;
            letter-spacing: -1.5px;
            line-height: 1.06;
            background: none;
            -webkit-text-fill-color: #ffffff;
        }
        @media (min-width: 480px) { .hero-content h1 { font-size: 3.8rem; letter-spacing: -2px; } }
        .hero-content p {
            font-size: 1.05rem;
            color: rgba(255,255,255,0.72);
            max-width: 360px;
            margin: 0 auto 28px auto;
            line-height: 1.6;
            font-weight: 400;
        }

        .city-chip {
            display: inline-block;
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.9);
            font-size: 0.82rem;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s, border-color 0.15s;
            backdrop-filter: blur(4px);
        }
        .city-chip:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); color: #fff; }

        .search-card {
            background: rgba(255,255,255,0.14);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
            margin: 0 0 20px;
            border: 1px solid rgba(255,255,255,0.25);
            animation: fadeInUp 0.6s ease-out;
        }
        .search-title {
            margin-bottom: 16px;
            color: #ffffff;
            text-align: center;
            font-weight: 700;
            font-size: 1.05rem;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 16px;
        }
        .input-wrapper {
            display: flex;
            align-items: center;
            background: rgba(255,255,255,0.15);
            border: 1.5px solid rgba(255,255,255,0.3);
            border-radius: 12px;
            padding: 14px 16px;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            position: relative;
        }
        .input-wrapper:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.2); }
        .input-wrapper:focus-within {
            border-color: rgba(255,255,255,0.7);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.2);
        }
        .location-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .location-dot.start { background: #34d399; }
        .location-dot.end { background: #f87171; }
        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.95rem;
            color: #ffffff;
            outline: none;
        }
        .search-input::placeholder { color: rgba(255,255,255,0.55); }
        .places-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #1e293b;
            border-radius: 0 0 12px 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
            border: 1px solid #334155;
            border-top: none;
            z-index: 10000;
            max-height: 280px;
            overflow-y: auto;
            display: none;
        }
        .places-dropdown.visible { display: block; }
        .places-dropdown-item {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            transition: background 0.15s;
        }
        .places-dropdown-item:last-child { border-bottom: none; }
        .places-dropdown-item:hover, .places-dropdown-item:active { background: rgba(255,255,255,0.07); }
        .places-dropdown-icon { font-size: 1.2rem; flex-shrink: 0; width: 28px; text-align: center; }
        .places-dropdown-main { font-weight: 600; color: #f1f5f9; font-size: 0.9rem; }
        .places-dropdown-secondary { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
        .places-dropdown-empty { padding: 14px 16px; color: #64748b; font-size: 0.9rem; text-align: center; }

        .map-container {
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            border: 1px solid rgba(229,231,235,0.6);
            position: relative;
            height: 500px;
        }
        #map { width: 100%; height: 100%; }
        .map-controls {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .map-btn {
            width: 44px;
            height: 44px;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
        }
        .map-btn:hover { background: #273549; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
        .map-btn:active { transform: scale(0.95); }

        .search-btn {
            background: linear-gradient(135deg, #3B9DE3 0%, #6BB8EC 100%);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            padding: 15px 24px;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
            margin-top: 12px;
            min-height: 50px;
            animation: ctaPulse 2.5s ease-in-out infinite;
            letter-spacing: 0.01em;
        }
        .search-btn:hover { transform: translateY(-1px); animation: none; box-shadow: 0 6px 24px rgba(59,157,227,0.55); }
        .search-btn:active { transform: translateY(0) scale(0.99); animation: none; }
        .btn-primary {
            display: inline-block;
            background: linear-gradient(135deg, #3B9DE3 0%, #6BB8EC 100%);
            color: #ffffff;
            padding: 12px 24px;
            border-radius: 12px;
            text-decoration: none;
            font-family: 'Inter', system-ui, sans-serif;
            font-weight: 700;
            text-align: center;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
            min-height: 44px;
            box-shadow: 0 2px 12px rgba(59,157,227,0.35);
        }
        .btn-primary:hover { box-shadow: 0 6px 24px rgba(59,157,227,0.55); transform: translateY(-1px); }
        .btn-primary:active { transform: translateY(0) scale(0.99); }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin: 32px 0;
        }
        .feature-card {
            background: #1e293b;
            border-radius: 12px;
            padding: 32px 24px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            transition: box-shadow 0.3s, transform 0.3s;
            border: 1px solid #334155;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.3);
        }
        .feature-card:nth-child(1) .feature-icon { background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%); }
        .feature-card:nth-child(1) .feature-icon svg { stroke: #ffffff; }
        .feature-card:nth-child(2) .feature-icon { background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); }
        .feature-card:nth-child(2) .feature-icon svg { stroke: #ffffff; }
        .feature-card:nth-child(3) .feature-icon { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
        .feature-card:nth-child(3) .feature-icon svg { stroke: #ffffff; }
        .feature-icon {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px auto;
            flex-shrink: 0;
        }
        .feature-card h3 {
            margin-bottom: 8px;
            color: #f1f5f9;
            font-weight: 700;
            font-size: 1.05rem;
        }
        .feature-card p {
            color: #94a3b8;
            line-height: 1.7;
            font-size: 0.9rem;
        }

        .reviews-section { margin: 48px 0; max-width: 640px; margin-left: auto; margin-right: auto; }
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
            margin-top: 24px;
        }
        .review-card {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 24px;
            border: 1px solid rgba(255,255,255,0.10);
            transition: border-color 0.3s, transform 0.3s;
            position: relative;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .review-card:hover {
            transform: translateY(-3px);
            border-color: rgba(59,157,227,0.3);
        }
        .review-card::before {
            content: '"';
            position: absolute;
            top: 16px;
            right: 20px;
            font-size: 3.5rem;
            color: rgba(59,157,227,0.2);
            font-family: Georgia, serif;
            line-height: 1;
        }
        .review-stars {
            color: #f59e0b;
            margin-bottom: 12px;
            font-size: 1.05rem;
            letter-spacing: 2px;
        }
        .review-text {
            color: rgba(255,255,255,0.8);
            line-height: 1.7;
            margin-bottom: 16px;
            font-size: 0.93rem;
            font-style: italic;
        }
        .review-author {
            display: flex;
            align-items: center;
        }
        .review-avatar {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, #3B9DE3 0%, #6BB8EC 100%);
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .review-card:nth-child(2) .review-avatar { background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); }
        .review-card:nth-child(3) .review-avatar { background: linear-gradient(135deg, #d97706 0%, #dc2626 100%); }
        .review-name {
            font-weight: 600;
            color: #ffffff;
            font-size: 0.9rem;
        }
        .review-location {
            color: rgba(255,255,255,0.5);
            font-size: 0.8rem;
        }
        .review-verified { font-size:0.72rem;font-weight:600;color:#4ade80;margin-top:2px;letter-spacing:0.2px; }
        /* Free-tier transparency strip */
        .free-tier-strip { display:flex;align-items:center;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px; }
        .fts-label { font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px; }
        .fts-pill { font-size:0.7rem;font-weight:600;padding:2px 9px;border-radius:20px; }
        .fts-free { background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3); }
        .fts-premium { background:rgba(251,188,4,0.12);color:#FBBC04;border:1px solid rgba(251,188,4,0.25); }
        .fts-sep { color:rgba(255,255,255,0.2);font-size:0.8rem; }

        .ar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: none; background: #000; }
        .ar-overlay.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .ar-video { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
        .ar-arrow-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
        .ar-arrow-container svg { transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; }
        /* ── Get Off Alert ──────────────────────────────────────── */
        .cn-getoff-alert { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; }
        .cn-getoff-alert.visible { transform: translateY(0); pointer-events: auto; }
        .cn-getoff-alert-inner { margin: 10px 16px 0; background: linear-gradient(135deg, #0f766e, #0d9488); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); }
        .cn-getoff-alert-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
        .cn-getoff-alert-text { flex: 1; color: white; }
        .cn-getoff-alert-title { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
        .cn-getoff-alert-sub { font-size: 0.8rem; opacity: 0.85; margin-top: 2px; }
        .cn-getoff-alert-dismiss { color: rgba(255,255,255,0.7); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; flex-shrink: 0; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
        /* ── Disruption reroute banner ──────────────────────────────── */
        .cn-reroute-banner { margin: 8px 0 0; border-radius: 12px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .cn-reroute-banner svg { flex-shrink: 0; color: #ef4444; }
        .cn-reroute-banner-text { flex: 1; font-size: 0.82rem; color: #fca5a5; font-weight: 500; }
        .cn-reroute-banner-cta { font-size: 0.78rem; font-weight: 700; color: #f87171; white-space: nowrap; }
        /* ── AI Ask bar ─────────────────────────────────────────────── */
        .tg-ask-wrap { padding: 10px 16px 6px; }
        .tg-ask-row { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 10px 14px; transition: border-color 0.2s; }
        body.cn-light-home .tg-ask-row { background: #F7F5F0; border-color: #ECE9E0; }
        .tg-ask-row:focus-within { border-color: rgba(59,157,227,0.5); }
        body.cn-light-home .tg-ask-row:focus-within { border-color: #E8590C; }
        .tg-ask-input { flex: 1; background: none; border: none; outline: none; color: rgba(255,255,255,0.9); font-size: 0.88rem; font-family: inherit; min-height: 20px; }
        body.cn-light-home .tg-ask-input { color: #0F1419; }
        .tg-ask-input::placeholder { color: rgba(255,255,255,0.38); }
        body.cn-light-home .tg-ask-input::placeholder { color: #9CA3AF; }
        .tg-ask-submit { background: #3B9DE3; border: none; border-radius: 10px; color: white; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, transform 0.1s; }
        .tg-ask-submit:active { transform: scale(0.93); }
        .tg-ask-submit:disabled { background: rgba(59,157,227,0.35); cursor: not-allowed; }
        .tg-ask-answer { margin: 6px 16px 0; border-radius: 12px; background: rgba(59,157,227,0.1); border: 1px solid rgba(59,157,227,0.2); padding: 12px 14px; font-size: 0.84rem; color: rgba(255,255,255,0.85); line-height: 1.5; display: none; }
        body.cn-light-home .tg-ask-answer { background: #EBF4FB; border-color: #BFDBF7; color: #1E40AF; }
        .tg-ask-answer.visible { display: block; }
        /* ── Accessibility note on route steps ──────────────────────── */
        .cn-access-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 7px 10px; border-radius: 8px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); font-size: 0.78rem; color: #fbbf24; font-weight: 500; }
        body.cn-light-home .cn-access-note { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
        .cn-access-note svg { flex-shrink: 0; }
        /* ── Tourist map toggle ─────────────────────────────────────── */
        .cn-tourist-map-btn.active svg { stroke: #10B981 !important; }
        .cn-tourist-map-btn.active { border-color: #10B981 !important; background: rgba(16,185,129,0.15) !important; }
        .ar-step-bubble { position: absolute; top: 16px; left: 12px; right: 12px; background: rgba(6, 14, 30, 0.9); border-radius: 22px; z-index: 3; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.05); transition: opacity 0.2s ease, transform 0.2s ease; }
        .ar-mini-map { position: absolute; bottom: 72px; right: 12px; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.6); z-index: 4; display: none; cursor: pointer; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
        .ar-mini-map.ar-map-expanded { left: 12px; right: 12px; bottom: 72px; width: auto; height: 60vh; border-radius: 18px; border-color: rgba(255,255,255,0.35); box-shadow: 0 8px 40px rgba(0,0,0,0.8); cursor: default; z-index: 8; }
        .ar-map-hint { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.4px; padding: 3px 7px; border-radius: 8px; pointer-events: none; white-space: nowrap; transition: opacity 0.2s ease; }
        .ar-map-expanded-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9; color: white; font-size: 1rem; line-height: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        .ar-map-expanded-close:active { opacity: 0.7; transform: scale(0.9); }
        .ar-map-recenter { position: absolute; bottom: 10px; right: 10px; width: 36px; height: 36px; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9; color: white; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
        .ar-map-recenter:active { opacity: 0.7; transform: scale(0.9); }
        .ar-step-bubble.step-animating { opacity: 0; transform: translateY(-6px) scale(0.98); }
        .ar-bubble-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 0; }
        .ar-bubble-step-pill { background: rgba(59,157,227,0.2); color: #6BB8EC; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid rgba(59,157,227,0.3); }
        .ar-bubble-next-btn { color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.07); letter-spacing: 0.2px; min-height: 44px; min-width: 44px; }
        .ar-bubble-next-btn:active { opacity: 0.6; transform: scale(0.96); }
        .ar-bubble-body { padding: 10px 16px 14px; }
        .ar-bubble-distance { font-size: 2rem; font-weight: 800; color: white; line-height: 1; margin-bottom: 7px; letter-spacing: -0.5px; }
        .ar-bubble-instruction { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1.38; }
        .ar-bubble-then { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.08); }
        .ar-bubble-then-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #FBBC04; white-space: nowrap; padding-top: 1px; }
        .ar-bubble-then-text { font-size: 0.85rem; color: rgba(255,255,255,0.55); font-weight: 500; line-height: 1.35; }
        .ar-bubble-progress { height: 3px; background: rgba(255,255,255,0.08); }
        .ar-bubble-progress-fill { height: 100%; background: linear-gradient(90deg, #3B9DE3, #6BB8EC); transition: width 0.5s ease; }
        .ar-bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 20px 28px; background: rgba(6,14,30,0.85); z-index: 3; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.08); }
        .ar-close-btn { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; padding: 13px 24px; font-size: 0.95rem; font-weight: 700; cursor: pointer; min-width: 100px; min-height: 48px; }
        .ar-close-btn:active { transform: scale(0.97); opacity: 0.9; }
        .ar-recenter-btn { background: linear-gradient(135deg, #3B9DE3, #6BB8EC); color: white; border: none; border-radius: 14px; padding: 13px 24px; font-size: 0.95rem; font-weight: 700; cursor: pointer; min-width: 100px; min-height: 48px; box-shadow: 0 2px 16px rgba(59,157,227,0.45); }
        .ar-recenter-btn:active { transform: scale(0.97); opacity: 0.9; }
        .ar-mute-btn { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; padding: 13px 14px; font-size: 1.25rem; cursor: pointer; min-height: 48px; min-width: 48px; }
        .ar-mute-btn.muted { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); }
        .driving-nav-mute-btn { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 10px 12px; font-size: 1.1rem; cursor: pointer; min-height: 44px; min-width: 44px; }
        .driving-nav-mute-btn.muted { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); }
        .walking-nav-mute-btn { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 10px 12px; font-size: 1.1rem; cursor: pointer; min-height: 44px; min-width: 44px; }
        .walking-nav-mute-btn.muted { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); }

        .route-details-panel { background: #1e293b; border-radius: 16px; padding: 24px; margin-top: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); border: 1px solid #334155; max-height: 500px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
        .route-details-panel h3 { margin: 0 0 16px 0; color: #f1f5f9; font-size: 1.1rem; font-weight: 600; }
        .save-route-btn { width: 100%; background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.3); color: #FACC15; border-radius: 10px; padding: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; transition: background 0.2s; }
        .save-route-btn:hover { background: rgba(250,204,21,0.18); }
        .save-route-btn.saved { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #4ade80; }
        .walk-mode-selector { display: flex; gap: 8px; margin: 8px 0; }
        .walk-mode-btn { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #94a3b8; border-radius: 10px; padding: 10px 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; min-height: 44px; transition: all 0.2s; text-align: center; }
        .walk-mode-btn.active { background: rgba(255,122,0,0.18); border-color: rgba(255,122,0,0.5); color: #FFB347; }
        .scenic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .scenic-chip { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25); color: #4ade80; border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; }
        .acct-tab { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; border-radius: 12px 12px 0 0; padding: 11px 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border-bottom: none; transition: all 0.2s; min-height: 44px; font-family: inherit; }
        .acct-tab.active { background: #0f172a; border-color: rgba(255,122,0,0.4); border-bottom: none; color: #FF7A00; }
        .tg-save-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: 8px; color: #64748b; transition: color 0.2s; min-height: 36px; }
        .tg-save-btn.saved { color: #FF7A00; }
        .route-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s; border-radius: 10px; }
        .route-step:last-child { border-bottom: none; }
        .route-step:hover { background: rgba(255,127,0,0.04); }
        .route-step-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
        .route-step-icon.walk { background: linear-gradient(135deg, #0d9488, #14b8a6); }
        .route-step-icon.walk svg { stroke: #fff !important; }
        .route-step-icon.transit { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .route-step-text { flex: 1; font-size: 0.95rem; color: #f1f5f9; line-height: 1.45; font-weight: 500; padding-top: 4px; }
        .route-step-dist { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; font-weight: 500; letter-spacing: 0.2px; }
        .transit-summary { background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px; border: 1px solid #ECE9E0; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
        .transit-summary-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
        .transit-summary-time { font-size: 2rem; font-weight: 800; color: #0F1419; letter-spacing: -0.5px; }
        .transit-summary-meta { color: #6B7280; font-weight: 500; font-size: 0.85rem; margin-top: 2px; }
        .transit-summary-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
        .transit-badge { padding: 4px 11px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
        .transit-badge.changes { background: #FFF7ED; color: #C2410C; border: 1px solid #FDDCAD; }
        .transit-badge.depart { background: #F0FDF4; color: #15803d; border: 1px solid #BBF7D0; }
        .transit-badge.arrive { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; }
        .transit-route-strip { display: flex; align-items: center; gap: 0; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #F3F4F6; overflow-x: auto; }
        .transit-strip-segment { display: flex; align-items: center; gap: 0; }
        .transit-strip-mode { display: flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 20px; font-size: 0.73rem; font-weight: 700; white-space: nowrap; }
        .transit-strip-mode.walk-mode { background: #F0FDF9; color: #0d9488; border: 1px solid #CCFBF1; }
        .transit-strip-mode.ride-mode { color: white; }
        .transit-strip-arrow { color: #D1D5DB; font-size: 1rem; margin: 0 5px; flex-shrink: 0; }
        .transit-timeline { position: relative; margin: 0; padding: 0; }
        .transit-step-wrap { position: relative; padding-left: 40px; padding-bottom: 6px; }
        .transit-step-wrap:last-child { padding-bottom: 0; }
        .transit-step-num { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: white; z-index: 2; }
        .transit-step-num.walk-num { background: #10B981; }
        .transit-step-num.ride-num { background: #E8590C; }
        .transit-step-line { position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; z-index: 1; }
        .transit-step-line.walk-line { background: repeating-linear-gradient(to bottom, #10B981 0, #10B981 4px, transparent 4px, transparent 8px); }
        .transit-step-line.ride-line { background: #E8590C; opacity: 0.3; }
        .transit-step-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin: 0 0 10px 0; border: 1px solid #ECE9E0; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border-left: 3px solid #E8590C; }
        .transit-step-card.walk-card { border-left-color: #10B981; background: #F9FFFD; }
        .transit-step-title { font-weight: 700; color: #0F1419; font-size: 0.9rem; margin-bottom: 2px; }
        .transit-step-subtitle { font-size: 0.8rem; color: #6B7280; font-weight: 500; }
        .transit-line-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: white; }
        .transit-stop-info { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 4px; font-size: 0.85rem; line-height: 1.4; color: #374151; }
        .transit-stop-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; flex-shrink: 0; margin-top: 3px; }
        .transit-stop-dot.board { border-color: #10B981; background: #D1FAE5; }
        .transit-stop-dot.alight { border-color: #E8590C; background: #FEE2D5; }
        .transit-platform { background: #FFF7ED; color: #C2410C; padding: 2px 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; margin-left: 4px; border: 1px solid #FDDCAD; }
        .transit-time-badge { background: #F0F9FF; color: #0369A1; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; }
        .transit-time-badge.live { background: #F0FDF4; color: #15803d; }
        @keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
        @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
        .transit-stops-count { font-size: 0.82rem; color: #6B7280; margin: 8px 0; padding: 7px 12px; background: #F9FAFB; border-radius: 8px; display: flex; align-items: center; gap: 6px; border: 1px solid #F3F4F6; }
        .transit-agency { font-size: 0.75rem; color: #9CA3AF; margin-top: 6px; }
        .transit-duration-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
        .transit-duration-segment { height: 5px; border-radius: 3px; min-width: 20px; }
        .transit-live-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; color: #15803d; padding: 3px 8px; background: #F0FDF4; border-radius: 20px; border: 1px solid #BBF7D0; }
        .transit-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #22C55E; animation: pulse-live 2s infinite; }
        .live-departures-card { background: white; border-radius: 14px; padding: 16px; margin: 14px 0; border: 1px solid #ECE9E0; box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
        .live-departures-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .live-departures-title { font-size: 0.85rem; font-weight: 700; color: #0F1419; display: flex; align-items: center; gap: 6px; }
        .live-departures-refresh { font-size: 0.7rem; color: #6B7280; cursor: pointer; padding: 4px 8px; border: 1px solid #ECE9E0; border-radius: 8px; background: #FAFAF7; transition: all 0.2s; }
        .live-departures-refresh:hover { background: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
        .live-dep-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F9FAFB; }
        .live-dep-row:last-child { border-bottom: none; }
        .live-dep-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .live-dep-dot.on_time { background: #22C55E; }
        .live-dep-dot.minor_delay { background: #F59E0B; }
        .live-dep-dot.severe_delay { background: #EF4444; animation: pulse-live 1s infinite; }
        .live-dep-dot.disruption { background: #DC2626; animation: pulse-live 0.8s infinite; }
        .live-dep-line { font-size: 0.75rem; font-weight: 700; color: white; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; min-width: 26px; text-align: center; }
        .live-dep-dir { flex: 1; font-size: 0.8rem; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .live-dep-time { font-size: 0.83rem; font-weight: 700; color: #0F1419; flex-shrink: 0; }
        .live-dep-time.soon { color: #DC2626; }
        .live-dep-time.imminent { color: #DC2626; animation: pulse-live 1s infinite; }
        .live-service-banner { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 0.78rem; color: #92400E; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .live-service-banner.disruption { background: #FEF2F2; border-color: #FECACA; color: #7F1D1D; }
        .live-unsupported { background: #F9FAFB; border-radius: 10px; padding: 12px 16px; font-size: 0.8rem; color: #6B7280; border: 1px solid #ECE9E0; display: flex; align-items: center; gap: 8px; }
        .transit-nav-btn { width: 100%; padding: 14px; border: none; border-radius: 14px; font-size: 0.95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; transition: all 0.2s; min-height: 50px; }
        .transit-nav-btn.start { background: linear-gradient(135deg, #E8590C, #C2410C); color: white; box-shadow: 0 2px 12px rgba(232,89,12,0.3); }
        .transit-nav-btn.start:active { transform: scale(0.98); }
        .transit-nav-btn.stop { background: #F3F4F6; color: #374151; border: 1px solid #ECE9E0; }
        .transit-nav-btn.next-step { background: #FFF7ED; color: #C2410C; border: 1px solid #FDDCAD; font-size: 0.88rem; padding: 10px; margin-top: 8px; }
        .transit-step-wrap.step-completed .transit-step-card { opacity: 0.5; border-left-color: #D1D5DB !important; }
        .transit-step-wrap.step-completed .transit-step-num { background: #10B981 !important; }
        .transit-step-wrap.step-future .transit-step-card { opacity: 0.55; }
        .transit-step-wrap.step-future .transit-step-num { opacity: 0.45; }
        .transit-step-wrap.step-active { transform: scale(1.01); }
        .transit-step-wrap.step-active .transit-step-card { border: 1.5px solid #E8590C; box-shadow: 0 0 0 3px rgba(232,89,12,0.1); border-left-width: 3px; }
        .transit-step-wrap.step-active .transit-step-num { animation: pulse-live 1.5s infinite; box-shadow: 0 0 0 4px rgba(232,89,12,0.2); }
        .transit-eta-live { display: inline-flex; align-items: center; gap: 4px; background: #FFF7ED; color: #C2410C; padding: 3px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; margin-top: 6px; border: 1px solid #FDDCAD; }
        .transit-eta-live .eta-dot { width: 5px; height: 5px; border-radius: 50%; background: #E8590C; animation: pulse-live 1.5s infinite; }
        .transit-nav-status { background: #FFF7ED; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #FDDCAD; }
        .transit-nav-status .status-icon { font-size: 1.4rem; }
        .transit-nav-status .status-text { flex: 1; }
        .transit-nav-status .status-title { font-weight: 700; color: #C2410C; font-size: 0.9rem; }
        .transit-nav-status .status-detail { color: #6B7280; font-size: 0.8rem; }

        .journey-focus-panel { position: sticky; top: 56px; z-index: 90; background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); color: white; border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(30,64,175,0.3); display: none; transition: all 0.3s ease; }
        .journey-focus-panel.active { display: block; animation: focusPanelIn 0.4s ease; }
        .journey-focus-icon { font-size: 2rem; margin-bottom: 6px; }
        .journey-focus-instruction { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
        .journey-focus-detail { font-size: 0.9rem; opacity: 0.85; font-weight: 500; }
        .journey-focus-step-label { font-size: 0.75rem; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
        @keyframes focusPanelIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        .journey-progress-bar { display: flex; align-items: center; gap: 0; margin: 0 0 16px 0; padding: 12px 16px; background: white; border-radius: 14px; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow-x: auto; }
        .journey-progress-segment { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; transition: all 0.3s ease; position: relative; }
        .journey-progress-segment.walk-seg { background: #f0fdfa; color: #0d9488; border: 1.5px solid #99f6e4; }
        .journey-progress-segment.ride-seg { color: white; border: 1.5px solid transparent; }
        .journey-progress-segment.seg-active { transform: scale(1.08); box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 2; }
        .journey-progress-segment.seg-active.walk-seg { border-color: #0d9488; background: #ccfbf1; }
        .journey-progress-segment.seg-completed { opacity: 0.5; }
        .journey-progress-segment.seg-completed::after { content: '\\2713'; margin-left: 4px; }
        .journey-progress-connector { width: 20px; height: 2px; background: #d1d5db; flex-shrink: 0; }
        .journey-progress-connector.conn-completed { background: #0d9488; }
        .journey-progress-pct { margin-left: auto; padding-left: 12px; font-size: 0.8rem; font-weight: 700; color: #2563eb; white-space: nowrap; }

        .mode-switch-banner { position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-200px); z-index: 200; background: linear-gradient(135deg, #1e40af, #2563eb); color: white; padding: 14px 24px; border-radius: 16px; font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 24px rgba(30,64,175,0.35); display: flex; align-items: center; gap: 12px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.4s; max-width: 90vw; visibility: hidden; }
        .mode-switch-banner.active { transform: translateX(-50%) translateY(0); visibility: visible; transition-delay: 0s; }
        .mode-switch-banner .msb-icon { font-size: 1.4rem; }
        .mode-switch-banner .msb-text { line-height: 1.3; }

        .fallback-guidance-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 300; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
        .fallback-guidance-modal.active { display: flex; }
        .fallback-modal-card { background: white; border-radius: 20px; padding: 28px 24px; max-width: 360px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,0.2); text-align: center; animation: focusPanelIn 0.3s ease; }
        .fallback-modal-title { font-size: 1.2rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
        .fallback-modal-desc { font-size: 0.9rem; color: #6b7280; margin-bottom: 20px; line-height: 1.5; }
        .fallback-modal-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; transition: all 0.15s; }
        .fallback-modal-btn:active { transform: scale(0.97); }
        .fallback-modal-btn.fb-walk { background: linear-gradient(135deg, #0d9488, #0f766e); color: white; }
        .fallback-modal-btn.fb-transit { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; }
        .fallback-modal-btn.fb-recalc { background: #f3f4f6; color: #374151; }
        .fallback-modal-btn.fb-close { background: transparent; color: #9ca3af; font-size: 0.85rem; margin-bottom: 0; }

        .transit-boarding-tip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fefce8; border: 1px solid rgba(251,188,4,0.35); border-radius: 10px; margin: 8px 0; font-size: 0.85rem; color: #854d0e; }
        .transit-stops-remaining { display: inline-flex; align-items: center; gap: 4px; background: #FFF7ED; color: #C2410C; padding: 4px 10px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; margin: 6px 0; border: 1px solid #FDDCAD; }

        @media (prefers-reduced-motion: reduce) {
            .journey-focus-panel, .mode-switch-banner, .fallback-guidance-modal .fallback-modal-card,
            .transit-step-wrap.step-active, .journey-progress-segment.seg-active { animation: none !important; transition: none !important; }
        }
        .transit-headsign { display: inline-flex; align-items: center; gap: 4px; color: #6B7280; font-size: 0.82rem; margin-bottom: 8px; padding: 3px 9px; background: #F9FAFB; border-radius: 6px; border: 1px solid #F3F4F6; }
        .transit-section-label { font-size: 0.78rem; font-weight: 700; color: #9CA3AF; margin: 20px 0 12px 0; display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: 0.8px; }
        /* ── Google-Maps-style transit timeline ── */
        .cn-gm-hdr { padding: 18px 20px 14px; border-bottom: 1px solid #F3F4F6; }
        .cn-gm-hdr-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
        .cn-gm-hdr-icon { width: 40px; height: 40px; background: #EFF6FF; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .cn-gm-duration { font-size: 1.9rem; font-weight: 800; color: #111827; line-height: 1; letter-spacing: -1px; }
        .cn-gm-arrive { font-size: 0.82rem; color: #6B7280; margin-top: 3px; }
        .cn-gm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
        /* Journey stats row */
        .cn-journey-stats {
            display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px;
        }
        .cn-jstat {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.78rem; font-weight: 600; color: #374151;
            background: #F3F4F6; border-radius: 20px; padding: 4px 10px;
        }
        .cn-jstat svg { flex-shrink: 0; }
        /* Visual mode strip */
        .cn-mode-strip {
            display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
            margin-top: 8px;
        }
        .cn-ms-walk {
            display: flex; align-items: center; justify-content: center;
            width: 26px; height: 20px; background: #F9FAFB;
            border: 1px solid #E5E7EB; border-radius: 4px; color: #6B7280;
        }
        .cn-ms-pill {
            display: inline-flex; align-items: center;
            font-size: 0.72rem; font-weight: 800; border-radius: 5px;
            padding: 2px 8px; letter-spacing: 0.02em;
        }
        .cn-ms-arrow {
            font-size: 0.75rem; color: #9CA3AF; flex-shrink: 0;
        }
        /* Live arrivals countdown row */
        .cn-live-arr {
            display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
            margin: 4px 0 8px; min-height: 26px;
        }
        .cn-live-arr--loading { opacity: 0.5; }
        .cn-live-arr--empty { display: none; }
        .cn-la-chip {
            display: inline-flex; align-items: center; gap: 3px;
            background: #EFF6FF; border: 1px solid #BFDBFE;
            border-radius: 20px; padding: 3px 10px;
            font-size: 0.75rem; font-weight: 700; color: #1D4ED8;
        }
        .cn-la-chip.cn-la-due { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
        .cn-la-chip.cn-la-soon { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }
        .cn-la-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #60A5FA; animation: cn-pulse-la 1.4s ease-in-out infinite;
            flex-shrink: 0;
        }
        .cn-la-chip.cn-la-due .cn-la-dot { background: #F59E0B; }
        .cn-la-chip.cn-la-soon .cn-la-dot { background: #10B981; }
        @keyframes cn-pulse-la {
            0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
        }
        .cn-la-spinner {
            display: inline-block; width: 12px; height: 12px;
            border: 2px solid #E5E7EB; border-top-color: #60A5FA;
            border-radius: 50%; animation: cn-spin 0.8s linear infinite;
        }
        @keyframes cn-spin { to { transform: rotate(360deg); } }
        /* Inline disruption badge on specific line cards */
        .cn-dis-inline:not(:empty) {
            display: flex; align-items: center; gap: 6px;
            background: #FFF7ED; border: 1px solid #FED7AA;
            border-radius: 8px; padding: 5px 10px; margin: 6px 0;
            font-size: 0.76rem; font-weight: 600; color: #9A3412;
        }
        .cn-dis-inline:empty { display: none; }
        .cn-gm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; }
        .cn-gm-btns { display: flex; gap: 10px; padding: 14px 20px 16px; border-bottom: 1px solid #F3F4F6; }
        .cn-gm-btn-start { flex: 1; background: #1a73e8; color: white; border: none; border-radius: 24px; padding: 13px 16px; font-size: 0.95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-family: inherit; transition: background 0.15s; }
        .cn-gm-btn-start:active { background: #1557b0; transform: scale(0.97); }
        .cn-gm-tl { padding: 16px 20px 16px; }
        .cn-gm-row { display: flex; gap: 14px; }
        .cn-gm-dc { display: flex; flex-direction: column; align-items: center; width: 24px; flex-shrink: 0; }
        .cn-gm-dot { border-radius: 50%; flex-shrink: 0; }
        .cn-gm-d-origin { width: 14px; height: 14px; background: #1a73e8; box-shadow: 0 0 0 4px rgba(26,115,232,0.15); }
        .cn-gm-d-walk { width: 28px; height: 28px; background: #F1F3F4; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .cn-gm-d-station { width: 18px; height: 18px; border: 3px solid #374151; background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
        .cn-gm-d-alight { width: 12px; height: 12px; border: 2px solid #9CA3AF; background: white; }
        .cn-gm-d-dest { width: 16px; height: 16px; background: #E53935; box-shadow: 0 0 0 4px rgba(229,57,53,0.12); }
        .cn-gm-vl { width: 2px; flex: 1; min-height: 14px; background: #D1D5DB; margin: 3px 0; }
        .cn-gm-vl-dot { background: repeating-linear-gradient(to bottom, #9CA3AF 0, #9CA3AF 4px, transparent 4px, transparent 8px); }
        .cn-gm-vl-solid { width: 4px; border-radius: 2px; }
        .cn-gm-body { flex: 1; min-width: 0; padding-bottom: 18px; }
        .cn-gm-nr { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
        .cn-gm-name { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.3; }
        .cn-gm-rtime { font-size: 0.9rem; font-weight: 600; color: #374151; flex-shrink: 0; }
        .cn-gm-wlabel { font-size: 0.9rem; color: #374151; font-weight: 500; }
        .cn-gm-wsub { font-size: 0.8rem; color: #6B7280; margin-top: 2px; }
        .cn-gm-rblock { background: #F9FAFB; border-radius: 12px; padding: 12px 14px; border-left: 4px solid #3b82f6; margin-top: 10px; }
        .cn-gm-rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .cn-gm-rdir { font-size: 0.88rem; color: #374151; flex: 1; min-width: 0; }
        .cn-gm-rdtime { font-size: 0.9rem; font-weight: 700; color: #111827; flex-shrink: 0; }
        .cn-gm-rlive { font-size: 0.78rem; color: #6B7280; margin-top: 5px; display: flex; align-items: center; gap: 5px; }
        .cn-gm-rstops { font-size: 0.84rem; color: #374151; font-weight: 500; display: flex; align-items: center; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid #E5E7EB; }
        .cn-gm-arow { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
        .cn-gm-arow-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
        .cn-gm-arow-nametime { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
        .cn-gm-aname { font-size: 1rem; font-weight: 700; color: #111827; min-width: 0; }
        .cn-gm-boarding-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
        .cn-gm-station-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; white-space: nowrap; }
        .cn-gm-subs summary { font-size: 0.78rem; color: #6B7280; cursor: pointer; padding: 4px 0; }
        .cn-gm-subs-list { margin-top: 5px; padding-left: 8px; border-left: 2px solid #D1FAE5; }
        .cn-gm-subs-list div { font-size: 0.78rem; color: #4B5563; padding: 2px 0; }
        .cn-gm-body.transit-step-card, .cn-gm-body.transit-step-card.walk-card { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; margin: 0; }
        .transit-step-wrap.step-active .cn-gm-body { background: rgba(232,89,12,0.05); border-radius: 10px; outline: 1.5px solid rgba(232,89,12,0.25); padding: 8px 10px; margin: -8px -10px; }
        .transit-step-wrap.step-completed .cn-gm-body { opacity: 0.45; }
        .transit-step-wrap.step-future .cn-gm-body { opacity: 0.6; }
        .ar-start-btn { background: #2563eb; color: white; border: none; border-radius: 10px; padding: 10px 18px; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
        .ar-start-btn:hover { background: #1d4ed8; }
        .ar-start-btn-large { background: #2563eb; color: white; border: none; border-radius: 10px; padding: 14px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
        .ar-start-btn-large:hover { background: #1d4ed8; }
        .ar-available-badge { font-size: 0.7rem; background: rgba(13,148,136,0.1); color: #0d9488; padding: 2px 8px; border-radius: 6px; font-weight: 600; }

        .driving-nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: none; background: #0c1220; flex-direction: column; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; }
        .driving-nav-overlay.active { display: flex; }
        body.driving-active { overflow: hidden; }
        .driving-nav-top { background: linear-gradient(180deg, #0a1628 0%, #0f2040 100%); padding: 0; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .driving-nav-maneuver { display: flex; align-items: center; gap: 16px; padding: 20px 20px 12px 20px; }
        .driving-nav-turn-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #1e40af, #2563eb); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(37,99,235,0.4); }
        .driving-nav-turn-icon svg { width: 34px; height: 34px; fill: white; }
        .driving-nav-turn-info { flex: 1; color: white; }
        .driving-nav-distance-next { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
        .driving-nav-instruction { font-size: 1.05rem; font-weight: 600; margin-top: 5px; opacity: 0.95; line-height: 1.3; }
        .driving-nav-road { font-size: 0.82rem; opacity: 0.55; margin-top: 3px; font-weight: 500; letter-spacing: 0.2px; }
        .driving-nav-progress { display: flex; align-items: center; gap: 12px; padding: 10px 20px 14px 20px; }
        .driving-nav-progress-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; }
        .driving-nav-progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 3px; transition: width 0.6s ease; }
        .driving-nav-step-count { color: rgba(255,255,255,0.55); font-size: 0.78rem; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; }
        .driving-nav-map { flex: 1; position: relative; }
        .driving-nav-map #drivingMap { width: 100%; height: 100%; }
        .driving-nav-bottom { background: linear-gradient(180deg, #0c1830 0%, #0a1220 100%); padding: 14px 16px 18px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.06); }
        .driving-nav-stats { display: flex; justify-content: space-around; align-items: center; margin-bottom: 14px; background: rgba(255,255,255,0.04); border-radius: 14px; padding: 12px 8px; border: 1px solid rgba(255,255,255,0.06); }
        .driving-nav-stat { text-align: center; }
        .driving-nav-stat-value { color: white; font-size: 1.35rem; font-weight: 700; }
        .driving-nav-stat-value.eta { color: #34d399; }
        .driving-nav-stat-label { color: rgba(255,255,255,0.4); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }
        .driving-nav-stat-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }
        .driving-nav-controls { display: flex; gap: 10px; }
        .driving-nav-end-btn { flex: 1.3; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; padding: 14px 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; min-height: 50px; letter-spacing: 0.2px; }
        .driving-nav-end-btn:active { transform: scale(0.97); opacity: 0.9; }
        .driving-nav-next-btn { flex: 1; background: linear-gradient(135deg, #1e40af, #2563eb); color: white; border: none; border-radius: 14px; padding: 14px 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; min-height: 50px; letter-spacing: 0.2px; box-shadow: 0 2px 10px rgba(37,99,235,0.3); }
        .driving-nav-next-btn:active { transform: scale(0.97); opacity: 0.9; }
        .driving-nav-overview-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 14px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 50px; white-space: nowrap; }
        .driving-nav-overview-btn:active { transform: scale(0.97); }
        .driving-nav-next-step { background: rgba(30,64,175,0.15); padding: 10px 20px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.04); }
        .driving-nav-next-label { color: rgba(96,165,250,0.8); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
        .driving-nav-next-text { color: rgba(255,255,255,0.75); font-size: 0.88rem; flex: 1; }
        .driving-nav-next-dist { color: #60a5fa; font-size: 0.85rem; font-weight: 700; }
        .driving-start-btn { background: linear-gradient(135deg, #1e40af, #2563eb); color: white; border: none; border-radius: 14px; padding: 16px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; box-shadow: 0 4px 16px rgba(37,99,235,0.35); transition: all 0.2s; letter-spacing: 0.2px; }
        .driving-start-btn:hover { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.45); }
        .driving-start-btn:active { transform: translateY(0); }
        .driving-nav-speed { position: absolute; bottom: 20px; left: 16px; background: rgba(0,0,0,0.75); color: white; border-radius: 50%; width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.15); z-index: 5; }
        .driving-nav-speed-value { font-size: 1.15rem; font-weight: 800; line-height: 1; }
        .driving-nav-speed-unit { font-size: 0.52rem; opacity: 0.65; font-weight: 600; letter-spacing: 0.3px; }
        .driving-nav-recenter { position: absolute; bottom: 20px; right: 16px; background: rgba(0,0,0,0.75); color: white; border: 2px solid rgba(255,255,255,0.15); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); z-index: 5; }
        .driving-nav-satellite { position: absolute; bottom: 78px; right: 16px; background: rgba(0,0,0,0.75); color: white; border: 2px solid rgba(255,255,255,0.15); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); z-index: 5; font-size: 0.55rem; font-weight: 700; flex-direction: column; gap: 2px; letter-spacing: 0.2px; }
        .driving-nav-satellite.active { border-color: #3B9DE3; background: rgba(59,157,227,0.25); }
        /* Speed limit badge */
        .driving-speed-limit { position: absolute; bottom: 90px; left: 16px; width: 54px; height: 54px; border-radius: 50%; background: white; border: 4px solid #dc2626; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 6; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
        .driving-speed-limit.visible { display: flex; }
        .driving-speed-limit.overspeed { border-color: #dc2626; background: #fee2e2; animation: speedLimitPulse 0.7s ease-in-out infinite; }
        .driving-speed-limit-val { font-size: 1.1rem; font-weight: 900; color: #111; line-height: 1; }
        .driving-speed-limit-unit { font-size: 0.38rem; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: 0.3px; }
        @keyframes speedLimitPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
        .driving-speed-next { display: none; position: absolute; bottom: 72px; left: 8px; min-width: 58px; text-align: center; background: rgba(0,0,0,0.78); color: #f8fafc; font-size: 0.58rem; font-weight: 700; border-radius: 7px; padding: 3px 6px; white-space: nowrap; z-index: 6; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); letter-spacing: 0.2px; }
        /* Lane guidance strip */
        .driving-lane-strip { display: none; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); padding: 8px 16px; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .driving-lane-strip.visible { display: flex; }
        .driving-lane-arrow { width: 30px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
        .driving-lane-arrow.active { background: rgba(59,130,246,0.35); }
        .driving-lane-arrow svg { width: 20px; height: 24px; }
        /* Route alternatives sheet */
        .driving-routes-sheet { display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #0c1830; border-radius: 20px 20px 0 0; padding: 16px; border-top: 2px solid rgba(59,130,246,0.3); z-index: 10; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
        .driving-routes-sheet.visible { display: block; }
        .driving-routes-sheet-title { color: white; font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
        .driving-route-option { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 14px; margin-bottom: 10px; border: 1.5px solid rgba(255,255,255,0.08); cursor: pointer; display: flex; align-items: center; gap: 12px; }
        .driving-route-option:active { background: rgba(59,130,246,0.2); }
        .driving-route-option.selected { border-color: #3b82f6; background: rgba(59,130,246,0.15); }
        .driving-route-badge { background: linear-gradient(135deg, #1e40af, #3b82f6); color: white; border-radius: 8px; padding: 4px 9px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
        .driving-route-badge.alt { background: rgba(255,255,255,0.15); }
        .driving-route-info { flex: 1; }
        .driving-route-time { color: white; font-size: 1.05rem; font-weight: 700; }
        .driving-route-dist { color: rgba(255,255,255,0.5); font-size: 0.8rem; margin-top: 2px; }
        .driving-route-label { color: rgba(255,255,255,0.45); font-size: 0.75rem; margin-top: 2px; font-style: italic; }
        /* Parking finder button */
        .driving-parking-btn { display: none; position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg, #065f46, #059669); color: white; border: none; border-radius: 14px; padding: 10px 16px; font-size: 0.85rem; font-weight: 700; cursor: pointer; z-index: 6; box-shadow: 0 3px 12px rgba(5,150,105,0.4); gap: 6px; align-items: center; }
        .driving-parking-btn.visible { display: flex; }
        /* Parking results sheet */
        .driving-parking-sheet { display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #0c1830; border-radius: 20px 20px 0 0; padding: 16px; border-top: 2px solid rgba(5,150,105,0.4); z-index: 10; }
        .driving-parking-sheet.visible { display: block; }
        .driving-parking-item { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,0.08); }
        .driving-parking-icon { width: 38px; height: 38px; background: rgba(5,150,105,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #34d399; font-size: 1.2rem; flex-shrink: 0; }
        .driving-parking-name { color: white; font-size: 0.9rem; font-weight: 600; }
        .driving-parking-dist { color: rgba(255,255,255,0.45); font-size: 0.75rem; margin-top: 2px; }
        .driving-parking-nav-btn { background: rgba(59,130,246,0.25); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); border-radius: 9px; padding: 7px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
        /* Recalculating overlay state */
        .driving-recalc-banner { display: none; background: linear-gradient(90deg, rgba(245,158,11,0.25), rgba(251,191,36,0.15)); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; align-items: center; gap: 8px; color: #fbbf24; font-size: 0.82rem; font-weight: 700; border: 1px solid rgba(251,191,36,0.2); }
        .driving-recalc-banner.visible { display: flex; }

        .walking-nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: none; background: #111827; flex-direction: column; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; }
        .walking-nav-overlay.active { display: flex; }
        body.walking-active { overflow: hidden; }
        .walking-nav-top { background: #0d9488; padding: 0; flex-shrink: 0; }
        .walking-nav-maneuver { display: flex; align-items: center; gap: 16px; padding: 20px 20px 10px 20px; }
        .walking-nav-turn-icon { width: 56px; height: 56px; background: rgba(255,255,255,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .walking-nav-turn-icon svg { width: 36px; height: 36px; fill: white; }
        .walking-nav-turn-info { flex: 1; color: white; }
        .walking-nav-distance-next { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
        .walking-nav-instruction { font-size: 1rem; font-weight: 500; margin-top: 4px; opacity: 0.95; line-height: 1.3; }
        .walking-nav-road { font-size: 0.85rem; opacity: 0.7; margin-top: 2px; font-weight: 400; }
        .walking-nav-progress { display: flex; align-items: center; gap: 12px; padding: 12px 20px 16px 20px; }
        .walking-nav-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden; }
        .walking-nav-progress-fill { height: 100%; background: #34d399; border-radius: 2px; transition: width 0.5s ease; }
        .walking-nav-step-count { color: rgba(255,255,255,0.7); font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
        .walking-nav-map { flex: 1; position: relative; }
        .walking-nav-map #walkingMap { width: 100%; height: 100%; }
        .walking-nav-bottom { background: #064e3b; padding: 16px 20px; flex-shrink: 0; }
        .walking-nav-stats { display: flex; justify-content: space-around; align-items: center; margin-bottom: 12px; }
        .walking-nav-stat { text-align: center; }
        .walking-nav-stat-value { color: white; font-size: 1.3rem; font-weight: 700; }
        .walking-nav-stat-value.eta { color: #34d399; }
        .walking-nav-stat-label { color: rgba(255,255,255,0.5); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
        .walking-nav-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.15); }
        .walking-nav-controls { display: flex; gap: 12px; }
        .walking-nav-end-btn { flex: 1; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 14px; font-size: 1rem; font-weight: 700; cursor: pointer; min-height: 48px; }
        .walking-nav-end-btn:active { transform: scale(0.97); }
        .walking-nav-overview-btn { flex: 1; background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 14px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 48px; }
        .walking-nav-overview-btn:active { transform: scale(0.97); }
        .walking-nav-ar-btn { flex: 1; background: #2563eb; color: white; border: none; border-radius: 12px; padding: 14px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 48px; }
        .walking-nav-ar-btn:active { transform: scale(0.97); }
        .walking-nav-next-step { background: rgba(255,255,255,0.06); padding: 10px 20px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
        .walking-nav-next-label { color: rgba(255,255,255,0.5); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; }
        .walking-nav-next-text { color: rgba(255,255,255,0.8); font-size: 0.9rem; flex: 1; }
        .walking-nav-next-dist { color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 600; }
        .walking-start-btn { background: #0d9488; color: white; border: none; border-radius: 10px; padding: 14px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
        .walking-start-btn:hover { background: #047857; }
        .walking-nav-speed { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.2); z-index: 5; }
        .walking-nav-speed-value { font-size: 1.1rem; font-weight: 700; line-height: 1; }
        .walking-nav-speed-unit { font-size: 0.55rem; opacity: 0.7; }
        .walking-nav-recenter { position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); z-index: 5; }
        .walking-nav-satellite { position: absolute; bottom: 76px; right: 20px; background: rgba(0,0,0,0.7); color: white; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); z-index: 5; font-size: 0.55rem; font-weight: 700; flex-direction: column; gap: 2px; letter-spacing: 0.2px; }
        .walking-nav-satellite.active { border-color: #0d9488; background: rgba(13,148,136,0.25); }

        .map-page-container {
            position: relative;
            height: calc(100vh - var(--cn-navbar-height) - var(--cn-bottom-nav-height));
            margin: 0 -24px;
            overflow: hidden;
        }
        /* Remove body padding on map page so the map truly fills the viewport */
        body.on-map-page {
            padding-bottom: 0 !important;
        }
        body.on-map-page .main {
            height: calc(100vh - var(--cn-navbar-height));
            min-height: unset;
            overflow: hidden;
        }
        body.on-map-page .container {
            height: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
            overflow: hidden;
        }
        body.on-map-page .navbar .container {
            padding-left: 20px !important;
            padding-right: 20px !important;
            max-width: 100% !important;
            height: 60px;
            overflow: visible;
        }
        body.on-map-page .map-page-container {
            height: calc(100% - var(--cn-bottom-nav-height)) !important;
            margin: 0 !important;
        }
        .map-page-container #map {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100%;
        }
        .map-bottom-sheet {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: var(--cn-surface);
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
            z-index: 50;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            will-change: transform;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        .map-bottom-sheet.sheet-collapsed {
            transform: translateY(calc(100% - 80px));
        }
        .map-bottom-sheet.sheet-half {
            transform: translateY(calc(100% - 400px));
        }
        .map-bottom-sheet.sheet-expanded {
            transform: translateY(0);
        }
        .sheet-handle {
            display: flex;
            justify-content: center;
            padding: 10px 0 6px;
            cursor: grab;
            flex-shrink: 0;
        }
        .sheet-handle-bar {
            width: 44px;
            height: 5px;
            background: #d1d5db;
            border-radius: 3px;
        }
        .sheet-content {
            padding: 0 20px 20px;
            overflow-y: auto;
            flex: 1;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }
        .sheet-search-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        .sheet-input {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f1f5f9;
            border: 1.5px solid #e2e8f0;
            border-radius: 14px;
            padding: 13px 14px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .sheet-input:focus-within {
            border-color: var(--cn-primary);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
            background: white;
        }
        .sheet-input .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .sheet-input .dot.green { background: #0d9488; }
        .sheet-input .dot.red { background: #ef4444; }
        .sheet-input input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 0.95rem;
            color: #111827;
            font-family: var(--cn-font);
            width: 100%;
        }
        .sheet-input input::placeholder { color: #94a3b8; }
        .sheet-gps-btn {
            width: 48px;
            height: 48px;
            min-width: 48px;
            background: #f1f5f9;
            border: 1.5px solid #e2e8f0;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .sheet-gps-btn:active { transform: scale(0.93); background: #e2e8f0; }
        .sheet-mode-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 14px;
            background: rgba(255,255,255,0.07);
            border-radius: 14px;
            padding: 3px;
            overflow: visible;
        }
        .sheet-mode-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 9px 4px;
            border-radius: 11px;
            border: none;
            background: transparent;
            font-family: var(--cn-font);
            font-size: 0.72rem;
            font-weight: 700;
            color: #94a3b8;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s;
            min-height: 54px;
            letter-spacing: 0.01em;
        }
        .sheet-mode-tab.active {
            background: rgba(255,255,255,0.14);
            color: white;
            box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        }
        .sheet-mode-tab:active { transform: scale(0.95); }
        .sheet-mode-tab svg { width: 18px; height: 18px; }
        .tab-pro-badge {
            display: inline-flex;
            align-items: center;
            margin-left: 6px;
            padding: 2px 6px;
            border-radius: 4px;
            background: linear-gradient(135deg, #FACC15, #FF7A00);
            color: #1e293b;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            box-shadow: 0 1px 3px rgba(255,122,0,0.35);
            line-height: 1;
        }
        .sheet-mode-tab.active .tab-pro-badge { background: rgba(255,255,255,0.95); color: #FF7A00; box-shadow: none; }
        .sheet-search-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--cn-primary), var(--cn-primary-dark));
            color: white;
            font-family: var(--cn-font);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 12px;
            min-height: 52px;
            box-shadow: 0 3px 12px rgba(37,99,235,0.28);
            transition: all 0.15s;
            letter-spacing: 0.01em;
        }
        .sheet-search-btn:active { transform: scale(0.98); opacity: 0.92; }
        .sheet-results { margin-top: 8px; }
        .sheet-cta-footer {
            flex-shrink: 0;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
            background: linear-gradient(180deg, rgba(15,23,42,0) 0%, #0f172a 35%);
            border-top: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 -8px 18px rgba(0,0,0,0.18);
        }
        body.cn-light-home .sheet-cta-footer {
            background: #FFFFFF !important;
            border-top: 1px solid #ECE9E0 !important;
            box-shadow: 0 -4px 16px rgba(15,20,25,0.08) !important;
        }
        body.cn-light-home .sheet-cta-footer .cta-secondary {
            border-color: rgba(232,89,12,0.3) !important;
            background: rgba(232,89,12,0.06) !important;
            color: #E8590C !important;
        }
        body.cn-light-home .sheet-cta-footer .cta-secondary:hover {
            background: rgba(232,89,12,0.12) !important;
            border-color: #E8590C !important;
        }
        body.cn-light-home .sheet-cta-footer .cta-pro-pill {
            background: linear-gradient(135deg, #E8590C, #C2410C) !important;
            color: #FFFFFF !important;
        }
        .sheet-cta-footer .cta-row { display: flex; gap: 8px; align-items: stretch; }
        .sheet-cta-footer .cta-primary {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 18px;
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            color: #1a1a1a;
            font-weight: 800;
            font-size: 0.95rem;
            font-family: var(--cn-font);
            cursor: pointer;
            min-height: 50px;
            box-shadow: 0 4px 16px rgba(255,122,0,0.4);
            transition: all 0.15s;
            letter-spacing: 0.2px;
        }
        .sheet-cta-footer .cta-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,122,0,0.55); }
        .sheet-cta-footer .cta-primary:active { transform: translateY(0); }
        .sheet-cta-footer .cta-secondary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 14px 14px;
            border-radius: 14px;
            border: 1.5px solid rgba(250,204,21,0.45);
            background: rgba(250,204,21,0.08);
            color: #FACC15;
            font-weight: 700;
            font-size: 0.85rem;
            font-family: var(--cn-font);
            cursor: pointer;
            min-height: 50px;
            white-space: nowrap;
            transition: all 0.15s;
        }
        .sheet-cta-footer .cta-secondary:hover { background: rgba(250,204,21,0.16); border-color: #FACC15; }
        .sheet-cta-footer .cta-secondary .cta-pro-pill {
            display: inline-flex;
            align-items: center;
            margin-left: 4px;
            padding: 2px 5px;
            border-radius: 4px;
            background: linear-gradient(135deg, #FACC15, #FF7A00);
            color: #1e293b;
            font-size: 0.55rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            line-height: 1;
        }
        /* Hide the in-panel Start buttons since they're now in the sticky footer */
        /* walking/driving/AR start buttons are visible in-panel;
           updateSheetCtaFooter may also mirror them in the sticky footer */
        /* Subtle attention pulse the first time the CTA footer appears */
        @keyframes ctaPulseIn {
            0% { transform: translateY(8px); opacity: 0; }
            60% { transform: translateY(-2px); opacity: 1; }
            100% { transform: translateY(0); opacity: 1; }
        }
        .sheet-cta-footer[style*="block"] {
            animation: ctaPulseIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
        }
        /* ── #1 Unauth route gate ─────────────────────────────────────── */
        .unauth-route-gate {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 14px 0;
            padding: 14px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(255,122,0,0.12), rgba(250,204,21,0.08));
            border: 1px dashed rgba(255,122,0,0.45);
            color: #fff;
        }
        .unauth-route-gate .gate-lock {
            flex-shrink: 0;
            width: 44px; height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            color: #1a1a1a;
            display: flex; align-items: center; justify-content: center;
        }
        .unauth-route-gate .gate-text { flex: 1; min-width: 0; }
        .unauth-route-gate .gate-title { font-weight: 700; font-size: 0.95rem; color: #fff; line-height: 1.25; }
        .unauth-route-gate .gate-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; line-height: 1.3; }
        .unauth-route-gate .gate-cta {
            flex-shrink: 0;
            background: #fff;
            color: #FF7A00;
            border: none;
            border-radius: 10px;
            padding: 10px 14px;
            font-weight: 800;
            font-size: 0.82rem;
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
        }
        .unauth-route-gate .gate-cta:hover { background: #FFE4B5; }
        @keyframes cnFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes cnSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes cnSlideUpSmall { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        /* ── #7 Recents chip strip ────────────────────────────────────── */
        .recents-strip {
            display: flex; gap: 8px; overflow-x: auto;
            padding: 8px 16px 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .recents-strip::-webkit-scrollbar { display: none; }
        .recents-strip .recent-chip {
            flex-shrink: 0;
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 12px;
            border-radius: 18px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #cbd5e1;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .recents-strip .recent-chip:hover { background: rgba(255,122,0,0.12); border-color: rgba(255,122,0,0.4); color: #fff; }
        .recents-strip .recent-chip svg { flex-shrink: 0; opacity: 0.7; }
        .recents-strip .recents-clear { color: #64748b; font-size: 0.72rem; padding: 7px 10px; cursor: pointer; }
        /* ── #8 Swap FROM↔TO button ───────────────────────────────────── */
        .swap-from-to-btn {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 36px; height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            border: 3px solid #0f172a;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            color: #1a1a1a;
            z-index: 5;
            box-shadow: 0 2px 10px rgba(255,122,0,0.4);
            transition: transform 0.25s;
        }
        .swap-from-to-btn:hover { transform: translateY(-50%) rotate(180deg); }
        .swap-from-to-btn:active { transform: translateY(-50%) rotate(180deg) scale(0.9); }
        .input-divider-with-swap { position: relative; }
        /* ── #9 Voice search mic ──────────────────────────────────────── */
        .voice-mic-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(255,122,0,0.12);
            border: 1px solid rgba(255,122,0,0.35);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            color: #FF7A00;
            z-index: 4;
            transition: all 0.15s;
        }
        .voice-mic-btn:hover { background: rgba(255,122,0,0.22); }
        .voice-mic-btn.listening { background: #FF7A00; color: #fff; animation: micPulse 1.2s infinite; }
        @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,0,0.6); } 50% { box-shadow: 0 0 0 10px rgba(255,122,0,0); } }
        .input-with-mic { position: relative; }
        .input-with-mic input { padding-right: 50px !important; }
        /* ── #10 Clear route X button ─────────────────────────────────── */
        .clear-route-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(15,23,42,0.85);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.15);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            z-index: 6;
            transition: background 0.15s;
        }
        .clear-route-btn:hover { background: #ef4444; border-color: #ef4444; }
        /* ── #11 Dark theme for directions panel ──────────────────────── */
        .map-bottom-sheet .route-details-panel {
            background: rgba(15,23,42,0.6) !important;
            border-radius: 16px;
            padding: 14px !important;
            color: #e2e8f0 !important;
        }
        .map-bottom-sheet .route-details-panel h3,
        .map-bottom-sheet .route-details-panel h4 { color: #fff !important; }
        .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #f0fdfa"],
        .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #ecfeff"] {
            background: linear-gradient(135deg, rgba(13,148,136,0.18), rgba(20,184,166,0.10)) !important;
            border-color: rgba(45,212,191,0.35) !important;
            color: #5eead4 !important;
        }
        .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #f0fdfa"] *,
        .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #ecfeff"] * {
            color: #5eead4 !important;
        }
        /* ── Light-theme overrides for route panel (cn-light-home) ──── */
        body.cn-light-home .map-bottom-sheet .route-details-panel {
            background: transparent !important;
            color: #0F1419 !important;
        }
        body.cn-light-home .map-bottom-sheet .route-details-panel h3,
        body.cn-light-home .map-bottom-sheet .route-details-panel h4 {
            color: #0F1419 !important;
        }
        body.cn-light-home .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #f0fdfa"],
        body.cn-light-home .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #ecfeff"] {
            background: #F0FDF4 !important;
            border-color: #A7F3D0 !important;
            color: #047857 !important;
        }
        body.cn-light-home .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #f0fdfa"] *,
        body.cn-light-home .map-bottom-sheet .route-details-panel > div[style*="background: linear-gradient(135deg, #ecfeff"] * {
            color: #047857 !important;
        }
        body.cn-light-home .route-step { border-bottom-color: #ECE9E0 !important; }
        body.cn-light-home .route-step-text { color: #0F1419 !important; }
        body.cn-light-home .route-step-dist { color: #6B7280 !important; }
        body.cn-light-home .route-alt-btn {
            background: #FAFAF7 !important;
            border-color: #ECE9E0 !important;
            color: #0F1419 !important;
        }
        body.cn-light-home .route-alt-btn .ra-time { color: #0F1419 !important; }
        body.cn-light-home .route-alt-btn.active {
            background: linear-gradient(135deg, rgba(232,89,12,0.12), rgba(194,65,12,0.08)) !important;
            border-color: rgba(232,89,12,0.45) !important;
        }
        body.cn-light-home .route-alt-btn.active .ra-label { color: #C2410C !important; }
        body.cn-light-home .route-alts-strip {
            background: #F5F3ED !important;
            border-color: #ECE9E0 !important;
        }
        body.cn-light-home .ra-header { color: #6B7280 !important; }
        body.cn-light-home .ra-badge { background: rgba(232,89,12,0.10) !important; color: #C2410C !important; }
        body.cn-light-home .route-alt-btn .ra-changes { color: #6B7280 !important; }
        body.cn-light-home .cn-disruption-banner {
            background: rgba(249,115,22,0.08) !important;
            border-color: rgba(234,88,12,0.25) !important;
            color: #92400E !important;
        }
        body.cn-light-home .cn-disruption-header { color: #C2410C !important; }
        body.cn-light-home .cn-dis-name { color: #1F2937 !important; }
        body.cn-light-home .cn-dis-status { color: #B45309 !important; }
        body.cn-light-home .cn-eta-share-btn {
            background: #F0FDF4 !important;
            color: #047857 !important;
            border-color: #A7F3D0 !important;
        }
        body.cn-light-home .cn-fare-card {
            background: #FFFBEB !important;
            border-color: rgba(180,83,9,0.3) !important;
            color: #0F1419 !important;
        }
        body.cn-light-home .cn-fare-title { color: #B45309 !important; }
        body.cn-light-home .cn-fare-lbl { color: #6B7280 !important; }
        body.cn-light-home .cn-fare-val { color: #0F1419 !important; }
        body.cn-light-home .cn-fare-note { color: #9CA3AF !important; }
        /* Transit timeline in light mode */
        body.cn-light-home .cn-gm-name { color: #0F1419 !important; }
        body.cn-light-home .cn-gm-rtime { color: #6B7280 !important; }
        body.cn-light-home .cn-gm-wlabel { color: #374151 !important; }
        body.cn-light-home .cn-gm-wsub { color: #6B7280 !important; }
        body.cn-light-home .cn-gm-vl { background: #ECE9E0 !important; }
        body.cn-light-home .cn-gm-tl { color: #0F1419 !important; }
        body.cn-light-home .walk-card { background: #F9FAFB !important; border-color: #ECE9E0 !important; }
        body.cn-light-home .driving-step-row { border-bottom-color: #ECE9E0 !important; color: #0F1419 !important; }
        body.cn-light-home .driving-step-text { color: #0F1419 !important; }
        body.cn-light-home .driving-step-dist { color: #6B7280 !important; }
        body.cn-light-home .unauth-route-gate {
            background: linear-gradient(135deg, #FFF8F0, #FFF1E5) !important;
            border-color: #FFE3CC !important;
        }
        body.cn-light-home .gate-title { color: #0F1419 !important; }
        body.cn-light-home .gate-sub { color: #6B7280 !important; }
        body.cn-light-home .cn-save-route-btn {
            background: #FAFAF7 !important;
            border-color: #ECE9E0 !important;
            color: #0F1419 !important;
        }
        body.cn-light-home .sheet-search-btn {
            background: linear-gradient(135deg, #E8590C, #C2410C) !important;
            box-shadow: 0 2px 8px rgba(232,89,12,0.25) !important;
        }
        /* ── #12 Route alternatives strip ─────────────────────────────── */
        .route-alts-strip {
            display: flex; gap: 6px;
            margin: 10px 0 14px;
            background: rgba(255,255,255,0.04);
            border-radius: 12px;
            padding: 4px;
        }
        .route-alts-strip .alt-tab {
            flex: 1;
            padding: 8px 10px;
            border-radius: 9px;
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s;
        }
        .route-alts-strip .alt-tab.active { background: linear-gradient(135deg, #FF7A00, #FFB347); color: #1a1a1a; }
        /* ── #19 Skeleton loaders ─────────────────────────────────────── */
        .ai-place-skeleton {
            background: rgba(255,255,255,0.04);
            border-radius: 14px;
            padding: 12px;
            margin-bottom: 8px;
            display: flex; gap: 12px;
        }
        .ai-place-skeleton .sk-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%); background-size: 200% 100%; animation: skShimmer 1.4s infinite; }
        .ai-place-skeleton .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
        .ai-place-skeleton .sk-line { height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%); background-size: 200% 100%; animation: skShimmer 1.4s infinite; }
        .ai-place-skeleton .sk-line.short { width: 40%; }
        .ai-place-skeleton .sk-line.medium { width: 75%; }
        @keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        /* ── #20 Empty states ─────────────────────────────────────────── */
        .cn-empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #94a3b8;
        }
        .cn-empty-state .empty-icon {
            width: 64px; height: 64px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(255,122,0,0.15), rgba(250,204,21,0.08));
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
            color: #FF7A00;
        }
        .cn-empty-state h4 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
        .cn-empty-state p { font-size: 0.85rem; color: #94a3b8; margin: 0 0 16px; line-height: 1.5; }
        .cn-empty-state .empty-cta {
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            color: #1a1a1a;
            border: none;
            border-radius: 12px;
            padding: 10px 18px;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
        }
        /* ── #4: Sticky bottom upgrade nudge on home ──────────────────── */
        .home-upgrade-nudge {
            position: fixed;
            bottom: calc(var(--cn-bottom-nav-height) + 12px);
            left: 12px; right: 12px;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #fff;
            border-radius: 16px;
            padding: 12px 14px;
            display: flex; align-items: center; gap: 12px;
            border: 1px solid rgba(255,122,0,0.4);
            box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,122,0,0.1);
            z-index: 900;
            animation: cnSlideUp 0.4s;
        }
        .home-upgrade-nudge .nudge-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FF7A00, #FFB347); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1a1a1a; }
        .home-upgrade-nudge .nudge-text { flex: 1; min-width: 0; }
        .home-upgrade-nudge .nudge-title { font-weight: 800; font-size: 0.85rem; color: #fff; }
        .home-upgrade-nudge .nudge-sub { font-size: 0.72rem; color: #94a3b8; }
        .home-upgrade-nudge .nudge-cta { background: linear-gradient(135deg, #FF7A00, #FFB347); color: #1a1a1a; border: none; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 0.78rem; cursor: pointer; font-family: inherit; flex-shrink: 0; }
        .home-upgrade-nudge .nudge-close { background: none; border: none; color: #64748b; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }
        /* ── #16 Currency mini overlay ────────────────────────────────── */
        .cn-currency-fab {
            position: fixed;
            bottom: 150px;
            right: 16px;
            width: 50px; height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #FACC15;
            border: 1px solid rgba(250,204,21,0.4);
            display: none;
            align-items: center; justify-content: center;
            font-weight: 800;
            font-size: 1.05rem;
            cursor: pointer;
            z-index: 800;
            box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        }
        body.on-map-page .cn-currency-fab { display: none; }

        /* #14 Multi-stop UI */
        .cn-add-stop-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(255,122,0,0.10); color: #FF7A00;
            border: 1px dashed rgba(255,122,0,0.45); border-radius: 999px;
            padding: 6px 14px; font-size: 0.78rem; font-weight: 700;
            cursor: pointer; margin: 4px 0 8px; align-self: flex-start;
            transition: all .15s;
        }
        .cn-add-stop-btn:hover { background: rgba(255,122,0,0.18); border-style: solid; }
        .waypoint-row { margin-top: 6px; }
        .sheet-input .dot.orange { background: #FF7A00; }
        .cn-wp-remove {
            background: transparent; border: none; color: #94a3b8; cursor: pointer;
            padding: 4px; margin-right: 4px; border-radius: 4px;
        }
        .cn-wp-remove:hover { color: #ef4444; background: rgba(239,68,68,0.10); }

        /* #12 Route alternatives */
        .route-alts-strip {
            padding: 10px 14px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .ra-header {
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin-bottom: 8px;
        }
        .ra-btn-row {
            display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        }
        .ra-btn-row::-webkit-scrollbar { display: none; }
        .route-alt-btn {
            flex: 0 0 auto; min-width: 100px; position: relative;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 10px 10px 8px; cursor: pointer;
            color: #cbd5e1; text-align: left; transition: all .15s;
        }
        .ra-badge {
            display: inline-block; font-size: 0.58rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.06em;
            background: rgba(255,122,0,0.22); color: #FFB347;
            border-radius: 4px; padding: 1px 5px; margin-bottom: 4px;
        }
        .route-alt-btn .ra-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
        .route-alt-btn .ra-time { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: 3px; }
        .route-alt-btn .ra-changes { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }
        .route-alt-btn .ra-dist { font-size: 0.72rem; opacity: 0.6; margin-top: 1px; }
        .route-alt-btn.active {
            background: linear-gradient(135deg, rgba(255,122,0,0.22), rgba(255,179,71,0.18));
            border-color: rgba(255,122,0,0.55);
            box-shadow: 0 0 0 2px rgba(255,122,0,0.25), 0 4px 14px rgba(255,122,0,0.15);
        }
        .route-alt-btn.active .ra-label { color: #FFB347; opacity: 1; }
        /* Disruption banner */
        .cn-disruption-banner {
            margin: 0 14px 10px; padding: 10px 12px;
            background: rgba(234,88,12,0.12); border: 1px solid rgba(234,88,12,0.35);
            border-radius: 10px; font-size: 0.8rem; color: #fed7aa;
        }
        .cn-disruption-header {
            display: flex; align-items: center; gap: 6px;
            font-weight: 700; margin-bottom: 6px; color: #fb923c;
        }
        .cn-disruption-line {
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 3px;
        }
        .cn-dis-name { font-weight: 600; color: #fff; min-width: 80px; }
        .cn-dis-status { font-size: 0.75rem; color: #fcd34d; }
        .cn-dis-reason { font-size: 0.72rem; opacity: 0.7; margin-top: 1px; margin-bottom: 5px; }
        .cn-dis-more { font-size: 0.72rem; opacity: 0.65; margin-top: 4px; }

        /* #15 Share my ETA button */
        .cn-eta-share-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(13,148,136,0.10); color: #5eead4;
            border: 1px solid rgba(13,148,136,0.35); border-radius: 10px;
            padding: 8px 14px; font-size: 0.85rem; font-weight: 600;
            cursor: pointer; margin: 12px 14px 6px;
        }
        .cn-eta-share-btn:hover { background: rgba(13,148,136,0.18); }

        /* #17 Transit fare card */
        .cn-fare-card {
            margin: 12px 14px 6px; padding: 12px 14px;
            background: linear-gradient(135deg, rgba(15,23,42,0.65), rgba(30,41,59,0.55));
            border: 1px solid rgba(250,204,21,0.25); border-radius: 12px;
            color: #e2e8f0;
        }
        .cn-fare-title { font-size: 0.78rem; font-weight: 700; color: #FACC15; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
        .cn-fare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .cn-fare-lbl { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
        .cn-fare-val { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: 2px; }
        .cn-fare-note { font-size: 0.68rem; color: #94a3b8; margin-top: 8px; font-style: italic; }

        /* #21 Map error retry */
        .cn-map-error {
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            padding: 18px 16px; margin: 12px 0;
            background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
            border: 1px solid rgba(239,68,68,0.30); border-radius: 14px;
            text-align: center;
        }
        .cn-map-error-icon { color: #f87171; }
        .cn-map-error-text { font-size: 0.88rem; color: #fecaca; line-height: 1.4; }
        .cn-map-error-retry {
            display: inline-flex; align-items: center; gap: 6px;
            background: #FF7A00; color: #fff; border: none;
            border-radius: 999px; padding: 9px 18px; font-size: 0.85rem;
            font-weight: 700; cursor: pointer; min-height: 40px;
            box-shadow: 0 4px 14px rgba(255,122,0,0.35);
        }
        .cn-map-error-retry:hover { background: #FFB347; }

        @media (min-width: 768px) {
            .map-page-container { margin: 0; border-radius: 16px; overflow: hidden; }
            .map-bottom-sheet { max-width: 420px; right: auto; border-radius: 0 20px 0 0; }
        }
        .essentials-strip {
            position: absolute;
            bottom: calc(280px + 12px);
            left: 0; right: 0;
            z-index: 49;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 12px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            pointer-events: none;
        }
        .essentials-strip::-webkit-scrollbar { display: none; }
        .essentials-strip-inner {
            display: none;
            gap: 8px;
            pointer-events: all;
            flex: 1;
            overflow-x: auto;
            scrollbar-width: none;
            animation: nearbySlide 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
        }
        .essentials-strip-inner::-webkit-scrollbar { display: none; }
        .essentials-strip-inner.expanded { display: flex; }
        @keyframes nearbySlide {
            from { opacity: 0; transform: translateX(-8px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .nearby-toggle-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 11px 16px;
            background: rgba(15,23,42,0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,127,0,0.45);
            border-radius: 22px;
            color: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s;
            -webkit-tap-highlight-color: transparent;
            pointer-events: all;
            min-height: 44px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.3);
            flex-shrink: 0;
        }
        .nearby-toggle-btn:hover { background: rgba(255,127,0,0.18); border-color: #FF7A00; }
        .nearby-toggle-btn:active { transform: scale(0.96); }
        .nearby-toggle-btn.active { background: linear-gradient(135deg, #FF7A00, #FFB347); border-color: #FF7A00; color: #fff; }
        .nearby-toggle-btn .nearby-chevron { transition: transform 0.2s; }
        .nearby-toggle-btn.active .nearby-chevron { transform: rotate(45deg); }
        .essential-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 10px 14px;
            background: rgba(15,23,42,0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,127,0,0.35);
            border-radius: 14px;
            cursor: pointer;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 600;
            white-space: nowrap;
            min-width: 58px;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
            -webkit-tap-highlight-color: transparent;
        }
        .essential-btn .ess-icon { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; }
        .essential-btn:hover, .essential-btn.active {
            background: rgba(59,157,227,0.25);
            border-color: #3B9DE3;
        }
        .essential-btn:active { transform: scale(0.95); }
        .essential-btn.active { border-color: #3B9DE3; box-shadow: 0 0 12px rgba(59,157,227,0.4); }
        .essential-clear-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: rgba(15,23,42,0.88);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 12px;
            cursor: pointer;
            color: #94a3b8;
            font-size: 1rem;
            transition: background 0.15s;
        }
        .essential-clear-btn:hover { background: rgba(239,68,68,0.25); border-color: #ef4444; color: #ef4444; }
        .essential-info-card {
            position: absolute;
            bottom: calc(280px + 76px);
            left: 12px; right: 12px;
            z-index: 51;
            background: rgba(15,23,42,0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,127,0,0.35);
            border-radius: 16px;
            padding: 14px 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            display: none;
        }
        .essential-info-card.visible { display: block; }
        .ess-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
        .ess-card-name { font-weight: 700; font-size: 0.95rem; color: #fff; flex: 1; margin-right: 8px; }
        .ess-card-close { background: none; border: none; color: #64748b; font-size: 1.2rem; cursor: pointer; padding: 0; line-height: 1; }
        .ess-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
        .ess-card-badge { font-size: 0.72rem; padding: 3px 8px; border-radius: 8px; font-weight: 600; }
        .ess-card-badge.dist { background: rgba(59,157,227,0.2); color: #3B9DE3; border: 1px solid rgba(59,157,227,0.3); }
        .ess-card-badge.open { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
        .ess-card-badge.closed { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
        .ess-card-badge.rating { background: rgba(250,204,21,0.15); color: #FBBC04; border: 1px solid rgba(250,204,21,0.3); }
        .ess-card-addr { font-size: 0.75rem; color: #94a3b8; margin-bottom: 10px; line-height: 1.4; }
        .ess-walk-btn {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #3B9DE3 0%, #6BB8EC 100%);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: opacity 0.15s;
        }
        .ess-walk-btn:active { opacity: 0.85; }

        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
            background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid var(--cn-border);
            display: flex; justify-content: space-around; align-items: stretch;
            padding: 4px 0 0; height: var(--cn-bottom-nav-height);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
        }
        .bottom-nav-item {
            flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; padding: 6px 4px; cursor: pointer; background: none; border: none;
            color: var(--cn-text-muted); font-family: var(--cn-font); font-size: 0.65rem; font-weight: 500;
            transition: color 0.2s; text-decoration: none; -webkit-tap-highlight-color: transparent;
            min-height: 48px; position: relative;
            padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
        }
        .bottom-nav-item.active { color: var(--cn-primary); font-weight: 700; }
        .bottom-nav-item.active::before { display: none; }
        .bottom-nav-item.active .bottom-nav-icon-wrap {
            background: rgba(59,157,227,0.15);
            border-radius: 10px;
            padding: 4px 12px;
            margin-bottom: 0;
        }
        .bottom-nav-icon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 6px; border-radius: 10px; transition: background 0.2s; line-height: 1; }
        .bottom-nav-item svg { width: 20px; height: 20px; stroke-width: 1.8; display: block; flex-shrink: 0; }
        .bottom-nav-item.active svg { stroke-width: 2.2; }
        .bottom-nav-item:active { transform: scale(0.92); }
        .bottom-nav-item span { line-height: 1.1; white-space: nowrap; }
        .bottom-nav-item.active .bottom-nav-icon-wrap { padding: 3px 8px; }
        @media (max-width: 389px) {
            .bottom-nav-item { font-size: 0.58rem; padding: 4px 1px; }
            .bottom-nav-item svg { width: 18px; height: 18px; }
            .bottom-nav-icon-wrap { padding: 3px 4px; }
            .bottom-nav-item.active .bottom-nav-icon-wrap { padding: 3px 6px; }
        }
        @media (min-width: 768px) {
            .bottom-nav { display: none; }
            body { padding-bottom: 0 !important; }
        }

        .sos-floating-btn {
            position: fixed;
            bottom: calc(var(--cn-bottom-nav-height) + 16px);
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #ef4444;
            color: white;
            border: 2px solid #fca5a5;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            z-index: 1400;
            box-shadow: 0 2px 12px rgba(239,68,68,0.4);
            display: none;
            align-items: center;
            justify-content: center;
            letter-spacing: 1px;
            transition: bottom 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, transform 0.2s, box-shadow 0.2s;
            animation: sos-pulse 3s infinite;
        }
        .sos-floating-btn:active { transform: scale(0.92); }
        @keyframes sos-pulse {
            0%, 100% { box-shadow: 0 2px 12px rgba(239,68,68,0.4); }
            50% { box-shadow: 0 2px 20px rgba(239,68,68,0.7); }
        }
        /* Show floating buttons only on map page */
        body.on-map-page .sos-floating-btn { display: flex; }
        body.on-map-page .tourist-guide-btn { display: flex; }
        /* Push floating buttons above the bottom sheet when sheet is open */
        body.map-sheet-half .sos-floating-btn { bottom: 356px; }
        body.map-sheet-half .tourist-guide-btn { bottom: calc(356px + 60px); }
        body.map-sheet-expanded .sos-floating-btn,
        body.map-sheet-expanded .tourist-guide-btn { opacity: 0; pointer-events: none; }
        .sos-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            z-index: 10000;
            display: none;
            flex-direction: column;
            background: #0f172a;
            overflow: hidden;
            overscroll-behavior: none;
        }
        .sos-overlay.active { display: flex; }
        body.sos-active { overflow: hidden; }
        .sos-header {
            background: #dc2626;
            padding: 20px 20px 18px;
            padding-top: calc(20px + env(safe-area-inset-top));
            text-align: center;
            flex-shrink: 0;
            position: relative;
        }
        .sos-header-close {
            position: absolute;
            top: calc(10px + env(safe-area-inset-top));
            right: 14px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.18);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            line-height: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .sos-header h2 { color: white; margin: 0; font-size: 1.4rem; font-weight: 700; }
        .sos-header p { color: rgba(255,255,255,0.85); margin: 4px 0 0; font-size: 0.9rem; }
        .sos-body {
            flex: 1;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .sos-card {
            background: #1e293b;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
        }
        .sos-card h3 { color: white; margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }
        .sos-card label { color: #94a3b8; font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 6px; }
        .sos-input {
            width: 100%;
            padding: 14px 16px;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 10px;
            color: white;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 1rem;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 12px;
        }
        .sos-input:focus { border-color: #ef4444; }
        .sos-input::placeholder { color: #6b7280; }
        .sos-save-btn {
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 12px;
            width: 100%;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            min-height: 44px;
        }
        .sos-trigger-btn {
            background: #ef4444;
            color: white;
            border: 2px solid #fca5a5;
            border-radius: 14px;
            padding: 20px;
            width: 100%;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            letter-spacing: 1px;
            margin-top: 8px;
            min-height: 60px;
            position: relative;
            overflow: hidden;
            transition: background 0.2s;
            user-select: none;
            -webkit-user-select: none;
        }
        .sos-trigger-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            width: 0%;
            background: rgba(255,255,255,0.55);
            border-radius: 0 0 12px 12px;
            transition: none;
        }
        .sos-trigger-btn.sos-holding {
            background: linear-gradient(135deg, #dc2626, #7f1d1d);
        }
        .sos-trigger-btn.sos-holding::after {
            width: 100%;
            transition: width 3s linear;
        }
        .sos-trigger-btn:active { transform: scale(0.97); }
        .sos-trigger-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .sos-active-panel {
            background: #991b1b;
            border-radius: 14px;
            padding: 24px;
            text-align: center;
            border: 2px solid #fca5a5;
            animation: sos-active-flash 2s infinite;
        }
        @keyframes sos-active-flash {
            0%, 100% { border-color: #fca5a5; }
            50% { border-color: #ef4444; box-shadow: 0 0 24px rgba(239,68,68,0.35); }
        }
        .sos-active-panel h3 { color: white; font-size: 1.2rem; margin: 0 0 8px; font-weight: 700; }
        .sos-active-panel p { color: rgba(255,255,255,0.85); margin: 4px 0; font-size: 0.9rem; }
        .sos-status-item { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 10px 14px; margin: 8px 0; text-align: left; }
        .sos-status-label { color: #fca5a5; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
        .sos-status-value { color: white; font-size: 1rem; font-weight: 600; margin-top: 2px; }
        .sos-stop-btn {
            background: white;
            color: #dc2626;
            border: none;
            border-radius: 10px;
            padding: 16px;
            width: 100%;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 16px;
            min-height: 48px;
        }
        .sos-close-btn {
            background: rgba(255,255,255,0.1);
            color: white;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 14px;
            width: 100%;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 12px;
            min-height: 48px;
        }

        .pricing-section { max-width: 480px; margin: 32px auto; }
        .pricing-card { background: #1e293b; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid #334155; }
        .pricing-header { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 36px 24px; text-align: center; }
        .pricing-header h2 { font-size: 1.4rem; margin-bottom: 12px; font-weight: 700; }
        .price { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
        .price .currency { font-size: 1.25rem; font-weight: 600; }
        .price .amount { font-size: 3rem; font-weight: 700; line-height: 1; }
        .price .period { font-size: 0.95rem; opacity: 0.85; }
        .features-list { padding: 24px; }
        .feature-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .feature-item:last-child { border-bottom: none; }
        .feature-item .feature-icon { font-size: 1.25rem; flex-shrink: 0; }
        .feature-item .feature-text strong { display: block; color: #f1f5f9; margin-bottom: 4px; font-weight: 600; }
        .feature-item .feature-text p { color: #94a3b8; font-size: 0.85rem; line-height: 1.5; margin: 0; }
        .subscription-actions { padding: 0 24px 24px; text-align: center; }
        .subscribe-btn { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: none; border-radius: 12px; padding: 14px 32px; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; transition: all 0.2s; min-height: 48px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); }
        .subscribe-btn:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); transform: translateY(-1px); }
        .subscribe-btn:active { transform: translateY(0) scale(0.99); }
        .subscription-note { color: #94a3b8; font-size: 0.8rem; margin-top: 12px; line-height: 1.5; }
        .feature-comparison { max-width: 560px; margin: 32px auto; }
        .feature-comparison h3 { text-align: center; margin-bottom: 16px; color: #f1f5f9; font-weight: 700; }
        .comparison-table { background: #1e293b; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.3); border: 1px solid #334155; }
        .comparison-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); align-items: center; }
        .comparison-row:last-child { border-bottom: none; }
        .feature-name { font-weight: 600; color: #cbd5e1; font-size: 0.85rem; }
        .free-feature, .premium-feature { text-align: center; font-size: 0.85rem; }
        .free-feature { color: #64748b; }
        .premium-feature { color: #34d399; font-weight: 600; }
        .checkout-container { max-width: 480px; margin: 32px auto; }
        .checkout-summary { background: #1e293b; border-radius: 16px; padding: 24px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); border: 1px solid #334155; }
        .checkout-summary h3 { margin-bottom: 16px; color: #f1f5f9; font-weight: 700; }
        .summary-item { display: flex; justify-content: space-between; padding: 10px 0; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
        .summary-total { display: flex; justify-content: space-between; padding: 12px 0 6px; font-weight: 700; color: #f1f5f9; font-size: 1.05rem; }
        .billing-note { color: #94a3b8; font-size: 0.8rem; margin-top: 10px; line-height: 1.5; }
        .payment-form { background: #1e293b; border-radius: 16px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); border: 1px solid #334155; }
        .payment-form h3 { margin-bottom: 16px; color: #f1f5f9; font-weight: 700; }
        .payment-btn { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: none; border-radius: 12px; padding: 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; margin-top: 16px; transition: all 0.2s; min-height: 48px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); }
        .payment-btn:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); transform: translateY(-1px); }
        .payment-btn:active { transform: translateY(0) scale(0.99); }
        .security-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: #94a3b8; font-size: 0.8rem; margin-top: 12px; }
        footer a:hover { color: #d1d5db !important; }
        .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
        .plan-card { background: #1e293b; border: 2px solid #334155; border-radius: 16px; padding: 18px 14px; cursor: pointer; transition: all 0.2s; text-align: center; position: relative; }
        .plan-card:hover { border-color: #3B9DE3; box-shadow: 0 4px 16px rgba(59,157,227,0.2); transform: translateY(-2px); }
        .plan-card.selected { border-color: #3B9DE3; background: linear-gradient(135deg, rgba(59,157,227,0.12) 0%, rgba(59,157,227,0.18) 100%); box-shadow: 0 4px 20px rgba(59,157,227,0.25); }
        .plan-badge { display: inline-block; background: #334155; color: #94a3b8; font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
        .plan-badge.popular { background: rgba(251,191,36,0.15); color: #fbbf24; }
        .plan-badge.best { background: rgba(13,148,136,0.15); color: #34d399; }
        .plan-price { font-size: 1.8rem; font-weight: 800; color: #f1f5f9; line-height: 1; }
        .plan-period { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; margin-bottom: 8px; }
        .plan-desc { font-size: 0.78rem; color: #64748b; line-height: 1.4; }
        .plan-card.selected .plan-price { color: #3B9DE3; }

        .section { padding: 2.5rem 0; }
        .section-title { text-align: center; font-size: 1.4rem; font-weight: 700; color: #f1f5f9; margin-bottom: 0.5rem; }
        .section-subtitle { text-align: center; color: #94a3b8; margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.6; }

        .skeleton { background: linear-gradient(90deg, #1e293b 25%, #2d3f55 50%, #1e293b 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .skeleton-text { height: 16px; margin-bottom: 8px; }
        .skeleton-title { height: 24px; width: 60%; margin: 0 auto 12px; }
        .skeleton-card { height: 120px; border-radius: 12px; }
        .skeleton-btn { height: 48px; border-radius: 12px; width: 100%; }

        .page-transition { animation: fadeInUp 0.3s ease-out; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

        .tourist-guide-btn {
            position: fixed;
            bottom: calc(var(--cn-bottom-nav-height) + 80px);
            right: 20px;
            z-index: 998;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 3px 14px rgba(13,148,136,0.45);
            display: none;
            align-items: center;
            justify-content: center;
            transition: bottom 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, transform 0.2s, box-shadow 0.2s;
        }
        .tourist-guide-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,148,136,0.55); }
        .tourist-guide-btn:active { transform: scale(0.92); }
        .tourist-guide-btn svg { width: 22px; height: 22px; }

        .tourist-guide-panel {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: #0f172a; z-index: 1001;
            transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto; -webkit-overflow-scrolling: touch;
        }
        .tourist-guide-panel.active { transform: translateY(0); }

        .tg-header {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            color: white; padding: max(20px, env(safe-area-inset-top)) 20px 0; position: sticky; top: 0; z-index: 10;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .tg-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .tg-header h2 { font-size: 1.15rem; font-weight: 800; margin: 0; letter-spacing: -0.3px; color: #f1f5f9; }
        .tg-header-badge { font-size: 0.65rem; font-weight: 700; background: linear-gradient(135deg,#FF7A00,#FFB347); color: #fff; border-radius: 6px; padding: 2px 7px; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
        .tg-close-btn {
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8;
            width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem;
            cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;
        }
        .tg-close-btn:hover { background: rgba(255,255,255,0.15); }
        .tg-city-label { font-size: 0.8rem; color: #64748b; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
        .tg-city-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF7A00; display: inline-block; }
        .tg-search-input {
            width: 100%; padding: 11px 14px 11px 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.06); color: #f1f5f9; font-size: 0.88rem;
            font-family: 'Inter', system-ui, sans-serif; outline: none; margin-bottom: 4px;
            box-sizing: border-box;
        }
        .tg-search-input::placeholder { color: rgba(255,255,255,0.35); }
        .tg-search-wrap { position: relative; margin-bottom: 14px; }
        .tg-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.4; pointer-events: none; }

        .tg-tabs {
            display: flex; gap: 0; background: transparent; overflow-x: auto;
            scrollbar-width: none; padding: 0 0 0 0; margin-top: 4px;
        }
        .tg-tabs::-webkit-scrollbar { display: none; }
        .tg-tab {
            flex-shrink: 0; padding: 10px 16px 14px; text-align: center; font-size: 0.75rem;
            font-weight: 600; color: #64748b; background: none; border: none;
            border-bottom: 2.5px solid transparent; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; min-height: 52px;
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            transition: color 0.15s; white-space: nowrap; letter-spacing: 0.2px;
        }
        .tg-tab svg { transition: color 0.15s; }
        .tg-tab.active { color: #FF7A00; border-bottom-color: #FF7A00; }
        .tg-tab.active svg { color: #FF7A00; }

        .tg-insider-view { padding: 14px 16px 100px; }
        .tg-insider-section { background: rgba(255,255,255,0.04); border-radius: 16px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
        .tg-insider-section-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; cursor: pointer; user-select: none; }
        .tg-insider-section-header span:first-child { font-size: 0.92rem; font-weight: 700; color: #f1f5f9; }
        .tg-insider-chevron { font-size: 0.75rem; color: #64748b; transition: transform 0.2s; }
        .tg-insider-section.tg-open .tg-insider-chevron { transform: rotate(180deg); }
        .tg-insider-section-body { display: none; padding: 0 16px 16px; color: #94a3b8; }
        .tg-insider-section.tg-open .tg-insider-section-body { display: block; }
        .tg-scam-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; }
        .tg-scam-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
        .tg-scam-text { font-size: 0.86rem; color: #FBBC04; line-height: 1.45; }
        .tg-tipping-table { width: 100%; border-collapse: collapse; margin-top: 4px; margin-bottom: 8px; }
        .tg-tipping-table th { font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 8px; text-align: left; border-bottom: 1px solid #f3f4f6; }
        .tg-tipping-table td { font-size: 0.85rem; color: #374151; padding: 8px 8px; border-bottom: 1px solid #f9fafb; vertical-align: top; }
        .tg-tipping-table tr:last-child td { border-bottom: none; }
        .tg-tipping-table td:first-child { font-weight: 600; color: #111827; width: 38%; }
        .tg-etiquette-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
        .tg-etiquette-chip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 50px; padding: 6px 12px; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
        .tg-etiquette-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; }
        .tg-etiquette-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
        .tg-etiquette-text { font-size: 0.85rem; color: #374151; line-height: 1.45; }
        .tg-insider-subsection-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; margin: 12px 0 6px; }
        .tg-gem-card { background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, #fff 100%); border: 1px solid rgba(251,188,4,0.3); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
        .tg-gem-name { font-size: 0.9rem; font-weight: 700; color: #94a3b8; margin-bottom: 4px; }
        .tg-gem-desc { font-size: 0.8rem; color: #374151; line-height: 1.5; margin-bottom: 8px; }
        .tg-gem-nav-btn { background: linear-gradient(135deg,#3B9DE3,#6BB8EC); border: none; border-radius: 8px; color: #fff; font-size: 0.78rem; font-weight: 700; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
        .tg-gem-nav-btn:hover { opacity: 0.9; }
        .tg-gems-premium-gate { background: rgba(251,188,4,0.06); border: 1px dashed rgba(251,188,4,0.4); border-radius: 12px; padding: 16px; text-align: center; margin-top: 6px; }
        .tg-gems-premium-gate-title { font-size: 0.88rem; font-weight: 700; color: #FBBC04; margin-bottom: 4px; }
        .tg-gems-premium-gate-sub { font-size: 0.78rem; color: #6b7280; margin-bottom: 10px; }
        .tg-upgrade-btn { background: linear-gradient(135deg,#3B9DE3,#6BB8EC); border: none; border-radius: 20px; color: #fff; font-size: 0.85rem; font-weight: 700; padding: 10px 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(59,157,227,0.3); }
        .tg-pass-header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
        .tg-pass-name { font-size: 1rem; font-weight: 700; color: white; }
        .tg-pass-price-val { font-size: 1.6rem; font-weight: 800; color: #3B9DE3; line-height: 1; }
        .tg-pass-duration { font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
        .tg-pass-instruction { font-size: 0.83rem; color: #6b7280; margin-bottom: 10px; }
        .tg-attraction-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
        .tg-attraction-row:last-child { border-bottom: none; }
        .tg-attraction-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #3B9DE3; cursor: pointer; }
        .tg-attraction-name { flex: 1; font-size: 0.88rem; color: #374151; font-weight: 500; }
        .tg-attraction-price { font-size: 0.85rem; font-weight: 700; color: #0d9488; flex-shrink: 0; }
        .tg-pass-totals { background: #f9fafb; border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
        .tg-pass-total-row { display: flex; justify-content: space-between; font-size: 0.87rem; padding: 4px 0; color: #374151; }
        .tg-pass-total-row.bold { font-weight: 700; color: #111827; padding-top: 8px; margin-top: 4px; border-top: 1px solid #e5e7eb; font-size: 0.95rem; }
        .tg-verdict { border-radius: 10px; padding: 12px 16px; margin-top: 12px; font-size: 0.9rem; font-weight: 700; text-align: center; }
        .tg-verdict.neutral { background: #f3f4f6; color: #6b7280; }
        .tg-verdict.win { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
        .tg-verdict.borderline { background: #fefce8; color: #FBBC04; border: 1px solid rgba(251,188,4,0.35); }
        .tg-verdict.lose { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
        .tg-no-data { text-align: center; padding: 40px 20px; color: #9ca3af; }
        .tg-no-data .tg-no-data-icon { font-size: 2.5rem; margin-bottom: 10px; }

        .tg-chips {
            display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto;
            -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .tg-chips::-webkit-scrollbar { display: none; }
        .tg-category-chip {
            flex-shrink: 0; padding: 9px 15px; border-radius: 50px;
            border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #94a3b8;
            font-size: 0.82rem; font-weight: 600; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; white-space: nowrap;
            min-height: 40px; transition: all 0.18s;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .tg-category-chip:active { transform: scale(0.96); }
        .tg-category-chip.active {
            background: rgba(255,122,0,0.15); color: #FF7A00; border-color: rgba(255,122,0,0.4);
        }
        .tg-category-chip svg { flex-shrink: 0; }

        .tg-content { padding: 0 16px 100px; }
        .tg-loading { text-align: center; padding: 40px; color: #475569; font-size: 0.88rem; }

        /* #19 Skeleton loaders for AI Guide nearby cards */
        .tg-skeleton-card {
            background: rgba(255,255,255,0.04); border-radius: 16px; padding: 16px;
            margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.08);
        }
        .tg-skeleton-line {
            height: 14px; border-radius: 6px; margin-bottom: 10px;
            background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
            background-size: 200% 100%; animation: tgSkelShimmer 1.4s ease-in-out infinite;
        }
        .tg-skeleton-line.lg { height: 18px; width: 70%; }
        .tg-skeleton-line.sm { height: 12px; width: 50%; margin-bottom: 14px; }
        .tg-skeleton-line.btn { height: 38px; border-radius: 10px; margin-top: 4px; margin-bottom: 0; }
        @keyframes tgSkelShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
        body.cn-light-home .tg-skeleton-card { background: #FFFFFF !important; border: 1px solid #ECE9E0 !important; }
        body.cn-light-home .tg-skeleton-line { background: linear-gradient(90deg, #F3F1EA 0%, #ECE9E0 50%, #F3F1EA 100%) !important; background-size: 200% 100% !important; }

        /* #22 Accessibility — visible focus rings for keyboard users */
        *:focus { outline: none; }
        button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
            outline: 3px solid rgba(232,89,12,0.55) !important;
            outline-offset: 2px !important;
            border-radius: inherit;
        }
        body.cn-light-home button:focus-visible, body.cn-light-home a:focus-visible, body.cn-light-home input:focus-visible {
            outline-color: rgba(232,89,12,0.7) !important;
        }

        /* Page transition — smooth fade+lift when switching pages */
        @keyframes cnPageEnter {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .cn-page-enter { animation: cnPageEnter 0.22s cubic-bezier(0.22,1,0.36,1) both; }

        .tg-place-card {
            background: rgba(255,255,255,0.04); border-radius: 16px; padding: 16px;
            margin-bottom: 10px; box-shadow: none;
            border: 1px solid rgba(255,255,255,0.08);
            transition: border-color 0.2s, transform 0.15s;
        }
        .tg-place-card:active { transform: scale(0.99); }
        .tg-place-name { font-size: 0.97rem; font-weight: 700; color: #f1f5f9; margin-bottom: 3px; }
        .tg-place-address { font-size: 0.78rem; color: #64748b; margin-bottom: 8px; }
        .tg-place-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
        .tg-stars { color: #f59e0b; font-size: 0.82rem; letter-spacing: 1px; }
        .tg-rating-count { font-size: 0.75rem; color: #475569; }
        .tg-price { color: #34d399; font-weight: 600; font-size: 0.82rem; }
        .tg-distance { font-size: 0.75rem; color: #475569; }
        .tg-place-actions { display: flex; gap: 8px; margin-top: 10px; }
        .tg-navigate-btn {
            flex: 1; background: linear-gradient(135deg,#FF7A00,#FFB347); color: white; border: none; border-radius: 10px;
            padding: 10px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; min-height: 42px;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .tg-navigate-btn:active { opacity: 0.85; }

        .tg-plan-section {
            background: rgba(255,255,255,0.04); border-radius: 14px; padding: 16px; margin-bottom: 12px;
            border: 1px solid rgba(255,255,255,0.07);
        }
        .tg-plan-period {
            font-size: 0.88rem; font-weight: 700; color: #f1f5f9; margin-bottom: 12px;
            display: flex; align-items: center; gap: 8px;
        }
        .tg-plan-item {
            padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex; justify-content: space-between; align-items: center;
        }
        .tg-plan-item:last-child { border-bottom: none; }
        .tg-plan-item-name { font-weight: 600; color: #cbd5e1; font-size: 0.88rem; }
        .tg-plan-item-rating { font-size: 0.8rem; color: #f59e0b; }

        /* Itinerary Builder CSS */
        .tg-builder-view { padding: 16px; }
        .tg-builder-section { margin-bottom: 20px; }
        .tg-builder-label { font-size: 0.78rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
        .tg-interest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .tg-interest-chip {
            padding: 10px 6px; border-radius: 12px; border: 2px solid #e5e7eb;
            background: rgba(255,255,255,0.04); color: #94a3b8; font-size: 0.8rem; font-weight: 600;
            cursor: pointer; text-align: center; font-family: 'Inter', system-ui, sans-serif;
            min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 3px; transition: all 0.15s; border: 1.5px solid rgba(255,255,255,0.08);
        }
        .tg-interest-chip.active { background: rgba(255,122,0,0.15); color: #FF7A00; border-color: rgba(255,122,0,0.4); }
        .tg-interest-chip .ic-emoji { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; flex-shrink: 0; }
        .tg-toggle-row { display: flex; gap: 6px; }
        .tg-toggle-btn {
            flex: 1; padding: 9px 4px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04); color: #94a3b8; font-size: 0.8rem; font-weight: 600;
            cursor: pointer; text-align: center; font-family: 'Inter', system-ui, sans-serif;
            min-height: 44px; transition: all 0.15s;
        }
        .tg-toggle-btn.active { background: rgba(255,122,0,0.15); color: #FF7A00; border-color: rgba(255,122,0,0.4); }
        .tg-build-btn {
            width: 100%; padding: 15px; border-radius: 14px; border: none;
            background: linear-gradient(135deg, #FF7A00, #FFB347);
            color: white; font-size: 1rem; font-weight: 700; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; min-height: 52px;
            box-shadow: 0 4px 16px rgba(59,157,227,0.35); transition: all 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .tg-build-btn:active { transform: scale(0.98); }
        .tg-build-btn:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; }

        /* Itinerary Timeline CSS */
        .tg-itinerary-view { padding: 0 16px 100px; }
        .tg-itinerary-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
        .tg-itinerary-title { font-size: 0.95rem; font-weight: 700; color: #111827; }
        .tg-itinerary-back { background: none; border: none; color: #3B9DE3; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; padding: 6px 0; }
        .tg-timeline-item { display: flex; gap: 12px; margin-bottom: 4px; }
        .tg-timeline-left { display: flex; flex-direction: column; align-items: center; width: 48px; flex-shrink: 0; }
        .tg-timeline-time { font-size: 0.72rem; font-weight: 700; color: #3B9DE3; white-space: nowrap; margin-bottom: 4px; }
        .tg-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: #3B9DE3; flex-shrink: 0; margin-top: 2px; box-shadow: 0 0 0 3px rgba(59,157,227,0.15); }
        .tg-timeline-line { width: 2px; background: linear-gradient(to bottom, #3B9DE3, #e5e7eb); flex: 1; margin-top: 4px; }
        .tg-timeline-card {
            flex: 1; background: white; border-radius: 14px; padding: 14px;
            border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 12px;
        }
        .tg-tl-name { font-size: 0.95rem; font-weight: 700; color: #111827; margin-bottom: 3px; }
        .tg-tl-desc { font-size: 0.78rem; color: #6b7280; margin-bottom: 8px; line-height: 1.4; }
        .tg-tl-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
        .tg-tl-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
        .tg-tl-badge.duration { background: #f0fdf4; color: #16a34a; }
        .tg-tl-badge.rating { background: #fffbeb; color: #d97706; }
        .tg-tl-nav-btn {
            background: linear-gradient(135deg, #3B9DE3, #6BB8EC); color: white; border: none;
            border-radius: 9px; padding: 8px 14px; font-size: 0.8rem; font-weight: 600;
            cursor: pointer; font-family: 'Inter', system-ui, sans-serif;
            display: flex; align-items: center; gap: 5px; min-height: 36px;
        }
        .tg-transit-arrow { text-align: center; padding: 4px 0 4px 60px; color: #9ca3af; font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }

        .off-route-banner {
            position: fixed; top: -200px; left: 0; right: 0; z-index: 1100;
            background: rgba(30, 30, 30, 0.95); backdrop-filter: blur(10px);
            padding: 14px 16px; transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            visibility: hidden;
        }
        .off-route-banner.active { top: 0; visibility: visible; }
        .off-route-banner-text {
            color: #fbbf24; font-size: 0.9rem; font-weight: 600;
            margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
        }
        .off-route-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .off-route-btn {
            padding: 8px 14px; border-radius: 8px; border: none;
            font-size: 0.8rem; font-weight: 600; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; min-height: 38px;
        }
        .off-route-btn.reroute { background: #2563eb; color: white; }
        .off-route-btn.back-route { background: #0d9488; color: white; }
        .off-route-btn.ar-guide { background: #2563eb; color: white; }
        .off-route-btn.sos { background: #dc2626; color: white; }

        .recovery-overlay {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
            background: white; border-radius: 20px 20px 0 0;
            padding: 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .recovery-overlay.active { transform: translateY(0); }
        .recovery-header { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .recovery-instruction { font-size: 0.9rem; color: #374151; padding: 12px; background: #f0fdf4; border-radius: 10px; margin-bottom: 12px; line-height: 1.5; }
        .recovery-close-btn {
            background: #f3f4f6; color: #374151; border: none; border-radius: 10px;
            padding: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
            font-family: 'Inter', system-ui, sans-serif; width: 100%; min-height: 48px;
        }

        .low-gps-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1090;
            background: rgba(59,157,227,0.95); color: #ffffff;
            padding: 8px 16px; font-size: 0.8rem; font-weight: 600;
            text-align: center; transform: translateY(-100%);
            transition: transform 0.3s ease;
        }
        .low-gps-banner.active { transform: translateY(0); }

        @keyframes tg-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes off-route-slide-down { from { top: -80px; } to { top: 0; } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }