:root {
            --bg: #09141f;
            --bg-soft: #102033;
            --panel: #13253b;
            --panel-soft: #17304d;
            --text: #e7f0fb;
            --muted: #9ab0c8;
            --accent: #34c759;
            --accent-2: #4aa8ff;
            --danger: #ff6b6b;
            --border: #284563;
            --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(1200px 600px at 20% -20%, #1c3d64 0%, transparent 60%),
                radial-gradient(900px 500px at 90% 0%, #22456f 0%, transparent 55%),
                linear-gradient(165deg, var(--bg), #070f18 65%);
            font-family: "Space Grotesk", "Segoe UI", "Helvetica Neue", sans-serif;
            min-height: 100vh;
        }

        .app {
            width: min(1220px, 94vw);
            margin: 24px auto 30px;
            display: grid;
            gap: 16px;
            animation: fade-in 280ms ease-out;
        }

        .app-header {
            background: linear-gradient(165deg, rgba(31, 62, 95, 0.72), rgba(17, 35, 56, 0.72));
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px 20px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(2px);
        }

        .app-header h1 {
            margin: 0;
            font-size: clamp(1.35rem, 1.9vw, 2rem);
            letter-spacing: 0.02em;
        }

        .subhead {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .app-grid {
            display: grid;
            grid-template-columns: minmax(320px, 380px) 1fr;
            gap: 16px;
            align-items: start;
        }

        .panel {
            background: linear-gradient(165deg, var(--panel), var(--panel-soft));
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: var(--shadow);
        }

        .controls {
            padding: 14px;
            display: grid;
            gap: 14px;
        }

        .field {
            display: grid;
            gap: 8px;
        }

        .field-title {
            font-size: 0.82rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

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

        label {
            display: block;
            margin: 0 0 4px;
            font-size: 0.84rem;
            color: var(--muted);
        }

        select, button {
            width: 100%;
            padding: 10px 11px;
            border-radius: 9px;
            border: 1px solid var(--border);
            outline: none;
            font-size: 0.95rem;
            font-family: inherit;
            transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        }

        select {
            background: rgba(9, 22, 35, 0.9);
            color: var(--text);
        }

        select:focus, button:focus {
            border-color: #69b9ff;
            box-shadow: 0 0 0 3px rgba(67, 149, 214, 0.24);
        }

        button {
            background: linear-gradient(145deg, #1f3855, #1a2f47);
            color: var(--text);
            font-weight: 600;
            cursor: pointer;
        }

        button:hover {
            transform: translateY(-1px);
            border-color: #3b648a;
        }

        #clearButton {
            background: linear-gradient(145deg, #4d2430, #40202a);
            border-color: #6d3544;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 2px;
        }

        .chip {
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(6, 16, 25, 0.45);
            color: var(--muted);
            font-size: 0.75rem;
            letter-spacing: 0.04em;
        }

        .chip.start { border-color: rgba(52, 199, 89, 0.5); color: #7ae697; }
        .chip.dest { border-color: rgba(74, 168, 255, 0.55); color: #86c6ff; }
        .chip.warn { border-color: rgba(255, 107, 107, 0.45); color: #ff9f9f; }

        .map-panel {
            padding: 14px;
            display: grid;
            gap: 10px;
        }

        .map-wrap {
            overflow: auto;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: #0b1826;
        }

        #mapCanvas {
            display: block;
            margin: 0;
            background: linear-gradient(180deg, #f5f7fa, #e9edf3);
        }

        .hint {
            color: var(--muted);
            font-size: 0.84rem;
        }

        .route-panel {
            margin-top: 6px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: rgba(9, 20, 31, 0.5);
            min-height: 180px;
        }

        .route-empty {
            color: var(--muted);
            font-size: 0.92rem;
            padding: 10px 2px;
        }

        .route-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 9px;
        }

        .route-item {
            border: 1px solid rgba(61, 90, 117, 0.7);
            background: rgba(10, 24, 37, 0.74);
            border-radius: 10px;
            padding: 8px 10px;
            display: grid;
            gap: 6px;
        }

        .route-title {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.92rem;
            font-weight: 600;
        }

        .route-tags {
            color: #ff9f9f;
            font-size: 0.74rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .route-line {
            font-family: "IBM Plex Mono", "Consolas", "SFMono-Regular", monospace;
            font-size: 0.86rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 7px;
        }

        .token {
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 2px 8px;
            background: rgba(20, 39, 61, 0.65);
            white-space: nowrap;
        }

        .token.start {
            border-color: rgba(52, 199, 89, 0.55);
            color: #8af0a6;
        }

        .token.dest {
            border-color: rgba(74, 168, 255, 0.6);
            color: #9fd0ff;
        }

        .token.auto {
            color: var(--muted);
            border-color: rgba(77, 100, 123, 0.85);
        }

        .arrow {
            color: var(--muted);
            font-size: 0.88rem;
        }

        @keyframes fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 980px) {
            .app-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 620px) {
            .field-grid {
                grid-template-columns: 1fr;
            }
        }