:root {
            color-scheme: dark;
            --bg: #140906;
            --panel: rgba(24, 13, 10, 0.84);
            --panel-elevated: linear-gradient(180deg, rgba(58, 31, 21, 0.9), rgba(28, 15, 11, 0.96));
            --panel-strong: rgba(21, 11, 9, 0.96);
            --panel-soft: rgba(46, 24, 18, 0.82);
            --text: #fff4e6;
            --muted: #d2b9a4;
            --muted-strong: #ecd5bf;
            --line: rgba(255, 179, 107, 0.18);
            --accent: #ffb36b;
            --accent-2: #ffd66e;
            --accent-3: #ff8d5c;
            --accent-warm: #ffd39a;
            --safety-red: #ff4d6a;
            --safety-amber: #ffb845;
            --safety-green: #8bd39a;
            --eu-blue: #003399;
            --eu-gold: #ffcc00;
            --corridor-iv: #e67e22;
            --corridor-viii: #3498db;
            --corridor-x: #9b59b6;
            --open: #8bd39a;
            --construction: #f5a842;
            --planned: #8f74ff;
            --closed: #ff5c82;
            --shadow: 0 32px 88px rgba(0, 0, 0, 0.48), 0 12px 32px rgba(0, 0, 0, 0.18);
            --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.32);
            --glow: 0 0 0 1px rgba(255,255,255,0.06), 0 22px 52px rgba(6, 15, 24, 0.38);
            --chrome: rgba(255,255,255,0.05);
            /* Liquid glass layering system */
            --glass-tint: rgba(255, 179, 107, 0.08);
            --glass-surface: rgba(24, 13, 10, 0.8);
            --glass-rim: rgba(255, 255, 255, 0.09);
            --glass-rim-bottom: rgba(0, 0, 0, 0.10);
            --glass-1: blur(12px) saturate(1.06);
            --glass-2: blur(16px) saturate(1.08);
            --glass-3: blur(20px) saturate(1.10);
            /* v8.8: Premium elevation system */
            --shadow-premium: 0 40px 100px rgba(0, 0, 0, 0.52), 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.04);
            --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0) 100%);
            --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-medium: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 15px;
            --radius-sm: 10px;
            --radius-xs: 6px;
            --space-1: 8px;
            --space-2: 12px;
            --space-3: 16px;
            --space-4: 24px;
            --body-font: "IBM Plex Sans", "Segoe UI", sans-serif;
            --display-font: "Exo 2", "Segoe UI", sans-serif;
            --accent-font: "Playfair Display", "Times New Roman", serif;
            --mono-font: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
            --shell-padding: max(20px, env(safe-area-inset-left));
            --shell-padding-right: max(20px, env(safe-area-inset-right));
            --shell-padding-top: max(20px, env(safe-area-inset-top));
            --shell-padding-bottom: max(20px, env(safe-area-inset-bottom));
            --app-height: 100vh;
            --app-height: 100dvh;
            --visual-viewport-height: 100vh;
            --visual-viewport-height: 100dvh;
            --map-height: clamp(420px, 60vh, 820px);
            --map-min-height: 420px;
            /* v8.3: Type scale — fluid sizes */
            --fs-xs: clamp(9px, 0.55rem + 0.1vw, 10px);
            --fs-sm: clamp(10.5px, 0.65rem + 0.12vw, 12px);
            --fs-base: clamp(12px, 0.72rem + 0.15vw, 14px);
            --fs-md: clamp(14px, 0.84rem + 0.18vw, 16px);
            --fs-lg: clamp(18px, 1rem + 0.35vw, 22px);
            --fs-xl: clamp(24px, 1.4rem + 0.6vw, 34px);
            --lh-tight: 1.15;
            --lh-snug: 1.3;
            --lh-normal: 1.5;
        }

        [data-theme="forest"] {
            --bg: #05110d;
            --panel: rgba(7, 21, 16, 0.84);
            --panel-elevated: linear-gradient(180deg, rgba(17, 45, 31, 0.9), rgba(8, 20, 15, 0.96));
            --panel-strong: rgba(7, 19, 14, 0.96);
            --panel-soft: rgba(12, 31, 23, 0.82);
            --text: #eef7f0;
            --muted: #b7d0bc;
            --muted-strong: #d6e9d9;
            --line: rgba(111, 183, 140, 0.18);
            --accent: #77d39b;
            --accent-2: #c3f08f;
            --accent-3: #5ab49a;
            --accent-warm: #efe088;
            --safety-green: #77d39b;
            --open: #77d39b;
            --glass-tint: rgba(119, 211, 155, 0.08);
            --glass-surface: rgba(7, 21, 16, 0.8);
        }

        [data-theme="civic"] {
            --bg: #0c1015;
            --panel: rgba(17, 22, 29, 0.84);
            --panel-elevated: linear-gradient(180deg, rgba(31, 39, 50, 0.9), rgba(16, 21, 29, 0.96));
            --panel-strong: rgba(15, 19, 26, 0.96);
            --panel-soft: rgba(26, 34, 44, 0.82);
            --text: #f6f3ef;
            --muted: #c0bab3;
            --muted-strong: #ddd8d2;
            --line: rgba(240, 125, 87, 0.18);
            --accent: #f07d57;
            --accent-2: #f2b45d;
            --accent-3: #d15f46;
            --accent-warm: #f4c27b;
            --glass-tint: rgba(240, 125, 87, 0.08);
            --glass-surface: rgba(17, 22, 29, 0.8);
        }

        * { box-sizing: border-box; }

        *:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        html, body {
            margin: 0;
            min-height: 100%;
            background:
                radial-gradient(ellipse 140% 80% at 0 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
                radial-gradient(ellipse 120% 80% at 100% 0, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 32%),
                radial-gradient(ellipse 80% 50% at 50% 100%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 42%),
                radial-gradient(ellipse 40% 30% at 20% 60%, color-mix(in srgb, var(--accent-warm) 9%, transparent), transparent 30%),
                radial-gradient(ellipse 60% 40% at 80% 40%, rgba(255, 77, 106, 0.04), transparent 28%),
                linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #000) 0%, color-mix(in srgb, var(--bg) 78%, var(--panel-soft)) 30%, color-mix(in srgb, var(--bg) 60%, var(--panel-soft)) 60%, color-mix(in srgb, var(--bg) 50%, var(--panel-soft)) 100%);
            color: var(--text);
            font-family: var(--body-font);
            font-size: var(--fs-base);
            line-height: var(--lh-normal);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            scroll-behavior: smooth;
            scroll-padding-top: max(80px, 10vh);
            font-variant-numeric: tabular-nums;
        }

        /* v8.9: Enhanced text selection — stronger accent */
        ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
        ::-moz-selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }

        /* v9.0: Calligraphy & symmetry pass — OpenType features, kerning, balanced rag.
           Activates premium ligatures (liga), contextual alternates (calt), stylistic sets,
           true tabular numerals (tnum) for KPI alignment, and lining figures (lnum). */
        html { font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'cv11' 1; font-kerning: normal; }
        body { font-optical-sizing: auto; }
        h1, h2, h3, h4, h5, h6 {
            font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'lnum' 1;
            text-wrap: balance; /* symmetric headline rag where supported */
            letter-spacing: -0.018em;
        }
        h1 { letter-spacing: -0.024em; }
        p, li, dd { text-wrap: pretty; } /* premium paragraph rag, no orphans */
        .num, .kpi, [data-num], time, .tnum, code, kbd, samp {
            font-variant-numeric: tabular-nums lining-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
        }

        body::before {
            opacity: .16;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
            mix-blend-mode: soft-light;
        }

        body::after {
            background:
                radial-gradient(ellipse 60% 40% at 15% 13%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 36%),
                radial-gradient(ellipse 50% 35% at 86% 18%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 32%),
                radial-gradient(ellipse 40% 30% at 50% 50%, color-mix(in srgb, var(--accent-3) 8%, transparent), transparent 30%),
                radial-gradient(ellipse 80% 40% at 50% 102%, color-mix(in srgb, var(--accent-warm) 7%, transparent), transparent 38%);
            opacity: .82;
        }

        body {
            padding: var(--shell-padding-top) var(--shell-padding-right) var(--shell-padding-bottom) var(--shell-padding);
        }

        .access-gate {
            position: fixed;
            inset: 0;
            z-index: 999999;
            display: none;
            place-items: center;
            overflow: hidden;
            background:
                radial-gradient(circle at 18% 18%, rgba(46, 230, 192, 0.16), transparent 30%),
                radial-gradient(circle at 82% 16%, rgba(74, 169, 255, 0.18), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(143, 116, 255, 0.12), transparent 40%),
                linear-gradient(180deg, #041120 0%, #061a2e 46%, #071f36 100%);
            font-family: var(--body-font);
            color: var(--text);
            isolation: isolate;
        }

        .access-gate.is-visible {
            display: grid;
        }

        .access-gate::before,
        .access-gate::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .access-gate::before {
            background-image:
                linear-gradient(rgba(138, 176, 216, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(138, 176, 216, 0.06) 1px, transparent 1px);
            background-size: 54px 54px;
            mask-image: radial-gradient(circle at center, black 32%, transparent 88%);
            opacity: 0.34;
        }

        .access-gate::after {
            background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 52%);
            opacity: 0.45;
        }

        .access-gate-shell {
            position: relative;
            z-index: 1;
            width: min(1120px, calc(100vw - 40px));
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
            gap: 22px;
            align-items: stretch;
        }

        .access-gate-stage,
        .access-gate-panel {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            border: 1px solid rgba(138, 176, 216, 0.18);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255,255,255,0.08);
            backdrop-filter: blur(18px) saturate(1.08);
            -webkit-backdrop-filter: blur(18px) saturate(1.08);
        }

        .access-gate-stage {
            min-height: 560px;
            padding: 34px 34px 30px;
            background:
                linear-gradient(145deg, rgba(18, 40, 66, 0.88), rgba(8, 20, 34, 0.94)),
                radial-gradient(circle at 14% 14%, rgba(46, 230, 192, 0.12), transparent 24%),
                radial-gradient(circle at 86% 20%, rgba(74, 169, 255, 0.12), transparent 26%);
            display: grid;
            align-content: space-between;
            gap: 28px;
        }

        .access-gate-stage::before {
            content: "";
            position: absolute;
            inset: 18px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.06);
            pointer-events: none;
        }

        .access-gate-panel {
            padding: 26px;
            align-self: center;
            background: linear-gradient(180deg, rgba(13, 29, 48, 0.94), rgba(6, 16, 30, 0.98));
        }

        .access-gate-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 1px solid rgba(138, 176, 216, 0.24);
            background: rgba(255,255,255,0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 26px rgba(0,0,0,0.18);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(223, 252, 244, 0.96);
        }

        .access-gate-badge-shield {
            display: inline-grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(46, 230, 192, 0.28), rgba(74, 169, 255, 0.34));
            box-shadow: 0 0 18px rgba(74, 169, 255, 0.18);
            font-size: 14px;
        }

        .access-gate-copy {
            display: grid;
            gap: 16px;
            max-width: 540px;
        }

        .access-gate-kicker {
            color: rgba(184, 220, 255, 0.82);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .access-gate-title {
            margin: 0;
            font-family: var(--display-font);
            font-size: clamp(34px, 4vw, 56px);
            line-height: 0.98;
            letter-spacing: -.05em;
            color: #f6fbff;
            text-wrap: balance;
        }

        .access-gate-title-accent {
            display: block;
            color: #97d2ff;
        }

        .access-gate-description {
            margin: 0;
            max-width: 44ch;
            color: rgba(200, 218, 240, 0.88);
            font-size: 15px;
            line-height: 1.65;
        }

        .access-gate-signals {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .access-gate-signal {
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(138, 176, 216, 0.14);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
            display: grid;
            gap: 6px;
        }

        .access-gate-signal-label {
            color: rgba(176, 200, 228, 0.8);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .access-gate-signal strong {
            font-family: var(--display-font);
            font-size: 22px;
            line-height: 1;
            letter-spacing: -.04em;
            color: #f7fbff;
        }

        .access-gate-signal span {
            color: rgba(192, 208, 233, 0.78);
            font-size: 12px;
            line-height: 1.45;
        }

        .access-gate-spectrum {
            position: relative;
            display: grid;
            gap: 14px;
            padding: 22px;
            border-radius: 24px;
            border: 1px solid rgba(138, 176, 216, 0.14);
            background:
                linear-gradient(180deg, rgba(5, 15, 28, 0.72), rgba(8, 18, 32, 0.9)),
                radial-gradient(circle at 12% 24%, rgba(46, 230, 192, 0.12), transparent 24%),
                radial-gradient(circle at 84% 26%, rgba(74, 169, 255, 0.12), transparent 30%);
        }

        .access-gate-spectrum::after {
            content: "";
            position: absolute;
            inset: auto 20px 18px;
            height: 1px;
            background: linear-gradient(90deg, rgba(46,230,192,0), rgba(46,230,192,0.55), rgba(74,169,255,0.8), rgba(143,116,255,0.48), rgba(46,230,192,0));
            opacity: 0.85;
        }

        .access-gate-spectrum-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 14px;
        }

        .access-gate-spectrum-head strong {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(232, 241, 255, 0.94);
        }

        .access-gate-spectrum-head span {
            font-size: 11px;
            color: rgba(176, 200, 228, 0.74);
        }

        .access-gate-spectrum-bars {
            display: grid;
            grid-template-columns: repeat(16, minmax(0, 1fr));
            align-items: end;
            gap: 6px;
            min-height: 118px;
        }

        .access-gate-spectrum-bars span {
            border-radius: 999px 999px 14px 14px;
            background: linear-gradient(180deg, rgba(122, 220, 255, 0.96), rgba(46, 230, 192, 0.62), rgba(74, 169, 255, 0.26));
            box-shadow: 0 0 16px rgba(74, 169, 255, 0.18);
            opacity: 0.92;
            animation: access-spectrum 2.8s ease-in-out infinite;
            transform-origin: bottom center;
        }

        .access-gate-spectrum-bars span:nth-child(2n) {
            animation-duration: 3.3s;
        }

        .access-gate-spectrum-bars span:nth-child(3n) {
            animation-duration: 2.4s;
        }

        .access-gate-spectrum-bars span:nth-child(4n) {
            animation-delay: -.4s;
        }

        @keyframes access-spectrum {
            0%, 100% { transform: scaleY(0.88); opacity: 0.72; }
            50% { transform: scaleY(1.08); opacity: 1; }
        }

        .access-gate-spectrum-labels {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: rgba(176, 200, 228, 0.68);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .access-gate-panel-copy {
            display: grid;
            gap: 10px;
            margin-bottom: 22px;
        }

        .access-gate-panel-kicker {
            color: rgba(152, 190, 235, 0.78);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .access-gate-panel h2 {
            margin: 0;
            font-family: var(--display-font);
            font-size: 30px;
            line-height: 1;
            letter-spacing: -.05em;
            color: #f7fbff;
        }

        .access-gate-panel p {
            margin: 0;
            color: rgba(186, 205, 230, 0.82);
            font-size: 14px;
            line-height: 1.6;
        }

        .access-gate-form {
            display: grid;
            gap: 14px;
        }

        .access-gate-field {
            display: grid;
            gap: 8px;
        }

        .access-gate-label {
            color: rgba(206, 224, 245, 0.94);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .access-gate-input {
            width: 100%;
            padding: 15px 16px;
            border-radius: 16px;
            border: 1px solid rgba(138, 176, 216, 0.2);
            background: linear-gradient(180deg, rgba(8, 19, 34, 0.96), rgba(11, 24, 42, 0.98));
            color: #f7fbff;
            font-size: 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }

        .access-gate-input::placeholder {
            color: rgba(176, 200, 228, 0.48);
        }

        .access-gate-input:focus {
            outline: none;
            border-color: rgba(74, 169, 255, 0.72);
            box-shadow: 0 0 0 4px rgba(74, 169, 255, 0.16), inset 0 1px 0 rgba(255,255,255,0.05);
            transform: translateY(-1px);
        }

        .access-gate-submit {
            width: 100%;
            min-height: 56px;
            padding: 14px 16px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2) 52%, var(--accent-3));
            color: #f8fcff;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: .02em;
            cursor: pointer;
            box-shadow: 0 18px 40px rgba(37, 99, 235, 0.34);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }

        .access-gate-submit:hover {
            transform: translateY(-2px);
            filter: brightness(1.04);
            box-shadow: 0 22px 48px rgba(37, 99, 235, 0.4);
        }

        .access-gate-submit:active {
            transform: translateY(0) scale(0.98);
        }

        .access-gate-error {
            display: none;
            padding: 11px 13px;
            border-radius: 14px;
            border: 1px solid rgba(255, 77, 106, 0.26);
            background: rgba(255, 77, 106, 0.1);
            color: #ffc5d2;
            font-size: 13px;
            line-height: 1.45;
        }

        .access-gate-error.is-visible {
            display: block;
        }

        .access-gate-footnote {
            margin-top: 16px;
            display: grid;
            gap: 10px;
            color: rgba(168, 192, 222, 0.72);
            font-size: 12px;
            line-height: 1.55;
        }

        .access-gate-preview-note {
            display: none;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px dashed rgba(138, 176, 216, 0.24);
            background: rgba(255,255,255,0.03);
            color: rgba(186, 205, 230, 0.78);
        }

        .access-gate-meta {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: rgba(133, 160, 194, 0.62);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        @media (max-width: 980px) {
            .access-gate-shell {
                grid-template-columns: 1fr;
                width: min(720px, calc(100vw - 28px));
            }

            .access-gate-stage {
                min-height: auto;
            }
        }

        @media (max-width: 640px) {
            .access-gate-shell {
                width: min(100%, calc(100vw - 18px));
                gap: 14px;
            }

            .access-gate-stage,
            .access-gate-panel {
                border-radius: 24px;
            }

            .access-gate-stage {
                padding: 22px 20px;
                gap: 22px;
            }

            .access-gate-panel {
                padding: 20px;
            }

            .access-gate-title {
                font-size: clamp(30px, 10vw, 44px);
            }

            .access-gate-signals {
                grid-template-columns: 1fr;
            }

            .access-gate-spectrum-bars {
                gap: 4px;
                min-height: 90px;
            }

            .access-gate-meta {
                flex-direction: column;
            }
        }

        body.map-gesture-active {
            overflow: hidden;
            overscroll-behavior: none;
        }

        .shell {
            display: grid;
            gap: 10px;
            max-width: 1880px;
            margin: 0 auto;
            min-height: calc(var(--app-height) - var(--shell-padding-top) - var(--shell-padding-bottom));
        }

        /* v8.8: Profile banner — hover lift */
        .profile-banner {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: start;
            padding: 14px 16px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(138, 176, 216, 0.20);
            background: linear-gradient(180deg, rgba(18, 37, 56, 0.74), rgba(10, 21, 34, 0.90));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-soft);
            /* v8.8 perf: compositor-only transition */
            transition: transform .25s var(--transition-smooth);
        }

        .profile-banner:hover {
            transform: translateY(-2px);
            border-color: rgba(138, 176, 216, 0.28);
        }

        .profile-banner-copy {
            display: grid;
            gap: 6px;
        }

        .profile-banner-title {
            font-family: var(--display-font);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -.02em;
        }

        .profile-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .profile-badge {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid rgba(138, 176, 216, 0.2);
            background: rgba(255,255,255,0.06);
            color: #f2f8ff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .profile-badge.accent {
            border-color: rgba(69, 214, 189, 0.38);
            color: #dffcf4;
            background: rgba(69, 214, 189, 0.12);
        }
        button.profile-badge {
            cursor: pointer;
            transition: border-color .15s ease, background .15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        button.profile-badge:hover {
            border-color: rgba(62, 162, 255, 0.4);
            background: rgba(62, 162, 255, 0.12);
        }
        button.profile-badge.active-focus {
            border-color: rgba(62, 162, 255, 0.45);
            color: #b8dcff;
            background: rgba(62, 162, 255, 0.15);
        }

        /* v8.2 perf: only full-surface elements get backdrop-filter; list cards use solid BG */
        .topbar,
        .sidebar,
        .map-stage,
        .headline-strip,
        .panel,
        .floating-card {
            background: var(--glass-surface);
            border: 1px solid var(--line);
            box-shadow: var(--shadow), inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
        }

        /* v8.2 perf: scroll-list items — solid background, no per-card blur layer */
        .kpi,
        .route-card,
        .lot-card {
            background: rgba(8, 22, 40, 0.95);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom);
            contain: content;
            transform: translateZ(0);
        }

        .topbar,
        .sidebar,
        .headline-strip,
        .panel,
        .map-stage,
        .floating-card { border-radius: var(--radius-xl); }
        .route-card,
        .lot-card,
        .kpi { border-radius: var(--radius-lg); }

        .topbar {
            padding: 8px 12px;
            display: grid;
            grid-template-columns: minmax(260px, auto) minmax(0, 1fr) auto;
            grid-template-areas:
                "brand routes actions";
            gap: 10px;
            align-items: center;
            position: sticky;
            top: 8px;
            z-index: 40;
            background: linear-gradient(180deg, rgba(14, 32, 52, 0.84), rgba(6, 16, 28, 0.92));
            border-color: rgba(138, 176, 216, 0.20);
            backdrop-filter: var(--glass-3);
            -webkit-backdrop-filter: var(--glass-3);
            /* v8.8 perf: reduced topbar shadow from 4-layer to 2-layer */
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255,0.10);
            overflow: hidden;
        }

        .topbar::after {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 1.5px;
            background: linear-gradient(90deg, rgba(46,230,192,0), rgba(46,230,192,0.55), rgba(62,162,255,0.70), rgba(143,116,255,0.50), rgba(247,196,116,0.35), rgba(62,162,255,0.55), rgba(46,230,192,0));
            background-size: 200% 100%;
            /* v8.8 perf: slowed from 8s, will-change hint for GPU */
            animation: topbar-shimmer 14s ease-in-out infinite;
            will-change: background-position;
            opacity: .92;
        }
        @keyframes topbar-shimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* v8: Topbar inline KPI chips */
        .topbar-kpis {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .topbar-kpi {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 999px;
            font-family: var(--mono-font);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: .02em;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(142, 178, 232, 0.10);
            white-space: nowrap;
            line-height: 1;
        }
        .topbar-kpi .kpi-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .topbar-kpi .kpi-dot.open { background: var(--open); }
        .topbar-kpi .kpi-dot.construction { background: var(--construction); }
        .topbar-kpi .kpi-dot.planned { background: var(--planned); }

        /* v8: Topbar progress ring */
        .topbar-ring {
            grid-area: ring;
            align-self: center;
            flex-shrink: 0;
            width: 32px;
            height: 32px;
        }
        .topbar-ring svg {
            width: 100%;
            height: 100%;
        }
        .topbar-ring .ring-bg {
            fill: none;
            stroke: rgba(255,255,255,0.06);
            stroke-width: 3;
        }
        .topbar-ring .ring-fill {
            fill: none;
            stroke: var(--accent);
            stroke-width: 3;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
        }
        .topbar-ring-label {
            font-family: var(--mono-font);
            font-size: 8px;
            font-weight: 700;
            fill: var(--text);
            text-anchor: middle;
            dominant-baseline: central;
        }

        /* v8: Quick-search */
        .topbar-search {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
        }
        .topbar-search-input {
            width: 0;
            min-width: 0;
            max-width: 220px;
            padding: 5px 10px 5px 28px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(142, 178, 232, 0.14);
            background: rgba(6, 14, 26, 0.7);
            color: var(--text);
            font-family: var(--body-font);
            font-size: 12px;
            outline: none;
            transition: width .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
            opacity: 0;
        }
        .topbar-search-input:focus,
        .topbar-search.open .topbar-search-input {
            width: 180px;
            opacity: 1;
        }
        .topbar-search-input::placeholder {
            color: var(--muted);
            opacity: .6;
        }
        .topbar-search-btn {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            z-index: 1;
            padding: 0;
            transition: color .15s ease;
        }
        .topbar-search-btn:hover { color: var(--text); }
        .topbar-search-results {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            min-width: 200px;
            max-height: 280px;
            overflow-y: auto;
            border-radius: var(--radius-sm);
            background: var(--panel-strong);
            border: 1px solid rgba(142, 178, 232, 0.18);
            box-shadow: 0 16px 40px rgba(0,0,0,0.3);
            z-index: 100;
            display: none;
            scrollbar-width: thin;
        }
        .topbar-search.open .topbar-search-results.has-results {
            display: block;
        }
        .search-result-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid rgba(142, 178, 232, 0.06);
            transition: background .12s ease;
        }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-item:hover {
            background: rgba(46, 230, 192, 0.08);
        }
        .search-result-item .result-code {
            font-family: var(--mono-font);
            font-size: 10px;
            font-weight: 700;
            color: var(--accent);
            flex-shrink: 0;
            min-width: 36px;
        }
        .search-result-item .result-name {
            font-size: 12px;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
        .search-result-item .result-km {
            font-family: var(--mono-font);
            font-size: 10px;
            color: var(--muted);
            flex-shrink: 0;
            margin-left: auto;
        }
        .search-result-item.active {
            background: rgba(46, 230, 192, 0.12);
        }

        /* v8.1: Command Palette */
        /* v8.8: Cmd palette — deeper glass backdrop */
        .cmd-palette-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(4, 10, 20, 0.72);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
        }
        .cmd-palette-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }
        .cmd-palette {
            position: fixed;
            top: max(12vh, 80px);
            left: 50%;
            transform: translateX(-50%) translateY(12px) scale(0.97);
            width: min(520px, calc(100vw - 32px));
            max-height: min(460px, 60vh);
            border-radius: var(--radius-xl);
            background: linear-gradient(180deg, rgba(16, 34, 56, 0.97), rgba(8, 18, 32, 0.99));
            /* v8.8: Cmd palette — richer border + deeper shadow */
            border: 1px solid rgba(142, 178, 232, 0.25);
            box-shadow: 0 40px 100px rgba(0,0,0,0.60), 0 0 0 1px rgba(46,230,192,0.10), inset 0 1px 0 rgba(255,255,255,0.08);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity .20s ease, transform .20s var(--transition-smooth);
            overflow: hidden;
        }
        .cmd-palette-backdrop.open .cmd-palette {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        .cmd-palette-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            gap: 10px;
            border-bottom: 1px solid rgba(142, 178, 232, 0.10);
        }
        .cmd-palette-icon {
            font-size: 16px;
            opacity: .5;
            flex-shrink: 0;
        }
        .cmd-palette-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text);
            font-family: var(--body-font);
            font-size: 15px;
            letter-spacing: .01em;
            caret-color: var(--accent);
        }
        .cmd-palette-input::placeholder {
            color: var(--muted);
            opacity: .5;
        }
        .cmd-palette-kbd {
            font-family: var(--mono-font);
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(142, 178, 232, 0.14);
            color: var(--muted);
            flex-shrink: 0;
        }
        .cmd-palette-results {
            flex: 1;
            overflow-y: auto;
            padding: 6px;
            scrollbar-width: thin;
        }
        .cmd-palette-group {
            padding: 4px 0;
        }
        .cmd-palette-group-label {
            font-family: var(--mono-font);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 4px 10px 6px;
        }
        .cmd-palette-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background .1s ease;
        }
        .cmd-palette-item:hover,
        .cmd-palette-item.active {
            background: rgba(46, 230, 192, 0.08);
        }
        .cmd-palette-item-icon {
            width: 24px;
            text-align: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        .cmd-palette-item-text {
            flex: 1;
            min-width: 0;
        }
        .cmd-palette-item-title {
            font-size: 13px;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cmd-palette-item-desc {
            font-size: 10px;
            color: var(--muted);
            margin-top: 1px;
        }
        .cmd-palette-item-badge {
            font-family: var(--mono-font);
            font-size: 10px;
            color: var(--muted);
            flex-shrink: 0;
        }
        .cmd-palette-footer {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            border-top: 1px solid rgba(142, 178, 232, 0.08);
            font-family: var(--mono-font);
            font-size: 10px;
            color: var(--muted);
            opacity: .7;
        }
        .cmd-palette-footer kbd {
            font-family: inherit;
            padding: 1px 4px;
            border-radius: 3px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(142, 178, 232, 0.12);
        }

        /* v8.8: Keyboard Shortcuts Overlay — deeper blur */
        .shortcuts-overlay {
            position: fixed;
            inset: 0;
            background: rgba(4, 10, 20, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
        }
        .shortcuts-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }
        .shortcuts-card {
            width: min(480px, calc(100vw - 32px));
            max-height: min(520px, 70vh);
            overflow-y: auto;
            border-radius: var(--radius-xl);
            background: linear-gradient(180deg, rgba(16, 34, 56, 0.97), rgba(8, 18, 32, 0.99));
            border: 1px solid rgba(142, 178, 232, 0.20);
            box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
            padding: 24px;
            display: grid;
            gap: 16px;
            transform: scale(0.96);
            transition: transform .20s var(--transition-smooth);
            scrollbar-width: thin;
        }
        .shortcuts-overlay.open .shortcuts-card {
            transform: scale(1);
        }
        .donation-popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(4, 10, 20, 0.78);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 10010;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s ease;
        }
        .donation-popup-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }
        .donation-popup-card {
            width: min(540px, calc(100vw - 32px));
            border-radius: var(--radius-xl);
            background: linear-gradient(180deg, rgba(15, 31, 50, 0.98), rgba(7, 16, 30, 0.99));
            border: 1px solid rgba(142, 178, 232, 0.22);
            box-shadow: 0 40px 110px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08);
            padding: 24px;
            display: grid;
            gap: 14px;
            transform: translateY(12px) scale(0.97);
            transition: transform .22s var(--transition-smooth);
        }
        .donation-popup-overlay.open .donation-popup-card {
            transform: translateY(0) scale(1);
        }
        .donation-popup-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .donation-popup-kicker {
            font-family: var(--mono-font);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 6px;
        }
        .donation-popup-title {
            font-family: var(--display-font);
            font-size: clamp(24px, 3vw, 30px);
            font-weight: 700;
            line-height: 1.08;
            color: var(--text);
            max-width: 14ch;
        }
        .donation-popup-copy {
            font-size: 14px;
            line-height: 1.65;
            color: var(--muted);
            margin: 0;
        }
        .donation-popup-bullets {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px;
        }
        .donation-popup-bullets li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(142, 178, 232, 0.10);
            font-size: 13px;
            color: var(--text);
        }
        .donation-popup-bullets li::before {
            content: '•';
            color: var(--accent);
            font-size: 18px;
            line-height: 1;
            margin-top: -1px;
        }
        .donation-popup-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .donation-popup-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .03em;
            color: var(--text);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(142, 178, 232, 0.16);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: transform .20s var(--transition-smooth), background .20s ease, border-color .20s ease;
            white-space: nowrap;
        }
        .donation-popup-secondary:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,0.08);
            border-color: rgba(142, 178, 232, 0.24);
        }
        .donation-popup-close {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid rgba(142, 178, 232, 0.16);
            background: rgba(255,255,255,0.04);
            color: var(--text);
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            transition: transform .20s var(--transition-smooth), background .20s ease, border-color .20s ease;
        }
        .donation-popup-close:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,0.08);
            border-color: rgba(142, 178, 232, 0.24);
        }
        .shortcuts-title {
            font-family: var(--display-font);
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
        }
        .shortcuts-group {
            display: grid;
            gap: 6px;
        }
        .shortcuts-group-label {
            font-family: var(--mono-font);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 2px;
        }
        .shortcut-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0;
        }
        .shortcut-label {
            font-size: 13px;
            color: var(--text);
        }
        .shortcut-keys {
            display: flex;
            gap: 4px;
        }
        /* v8.8: Shortcut key pills — more defined */
        .shortcut-key {
            font-family: var(--mono-font);
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(142, 178, 232, 0.22);
            color: var(--muted);
            min-width: 24px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.22);
        }

        /* v8.8 perf: Route pill — compositor-only transition */
        .route-pill {
            min-width: 114px;
            min-height: 46px;
            padding: 7px 11px;
            gap: 4px;
            border: 1px solid rgba(138, 176, 216, 0.18);
            background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
            transition: transform .20s var(--transition-smooth), border-color .20s ease;
        }
        .route-pill:hover {
            transform: translateY(-2px) scale(1.02);
            border-color: rgba(62, 162, 255, 0.35);
        }
        .route-pill:active {
            transform: translateY(0) scale(0.96);
            transition-duration: .06s;
        }
        .route-pill.active {
            animation: pill-select .3s var(--transition-spring);
        }
        @keyframes pill-select {
            0% { transform: scale(0.94); }
            50% { transform: scale(1.04); }
            100% { transform: scale(1); }
        }

        /* v8.8: KPI chip pulse on update — refined */
        .topbar-kpi {
            /* v8.8 perf: compositor-only */
            transition: transform .2s ease, background .2s ease;
        }
        .topbar-kpi.pulse {
            animation: kpi-pulse .45s ease;
        }
        @keyframes kpi-pulse {
            0% { transform: scale(1); background: rgba(255,255,255,0.04); box-shadow: none; }
            35% { transform: scale(1.10); background: rgba(46,230,192,0.14); box-shadow: 0 0 12px rgba(46,230,192,0.15); }
            100% { transform: scale(1); background: rgba(255,255,255,0.04); box-shadow: none; }
        }

        /* v8.1: Ring animated entrance */
        .topbar-ring .ring-fill {
            animation: ring-draw .8s cubic-bezier(.4,0,.2,1) both;
        }
        @keyframes ring-draw {
            from { stroke-dashoffset: 75.4; }
        }

        .headline-strip {
            grid-area: headlines;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            align-self: start;
            align-items: stretch;
        }

        .headline-card {
            min-height: 84px;
            padding: 10px 12px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(120, 154, 211, 0.15);
            background: linear-gradient(180deg, var(--glass-tint), rgba(7, 14, 26, 0.68));
            /* v8.8: Headline — subtle base accent ambient */
            box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom), var(--glow), 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(46,230,192,0.03);
            /* v8.2 perf: no per-card backdrop-filter; headline-strip already composites */
            display: grid;
            align-content: start;
            gap: 6px;
            position: relative;
            overflow: hidden;
            contain: content;
            /* v8.8 perf: compositor-only transition */
            transition: transform .25s var(--transition-smooth), border-color .3s ease;
        }

        .headline-card:hover {
            transform: translateY(-4px) scale(1.008);
            border-color: rgba(62, 162, 255, 0.22);
        }
        .headline-card:active {
            transform: translateY(-1px) scale(0.995);
            transition-duration: 0.08s;
        }

        .headline-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 55%, transparent 60%);
            background-size: 250% 100%;
            background-position: 200% 0;
            transition: background-position .6s ease;
            pointer-events: none;
            border-radius: inherit;
        }
        .headline-card:hover::after {
            background-position: -50% 0;
        }

        .headline-card:nth-child(2)::before {
            background: linear-gradient(180deg, rgba(255,211,138,0.95), rgba(62,162,255,0.78), rgba(143,116,255,0.58));
        }

        .headline-card:nth-child(3)::before {
            background: linear-gradient(180deg, rgba(143,116,255,0.92), rgba(62,162,255,0.78), rgba(46,230,192,0.6));
        }

        @keyframes shell-rise {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

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

        /* R24: Card entrance stagger */
        @keyframes card-enter {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* v8.8 perf: Selection glow — replaced box-shadow animation with border-color (compositor-friendly) */
        @keyframes selection-glow {
            0% { border-color: rgba(46, 230, 192, 0); }
            40% { border-color: rgba(46, 230, 192, 0.38); }
            100% { border-color: rgba(46, 230, 192, 0.22); }
        }

        .route-card, .lot-card {
            animation: card-enter .32s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .route-card.active, .lot-card.active {
            animation: selection-glow .5s ease both;
        }
        /* v6: Safety pulse animation */
        @keyframes safety-pulse {
            0%, 100% { opacity: 0.85; }
            50% { opacity: 1; }
        }

        /* v6: Counter animation */
        @keyframes count-up {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* v6: Gradient text shimmer */
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* v6: EU flag star twinkle */
        @keyframes star-twinkle {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* v6: Progress bar fill */
        @keyframes progress-fill {
            from { width: 0; }
        }

        /* v6: Safety stat highlight */
        .safety-highlight {
            background: linear-gradient(135deg, rgba(255, 77, 106, 0.15), rgba(255, 184, 69, 0.10));
            border: 1px solid rgba(255, 77, 106, 0.25);
            border-radius: var(--radius-md);
            padding: 12px 16px;
        }

        .safety-highlight .stat-value {
            font-family: var(--mono-font);
            font-size: 28px;
            font-weight: 700;
            color: var(--safety-red);
            line-height: 1;
        }

        .safety-highlight .stat-label {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        /* v6: EU funding badge */
        .eu-funding-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            border: 1px solid rgba(0, 51, 153, 0.35);
            background: linear-gradient(135deg, rgba(0, 51, 153, 0.18), rgba(255, 204, 0, 0.08));
            color: #a8c5ea;
        }

        .eu-funding-tag::before {
            content: '★';
            color: #ffcc00;
            font-size: 8px;
            /* v8.8 perf: limited from infinite to 3 iterations */
            animation: star-twinkle 3s ease-in-out 3;
        }

        /* v6: Corridor indicator */
        .corridor-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .corridor-badge.corridor-iv { border-color: rgba(230, 126, 34, 0.4); background: rgba(230, 126, 34, 0.12); color: #f5b77c; }
        .corridor-badge.corridor-viii { border-color: rgba(52, 152, 219, 0.4); background: rgba(52, 152, 219, 0.12); color: #7ebde6; }
        .corridor-badge.corridor-x { border-color: rgba(155, 89, 182, 0.4); background: rgba(155, 89, 182, 0.12); color: #c49be0; }

        /* v6: Improved headline cards with gradient backgrounds */
        .headline-card.safety-card {
            background: linear-gradient(180deg, rgba(255, 77, 106, 0.08), rgba(7, 14, 26, 0.68));
            border-color: rgba(255, 77, 106, 0.20);
        }
        .headline-card.safety-card::before {
            background: linear-gradient(180deg, rgba(255, 77, 106, 0.95), rgba(255, 184, 69, 0.78), rgba(255, 77, 106, 0.60));
        }

        .headline-card.funding-card {
            background: linear-gradient(180deg, rgba(0, 51, 153, 0.08), rgba(7, 14, 26, 0.68));
            border-color: rgba(74, 169, 255, 0.20);
        }
        .headline-card.funding-card::before {
            background: linear-gradient(180deg, rgba(0, 51, 153, 0.95), rgba(255, 204, 0, 0.78), rgba(74, 169, 255, 0.60));
        }

        /* v6: Progress stat with animated bar */
        .v6-progress-stat {
            display: grid;
            gap: 6px;
        }
        .v6-progress-bar {
            height: 6px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            overflow: hidden;
            position: relative;
        }
        .v6-progress-fill {
            position: absolute;
            inset: 0 auto 0 0;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            animation: progress-fill 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        /* v6: Improved map controls */
        .map-tools .toggle {
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .map-tools .toggle:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* v6: Safety impact banner */
        .safety-impact-banner {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 14px;
            padding: 14px 16px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 77, 106, 0.22);
            background: linear-gradient(135deg, rgba(255, 77, 106, 0.06), rgba(255, 184, 69, 0.04), rgba(46, 230, 192, 0.04));
            margin-top: 10px;
        }
        .safety-impact-icon {
            font-size: 28px;
            line-height: 1;
            align-self: center;
        }
        .safety-impact-text {
            display: grid;
            gap: 4px;
        }
        .safety-impact-title {
            font-family: var(--display-font);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--safety-red);
            text-transform: uppercase;
        }
        .safety-impact-copy {
            font-size: 12px;
            line-height: 1.45;
            color: var(--muted);
        }

        /* v8.8: Version badge — accent tint */
        .version-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 999px;
            font-family: var(--mono-font);
            font-size: 9px;
            font-weight: 600;
            color: rgba(46, 230, 192, 0.78);
            background: rgba(46, 230, 192, 0.07);
            border: 1px solid rgba(46, 230, 192, 0.20);
            letter-spacing: 0.08em;
        }


        body:not(.is-ready) .topbar,
        body:not(.is-ready) .workspace,
        body:not(.is-ready) .headline-strip,
        body:not(.is-ready) .legal-strip {
            opacity: 0;
            transform: translateY(18px);
        }

        /* v8.8: Loading spinner — refined stroke weight */
        body:not(.is-ready)::after {
            content: "";
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            border: 2.5px solid rgba(46, 230, 192, 0.18);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spinner-rotate .7s linear infinite;
            z-index: 99999;
            pointer-events: none;
        }
        @keyframes spinner-rotate {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        body.is-ready::after {
            opacity: 0;
            transition: opacity .3s ease;
            pointer-events: none;
        }

        body.is-ready .topbar,
        body.is-ready .workspace,
        body.is-ready .headline-strip,
        body.is-ready .legal-strip {
            animation: shell-rise .56s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        body.is-ready .workspace {
            animation-delay: .06s;
        }

        body.is-ready .headline-strip {
            animation-delay: .12s;
        }

        body.is-ready .legal-strip {
            animation-delay: .18s;
        }

        .headline-card::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 3px;
            background: linear-gradient(180deg, rgba(46,230,192,0.95), rgba(62,162,255,0.8), rgba(143,116,255,0.65));
            opacity: .9;
        }

        .headline-card strong {
            display: block;
            font-size: 16px;
            margin-top: 6px;
            line-height: 1.22;
        }

        /* v8.8 perf: Legal strip — solid BG, no blur (static text only) */
        .legal-strip {
            position: relative;
            z-index: 1;
            padding: 16px 20px;
            border-radius: var(--radius-xl);
            background: linear-gradient(180deg, rgba(17, 34, 52, 0.92), rgba(8, 18, 30, 0.96));
            border: 1px solid rgba(138, 176, 216, 0.18);
            box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom);
        }

        .legal-owner {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed rgba(138, 176, 216, 0.32);
            color: rgba(188, 214, 243, 0.96);
            letter-spacing: .06em;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 10px;
        }

        /* v8.2: Skip link for keyboard/screen-reader users */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 16px;
            z-index: 100000;
            padding: 10px 20px;
            background: var(--accent);
            color: #020b16;
            font-weight: 700;
            font-size: 14px;
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: top .2s;
        }
        .skip-link:focus {
            top: 16px;
        }

        /* v8.2: Screen-reader only live region */
        .sr-live {
            position: absolute;
            width: 1px; height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        /* v8.2: Donation strip */
        .donate-strip {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed rgba(138, 176, 216, 0.18);
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .donate-heart {
            font-size: 18px;
            color: #ff5c82;
            /* v8.8 perf: limited from infinite to 3 iterations */
            animation: heart-pulse 2s ease-in-out 3;
            will-change: transform;
        }
        /* v8.8 perf: Heart pulse — removed filter: drop-shadow (GPU-heavy), use transform-only */
        @keyframes heart-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.18); }
        }
        .donate-strip span:not(.donate-heart) {
            font-size: 12px;
            color: var(--muted);
            flex: 1;
            min-width: 140px;
        }
        .donate-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .03em;
            color: #020b16;
            background: linear-gradient(135deg, var(--accent), #4aa9ff, var(--accent));
            background-size: 300% 300%;
            border: none;
            border-radius: var(--radius-sm);
            text-decoration: none;
            cursor: pointer;
            /* v8.8 perf: compositor-only transition */
            transition: transform .20s var(--transition-smooth), background-position .5s ease;
            white-space: nowrap;
        }
        .donate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(46, 230, 192, 0.32), 0 0 12px rgba(74, 169, 255, 0.15);
            background-position: 100% 100%;
        }
        .donate-btn:active {
            transform: translateY(0) scale(0.97);
            transition-duration: .06s;
        }

        .topbar-donate-btn {
            min-height: 36px;
            padding-inline: 12px;
            gap: 7px;
            border-radius: 999px;
            border: 1px solid rgba(255, 214, 167, 0.22);
            background: linear-gradient(135deg, rgba(255, 179, 107, 0.20), rgba(74, 169, 255, 0.16));
            color: #fff7ee;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 26px rgba(0, 0, 0, 0.22);
            flex-shrink: 0;
        }

        .topbar-donate-btn:hover {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 30px rgba(0, 0, 0, 0.25), 0 0 18px rgba(255, 179, 107, 0.08);
            background: linear-gradient(135deg, rgba(255, 179, 107, 0.26), rgba(74, 169, 255, 0.22));
        }

        .topbar-donate-btn .donate-btn-icon {
            font-size: 12px;
            line-height: 1;
        }

        .topbar-donate-btn .donate-btn-label {
            line-height: 1;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        /* v8.2: Better focus-visible rings for keyboard navigation */
        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        button:focus:not(:focus-visible),
        a:focus:not(:focus-visible),
        select:focus:not(:focus-visible),
        input:focus:not(:focus-visible) {
            outline: none;
        }

        .route-pills {
            grid-area: routes;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: max-content;
            align-items: stretch;
            justify-self: stretch;
            width: 100%;
            max-width: 100%;
            padding: 4px 5px;
            gap: 6px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
            border-radius: calc(var(--radius-lg) - 4px);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(142, 178, 232, 0.12);
            box-shadow: inset 0 1px 0 var(--glass-rim), 0 14px 28px rgba(3, 8, 16, 0.14);
            /* v8.8 perf: removed backdrop-filter from scroll container */
            scrollbar-width: none;
            min-width: 0;
        }

        .route-pills::-webkit-scrollbar { display: none; }

        .brand {
            grid-area: brand;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas:
                "ring eyebrow"
                "ring row"
                "ring helper";
            align-items: center;
            column-gap: 12px;
            row-gap: 2px;
            min-width: 0;
            padding-inline: 2px 10px;
        }

        .brand-row {
            grid-area: row;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            flex-wrap: nowrap;
            min-width: 0;
        }

        /* v8.8: Beta chip — subtle living glow pulse */
        .beta-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid rgba(46,230,192,0.48);
            background: linear-gradient(180deg, rgba(46,230,192,0.24), rgba(27,141,133,0.18));
            color: #dffcf4;
            font-family: var(--display-font);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 20px rgba(3,15,24,0.26);
            user-select: none;
            /* v8.9: extended ambient glow — 5 iterations for lasting life */
            animation: beta-glow 4s ease-in-out 5;
        }
        @keyframes beta-glow {
            0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 20px rgba(3,15,24,0.26); }
            50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 14px rgba(46,230,192,0.20), 0 8px 20px rgba(3,15,24,0.26); }
        }

        .eyebrow {
            color: color-mix(in srgb, var(--muted) 88%, white 12%);
            font-family: var(--display-font);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        h1,h2,h3,p { margin: 0; }
        .brand h1 {
            font-family: var(--accent-font);
            font-size: clamp(18px, 1.7vw, 24px);
            letter-spacing: -.04em;
            line-height: 1.02;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: none;
        }

        .brand .eyebrow {
            grid-area: eyebrow;
            display: block;
            font-size: 9px;
            letter-spacing: .22em;
            opacity: 0.78;
        }

        .brand .helper {
            grid-area: helper;
            display: block;
            max-width: 34ch;
            font-size: 11px;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.82;
        }

        .helper, .tiny, .muted { color: var(--muted); }

        .toolbar,
        .filter-row,
        .legend,
        .detail-pills,
        .status-grid,
        .tabs,
        .selection-meta,
        .panel-list,
        .top-actions,
        .lot-actions { display: flex; flex-wrap: wrap; gap: 8px; }

        .route-pills {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: max-content;
            flex-wrap: nowrap;
            align-items: stretch;
        }

        .top-actions {
            grid-area: actions;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            padding: 5px 10px;
            min-height: 0;
            border-radius: calc(var(--radius-sm) + 2px);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(142, 178, 232, 0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.06), var(--glow);
            -webkit-tap-highlight-color: transparent;
            flex-shrink: 0;
        }

        .top-actions > .donate-btn {
            align-self: center;
        }

        .toolbar-select-block {
            align-self: stretch;
        }

        .control-label {
            color: rgba(192, 208, 233, 0.78);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding-left: 4px;
        }

        .top-actions .control-label {
            display: none;
        }

        /* v9.1: Theme cycle button — single icon, demoted from primary */
        .theme-cycle-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            border: 1px solid rgba(138,176,216,0.22);
            background: linear-gradient(180deg, rgba(15,31,47,0.78), rgba(8,19,30,0.86));
            color: rgba(220,234,255,0.92);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform .12s ease, border-color .15s ease, background .18s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .theme-cycle-btn:hover {
            border-color: rgba(62,162,255,0.5);
            transform: rotate(15deg);
        }
        .theme-cycle-btn:active { transform: scale(0.94); }

        /* v9.1: Compact basemap select */
        .toolbar-select-compact .select-compact {
            font-size: 11px;
            padding: 4px 22px 4px 8px;
            max-width: 140px;
        }

        .top-actions .tabs {
            padding: 3px;
            border-radius: var(--radius-sm);
            background: linear-gradient(180deg, rgba(6, 14, 24, 0.72), rgba(11, 21, 35, 0.52));
            border: 1px solid rgba(136, 172, 229, 0.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        }

        .filter-stack {
            display: grid;
            gap: 10px;
        }

        .filter-copy {
            line-height: 1.45;
        }

        .toggle-group {
            display: grid;
            gap: 8px;
        }

        .toggle-group-label {
            color: var(--muted);
            font-size: 11px;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        @keyframes year-pop {
            0%   { transform: translateX(-50%) scale(0.88); opacity: 0; }
            65%  { transform: translateX(-50%) scale(1.04); }
            100% { transform: translateX(-50%) scale(1);    opacity: 1; }
        }

        @keyframes playback-pulse {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.7; }
        }

        .toggle.playing {
            background: linear-gradient(180deg, rgba(46, 230, 192, 0.22), rgba(46, 230, 192, 0.10));
            border-color: rgba(46, 230, 192, 0.55);
            animation: playback-pulse 1.4s ease-in-out infinite;
        }

        .year-overlay {
            position: absolute;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(3, 8, 18, 0.82);
            color: #fff;
            font-size: clamp(42px, 8vw, 96px);
            font-weight: 900;
            letter-spacing: -3px;
            line-height: 1;
            padding: 8px 32px 8px;
            border-radius: var(--radius-md);
            pointer-events: none;
            z-index: 1200;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.38s ease, visibility 0.38s ease;
            font-variant-numeric: tabular-nums;
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
            border: 1px solid rgba(255,255,255,0.12);
            text-shadow: 0 2px 24px rgba(0,0,0,.6);
        }
        .year-overlay.visible {
            opacity: 1;
            visibility: visible;
            animation: year-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        .year-overlay:not(.visible) {
            transform: translateX(-50%) scale(0.92);
            transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease;
        }
        .year-overlay .year-km-sub {
            display: block;
            font-size: 0.22em;
            font-weight: 500;
            letter-spacing: 0.5px;
            opacity: 0.72;
            margin-top: 2px;
            text-align: center;
        }
        .year-overlay .year-speed-badge {
            display: block;
            font-size: 0.16em;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            opacity: 0;
            margin-top: 5px;
            text-align: center;
            transition: opacity 0.3s ease;
        }
        body.playback-active .year-overlay.visible .year-speed-badge {
            opacity: 0.55;
        }

        .funding-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.70em;
            font-weight: 600;
            border: 1px solid rgba(80,160,255,0.28);
            background: rgba(74,171,255,0.10);
            color: #74b5f8;
            letter-spacing: 0.03em;
            vertical-align: middle;
        }

        /* ── Bottom-centre playback dock — audio-style transport, liquid glass ── */
        .dock-player {
            position: absolute;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%);
            z-index: 1250;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 9px;
            width: min(420px, calc(100vw - 32px));
            padding: 12px 18px 14px;
            border-radius: 20px;
            background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(3,8,18,0.74));
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 18px 44px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.18);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
        }
        .dock-player::after {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
            border-radius: 20px 20px 0 0;
            pointer-events: none;
        }
        .dock-player__year {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            font-variant-numeric: tabular-nums;
            line-height: 1;
            order: 3;
            margin-top: 2px;
        }
        .dock-player__transport {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .dock-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.72);
            cursor: pointer;
            transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
            backdrop-filter: blur(6px);
        }
        .dock-btn svg { width: 16px; height: 16px; }
        .dock-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
        .dock-btn:active { transform: scale(0.93); }
        .dock-btn--play {
            width: 52px;
            height: 52px;
            color: #fff;
            border-color: rgba(120,181,248,0.6);
            background: linear-gradient(160deg, #5bb0ff, #2f6fdb);
            box-shadow: 0 8px 20px -8px rgba(47,111,219,0.8), inset 0 1px 0 rgba(255,255,255,0.3);
        }
        .dock-btn--play svg { width: 22px; height: 22px; }
        .dock-btn--play:hover { background: linear-gradient(160deg, #6dbaff, #3a7be8); color: #fff; }
        .dock-player__range {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 5px;
            border-radius: 999px;
            background: linear-gradient(to right, #5bb0ff 0%, #5bb0ff var(--dock-fill, 100%), rgba(255,255,255,0.16) var(--dock-fill, 100%), rgba(255,255,255,0.16) 100%);
            cursor: pointer;
            outline: none;
        }
        .dock-player__range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #5bb0ff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            cursor: pointer;
        }
        .dock-player__range::-moz-range-thumb {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #5bb0ff;
            cursor: pointer;
        }
        @media (max-width: 640px) {
            .dock-player { bottom: 14px; width: min(340px, calc(100vw - 24px)); padding: 10px 14px 12px; }
            .dock-player__year { font-size: 10px; }
        }

        .playback-km-wrap {
            position: relative;
            height: 22px;
            background: rgba(255, 255, 255, 0.055);
            border-radius: 999px;
            overflow: hidden;
            margin-top: 8px;
            border: 1px solid rgba(255, 255, 255, 0.07);
        }
        .playback-km-fill {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            background: linear-gradient(90deg, rgba(46,230,192,0.68) 0%, rgba(62,162,255,0.82) 100%);
            border-radius: 999px;
            width: 0%;
            transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .playback-km-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255,255,255,0.88);
            letter-spacing: 0.3px;
            pointer-events: none;
        }

        .playback-meta {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .playback-range {
            width: 100%;
            appearance: none;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(62,162,255,0.45), rgba(46,230,192,0.75));
            outline: none;
        }

        .playback-range:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }

        .playback-range::-webkit-slider-thumb {
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #f3fbff;
            border: 2px solid rgba(62,162,255,0.8);
            box-shadow: 0 6px 18px rgba(0,0,0,0.28);
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .playback-range::-webkit-slider-thumb:hover {
            transform: scale(1.22);
            box-shadow: 0 8px 24px rgba(62,162,255,0.4), 0 0 0 6px rgba(62,162,255,0.12);
        }
        .playback-range::-webkit-slider-thumb:active {
            transform: scale(1.1);
            background: var(--accent);
            box-shadow: 0 4px 16px rgba(46,230,192,0.5), 0 0 0 4px rgba(46,230,192,0.2);
        }
        .playback-range::-moz-range-thumb {
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #f3fbff;
            border: 2px solid rgba(62,162,255,0.8);
            box-shadow: 0 6px 18px rgba(0,0,0,0.28);
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .playback-range::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #f3fbff;
            border: 2px solid rgba(62,162,255,0.8);
            box-shadow: 0 6px 18px rgba(0,0,0,0.28);
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
        }
        
        .playback-range::-moz-range-thumb:hover {
            transform: scale(1.18);
            box-shadow: 0 8px 24px rgba(62,162,255,0.4), 0 0 0 4px rgba(62,162,255,0.15);
        }

        @media (pointer: coarse) {
            .playback-range::-webkit-slider-thumb { width: 26px; height: 26px; }
            .playback-range::-moz-range-thumb { width: 26px; height: 26px; }
            .playback-range { height: 8px; }
        }

        .workspace {
            display: grid;
            grid-template-columns: minmax(328px, 392px) minmax(0, 1fr);
            grid-template-areas:
                "sidebar map"
                "sidebar headlines";
            gap: 12px;
            align-items: start;
        }

        body.sidebar-hidden .workspace {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "map"
                "headlines";
        }

        body.sidebar-hidden .sidebar {
            display: none !important;
        }

        /* v4.3: MAJOR SIDEBAR OVERHAUL - Maximum space optimization */
        .sidebar {
            grid-area: sidebar;
            padding: 8px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            min-height: 0;
            position: sticky;
            top: 108px;
            max-height: calc(100dvh - 232px);
            overflow: auto;
            /* v9.0 fluid: stable scrollbar gutter eliminates layout shift on content swap */
            scrollbar-gutter: stable both-edges;
            scroll-behavior: smooth;
            overscroll-behavior: contain;
            /* v9.0 fluid: tag the sidebar for view-transition continuity on tab switches */
            view-transition-name: atlas-sidebar;
            /* v8.8: Sidebar — deeper glass, premium shadow */
            background: linear-gradient(180deg, rgba(12, 26, 44, 0.88), rgba(6, 14, 26, 0.94));
            backdrop-filter: var(--glass-3);
            -webkit-backdrop-filter: var(--glass-3);
            box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom), var(--shadow-premium);
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(138, 176, 216, 0.35) transparent;
        }
        
        .sidebar::-webkit-scrollbar {
            width: 5px;
        }
        
        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(138, 176, 216, 0.35);
            border-radius: 999px;
        }
        
        .sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(138, 176, 216, 0.55);
        }

        /* v4.3: Compact sidebar scroll layout */
        .sidebar-scroll {
            min-height: 0;
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            padding-right: 0;
        }

        .tablet-control-surface,
        .tablet-info-tabs {
            display: none;
        }

        /* v4.3: Optimized tablet cards with compact spacing */
        .tablet-surface-summary,
        .tablet-control-card,
        .tablet-playback-card {
            padding: 12px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(120, 154, 211, 0.10);
            background: linear-gradient(180deg, rgba(16, 32, 50, 0.78), rgba(8, 18, 30, 0.86));
            box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom), var(--shadow-soft);
            backdrop-filter: var(--glass-1);
            -webkit-backdrop-filter: var(--glass-1);
            transition: transform .2s ease, opacity .2s ease;
        }

        /* v4.3: Ultra-compact tablet headers */
        .tablet-surface-heading {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }

        .tablet-surface-heading.tablet-summary-head {
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
        }

        .tablet-surface-heading h3,
        .summary-main h2,
        .panel h3,
        .card-head strong {
            font-family: var(--display-font);
            letter-spacing: -.03em;
            line-height: 1.1;
            font-size: clamp(13px, 1.8vw, 16px);
            margin: 0;
        }

        .tablet-summary-band,
        .summary-main {
            display: grid;
            gap: 6px;
        }

        .summary-main {
            gap: 12px;
        }

        .summary-main > .card-head {
            display: grid;
            gap: 8px;
            justify-content: stretch;
        }

        .summary-main > .card-head .helper {
            max-width: 28ch;
            line-height: 1.45;
        }

        /* v4.3: Compact summary strong text */
        .tablet-surface-summary strong,
        .summary-main strong {
            font-family: var(--display-font);
            font-size: clamp(18px, 2.2vw, 28px);
            line-height: 1;
            font-weight: 700;
        }

        /* v4.3: Compact KPI layout - 2 columns for better space use */
        .tablet-kpi-ribbon {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            margin-top: 0;
        }

        /* v4.3: Highly optimized KPI chips */
        .tablet-kpi-chip {
            padding: 6px 8px;
            border-radius: 10px;
            border: 1px solid rgba(120, 154, 211, 0.12);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            display: grid;
            gap: 2px;
            min-height: 44px;
            align-content: center;
            justify-items: start;
        }

        .tablet-kpi-chip .value {
            font-size: 13px;
            font-weight: 700;
            color: #d4e8ff;
            line-height: 1;
        }

        .tablet-kpi-chip .eyebrow {
            font-size: 8px;
            opacity: 0.65;
            letter-spacing: .08em;
        }

        /* v4.3: Compact cluster layouts */
        .tablet-control-cluster,
        .tablet-surface-lower,
        .tablet-surface-tools {
            display: grid;
            gap: 6px;
        }

        /* v4.3: Optimized control surface */
        .tablet-control-surface {
            position: relative;
            overflow: hidden;  
            overscroll-behavior-y: contain;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(128, 164, 220, 0.35) transparent;
            padding-bottom: 0;
        }

        .tablet-control-surface::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .tablet-control-surface::-webkit-scrollbar-thumb {
            background: rgba(128, 164, 220, 0.35);
            border-radius: 999px;
        }

        .tablet-scroll-cue {
            display: none;
        }

        .tablet-scroll-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 30px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(152, 187, 233, 0.3);
            background: linear-gradient(180deg, rgba(18, 37, 56, 0.92), rgba(10, 22, 35, 0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 10px 26px rgba(4, 11, 19, 0.28);
            color: rgba(228, 240, 255, 0.9);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .tablet-scroll-chevrons {
            display: inline-flex;
            gap: 4px;
        }

        .tablet-scroll-chevrons span {
            width: 7px;
            height: 7px;
            border-right: 2px solid rgba(162, 200, 244, 0.86);
            border-bottom: 2px solid rgba(162, 200, 244, 0.86);
            transform: rotate(45deg);
            opacity: .85;
            /* v8.8 perf: limited from infinite to 3 iterations */
            animation: tablet-scroll-nudge 1.45s ease-in-out 3;
        }

        .tablet-scroll-chevrons span:nth-child(2) {
            animation-delay: .18s;
        }

        @keyframes tablet-scroll-nudge {
            0%, 100% {
                transform: translateY(0) rotate(45deg);
                opacity: .55;
            }
            50% {
                transform: translateY(3px) rotate(45deg);
                opacity: 1;
            }
        }
        
        /* v8.8 perf: Pulsing animation for construction — replaced filter: drop-shadow with opacity-only */
        @keyframes pulse-construction {
            0%, 100% {
                opacity: 0.86;
            }
            50% {
                opacity: 1;
            }
        }
        
        /* v4.1: Shimmer effect for skeleton screens */
        @keyframes skeleton-shimmer {
            0% {
                background-position: -468px 0;
            }
            100% {
                background-position: 468px 0;
            }
        }
        
        /* v4.1: Particle burst for milestones */
        @keyframes particle-burst {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0.3);
                opacity: 0;
            }
        }
        
        /* v4.1: Trail animation for route highlights */
        @keyframes route-trail {
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        /* R10: Videogame-style lot lock-on targeting pulse */
        @keyframes lotLockOn {
            0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.9; }
            60%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0.45; }
            100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
        }
        .lot-lock-on {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid currentColor;
            pointer-events: none;
            z-index: 450;
        }

        /* v7: Premium lot marker glow */
        .lot-marker {
            /* v8.8 perf: compositor-only transition */
            transition: transform .2s cubic-bezier(.22,1,.36,1);
        }
        .lot-marker:hover {
            transform: scale(1.3);
            z-index: 100;
        }
        .lot-marker.selected {
            animation: lotPulse 1.6s ease-in-out infinite;
        }
        @keyframes lotPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        /* v7: Route shield premium styling */
        .route-shield {
            font-family: var(--display-font);
            font-weight: 800;
            font-size: 12px;
            color: #fff;
            background: linear-gradient(135deg, rgba(46,230,192,0.85), rgba(74,169,255,0.9));
            padding: 3px 8px;
            border-radius: 6px;
            border: 1.5px solid rgba(255,255,255,0.2);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(46,230,192,0.15);
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            letter-spacing: 0.06em;
            white-space: nowrap;
            pointer-events: none;
            transition: transform .2s ease;
        }

        /* v7: Segment chip premium styling */
        .segment-chip {
            font-family: var(--mono-font);
            font-size: 10px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(6, 18, 32, 0.94);
            /* v8.8 perf: removed backdrop-filter from small chip */
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 4px 14px rgba(0,0,0,0.28);
            color: var(--text);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            /* v8.8 perf: compositor-only transition */
            transition: transform .15s ease;
        }
        .segment-chip:hover {
            transform: scale(1.06);
        }
        .tent-badge {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 2px 6px;
            border-radius: 4px;
            background: linear-gradient(135deg, rgba(0,105,180,0.25), rgba(0,60,120,0.15));
            color: var(--accent);
            border: 1px solid rgba(0,105,180,0.3);
            margin-left: 6px;
            vertical-align: middle;
            text-transform: uppercase;
        }
        .env-hold-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(239,68,68,0.15);
            color: #ef4444;
            border: 1px solid rgba(239,68,68,0.25);
            margin-left: 6px;
        }
        .env-hold-badge::before {
            content: '\26A0';
            font-size: 10px;
        }
        .tent-card {
            background: var(--glass-1);
            border-radius: 12px;
            padding: 14px;
            border: 1px solid var(--border);
            margin-bottom: 12px;
        }
        .tent-card h4 {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--accent);
            margin-bottom: 10px;
        }
        .tent-corridor-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 12px;
        }
        .tent-corridor-row:last-child { border-bottom: none; }
        .tent-corridor-name { font-weight: 600; flex: 1; }
        .tent-corridor-stats { display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
        .tent-corridor-pct { font-weight: 700; color: var(--accent); min-width: 48px; text-align: right; }
        .tent-progress-bar {
            height: 6px;
            border-radius: 3px;
            background: var(--glass-1);
            overflow: hidden;
            margin-top: 4px;
        }
        .tent-progress-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--accent), #00b4d8);
            transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .segment-chip .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        /* v7.5 perf: GPU-composited lot markers via will-change */
        .lot-marker {
            will-change: transform;
            contain: layout style;
        }
        @media (prefers-reduced-motion: no-preference) {
            .lot-lock-on {
                animation: lotLockOn 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
            }
        }

        /* v9.2: East/West map pan navigation — floating bottom-left overlay */
        .map-pan-nav {
            position: absolute;
            left: 18px;
            bottom: 18px;
            z-index: 61;
            display: flex;
            gap: 8px;
            padding: 7px;
            border-radius: 999px;
            border: 1px solid rgba(138,176,216,0.16);
            background: linear-gradient(180deg, rgba(8,18,30,0.9), rgba(5,12,22,0.96));
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.05);
            pointer-events: auto;
        }
        .pan-btn {
            min-width: 88px;
            height: 38px;
            padding: 0 16px;
            border-radius: 999px;
            border: 1px solid rgba(138,176,216,0.24);
            background: linear-gradient(180deg, rgba(15,31,47,0.94), rgba(8,19,30,0.97));
            color: rgba(200,220,255,0.9);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            transition: background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            appearance: none;
        }
        .pan-btn:hover {
            background: linear-gradient(180deg, rgba(20,40,64,0.96), rgba(10,24,40,0.98));
            border-color: rgba(62,162,255,0.44);
            color: rgba(232,243,255,0.96);
        }
        .pan-btn:active { transform: scale(0.96); }
        body.device-tablet .map-pan-nav { right: 14px; bottom: 14px; }
        body.device-phone .map-pan-nav { display: none; }

        /* v9.3: Stage compass cluster — West / Center / East region filter + fly-to */
        .stage-compass-cluster {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .stage-compass-sep {
            width: 1px;
            align-self: stretch;
            background: rgba(138, 176, 216, 0.18);
            flex-shrink: 0;
            margin: 4px 2px;
        }
        .compass-btn {
            height: 36px;
            padding: 0 13px;
            border-radius: 999px;
            border: 1px solid rgba(138, 176, 216, 0.22);
            background: rgba(10, 22, 40, 0.55);
            color: rgba(170, 205, 250, 0.76);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .055em;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            white-space: nowrap;
            transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            appearance: none;
            user-select: none;
        }
        .compass-btn span { display: inline-block; }
        .compass-center-icon { font-size: 13px; line-height: 1; opacity: 0.85; }
        .compass-btn:hover {
            border-color: rgba(82, 168, 255, 0.44);
            color: rgba(220, 238, 255, 0.95);
            background: rgba(20, 44, 72, 0.7);
            box-shadow: 0 0 10px rgba(62, 162, 255, 0.1);
        }
        .compass-btn:active { transform: scale(0.93); }
        .compass-btn.active {
            border-color: rgba(82, 168, 255, 0.62);
            background: linear-gradient(135deg, rgba(62, 142, 255, 0.14), rgba(42, 102, 200, 0.1));
            color: rgba(228, 243, 255, 1);
            box-shadow: 0 0 14px rgba(62, 162, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
        body.device-phone .stage-compass-cluster { display: none; }

        /* v9.3: Compass cluster inside the horizontal quick-presets grid — one grid item */
        .map-stage-quick-presets .stage-compass-cluster { height: 58px; padding: 0 6px; }
        .map-stage-quick-presets .stage-compass-sep { margin: 8px 4px; }
        .map-stage-quick-presets .compass-btn { height: 42px; padding: 0 14px; font-size: 11px; }
        .map-stage-quick-presets .compass-btn .compass-center-icon { font-size: 14px; }

        /* R16: Phone nav strip — compact East/West + Zen between quickbar and map */
        /* v8.8: Phone nav strip — deeper glass + richer press states */
        .phone-nav-strip { display: none; }
        body.device-phone .phone-nav-strip {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) 34px minmax(0, 0.96fr) 40px;
            align-items: center;
            gap: 6px;
            padding: 5px 8px 7px;
            background: linear-gradient(180deg, rgba(8,18,30,0.97), rgba(5,12,22,0.99));
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            border-top: 1px solid rgba(138,176,216,0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            position: relative;
            z-index: 65;
        }
        body.device-phone .phone-nav-btn {
            appearance: none;
            min-height: 40px;
            padding: 7px 10px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(138,176,216,0.18);
            background: linear-gradient(180deg, rgba(15,31,47,0.94), rgba(8,19,30,0.97));
            /* v8.9: removed backdrop-filter, enlarged touch target (36px min) */
            color: rgba(200,220,255,0.85);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .04em;
            cursor: pointer;
            white-space: nowrap;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            transition: border-color .12s, background .12s, transform .08s;
        }
        body.device-phone .phone-nav-btn:active { transform: scale(0.88); background: linear-gradient(180deg, rgba(20,42,65,0.96), rgba(10,24,40,0.98)); transition-duration: .04s; }
        body.device-phone .phone-nav-btn:hover { border-color: rgba(62,162,255,0.38); }
        body.device-phone #phone-nav-west {
            justify-content: flex-start;
            padding-left: 12px;
        }
        body.device-phone #phone-nav-east {
            justify-content: flex-end;
            padding-right: 12px;
        }
        body.device-phone .phone-nav-btn.phone-nav-center {
            min-height: 34px;
            font-size: 15px;
            padding: 0;
            border-radius: 999px;
            border-color: rgba(92,169,255,0.32);
            color: rgba(180,215,255,0.78);
            line-height: 1;
            box-shadow: 0 0 12px rgba(92,169,255,0.08);
        }
        body.device-phone .phone-nav-btn.phone-nav-center:hover,
        body.device-phone .phone-nav-btn.phone-nav-center:active {
            border-color: rgba(46,230,192,0.55);
            color: rgba(180,255,235,1);
            box-shadow: 0 0 16px rgba(46,230,192,0.16);
        }
        body.device-phone .phone-nav-btn.phone-nav-zen {
            min-height: 40px;
            font-size: 13px;
            padding: 0;
            border-radius: var(--radius-md);
        }
        body.device-phone .phone-nav-btn span {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.device-phone.phone-zen-mode .phone-nav-strip { display: none !important; }

        /* v4.1: Skeleton loading screens */
        .skeleton {
            background: linear-gradient(90deg, 
                rgba(20,38,57,0.3) 0px, 
                rgba(62,162,255,0.12) 40px, 
                rgba(20,38,57,0.3) 80px);
            background-size: 600px;
            animation: skeleton-shimmer 1.6s ease-in-out infinite;
            border-radius: 8px;
            min-height: 18px;
        }
        
        .skeleton-card {
            padding: 16px;
            border-radius: 18px;
            border: 1px solid rgba(120,154,211,0.1);
            background: linear-gradient(180deg, rgba(20,38,57,0.6), rgba(9,20,32,0.7));
        }
        
        .skeleton-text {
            height: 14px;
            margin-bottom: 8px;
            border-radius: 6px;
        }
        
        .skeleton-text.large {
            height: 24px;
            width: 70%;
        }
        
        .skeleton-text.medium {
            height: 18px;
            width: 50%;
        }
        
        .skeleton-text.small {
            width: 30%;
        }

        .tablet-control-cluster {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .tablet-surface-lower {
            grid-template-columns: minmax(300px, 1.1fr) minmax(0, 1fr);
            align-items: start;
        }

        .tablet-surface-tools {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .tablet-map-preset-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .tablet-info-tabs {
            gap: 12px;
            padding: 16px;
            border-radius: var(--radius-xl);
            border: 1px solid rgba(120, 154, 211, 0.10);
            background: linear-gradient(180deg, rgba(12, 26, 42, 0.76), rgba(7, 14, 26, 0.84));
            box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-soft);
            backdrop-filter: var(--glass-1);
            -webkit-backdrop-filter: var(--glass-1);
        }

        .tablet-tab-row {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
        }

        .tablet-info-tab {
            min-height: 46px;
            padding: 8px;
            justify-content: center;
            font-size: 11px;
            display: grid;
            gap: 2px;
            justify-items: start;
            text-align: left;
            cursor: pointer;
            transition: transform .15s ease, background .15s ease, border-color .15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        
        .tablet-info-tab:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(62,162,255,0.24);
        }
        
        .tablet-info-tab:active {
            transform: scale(0.94);
            transition-duration: .06s;
            background: rgba(255,255,255,0.04);
        }
        
        .tablet-info-tab:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }

        .tablet-tab-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            line-height: 1.25;
        }

        .tablet-tab-metric {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: -.01em;
            line-height: 1.3;
            color: #eef6ff;
        }

        .notes-body {
            display: grid;
            gap: 12px;
        }

        .note-block {
            padding: 14px 15px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(120, 154, 211, 0.14);
            background: rgba(255, 255, 255, 0.025);
            line-height: 1.55;
        }

        .panel-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 28px 16px;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
            min-height: 80px;
            border-radius: var(--radius-md);
            border: 1px dashed rgba(120, 154, 211, 0.16);
            background: rgba(255,255,255,0.015);
        }

        .panel-empty-icon {
            font-size: 22px;
            opacity: 0.6;
        }

        .audit-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 5px 10px;
            font-size: 11px;
            border: 1px solid rgba(120, 154, 211, 0.18);
            background: rgba(255,255,255,0.04);
            color: var(--muted);
        }

        .audit-badge.strong {
            color: #dff8f2;
            border-color: rgba(46, 230, 192, 0.35);
            background: rgba(46, 230, 192, 0.10);
        }

        .summary-card {
            padding: 18px 18px 16px;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(16, 34, 56, 0.9), rgba(8, 17, 31, 0.9));
            border: 1px solid rgba(120, 160, 220, 0.16);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.08), var(--shadow-soft), 0 14px 34px rgba(0, 0, 0, 0.16);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
            position: relative;
            overflow: hidden;
            contain: content;
        }

        .summary-card::before {
            content: "";
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(46,230,192,0.75), rgba(62,162,255,0.58), rgba(255,255,255,0));
            opacity: 0.7;
            pointer-events: none;
        }

        .panel {
            contain: content;
        }
        .summary-card::after,
        .panel::after {
            content: "";
            position: absolute;
            inset: auto -12% -32% auto;
            width: 120px;
            height: 120px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255,255,255,0.06), rgba(255,255,255,0));
            pointer-events: none;
        }

        .summary-main {
            display: grid;
            gap: 10px;
        }

        .summary-main strong {
            font-size: clamp(34px, 3.2vw, 46px);
            letter-spacing: -.05em;
            line-height: 0.96;
        }

        .summary-main .row {
            align-items: center;
            padding-inline: 1px;
        }

        /* v8.8: Progress bar — taller track, richer shimmer */
        .progress-track {
            width: 100%;
            height: 9px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--accent), #4ecbff, #6ce8d0, #9afde8);
            border-radius: inherit;
            transition: width .5s cubic-bezier(.22,1,.36,1);
            position: relative;
            overflow: hidden;
            will-change: width;
        }
        .progress-fill::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            animation: progress-shimmer 1.8s ease-in-out infinite;
            will-change: transform;
        }
        @keyframes progress-shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .progress-mini {
            width: 100%;
            height: 7px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-mini > span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), #4ecbff, #6ce8d0, #9afde8);
        }

        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .kpi {
            padding: 12px;
            min-height: 84px;
            display: grid;
            align-content: start;
            gap: 4px;
            contain: content;
            transition: border-color .25s ease;
        }
        .kpi .value {
            font-family: var(--display-font);
            font-size: clamp(22px, 1.35vw, 25px);
            font-weight: 800;
            line-height: 1.05;
            margin-top: 4px;
            font-variant-numeric: tabular-nums;
        }
        /* v8.8 perf: compositor-only transition */
        .kpi.interactive { cursor: pointer; transition: transform .20s var(--transition-smooth), border-color .20s ease; }
        .kpi.interactive:hover { transform: translateY(-3px); border-color: rgba(62, 162, 255, 0.42); }
        .kpi.interactive.active {
            background: linear-gradient(180deg, rgba(14, 34, 50, 0.86), rgba(6, 16, 28, 0.92));
            border-color: rgba(46, 230, 192, 0.42);
        }

        .pill,
        .chip,
        .toggle,
        .select,
        .status-pill,
        .micro,
        .route-pill,
        .tab {
            border-radius: 999px;
            border: 1px solid rgba(120, 154, 211, 0.18);
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
            color: var(--text);
            padding: 8px 12px;
            font-size: 12.5px;
            transition: .18s cubic-bezier(.4,0,.2,1);
            box-shadow: inset 0 1px 0 var(--glass-rim), 0 10px 24px rgba(4, 10, 18, 0.18);
            /* v8.2 perf: lightweight blur on small controls — reduced from glass-1 (12px) */
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .chip,
        .toggle,
        .route-pill,
        .tab { cursor: pointer; }
        /* v8.9: restored subtle hover shadow (≤8px blur, compositor-safe) */
        .chip:hover,.toggle:hover,.route-pill:hover,.route-card:hover,.lot-card:hover,.tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-2) 42%, transparent); box-shadow: inset 0 1px 0 var(--glass-rim), 0 6px 16px color-mix(in srgb, var(--accent-2) 14%, transparent); }
        .route-card:hover,.lot-card:hover { will-change: transform; background: rgba(10, 26, 46, 0.97); }
        .route-card:active,.lot-card:active { transform: scale(0.975); transition-duration: .05s !important; }

        /* v8.8: Card entry — spring scale for premium feel */
        @keyframes card-fadein {
            from { opacity: 0; transform: translateY(10px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .route-card, .lot-card { animation: card-fadein 0.35s var(--transition-smooth) both; }
        .route-card:nth-child(2), .lot-card:nth-child(2) { animation-delay: .05s; }
        .route-card:nth-child(3), .lot-card:nth-child(3) { animation-delay: .10s; }
        .route-card:nth-child(4), .lot-card:nth-child(4) { animation-delay: .15s; }
        .route-card:nth-child(5), .lot-card:nth-child(5) { animation-delay: .20s; }
        .route-card:nth-child(n+6), .lot-card:nth-child(n+6) { animation-delay: .25s; }

        /* v8.8 perf: content-visibility for off-screen cards — skip rendering below fold */
        .route-card:nth-child(n+8), .lot-card:nth-child(n+8) {
            content-visibility: auto;
            contain-intrinsic-size: 0 120px;
        }

        /* v8.8: Active control — stronger accent glow */
        .chip.active,.toggle.active,.route-pill.active,.tab.active {
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 18%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
            border-color: color-mix(in srgb, var(--accent-2) 44%, transparent);
            color: #fff9f1;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 28px color-mix(in srgb, var(--accent-2) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
        }
        .select { appearance: none; cursor: pointer; }
        
        button, .tab, .chip, .toggle, .route-pill, .phone-action {
            -webkit-tap-highlight-color: transparent;
        }
        
        button:focus-visible, .tab:focus-visible, .chip:focus-visible, .toggle:focus-visible, .route-pill:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        
        button:active, .tab:active, .chip:active, .toggle:active {
            transform: scale(0.97);
            transition-duration: .05s !important;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 11.5px;
            letter-spacing: .03em;
            min-height: 40px;
        }

        .status-pill .dot {
            box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 14px rgba(74, 169, 255, 0.28);
        }

        .status-pill .dot-symbol {
            font-size: 10px;
            margin-left: -4px;
            opacity: 0.7;
        }

        .legend .status-pill {
            cursor: pointer;
            transition: opacity .2s ease, transform .15s ease;
        }

        .legend .status-pill:not(.active) {
            opacity: 0.38;
            transform: scale(0.96);
        }

        .legend .status-pill.active {
            opacity: 1;
            transform: scale(1);
        }

        .legend .status-pill:hover {
            opacity: 1;
            transform: translateY(-1px);
        }

        .route-pill {
            min-width: 0;
            min-width: 100px;
            min-height: 38px;
            padding: 5px 10px;
            display: grid;
            gap: 2px;
            align-content: center;
            text-align: left;
            scroll-snap-align: start;
            background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 24px rgba(6, 12, 22, 0.16);
            position: relative;
            overflow: hidden;
        }

        .route-pill::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.08), rgba(255,255,255,0));
            opacity: 0;
            transform: translateX(-120%);
            transition: transform .5s ease, opacity .22s ease;
            pointer-events: none;
        }

        .route-pill:hover::after,
        .route-pill.active::after {
            opacity: 1;
            transform: translateX(120%);
        }

        .route-pill .meta {
            font-size: 10.5px;
            letter-spacing: .04em;
            color: rgba(200, 218, 240, 0.82);
        }

        .route-pill-progress {
            width: 100%;
            height: 4px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
            margin-top: 2px;
        }

        .route-pill-progress > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--accent-3));
            box-shadow: 0 0 12px rgba(62, 162, 255, 0.3);
        }

        .route-pill.active .meta {
            color: rgba(233, 248, 255, 0.92);
        }

        .tab {
            min-width: 52px;
            justify-content: center;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: transparent;
            box-shadow: none;
            padding: 7px 10px;
            font-size: 11px;
        }

        .top-actions .tab.active {
            background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 20%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent);
        }

        .top-actions .select {
            width: 100%;
            min-height: 38px;
            padding: 7px 30px 7px 11px;
            font-size: 12px;
        }

        .toggle {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 42px;
        }

        .toggle.stage-toggle {
            min-width: 132px;
            padding: 11px 13px;
            background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
        }

        .toggle.stage-toggle.active {
            border-color: rgba(136, 210, 255, 0.55);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 32px rgba(24, 113, 155, 0.22);
        }

        .toggle.stage-toggle .label-stack {
            display: grid;
            gap: 2px;
            text-align: left;
        }

        .toggle.stage-toggle .label-stack strong {
            font-size: 12px;
        }

        .toggle.stage-toggle .label-stack span {
            color: var(--muted);
            font-size: 10px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .route-pill .code {
            font-family: var(--display-font);
            font-size: 9.5px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            font-variant-numeric: tabular-nums;
            opacity: 0.82;
        }

        .route-pill .label {
            font-size: 13px;
            font-weight: 650;
            letter-spacing: -.016em;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .chip:focus-visible,
        .toggle:focus-visible,
        .route-pill:focus-visible,
        .tab:focus-visible,
        .map-preset:focus-visible,
        .selection-clear:focus-visible,
        .top-actions .select:focus-visible {
            outline: 2px solid rgba(92, 169, 255, 0.75);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(92, 169, 255, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
        }

        .map-stage {
            grid-area: map;
            position: relative;
            padding: 14px;
            overflow: hidden;
            min-height: var(--map-min-height);
            background:
                radial-gradient(circle at 12% 10%, rgba(92, 169, 255, 0.14), transparent 26%),
                radial-gradient(circle at 88% 12%, rgba(69, 214, 189, 0.14), transparent 24%),
                radial-gradient(circle at 50% 50%, rgba(143, 116, 255, 0.06), transparent 40%),
                linear-gradient(180deg, rgba(10, 22, 36, 0.80), rgba(5, 12, 22, 0.92));
            border-color: rgba(138, 176, 216, 0.18);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
            box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom), 0 28px 74px rgba(0,0,0,0.28);
        }

        .map-stage::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(138, 176, 216, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(138, 176, 216, 0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.2;
        }

        .map-stage::after {
            content: "© Veliko Dimitrov";
            position: absolute;
            right: 18px;
            bottom: 12px;
            z-index: 2;
            pointer-events: none;
            font-family: var(--display-font);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(176, 208, 242, 0.42);
            text-shadow: 0 1px 8px rgba(0,0,0,0.45);
            mix-blend-mode: screen;
            user-select: none;
        }

        .map-stage-quickbar {
            display: none;
            position: relative;
            z-index: 3;
            margin-bottom: 10px;
            padding: 8px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(136, 172, 229, 0.12);
            background: linear-gradient(180deg, rgba(10, 20, 34, 0.80), rgba(7, 14, 26, 0.84));
            box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-soft);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
            gap: 12px;
        }

        .map-stage-quickbar::after {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(41, 212, 192, 0.52), rgba(74, 169, 255, 0.46), transparent);
            pointer-events: none;
        }

        .map-stage-quick-presets {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(150px, max-content);
            gap: 12px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
        }

        .map-stage-quick-presets::-webkit-scrollbar {
            display: none;
        }

        .map-stage-quickbar .toggle.stage-toggle {
            min-width: 150px;
            min-height: 58px;
            padding: 12px 14px;
            scroll-snap-align: start;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 24px rgba(3, 10, 18, 0.18);
            justify-content: space-between;
        }

        .desktop-map-dock {
            display: none;
            position: relative;
            z-index: 3;
            gap: 12px;
            padding: 12px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(136, 172, 229, 0.16);
            background: linear-gradient(180deg, rgba(9, 18, 31, 0.92), rgba(6, 12, 23, 0.88));
            /* v8.9: elevation shadow for visual separation from map */
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.28);
            backdrop-filter: blur(10px) saturate(1.06);
            align-items: center;
        }

        .desktop-map-dock-main {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            flex: 1 1 auto;
        }

        .desktop-map-dock .legend {
            justify-content: flex-end;
            flex: 0 0 auto;
            max-width: 44%;
        }

        .desktop-map-dock .legend .status-pill {
            min-height: 38px;
            padding: 8px 12px;
        }

        .map-stage::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 42%),
                linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%, transparent 72%, rgba(0,0,0,0.22));
            opacity: .85;
        }

        #map {
            width: 100%;
            height: var(--map-height);
            min-height: var(--map-min-height);
            border-radius: calc(var(--radius-xl) - 2px);
            border: 1px solid rgba(136, 172, 229, 0.3);
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 50px rgba(0, 0, 0, 0.27), 0 0 0 1px rgba(46,230,192,0.08);
            transform: translateZ(0);
            isolation: isolate;
            will-change: transform;
            contain: layout style;
            touch-action: pan-x pan-y;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: 2px solid transparent;
            outline-offset: -2px;
            position: relative;
        }
        #map::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: conic-gradient(from 0deg, rgba(46,230,192,0.2), rgba(74,169,255,0.2), rgba(143,116,255,0.2), rgba(46,230,192,0.2));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }
        #map:hover::before {
            opacity: 1;
        }
        /* v8.8: Map border breathing pulse — slightly brighter peak */
        @keyframes map-border-breathe {
            0%, 100% { border-color: rgba(136, 172, 229, 0.30); }
            50% { border-color: rgba(46, 230, 192, 0.28); }
        }
        /* v8.9: map border breathing — extended to 5 iterations for ambient life */
        #map { animation: map-border-breathe 10s ease-in-out 5; }
        
        #map:focus-visible {
            outline: 3px solid rgba(62, 162, 255, 0.85);
            outline-offset: 2px;
        }

        /* v7: Smooth tile crossfade */
        .atlas-tile {
            transition: opacity 0.25s ease-in-out !important;
        }
        .leaflet-fade-anim .atlas-tile {
            will-change: opacity;
        }

        /* v8.9: Premium scrollbar with glow */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(164, 190, 219, 0.25); border-radius: 999px; transition: background .15s ease; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(164, 190, 219, 0.45); }
        ::-webkit-scrollbar-corner { background: transparent; }
        * { scrollbar-width: thin; scrollbar-color: rgba(164, 190, 219, 0.25) transparent; }

/* v8.9: Smooth scroll + snap for card lists */
        .sidebar-scroll, .tablet-control-surface { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
        .sidebar-scroll { scroll-snap-type: y proximity; }
        .route-card, .lot-card { scroll-snap-align: start; scroll-margin-top: 8px; }

        /* v8.2 perf: promote sidebar/scroll containers to their own GPU layer */
        .sidebar { isolation: isolate; transform: translateZ(0); }
        .sidebar, .sidebar-scroll, .tablet-control-surface { will-change: unset; }
        .sidebar-scroll { contain: layout; }

        /* v7: GPU acceleration for animated elements */
        .floating-card, .headline-card, .route-pill, .lot-marker, .segment-chip, .dynamic-island {
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* v7: Reduced motion safeguard for ALL animations */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .atlas-tile { transition: none !important; }
            /* v8.9: Cancel hover transforms for motion-sensitive users */
            .chip:hover, .toggle:hover, .route-pill:hover,
            .route-card:hover, .lot-card:hover, .tab:hover,
            .lot-marker:hover, .map-preset:hover { transform: none !important; }
        }

        /* v8.9: Panel entrance animation */
        @keyframes panel-entrance {
            from { opacity: 0; transform: translateY(6px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        @media (prefers-reduced-motion: no-preference) {
            ::view-transition-old(root),
            ::view-transition-new(root) {
                animation: none;
            }

            ::view-transition-group(atlas-sidebar) {
                animation-duration: .32s;
                animation-timing-function: var(--transition-smooth);
            }
        }

        .floating-card {
            position: absolute;
            z-index: 2;
            background: var(--glass-surface);
            padding: 16px;
            border-color: rgba(132, 169, 227, 0.17);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 var(--glass-rim-bottom), var(--shadow-premium);
            -webkit-backdrop-filter: var(--glass-2);
            backdrop-filter: var(--glass-2);
            transition: opacity .25s var(--transition-smooth), transform .3s var(--transition-smooth), width .28s ease, max-height .35s ease;
            transform: translate3d(0,0,0);
            border-radius: calc(var(--radius-xl));
            animation: panel-entrance .3s var(--transition-smooth) both;
            contain: layout style;
        }
        
        /* FALLBACK: For browsers without backdrop-filter support */
        @supports not (backdrop-filter: blur(26px)) {
            .atlas-shell {
                background: linear-gradient(180deg, rgba(10, 22, 35, 0.94), rgba(7, 14, 24, 0.98));
            }
            .floating-card {
                background: rgba(11, 24, 40, 0.96);
            }
            .map-stage-quickbar,
            .map-stage-quickbar.glass-enhanced {
                background: linear-gradient(135deg, rgba(10, 20, 34, 0.92), rgba(7, 14, 26, 0.96));
                border-color: rgba(255,255,255,0.16);
            }
        }
        
        /* v5: Liquid glass for floating cards */
        .floating-card.glass-enhanced {
            background: linear-gradient(135deg, rgba(11, 24, 40, 0.80), rgba(8, 17, 30, 0.86));
            -webkit-backdrop-filter: var(--glass-3);
            backdrop-filter: var(--glass-3);
            border: 1px solid rgba(255,255,255,0.11);
            box-shadow: 
                inset 0 1px 2px rgba(255,255,255,0.10),
                inset 0 -1px 2px var(--glass-rim-bottom),
                0 24px 56px rgba(0,0,0,0.30),
                0 0 36px rgba(62,162,255,0.07);
        }
        
        /* v5: Liquid glass for map controls */
        .map-stage-quickbar.glass-enhanced {
            background: linear-gradient(135deg, rgba(10, 20, 34, 0.72), rgba(7, 14, 26, 0.80));
            -webkit-backdrop-filter: var(--glass-3);
            backdrop-filter: var(--glass-3);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: 
                inset 0 1px 0 var(--glass-rim),
                inset 0 -1px 2px var(--glass-rim-bottom),
                0 18px 42px rgba(0,0,0,0.28),
                0 6px 16px rgba(62,162,255,0.06);
        }
        

        
        /* v4.1 merged into v4.2 above */

        .floating-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
            pointer-events: none;
        }

        .floating-card::after {
            content: "";
            position: absolute;
            inset: auto 14px 14px auto;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(62,162,255,0.18), rgba(62,162,255,0));
            pointer-events: none;
            opacity: .6;
        }

        .floating-top-left {
            top: 18px;
            left: 18px;
            width: min(39%, 472px);
            background: linear-gradient(180deg, rgba(10, 22, 38, 0.84), rgba(7, 15, 28, 0.88));
            display: grid;
            gap: 12px;
            transition: opacity .25s ease, transform .25s ease;
        }
        /* v9.1: Fade hero card on scroll so it never blocks the safety banner */
        body.has-scrolled .floating-top-left {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-12px);
        }

        .floating-top-right,
        .floating-bottom-right {
            width: min(308px, calc(100% - 36px));
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: rgba(138, 176, 216, 0.35) transparent;
            contain: layout style;
        }

        .floating-top-right {
            top: 18px;
            right: 18px;
            width: min(358px, calc(100% - 36px));
            max-height: min(44vh, calc(100% - 128px));
        }

        .floating-top-right.compact {
            width: min(320px, calc(100% - 36px));
        }

        /* v8.8: Floating passive — spring transition */
        .floating-top-right.passive {
            width: min(244px, calc(100% - 36px));
            padding: 12px;
            background: linear-gradient(180deg, rgba(10, 21, 36, 0.76), rgba(6, 13, 24, 0.82));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 38px rgba(0,0,0,0.18);
            transition: width .28s var(--transition-smooth), padding .22s ease, max-height .3s var(--transition-smooth), opacity .2s ease;
        }

        .floating-top-right.compact #selection-note,
        .floating-top-right.compact #selection-facts,
        .floating-top-right.passive #selection-note,
        .floating-top-right.passive #selection-facts,
        .floating-top-right.passive #selection-pills,
        .floating-top-right.passive #selection-clear {
            display: none;
        }

        .floating-top-right.passive .selection-header {
            align-items: center;
        }

        .floating-top-right.passive .selection-title {
            font-size: 18px;
            line-height: 1.1;
        }

        .floating-top-right.passive #selection-subtitle {
            margin-top: 4px;
            font-size: 12px;
            line-height: 1.45;
        }

        .floating-top-right.passive #selection-status {
            opacity: .88;
            font-size: 11px;
        }

        .floating-bottom-right {
            right: 18px;
            bottom: 18px;
            max-height: min(34vh, 314px);
        }

        .floating-bottom-left {
            left: 18px;
            bottom: 18px;
            width: min(360px, calc(100% - 36px));
        }

        .map-tools {
            display: grid;
            gap: 12px;
            background: linear-gradient(180deg, rgba(8, 16, 29, 0.92), rgba(5, 10, 20, 0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--glow);
        }

        .map-preset-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        /* v8.8: Map-preset — spring transition, deeper hover/active, press state */
        .map-preset {
            display: grid;
            gap: 4px;
            align-content: start;
            min-height: 80px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(120, 154, 211, 0.18);
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
            color: var(--text);
            padding: 12px;
            text-align: left;
            cursor: pointer;
            /* v8.8 perf: compositor-only transition */
            transition: transform .18s var(--transition-smooth), border-color .18s ease;
        }

        .map-preset:hover {
            transform: translateY(-3px);
            border-color: rgba(136, 210, 255, 0.48);
            box-shadow: 0 8px 20px rgba(62,162,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
        }

        .map-preset:active {
            transform: translateY(0) scale(0.97);
            transition-duration: .08s;
        }

        .map-preset.active {
            border-color: rgba(136, 210, 255, 0.58);
            background: linear-gradient(180deg, rgba(67, 113, 172, 0.32), rgba(23, 38, 62, 0.48));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 28px rgba(4, 10, 18, 0.22), 0 0 20px rgba(46, 230, 192, 0.06);
        }

        .map-preset strong {
            font-size: 12px;
            letter-spacing: -.01em;
        }

        .map-preset span {
            font-size: 10px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        body.device-desktop:not(.viewport-short) .workspace {
            grid-template-columns: minmax(250px, 288px) minmax(0, 1fr);
            gap: 14px;
        }

        body.device-desktop:not(.viewport-short) .map-stage {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(304px, 352px);
            grid-template-areas:
                "quick quick"
                "map timeline"
                "map selection";
            align-items: start;
            gap: 12px;
            padding: 14px;
        }

        body.device-desktop:not(.viewport-short) .map-stage-quickbar {
            display: grid;
            grid-area: quick;
            margin-bottom: 0;
            padding: 12px;
            border-radius: var(--radius-lg);
        }

        body.device-desktop:not(.viewport-short) .profile-banner {
            display: none;
        }

        body.device-desktop.viewport-short .profile-banner {
            padding: 20px;
            border-radius: var(--radius-lg);
        }

        body.device-desktop:not(.viewport-short) .desktop-map-dock {
            display: none;
        }

        body.device-desktop:not(.viewport-short) #map {
            grid-area: map;
            min-height: clamp(720px, 80vh, 1040px);
        }

        body.device-desktop:not(.viewport-short) .floating-card {
            position: static;
            width: auto;
            max-height: none;
            overflow: visible;
        }

        body.device-desktop:not(.viewport-short) .floating-top-left {
            display: none;
        }

        body.device-desktop:not(.viewport-short) .floating-top-right {
            grid-area: selection;
            width: auto;
            padding: 14px;
            border-radius: var(--radius-lg);
            max-height: clamp(320px, 48vh, 560px);
            overflow: auto;
        }

        body.device-desktop:not(.viewport-short) .floating-bottom-left {
            display: none;
        }

        body.device-desktop:not(.viewport-short) .floating-bottom-right {
            grid-area: timeline;
            width: auto;
            max-height: clamp(240px, 34vh, 380px);
            overflow: auto;
            padding: 14px;
            border-radius: var(--radius-lg);
        }

        body.device-desktop:not(.viewport-short) {
            --map-height: clamp(720px, 80vh, 1040px);
            --map-min-height: 720px;
        }

        body.device-desktop:not(.viewport-short) .year-overlay {
            top: calc(var(--map-height) - 120px);
            bottom: auto;
        }

        body.device-desktop:not(.viewport-short) .topbar {
            padding: 6px 10px;
            gap: 8px;
        }

        body.device-desktop:not(.viewport-short) .route-pills {
            padding: 4px;
            gap: 6px;
        }

        body.device-desktop:not(.viewport-short) .route-pill {
            min-width: 100px;
            min-height: 38px;
            padding: 5px 10px;
        }

        body.device-desktop:not(.viewport-short) .top-actions {
            padding: 4px 8px;
            min-height: 36px;
            border-radius: var(--radius-sm);
        }

        /* v4.3: Optimized desktop sidebar padding */
        body.device-desktop:not(.viewport-short) .sidebar {
            padding: 8px;
            gap: 8px;
        }

        body.device-desktop.viewport-short .summary-card,
        body.device-desktop.viewport-short .panel {
            padding: 20px;
        }

        body.device-desktop:not(.viewport-short) .summary-card,
        body.device-desktop:not(.viewport-short) .panel {
            padding: 10px 12px;
        }

        /* v4.3: Optimized tablet layout with tight spacing */
        body.device-tablet .workspace,
        body.device-desktop.viewport-short .workspace {
            grid-template-columns: 1fr;
            grid-template-areas:
                "map"
                "headlines"
                "sidebar";
            gap: 28px;
        }

        body.device-tablet .shell {
            gap: 6px;
        }

        body.device-tablet .topbar {
            padding: 12px 14px;
            gap: 10px 12px;
        }

        body.device-tablet .top-actions {
            gap: 8px;
        }

        @media (max-width: 720px) {
            #view-toggle {
                right: max(12px, env(safe-area-inset-right,0)) !important;
                bottom: calc(env(safe-area-inset-bottom,0) + 6.2rem) !important;
                transform: scale(0.9);
                transform-origin: bottom right;
            }
        }

        body.device-tablet .topbar-kpis {
            display: none;
        }

        body.device-tablet .workspace {
            gap: 6px;
        }

        body.device-tablet .sidebar,
        body.device-desktop.viewport-short .sidebar {
            position: static;
            max-height: none;
            overflow: visible;
            gap: 12px;
            padding: 12px;
        }

        body.device-tablet .floating-card,
        body.device-desktop.viewport-short .floating-card {
            position: static;
        }

        body.device-desktop.viewport-short .workspace {
            gap: 12px;
        }

        body.device-tablet .map-stage,
        body.device-desktop.viewport-short .map-stage {
            display: grid;
            gap: 8px;
            min-height: auto;
        }

        body.device-tablet .map-stage {
            position: relative;
            display: block;
            gap: 0;
            padding: 0;
            min-height: calc(var(--app-height) - 68px);
        }

        body.device-tablet .map-stage-quickbar {
            position: absolute;
            top: 6px;
            left: 6px;
            right: auto;
            max-width: calc(100% - clamp(236px, 39vw, 376px));
            z-index: 5;
            margin-bottom: 0;
            padding: 6px;
            border-radius: var(--radius-md);
            gap: 6px;
            background: linear-gradient(180deg, rgba(10, 20, 34, 0.82), rgba(7, 14, 26, 0.9));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 30px rgba(0,0,0,0.18);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        body.device-tablet .map-stage-quickbar::-webkit-scrollbar { display: none; }

        body.device-tablet .profile-banner {
            display: none;
        }

        body.device-tablet .map-stage-quickbar,
        body.device-phone .map-stage-quickbar,
        body.device-desktop.viewport-short .map-stage-quickbar {
            display: grid;
        }

        body.device-tablet .tablet-control-surface {
            display: grid;
            position: absolute;
            top: 66px;
            left: 8px;
            bottom: 8px;
            width: clamp(198px, 25vw, 254px);
            z-index: 5;
            gap: 8px;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: none;
            padding: 8px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(140, 179, 233, 0.14);
            background: linear-gradient(180deg, rgba(8, 18, 31, 0.92), rgba(6, 12, 23, 0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 34px rgba(0,0,0,0.22);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(138, 176, 216, 0.3) transparent;
            overscroll-behavior: contain;
        }

        .tablet-surface-controls {
            display: none;
        }

        body.device-tablet .tablet-surface-controls {
            display: flex;
            position: absolute;
            top: 66px;
            right: 8px;
            z-index: 6;
            gap: 6px;
            align-items: center;
        }

        body.device-tablet .tablet-surface-control-btn {
            min-height: 36px;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(138, 176, 216, 0.24);
            background: linear-gradient(180deg, rgba(11, 23, 38, 0.88), rgba(7, 14, 25, 0.94));
            color: #d8e9ff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
        }

        body.device-tablet .tablet-surface-control-btn.active {
            border-color: rgba(92, 169, 255, 0.45);
            color: #ecf6ff;
            background: linear-gradient(180deg, rgba(22, 43, 67, 0.9), rgba(9, 20, 33, 0.96));
        }

        body.device-tablet.tablet-surface-hidden .tablet-control-surface {
            display: none !important;
        }

        body.device-tablet.tablet-surface-dock-right .tablet-control-surface {
            left: auto;
            right: 10px;
        }

        body.device-tablet.tablet-surface-dock-right .tablet-surface-controls {
            left: 10px;
            right: auto;
        }

        body.device-tablet .tablet-scroll-cue {
            gap: 6px;
            padding: 6px;
            scroll-padding-inline: 6px;
        body.device-tablet .tablet-surface-summary,
        body.device-tablet .tablet-control-card,
        body.device-tablet .tablet-playback-card {
            min-width: 118px;
            min-height: 50px;
            padding: 8px 10px;
            border: 1px solid rgba(136, 176, 231, 0.1);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.13);
        }

            font-size: 12.5px;
            font-weight: 600;
        }

        body.device-tablet .route-pill .meta,
        body.device-tablet .route-pill .code {
            font-size: 9.5px;
            opacity: 0.75;
        }

        /* v4.2: Ensure proper tablet non-floating cards */
        body.device-tablet .floating-top-left,
        body.device-tablet .floating-bottom-right,
        body.device-tablet .floating-bottom-left,
        body.device-desktop.viewport-short .floating-top-left,
        body.device-desktop.viewport-short .floating-bottom-right,
        body.device-desktop.viewport-short .floating-bottom-left {
            display: none !important;
        }

        body.device-tablet .tablet-kpi-chip .eyebrow {
            font-size: 8px;
            letter-spacing: .09em;
        }

        /* v4.3: Single column control cluster */
        body.device-tablet .tablet-control-cluster {
            grid-template-columns: 1fr;
            gap: 4px;
        }

        /* v4.3: Horizontal scrolling filter row with minimal spacing */
        body.device-tablet .tablet-control-card .filter-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            overflow-x: hidden;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            gap: 4px;
            padding: 0;
        }

        body.device-tablet .tablet-control-card .filter-row::-webkit-scrollbar {
            display: none;
        }

        /* v4.3: Ultra-compact stage toggle */
        body.device-tablet .tablet-control-card .toggle.stage-toggle {
            min-height: 28px;
            min-width: 68px;
            padding: 3px 5px;
            border-radius: 8px;
            font-size: 10px;
        }

        body.device-tablet .tablet-control-card .toggle.stage-toggle .label-stack strong {
            font-size: 8px;
            font-weight: 600;
        }

        body.device-tablet .tablet-control-card .toggle.stage-toggle .label-stack span {
            display: none;
        }

        body.device-tablet .tablet-surface-lower,
        body.device-tablet .tablet-surface-tools {
            grid-template-columns: 1fr;
            gap: 5px;
        }

        body.device-tablet .tablet-playback-card {
            padding-bottom: 7px;
        }

        body.device-tablet .tablet-playback-card .card-head,
        body.device-tablet .tablet-playback-card .playback-meta {
            margin-bottom: 4px;
        }

        body.device-tablet .tablet-playback-card .playback-km-wrap {
            margin-top: 5px;
            height: 14px;
        }

        body.device-tablet .tablet-playback-card .playback-km-label {
            font-size: 9px;
        }

        body.device-tablet .year-overlay {
            bottom: 148px;
        }

        body.device-tablet .tablet-surface-tools {
            display: none;
        }

        /* v4.2: COMPLETE TABLET REDESIGN - Responsive proportions for iPad */
        body.device-tablet .floating-top-left,
        body.device-tablet .floating-bottom-right,
        body.device-tablet .floating-bottom-left {
            display: none;
        }

        /* v4.2: Selection panel - anchored inside map-stage, below quickbar */
        body.device-tablet .floating-top-right {
            position: absolute;
            top: 8px;
            right: 8px;
            bottom: auto;
            left: auto;
            width: clamp(220px, 38vw, 360px);
            z-index: 6;
            max-height: calc(100% - 24px);
            min-height: 48px;
            overflow: hidden;
            padding: 12px;
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(12, 24, 38, 0.88), rgba(8, 16, 28, 0.94));
            backdrop-filter: blur(12px) saturate(1.08);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 16px 40px rgba(0,0,0,0.24),
                0 0 32px rgba(62,162,255,0.08);
            transition: max-height .3s ease, width .3s ease;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* v4.2: Selection panel expanded state - scrollable with proper proportions */
        body.device-tablet .floating-top-right:not(.passive) {
            max-height: calc(100% - 24px);
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(238,106,49,0.4) transparent;
        }

        /* v4.2: Selection panel passive state */
        body.device-tablet .floating-top-right.passive {
            width: clamp(264px, 34vw, 344px);
            max-height: calc(100% - 24px);
            overflow: hidden;
            display: flex;
            align-items: stretch;
            padding: 14px 14px 12px;
            white-space: normal;
            text-overflow: clip;
            background: linear-gradient(180deg, rgba(13, 24, 39, 0.92), rgba(8, 16, 29, 0.96));
            border-color: rgba(255, 205, 150, 0.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.26), 0 0 24px rgba(255,179,107,0.06);
        }

        body.device-tablet .floating-top-right.passive .eyebrow {
            flex-shrink: 0;
            opacity: 0.86;
        }

        body.device-tablet .floating-top-right.passive .panel-purpose {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            min-width: 0;
            margin-top: 2px;
            color: rgba(223, 235, 255, 0.68);
        }

body.device-tablet #map {
    height: 100%;
    min-height: 930px;
}

body.device-tablet .route-pills {
    gap: 6px;
    padding: 6px;
    scroll-padding-inline: 6px;
}

body.device-tablet .route-pill {
    min-width: 118px;
    min-height: 50px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
}

body.device-tablet .route-pill .label {
    font-size: 12.5px;
    font-weight: 600;
}

body.device-tablet .route-pill .meta,
body.device-tablet .route-pill .code {
    font-size: 9.5px;
    opacity: 0.75;
}

/* v4.2: Ensure proper tablet non-floating cards */
body.device-tablet .floating-top-left,
body.device-tablet .floating-bottom-right,
body.device-tablet .floating-bottom-left,
body.device-desktop.viewport-short .floating-top-left,
body.device-desktop.viewport-short .floating-bottom-right,
body.device-desktop.viewport-short .floating-bottom-left {
    display: none !important;
}

body.device-tablet .topbar,
        body.device-phone .topbar,
        body.device-desktop.viewport-short .topbar {
            position: static;
        }

        body.device-tablet .topbar {
            padding: 10px 12px 12px;
            gap: 10px 12px;
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "brand"
                "actions"
                "routes";
            border-radius: var(--radius-xl);
            backdrop-filter: blur(12px) saturate(1.04);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 46px rgba(0, 0, 0, 0.2);
            align-items: start;
        }

        body.device-tablet .brand {
            padding-inline: 0;
            align-self: start;
        }

        body.device-tablet .brand-row {
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 6px 8px;
        }

        body.device-tablet .brand h1 {
            flex-basis: 100%;
            font-size: clamp(22px, 2.8vw, 30px);
            line-height: 1.06;
            font-weight: 600;
            letter-spacing: -0.4px;
            max-width: none;
            white-space: normal;
            text-wrap: balance;
        }

        body.device-tablet .brand .eyebrow {
            font-size: 9px;
        }

        body.device-tablet .brand .helper {
            font-size: 11px;
            max-width: 46ch;
            white-space: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            opacity: 0.72;
        }

        body.device-tablet .top-actions,
        body.device-phone .top-actions,
        body.device-desktop.viewport-short .top-actions {
            grid-template-columns: 1fr;
            border-radius: var(--radius-lg);
        }

        body.device-tablet .top-actions {
            width: fit-content;
            max-width: 100%;
            justify-self: end;
            justify-content: flex-end;
            gap: 6px;
            padding: 6px;
            min-height: 0;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
        }

        body.device-tablet .topbar-donate-btn,
        body.device-desktop.viewport-short .topbar-donate-btn {
            width: auto;
            justify-content: center;
            min-height: 36px;
        }

        body.device-tablet .control-label {
            font-size: 10px;
            letter-spacing: .12em;
            font-weight: 500;
            text-transform: uppercase;
            opacity: 0.75;
        }

        body.device-tablet .top-actions .tab {
            min-width: 48px;
            min-height: 38px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 10px;
            padding: 6px 8px;
        }

        body.device-tablet .top-actions .select {
            min-height: 40px;
            min-width: 174px;
            font-size: 13px;
            padding: 8px 32px 8px 12px;
            border-radius: 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
        }

        body.device-tablet .top-actions .tabs,
        body.device-phone .top-actions .tabs,
        body.device-phone .top-actions .select,
        body.device-phone .toolbar-block,
        body.device-phone .topbar-donate-btn,
        body.device-desktop.viewport-short .top-actions .tabs,
        body.device-desktop.viewport-short .top-actions .select,
        body.device-desktop.viewport-short .toolbar-block,
        body.device-desktop.viewport-short .topbar-donate-btn {
            width: 100%;
        }

        body.device-tablet .top-actions .tabs,
        body.device-tablet .top-actions .select,
        body.device-tablet .toolbar-block,
        body.device-tablet .topbar-donate-btn {
            width: auto;
        }

        body.device-tablet .headline-strip {
            display: none;
        }

        body.device-tablet .map-stage-quick-presets {
            grid-auto-columns: minmax(86px, max-content);
            gap: 6px;
        }

        body.device-tablet .map-stage-quickbar {
            padding: 8px 12px;
            border-radius: var(--radius-lg);
        }

        body.device-tablet .map-stage-quickbar .toggle.stage-toggle {
            min-width: 86px;
            min-height: 36px;
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            font-size: 11px;
        }

        body.device-tablet .map-stage-quickbar .toggle.stage-toggle .label-stack strong {
            font-size: 11px;
            font-weight: 600;
        }

        body.device-tablet .map-stage-quickbar .toggle.stage-toggle .label-stack span {
            font-size: 8px;
            opacity: 0.8;
        }

        /* v4.2: Enhanced tablet selection panel typography */
        body.device-tablet .floating-top-right .selection-header {
            padding: 8px 0 10px 0;
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        body.device-tablet .floating-top-right .selection-title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.3;
            color: rgba(238,238,240,0.95);
            word-break: break-word;
        }

        body.device-tablet .floating-top-right #selection-subtitle {
            font-size: 11px;
            margin-top: 4px;
            opacity: 0.75;
        }

        body.device-tablet .floating-top-right #selection-status {
            font-size: 10px;
            margin-top: 2px;
            opacity: 0.6;
            font-style: italic;
        }

        body.device-tablet .floating-top-right #selection-note {
            font-size: 12px;
            line-height: 1.45;
            padding: 10px 12px;
            margin: 8px 0 0;
            border-radius: 10px;
            background: rgba(238,106,49,0.08);
            border-left: 3px solid rgba(238,106,49,0.4);
        }

        body.device-tablet .floating-top-right #selection-facts {
            display: grid;
            gap: 6px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 12px;
        }

        body.device-tablet .floating-top-right #selection-facts .fact {
            font-size: 12px;
            min-width: 0;
            min-height: 50px;
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(255,255,255,0.03);
        }

        body.device-tablet .floating-top-right #selection-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 10px 0 0;
        }

        body.device-tablet .floating-top-right.passive .selection-header {
            align-items: start;
            margin-bottom: 10px;
        }

        body.device-tablet .floating-top-right.passive .selection-actions {
            min-width: 0;
            gap: 6px;
        }

        body.device-tablet .floating-top-right.passive .selection-title {
            font-size: 18px;
            line-height: 1.08;
        }

        body.device-tablet .floating-top-right.passive #selection-subtitle {
            margin-top: 6px;
            opacity: 0.84;
            line-height: 1.45;
        }

        body.device-tablet .floating-top-right.passive #selection-status {
            margin-top: 4px;
            opacity: 0.92;
            font-style: normal;
        }

        body.device-tablet .floating-top-right.passive #selection-pills {
            display: flex;
        }

        body.device-tablet .floating-top-right.passive #selection-facts {
            display: grid;
        }

        body.device-tablet .floating-top-right.passive #selection-note {
            display: block;
            background: linear-gradient(180deg, rgba(255,179,107,0.12), rgba(74,169,255,0.08));
            border-left-color: rgba(255,179,107,0.54);
        }

        body.device-tablet .floating-top-right.passive #selection-note::before {
            background: linear-gradient(180deg, var(--accent-warm), var(--accent-2));
        }

        body.device-tablet .floating-top-right.passive #selection-facts .fact {
            border-left-color: rgba(255,179,107,0.28);
            background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
        }


        body.device-tablet .floating-top-right #selection-clear:active {
            background: linear-gradient(135deg, rgba(238,106,49,0.2), rgba(238,106,49,0.15));
            transform: scale(0.96);
        }

        body.device-phone .workspace {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        body.device-phone .map-stage {
            display: block;
            flex: 0 0 auto;
            width: 100%;
            gap: 0;
            padding: 0;
            min-height: auto;
            background: transparent;
            border: 0;
            box-shadow: none;
            backdrop-filter: none;
        }

        body.device-phone .map-stage::after {
            right: 10px;
            bottom: 8px;
            font-size: 8.5px;
            letter-spacing: .1em;
            opacity: 0.88;
        }

        body.device-phone .profile-banner,
        body.device-phone .tablet-control-surface,
        body.device-phone .desktop-map-dock,
        body.device-phone .map-tools,
        body.device-phone .headline-strip,
        body.device-phone .legal-strip {
            display: none !important;
        }

        body.device-phone .map-stage-quickbar {
            display: flex !important;
            position: static;
            flex-direction: row;
            gap: 3px;
            padding: 3px 6px 4px;
            margin: 0;
            border-radius: 0;
            background: linear-gradient(180deg, rgba(12,26,40,0.92), rgba(8,19,30,0.94));
            border: none;
            border-top: 1px solid rgba(138,176,216,0.10);
            backdrop-filter: blur(14px);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        body.device-phone .map-stage-quickbar::-webkit-scrollbar { display: none; }
        body.device-phone .map-stage-quickbar .toggle-group-label { display: none; }
        body.device-phone .map-stage-quickbar .map-stage-quick-presets {
            display: flex;
            gap: 3px;
            width: 100%;
        }
        body.device-phone .map-stage-quickbar .toggle.stage-toggle {
            flex: 1 1 0;
            min-width: 0;
            min-height: 30px;
            padding: 3px 6px;
            border-radius: var(--radius-md);
            font-size: 10px;
        }
        body.device-phone .map-stage-quickbar .toggle.stage-toggle .label-stack strong {
            font-size: 9px;
        }
        body.device-phone .map-stage-quickbar .toggle.stage-toggle .label-stack span {
            display: none;
        }

        body.device-phone .map-stage-quickbar .toggle.stage-toggle .micro {
            font-size: 9px;
            padding: 1px 6px !important;
        }

        body.device-phone #map {
            display: block;
            min-height: clamp(340px, calc(var(--app-height) - 122px), 82vh);
            height: clamp(340px, calc(var(--app-height) - 122px), 82vh);
            margin-top: 2px;
            border-radius: var(--radius-lg);
        }

        body.device-phone .floating-top-left,
        body.device-phone .floating-bottom-right,
        body.device-phone .floating-bottom-left {
            display: none;
        }

        body.device-phone .floating-top-right {
            display: none !important;
        }

        body.device-phone .topbar {
            position: sticky;
            top: max(4px, env(safe-area-inset-top));
            z-index: 82;
            padding: 5px 7px;
            gap: 5px;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "routes lang";
            backdrop-filter: blur(18px) saturate(1.04);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 38px rgba(0,0,0,0.2);
            align-items: start;
        }

        body.device-phone .topbar::after {
            display: none;
        }

        body.device-phone .brand {
            display: none;
        }

        body.device-phone .topbar-kpis,
        body.device-phone .topbar-ring,
        body.device-phone .topbar-search {
            display: none;
        }

        /* R11: Phone language tray beside route-pill strip */
        .phone-lang-tray { display: none; }
        body.device-phone .phone-lang-tray {
            grid-area: lang;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 2px 4px;
            border-radius: var(--radius-sm);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(142,178,232,0.13);
            flex-shrink: 0;
        }

        body.device-phone .phone-tray-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
        }
        body.device-phone .phone-lang-tray::before {
            content: "BETA";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 2px 7px;
            border-radius: 999px;
            border: 1px solid rgba(46,230,192,0.42);
            background: linear-gradient(180deg, rgba(46,230,192,0.22), rgba(14,95,88,0.2));
            color: rgba(223, 252, 244, 0.95);
            font-size: 8.5px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            flex-shrink: 0;
        }
        body.device-phone .phone-lang-tray .tab {
            min-width: 0;
            flex: 1 1 0;
            min-height: 30px;
            padding: 4px 8px;
            font-size: 9.5px;
            border-radius: var(--radius-sm);
        }

        body.device-phone .phone-donate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 4px 10px;
            border-radius: 999px;
            text-decoration: none;
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: .04em;
            color: #04111e;
            background: linear-gradient(135deg, var(--accent), #4aa9ff, var(--accent));
            box-shadow: 0 10px 24px rgba(46, 230, 192, 0.22);
            white-space: nowrap;
            flex-shrink: 0;
        }

        body.device-phone .brand h1 {
            font-size: clamp(14px, 4.6vw, 20px);
            line-height: 1.1;
            font-weight: 600;
            max-width: 22ch;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        body.device-phone .brand .helper {
            display: none;
        }

        body.device-phone .eyebrow {
            font-size: 10px;
            letter-spacing: .12em;
            font-weight: 500;
        }

        body.device-phone .route-pills {
            display: flex !important;
            gap: 4px;
            padding: 2px 0 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            flex-wrap: nowrap;
        }
        body.device-phone .route-pills::-webkit-scrollbar { display: none; }

        body.device-phone .route-pill {
            min-width: 64px;
            max-width: 84px;
            min-height: 34px;
            padding: 4px 6px;
            flex-shrink: 0;
            border-radius: 999px;
        }

        body.device-phone .route-pill.lang-pill {
            min-width: 96px;
            max-width: 110px;
            padding: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        body.device-phone .route-pill.lang-pill .tab {
            min-width: 0;
            flex: 1 1 0;
            min-height: 24px;
            padding: 3px 4px;
            font-size: 9px;
            border-radius: 8px;
        }

        body.device-phone .route-pill .label {
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.device-phone .route-pill .meta {
            display: none;
        }

        body.device-phone .route-pill .code {
            font-size: 8px;
        }

        body.device-phone .route-pill .route-pill-progress {
            display: none;
        }

        body.device-phone .top-actions {
            display: none;
        }

        body.device-phone .top-actions .tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
        }

        body.device-phone .top-actions .tab {
            min-width: 0;
            min-height: 28px;
            font-size: 10px;
            padding: 5px 6px;
        }

        body.device-phone .toolbar-select-block,
        body.device-phone #basemap-label,
        body.device-phone #basemap-select {
            display: none !important;
        }

        body.device-phone .top-actions .select {
            display: none;
        }

        body.device-phone .sidebar {
            display: grid;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: auto;
            z-index: 90;
            width: 100%;
            grid-area: auto !important;
            max-height: 46vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 7px;
            gap: 7px;
            margin-top: 0;
            background: linear-gradient(180deg, rgba(10, 22, 36, 0.88), rgba(6, 14, 24, 0.94));
            border: 1px solid rgba(138, 176, 216, 0.14);
            box-shadow: 0 -12px 54px rgba(0,0,0,0.40), inset 0 1px 0 var(--glass-rim);
            backdrop-filter: var(--glass-3);
            -webkit-backdrop-filter: var(--glass-3);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            transform: translateY(100%);
            transition: transform .32s cubic-bezier(.32, .72, 0, 1);
            will-change: transform;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        body.device-phone .sidebar.phone-drawer-open {
            transform: translateY(0);
            overflow-y: auto;
            max-height: 46vh;
        }

        body.device-phone .sidebar::before {
            content: '';
            display: block;
            width: 40px;
            height: 5px;
            margin: 8px auto 6px;
            border-radius: 999px;
            background: rgba(138, 176, 216, 0.55);
            flex-shrink: 0;
            transition: background .15s ease;
        }

        body.device-phone .sidebar:active::before {
            background: rgba(138, 176, 216, 0.8);
        }

        body.device-phone .sidebar::after {
            content: '';
            display: block;
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            height: 32px;
            margin-top: -32px;
            pointer-events: none;
            background: linear-gradient(to top, rgba(7, 16, 27, 0.95), transparent);
            border-radius: 0 0 0 0;
            z-index: 1;
        }

        body.device-phone .sidebar-scroll {
            gap: 8px;
        }

        body.device-phone .tablet-info-tabs {
            display: none;
        }

        body.device-phone .summary-card,
        body.device-phone .panel {
            padding: 12px;
            border-radius: var(--radius-md);
        }

        body.device-phone .summary-main strong {
            font-size: 22px;
        }

        body.device-phone #summary-panel,
        body.device-phone #filters-panel {
            display: none;
        }

        body.device-phone .filter-stack {
            gap: 10px;
        }

        body.device-phone .filter-row {
            gap: 6px;
        }

        body.device-phone .toggle.stage-toggle,
        body.device-phone .toggle,
        body.device-phone .chip {
            min-height: 34px;
            padding: 5px 8px;
        }

        body.device-phone .map-tools,
        body.device-phone .desktop-map-dock {
            display: none;
        }

        .phone-action-dock {
            display: none;
        }

        body.device-phone .phone-action-dock {
            display: grid;
            position: fixed;
            left: max(10px, env(safe-area-inset-left));
            right: max(10px, env(safe-area-inset-right));
            bottom: max(6px, env(safe-area-inset-bottom));
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 5px;
            z-index: 80;
            padding: 5px 6px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(138, 176, 216, 0.16);
            background: linear-gradient(180deg, rgba(12, 26, 42, 0.84), rgba(6, 16, 28, 0.90));
            box-shadow: 0 22px 60px rgba(0,0,0,0.32), inset 0 1px 0 var(--glass-rim);
            backdrop-filter: var(--glass-3);
            -webkit-backdrop-filter: var(--glass-3);
        }

        /* Phone basemap picker - floating map style button */
        .phone-basemap-picker { display: none; }

        body.device-phone .phone-basemap-picker {
            position: absolute;
            bottom: 44px;
            right: 10px;
            z-index: 60;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            pointer-events: none;
        }

        body.device-phone .phone-basemap-actions {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center;
        }

        body.device-phone .phone-basemap-toggle-btn,
        body.device-phone .phone-basemap-option { pointer-events: auto; }

        body.device-phone .phone-basemap-toggle-btn {
            width: 44px; height: 44px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(138, 176, 216, 0.3);
            background: linear-gradient(180deg, rgba(19, 38, 56, 0.94), rgba(8, 19, 30, 0.97));
            backdrop-filter: blur(16px) saturate(1.08);
            color: #c4dcff; font-size: 16px; line-height: 1;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.09);
            transition: border-color .15s, color .15s;
        }

        body.device-phone .phone-basemap-toggle-btn.open,
        body.device-phone .phone-basemap-toggle-btn:active {
            border-color: rgba(46, 230, 192, 0.5); color: #e4fff8;
        }

        body.device-phone .phone-basemap-toggle-btn.active {
            border-color: rgba(92, 169, 255, 0.55);
            color: #e7f3ff;
            background: linear-gradient(180deg, rgba(24, 44, 69, 0.94), rgba(10, 22, 36, 0.97));
        }

        body.device-phone .phone-basemap-options {
            display: none; flex-direction: column; gap: 4px; align-items: flex-end;
        }
        body.device-phone .phone-basemap-options.open { display: flex; }

        body.device-phone .phone-basemap-option {
            appearance: none; min-height: 36px; padding: 6px 12px;
            border-radius: var(--radius-md); border: 1px solid rgba(138, 176, 216, 0.2);
            background: linear-gradient(180deg, rgba(19, 38, 56, 0.94), rgba(8, 19, 30, 0.97));
            backdrop-filter: blur(16px); color: #b8d4f0;
            font-size: 11px; font-weight: 600; letter-spacing: .04em;
            cursor: pointer; white-space: nowrap; text-align: right;
            box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
            transition: border-color .15s, color .15s;
        }
        body.device-phone .phone-basemap-option.active {
            border-color: rgba(46, 230, 192, 0.5); color: #dffcf4;
            background: linear-gradient(180deg, rgba(24, 54, 62, 0.94), rgba(8, 19, 30, 0.97));
        }
        body.device-phone .phone-basemap-option:active { transform: scale(0.96); }

        body.device-phone.phone-zen-mode .topbar,
        body.device-phone.phone-zen-mode .sidebar,
        body.device-phone.phone-zen-mode .phone-action-dock,
        body.device-phone.phone-zen-mode .map-stage-quickbar {
            display: none !important;
        }

        body.device-phone.phone-zen-mode .workspace {
            gap: 0;
        }

        body.device-phone.phone-zen-mode #map {
            min-height: calc(var(--app-height) - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
            height: calc(var(--app-height) - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
            border-radius: var(--radius-lg);
        }

        body.device-phone.phone-zen-mode .phone-basemap-picker {
            bottom: max(10px, env(safe-area-inset-bottom));
            right: max(10px, env(safe-area-inset-right));
        }

        @media (max-width: 430px) {
            .map-stage::after {
                right: 8px;
                bottom: 6px;
                font-size: 8px;
            }

            body.device-phone .topbar {
                padding: 4px 5px;
                border-radius: var(--radius-md) var(--radius-md) 0 0;
            }

            body.device-phone #map {
                border-radius: var(--radius-md);
                min-height: clamp(304px, calc(var(--app-height) - 116px), 80vh);
                height: clamp(304px, calc(var(--app-height) - 116px), 80vh);
            }

            body.device-phone .map-stage-quickbar {
                padding: 2px 4px;
            }

            body.device-phone .phone-nav-strip {
                padding: 2px 5px 3px;
                border-radius: 0 0 var(--radius-md) var(--radius-md);
            }
        }

        /* R24: Ultra-small phone support (<360px) */
        @media (max-width: 359px) {
            body.device-phone {
                padding-left: max(6px, env(safe-area-inset-left));
                padding-right: max(6px, env(safe-area-inset-right));
            }

            body.device-phone .phone-action-dock {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 2px;
                padding: 3px 4px;
                left: max(6px, env(safe-area-inset-left));
                right: max(6px, env(safe-area-inset-right));
            }

            body.device-phone .phone-action-key { font-size: 8px; }
            body.device-phone .phone-action-value { font-size: 9px; }

            .headline-card { min-height: 88px; padding: 10px; }
            .headline-card strong { font-size: 14px; }

            body.device-phone .summary-main strong { font-size: 18px; }
        }

        /* R24: Tablet landscape optimization */
        @media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
            body.device-tablet .workspace {
                grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
            }

            body.device-tablet {
                --map-height: min(72vh, 680px);
                --map-min-height: 380px;
            }

            body.device-tablet .tablet-kpi-ribbon {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            body.device-tablet .tablet-tab-row {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }

        @media (orientation: landscape) and (max-height: 540px) {
            body.device-phone .shell {
                gap: 0;
            }

            body.device-phone .topbar {
                grid-template-columns: minmax(0, 1fr) minmax(200px, 42vw);
                grid-template-areas: "actions routes";
                align-items: center;
            }

            body.device-phone .route-pills {
                display: flex !important;
            }
            body.device-phone #map {
                min-height: clamp(220px, calc(var(--app-height) - 138px), 72vh);
                height: clamp(220px, calc(var(--app-height) - 138px), 72vh);
            }

            body.device-phone .sidebar {
                width: 100%;
                max-height: 44vh;
            }

            body.device-phone .sidebar.phone-drawer-open {
                max-height: 44vh;
            }

            body.device-phone .phone-action-dock {
                left: max(10px, env(safe-area-inset-left));
                right: auto;
                width: min(56vw, 520px);
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 4px;
                padding: 6px;
            }

            body.device-phone .map-stage-quickbar {
                padding: 5px 8px;
            }

            body.device-phone .map-stage-quickbar .toggle.stage-toggle {
                min-height: 34px;
                padding: 4px 8px;
            }
        }

        .phone-action {
            appearance: none;
            display: grid;
            justify-items: center;
            gap: 2px;
            min-height: 38px;
            padding: 6px 4px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(138, 176, 216, 0.16);
            background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
            color: #f4f9ff;
            cursor: pointer;
            transition: transform .18s ease, border-color .18s ease, background .18s ease;
            will-change: transform;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            overflow: hidden;
        }

        .phone-action::after {
            content: '';
            position: absolute;
            left: 14%;
            right: 14%;
            bottom: 3px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(108,150,210,0.22), rgba(108,150,210,0.16));
            opacity: .68;
            /* v8.8 perf: removed box-shadow from scroll-triggered transition */
            transition: opacity .16s ease, height .16s ease, left .16s ease, right .16s ease;
        }

        .phone-action:hover,
        .phone-action.active {
            transform: translateY(-1px);
            border-color: rgba(92, 169, 255, 0.40);
            background: linear-gradient(180deg, rgba(92, 169, 255, 0.14), rgba(69, 214, 189, 0.08));
        }

        .phone-action.active {
            border-color: rgba(70, 203, 224, 0.52);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 18px rgba(6, 20, 36, 0.35);
        }

        .phone-action.active::after {
            left: 9%;
            right: 9%;
            height: 3px;
            opacity: 1;
            background: linear-gradient(90deg, rgba(52,191,255,0.95), rgba(46,230,192,0.95));
            box-shadow: 0 0 12px rgba(46,230,192,0.45), 0 0 18px rgba(52,191,255,0.3);
        }

        .phone-action:active {
            transform: translateY(0) scale(0.96);
            transition-duration: .08s;
        }

        .phone-action:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .phone-action-key {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .phone-action-value {
            font-size: 10px;
            color: var(--muted);
            text-align: center;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
        }

        /* Phone drawer backdrop overlay */
        .phone-drawer-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 89;
            background: rgba(0, 0, 0, 0.38);
            backdrop-filter: blur(12px) saturate(1.06);
            -webkit-backdrop-filter: blur(12px) saturate(1.06);
            opacity: 0;
            transition: opacity .28s ease;
            -webkit-tap-highlight-color: transparent;
        }

        body.device-phone .phone-drawer-backdrop.visible {
            display: block;
            opacity: 1;
        }

        body.device-phone .legal-strip {
            display: none;
        }

        /* v4.1: Dynamic Island-style notification for Mac */
        .dynamic-island {
            position: fixed;
            top: 12px;
            left: 50%;
            transform: translateX(-50%) translateY(-8px) scale(0.92);
            z-index: 9999;
            padding: 12px 20px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(12, 26, 44, 0.92), rgba(6, 16, 28, 0.96));
            /* v8.9: premium glass with subtle blur */
            backdrop-filter: blur(12px) saturate(1.08);
            -webkit-backdrop-filter: blur(12px) saturate(1.08);
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 
                0 8px 24px rgba(0,0,0,0.36),
                0 2px 8px rgba(62,162,255,0.10),
                inset 0 1px 0 var(--glass-rim);
            color: #f4fbff;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .28s var(--transition-spring);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .dynamic-island.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        
        .dynamic-island-icon {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        @media (hover: none) {
            .dynamic-island {
                top: auto;
                bottom: calc(env(safe-area-inset-bottom) + 102px);
                font-size: 12px;
                padding: 8px 12px;
                border-radius: var(--radius-md);
                transform: translateX(-50%) translateY(6px) scale(0.96);
                max-width: min(88vw, 360px);
            }

            .dynamic-island.visible {
                transform: translateX(-50%) translateY(0) scale(1);
            }
        }

        /* ACCESSIBILITY: Enhanced focus visible styles for interactive elements */
        .route-card:focus-visible,
        .lot-card:focus-visible,
        .kpi:focus-visible,
        .preset-button:focus-visible,
        .map-preset:focus-visible,
        .phone-action:focus-visible,
        button:focus-visible {
            outline: 2px solid rgba(62, 162, 255, 0.9);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(62, 162, 255, 0.25), inset 0 0 0 1px rgba(62, 162, 255, 0.3);
        }

        /* v7.5: Mobile GPU relief — lighter blur on small screens */
        @media (max-width: 640px) {
            :root {
                --glass-1: blur(8px) saturate(1.04);
                --glass-2: blur(10px) saturate(1.06);
                --glass-3: blur(12px) saturate(1.06);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .floating-card,
            .route-pill,
            .tab,
            .chip,
            .toggle,
            .phone-action,
            .tablet-info-tab {
                will-change: auto !important;
            }
        }

        @media (prefers-color-scheme: light) {
            :root {
                color-scheme: dark;
            }
        }

        body.device-tablet .sidebar {
            padding: 0;
            gap: 14px;
            background: transparent;
            border: 0;
            box-shadow: none;
            backdrop-filter: none;
        }

        body.device-tablet .tablet-info-tabs {
            display: grid;
            padding: 10px 12px;
            border-radius: 18px;
        }

        body.device-tablet #summary-panel,
        body.device-tablet #filters-panel {
            display: none;
        }

        body.device-tablet .sidebar-scroll {
            gap: 10px;
        }

        body.device-phone .headline-strip,
        body.device-desktop.viewport-short .headline-strip {
            grid-template-columns: 1fr;
        }

        body.device-tablet,
        body.device-desktop.viewport-short {
            --map-height: min(72vh, 760px);
            --map-min-height: 620px;
        }

        body.device-tablet {
            --map-height: min(56vh, 680px);
            --map-min-height: 420px;
        }

        body.device-phone {
            --map-height: 54vh;
            --map-min-height: 420px;
            padding-top: max(8px, env(safe-area-inset-top));
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
            padding-bottom: max(10px, env(safe-area-inset-bottom));
        }

        body.device-phone .shell {
            gap: 0;
            padding-bottom: max(68px, calc(58px + env(safe-area-inset-bottom)));
        }

        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .hero-topline {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: start;
        }

        .hero-focus {
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid rgba(136, 172, 229, 0.18);
            background: rgba(255,255,255,0.04);
            color: #dbe9ff;
            font-size: 12px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--glow);
            cursor: pointer;
            transition: .18s ease;
        }

        .hero-focus:hover {
            transform: translateY(-1px);
            border-color: rgba(136, 210, 255, 0.36);
        }

        .hero-focus.active {
            background: linear-gradient(180deg, rgba(119, 221, 255, 0.18), rgba(46, 230, 192, 0.12));
            border-color: rgba(136, 210, 255, 0.44);
            color: #f6ffff;
        }

        .map-stage.command-center .floating-top-left,
        .map-stage.command-center .floating-bottom-right,
        .map-stage.command-center .floating-bottom-left {
            opacity: 0;
            transform: translateY(-10px) scale(.985);
            pointer-events: none;
        }

        .map-stage.command-center .floating-top-right {
            width: min(280px, calc(100% - 36px));
        }

        .map-stage.command-center #map {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 28px 72px rgba(0, 0, 0, 0.32);
        }

        body.device-desktop:not(.viewport-short).command-center-mode .headline-strip {
            display: none;
        }

        body.device-desktop:not(.viewport-short).command-center-mode .sidebar {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0, 0, 0, 0.2);
            border-color: rgba(120, 154, 211, 0.12);
        }

        body.device-desktop:not(.viewport-short).command-center-mode .map-stage {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 32px 82px rgba(0,0,0,0.28);
        }

        .hero-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .hero-kpis .kpi {
            padding: 12px;
            min-height: 78px;
        }

        .hero-kpis .kpi .value {
            font-size: clamp(18px, 1.2vw, 20px);
        }

        .route-card,
        .lot-card,
        /* v8.8: Panel — smooth spring transform */
        .panel {
            padding: 18px 16px;
            background: linear-gradient(180deg, rgba(12, 24, 40, 0.78), rgba(6, 13, 24, 0.84));
            box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-rim-bottom), var(--shadow-soft), var(--glow);
            backdrop-filter: var(--glass-1);
            -webkit-backdrop-filter: var(--glass-1);
            position: relative;
            overflow: hidden;
            /* v8.8 perf: compositor-only transition */
            transition: opacity .25s ease, transform .25s var(--transition-smooth);
        }

        /* v8.8: Card top accent line — more vibrant */
        .route-card::before,
        .lot-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 2px;
            background: linear-gradient(90deg, rgba(46, 230, 192, 0), rgba(46, 230, 192, 0.85), rgba(74, 169, 255, 0.80), rgba(143, 116, 255, 0.45), rgba(74, 169, 255, 0));
            opacity: .65;
            pointer-events: none;
        }

        /* v8.3: Subtle inner glow on card hover */
        .route-card::after,
        .lot-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 52%, transparent 60%);
            background-size: 250% 100%;
            background-position: 200% 0;
            transition: background-position .5s ease;
            pointer-events: none;
        }
        .route-card:hover::after,
        .lot-card:hover::after {
            background-position: -50% 0;
        }

        .route-card .tiny,
        .lot-card .tiny {
            line-height: 1.45;
        }

        .panel[hidden] {
            display: none !important;
        }

        /* v8.8: Active card — stronger selection glow */
        .route-card.active,
        .lot-card.active,
        .tab.active {
            background: linear-gradient(180deg, rgba(12, 30, 46, 0.88), rgba(6, 16, 28, 0.92));
            border-color: rgba(46, 230, 192, 0.44);
            box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-soft), 0 0 22px rgba(46, 230, 192, 0.12);
        }

        .lot-card.derived {
            border-style: dashed;
            opacity: 0.9;
        }

        .card-head,
        .row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: start;
        }

        .route-list,
        .lot-list,
        .timeline { display: grid; gap: 10px; }

        /* v8.2 perf: skip rendering off-screen cards */
        .route-list > .route-card,
        .lot-list > .lot-card {
            content-visibility: auto;
            contain-intrinsic-size: auto 80px;
        }

        .lot-actions {
            row-gap: 7px;
        }

        .panel-purpose {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            margin-top: 5px;
            padding: 2px 9px;
            border-radius: 999px;
            border: 1px solid rgba(131, 174, 225, 0.2);
            background: rgba(255,255,255,0.04);
            color: rgba(200, 220, 244, 0.84);
            font-family: var(--display-font);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: .11em;
            text-transform: uppercase;
        }

        .lot-marker {
            display: grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1.5px solid rgba(255,255,255,0.88);
            box-shadow: 0 8px 18px rgba(0,0,0,0.24);
            /* v8.8 perf: removed backdrop-filter from map marker */
            transition: transform .18s ease;
        }

        .lot-marker-host {
            display: grid;
            place-items: center;
        }

        .lot-marker-core {
            width: 5px;
            height: 5px;
            border-radius: 999px;
            background: white;
            box-shadow: 0 0 8px rgba(255,255,255,0.34);
        }

        .lot-marker.selected {
            transform: scale(1.35);
            border-color: rgba(255,255,255,0.98);
            box-shadow: 0 0 0 5px rgba(137, 182, 255, 0.32), 0 0 18px rgba(137, 182, 255, 0.22), 0 14px 28px rgba(0,0,0,0.3);
        }

        .segment-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 9px;
            border-radius: 999px;
            background: rgba(6, 14, 26, 0.82);
            border: 1px solid rgba(255,255,255,0.12);
            color: #e9f3ff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
            backdrop-filter: blur(16px) saturate(1.1);
            white-space: nowrap;
            transition: transform .18s ease, opacity .18s ease, font-size .18s ease, padding .18s ease;
        }

        body.map-zoom-far .segment-chip {
            font-size: 9px;
            padding: 4px 7px;
            opacity: 0.88;
            transform: scale(0.96);
        }

        body.map-zoom-very-far .segment-chip {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.8);
        }

        .segment-chip .dot {
            width: 8px;
            height: 8px;
        }

        .route-shield {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 24px;
            padding: 2px 6px;
            border-radius: 4px;
            background: linear-gradient(180deg, #1d9444, #127332);
            border: 2px solid rgba(255,255,255,0.95);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.45);
            box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
            white-space: nowrap;
            cursor: pointer;
            transition: transform .15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .route-shield:hover {
            transform: scale(1.12);
        }
        
        .route-shield:active {
            transform: scale(1.05);
            transition-duration: .08s;
        }

        .selection-header {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: start;
            padding-bottom: 8px;
            /* v8.8: Selection header — stronger separator */
            border-bottom: 1px solid rgba(138, 176, 216, 0.18);
        }

        .selection-actions {
            display: grid;
            justify-items: end;
            gap: 8px;
            min-width: 126px;
        }

        .selection-actions .status-pill {
            justify-self: end;
            min-height: 34px;
            font-size: 10.5px;
        }

        .detail-pills {
            gap: 7px;
            margin-top: 10px;
        }

        .selection-clear {
            appearance: none;
            border: 1px solid rgba(136, 172, 229, 0.2);
            border-radius: 999px;
            padding: 8px 12px;
            min-height: 36px;
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
            color: #f4fbff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            cursor: pointer;
            /* v8.8 perf: compositor-only transition */
            transition: transform .16s var(--transition-smooth), border-color .16s ease;
        }

        .selection-clear:hover {
            transform: translateY(-1px);
            border-color: rgba(136, 210, 255, 0.38);
            background: linear-gradient(180deg, rgba(119, 221, 255, 0.16), rgba(46, 230, 192, 0.10));
        }

        .selection-clear:active {
            transform: translateY(0) scale(0.97);
            transition-duration: .08s;
        }

        .selection-clear[hidden] {
            display: none;
        }

        .copy-code-btn {
            appearance: none;
            border: 1px solid rgba(136, 172, 229, 0.18);
            border-radius: 999px;
            padding: 6px 10px;
            min-height: 30px;
            background: rgba(255,255,255,0.06);
            color: rgba(209, 232, 255, 0.72);
            font-size: 13px;
            cursor: pointer;
            transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
            line-height: 1;
        }
        .copy-code-btn:hover {
            transform: translateY(-1px) scale(1.08);
            border-color: rgba(46, 230, 192, 0.45);
            color: rgba(46, 230, 192, 0.9);
            background: rgba(46, 230, 192, 0.08);
        }
        .copy-code-btn[hidden] { display: none; }

        .selection-title {
            font-family: var(--accent-font);
            font-size: clamp(23px, 1.85vw, 29px);
            line-height: 1.04;
            letter-spacing: -.02em;
            text-wrap: balance;
        }
        .badge-line { display: inline-flex; align-items: center; gap: 8px; }
        .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }

        .selection-note {
            position: relative;
            overflow: hidden;
            padding: 13px 14px 13px 18px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
            border: 1px solid rgba(136, 172, 229, 0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .selection-note::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 3px;
            background: linear-gradient(180deg, var(--accent-2), var(--accent));
            opacity: .9;
        }

        .fact-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 9px;
        }

        .fact {
            padding: 13px 13px 13px 16px;
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            border-left: 3px solid rgba(46, 230, 192, 0.35);
            min-width: 0;
            overflow: hidden;
        }

        .fact strong {
            display: block;
            margin-bottom: 6px;
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #eef7ff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fact a {
            color: var(--accent-2);
            text-decoration: none;
            border-bottom: 1px solid rgba(62, 162, 255, 0.45);
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .fact a:hover {
            color: #8fcbff;
            border-bottom-color: rgba(143, 203, 255, 0.9);
        }

        .timeline {
            max-height: inherit;
            overflow: auto;
            padding-right: 2px;
        }

        .timeline-item {
            display: grid;
            grid-template-columns: 62px 1fr;
            gap: 12px;
            align-items: start;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            position: relative;
            transition: transform .16s ease, border-color .16s ease;
        }

        .timeline-item:hover {
            transform: translateX(3px);
            border-bottom-color: rgba(255,255,255,0.1);
        }

        .timeline-item::before {
            content: "";
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(180deg, rgba(62,162,255,0), rgba(62,162,255,0.28), rgba(46,230,192,0));
            pointer-events: none;
        }

        .timeline-item:last-child { border-bottom: 0; }
        .timeline-year {
            color: var(--accent);
            font-family: var(--display-font);
            font-weight: 700;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
            position: relative;
            z-index: 1;
        }
        .timeline-year.success { color: var(--open); }
        .timeline-year.warning { color: var(--construction); }
        .timeline-year.danger  { color: var(--closed); }
        .timeline-year.info    { color: var(--accent-2); }
        .timeline-state-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 999px;
            margin-top: 4px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }
        .timeline-state-badge.success { background: rgba(46,230,192,0.14); color: var(--open); }
        .timeline-state-badge.warning { background: rgba(255,179,87,0.14); color: var(--construction); }
        .timeline-state-badge.danger  { background: rgba(255,100,138,0.14); color: var(--closed); }
        .timeline-state-badge.info    { background: rgba(62,162,255,0.14); color: var(--accent-2); }

        .selection-progress {
            height: 5px;
            border-radius: 999px;
            background: rgba(255,255,255,0.07);
            overflow: hidden;
            margin-top: 10px;
        }
        .selection-progress > span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--accent-3));
            transition: width 0.45s ease;
        }
        .selection-progress[hidden] { display: none; }

        .sort-hint {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: rgba(150, 185, 225, 0.42);
        }

        .mini-note {
            line-height: 1.45;
        }

        .floating-card::-webkit-scrollbar,
        .timeline::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .floating-card::-webkit-scrollbar-thumb,
        .timeline::-webkit-scrollbar-thumb {
            background: rgba(138, 176, 216, 0.38);
            border-radius: 999px;
        }

        #selection-panel,
        .floating-bottom-right {
            display: grid;
            gap: 8px;
            align-content: start;
        }

        #selection-panel {
            --selection-tone: var(--accent);
            border-left: 2px solid color-mix(in srgb, var(--selection-tone) 66%, transparent);
        }

        .floating-bottom-right .card-head {
            position: sticky;
            top: -2px;
            z-index: 1;
            padding: 4px 0 8px;
            background: linear-gradient(180deg, rgba(11, 22, 37, 0.92), rgba(11, 22, 37, 0.74), rgba(11, 22, 37, 0));
            backdrop-filter: blur(4px);
        }

        #network-panel h3,
        #notes-panel h3,
        #routes-panel h3,
        #lots-panel h3 {
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(138, 176, 216, 0.14);
        }

        .kpi .eyebrow {
            opacity: .86;
        }

        .sidebar-scroll > .panel {
            scroll-margin-top: 92px;
        }

        body.device-desktop.viewport-short .floating-top-right {
            max-height: min(40vh, calc(100% - 126px));
        }

        body.device-desktop.viewport-short .floating-bottom-right {
            max-height: min(31vh, 286px);
        }

        body.device-tablet .floating-bottom-right {
            max-height: min(40vh, calc(100% - 118px));
            overflow: auto;
        }

        .mini-note {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.05);
        }

        .leaflet-container {
            background: linear-gradient(180deg, #0b1524 0%, #0d1b2d 100%);
            font-family: var(--body-font);
            transform: translateZ(0);
            touch-action: pan-x pan-y;
            -webkit-user-select: none;
            user-select: none;
        }

        @media (pointer: coarse) {
            #map,
            .leaflet-container {
                touch-action: manipulation;
            }
        }

        .leaflet-pane.leaflet-tile-pane img {
            filter: saturate(1.12) contrast(1.06) brightness(1.02);
            /* v9.0 fluid: gentle tile crossfade on basemap swap */
            transition: opacity .28s var(--transition-smooth);
        }

        /* Satellite imagery: neutral filter — don't artificially boost contrast */
        body[data-basemap="satellite"] .leaflet-pane.leaflet-tile-pane img {
            filter: saturate(1.05) contrast(1.02) brightness(1.0);
        }

        /* v9.0 fluid: premium drop-shadow on canvas-rendered routes for depth without blowing up paint cost. */
        .leaflet-pane.leaflet-overlay-pane,
        .leaflet-canvas-renderer,
        canvas.leaflet-zoom-animated {
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 1px rgba(46, 230, 192, 0.18));
        }
        body.perf-low-power .leaflet-pane.leaflet-overlay-pane,
        body.perf-low-power .leaflet-canvas-renderer,
        body.perf-low-power canvas.leaflet-zoom-animated,
        body.perf-low-power .leaflet-pane.leaflet-tile-pane img {
            filter: none !important;
        }
        body.perf-low-power .leaflet-pane.leaflet-tile-pane img {
            transition: none !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .leaflet-pane.leaflet-overlay-pane,
            .leaflet-canvas-renderer,
            canvas.leaflet-zoom-animated { filter: none; }
        }

        .leaflet-tile {
            outline: 1px solid transparent;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            image-rendering: auto;
        }

        .leaflet-zoom-animated,
        .leaflet-pane,
        .leaflet-tile-container {
            transform: translateZ(0);
            will-change: transform;
        }

        .leaflet-bar,
        .leaflet-control-zoom a,
        .leaflet-control-layers {
            background: rgba(8, 16, 30, 0.80);
            border-color: rgba(131, 168, 225, 0.14);
            color: var(--text);
            box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-rim);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
        }

        .leaflet-control-zoom a {
            width: 36px;
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            font-weight: 600;
            transition: background .15s ease, color .15s ease, transform .15s ease;
        }
        .leaflet-control-zoom a:hover {
            background: rgba(46, 230, 192, 0.12);
            color: var(--accent);
            transform: scale(1.04);
        }
        .leaflet-control-zoom a:active {
            transform: scale(0.96);
        }

        .leaflet-popup-content-wrapper, .leaflet-popup-tip {
            background: linear-gradient(180deg, rgba(10, 19, 33, 0.90), rgba(4, 10, 20, 0.95));
            color: var(--text);
            border: 1px solid rgba(136, 172, 229, 0.16);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--glass-rim);
            backdrop-filter: var(--glass-2);
            -webkit-backdrop-filter: var(--glass-2);
        }

        .leaflet-control-attribution { background: rgba(8, 14, 25, 0.74); color: var(--muted); }

        .atlas-popup-card .leaflet-popup-content {
            margin: 12px 12px 13px;
        }

        .atlas-popup-card .leaflet-popup-content-wrapper {
            border-radius: 20px;
            min-width: 0;
            animation: popup-reveal 0.18s var(--transition-smooth) both;
        }

        @keyframes popup-reveal {
            from { opacity: 0; transform: translateY(6px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .atlas-popup-card .leaflet-popup-close-button {
            color: #e6f0ff;
            opacity: .86;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: rgba(255,255,255,0.06);
            line-height: 28px;
            text-align: center;
        }

        .atlas-popup-card .leaflet-popup-close-button:hover {
            opacity: 1;
            background: rgba(255,255,255,0.1);
        }

        .map-popup {
            min-width: 236px;
            max-width: 292px;
            display: grid;
            gap: 8px;
        }

        /* In popup context, detail-pills should not add extra top margin */
        .map-popup .detail-pills {
            margin-top: 0;
        }

        body.device-phone .map-popup {
            min-width: 200px;
            max-width: clamp(200px, 82vw, 280px);
        }

        body.device-desktop .map-popup {
            min-width: 260px;
            max-width: 340px;
        }

        .map-popup strong {
            font-size: 14px;
            letter-spacing: -.02em;
        }

        .popup-header {
            display: grid;
            gap: 5px;
            padding-right: 24px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(128, 172, 219, 0.12);
        }

        .popup-subtitle {
            color: rgba(219, 231, 247, 0.72);
            font-size: 11px;
            line-height: 1.4;
        }

        .popup-metrics {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        .popup-metric {
            padding: 10px 11px;
            border-radius: 12px;
            border: 1px solid rgba(120,154,211,0.12);
            background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.06);
            transition: background .15s ease, border-color .15s ease;
        }
        .popup-metric:hover {
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border-color: rgba(120,154,211,0.22);
        }

        .popup-metric .eyebrow {
            margin-bottom: 3px;
        }

        .popup-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .popup-chip {
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(120,154,211,0.16);
            background: rgba(255,255,255,0.04);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .popup-lot-list {
            display: grid;
            gap: 8px;
        }

        .popup-menu {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .popup-note {
            padding: 9px 11px;
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(136, 172, 229, 0.1);
            color: rgba(219, 231, 247, 0.82);
            font-size: 12px;
            line-height: 1.48;
        }

        .popup-note-kicker {
            margin-bottom: 5px;
            color: var(--accent-2);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .popup-footer {
            font-size: 11px;
            color: rgba(219, 231, 247, 0.68);
            border-top: 1px solid rgba(255,255,255,0.06);
            padding-top: 9px;
        }

        .official-list {
            display: grid;
            gap: 8px;
        }

        .qa-audit-panel {
            display: grid;
            gap: 10px;
        }

        .qa-audit-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .qa-audit-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(136, 172, 229, 0.14);
            background: rgba(255,255,255,0.04);
            color: #dce9f8;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .03em;
        }

        .qa-audit-chip.error {
            border-color: rgba(255, 100, 138, 0.28);
            color: #ffd6e1;
            background: rgba(255, 100, 138, 0.09);
        }

        .qa-audit-chip.warning {
            border-color: rgba(255, 179, 87, 0.28);
            color: #ffe6c2;
            background: rgba(255, 179, 87, 0.09);
        }

        .qa-audit-sections,
        .qa-audit-findings {
            display: grid;
            gap: 8px;
        }

        .qa-audit-section-row,
        .qa-audit-finding {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(136, 172, 229, 0.12);
            display: grid;
            gap: 6px;
        }

        .qa-audit-section-row {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }

        .qa-audit-section-button {
            width: 100%;
            text-align: left;
            cursor: pointer;
            transition: transform .18s ease, border-color .18s ease, background .18s ease;
        }

        .qa-audit-section-button:hover {
            transform: translateY(-1px);
            border-color: rgba(136, 172, 229, 0.26);
        }

        .qa-audit-section-button.active {
            background: rgba(70, 142, 255, 0.12);
            border-color: rgba(118, 173, 255, 0.34);
            box-shadow: 0 10px 24px rgba(16, 31, 54, 0.18);
        }

        .qa-audit-section-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .qa-audit-finding-top,
        .qa-audit-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .qa-audit-code {
            font-family: "SFMono-Regular", Consolas, monospace;
            font-size: 11px;
            color: #a7bfd9;
        }

        .qa-audit-path {
            font-family: "SFMono-Regular", Consolas, monospace;
            font-size: 11px;
            color: #8fa8c2;
            word-break: break-word;
        }

        .qa-audit-filter-note {
            font-size: 11px;
            color: #9db1c8;
        }

        .qa-audit-action-btn {
            justify-self: start;
        }

        .qa-audit-empty {
            padding: 12px;
            border-radius: 12px;
            border: 1px solid rgba(46, 230, 192, 0.18);
            background: rgba(46, 230, 192, 0.06);
            color: #def7f0;
        }

        body.device-phone #qa-audit-panel,
        body.device-tablet #qa-audit-panel {
            display: none !important;
        }

        body.device-phone #data-qa-panel,
        body.device-tablet #data-qa-panel {
            display: none !important;
        }

        .health-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .02em;
            transition: transform .2s ease;
            cursor: default;
        }

        .health-badge:hover {
            transform: translateY(-1px);
        }

        .health-badge.grade-a {
            border: 1px solid rgba(69, 214, 189, 0.35);
            background: rgba(69, 214, 189, 0.10);
            color: #b5f5e8;
            box-shadow: 0 0 20px rgba(69, 214, 189, 0.08);
        }

        .health-badge.grade-b {
            border: 1px solid rgba(92, 169, 255, 0.35);
            background: rgba(92, 169, 255, 0.10);
            color: #c4e0ff;
            box-shadow: 0 0 20px rgba(92, 169, 255, 0.08);
        }

        .health-badge.grade-c {
            border: 1px solid rgba(244, 178, 90, 0.35);
            background: rgba(244, 178, 90, 0.10);
            color: #ffe6c2;
            box-shadow: 0 0 20px rgba(244, 178, 90, 0.08);
        }

        .health-badge.grade-d,
        .health-badge.grade-f {
            border: 1px solid rgba(239, 111, 140, 0.35);
            background: rgba(239, 111, 140, 0.10);
            color: #ffd6e1;
            box-shadow: 0 0 20px rgba(239, 111, 140, 0.08);
        }

        .health-score-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }

        .health-score-item {
            padding: 8px 6px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(136, 172, 229, 0.10);
            text-align: center;
            display: grid;
            gap: 3px;
        }

        .health-score-item .score-value {
            font-size: 18px;
            font-weight: 800;
            font-family: var(--display-font);
        }

        .health-score-item .score-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--muted);
        }

        .health-concern {
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(255, 179, 87, 0.05);
            border: 1px solid rgba(255, 179, 87, 0.14);
            font-size: 11px;
            color: #e8d5b8;
            line-height: 1.5;
        }

        .data-qa-panel {
            display: grid;
            gap: 10px;
        }

        .data-qa-section {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(136, 172, 229, 0.12);
            display: grid;
            gap: 6px;
        }

        .data-qa-metric-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .data-qa-metric-label {
            font-size: 11px;
            color: var(--muted);
        }

        .data-qa-metric-value {
            font-size: 12px;
            font-weight: 700;
            font-family: var(--display-font);
        }

        .data-qa-metric-value.healthy { color: var(--open); }
        .data-qa-metric-value.warning { color: var(--construction); }
        .data-qa-metric-value.error { color: var(--closed); }

        .official-item {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(136, 172, 229, 0.14);
            display: grid;
            gap: 6px;
        }

        .official-item a {
            color: var(--accent-2);
            text-decoration: none;
        }

        .official-item a:hover {
            color: #8fcbff;
        }

        .popup-lot-item {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(136, 172, 229, 0.14);
            display: grid;
            gap: 6px;
        }

        @media (max-width: 1480px) {
            .workspace { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
            .floating-top-left { width: min(42%, 420px); }
        }

        @media (max-width: 1350px) {
            .workspace {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "map"
                    "headlines"
                    "sidebar";
            }
            .sidebar {
                position: static;
                max-height: none;
                overflow: visible;
            }
            .floating-card {
                position: static;
            }
            .map-stage {
                display: grid;
                gap: 14px;
                min-height: auto;
            }
            .map-stage-quickbar {
                display: grid;
            }

            .desktop-map-dock {
                display: none;
            }
            :root {
                --map-height: min(72vh, 760px);
                --map-min-height: 640px;
            }
            .floating-top-left,
            .floating-top-right,
            .floating-bottom-right,
            .floating-bottom-left {
                width: auto;
                max-height: none;
                overflow: visible;
            }
        }

        @media (max-width: 1180px) {
            :root {
                --shell-padding: max(14px, env(safe-area-inset-left));
                --shell-padding-right: max(14px, env(safe-area-inset-right));
                --shell-padding-top: max(14px, env(safe-area-inset-top));
                --shell-padding-bottom: max(14px, env(safe-area-inset-bottom));
                --map-height: min(68vh, 700px);
                --map-min-height: 560px;
            }
            .topbar {
                position: static;
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "brand"
                    "actions"
                    "routes";
                align-items: start;
                gap: 10px;
            }
            .brand {
                padding-inline-end: 0;
            }
            .brand-row {
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 6px 8px;
            }
            .brand h1 {
                flex-basis: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                text-wrap: balance;
            }
            .beta-chip {
                margin-top: 2px;
            }
            .brand .helper {
                max-width: 52ch;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: normal;
            }
            .route-pills {
                padding: 4px 4px 2px;
            }
            .top-actions {
                grid-template-columns: 1fr;
                flex-wrap: wrap;
                justify-content: flex-end;
                border-radius: 18px;
            }
            .top-actions .tabs,
            .top-actions .select,
            .toolbar-block {
                width: 100%;
            }
            .map-stage {
                padding: 16px;
                gap: 12px;
            }
            .map-preset-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 1024px) {
            .route-pill {
                min-width: 138px;
            }
            .selection-header {
                flex-direction: column;
                align-items: stretch;
            }
            .selection-actions {
                justify-items: start;
                min-width: 0;
            }
        }

        @media (max-width: 960px) {
            .topbar {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "brand"
                    "actions"
                    "routes";
            }
            .headline-strip { grid-template-columns: 1fr; }
            .stats-row, .hero-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .kpi-grid, .fact-grid { grid-template-columns: 1fr; }
            :root {
                --map-height: 60vh;
                --map-min-height: 500px;
            }
            .map-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 860px) {
            .route-pills {
                padding: 6px;
                gap: 8px;
            }
            .top-actions {
                padding: 10px;
            }
            .hero-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 760px) {
            :root {
                --shell-padding: max(10px, env(safe-area-inset-left));
                --shell-padding-right: max(10px, env(safe-area-inset-right));
                --shell-padding-top: max(10px, env(safe-area-inset-top));
                --shell-padding-bottom: max(12px, env(safe-area-inset-bottom));
                --map-height: 54vh;
                --map-min-height: 420px;
            }
            .map-preset-grid { grid-template-columns: 1fr 1fr; }
            .map-stage { padding: 10px; }
            .map-stage-quickbar {
                margin-bottom: 10px;
                padding: 10px;
            }
            .map-stage-quick-presets {
                grid-auto-columns: minmax(124px, max-content);
                gap: 8px;
            }
            .route-pill {
                min-width: 128px;
                min-height: 56px;
            }
            .selection-title {
                font-size: 22px;
            }
        }

        @media (max-width: 640px) {
            .shell { min-height: calc(100vh - var(--shell-padding-top) - var(--shell-padding-bottom)); }
            .topbar,
            .sidebar,
            .map-stage,
            .headline-strip,
            .panel,
            .floating-card,
            .legal-strip {
                border-radius: 20px;
            }
            .map-preset-grid,
            .stats-row {
                grid-template-columns: 1fr;
            }
            .hero-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .route-pill {
                min-width: 120px;
            }
        }

        @media (pointer: coarse) {
            .route-pill,
            .tab,
            .chip,
            .toggle,
            .selection-clear,
            .top-actions .select,
            .map-stage-quickbar .toggle.stage-toggle {
                min-height: 44px;
            }

            .route-pill {
                min-width: 148px;
            }
        }

        /* ── Print styles v8.3 ─────────────────────────────────────────── */
        @media print {
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            body {
                background: #fff !important;
                color: #1a1a2e !important;
                font-size: 11pt;
                padding: 0;
            }
            body::before, body::after { display: none !important; }
            .topbar, .top-actions, .phone-action-dock, .phone-action-bar,
            .dynamic-island, .cmd-palette-backdrop, .shortcuts-overlay,
            .leaflet-control-container, .year-overlay, .context-menu,
            .tablet-control-surface, .phone-basemap-picker, .phone-lang-tray,
            .phone-nav-strip, .phone-drawer-backdrop, .map-stage-quickbar,
            .desktop-map-dock, .donate-strip, .donation-popup-overlay, .skip-link, .sr-live,
            .topbar-ring, .topbar-kpis, .topbar-search, .beta-chip,
            .route-pills, .map-tools, noscript { display: none !important; }
            .shell { display: block; max-width: 100%; }
            .workspace {
                display: block !important;
                grid-template-columns: 1fr !important;
            }
            .sidebar {
                position: static !important;
                max-height: none !important;
                overflow: visible !important;
                background: #fff !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
            .map-stage {
                height: 360px !important;
                break-after: page;
                border: 1px solid #ccc !important;
                border-radius: 8px !important;
                background: #fff !important;
                box-shadow: none !important;
            }
            .floating-card {
                position: static !important;
                width: 100% !important;
                max-height: none !important;
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                background: #fff !important;
                color: #1a1a2e !important;
                margin: 8pt 0;
                page-break-inside: avoid;
            }
            .route-card, .lot-card, .panel, .kpi {
                background: #f8f9fb !important;
                border: 1px solid #ddd !important;
                box-shadow: none !important;
                color: #1a1a2e !important;
                page-break-inside: avoid;
            }
            .headline-strip {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 8pt !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
            .headline-card {
                background: #f8f9fb !important;
                border: 1px solid #ddd !important;
                box-shadow: none !important;
                color: #1a1a2e !important;
            }
            .headline-card::before, .headline-card::after { display: none !important; }
            .legal-strip {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                color: #333 !important;
                padding: 12pt 0 !important;
                border-top: 1px solid #ddd !important;
                border-radius: 0 !important;
            }
            .eyebrow { color: #666 !important; }
            .muted, .helper, .tiny { color: #555 !important; }
            .progress-track { background: #e0e0e0 !important; }
            .progress-fill { background: #2c7a5e !important; }
            .progress-fill::after { display: none !important; }
            .version-badge { border-color: #ccc !important; color: #666 !important; background: #f0f0f0 !important; }
            a { color: #1a5fb4 !important; text-decoration: underline !important; }
            @page {
                margin: 1.5cm;
                size: A4 portrait;
            }
        }

        /* ── Beta accuracy disclaimer popup ── */
        .beta-popup {
            position: fixed;
            left: 12px;
            right: 12px;
            bottom: 80px;
            z-index: 9990;
            display: flex;
            justify-content: center;
            pointer-events: none;
        }
        @media (min-width: 540px) {
            .beta-popup {
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                width: min(90vw, 500px);
            }
        }
        .beta-popup[hidden] { display: none; }
        .beta-popup-card {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: var(--radius-md);
            border: 1px solid rgba(251, 191, 36, 0.28);
            background: rgba(14, 22, 34, 0.97);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(251, 191, 36, 0.07);
            backdrop-filter: blur(22px) saturate(1.1);
            -webkit-backdrop-filter: blur(22px) saturate(1.1);
            pointer-events: auto;
            animation: beta-popup-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes beta-popup-in {
            from { opacity: 0; transform: translateY(18px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .beta-popup-glow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1.5px;
            background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.65) 30%, rgba(251, 191, 36, 0.65) 70%, transparent 100%);
            pointer-events: none;
        }
        .beta-popup-inner {
            padding: 16px 16px 14px;
        }
        .beta-popup-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .beta-popup-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid rgba(251, 191, 36, 0.28);
            background: rgba(251, 191, 36, 0.10);
            font-size: 14px;
            line-height: 1;
        }
        .beta-popup-copy {
            flex: 1;
            min-width: 0;
        }
        .beta-popup-badge {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            border: 1px solid rgba(251, 191, 36, 0.28);
            background: rgba(251, 191, 36, 0.09);
            padding: 2px 8px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(253, 220, 120, 0.90);
            font-family: var(--display-font);
        }
        .beta-popup-title {
            margin: 4px 0 0;
            font-size: 13px;
            font-weight: 700;
            color: rgba(254, 235, 170, 0.95);
            line-height: 1.35;
            font-family: var(--display-font);
        }
        .beta-popup-close {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: rgba(251, 191, 36, 0.48);
            font-size: 14px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            padding: 0;
            line-height: 1;
        }
        .beta-popup-close:hover {
            background: rgba(251, 191, 36, 0.10);
            color: rgba(251, 191, 36, 0.90);
        }
        .beta-popup-body {
            margin: 11px 0 0;
            font-size: 11.5px;
            line-height: 1.65;
            color: rgba(254, 220, 100, 0.60);
        }
        .beta-popup-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 13px;
        }
        .beta-popup-link {
            font-size: 11.5px;
            color: rgba(251, 191, 36, 0.72);
            text-decoration: underline;
            text-decoration-color: rgba(251, 191, 36, 0.28);
            text-underline-offset: 2px;
            transition: color 0.15s, text-decoration-color 0.15s;
            flex-shrink: 0;
        }
        .beta-popup-link:hover {
            color: rgba(251, 191, 36, 1);
            text-decoration-color: rgba(251, 191, 36, 0.55);
        }
        .beta-popup-dismiss {
            border-radius: 10px;
            border: 1px solid rgba(251, 191, 36, 0.28);
            background: rgba(251, 191, 36, 0.09);
            padding: 6px 18px;
            font-size: 12px;
            font-weight: 600;
            color: rgba(253, 220, 100, 0.88);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            line-height: 1.4;
            white-space: nowrap;
            font-family: var(--display-font);
        }
        .beta-popup-dismiss:hover {
            background: rgba(251, 191, 36, 0.18);
            color: rgba(255, 236, 140, 1);
        }