:root {
            --bg: #0f1419;
            --card: #1a2332;
            --text: #e8eaed;
            --muted: #9aa0a6;
            --accent: #4fc3f7;
            --accent-dim: rgba(79, 195, 247, 0.12);
            --border: #2d3848;
            --keypad-bg: #252f3f;
            --pad-h: 228px;
            --remark-amber: #ffab40;
            --fare-text: #81c784;
            --fare-bg: rgba(46, 125, 50, 0.2);
            --fare-border: rgba(76, 175, 80, 0.35);
            --badge-kmb-fg: #ffcdd2;
            --badge-kmb-bg: rgba(198, 40, 40, 0.45);
            --badge-kmb-border: rgba(239, 83, 80, 0.55);
            --badge-ctb-fg: #fff3e0;
            --badge-ctb-bg: rgba(230, 119, 0, 0.42);
            --badge-ctb-border: rgba(255, 167, 38, 0.55);
            --fav-star: #ffd740;
            --timeline-rail: rgba(79, 195, 247, 0.35);
            --surface-float: #1a2332;
            --action-primary: #1565c0;
        }
        * { box-sizing: border-box; }
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            touch-action: manipulation;
        }
        body {
            font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            min-height: 100vh;
            line-height: 1.5;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }
        .wrap { max-width: 960px; margin: 0 auto; padding: 1.5rem; --fav-col-width: min(912px, calc(100vw - 3rem)); }
        .wrap.wrap--picker {
            padding-left: 0;
            padding-right: 0;
            max-width: 520px;
            --fav-col-width: min(520px, calc(100vw - 16px));
            /* 數字+字母鍵盤實際高度（供常用路線浮動列避開） */
            --picker-keypad-full-h: calc(
                var(--picker-touch, 44px) * 4
                + var(--picker-gap, 8px) * 3
                + 28px
                + env(safe-area-inset-bottom, 0px)
            );
        }
        h1 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.5rem; }
        .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
        section {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }
        h2 { font-size: 1rem; margin: 0 0 1rem; color: var(--accent); }
        label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.35rem; }
        input[type="text"], select {
            width: 100%;
            max-width: 420px;
            padding: 0.5rem 0.65rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
        }
        input[type="text"] { max-width: 320px; }
        select { max-width: 480px; }
        button {
            margin-top: 0.75rem;
            padding: 0.5rem 1rem;
            background: #1565c0;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95rem;
        }
        button:hover { background: #1976d2; }
        .err {
            background: #3e2723;
            border: 1px solid #bf360c;
            color: #ffccbc;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.88rem;
        }
        th, td {
            text-align: left;
            padding: 0.5rem 0.6rem;
            border-bottom: 1px solid var(--border);
        }
        th { color: var(--muted); font-weight: 600; }
        tr:hover td { background: rgba(255,255,255,0.03); }
        .meta { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; }
        a { color: var(--accent); }
        .row-inline { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
        .row-inline > div { flex: 0 0 auto; }

        /* —— 手機路線搜尋（數字鍵盤 + 即時列表）—— */
        .mobile-route-picker {
            --picker-touch: 44px;
            --picker-gap: 8px;
            --picker-pad: 1rem;
            --picker-keypad-h: calc(var(--picker-touch) * 4 + 28px);
            display: flex;
            flex-direction: column;
            min-height: 100dvh;
            min-height: 100vh;
            padding-bottom: 0;
        }
        .m-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .m-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem var(--picker-pad, 1rem) 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        .m-back {
            color: var(--accent);
            text-decoration: none;
            font-size: 0.95rem;
            padding: 0.35rem 0.25rem;
            min-height: var(--picker-touch);
            display: inline-flex;
            align-items: center;
            touch-action: manipulation;
        }
        .m-back:active { opacity: 0.8; }
        .m-back:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .m-title { font-weight: 600; font-size: 1.05rem; flex: 1; }
        .m-search-wrap {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin: 0.35rem var(--picker-pad) 0.5rem;
            padding: 0.65rem 0.85rem;
            min-height: var(--picker-touch);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            cursor: default;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }
        .m-search-wrap:focus-within {
            border-color: rgba(79, 195, 247, 0.45);
            box-shadow: 0 0 0 2px var(--accent-dim);
        }
        .m-search-icon {
            flex-shrink: 0;
            width: 1.05rem;
            height: 1.05rem;
            border: 2px solid var(--muted);
            border-radius: 50%;
            position: relative;
            opacity: 0.75;
        }
        .m-search-icon::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 0.42rem;
            background: var(--muted);
            right: -0.1rem;
            bottom: -0.12rem;
            transform: rotate(-45deg);
            transform-origin: top center;
        }
        .m-query-display {
            flex: 1;
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            min-height: 1.5em;
            word-break: break-all;
        }
        .m-query-display:empty::before {
            content: '輸入路線…';
            color: var(--muted);
            font-weight: 400;
            font-size: 1rem;
        }
        .mobile-route-picker.m-picker--mtr-lr .m-query-display:empty::before {
            content: '輕鐵';
            color: var(--muted);
            font-weight: 400;
            font-size: 1rem;
        }
        .m-rail-line-bar__end--disabled {
            opacity: 0.45;
            cursor: default;
            pointer-events: none;
        }
        .m-lr-zone-title {
            font-size: 0.82rem;
            color: var(--muted);
            margin: 0.85rem 0 0.35rem;
            padding: 0 0.25rem;
            font-weight: 600;
        }
        .m-lr-change-sta {
            display: block;
            width: 100%;
            margin: 0.75rem 0 0.5rem;
            padding: 0.65rem;
            text-align: center;
            font: inherit;
            font-size: 0.88rem;
            color: var(--muted);
            background: transparent;
            border: 0;
            cursor: pointer;
            text-decoration: underline;
        }
        .m-hidden-input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            border: 0;
            opacity: 0;
            pointer-events: none;
        }
        .m-route-list {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0 var(--picker-pad);
            scroll-padding-bottom: 12px;
        }
        .mobile-route-picker:not(.m-picker--hkkf):not(.m-picker--sf):not(.m-picker--sunferry):not(.m-picker--hk-macau):not(.m-picker--mtr-rail):not(.m-picker--mtr-lr) .m-route-list {
            padding-bottom: calc(var(--picker-keypad-h) + 16px + env(safe-area-inset-bottom, 0));
        }
        .m-empty-hint {
            padding: 1rem 1.25rem;
            color: var(--muted);
            font-size: 0.9rem;
            line-height: 1.5;
            max-width: 36em;
        }
        .m-nearby-section-title {
            padding: 0.35rem 0.75rem 0.5rem;
            color: var(--muted);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        .m-route-row {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.85rem 0.75rem;
            margin-bottom: var(--picker-gap);
            border-radius: 10px;
            background: var(--card);
            color: var(--text);
            cursor: pointer;
            font: inherit;
            touch-action: manipulation;
            border: 1px solid transparent;
            min-height: var(--picker-touch);
        }
        .m-route-row:active { background: rgba(255, 255, 255, 0.04); }
        @media (hover: hover) {
            .m-route-row:hover:not(.is-active) {
                border-color: var(--border);
                background: rgba(255, 255, 255, 0.03);
            }
        }
        .m-route-row:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .m-route-row.is-active {
            background: var(--accent-dim);
            border-color: rgba(79, 195, 247, 0.35);
        }
        @media (prefers-reduced-motion: reduce) {
            .m-route-row:active { transform: none; }
        }
        @media (prefers-reduced-motion: no-preference) {
            .m-route-row:active { transform: scale(0.995); }
        }
        .m-route-num {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .m-route-line {
            font-size: 0.95rem;
            color: var(--text);
            opacity: 0.95;
        }
        .m-route-line--hkkf {
            font-size: 1.06rem;
            font-weight: 600;
            line-height: 1.4;
            white-space: normal;
        }
        .m-route-line--hk-macau {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            flex-wrap: wrap;
        }
        .m-route-line--hk-macau .m-badge {
            flex-shrink: 0;
            margin-top: 0.15rem;
        }
        .m-route-arrow { opacity: 0.65; margin: 0 0.2rem; }
        .m-route-sub {
            font-size: 0.78rem;
            color: var(--muted);
            margin-top: 0.35rem;
        }
        .m-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            vertical-align: middle;
        }
        .m-badge--kmb { background: #c62828; color: #fff; }
        .m-badge--lwb { background: #2e7d32; color: #fff; }
        .m-badge--ctb { background: #f9a825; color: #000; }
        .m-badge--gmb { background: #2e7d32; color: #fff; }
        .m-badge--mtr { background: #af272f; color: #fff; }
        .m-badge--nlb { background: #00897b; color: #fff; }
        .m-badge--mtr-rail { background: #9B2743; color: #fff; }
        .m-badge--mtr-lr { background: #c49200; color: #000; }
        .m-rail-line-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 0 0.5rem;
        }
        .m-rail-line-bar {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            min-height: 52px;
            border-radius: 999px;
            overflow: hidden;
            border: none;
            padding: 0;
            width: 100%;
            cursor: default;
            box-shadow: 0 1px 0 rgba(0,0,0,0.12);
        }
        .m-rail-line-bar__end {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: stretch;
            margin: 0;
            padding: 0.55rem 0.75rem;
            font: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.25;
            border: none;
            border-radius: 0;
            background: transparent;
            color: inherit;
            cursor: pointer;
            text-align: center;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .m-rail-line-bar__end:active { opacity: 0.85; }
        .m-rail-line-bar__mid {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            padding: 0.5rem 0.65rem;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.25;
            white-space: nowrap;
            pointer-events: none;
        }
        .m-nearby-route-list {
            padding: 0 0 0.5rem;
        }
        .m-nearby-route-bar {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.65rem 0.5rem;
            margin-bottom: var(--picker-gap);
            border-radius: 12px;
            background: var(--card);
            color: var(--text);
            cursor: pointer;
            font: inherit;
            touch-action: manipulation;
            border: 1px solid transparent;
            min-height: var(--picker-touch);
        }
        .m-nearby-route-bar:active { background: rgba(255, 255, 255, 0.04); }
        .m-nearby-route-bar.is-active {
            background: var(--accent-dim);
            border-color: rgba(79, 195, 247, 0.35);
        }
        .m-nearby-route-bar .m-rail-line-bar--nearby-bus {
            background: rgba(255, 255, 255, 0.07);
            color: var(--text);
            min-height: 48px;
            cursor: inherit;
        }
        .m-rail-line-bar--nearby-bus .m-rail-line-bar__end {
            flex-direction: column;
            gap: 0.15rem;
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0.45rem 0.5rem;
            line-height: 1.2;
            word-break: break-word;
            hyphens: auto;
        }
        .m-nearby-route-bar__dir {
            display: block;
            line-height: 1.2;
        }
        .m-nearby-route-bar__code {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            opacity: 0.88;
        }
        .m-rail-line-bar--nearby-bus .m-rail-line-bar__mid {
            gap: 0.4rem;
            flex-wrap: wrap;
            padding: 0.4rem 0.55rem;
        }
        .m-nearby-route-bar__route {
            font-size: 1.05rem;
            font-weight: 800;
        }
        .m-nearby-route-bar .m-route-sub {
            margin-top: 0.45rem;
            padding: 0 0.35rem;
        }
        .m-rail-geo-hint {
            margin: 0 var(--picker-pad) 0.5rem;
            line-height: 1.45;
            font-size: 0.88rem;
            color: var(--muted, #9aa5b1);
        }
        .mobile-route-picker.m-picker--mtr-lr .m-route-list,
        .mobile-route-picker.m-picker--mtr-rail .m-route-list {
            padding-top: 0.25rem;
        }
        .m-badge--hkkf { background: #0288d1; color: #fff; }
        .m-badge--sf { background: #6a4caf; color: #fff; }
        .m-badge--sunferry { background: #00695c; color: #fff; }
        .m-badge--hk-macau { background: #5d4037; color: #fff; }
        .m-operator-row {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--picker-gap);
            padding: calc(0.5rem + env(safe-area-inset-top, 0)) var(--picker-pad) 0.5rem;
            padding-inline-end: calc(var(--picker-pad) + 4px);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            touch-action: pan-x;
        }
        .m-operator-row::-webkit-scrollbar {
            display: none;
        }
        @media (hover: hover) and (pointer: fine) {
            .m-operator-row {
                scrollbar-width: thin;
                scrollbar-color: rgba(79, 195, 247, 0.45) transparent;
                padding-bottom: 0.35rem;
            }
            .m-operator-row::-webkit-scrollbar {
                display: block;
                height: 6px;
            }
            .m-operator-row::-webkit-scrollbar-thumb {
                background: rgba(79, 195, 247, 0.45);
                border-radius: 3px;
            }
        }
        .m-operator-row.m-operator-row--fade-start {
            mask-image: linear-gradient(to right, transparent, #000 20px);
        }
        .m-operator-row.m-operator-row--fade-end {
            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
        }
        .m-operator-row.m-operator-row--fade-start.m-operator-row--fade-end {
            mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
        }
        .m-op {
            flex: 0 0 auto;
            min-height: var(--picker-touch);
            padding: 0.5rem 0.85rem;
            white-space: nowrap;
            scroll-snap-align: center;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--muted);
            font-size: 0.88rem;
            cursor: pointer;
            touch-action: manipulation;
            font: inherit;
        }
        .m-op:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .m-op.m-op--on {
            border-color: rgba(79, 195, 247, 0.55);
            color: var(--accent);
            background: var(--accent-dim);
        }
        @media (hover: hover) {
            .m-op:not(.m-op--on):hover {
                border-color: rgba(79, 195, 247, 0.28);
                color: var(--text);
            }
        }
        .mobile-route-picker.m-picker--hkkf .m-search-wrap,
        .mobile-route-picker.m-picker--sf .m-search-wrap,
        .mobile-route-picker.m-picker--sunferry .m-search-wrap,
        .mobile-route-picker.m-picker--hk-macau .m-search-wrap,
        .mobile-route-picker.m-picker--mtr-rail .m-search-wrap,
        .mobile-route-picker.m-picker--mtr-lr .m-search-wrap,
        .mobile-route-picker.m-picker--hkkf .m-hidden-input,
        .mobile-route-picker.m-picker--sf .m-hidden-input,
        .mobile-route-picker.m-picker--sunferry .m-hidden-input,
        .mobile-route-picker.m-picker--hk-macau .m-hidden-input,
        .mobile-route-picker.m-picker--mtr-rail .m-hidden-input,
        .mobile-route-picker.m-picker--mtr-lr .m-hidden-input,
        .mobile-route-picker.m-picker--hkkf .m-keypad-spacer,
        .mobile-route-picker.m-picker--sf .m-keypad-spacer,
        .mobile-route-picker.m-picker--sunferry .m-keypad-spacer,
        .mobile-route-picker.m-picker--hk-macau .m-keypad-spacer,
        .mobile-route-picker.m-picker--mtr-rail .m-keypad-spacer,
        .mobile-route-picker.m-picker--mtr-lr .m-keypad-spacer,
        .mobile-route-picker.m-picker--hkkf .m-keypad,
        .mobile-route-picker.m-picker--sf .m-keypad,
        .mobile-route-picker.m-picker--sunferry .m-keypad,
        .mobile-route-picker.m-picker--hk-macau .m-keypad,
        .mobile-route-picker.m-picker--mtr-rail .m-keypad,
        .mobile-route-picker.m-picker--mtr-lr .m-keypad {
            display: none !important;
        }
        .mobile-route-picker.m-picker--hkkf,
        .mobile-route-picker.m-picker--sf,
        .mobile-route-picker.m-picker--sunferry,
        .mobile-route-picker.m-picker--hk-macau,
        .mobile-route-picker.m-picker--mtr-rail,
        .mobile-route-picker.m-picker--mtr-lr {
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
        }
        .m-keypad-spacer { height: 8px; }
        .m-keypad {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0));
            background: linear-gradient(to top, #0a0e14 0%, #121a24 100%);
            border-top: 1px solid var(--border);
            z-index: 50;
            max-width: 520px;
            margin: 0 auto;
        }
        .m-keypad-body {
            display: flex;
            align-items: stretch;
            gap: var(--picker-gap);
        }
        .m-keypad-numeric {
            flex: 1.65 1 0;
            min-width: 0;
        }
        .m-keypad-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--picker-gap);
        }
        .m-keypad-row4 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--picker-gap);
            margin-top: var(--picker-gap);
        }
        .m-keypad-letters-panel {
            flex: 1 1 0;
            min-width: 5.5rem;
            max-width: 38%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 2px;
        }
        .m-keypad-letters-cue {
            flex: 0 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            .m-keypad-letters-cue { transition: none; }
        }
        .m-keypad-letters-cue::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        .m-keypad-letters-cue--up::before {
            border-bottom: 6px solid rgba(232, 234, 237, 0.7);
        }
        .m-keypad-letters-cue--down::before {
            border-top: 6px solid rgba(232, 234, 237, 0.7);
        }
        .m-keypad-letters-panel--can-up .m-keypad-letters-cue--up,
        .m-keypad-letters-panel--can-down .m-keypad-letters-cue--down {
            opacity: 1;
            pointer-events: auto;
            cursor: pointer;
        }
        .m-keypad-letters-scroll {
            flex: 1 1 auto;
            min-height: calc(var(--picker-touch) * 4 + var(--picker-gap) * 3 + 4px);
            max-height: calc(var(--picker-touch) * 4 + var(--picker-gap) * 3 + 4px);
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: var(--picker-touch);
            gap: var(--picker-gap);
            align-content: start;
            padding: 2px 1px;
            scrollbar-width: none;
        }
        .m-keypad-letters-scroll::-webkit-scrollbar {
            display: none;
        }
        @media (hover: hover) and (pointer: fine) {
            .m-keypad-letters-scroll {
                scrollbar-width: thin;
                scrollbar-color: rgba(79, 195, 247, 0.45) transparent;
                padding-inline-end: 2px;
            }
            .m-keypad-letters-scroll::-webkit-scrollbar {
                display: block;
                width: 6px;
            }
            .m-keypad-letters-scroll::-webkit-scrollbar-thumb {
                background: rgba(79, 195, 247, 0.45);
                border-radius: 3px;
            }
        }
        .m-keypad-letters-panel--empty .m-keypad-letters-scroll {
            display: flex;
            align-items: center;
            justify-content: center;
            grid-template-columns: unset;
        }
        .m-keypad-letters-panel--empty .m-keypad-letters-scroll::after {
            content: '字母';
            font-size: 0.72rem;
            color: var(--muted);
            letter-spacing: 0.06em;
        }
        .m-key {
            padding: 0.65rem 0.25rem;
            font-size: 1.2rem;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            background: var(--keypad-bg);
            color: var(--accent);
            cursor: pointer;
            touch-action: manipulation;
            min-height: var(--picker-touch);
            font: inherit;
        }
        .m-key:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .m-key--num {
            padding: 0.4rem 0.15rem;
            font-size: 1.8rem;
            line-height: 1;
            border-radius: 6px;
        }
        .m-key--num.m-key--muted {
            padding: 0.35rem 0.12rem;
        }
        .m-key:active { background: #323e52; }
        @media (hover: hover) {
            .m-key:hover { background: #2d3848; }
        }
        .m-key--muted { color: var(--muted); font-weight: 500; }
        .m-key--letter {
            box-sizing: border-box;
            width: var(--picker-touch);
            height: var(--picker-touch);
            min-width: var(--picker-touch);
            min-height: var(--picker-touch);
            padding: 0;
            font-size: 0.92rem;
            border-radius: 50%;
            justify-self: center;
            align-self: center;
            margin: 0 auto;
        }
        @media (min-width: 600px) {
            .m-keypad { border-radius: 12px 12px 0 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .route-busy-spinner { animation: none; border-top-color: var(--accent); opacity: 0.85; }
        }
        .m-variant-form { margin: 0 0 6px; }
        .m-variant-form .m-route-row { margin-bottom: 0; }
        /* 路線／方向送出後全螢幕載入提示 */
        .route-busy-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 20, 25, 0.72);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .route-busy-overlay[hidden] { display: none !important; }
        .route-busy-card {
            text-align: center;
            padding: 1.35rem 1.75rem;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
            max-width: 88vw;
        }
        .route-busy-spinner {
            width: 44px;
            height: 44px;
            margin: 0 auto 0.85rem;
            border: 3px solid rgba(79, 195, 247, 0.22);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: route-busy-spin 0.75s linear infinite;
        }
        @keyframes route-busy-spin {
            to { transform: rotate(360deg); }
        }
        .route-busy-label {
            margin: 0;
            font-size: 0.95rem;
            color: var(--text);
            line-height: 1.45;
        }
        .route-busy-hint {
            margin: 0.45rem 0 0;
            font-size: 0.8rem;
            color: var(--muted);
        }
        details.advanced { margin-top: 0.5rem; }
        details.advanced summary {
            cursor: pointer;
            color: var(--muted);
            font-size: 0.9rem;
            padding: 0.5rem 0;
        }
        .wrap.wrap--timeline {
            max-width: 520px;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            --fav-col-width: min(520px, calc(100vw - 16px));
        }
        .wrap.wrap--timeline .fav-dock { display: none; }
        .wrap.wrap--hkkf .fav-dock { display: none; }
        .tl-wrap { margin: 0; padding: 0 0 1rem; }
        .tl-hint {
            margin: 0 0.5rem 0.6rem;
            padding: 0 0.35rem;
            color: var(--muted);
            font-size: 0.85rem;
            line-height: 1.45;
        }
        .tl-geo-hint {
            margin: 0 0 0.6rem;
            padding: 0 0.35rem;
            font-size: 0.8rem;
            line-height: 1.45;
            color: var(--muted);
        }
        .tl-geo-hint:empty { display: none; }
        .tl-geo-retry {
            margin-left: 0.35rem;
            padding: 0.2rem 0.55rem;
            font-size: 0.78rem;
            border-radius: 6px;
            border: 1px solid var(--accent);
            background: transparent;
            color: var(--accent);
            cursor: pointer;
        }
        .tl-geo-btn {
            display: block;
            width: 100%;
            max-width: 20rem;
            margin: 0 0 0.65rem;
            padding: 0.55rem 0.85rem;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 8px;
            border: 1px solid var(--accent);
            background: rgba(79, 195, 247, 0.12);
            color: var(--accent);
            cursor: pointer;
            touch-action: manipulation;
        }
        .tl-geo-btn:active { opacity: 0.85; }
        .tl-inline-err { margin: 0 0.5rem 0.75rem; }
        .tl-footer-link { padding: 0 0.35rem; }
        .tl-head { padding: 0 0.35rem 0.75rem; }
        .tl-timeline {
            position: relative;
            padding-left: 0.5rem;
            margin-left: 0.5rem;
            border-left: 3px solid var(--timeline-rail);
        }
        .tl-stop { margin: 0; padding: 0; background: transparent; }
        .tl-stop + .tl-stop { margin-top: 2px; }
        .tl-stop-sum {
            list-style: none;
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            padding: 0.65rem 0.45rem 0.65rem 0.15rem;
            min-height: 44px;
            cursor: pointer;
            border-radius: 10px;
            position: relative;
            border: 1px solid transparent;
        }
        .tl-stop-sum:focus:not(:focus-visible) { outline: none; }
        .tl-stop-sum:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            background: rgba(255, 255, 255, 0.03);
        }
        @media (hover: hover) {
            .tl-stop-sum:hover { background: rgba(255, 255, 255, 0.03); }
        }
        .tl-dot {
            position: absolute;
            left: -0.78rem;
            top: 50%;
            transform: translateY(-50%);
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 3px var(--bg);
            flex-shrink: 0;
        }
        .tl-stop-sum::-webkit-details-marker { display: none; }
        .tl-seq {
            font-weight: 700;
            color: var(--accent);
            min-width: 1.75rem;
            font-size: 1.05rem;
            flex-shrink: 0;
        }
        .tl-name-block { flex: 1; font-size: 1.08rem; line-height: 1.45; }
        .tl-code { color: var(--muted); font-size: 0.9rem; }
        .tl-fare {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--fare-text);
            background: var(--fare-bg);
            border: 1px solid var(--fare-border);
            border-radius: 0.4rem;
            padding: 0.12rem 0.42rem;
            align-self: center;
            flex-shrink: 0;
            white-space: nowrap;
            letter-spacing: 0.01em;
        }
        .tl-chev {
            color: var(--accent);
            font-size: 0.7rem;
            align-self: center;
            transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
            flex-shrink: 0;
        }
        @media (prefers-reduced-motion: reduce) {
            .tl-chev { transition: none; }
        }
        details.tl-stop[open] > .tl-stop-sum .tl-chev { transform: rotate(180deg); }
        .tl-eta-panel { padding: 0 0.35rem 0.75rem 1.85rem; }
        .tl-eta-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .tl-eta-row {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
            font-size: 1.02rem;
            line-height: 1.45;
        }
        .tl-eta-list .tl-eta-row:last-child { border-bottom: none; }
        .tl-refresh-status {
            margin: 0 0.35rem 0.5rem;
            padding: 0 0.35rem;
            font-size: 0.8rem;
            line-height: 1.45;
            color: var(--remark-amber);
        }
        .tl-refresh-status:empty { display: none; }
        .tl-eta-min { font-weight: 600; color: var(--accent); font-size: 1.12rem; }
        .tl-eta-time { color: var(--muted); font-size: 0.95rem; margin-left: 0.4rem; }
        .tl-eta-op {
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 0.4rem;
            padding: 0.12em 0.5em;
            border-radius: 0.3rem;
            white-space: nowrap;
            vertical-align: middle;
            line-height: 1.25;
        }
        .tl-eta-op--kmb {
            color: var(--badge-kmb-fg);
            background: var(--badge-kmb-bg);
            border: 1px solid var(--badge-kmb-border);
        }
        .tl-eta-op--ctb {
            color: var(--badge-ctb-fg);
            background: var(--badge-ctb-bg);
            border: 1px solid var(--badge-ctb-border);
        }
        .tl-eta-rmk { color: var(--remark-amber); font-size: 0.9rem; margin-left: 0.4rem; }
        .tl-no-eta { color: var(--muted); font-size: 0.95rem; margin: 0; padding: 0.25rem 0; }
        .tl-meta { font-size: 0.8rem; color: var(--muted); padding: 0.35rem 0.35rem 0; }
        /* ── 常用路線／歷史記錄（路線選擇頁頂部按鈕 + 彈出清單）── */
        .fav-dock {
            position: relative;
            z-index: 60;
        }
        .m-picker-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.45rem;
            padding: 0.35rem var(--picker-pad) 0.5rem;
        }
        .m-picker-actions__btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin: 0;
            padding: 0.45rem 0.72rem;
            border-radius: 10px;
            border: 1px solid rgba(79, 195, 247, 0.42);
            background: rgba(18, 26, 36, 0.92);
            color: var(--text);
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            touch-action: manipulation;
            font: inherit;
            -webkit-tap-highlight-color: transparent;
        }
        .m-picker-actions__btn:focus:not(:focus-visible) { outline: none; }
        .m-picker-actions__btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .m-picker-actions__btn:active { opacity: 0.92; }
        button.m-picker-actions__btn:hover,
        button.m-picker-actions__btn:focus {
            background: rgba(18, 26, 36, 0.92);
            color: var(--text);
        }
        .m-picker-actions__btn.is-on {
            border-color: rgba(79, 195, 247, 0.75);
            color: var(--accent);
            background: var(--accent-dim);
        }
        .fav-dock-backdrop {
            position: fixed;
            inset: 0;
            z-index: 240;
            margin: 0;
            padding: 0;
            border: none;
            background: rgba(0, 0, 0, 0.42);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease-out, visibility 0.22s ease-out;
            cursor: pointer;
        }
        /* 遮罩為全螢幕 <button>，須蓋過全域 button / button:hover（#1565c0），否則桌面滑鼠懸停會整片藍底 */
        button.fav-dock-backdrop,
        button.fav-dock-backdrop:hover,
        button.fav-dock-backdrop:focus,
        button.fav-dock-backdrop:focus-visible {
            margin-top: 0;
            padding: 0;
            border-radius: 0;
            font-size: 0;
            color: transparent;
            background: rgba(0, 0, 0, 0.42);
        }
        button.fav-dock-backdrop:hover {
            background: rgba(0, 0, 0, 0.52);
        }
        .fav-dock--open .fav-dock-backdrop {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .fav-dock-panel {
            position: fixed;
            z-index: 250;
            left: auto;
            width: min(24rem, calc(100vw - 16px));
            max-height: min(58dvh, 26rem);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            background: var(--surface-float);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.96);
            transform-origin: top right;
            pointer-events: none;
            transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.24s;
        }
        .fav-dock--open .fav-dock-panel {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            .fav-dock-panel,
            .fav-dock-backdrop { transition: none; }
            .fav-dock--open .fav-dock-panel { transform: none; }
        }
        .fav-dock-empty {
            margin: 0;
            padding: 0.85rem 0.75rem;
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.45;
            text-align: center;
        }
        .fav-dock-list {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            padding: 0.5rem;
        }
        .fav-dock-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.55rem 0.5rem;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text);
            cursor: pointer;
            touch-action: manipulation;
            text-align: left;
            font: inherit;
            margin: 0;
        }
        .fav-dock-item:focus:not(:focus-visible) { outline: none; }
        .fav-dock-item:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .fav-dock-item:active { background: rgba(255, 255, 255, 0.12); }
        button.fav-dock-item:hover,
        button.fav-dock-item:focus {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text);
        }
        .fav-dock-label {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.35rem 0.45rem;
            line-height: 1.4;
            white-space: normal;
            word-break: break-word;
        }
        .fav-dock-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.14rem 0.45rem;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.25;
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }
        .fav-dock-badge--kmb { background: #c62828; color: #fff; }
        .fav-dock-badge--ctb { background: #f9a825; color: #000; }
        .fav-dock-badge--mtr { background: #af272f; color: #fff; }
        .fav-dock-badge--mtr-rail { background: #1565c0; color: #fff; }
        .fav-dock-badge--mtr-lr { background: #c49200; color: #000; }
        .fav-dock-badge--gmb { background: #2e7d32; color: #fff; }
        .fav-dock-badge--nlb { background: #00897b; color: #fff; }
        .fav-dock-badge--hkkf { background: #0288d1; color: #fff; }
        .fav-dock-badge--sf { background: #00838f; color: #fff; }
        .fav-dock-badge--sunferry { background: #00695c; color: #fff; }
        .fav-dock-badge--hk-macau { background: #5e35b1; color: #fff; }
        .fav-dock-label-detail {
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text);
            min-width: 0;
            flex: 1 1 8rem;
        }
        .fav-dock-item--hist .fav-dock-label {
            display: flex;
        }
        .fav-dock-item--hist .fav-dock-label-detail {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .fav-dock-hist-time {
            flex-shrink: 0;
            font-size: 0.68rem;
            color: var(--muted);
            line-height: 1.2;
            max-width: 3.4rem;
            text-align: right;
        }
        .fav-dock-op {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .fav-dock-num {
            font-weight: 700;
            font-size: 1.05rem;
            line-height: 1.2;
            flex-shrink: 0;
            min-width: 2.2rem;
        }
        .fav-dock-dir {
            flex: 1;
            min-width: 0;
            font-size: 0.82rem;
            color: var(--muted);
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .fav-dock-del {
            flex-shrink: 0;
            width: 1.65rem;
            height: 1.65rem;
            margin: 0;
            padding: 0;
            border-radius: 50%;
            border: none;
            background: rgba(80, 80, 100, 0.75);
            color: var(--muted);
            font-size: 0.95rem;
            line-height: 1;
            cursor: pointer;
            touch-action: manipulation;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fav-dock-del:active { background: #ef5350; color: #fff; }
        button.fav-dock-del:hover,
        button.fav-dock-del:focus {
            background: rgba(80, 80, 100, 0.9);
            color: var(--muted);
        }
        .fav-dock-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.25rem;
            height: 1.25rem;
            padding: 0 0.35rem;
            border-radius: 999px;
            background: var(--accent);
            color: #0f1419;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1;
        }
        .fav-dock-count[hidden] { display: none; }
        .tl-head { display: flex; align-items: center; }
        .tl-head .m-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .fav-star-btn {
            background: none;
            border: none;
            font-size: 1.55rem;
            line-height: 1;
            color: var(--muted);
            cursor: pointer;
            padding: 0.35rem 0.55rem;
            min-width: 44px;
            min-height: 44px;
            touch-action: manipulation;
            flex-shrink: 0;
            border-radius: 10px;
        }
        .fav-star-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .fav-star-btn.is-fav { color: var(--fav-star); }

        /* ETA 結果頁：路線方格與主內容欄同寬並置中；巴士／小巴時間軸與渡輪同一頂距（時間軸時不顯示站內 h1） */
        .wrap.wrap--eta-float {
            --eta-float-width: min(520px, calc(100vw - 16px));
            --eta-route-top: calc(env(safe-area-inset-top, 0px) + 1rem);
            --eta-pad-top: calc(env(safe-area-inset-top, 0px) + 7.25rem);
        }
        .wrap.wrap--eta-float.wrap--adv-eta {
            --eta-float-width: min(912px, calc(100vw - 3rem));
            --eta-route-top: calc(env(safe-area-inset-top, 0px) + 5.15rem);
            --eta-pad-top: calc(env(safe-area-inset-top, 0px) + 10.35rem);
        }
        .eta-result-page {
            position: relative;
            padding-top: var(--eta-pad-top, calc(env(safe-area-inset-top, 0px) + 7.25rem));
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.25rem);
        }
        .eta-float-route {
            position: fixed;
            z-index: 8500;
            left: 50%;
            transform: translateX(-50%);
            width: var(--eta-float-width);
            box-sizing: border-box;
            top: var(--eta-route-top, calc(env(safe-area-inset-top, 0px) + 1rem));
            padding: 0.55rem 0.72rem;
            background: var(--surface-float);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.42);
        }
        .eta-float-route-line {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.25;
            letter-spacing: 0.02em;
            word-break: break-all;
        }
        h1.eta-float-route-line {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
        }
        .eta-float-route-dir {
            margin: 0.28rem 0 0;
            font-size: 0.86rem;
            line-height: 1.4;
            color: var(--accent);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .eta-float-route-meta {
            margin-top: 0.32rem;
            font-size: 0.74rem;
            line-height: 1.35;
            color: var(--muted);
        }
        .eta-float-route-headrow {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.45rem;
        }
        .eta-float-route-text {
            flex: 1;
            min-width: 0;
        }
        .eta-float-route-text .eta-float-route-dir {
            margin-top: 0.22rem;
        }
        .fav-star-btn.fav-star-btn--route-head {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            transform: none;
            flex-shrink: 0;
            align-self: flex-start;
            margin: 0;
            padding: 0.32rem 0.48rem;
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(30, 35, 42, 0.92);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            font-size: 1.35rem;
        }
        .fav-star-btn.fav-star-btn--route-head:hover,
        .fav-star-btn.fav-star-btn--route-head:focus-visible {
            background: rgba(45, 52, 62, 0.95);
        }
        a.eta-float-back {
            position: fixed;
            z-index: 8500;
            left: calc(50% - (var(--eta-float-width) / 2) + env(safe-area-inset-left, 0px) + 10px);
            bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            transform: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 0.5rem 1.15rem;
            background: var(--action-primary);
            border: 1px solid rgba(79, 195, 247, 0.35);
            border-radius: 999px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
            color: #e8eaed;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            touch-action: manipulation;
        }
        a.eta-float-back:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        a.eta-float-back:active {
            filter: brightness(1.08);
            opacity: 1;
        }
        /* 舊式：星形獨立 fixed（已由 .fav-star-btn--route-head 併入標題列） */
        .fav-star-btn.eta-float-fav {
            position: fixed;
            z-index: 8500;
            top: var(--eta-route-top, calc(env(safe-area-inset-top, 0px) + 1rem));
            left: calc(50% + (var(--eta-float-width) / 2) - env(safe-area-inset-right, 0px) - 3.35rem);
            right: auto;
            margin: 0;
            padding: 0.38rem 0.55rem;
            background: var(--surface-float);
            border: 1px solid var(--border);
            border-radius: 12px;
            line-height: 1;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
        }
        .visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        /* 港九小輪結果頁（置頂、易讀） */
        .wrap.wrap--hkkf {
            max-width: 520px;
            padding-left: 0;
            padding-right: 0;
            --fav-col-width: min(520px, calc(100vw - 16px));
        }
        .hkkf-page { padding-bottom: 1.5rem; }
        .hkkf-topbar {
            border-bottom: 1px solid var(--border);
            padding: 0.5rem 1rem 0.65rem;
        }
        .hkkf-topbar-title {
            font-size: 1.02rem;
            line-height: 1.35;
            white-space: normal;
        }
        .hkkf-journey {
            font-size: 1.05rem;
            font-weight: 600;
            margin: 0.35rem 1rem 0.75rem;
            color: var(--text, #e8eaed);
            letter-spacing: 0.02em;
        }
        .hkkf-sub {
            margin: 0.65rem 1rem 0.25rem;
            font-size: 0.86rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .hkkf-panel {
            margin: 0.65rem 1rem 0;
            padding: 1rem 0.85rem;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .hkkf-panel-title {
            font-size: 1rem;
            margin: 0 0 0.75rem;
            color: var(--accent);
            font-weight: 600;
        }
        .hkkf-dep-list {
            list-style: none;
            margin: 0;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .hkkf-dep-li {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            margin: 0;
            padding: 0.55rem 0.75rem;
            border-bottom: 1px solid var(--border);
            font-size: 1.06rem;
            line-height: 1.35;
            font-variant-numeric: tabular-nums;
        }
        .hkkf-dep-li:last-child { border-bottom: none; }
        .hkkf-dep-li:nth-child(even) { background: rgba(255,255,255,0.025); }
        .hkkf-dep-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.88;
            flex-shrink: 0;
        }
        .hkkf-dep-time {
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.03em;
        }
        .hkkf-eta-list {
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .hkkf-eta-row {
            padding: 0.55rem 0.75rem 0.5rem;
            border-bottom: 1px solid var(--border);
            font-size: 1.02rem;
            line-height: 1.45;
        }
        .hkkf-eta-row:last-child { border-bottom: none; }
        .hkkf-eta-row:nth-child(even) { background: rgba(255,255,255,0.025); }
        .hkkf-eta-countdown {
            font-weight: 600;
            color: var(--accent);
            font-size: 1.1rem;
            font-variant-numeric: tabular-nums;
        }
        .hkkf-eta-clock {
            color: var(--muted);
            font-size: 0.92rem;
            margin-left: 0.35rem;
            font-variant-numeric: tabular-nums;
        }
        .hkkf-eta-meta {
            font-size: 0.76rem;
            color: var(--muted);
            margin-top: 0.25rem;
        }
        .hkkf-eta-list--scheduled {
            border-left: 3px solid rgba(154, 160, 166, 0.45);
        }
        .hkkf-eta-row--scheduled .hkkf-eta-clock { opacity: 0.92; }
        .hkkf-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 0 -0.15rem;
            border-radius: 6px;
            border: 1px solid var(--border);
        }
        .hkkf-sheet {
            width: max(100%, max-content);
            min-width: 100%;
            border-collapse: collapse;
            font-size: 0.78rem;
        }
        .hkkf-sheet th,
        .hkkf-sheet td {
            padding: 0.42rem 0.5rem;
            border-bottom: 1px solid var(--border);
            border-right: 1px solid var(--border);
            vertical-align: top;
            white-space: nowrap;
        }
        .hkkf-sheet th:last-child,
        .hkkf-sheet td:last-child { border-right: none; }
        .hkkf-sheet thead th {
            background: rgba(79, 195, 247, 0.14);
            color: var(--accent);
            font-weight: 600;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .hkkf-sheet tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
        .hkkf-sheet--eta td:last-child { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
        .hkkf-footnote, .hkkf-meta { font-size: 0.76rem; color: var(--muted); margin: 0.55rem 0 0; line-height: 1.4; }
        .hkkf-actions { margin: 1rem 1rem 0; text-align: center; }
        .hkkf-btn-link {
            display: inline-block;
            padding: 0.55rem 1.1rem;
            background: #1565c0;
            color: #fff !important;
            border-radius: 8px;
            text-decoration: none;
            font-size: 0.92rem;
            font-weight: 500;
        }
        .hkkf-btn-link:active { opacity: 0.9; }
        button.hkkf-btn-link {
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .hkkf-inline-form { margin: 0; padding: 0; }