:root {
      --app-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --strong-text-weight: 750;
      --heavy-text-weight: 800;
    }
    html[data-lang="zh"] { --app-font-family: "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; }
    html[data-lang="ja"] { --app-font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans CJK JP", sans-serif; }
    html[data-lang="ko"] { --app-font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }
    html[data-lang="ta"] {
      --app-font-family: "Kohinoor Tamil", "Nirmala UI", "Latha", "Noto Sans Tamil", sans-serif;
      --strong-text-weight: 600;
      --heavy-text-weight: 650;
    }
    html[data-lang="bn"] {
      --app-font-family: "Bangla Sangam MN", "Nirmala UI", "Vrinda", "Noto Sans Bengali", sans-serif;
      --strong-text-weight: 600;
      --heavy-text-weight: 650;
    }
    html[data-lang="my"] {
      --app-font-family: "Myanmar Sangam MN", "Nirmala UI", "Myanmar Text", "Noto Sans Myanmar", sans-serif;
      --strong-text-weight: 600;
      --heavy-text-weight: 650;
    }
    html[data-lang="th"] {
      --app-font-family: "Th Sarabun New", "Leelawadee UI", "Tahoma", "Noto Sans Thai", sans-serif;
      --strong-text-weight: 600;
      --heavy-text-weight: 650;
    }
    html[data-lang="vi"] { --app-font-family: "Segoe UI", Arial, sans-serif; }
    html[data-lang="ms"],
    html[data-lang="id"],
    html[data-lang="tl"] { --app-font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; }
    body,
    body.font-sans,
    .font-sans { font-family: var(--app-font-family) !important; }
    html[data-lang="ta"] .font-semibold,
    html[data-lang="bn"] .font-semibold,
    html[data-lang="my"] .font-semibold,
    html[data-lang="th"] .font-semibold { font-weight: var(--strong-text-weight) !important; }
    html[data-lang="ta"] .font-bold,
    html[data-lang="ta"] .font-extrabold,
    html[data-lang="bn"] .font-bold,
    html[data-lang="bn"] .font-extrabold,
    html[data-lang="my"] .font-bold,
    html[data-lang="my"] .font-extrabold,
    html[data-lang="th"] .font-bold,
    html[data-lang="th"] .font-extrabold { font-weight: var(--heavy-text-weight) !important; }

    #map { height: calc(var(--viewport-height, 100vh) - 64px); width: 100%; z-index: 1; }
    #app-shell { height: calc(var(--viewport-height, 100vh) - 64px); }
    .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: #1e293b; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }

    @keyframes pulse-green {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .live-dot { animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    mark.search-hit { background: rgba(252, 165, 165, .18); color: inherit; font-weight: inherit; border-radius: .2rem; padding: 0 .08rem; }
    .result-active { outline: 2px solid #94a3b8; background: rgba(71, 85, 105, .85) !important; }
    .search-chip { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .result-type-tabs {
      min-width: 0;
    }
    .search-type-tab {
      align-items: center;
      display: inline-flex;
      gap: .28rem;
      justify-content: center;
      min-width: 0;
      overflow: hidden;
      padding-left: .35rem;
      padding-right: .35rem;
      white-space: nowrap;
    }
    .search-type-tab > i {
      flex: 0 0 auto;
      margin-right: 0 !important;
    }
    .search-type-tab > span {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #label-tab-all {
      font-size: clamp(.58rem, 2.7vw, .75rem);
    }
    .mobile-intent-chips {
      display: none;
    }
    .mobile-search-mode-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .4rem;
    }
    .mobile-search-mode-switch button,
    .mobile-journey-options-toggle {
      min-height: 2.3rem;
      border-radius: .65rem;
      border: 1px solid #334155;
      background: #0f172a;
      color: #cbd5e1;
      font-size: .78rem;
      font-weight: 750;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      cursor: pointer;
    }
    .mobile-search-mode-switch button.active {
      background: #dc2626;
      border-color: #ef4444;
      color: #fff;
    }
    .mobile-journey-options-toggle {
      width: 100%;
    }
    body[data-mobile-mode="search"] .journey-controls,
    body[data-mobile-mode="search"] .mobile-journey-options-toggle,
    body[data-mobile-mode="search"] .journey-options-panel {
      display: none !important;
    }
    body[data-mobile-mode="directions"] .journey-options-panel {
      display: none;
    }
    body[data-mobile-mode="directions"].mobile-journey-options-open .journey-options-panel {
      display: grid;
    }
    body[data-mobile-mode="directions"] #recent-searches {
      display: none !important;
    }
    /* The keyword search box and result-type tabs are irrelevant while planning a trip. */
    body[data-mobile-mode="directions"] #universal-search-wrap,
    body[data-mobile-mode="directions"] .result-type-tabs {
      display: none !important;
    }
    .journey-beta-note {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-size: .74rem;
      color: #94a3b8;
      line-height: 1.3;
    }
    .journey-options-panel {
      display: grid;
      gap: .55rem;
    }
    /* Arrivals/station detail panels replace the sidebar list in place (same slot, same width)
       instead of floating over the map, on both mobile and desktop. */
    body.arrivals-panel-open #sidebar,
    body.station-panel-open #sidebar {
      display: none !important;
    }
    body.arrivals-panel-open #sidebar-collapse-toggle,
    body.station-panel-open #sidebar-collapse-toggle {
      display: none !important;
    }
    .mobile-panel-nav {
      display: flex !important;
      align-items: center;
      gap: .5rem;
      padding: .6rem .75rem;
      border-bottom: 1px solid rgba(51, 65, 85, .8);
      font-size: .875rem;
    }
    .localisation-status {
      align-items: center;
      gap: .4rem;
      border-radius: .55rem;
      border: 1px solid rgba(34, 211, 238, .25);
      background: rgba(14, 116, 144, .18);
      color: #a5f3fc;
      padding: .45rem .6rem;
      font-size: .72rem;
      line-height: 1.2;
    }
    .localisation-status:not([hidden]) {
      display: flex;
    }
    .journey-planner-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr) 3rem;
      gap: .4rem;
      align-items: center;
    }
    .journey-input-wrap {
      position: relative;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: .4rem;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: .5rem;
      padding: .35rem .5rem;
    }
    .journey-input-wrap input {
      min-width: 0;
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: #fff;
      font-size: .8rem;
      line-height: 1.5rem;
    }
    .journey-input-wrap:focus-within {
      border-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .16);
    }
    .journey-suggest-list {
      position: absolute;
      top: calc(100% + .35rem);
      left: 0;
      right: 0;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: .6rem;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .4);
      z-index: 40;
      max-height: 14rem;
      overflow-y: auto;
    }
    .journey-suggest-item {
      display: flex;
      align-items: center;
      gap: .55rem;
      width: 100%;
      text-align: left;
      padding: .5rem .65rem;
      font-size: .78rem;
      color: #e2e8f0;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(51, 65, 85, .5);
    }
    .journey-suggest-item:last-child { border-bottom: 0; }
    .journey-suggest-item:hover, .journey-suggest-item.active { background: #1e293b; }
    .journey-suggest-item i {
      color: #94a3b8;
      width: 1rem;
      text-align: center;
      flex-shrink: 0;
    }
    .journey-suggest-item-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .journey-suggest-item-detail {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .68rem;
      color: #64748b;
    }
    body.theme-light .journey-suggest-list {
      background: #ffffff;
      border-color: #cbd5e1;
    }
    body.theme-light .journey-suggest-item { color: #0f172a; }
    body.theme-light .journey-suggest-item:hover, body.theme-light .journey-suggest-item.active { background: #f1f5f9; }
    .journey-swap-button,
    .journey-plan-button {
      height: 2.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .5rem;
      border: 1px solid #334155;
      background: #1e293b;
      color: #e2e8f0;
      font-size: .78rem;
      font-weight: 700;
    }
    .journey-swap-button:hover,
    .journey-plan-button:hover { background: #334155; }
    .journey-plan-button {
      gap: .28rem;
      background: #dc2626;
      border-color: #ef4444;
      color: #fff;
    }
    .journey-preference-row {
      display: flex;
      align-items: center;
      gap: .45rem;
      min-width: 0;
      color: #cbd5e1;
      font-size: .75rem;
    }
    .journey-preference-row select {
      min-width: 0;
      width: 100%;
      height: 2rem;
      border-radius: .5rem;
      border: 1px solid #334155;
      background: #0f172a;
      color: #e2e8f0;
      padding: 0 .55rem;
      font-size: .75rem;
      outline: 0;
    }
    .journey-preference-row select:focus {
      border-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .16);
    }
    .journey-time-context {
      display: flex;
      align-items: center;
      gap: .35rem;
      color: #94a3b8;
      font-size: .72rem;
      line-height: 1.2;
      margin-top: -.35rem;
      padding: 0 .15rem;
    }
    .journey-time-context i {
      color: #67e8f9;
      font-size: .76rem;
    }
    .journey-time-context select,
    .journey-time-context input {
      min-width: 0;
      height: 1.6rem;
      border-radius: .45rem;
      border: 1px solid #334155;
      background: #0f172a;
      color: #e2e8f0;
      padding: 0 .45rem;
      font-size: .7rem;
      outline: 0;
    }
    .journey-time-context input {
      width: 11.2rem;
    }
    .journey-departure-row {
      display: flex;
      align-items: center;
      gap: .3rem;
      min-width: 0;
    }
    .journey-departure-confirm {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: .45rem;
      border: 1px solid #334155;
      background: #1e293b;
      color: #4ade80;
      font-size: .68rem;
    }
    .journey-departure-confirm:hover { background: #334155; }
    .journey-time-context span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nearby-distance-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(34, 211, 238, .28);
      background: rgba(6, 182, 212, .16);
      color: #cffafe;
      line-height: 1.15;
      font-weight: 650;
    }
    .journey-result-chip {
      display: inline-flex;
      align-items: center;
      gap: .28rem;
      border-radius: 999px;
      border: 1px solid rgba(251, 191, 36, .28);
      background: rgba(245, 158, 11, .14);
      color: #fde68a;
      padding: .18rem .5rem;
      font-size: .7rem;
      line-height: 1;
    }
    .journey-reason-badge {
      display: inline-flex;
      align-items: center;
      gap: .28rem;
      border-radius: 999px;
      border: 1px solid rgba(52, 211, 153, .32);
      background: rgba(16, 185, 129, .16);
      color: #a7f3d0;
      padding: .18rem .5rem;
      font-size: .68rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .01em;
    }
    .journey-advisory {
      display: flex;
      align-items: flex-start;
      gap: .55rem;
      margin: .2rem .1rem .65rem;
      padding: .7rem .8rem;
      border: 1px solid rgba(34, 211, 238, .22);
      border-radius: .65rem;
      background: rgba(14, 165, 233, .1);
      color: #bae6fd;
      font-size: .78rem;
      line-height: 1.35;
    }
    .journey-advisory i {
      margin-top: .08rem;
      color: #67e8f9;
    }
    .journey-card-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .8rem;
      align-items: start;
      min-width: 0;
    }
    .journey-card-heading {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .45rem .55rem;
      margin-bottom: .28rem;
    }
    .journey-card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: .28rem;
      align-items: center;
      min-width: 0;
    }
    .journey-card-main { min-width: 0; }
    .journey-card-kicker {
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #94a3b8;
      font-weight: 700;
    }
    .journey-card-title {
      color: #f8fafc;
      font-size: 1rem;
      font-weight: 750;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .journey-card-chain {
      color: #cbd5e1;
      font-size: .82rem;
      line-height: 1.25;
      margin-top: .16rem;
      overflow-wrap: anywhere;
    }
    .journey-card-english {
      color: #94a3b8;
      font-size: .74rem;
      line-height: 1.25;
      margin-top: .08rem;
      overflow-wrap: anywhere;
    }
    .journey-card-time {
      color: #f8fafc;
      font-size: .98rem;
      font-weight: 800;
      white-space: nowrap;
      line-height: 1.1;
    }
    .journey-card-side {
      display: flex;
      align-items: center;
      gap: .45rem;
      padding-top: .15rem;
    }
    .journey-card-chevron { color: #cbd5e1; font-size: .95rem; }
    .journey-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: .55rem;
    }
    .journey-card-badges .result-code-badge {
      min-width: 2.55rem !important;
      min-height: 1.48rem !important;
      padding: .22rem .5rem !important;
      font-size: .76rem !important;
    }
    .journey-timeline {
      display: flex;
      flex-direction: column;
      padding: .2rem 0 .35rem;
    }
    .journey-timeline-point,
    .journey-timeline-leg {
      display: grid;
      grid-template-columns: 2.1rem minmax(0, 1fr);
      column-gap: .7rem;
      position: relative;
    }
    .journey-timeline-rail {
      display: flex;
      justify-content: center;
      position: relative;
    }
    .journey-timeline-rail::after {
      content: "";
      position: absolute;
      top: 1.8rem;
      bottom: -.8rem;
      width: 3px;
      border-radius: 999px;
      background: #475569;
    }
    .journey-timeline-walk .journey-timeline-rail::after {
      background: repeating-linear-gradient(to bottom, #60a5fa 0 5px, transparent 5px 10px);
    }
    .journey-timeline-end .journey-timeline-rail::after { display: none; }
    .journey-timeline-rail span {
      z-index: 1;
      width: 1.55rem;
      height: 1.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #111827;
      border: 2px solid #94a3b8;
      color: #e2e8f0;
      font-size: .78rem;
    }
    .journey-timeline-start .journey-timeline-rail span { border-color: #60a5fa; }
    .journey-timeline-end .journey-timeline-rail span { border-color: #f87171; color: #fca5a5; }
    .journey-timeline-copy {
      min-width: 0;
      padding: 0 0 1rem;
      border-bottom: 1px solid rgba(148, 163, 184, .22);
    }
    .journey-timeline-end .journey-timeline-copy { border-bottom: 0; padding-bottom: 0; }
    .journey-timeline-title {
      color: #f8fafc;
      font-weight: 750;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .journey-timeline-detail {
      color: #cbd5e1;
      font-size: .82rem;
      line-height: 1.35;
      margin-top: .25rem;
    }
    .journey-timeline-route-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .45rem;
      color: #f8fafc;
      font-weight: 650;
      line-height: 1.25;
    }
    .journey-timeline-route-row .journey-line-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .journey-timeline-stop {
      display: block;
      width: 100%;
      text-align: left;
      color: #e2e8f0;
      margin-top: .45rem;
      padding: .45rem .55rem;
      border-radius: .5rem;
      border: 1px solid rgba(148, 163, 184, .22);
      background: rgba(15, 23, 42, .45);
    }
    .journey-timeline-stop span {
      display: block;
      color: #94a3b8;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .journey-timeline-stop strong {
      display: block;
      font-weight: 750;
      overflow-wrap: anywhere;
    }
    .journey-rail-stop-card {
      display: block;
      padding: .65rem .75rem;
    }
    .journey-rail-stop-card .journey-rail-action {
      display: block;
      color: #94a3b8;
      font-size: .72rem;
      font-weight: 650;
      line-height: 1;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: .45rem;
    }
    .journey-rail-stop-row {
      display: flex !important;
      align-items: center;
      gap: .6rem;
      min-width: 0;
      color: inherit !important;
      font-size: inherit !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .journey-rail-stop-row .journey-station-code-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      text-align: center;
    }
    .journey-rail-stop-row strong {
      min-width: 0;
      font-size: 1rem;
      line-height: 1.25;
    }
    .journey-timeline-stop-card {
      display: block;
      padding: .65rem .75rem;
      background: rgba(15, 23, 42, .5);
    }
    .journey-timeline-stop-card .journey-stop-action {
      display: block;
      color: #94a3b8;
      font-size: .72rem;
      font-weight: 650;
      line-height: 1;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: .45rem;
    }
    .journey-stop-row {
      display: flex !important;
      align-items: center;
      gap: .65rem;
      min-width: 0;
      color: inherit !important;
      font-size: inherit !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .journey-timeline-stop-card .result-code-badge {
      flex: 0 0 auto;
      min-width: 3.05rem !important;
      margin-top: 0;
      align-self: center;
    }
    .journey-timeline-stop-card .journey-stop-copy,
    .journey-timeline-stop-card .journey-stop-meta,
    .journey-timeline-stop-card .stop-identity-lines,
    .journey-timeline-stop-card .route-card-summary-main,
    .journey-timeline-stop-card .route-card-summary-sub {
      display: block;
      min-width: 0;
      text-transform: none;
      letter-spacing: 0;
    }
    .journey-timeline-stop-card .route-card-summary-main {
      color: #f8fafc;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.25;
      padding-right: 0;
    }
    .journey-timeline-stop-card .journey-stop-row .route-card-summary-main {
      color: #f8fafc;
    }
    .journey-timeline-stop-card .journey-stop-meta {
      padding-left: calc(3.05rem + .65rem);
      margin-top: .2rem;
    }
    .journey-english-line,
    .journey-timeline-stop small {
      display: block;
      color: #94a3b8;
      font-size: .72rem;
      line-height: 1.28;
      margin-top: .15rem;
      overflow-wrap: anywhere;
    }
    /* Mobile-first workspace: search and details occupy the same panel slot. */
    @media (max-width: 767px), (orientation: landscape) and (max-height: 700px) {
      :root { --mobile-panel-height: 50dvh; }
      body { overflow: hidden; }
      header { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
      header #app-subtitle { display: none; }
      #settings-toggle { width: 2.75rem; height: 2.75rem; }
      #btn-toggle-view, #sidebar-collapse-toggle { display: none !important; }
      #map, #app-shell { height: calc(var(--viewport-height, 100dvh) - 64px); }
      #sidebar,
      #arrivals-card,
      #station-card {
        position: absolute !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        height: var(--mobile-panel-height) !important;
        min-height: min(13rem, calc(var(--viewport-height, 100dvh) - 64px));
        max-height: calc(var(--viewport-height, 100dvh) - 64px) !important;
        transform: none !important;
        border: 0 !important;
        border-top: 1px solid #475569 !important;
        border-radius: 1rem 1rem 0 0 !important;
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .28) !important;
        padding-bottom: env(safe-area-inset-bottom);
        transition: height 180ms ease;
        overflow: hidden;
        z-index: 30;
      }
      #sidebar {
        display: block;
        inset: 0 !important;
        height: 100% !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        pointer-events: none;
        overflow: visible;
      }
      #arrivals-card.hidden, #station-card.hidden { display: none !important; }
      body.arrivals-panel-open #sidebar { display: none !important; }
      body:not(.arrivals-panel-open) #arrivals-card { display: none !important; }
      body.station-panel-open #sidebar { display: none !important; }
      body:not(.station-panel-open) #station-card { display: none !important; }
      #sidebar > div:first-of-type {
        position: absolute;
        inset: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) auto max(.75rem, env(safe-area-inset-left));
        max-height: max(9rem, calc(var(--viewport-height, 100dvh) - 64px - var(--mobile-panel-height) - 1.25rem));
        padding: .75rem;
        border: 1px solid rgba(71, 85, 105, .92);
        border-radius: 1rem;
        background: rgba(30, 41, 59, .96);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .3);
        overflow-y: auto;
        pointer-events: auto;
        z-index: 4;
      }
      #universal-results {
        position: absolute;
        inset: auto 0 0 0;
        height: var(--mobile-panel-height);
        padding: 1.35rem .75rem max(.75rem, env(safe-area-inset-bottom));
        border-top: 1px solid #475569;
        border-radius: 1rem 1rem 0 0;
        background: rgba(30, 41, 59, .98);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .28);
        pointer-events: auto;
      }
      body[data-mobile-mode="directions"] #sidebar > div:first-of-type {
        gap: .55rem;
      }
      body[data-mobile-mode="directions"] .journey-planner-grid {
        grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr) 3.2rem;
      }
      body[data-mobile-mode="directions"] .journey-input-wrap,
      body[data-mobile-mode="directions"] .journey-swap-button,
      body[data-mobile-mode="directions"] .journey-plan-button {
        height: 2.55rem;
      }
      body[data-mobile-mode="directions"] .journey-input-wrap input {
        font-size: .86rem;
      }
      #universal-results, #card-services-list {
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      #mobile-drawer-handle,
      .mobile-arrivals-handle {
        display: block;
        position: absolute;
        inset: auto auto calc(var(--mobile-panel-height) - 1.25rem) 50%;
        width: 5rem;
        height: 1.25rem;
        padding: .42rem .75rem;
        transform: translateX(-50%);
        border: 0;
        background: transparent;
        touch-action: none;
        cursor: grab;
        pointer-events: auto;
        z-index: 35;
      }
      #mobile-drawer-handle::before,
      .mobile-arrivals-handle::before {
        content: "";
        display: block;
        width: 3rem;
        height: .25rem;
        margin: 0 auto;
        border-radius: 999px;
        background: #94a3b8;
      }
      #sidebar.mobile-dragging, #arrivals-card.mobile-dragging, #station-card.mobile-dragging { transition: none !important; }
      .mobile-panel-nav { display: flex !important; padding-top: 1.15rem; }
      .mobile-detail-close { min-width: 2.75rem; min-height: 2.75rem; }
      .backdrop-blur, .backdrop-blur-md { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
      body.keyboard-visible #sidebar,
      body.keyboard-visible #arrivals-card,
      body.keyboard-visible #station-card {
        height: calc(var(--viewport-height, 100dvh) - 64px) !important;
        max-height: calc(var(--viewport-height, 100dvh) - 64px) !important;
        border-radius: 0 !important;
      }
      body.keyboard-visible #sidebar > div:first-of-type {
        max-height: min(18rem, calc(var(--viewport-height, 100dvh) - 64px - 8rem));
      }
      body.keyboard-visible #universal-results {
        height: calc(var(--viewport-height, 100dvh) - 64px);
        padding-top: 10.75rem;
        border-radius: 0;
      }
      body.keyboard-visible[data-mobile-mode="directions"] #universal-results {
        padding-top: 14.25rem;
      }
      body.theme-light #sidebar > div:first-of-type,
      body.theme-light #universal-results {
        background: rgba(255, 255, 255, .97) !important;
        border-color: #cbd5e1 !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
      }
      .map-floating-button {
        top: auto !important;
        right: max(.75rem, env(safe-area-inset-right)) !important;
        bottom: calc(var(--mobile-panel-height) + .75rem) !important;
        z-index: 32 !important;
      }
      .map-floating-button span { display: none; }
      /* Collapsed by default: only the mode switch + search bar show. Tabs, the result
         count and Recent chips only earn their space once the user is actually searching,
         so the map isn't squeezed between two fully-expanded panels on first load. */
      .search-meta-chrome {
        display: none;
      }
      body.mobile-search-expanded .search-meta-chrome {
        display: block;
      }
      /* Collapsed-state shortcuts: reach Nearby/Stops/Routes/MRT without opening the
         sheet first. Once expanded the full tabs row (above) covers the same job. */
      .mobile-intent-chips {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
      }
      body.mobile-search-expanded .mobile-intent-chips,
      body[data-mobile-mode="directions"] .mobile-intent-chips {
        display: none;
      }
      .intent-chip {
        flex: 1 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        min-height: 2.3rem;
        padding: 0 .7rem;
        border-radius: .65rem;
        border: 1px solid #334155;
        background: #0f172a;
        color: #cbd5e1;
        font-size: .78rem;
        font-weight: 650;
        white-space: nowrap;
      }
      .intent-chip.active {
        background: #dc2626;
        border-color: #ef4444;
        color: #fff;
      }
      body.theme-light .intent-chip {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #334155;
      }
      body.theme-light .intent-chip.active {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
      }
    }

    @media (orientation: landscape) and (max-height: 700px) {
      :root { --mobile-panel-height: calc(var(--viewport-height, 100dvh) - 64px); }
      #sidebar,
      #arrivals-card,
      #station-card {
        inset: 0 auto 0 0 !important;
        width: min(44vw, 30rem) !important;
        height: calc(var(--viewport-height, 100dvh) - 64px) !important;
        max-height: none !important;
        border-top: 0 !important;
        border-right: 1px solid #475569 !important;
        border-radius: 0 1rem 1rem 0 !important;
      }
      #mobile-drawer-handle, .mobile-arrivals-handle { display: none !important; }
      .mobile-panel-nav { padding-top: .5rem; }
    }


    /* Accessibility controls: text zoom + light/dark themes */
    html[data-text-scale="1"] { font-size: 13px; }
    html[data-text-scale="2"] { font-size: 14px; }
    html[data-text-scale="3"] { font-size: 16px; }
    html[data-text-scale="4"] { font-size: 18px; }
    html[data-text-scale="5"] { font-size: 20px; }

    .accessibility-select {
      min-width: 4.2rem;
    }

    body.theme-light {
      background: #f8fafc !important;
      color: #0f172a !important;
    }
    body.theme-light [class*="bg-slate-900"] { background-color: #f8fafc !important; }
    body.theme-light [class*="bg-slate-800"] { background-color: #ffffff !important; }
    body.theme-light [class*="bg-slate-700"] { background-color: #f1f5f9 !important; }
    body.theme-light [class*="bg-slate-600"] { background-color: #e2e8f0 !important; }
    body.theme-light [class*="border-slate-700"] { border-color: #cbd5e1 !important; }
    body.theme-light [class*="border-slate-600"] { border-color: #cbd5e1 !important; }
    body.theme-light [class*="text-slate-100"],
    body.theme-light [class*="text-white"] { color: #0f172a !important; }
    body.theme-light [class*="text-slate-200"],
    body.theme-light [class*="text-slate-300"] { color: #334155 !important; }
    body.theme-light [class*="text-slate-400"] { color: #475569 !important; }
    body.theme-light [class*="text-slate-500"] { color: #64748b !important; }
    body.theme-light input,
    body.theme-light select,
    body.theme-light button { color-scheme: light; }
    body.theme-dark input,
    body.theme-dark select,
    body.theme-dark button { color-scheme: dark; }
    body.theme-light .result-active { background: rgba(226, 232, 240, .95) !important; outline-color: #64748b; }
    body.theme-light mark.search-hit { background: rgba(153, 27, 27, .12); color: inherit; }
    body.theme-light [class*="text-red-400"] { color: #991b1b !important; }
    body.theme-light [class*="border-red-500"] { border-color: #b91c1c !important; }
    body.theme-light [class*="bg-red-600"] { background-color: #b91c1c !important; color: #fff !important; }
    body.theme-light .custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
    body.theme-light .custom-scroll::-webkit-scrollbar-thumb { background: #94a3b8; }
    body.theme-light .journey-preference-row {
      color: #334155;
    }
    body.theme-light .mobile-search-mode-switch button,
    body.theme-light .mobile-journey-options-toggle {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #334155;
    }
    body.theme-light .mobile-search-mode-switch button.active {
      background: #dc2626;
      border-color: #b91c1c;
      color: #fff;
    }
    body.theme-light .localisation-status {
      background: #ecfeff;
      border-color: #a5f3fc;
      color: #155e75;
    }
    body.theme-light .journey-preference-row select {
      background: #ffffff;
      color: #0f172a;
      border-color: #cbd5e1;
    }
    body.theme-light .journey-preference-row select:focus {
      border-color: #b91c1c;
      box-shadow: 0 0 0 2px rgba(185, 28, 28, .16);
    }
    body.theme-light .journey-time-context {
      color: #475569;
    }
    body.theme-light .journey-time-context i {
      color: #0e7490;
    }
    body.theme-light .journey-time-context select,
    body.theme-light .journey-time-context input {
      background: #ffffff;
      color: #0f172a;
      border-color: #cbd5e1;
    }
    body.theme-light .nearby-distance-chip {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #075985;
    }
    body.theme-light .journey-result-card {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
      color: #0f172a;
    }
    body.theme-light .journey-result-card:hover {
      background: #eef2f7 !important;
    }
    body.theme-light .journey-result-card.result-active {
      background: #e2e8f0 !important;
      border-color: #64748b !important;
      outline-color: #64748b;
    }
    body.theme-light .journey-card-kicker,
    body.theme-light .journey-card-english {
      color: #64748b;
    }
    body.theme-light .journey-card-title,
    body.theme-light .journey-card-time {
      color: #0f172a;
    }
    body.theme-light .journey-card-chain {
      color: #334155;
    }
    body.theme-light .journey-card-chevron {
      color: #64748b;
    }
    body.theme-light .journey-result-chip {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #92400e;
    }
    body.theme-light .journey-reason-badge {
      background: #d1fae5;
      border-color: #34d399;
      color: #065f46;
    }
    body.theme-light .journey-advisory {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #075985;
    }
    body.theme-light .journey-advisory i {
      color: #0369a1;
    }
    body.theme-light .journey-timeline-stop {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
    }
    body.theme-light .journey-timeline-stop span,
    body.theme-light .journey-timeline-stop small,
    body.theme-light .journey-english-line,
    body.theme-light .journey-timeline-detail {
      color: #64748b;
    }
    body.theme-light .journey-timeline-stop strong,
    body.theme-light .journey-timeline-title,
    body.theme-light .journey-timeline-route-row {
      color: #0f172a;
    }
    body.theme-light .journey-timeline-stop-card {
      background: #f8fafc;
    }
    body.theme-light .journey-timeline-stop-card .route-card-summary-main {
      color: #0f172a;
    }
    body.theme-light .journey-timeline-stop-card .journey-stop-row .route-card-summary-main {
      color: #0f172a;
    }
    body.theme-light .journey-timeline-stop-card .route-card-summary-sub,
    body.theme-light .journey-timeline-stop-card .journey-stop-action {
      color: #475569;
    }

    .settings-popover {
      position: absolute;
      right: 1rem;
      top: 3.75rem;
      width: min(88vw, 18rem);
      z-index: 60;
    }
    .settings-popover.hidden { display: none; }
    .settings-grid {
      display: grid;
      gap: .75rem;
    }
    .settings-row {
      display: grid;
      gap: .35rem;
    }
    @media (max-width: 767px) {
      body.settings-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 23, 42, .58);
        backdrop-filter: blur(5px);
      }
      .settings-popover {
        position: fixed;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        width: min(20rem, calc(100vw - 2rem));
        max-height: calc(var(--viewport-height, 100vh) - 2rem);
        overflow-y: auto;
        z-index: 80;
      }
      body.settings-open > header { z-index: 70; }
    }


    /* v8.2 contrast tightening: keep the dark UI but lift muted text/borders toward WCAG-friendly contrast. */
    body.theme-dark [class*="text-slate-500"],
    body:not(.theme-light) [class*="text-slate-500"] { color: #94a3b8 !important; }
    body.theme-dark [class*="text-slate-400"],
    body:not(.theme-light) [class*="text-slate-400"] { color: #cbd5e1 !important; }
    body.theme-dark [class*="border-slate-700"],
    body:not(.theme-light) [class*="border-slate-700"] { border-color: #475569 !important; }
    body.theme-dark .bg-slate-700\/40,
    body:not(.theme-light) .bg-slate-700\/40 { background-color: rgba(51, 65, 85, .72) !important; }
    body.theme-dark .bg-slate-700\/50,
    body:not(.theme-light) .bg-slate-700\/50 { background-color: rgba(51, 65, 85, .82) !important; }
    .route-stop-row:focus-visible, .route-direction-chip:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }

    /* v9.6.7 visual prototype: identifier first, readable localised title, quiet source line. */
    .cmt-result-layout { display: flex; align-items: center; gap: .65rem; min-width: 0; }
    .cmt-result-code { flex: 0 0 auto; }
    .cmt-result-main { flex: 1 1 auto; min-width: 0; }
    .cmt-result-arrow { flex: 0 0 auto; }
    .cmt-result-main .result-primary { font-size: 1rem; line-height: 1.3; font-weight: 750; overflow-wrap: anywhere; }
    .cmt-result-main .result-secondary,
    .cmt-result-main .result-tertiary { font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
    .cmt-result-main .result-secondary { color: #cbd5e1; }
    .cmt-result-main .result-tertiary { color: #94a3b8; }
    .cmt-result-main .result-type-label { font-size: .68rem; line-height: 1.2; letter-spacing: .08em; }
    .cmt-result-layout .result-code-badge { font-size: .78rem !important; min-width: 2.8rem !important; min-height: 1.55rem !important; padding: .24rem .52rem !important; }
    .stop-status-info { color: #fbbf24; }
    body.theme-light .stop-status-info { color: #92400e; }
    @media (max-width: 640px) {
      .cmt-result-layout { gap: .5rem; }
      .cmt-result-main .result-primary { font-size: .96rem; }
      .cmt-result-main .result-secondary,
      .cmt-result-main .result-tertiary { font-size: .75rem; }
      .cmt-result-layout .result-code-badge { font-size: .74rem !important; min-width: 2.55rem !important; padding-inline: .42rem !important; }
      .journey-card-layout { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
      .journey-card-side { justify-content: space-between; padding-top: 0; }
      .journey-card-time { font-size: .92rem; }
    }


    /* v9.6.1b: retain the app's default font and restore a clear identifier hierarchy. */
    .bus-route-badge,
    .bus-stop-code-badge,
    .route-marker,
    .train-station-code {
      font-variant-numeric: tabular-nums;
    }

    .result-code-badge {
      box-sizing: border-box;
      white-space: nowrap;
      align-items: center;
      justify-content: center;
      line-height: 1 !important;
    }

    /* Service numbers are the primary identifier. */
    .bus-route-badge.result-code-badge {
      min-width: 3.55rem !important;
      min-height: 1.9rem;
      padding: .32rem .72rem !important;
      font-size: .94rem !important;
      font-weight: 700 !important;
    }

    /* Independent LTA-inspired rail caplets: visual change only; data and sorting remain untouched. */
    .train-station-code.result-code-badge {
      min-width: 3.35rem !important;
      min-height: 1.85rem !important;
      height: 1.85rem;
      padding: 0 .68rem !important;
      border: 0 !important;
      border-radius: .62rem !important;
      font-size: .82rem !important;
      font-weight: 500 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1 !important;
      letter-spacing: .01em;
      box-shadow: none !important;
    }
    .train-interchange-code.result-code-badge {
      min-width: 0 !important;
      min-height: 1.85rem !important;
      height: 1.85rem;
      align-items: center;
      gap: 0;
      padding: 0 !important;
      border: 0 !important;
      border-radius: .62rem !important;
      background: transparent !important;
    }
    .train-interchange-fused.result-code-badge {
      overflow: hidden;
    }
    .train-interchange-bridged.result-code-badge {
      overflow: visible;
    }
    .train-interchange-segment {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 3.35rem;
      height: 1.85rem;
      padding: 0 .68rem;
      font-size: .82rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .01em;
      text-align: center;
    }
    .train-interchange-fused .train-interchange-segment {
      border-radius: 0;
    }
    .train-interchange-bridged .train-interchange-segment {
      border-radius: .62rem;
    }
    .train-interchange-divider {
      width: 2px;
      align-self: stretch;
      background: rgba(255, 255, 255, .9);
      flex: 0 0 auto;
    }
    .train-interchange-bridge {
      width: .42rem;
      height: .56rem;
      margin-inline: -.02rem;
      flex: 0 0 auto;
      align-self: center;
    }
    .cmt-result-layout .train-station-code.result-code-badge {
      min-width: 3.35rem !important;
      min-height: 1.85rem !important;
      height: 1.85rem;
      padding: 0 .68rem !important;
      font-size: .82rem !important;
    }
    .cmt-result-layout .train-interchange-code.result-code-badge {
      min-width: 0 !important;
      padding: 0 !important;
    }
    .cmt-result-layout .train-interchange-code .train-interchange-segment {
      min-width: 3.35rem;
      height: 1.85rem;
      padding: 0 .68rem;
      font-size: .82rem;
    }

    /* Five-digit stop codes are useful references, but visually subordinate. */
    .bus-stop-code-badge.result-code-badge {
      min-width: 3.05rem !important;
      min-height: 1.48rem;
      padding: .22rem .46rem !important;
      border-radius: .44rem !important;
      font-size: .68rem !important;
      font-weight: 650 !important;
    }

    .bus-route-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 3.25rem;
      padding: .25rem .75rem;
      border-radius: 9999px;
      background: #97D700 !important;
      color: #000 !important;
      border: 1px solid rgba(0,0,0,.28) !important;
      font-weight: 500;
      line-height: 1.2;
      box-shadow: 0 1px 2px rgba(15,23,42,.16);
    }

    /* v9.6.1c: City Direct service palette, sampled from the LTA reference supplied by the user. */
    .bus-route-badge.city-direct-service {
      background: #BECBC3 !important;
      color: #7B5937 !important;
      border-color: rgba(123, 89, 55, .32) !important;
      box-shadow: 0 1px 2px rgba(15,23,42,.12);
    }

    /* Premium Bus Service: same background family as City Direct, normal black text like other routes. */
    .bus-route-badge.premium-bus-service {
      background: #BECBC3 !important;
      color: #000 !important;
      border-color: rgba(0,0,0,.28) !important;
      box-shadow: 0 1px 2px rgba(15,23,42,.12);
    }

    .route-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .375rem;
      background: #97D700 !important;
      color: #000 !important;
      border: 1px solid rgba(0,0,0,.24) !important;
      font-weight: 500;
      min-width: 4.35rem;
      padding: .22rem .55rem;
      line-height: 1.15;
    }
    .route-direction-chip-active {
      background: #97D700 !important;
      color: #000 !important;
      border-color: rgba(0,0,0,.28) !important;
    }
    body.theme-light .route-stop-row {
      background: #f8fafc !important;
      border-color: #b6c2d1 !important;
    }
    body.theme-light .route-stop-row:hover {
      background: #eef4fb !important;
    }
    body.theme-light .route-direction-chip:not(.route-direction-chip-active) {
      background: #e8eef5 !important;
      color: #1e293b !important;
      border-color: #a8b6c7 !important;
    }
    body.theme-light [class*="text-red-400"],
    body.theme-light [class*="text-red-300"] {
      color: #7f1d1d !important;
    }



    /* v9.0.2: calmer, larger bus-stop code badges. */
    .bus-stop-code-badge {
      background: #008eaa !important;
      color: #ffffff !important;
      border: 1px solid #006d82 !important;
      border-radius: .5rem;
      font-size: .8125rem !important;
      line-height: 1.15;
      font-weight: 700;
      padding: .25rem .55rem !important;
    }
    body.theme-dark .bus-stop-code-badge,
    body:not(.theme-light) .bus-stop-code-badge {
      background: #008eaa !important;
      color: #ffffff !important;
      border-color: #006d82 !important;
    }

    /* Premium Bus Service waypoints with no assigned LTA stop code. */
    .bus-stop-code-badge.no-code-badge,
    body.theme-dark .bus-stop-code-badge.no-code-badge,
    body:not(.theme-light) .bus-stop-code-badge.no-code-badge {
      background: #ffffff !important;
      color: #64748b !important;
      border-color: #cbd5e1 !important;
    }
    .route-marker .route-marker-code {
      font-size: .72rem;
      opacity: .88;
    }

    .nearby-anchor-icon {
      background: transparent;
      border: 0;
    }
    .nearby-anchor-pin {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      color: #fff;
      border: 3px solid #fff;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .2);
    }
    .nearby-anchor-pin i {
      transform: rotate(45deg);
      font-size: 14px;
      line-height: 1;
    }
    .nearby-anchor-pin::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      left: 50%;
      bottom: -9px;
      transform: translateX(-50%) rotate(45deg);
      border-radius: 999px;
      background: rgba(15, 23, 42, .24);
      filter: blur(1px);
    }
    .nearby-anchor-user .nearby-anchor-pin {
      background: #008eaa;
    }
    .nearby-anchor-station .nearby-anchor-pin {
      background: #ef4444;
    }
    .route-card-summary-main,
    .route-popup-summary-main {
      color: #e2e8f0;
      font-weight: 650;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    .route-card-summary-sub,
    .route-popup-summary-sub {
      color: #cbd5e1;
      font-size: .78rem;
      line-height: 1.3;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    body.theme-light .route-card-summary-main,
    body.theme-light .route-popup-summary-main {
      color: #0f172a;
    }
    body.theme-light .route-card-summary-sub,
    body.theme-light .route-popup-summary-sub {
      color: #334155;
    }
    .route-stop-row {
      min-width: 0;
      overflow-wrap: normal;
    }
    .route-stop-row > span:last-child {
      flex: 1 1 auto;
      min-width: 0;
    }
    .route-destination-text {
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }
    .result-type-label {
      color: #94a3b8;
      font-size: .68rem;
      line-height: 1.2;
      letter-spacing: .055em;
      text-transform: uppercase;
      margin-bottom: .35rem;
    }
    .result-primary {
      color: #e2e8f0;
      font-size: .84rem;
      font-weight: 650;
      line-height: 1.24;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    .result-secondary,
    .result-tertiary {
      color: #cbd5e1;
      font-size: .72rem;
      line-height: 1.26;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    .result-tertiary { color: #b6c2d2; }
    .station-status-badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .22rem .48rem;
      border: 1px solid #fbbf24;
      border-radius: 9999px;
      background: #78350f;
      color: #fef3c7;
      font-size: .68rem;
      line-height: 1.15;
      font-weight: 700;
    }
    body.theme-light .station-status-badge {
      border-color: #b45309;
      background: #fef3c7;
      color: #78350f;
    }
    .crowd-badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .22rem .48rem;
      border: 1px solid #475569;
      border-radius: 9999px;
      background: #334155;
      color: #e2e8f0;
      font-size: .68rem;
      line-height: 1.15;
      font-weight: 700;
    }
    .crowd-badge-l { border-color: #10b981; background: #064e3b; color: #d1fae5; }
    .crowd-badge-m { border-color: #f59e0b; background: #78350f; color: #fef3c7; }
    .crowd-badge-h { border-color: #ef4444; background: #7f1d1d; color: #fee2e2; }
    body.theme-light .crowd-badge { border-color: #cbd5e1; background: #f1f5f9; color: #334155; }
    body.theme-light .crowd-badge-l { border-color: #10b981; background: #d1fae5; color: #064e3b; }
    body.theme-light .crowd-badge-m { border-color: #f59e0b; background: #fef3c7; color: #78350f; }
    body.theme-light .crowd-badge-h { border-color: #ef4444; background: #fee2e2; color: #7f1d1d; }
    body.theme-light .result-type-label { color: #64748b; }
    body.theme-light .result-primary { color: #0f172a; }
    body.theme-light .result-secondary,
    body.theme-light .result-tertiary { color: #334155; }
    .arrival-service-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .75rem;
      align-items: start;
    }
    .arrival-service-context {
      min-width: 0;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    .arrival-eta-row {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: .5rem;
    }
    .arrival-eta-box {
      flex: 1 1 7rem;
      max-width: 10rem;
      min-width: 6.5rem;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }
    #arrivals-card.arrivals-minimised,
    #station-card.arrivals-minimised {
      max-height: none;
      bottom: auto;
    }
    #arrivals-card.arrivals-minimised > div:nth-child(n+3),
    #station-card.arrivals-minimised > div:nth-child(n+3) {
      display: none !important;
    }
    .mobile-arrivals-handle { display: none; }

    .map-floating-button {
      position: absolute;
      top: .85rem;
      right: .85rem;
      z-index: 15;
      background: rgba(30, 41, 59, .92);
      border: 1px solid #334155;
      border-radius: 999px;
      padding: .5rem .85rem;
      font-size: .8rem;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .3);
    }
    body.theme-light .map-floating-button {
      background: rgba(255, 255, 255, .96);
      border-color: #cbd5e1;
    }

    @media (min-width: 768px) {
      #sidebar-collapse-toggle {
        position: absolute;
        left: 28rem;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 35;
        width: 2rem;
        height: 3.25rem;
        border-radius: 9999px;
        border: 1px solid #475569;
        background: rgba(30, 41, 59, .95);
        color: #cbd5e1;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .35);
      }
      #sidebar-collapse-toggle:hover,
      #sidebar-collapse-toggle:focus-visible {
        background: #334155;
        color: #fff;
      }
      body.theme-light #sidebar-collapse-toggle {
        background: rgba(255, 255, 255, .96);
        color: #334155;
        border-color: #b6c2d1;
      }
      body.sidebar-collapsed #sidebar {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-right-width: 0 !important;
        transform: translateX(0) !important;
        box-shadow: none !important;
      }
      body.sidebar-collapsed #sidebar-collapse-toggle {
        left: .85rem;
      }
    }
    @media (max-width: 767px) {
      #sidebar-collapse-toggle { display: none; }
    }

    .welcome-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
      background: rgba(15, 23, 42, .78);
      backdrop-filter: blur(8px);
    }
    .welcome-overlay[hidden] { display: none; }
    .welcome-dialog {
      width: min(34rem, 100%);
      max-height: min(46rem, calc(var(--viewport-height, 100vh) - 2rem));
      overflow-y: auto;
      border: 1px solid #475569;
      border-radius: 1.25rem;
      background: #1e293b;
      color: #f8fafc;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
    }
    .welcome-action-bar {
      position: sticky;
      bottom: -1.25rem;
      margin: .25rem -1.25rem -1.25rem;
      padding: .85rem 1.25rem 1.25rem;
      background: linear-gradient(180deg, rgba(30, 41, 59, .78), #1e293b 42%);
      border-top: 1px solid rgba(148, 163, 184, .18);
    }
    .welcome-ok-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 3rem;
      border-radius: .8rem;
      background: #0891b2;
      color: #fff;
      font-weight: 800;
      padding: .75rem 1rem;
      transition: background-color .15s ease;
    }
    .welcome-ok-button:hover {
      background: #06b6d4;
    }
    .welcome-ok-button:focus-visible {
      outline: 3px solid rgba(103, 232, 249, .55);
      outline-offset: 2px;
    }
    body.theme-light .welcome-overlay { background: rgba(15, 23, 42, .55); }
    body.theme-light .welcome-dialog { background: #fff; color: #0f172a; border-color: #cbd5e1; }
    body.theme-light .welcome-action-bar {
      background: linear-gradient(180deg, rgba(255, 255, 255, .8), #fff 42%);
      border-top-color: #e2e8f0;
    }
    body.theme-light .welcome-dialog .text-slate-300 { color: #475569; }
    body.theme-light .welcome-dialog .text-slate-400 { color: #64748b; }
    body.theme-light #welcome-language-select { background: #fff; color: #0f172a; border-color: #94a3b8; }

    .timetable-dialog { width: min(42rem, 100%); }

    .help-section-title {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: #94a3b8;
      margin-bottom: .4rem;
    }
    .help-list {
      list-style: disc;
      padding-left: 1.1rem;
      display: flex;
      flex-direction: column;
      gap: .35rem;
    }
    body.theme-light .help-section-title { color: #64748b; }
    .timetable-line-tabs, .timetable-direction-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }
    .timetable-tab {
      padding: .4rem .75rem;
      border-radius: 9999px;
      border: 1px solid #475569;
      background: #334155;
      color: #e2e8f0;
      font-size: .78rem;
      font-weight: 700;
      transition: background-color .15s ease, border-color .15s ease;
    }
    .timetable-tab.active { background: #dc2626; border-color: #dc2626; color: #fff; }
    body.theme-light .timetable-tab { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
    body.theme-light .timetable-tab.active { background: #dc2626; border-color: #dc2626; color: #fff; }

    .timetable-table {
      border: 1px solid #334155;
      border-radius: .75rem;
      overflow: hidden;
    }
    .timetable-row {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: .5rem;
      padding: .55rem .75rem;
      align-items: center;
      border-bottom: 1px solid #334155;
      font-size: .78rem;
    }
    .timetable-row:last-child { border-bottom: 0; }
    .timetable-row.timetable-head {
      background: #1e293b;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      font-size: .65rem;
      letter-spacing: .03em;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .timetable-row.timetable-terminus { color: #64748b; font-style: italic; }
    .timetable-row.timetable-highlight { background: rgba(220, 38, 38, .18); box-shadow: inset 3px 0 0 #dc2626; }
    body.theme-light .timetable-row.timetable-highlight { background: rgba(220, 38, 38, .1); }
    .timetable-station-name { font-weight: 600; }
    .timetable-station-code { color: #94a3b8; font-size: .68rem; margin-right: .35rem; }
    body.theme-light .timetable-table { border-color: #cbd5e1; }
    body.theme-light .timetable-row { border-bottom-color: #e2e8f0; }
    body.theme-light .timetable-row.timetable-head { background: #f1f5f9; color: #64748b; }
    body.theme-light .timetable-station-code { color: #64748b; }

    @media (max-width: 480px) {
      .timetable-row.timetable-head { display: none; }
      .timetable-row {
        grid-template-columns: 1fr;
        gap: .2rem;
      }
      .timetable-row > div::before {
        content: attr(data-label);
        display: block;
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #94a3b8;
      }
      .timetable-row > div:first-child::before { content: none; }
    }
    .welcome-language-hero {
      text-align: left;
    }
    .welcome-brand-mark {
      width: 3rem;
      height: 3rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .9rem;
      background: #dc2626;
      color: #fff;
      font-size: 1.35rem;
      margin-bottom: .9rem;
    }
    .welcome-kicker {
      color: #67e8f9;
      font-size: .72rem;
      font-weight: 750;
      letter-spacing: .08em;
      line-height: 1.2;
      margin-bottom: .4rem;
      text-transform: uppercase;
    }
    .welcome-language-card {
      display: block;
      padding: .85rem;
      border: 1px solid rgba(103, 232, 249, .28);
      border-radius: .85rem;
      background: rgba(8, 145, 178, .12);
    }
    .welcome-language-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: .45rem;
    }
    .welcome-experimental-badge {
      display: inline-flex;
      align-items: center;
      min-height: 1.05rem;
      padding: .08rem .42rem;
      border-radius: 999px;
      border: 1px solid rgba(103, 232, 249, .35);
      background: rgba(8, 145, 178, .18);
      color: #a5f3fc;
      font-size: .64rem;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
    }
    .welcome-feature-grid {
      display: grid;
      gap: .6rem;
    }
    .welcome-feature {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
      padding: .72rem .78rem;
      border: 1px solid rgba(148, 163, 184, .22);
      border-radius: .75rem;
      background: rgba(15, 23, 42, .25);
      color: #cbd5e1;
      font-size: .85rem;
      line-height: 1.35;
    }
    .welcome-feature i {
      color: #67e8f9;
      width: 1.1rem;
      line-height: 1.35;
      flex: 0 0 auto;
      text-align: center;
    }
    .welcome-beta-label {
      display: inline-flex;
      align-items: center;
      min-height: 1.05rem;
      padding: .08rem .38rem;
      border-radius: 999px;
      border: 1px solid rgba(251, 191, 36, .38);
      background: rgba(245, 158, 11, .16);
      color: #fde68a;
      font-size: .66rem;
      font-weight: 750;
      line-height: 1;
      vertical-align: .08rem;
      white-space: nowrap;
    }
    body.theme-light .welcome-kicker,
    body.theme-light .welcome-feature i { color: #0e7490; }
    body.theme-light .welcome-language-card {
      background: #ecfeff;
      border-color: #67e8f9;
    }
    body.theme-light .welcome-experimental-badge {
      background: #cffafe;
      border-color: #06b6d4;
      color: #155e75;
    }
    body.theme-light .welcome-feature {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #334155;
    }
    body.theme-light .welcome-beta-label {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #92400e;
    }
    .welcome-step {
      display: grid;
      grid-template-columns: 2rem minmax(0, 1fr);
      gap: .75rem;
      align-items: start;
    }
    .welcome-step-number {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      background: #008eaa;
      color: #fff;
      font-weight: 800;
    }
    @media (max-width: 480px) {
      .welcome-overlay { place-items: end center; padding: 0; }
      .welcome-dialog { width: 100%; max-height: min(90dvh, var(--viewport-height, 90vh)); border-radius: 1.25rem 1.25rem 0 0; }
    }