:root {
    --tr-navy: #071b38;
    --tr-text: #102641;
    --tr-muted: #6b7b90;
    --tr-border: #dfe7f1;
    --tr-blue: #0c78ff;
    --tr-coral: #ff4d5f;
    --tr-panel: rgba(255,255,255,.97);
}
.transport-page { overflow: hidden; background: #eef3f9; }
.transport-page .site-header,
.transport-page .site-footer,
.transport-page .flash-wrap { display: none !important; }
.transport-page main { min-height: 100vh; }
.transport-shell { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100vh; overflow: hidden; background: #eef3f9; color: var(--tr-text); }
.transport-sidebar { position: relative; z-index: 20; display: flex; flex-direction: column; min-height: 0; padding: 24px 22px 18px; background: var(--tr-panel); border-right: 1px solid var(--tr-border); box-shadow: 12px 0 34px rgba(8,31,65,.08); }
.transport-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transport-brand { width: 170px; display: inline-flex; align-items: center; }
.transport-brand img { width: 100%; height: auto; }
.transport-back { color: #718198; font-size: .78rem; font-weight: 800; }
.transport-back:hover { color: var(--tr-blue); }
.transport-intro { margin: 22px 0 18px; }
.transport-intro > span { color: var(--tr-blue); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.transport-intro h1 { margin: 5px 0 7px; color: var(--tr-navy); font-size: 1.7rem; line-height: 1.15; }
.transport-intro p { margin: 0; color: var(--tr-muted); font-size: .9rem; line-height: 1.55; font-weight: 600; }
.transport-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; border-radius: 15px; background: #edf3f9; }
.transport-mode-tabs button { min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: #607188; font: inherit; font-size: .86rem; font-weight: 850; cursor: pointer; }
.transport-mode-tabs button.active { background: #fff; color: var(--tr-navy); box-shadow: 0 8px 22px rgba(11,37,75,.10); }
.transport-panel { min-height: 0; overflow: auto; margin-top: 16px; padding-right: 2px; scrollbar-width: thin; }
.transport-panel[hidden] { display: none !important; }
.transport-origin-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--tr-border); border-radius: 15px; background: #fff; }
.transport-origin-card > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.transport-origin-card small,
.transport-selected-destination small { display: block; color: #8a98aa; font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.transport-origin-card strong,
.transport-selected-destination strong { display: block; max-width: 190px; overflow: hidden; color: var(--tr-navy); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.transport-origin-card button { border: 0; background: #edf6ff; color: var(--tr-blue); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: .76rem; font-weight: 850; cursor: pointer; }
.transport-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 5px rgba(12,120,255,.10); }
.transport-dot.origin { background: var(--tr-blue); }
.transport-dot.destination { background: var(--tr-coral); box-shadow: 0 0 0 5px rgba(255,77,95,.11); }
.transport-search-wrap { position: relative; margin-top: 14px; }
.transport-search-wrap > label,
.transport-line-search > span { display: block; margin: 0 0 7px 2px; color: #506179; font-size: .75rem; font-weight: 850; }
.transport-search-input { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--tr-border); border-radius: 14px; background: #fff; overflow: hidden; }
.transport-search-input span { padding-left: 14px; color: #6f8096; font-size: 1.2rem; }
.transport-search-input input,
.transport-line-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; padding: 0 13px; color: var(--tr-text); font: inherit; font-size: .9rem; }
.transport-search-results { position: absolute; z-index: 30; left: 0; right: 0; top: 80px; max-height: 270px; overflow: auto; border: 1px solid var(--tr-border); border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(7,27,56,.17); }
.transport-search-result { width: 100%; display: grid; gap: 3px; padding: 12px 14px; border: 0; border-bottom: 1px solid #edf2f7; background: #fff; color: var(--tr-text); text-align: left; cursor: pointer; }
.transport-search-result:last-child { border-bottom: 0; }
.transport-search-result:hover { background: #f7faff; }
.transport-search-result strong { font-size: .87rem; }
.transport-search-result span { color: var(--tr-muted); font-size: .73rem; line-height: 1.35; }
.transport-map-pick { width: 100%; margin-top: 8px; border: 0; background: transparent; color: var(--tr-blue); font: inherit; font-size: .78rem; font-weight: 850; cursor: pointer; text-align: left; }
.transport-selected-destination { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff5f6; border: 1px solid #ffd8dd; }
.transport-selected-destination > div { min-width: 0; flex: 1; }
.transport-selected-destination button { border: 0; background: transparent; color: #a64756; font-size: 1.25rem; cursor: pointer; }
.transport-primary-action { width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #0c78ff, #0aa6d9); color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 14px 30px rgba(12,120,255,.22); }
.transport-primary-action:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.transport-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 20px 2px 10px; }
.transport-section-heading small { display: block; color: var(--tr-blue); font-size: .67rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.transport-section-heading strong { color: var(--tr-navy); font-size: .95rem; }
.transport-section-heading > span { color: var(--tr-muted); font-size: .72rem; font-weight: 750; }
.transport-line-search { display: grid; gap: 7px; }
.transport-line-search input { min-height: 48px; border: 1px solid var(--tr-border); border-radius: 14px; background: #fff; padding: 0 14px; }
.transport-line-list { display: grid; gap: 8px; margin-top: 12px; }
.transport-loading { padding: 20px 8px; color: var(--tr-muted); text-align: center; font-size: .82rem; }
.transport-sidebar-footer { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #718198; font-size: .74rem; font-weight: 750; }
.transport-sidebar-footer a:hover { color: var(--tr-blue); }
.transport-stage { position: relative; min-width: 0; height: 100vh; overflow: hidden; background: #e8eef6; }
@media (max-width: 840px) {
    .transport-shell { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 46vh) minmax(0, 1fr); }
    .transport-sidebar { order: 2; padding: 16px; border-right: 0; border-top: 1px solid var(--tr-border); box-shadow: 0 -10px 28px rgba(8,31,65,.10); }
    .transport-stage { order: 1; height: auto; min-height: 300px; }
    .transport-brand-row { display: none; }
    .transport-intro { margin: 0 0 12px; }
    .transport-intro h1 { font-size: 1.25rem; }
    .transport-intro p { display: none; }
    .transport-sidebar-footer { display: none; }
    .transport-panel { max-height: 44vh; }
}