/* Shared UI design foundation: surfaces, readable controls and restrained motion. */
:root {
  --ui-surface: #202226;
  --ui-card: #282b30;
  --ui-field: #17191d;
  --ui-text: #f4f5f7;
  --ui-muted: #aeb4be;
  --ui-line: rgba(255,255,255,.10);
  --ui-focus: #7cbdff;
  --ui-accent: #0870d4;
  --ui-danger: #ff6961;
  --ui-operation-frame: inset 0 0 0 4px rgba(239,68,68,.88), inset 0 0 16px 8px rgba(239,68,68,.24);
  --ui-shadow: 0 16px 48px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.12);
  --ui-ease-out: cubic-bezier(.23,1,.32,1);
  --transition-fast: 140ms cubic-bezier(.23,1,.32,1);
  --transition-smooth: 220ms cubic-bezier(.23,1,.32,1);
}
/* Desktop density belongs to UI surfaces, never the geographic map or canvas.
 * Native layout zoom scales text and hit targets together. Each selected root
 * owns one scale; nested panels inherit it instead of multiplying the factor.
 * Viewport tokens keep scrolling panels inside the scaled layout viewport. */
html.cityrail-city-entered body {
  --ui-desktop-scale: var(--ui-game-scale, 1);
}
:root {
  --ui-layout-width: 100vw;
  --ui-layout-height: var(--ui-visual-height,100dvh);
}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  :root {
    --ui-overlay-top: var(--ui-visual-top,0px);
    --ui-overlay-height: var(--ui-visual-height,100dvh);
    --ui-sheet-top: max(8px, env(safe-area-inset-top));
    --ui-sheet-bottom: max(8px, env(safe-area-inset-bottom));
    --ui-sheet-left: max(8px, env(safe-area-inset-left));
    --ui-sheet-right: max(8px, env(safe-area-inset-right));
    --ui-panel-radius: 20px;
    --ui-material-panel-opacity: .96;
    --ui-material-surface-opacity: .96;
    --ui-material-card-opacity: .65;
    --ui-material-blur: blur(12px) saturate(1.1);
    --ui-panel-padding: 16px;
    --ui-panel-title-size: 20px;
    --ui-card-padding: 14px;
    --ui-card-gap: 12px;
  }
}
/* Short touch screens use side sheets; one budget reserves the map toolbar
   and playback controls. CSS follows rotation without another layout owner. */
@media (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  :root {
    --ui-sheet-top: calc(max(10px, env(safe-area-inset-top)) + 46px);
    --ui-sheet-bottom: calc(max(6px, env(safe-area-inset-bottom)) + 30px);
    --ui-sheet-width: clamp(280px, 44vw, 380px);
    --ui-task-align: flex-start;
    --ui-task-pointer-events: none;
    --ui-object-actions-position: static;
  }
}
html.cityrail-city-entered body > :is(
  #app-logo, #city-badge, #topbar, #map-quick-controls,
  #map-analysis-panel, #cityrail-map-credit, #cityrail-feedback-button,
  #draw-line-indicator, #cityrail-ats-overlay, #loop-choice-overlay,
  #settings-overlay, #line-config-overlay, #station-detail-overlay,
  #ctrl-center-overlay, #nav-overlay, #new-line-dialog-overlay,
  #cr-rni-panel, #cr-eps-panel, #cityrail-depot-modal, #cityrail-depot-connection-panel, #cc-express-modal,
  .cityrail-system-dialog, .cityrail-update-guide-overlay
) {
  --ui-layout-width: calc(100vw / var(--ui-desktop-scale));
  --ui-layout-height: calc(var(--ui-visual-height,100dvh) / var(--ui-desktop-scale));
  zoom: var(--ui-desktop-scale);
}
html.cityrail-city-entered body > #topbar {
  zoom: calc(var(--ui-desktop-scale) * var(--ui-toolbar-scale, .82));
}
/* Leaflet owns geographic popup placement; enlarge only its content layout. */
html.cityrail-city-entered .train-info-popup .leaflet-popup-content {
  zoom: var(--ui-desktop-scale);
}

html.cityrail-light-ui {
  --ui-surface: #fff;
  --ui-danger: #b42318;
  --ui-card: #f5f6f8;
  --ui-field: #fff;
  --ui-text: #20242b;
  --ui-muted: #596273;
  --ui-line: rgba(20,30,45,.13);
  --ui-focus: #0068d0;
  --ui-accent: #0867c7;
  --ui-shadow: 0 16px 48px rgba(24,35,50,.14), 0 0 0 1px rgba(24,35,50,.05);
}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog,.cityrail-system-card) {
  color: var(--ui-text) !important;
  background: var(--material-panel,var(--ui-surface)) !important;
  border: 1px solid var(--material-rim,var(--ui-line)) !important;
  border-radius: var(--ui-panel-radius,18px) !important;
  box-shadow: var(--operation-frame-shadow,var(--material-shadow,var(--ui-shadow))) !important;
  backdrop-filter: var(--material-blur,none) !important;
  -webkit-backdrop-filter: var(--material-blur,none) !important;
}
html body :is(.cityrail-object-panel-head,#settings-panel h2,#nav-panel h2) {
  border-color: var(--ui-line) !important;
  letter-spacing: -.02em;
}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,.modal,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay) :is(button:not(.line-config-launcher),input,select,textarea) {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,.modal,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay) button:not(#sd-passenger-flow button):not(.settings-row):not(.station-info-card):not(.line-config-launcher) {
  min-height: 40px;
  min-width: 40px;
  border-radius: 10px;
  cursor: pointer;
  will-change: auto !important;
  transition: scale 140ms var(--ui-ease-out);
}
html body :is(button,[role="button"],input,select,textarea,summary,[role="switch"]):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}
html body :is(input,textarea) { user-select: text; }
html body :is(button,input,select,textarea):disabled { cursor: not-allowed; }
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea) {
  min-height: var(--ui-field-height,42px);
  border-radius: 10px;
  background-color: var(--ui-field) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-line) !important;
}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel) :is(label,.sr-label,.cfg-label,.cr-rni-meta,.cr-rni-status) {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.5;
}
html body :is(.cityrail-object-panel-body,#settings-panel,#nav-panel,.ctrl-main,#ctrl-main) {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #747b87 transparent;
}
html body #settings-panel .settings-row {
  min-height: 52px;
  border-radius: 10px;
  padding: 10px 8px;
  gap: 16px;
  cursor: pointer;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}
html body #settings-panel .settings-toggle { flex-shrink: 0; }
html body #cr-rni-panel .cr-rni-body { gap: 20px; padding: 20px; }
html body #cr-rni-panel .cr-rni-field {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  gap: 10px;
}
html body #cr-rni-panel .cr-rni-kpi {
  background: var(--ui-card) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px;
  padding: 12px;
}
html body #cr-rni-panel .cr-rni-kpi b { font-variant-numeric: tabular-nums; font-size: 21px; }
html body #cr-rni-panel .cr-rni-kpi span { font-size: 12px; color: var(--ui-muted) !important; }
html body #cr-rni-panel .cr-rni-status { min-height: 20px; overflow-wrap: anywhere; }
html body #cr-rni-panel .cr-rni-status.error { color: #ff9990 !important; }
html.cityrail-light-ui body #cr-rni-panel .cr-rni-status.error { color: #b3261e !important; }
html body #cr-rni-panel .cr-rni-primary-action {
  padding: 14px 20px 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--ui-line);
}
html body #cr-rni-panel [data-rni-act="import-city"] {
  width: 100%;
  min-height: 46px;
  color: #fff !important;
  background: var(--ui-accent) !important;
  border-color: transparent !important;
  font-size: 14px;
  font-weight: 650;
}
html body #cr-rni-panel .cr-rni-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  padding: 0 20px 16px;
  gap: 8px;
  border: 0;
  background: var(--material-panel,var(--ui-surface)) !important;
  backdrop-filter: none;
}
html body #cr-rni-panel .cr-rni-actions button { background: transparent !important; color: var(--ui-muted) !important; font-weight: 500; }
html body #ctrl-center-overlay .ctrl-card {
  background: var(--material-panel,var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 18px;
}
html body #ctrl-center-overlay .ctrl-card-title { font-size: 14px; line-height: 1.5; font-weight: 650; margin-bottom: 14px; }
html body #ctrl-center-overlay :is(.ts-label,.ctrl-empty,.ctrl-table th) { color: var(--ui-muted) !important; }
html body #ctrl-center-overlay :is(.ts-val,.ctrl-stat-value,.ctrl-table) { font-variant-numeric: tabular-nums; }
html body #ctrl-center-overlay .ctrl-table :is(th,td) { padding: 10px 12px; line-height: 1.5; }
html body #ctrl-center-overlay .ctrl-nav-item { min-width: 44px; min-height: 44px; }
/* High-frequency controls remain stationary; avoid ambient pulses in working UI. */
html body :is(.tool-btn,.map-btn,.ctrl-nav-item,.settings-row) { animation: none !important; will-change: auto !important; }
html body button { will-change: auto !important; }
html body :is(button,.tool-btn,.map-btn):active { filter: none !important; }
@media (hover: none), (pointer: coarse) {
  :root {
    --ui-toolbar-scale: 1;
    --ui-toolbar-button-size: 44px;
    --ui-map-action-size: 44px;
    --ui-field-height: 44px;
  }
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel,.express-config,.offline-maps-dialog,.ats-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea) {
    min-height: 44px;
    font-size: 16px;
  }
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel,.express-config,.offline-maps-dialog,.ats-dialog) select {
    appearance:none;
    height:44px;
    padding-right:28px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position:right 8px center;
    background-repeat:no-repeat;
  }
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel) button:not(#sd-passenger-flow button):not(.settings-row):not(.station-info-card):not(.line-config-launcher) { min-height: 44px; min-width: 44px; }
}
@media (max-width: 760px) {
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel) button:not(#sd-passenger-flow button):not(.settings-row):not(.station-info-card):not(.line-config-launcher) { min-height: 44px; min-width: 44px; }
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog) :is(input:not([type="range"]):not([type="checkbox"]),select,textarea) { font-size: 16px; }
  html body #cr-rni-panel .cr-rni-body { padding: 16px; gap: 16px; }
  html body #cr-rni-panel .cr-rni-primary-action { padding: 12px 16px 8px; }
  html body #cr-rni-panel .cr-rni-actions { padding: 0 16px 12px; }
  html body #ctrl-center-overlay .ctrl-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,.modal,.cityrail-toast,.toast,.cityrail-system-dialog,.cityrail-node-action-popup,#settings-panel,#nav-panel,#ctrl-center-overlay,[id$="-screen"]) *,
  html body :is(button,.tool-btn,.map-btn):not(.map-display-button) {
    animation: none !important;
    transition-property: opacity !important;
    transition-duration: 100ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-cityrail-input="keyboard"] body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,.modal,.cityrail-toast,.toast,.cityrail-system-dialog,.cityrail-node-action-popup,#settings-panel,#nav-panel,#ctrl-center-overlay,[id$="-screen"]) *,
html[data-cityrail-input="keyboard"] body :is(button,.tool-btn,.map-btn) { animation: none !important; transition: none !important; }
html[data-cityrail-input="keyboard"] body :is(button,.tool-btn,.map-btn):active { scale: 1 !important; }
/* Existing panels have nested ID rules; match that scope at the shared boundary. */
html body #settings-overlay #settings-panel,
html body #nav-overlay #nav-panel {
  background: var(--material-panel,var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-panel-radius,18px) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: var(--material-blur,none) !important;
  -webkit-backdrop-filter: var(--material-blur,none) !important;
}
html body #line-config-overlay #line-config-panel button:not(.line-config-launcher),
html body #station-detail-overlay #station-detail-panel button:not(.sd-zone-btn):not(#sd-passenger-flow button),
html body #settings-overlay #settings-panel button,
html body #ctrl-center-overlay #ctrl-close-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}
html body #line-config-overlay #line-config-panel input[type="range"] {
  min-height: 44px !important;
  cursor: ew-resize;
}
html body #cr-rni-panel #cr-rni-import-city {
  background: var(--ui-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html body :is(.cityrail-node-action-popup,.leaflet-tooltip) { animation: none !important; transition: none !important; }
@media (max-height: 500px) and (orientation: landscape) {
  html body #cr-rni-panel .cr-rni-head { padding-top: 12px; padding-bottom: 12px; }
  html body #cr-rni-panel .cr-rni-body { padding-top: 12px; padding-bottom: 12px; }
}

/* v604 — map-first workspace. Solid content; material only on navigation chrome. */
:root {
  --ui-surface:#242426; --ui-card:#2e2e31; --ui-field:#1c1c1e;
  --ui-text:#f5f5f7; --ui-muted:#b5b5bd; --ui-line:rgba(255,255,255,.10);
  --ui-canvas:#171719; --ui-chrome:rgba(36,36,38,.94);
  --ui-accent:#0870d4; --ui-selection:rgba(55,142,255,.16);
  --ui-selected-fill:#e5e5ea; --ui-selected-text:#222226;
  --ui-selected-border:rgba(255,255,255,.85);
  --ui-selected-shadow:0 2px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.65);
  --ui-shadow:0 24px 64px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.12);
}
html.cityrail-light-ui {
  --ui-surface:#ffffff; --ui-card:#f5f5f7; --ui-field:#f5f5f7;
  --ui-text:#1d1d1f; --ui-muted:#606069; --ui-line:rgba(0,0,0,.09);
  --ui-canvas:#f5f5f7; --ui-chrome:rgba(250,250,252,.94);
  --ui-accent:#0867c7; --ui-selection:rgba(0,102,204,.09);
  --ui-selected-fill:#414146; --ui-selected-text:#f5f5f7;
  --ui-selected-border:#29292e;
  --ui-selected-shadow:0 2px 5px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12);
  --ui-shadow:0 24px 64px rgba(20,20,35,.13),0 2px 8px rgba(20,20,35,.06);
}
html body :is(#ctrl-center-overlay,#settings-panel,.cityrail-object-panel,#nav-panel,#new-line-dialog,.reg-card,.auth-card,.city-select-card) {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif!important;
  font-optical-sizing:auto; letter-spacing:normal; -webkit-font-smoothing:antialiased;
}
html body #ctrl-center-overlay {background:var(--material-stage,var(--ui-canvas))!important;color:var(--ui-text)!important;}
html body #ctrl-center-overlay #ctrl-topbar {
  position:relative;z-index:3;overflow:visible;
  height:auto!important;min-height:72px!important;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))!important;flex-shrink:0!important;
  background:var(--material-chrome,var(--ui-chrome))!important;border-bottom:1px solid var(--material-rim,var(--ui-line))!important;
  backdrop-filter:var(--material-blur,blur(16px))!important;-webkit-backdrop-filter:var(--material-blur,blur(16px))!important;
  gap:20px!important;scrollbar-width:none!important;scrollbar-gutter:auto!important;
}
html body #ctrl-center-overlay .ctrl-top-logo {
  color:var(--ui-text)!important;font-size:18px!important;letter-spacing:-.02em!important;
  display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0;
}
html body #ctrl-center-overlay .ctrl-top-logo small {font-size:11px!important;letter-spacing:.02em!important;color:var(--ui-muted)!important;}
html body #ctrl-center-overlay .ctrl-top-stat {border:0!important;padding:0!important;gap:4px!important;flex-shrink:0;}
html body #ctrl-center-overlay .ts-label {font-size:12px!important;}
html body #ctrl-center-overlay .ts-val {font-size:14px!important;font-weight:600!important;color:var(--ui-text)!important;}
html body #ctrl-center-overlay #ctrl-close-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;
  position:sticky;right:0;flex-shrink:0;margin-left:auto!important;
  background:var(--material-inset,var(--ui-surface))!important;color:var(--ui-text)!important;border:1px solid var(--material-rim,var(--ui-line))!important;
  border-radius:12px!important;padding:0 14px!important;box-shadow:var(--material-button-shadow,none)!important;
}
html body #ctrl-center-overlay #ctrl-nav {
  width:184px!important;min-width:184px!important;padding:20px 12px!important;gap:5px!important;
  background:var(--material-chrome,var(--ui-chrome))!important;border-right:1px solid var(--material-rim,var(--ui-line))!important;
  scrollbar-gutter:auto!important;box-sizing:border-box!important;
}
html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item {
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
  width:100%!important;height:auto!important;min-height:46px!important;flex-shrink:0;
  border:0!important;border-radius:10px!important;padding:10px 12px!important;
  color:var(--ui-muted)!important;background:transparent!important;box-shadow:none!important;
  transition: background-color 180ms ease, color 180ms ease, scale 140ms var(--ui-ease-out);
}
html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item::after {
  content:attr(data-nav-label);font-size:13px;line-height:1.5;font-weight:500;white-space:nowrap;
}
html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item svg {width:20px!important;height:20px!important;flex-shrink:0;}
html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item.active {
  color:var(--ui-text)!important;background:var(--ui-selection)!important;
  box-shadow:inset 3px 0 var(--ui-accent)!important;
}
html body #ctrl-center-overlay #ctrl-main {padding:var(--ui-panel-padding,28px)!important;gap:var(--ui-card-gap,24px)!important;background:var(--material-content,var(--ui-canvas))!important;}
html body #ctrl-center-overlay #ctrl-content-grid {gap:var(--ui-card-gap,20px)!important;}
html body #ctrl-center-overlay .ctrl-card {
  padding:var(--ui-card-padding,24px)!important;border-radius:20px!important;border:1px solid var(--material-rim,var(--ui-line))!important;
  background:var(--material-panel,var(--ui-surface))!important;box-shadow:var(--material-shadow,0 2px 3px rgba(0,0,0,.025))!important;
}
html body #ctrl-center-overlay .ctrl-card-title {font-size:var(--ui-control-title-size,17px)!important;font-weight:600!important;letter-spacing:-.015em!important;margin-bottom:var(--ui-card-gap,20px)!important;color:var(--ui-text)!important;}
html body #ctrl-center-overlay :is(.ctrl-empty,.ctrl-big-sub,.al-time,.ctrl-alert-section-title,.cr-hourly-note,.cr-hourly-detail) {color:var(--ui-muted)!important;font-size:12px!important;}
html body #ctrl-center-overlay .ctrl-v1464-flow-overview>div {
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:12px 16px!important;
}
html body #ctrl-center-overlay .ctrl-big-num {font-size:32px!important;line-height:1.2!important;letter-spacing:-.03em!important;color:var(--ui-text)!important;font-weight:600!important;}
html body #ctrl-center-overlay .ctrl-big-sub {margin-top:8px!important;}
html body #ctrl-center-overlay .cr-hourly-scroll {background:transparent!important;border:0!important;border-radius:0!important;touch-action:pan-x pan-y!important;}
html body #ctrl-center-overlay #cct-hourly-flow-svg text {fill:var(--ui-muted)!important;}
html body #ctrl-center-overlay .cr-hourly-detail summary {min-height:44px;display:flex;align-items:center;gap:8px;}
html body #ctrl-center-overlay .cr-hourly-detail summary::before {content:'›';font-size:20px;}
html body #ctrl-center-overlay .cr-hourly-detail[open] summary::before {content:'⌄';}
html body #ctrl-center-overlay .ctrl-table th {font-weight:500!important;background:var(--ui-card)!important;}
html body #ctrl-center-overlay .ctrl-alert-item {background:var(--material-inset,var(--ui-surface))!important;border:1px solid var(--material-rim,var(--ui-line))!important;border-radius:12px!important;}
/* Settings use grouped forms; the sticky header stays reachable when scrolling. */
html body #settings-overlay #settings-panel {
  width: min(520px, calc(var(--ui-layout-width) - 32px));
  padding: 0 var(--ui-settings-inset,24px) var(--ui-settings-inset,24px);
  max-height: calc(var(--ui-layout-height) - 48px);
  overflow-y: auto;
  gap: 16px;
}
html body #settings-panel .cr-settings-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ui-settings-header-height,72px);
  gap: 16px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
}
html body #settings-panel .cr-settings-header h2 {
  font-size: var(--ui-settings-title-size,24px);
  font-weight: 650;
  letter-spacing: -.025em;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ui-text);
}
html body #settings-panel #cr-settings-close {
  background: var(--ui-selection);
  color: var(--ui-focus);
  border: 0;
  font-size: 15px;
  font-weight: 600;
  min-width: 64px;
}
html body #settings-panel .cityrail-setting-switches {
  display: flex;
  flex-direction: column;
}
html body #settings-panel legend {
  padding: 0;
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 600;
}
html body #settings-panel .settings-row,
html body #settings-panel button.settings-row {
  width: 100%;
  padding: var(--ui-settings-row-padding,12px 0);
  min-height: var(--ui-settings-row-height,56px);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
}
html body #settings-panel .cityrail-setting-switches .settings-row + .settings-row {
  border-top: 1px solid var(--ui-line);
}
html body #settings-panel .sr-label {
  font-size: var(--ui-settings-label-size,15px);
  color: var(--ui-text);
  line-height: 1.5;
  white-space: normal;
}
html body #settings-panel .settings-divider {display:none;}
html body #settings-panel .settings-footer {padding:8px 0 0;gap:6px;}
html body #settings-panel .settings-footer :is(.sf-logo-en,.sf-logo-zh) {display:none;}
html body #settings-panel .settings-footer .sf-contact-cn {
  font-size:12px;line-height:1.5;color:var(--ui-muted);
}
html body #settings-panel .cityrail-setting-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

html body #settings-panel .settings-action-group button,
html body #settings-panel .autosave-settings button {
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
}
@media (hover: hover) and (pointer: fine) {
html body #settings-panel .settings-action-group button:hover,
html body #settings-panel .autosave-settings button:hover {background:var(--ui-hover);}
}
html body #settings-panel .settings-section {
  min-width: 0;
  margin: 0 0 16px;
  padding: var(--ui-settings-section-inset,14px 0);
  border: 0;
}
html body #settings-panel .settings-section .demand-scaling-control {
  padding: 0;
}
html body #settings-panel .autosave-settings select {
  min-height: 44px;
  border-radius: 10px;
  padding: 6px 12px;
  font: inherit;
}
html body #settings-panel .settings-action-group button {
  min-height: 44px;
  border-radius: 12px;
}

/* Inspectors and forms share a restrained reading scale. */
html body :is(#line-config-panel,#station-detail-panel,#nav-panel,#new-line-dialog,#cr-rni-panel) {border-radius:var(--ui-panel-radius,24px)!important;}
html body :is(.cityrail-object-panel-head,.cr-rni-head) {padding:var(--ui-panel-padding,20px) var(--ui-panel-padding,24px)!important;}
html body :is(.cityrail-object-panel-title,.cr-rni-title) {font-size:var(--ui-panel-title-size,20px)!important;font-weight:600!important;letter-spacing:-.02em!important;color:var(--ui-text)!important;}
html body #cr-rni-panel .cr-rni-body {padding:var(--ui-panel-padding,20px) var(--ui-panel-padding,24px)!important;gap:var(--ui-card-gap,20px)!important;}
html body #cr-rni-panel .cr-rni-kpi {background:var(--ui-card)!important;border:0!important;padding:16px 12px!important;}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog) button:not(#sd-passenger-flow button) {box-shadow:none!important;}
@media (hover:hover) and (pointer:fine) {
  html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item:hover {background:var(--ui-card)!important;color:var(--ui-text)!important;}
  html body #settings-panel .settings-row:hover {background:var(--ui-hover);}
}
html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel) button:active:not(:disabled) {scale:.97;}
@media (max-width:1439px) {html body #ctrl-center-overlay #ctrl-alerts {display:none!important;}}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  html body #ctrl-center-overlay {
    --ui-control-title-size: 15px;
  }
  html body #ctrl-center-overlay #ctrl-topbar {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    height:auto!important;
    min-height:60px!important;
    padding:max(8px,env(safe-area-inset-top)) 12px 8px!important;
    gap:8px!important;
  }
  html body #ctrl-center-overlay .ctrl-top-logo {
    margin-right:0!important;
    font-size:16px!important;
    min-width:0;
    white-space:nowrap;
  }
  html body #ctrl-center-overlay #ctrl-close-btn {
    position:static;
    padding:0 10px!important;
  }
  html body #ctrl-center-overlay #ctrl-topbar>.ctrl-top-stat .ts-label {display:none;}
  html body #ctrl-center-overlay #ctrl-more-stats>summary {padding-inline:8px;font-size:12px;}
  html body #ctrl-center-overlay .ctrl-more-stats-content {right:12px;}
  html body #ctrl-center-overlay #ctrl-body {flex-direction:column!important;}
  html body #ctrl-center-overlay #ctrl-nav {
    order:2!important;
    width:100%!important;
    min-width:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:row!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:6px 8px max(6px,env(safe-area-inset-bottom))!important;
    border-right:0!important;
    border-top:1px solid var(--ui-line)!important;
    scroll-padding-inline:8px;
    touch-action:pan-x;
    scrollbar-width:none!important;
  }
  html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item {
    width:auto!important;
    min-width:70px!important;
    min-height:52px!important;
    padding:6px!important;
    flex-direction:column!important;
    gap:3px!important;
    justify-content:center!important;
    border-radius:12px!important;
  }
  html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item::after {font-size:11px;}
  html body #ctrl-center-overlay #ctrl-nav .ctrl-nav-item.active {box-shadow:inset 0 -2px var(--ui-accent)!important;}
  html body #ctrl-center-overlay .ctrl-big-num {font-size:25px!important;}
  html body #ctrl-center-overlay .ctrl-v1464-flow-overview>div {padding:10px 4px!important;}
  html body #settings-overlay #settings-panel {
    width:var(--ui-sheet-width,calc(var(--ui-layout-width) - var(--ui-sheet-left) - var(--ui-sheet-right)));
    max-height:calc(var(--ui-layout-height) - var(--ui-sheet-top) - var(--ui-sheet-bottom));
    padding:0 16px 16px;
    gap:12px;
  }
  html body #settings-panel .cr-settings-header {
    margin-inline:-16px;
    padding-inline:16px;
    min-height:60px;
  }
  html body #settings-panel .settings-section {
    margin:0;
    padding:12px;
    border-radius:14px;
    background:var(--ui-card);
  }
  html body #settings-panel .sr-label {font-size:14px;}
}
@media (max-height:500px) {
  html body #settings-panel .cr-settings-header {min-height:60px;}
  html body #ctrl-center-overlay #ctrl-topbar {height:auto!important;min-height:56px!important;padding-block:8px!important;}
}
@media (prefers-reduced-transparency:reduce) {
  html body #ctrl-center-overlay :is(#ctrl-topbar,#ctrl-nav) {background:var(--ui-surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
@media (prefers-contrast:more) {
  :root {--ui-line:#8c8c94;--ui-muted:#dedee3;}
  html.cityrail-light-ui {--ui-line:#656570;--ui-muted:#333338;}
  html body #ctrl-center-overlay :is(#ctrl-topbar,#ctrl-nav) {background:var(--ui-surface)!important;backdrop-filter:none!important;}
}
/* Focused tasks own the foreground; feedback returns when the task is closed. */
body:has(:is(#settings-overlay,#line-config-overlay,#station-detail-overlay,#new-line-dialog-overlay,#nav-overlay):not(.hidden)) #cityrail-feedback-button,
body:has(.cityrail-depot-modal.visible,.cr-eps-panel:not(.hidden),#cr-rni-panel:not(.hidden)[style*="flex"],.workshop-detail.visible,.workshop-modal.visible,#cityrail-info-modal[style*="display: flex"],.cityrail-pay-modal.visible) #cityrail-feedback-button {display:none!important;}
/* Keep dense-data headers calm across themes, including legacy light-theme rules. */
html.cityrail-light-ui body #ctrl-center-overlay .ctrl-card {border-radius:20px!important;box-shadow:var(--material-shadow,0 2px 3px rgba(0,0,0,.025))!important;}
html.cityrail-light-ui body #ctrl-center-overlay :is(.ctrl-top-logo,.ctrl-card-title) {color:var(--ui-text)!important;}
html body :is(.reg-panel,.auth-card) {background:var(--material-panel,var(--ui-surface))!important;border:1px solid var(--ui-line)!important;box-shadow:var(--ui-shadow)!important;border-radius:24px!important;color:var(--ui-text)!important;}
html body :is(.reg-panel,.auth-card) :is(input,select) {background:var(--ui-field)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important;border-radius:10px!important;min-height:46px!important;}
html body :is(.reg-panel,.auth-card) button:not(#sd-passenger-flow button) {min-height:44px!important;box-shadow:none!important;}
html body #cr-rni-import-progress {background:var(--material-stage,rgba(18,18,20,.88))!important;backdrop-filter:var(--material-background-blur,none)!important;-webkit-backdrop-filter:var(--material-background-blur,none)!important;}
html body #cr-rni-import-progress .cr-rni-progress-body {
  max-width: 560px;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--ui-line);
  background: var(--material-panel,var(--ui-surface));
  color: var(--ui-text);
  box-shadow: var(--material-shadow,var(--ui-shadow));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
  box-sizing: border-box;
}
html body #cr-rni-import-progress .cr-rni-progress-title {font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.025em;color:var(--ui-text);}
html body #cr-rni-import-progress .cr-rni-progress-kicker {display:none;}
html body #cr-rni-import-progress :is(.cr-rni-progress-detail,.cr-rni-progress-meta) {color:var(--ui-muted);font-size:14px;font-weight:400;}
html body #cr-rni-import-progress .cr-rni-progress-pct {font-size:22px;font-weight:600;color:var(--ui-text);}
html body #cr-rni-import-progress .cr-rni-progress-track {height:6px;background:var(--ui-card);}
html body #cr-rni-import-progress .cr-rni-progress-fill {background:var(--ui-accent);box-shadow:none;transition:none;}
html body #cr-rni-import-progress.error .cr-rni-progress-fill {background:#e34840;}
@media (max-width:760px) {
  html body #cr-rni-import-progress .cr-rni-progress-body {padding:24px;}
  html body #cr-rni-import-progress .cr-rni-progress-title {font-size:26px;}
  html body :is(.reg-panel,.auth-card) :is(input,select) {font-size:16px!important;}
}
/* Structural controls: metric disclosure and native settings groups. */
html body #ctrl-center-overlay #ctrl-more-stats {flex-shrink:0;color:var(--ui-text);}
html body #ctrl-center-overlay #ctrl-more-stats > summary {cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:10px;background:var(--ui-card);font-size:13px;}
html body #ctrl-center-overlay .ctrl-more-stats-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 20px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  background: var(--material-popover,var(--ui-surface));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
  padding: 24px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow);
  max-width: calc(100vw - 24px);
  max-height: calc(var(--ui-layout-height) - 90px);
  overflow: auto;
}
html body #ctrl-center-overlay .ctrl-more-stats-content .ctrl-top-stat {display:flex;flex-direction:column;align-items:flex-start;}
html body #settings-panel .settings-action-group {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
html body #settings-panel .settings-action-group button {width:100%;white-space:normal;}
body:has(#ctrl-center-overlay:not(.hidden), #cityrail-ats-overlay:not(.hidden), #living-city-overlay:not(.hidden), #cityrail-living-map-legend:not(.hidden)) #cityrail-feedback-button {display:none!important;}
html body #ctrl-center-overlay #ctrl-feedback-btn {grid-column:1/-1;min-height:44px;background:var(--ui-card)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;}
/* Single-level navigation: desktop list and scrollable compact-device strip. */
html body #ctrl-center-overlay #ctrl-nav {flex-wrap:nowrap!important;}
@media (min-width:761px) and (pointer:fine), (min-width:761px) and (min-height:521px) {
 html body #ctrl-center-overlay #ctrl-more-stats {display:contents;}
 html body #ctrl-center-overlay #ctrl-more-stats>summary {display:none!important;}
 html body #ctrl-center-overlay .ctrl-more-stats-content {position:static;display:flex;align-items:center;gap:20px;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;}
 html body #ctrl-center-overlay .ctrl-more-stats-content .ctrl-top-stat {flex-direction:row;align-items:center;gap:8px;white-space:nowrap;}
 html body #ctrl-center-overlay .ctrl-more-stats-content {flex-wrap:wrap;column-gap:24px;row-gap:8px;min-width:0;}
 html body #ctrl-center-overlay #ctrl-feedback-btn {white-space:nowrap;padding:0 12px;}
}
html body #cr177-od-card .cr177-svg-wrap {height:auto;aspect-ratio:1;min-height:300px;background:var(--ui-surface);border:0;}
html body #cr177-od-card .cr177-map-pane {min-height:0;background:var(--ui-surface);}
html body #cr177-od-card .cr177-side {background:var(--ui-card);backdrop-filter:none;}
html body #cr177-od-svg .chord-label {font-size:18px;fill:var(--ui-text);}
html body #cr177-od-svg[data-focused="true"] .chord-station:not([data-selected]) {opacity:.35;}
html body #cr177-od-svg .chord-station[data-selected="true"] {stroke:var(--ui-text);stroke-width:3;}
@media (hover: hover) and (pointer: fine) {
html body #cr177-od-svg .chord-flow:hover path {opacity:1;}
html body #cr177-od-svg .chord-station:hover {stroke:var(--ui-text);stroke-width:2;}
}
html body #cr177-od-card .cr177-filter {display:flex;align-items:center;gap:12px;color:var(--ui-muted);font-size:13px;margin:8px 0 12px;}
html body #cr177-od-card .cr177-filter select {min-height:44px;max-width:70%;background:var(--ui-field);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:10px;padding:8px 12px;}
@media(max-width:760px){
 html body #cr177-od-card .cr177-svg-wrap {overflow:auto;max-height:620px;aspect-ratio:auto;touch-action:pan-x pan-y;}
 html body #cr177-od-card #cr177-od-svg {min-width:640px;height:auto;aspect-ratio:1;}
 html body #cr177-od-card .cr177-filter select {font-size:16px;}
}

/* Operational analysis is a registered control-center panel. */
html body #ctrl-center-overlay:not([data-active-tab="operations-analysis"]) #ops-analysis-card {display:none!important;}
html body #ctrl-center-overlay[data-active-tab="operations-analysis"] #ctrl-content-grid>.ctrl-card:not(#ops-analysis-card) {display:none!important;}
html body #ctrl-center-overlay[data-active-tab="operations-analysis"] #ops-analysis-card {display:block!important;grid-column:1/-1;min-width:0;}
html body #ops-analysis-card {padding:24px;background:var(--ui-surface);color:var(--ui-text);}
#ops-analysis-card .ops-header {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
#ops-analysis-card h2 {font-size:24px;margin:0 0 8px;font-weight:650;}
#ops-analysis-card p {font-size:13px;line-height:1.6;color:var(--ui-muted);margin:10px 0;}
#ops-analysis-card select,#ops-analysis-card button {min-height:44px;border:1px solid var(--ui-line);border-radius:10px;padding:8px 12px;background:var(--ui-card);color:var(--ui-text);font:inherit;}
#ops-analysis-card select {max-width:260px;}
#ops-analysis-card button:disabled {opacity:.4;}
#ops-analysis-card .ops-jumps {display:flex;gap:8px;overflow:auto;margin:16px 0 24px;padding-bottom:8px;}
#ops-analysis-card .ops-jumps a {flex-shrink:0;color:var(--ui-text);text-decoration:none;background:var(--ui-card);border-radius:10px;padding:12px;font-size:13px;}
#ops-analysis-card .ops-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
#ops-analysis-card .ops-chart {
  min-width:0;
  scroll-margin-top:20px;
  border: 0;
  border-top: 1px solid var(--ui-line);
  padding: 20px 0;
}
#ops-analysis-card #ops-chart-0,#ops-analysis-card #ops-chart-4,#ops-analysis-card #ops-chart-6 {grid-column:1/-1;}
#ops-analysis-card h3 {margin:0 0 16px;font-size:17px;font-weight:600;}
#ops-analysis-card .ops-chart-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
#ops-analysis-card .ops-chart-header h3 {
  margin:0;
}
#ops-analysis-card .ops-chart-filter {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
  color:var(--ui-muted);
  font-size:13px;
}
#ops-analysis-card .ops-chart-filter select {
  min-width:0;
  flex:1;
  width:160px;
  background:var(--ui-field);
}
#ops-analysis-card .ops-scroll {
  overflow:auto;
  max-height:520px;
  overscroll-behavior:contain;
  /* Live SVG marks are replaced; they must not become browser scroll anchors. */
  overflow-anchor:none;
}
#ops-analysis-card svg {display:block;width:100%;height:auto;}
#ops-analysis-card svg text {fill:var(--ui-text);font:12px system-ui,sans-serif;font-variant-numeric:tabular-nums;}
#ops-analysis-card .ops-page {display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-bottom:12px;font-size:13px;}
#ops-analysis-card .ops-note {
  margin: 12px 16px;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.5;
}
#ops-analysis-card .ops-empty {padding:56px 16px;text-align:center;color:var(--ui-muted);font-size:14px;}
#ops-analysis-card :focus-visible {outline:2px solid #458cde;outline-offset:3px;}
@media(max-width:1700px){#ops-analysis-card .ops-grid {grid-template-columns:1fr;}}
@media(max-width:760px){html body #ops-analysis-card {padding:16px;}#ops-analysis-card .ops-chart {padding:14px 0;}#ops-analysis-card select {font-size:16px;}}

/* Compact map actions share the existing material and interaction states. */
#map-quick-controls {
  display:none;
  position:fixed;
  left:var(--ui-map-footer-left,max(12px,env(safe-area-inset-left)));
  bottom:var(--ui-map-actions-bottom,calc(max(10px,env(safe-area-inset-bottom)) + 30px));
  z-index:1050;
  gap:4px;
  grid-template-columns:repeat(4,var(--ui-map-action-size,22px));
  grid-template-rows:repeat(3,var(--ui-map-action-size,22px));
  color:var(--ui-text);
}
#map-quick-controls > [role="group"] {
  display:grid;
  grid-template-columns:repeat(3,var(--ui-map-action-size,22px));
  gap:4px;
}
#map-quick-controls > [role="group"]:not(#map-utility-controls) {
  grid-column:1 / span 3;
}
#map-quick-controls > #map-utility-controls {
  grid-column:4;
  grid-row:1 / span 3;
  grid-template-columns:var(--ui-map-action-size,22px);
  align-content:start;
}
#map-quick-controls button {
  box-sizing: border-box;
  display:grid;
  place-items:center;
  width:var(--ui-map-action-size,22px);
  height:var(--ui-map-action-size,22px);
  padding:0;
  border:1px solid var(--ui-line);
  border-radius:50%;
  background:var(--ui-chrome);
  color:inherit;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  cursor:pointer;
  transition: background-color 140ms ease, scale 140ms var(--ui-ease-out),
    translate 180ms var(--ui-ease-out), box-shadow 180ms var(--ui-ease-out);
}
@media (hover:hover) and (pointer:fine) {
  #map-quick-controls button:hover {
    background: var(--ui-card);
    translate: 0 -2px;
    box-shadow: 0 4px 10px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.55);
  }
}
#map-quick-controls button:active,
#map-quick-controls button.cityrail-pressing {
  translate: 0 0;
  scale:.97;
  background:var(--ui-field);
}
#map-quick-controls button:focus-visible {
  outline:2px solid var(--ui-focus);
  outline-offset:1px;
}
#map-quick-controls button[aria-pressed="true"] {
  border-color: var(--ui-accent);
  color:var(--ui-accent);
  background:var(--ui-card);
}
#map-quick-controls svg {
  width:var(--ui-map-action-icon-size,14px);
  height:var(--ui-map-action-icon-size,14px);
  pointer-events:none;
  grid-area:1/1;
}
html.cityrail-city-entered #map-quick-controls {
  display:grid;
}
body:has(:is(#settings-overlay,#line-config-overlay,#station-detail-overlay,#new-line-dialog-overlay,#nav-overlay,#ctrl-center-overlay,#line-edit-toolbar):not(.hidden),.cityrail-depot-modal.visible,.cr-eps-panel:not(.hidden),#cr-rni-panel:not(.hidden)[style*="flex"]) #map-quick-controls {
  display:none;
}
@media (prefers-reduced-motion:reduce) {
  #map-quick-controls button { transition: none; }
  #map-quick-controls button:is(:hover,:active,.cityrail-pressing) { translate: none; scale: 1; }
}
@media (prefers-reduced-transparency:reduce) {#map-quick-controls button {
  background:var(--ui-surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}}

/* Compact devices keep display controls in settings, using the shared preference owner. */

/* On-demand map analysis, above the shared shortcut grid. */
#map-analysis-panel {
  display: none;
  position: fixed;
  left: 12px;
  bottom: var(--ui-map-analysis-bottom,calc(max(10px,env(safe-area-inset-bottom)) + 158px));
  z-index: 1050;
  width: 320px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: var(--material-panel,var(--ui-chrome));
  color: var(--ui-text);
  box-shadow: var(--material-shadow,0 8px 28px #0003);
  backdrop-filter: var(--material-blur,blur(18px));
  font: 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-backdrop-filter: var(--material-blur,none);
}
#map-analysis-panel[hidden],#map-analysis-panel [hidden] {display:none!important;}
#map-analysis-panel summary {padding:12px 16px;cursor:pointer;font-weight:650;}
#map-analysis-panel .gis-panel-content {padding:0 16px;max-height:min(48vh,440px);overflow:auto;overscroll-behavior:contain;}
#map-analysis-panel section {padding:12px 0;border-top:1px solid var(--ui-line);}
#map-analysis-panel h3 {font-size:13px;margin:0 0 6px;color:var(--ui-text)!important;}
#map-analysis-panel p {margin:6px 0;color:var(--ui-muted)!important;}
#map-analysis-panel [data-state="error"] {color:#d66a3c!important;}
#map-analysis-panel .gis-legend {display:flex;flex-wrap:wrap;gap:6px 10px;margin:8px 0;}
#map-analysis-panel .gis-legend span {display:inline-flex;gap:5px;align-items:center;white-space:nowrap;color:var(--ui-text)!important;}
#map-analysis-panel .gis-legend i {width:10px;height:10px;border-radius:3px;display:inline-block;}
#map-analysis-panel .gis-pop-scale {padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-field);}
#gis-pop-ramp {display:grid;grid-template-columns:repeat(7,1fr);height:12px;overflow:hidden;border-radius:4px;gap:1px;}
#gis-pop-ramp i {display:block;}
#map-analysis-panel .gis-pop-scale-labels {display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--ui-muted);font-size:11px;margin-top:7px;}
#map-analysis-panel #gis-pop-legend {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 6px;margin:12px 0 0;font-size:11px;font-variant-numeric:tabular-nums;}
#map-analysis-panel #gis-pop-legend i {width:7px;height:7px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #80808026;}
#map-analysis-panel .gis-opacity-heading {display:flex;align-items:center;justify-content:space-between;margin-top:15px;font-size:12px;}
#gis-pop-opacity-value {font-variant-numeric:tabular-nums;color:var(--ui-muted);}
#map-analysis-panel #gis-pop-opacity {display:block;width:100%;height:32px;margin:0 0 8px;padding:0;accent-color:#df65b0;cursor:pointer;touch-action:pan-y;}
#map-analysis-panel .gis-method {margin-top:12px;}
#map-analysis-panel .gis-method summary {padding:0;font-size:11px;font-weight:500;color:var(--ui-muted);}
#map-analysis-panel .gis-method p {font-size:11px;line-height:1.65;}
#map-analysis-panel [data-gis-status]:empty {display:none;}
#map-analysis-panel select {width:100%;margin:6px 0;padding:8px;border-radius:8px!important;color:var(--ui-text)!important;background:var(--ui-field)!important;border:1px solid var(--ui-line)!important;}
#map-analysis-panel footer {padding:6px 16px 10px;display:flex;flex-wrap:wrap;gap:4px;font-size:10px;color:var(--ui-muted);}
#map-analysis-panel a {color:inherit;}
.cityrail-gis-canvas {position:absolute;pointer-events:none;}
html.cityrail-city-entered #map-analysis-panel:not([hidden]) {display:block;}
body:has(:is(#settings-overlay,#line-config-overlay,#station-detail-overlay,#new-line-dialog-overlay,#nav-overlay,#ctrl-center-overlay):not(.hidden),.cityrail-depot-modal.visible,.cr-eps-panel:not(.hidden),#cr-rni-panel:not(.hidden)[style*="flex"]) #map-analysis-panel {display:none!important;}
@media (prefers-reduced-transparency:reduce) {#map-analysis-panel {background:var(--ui-surface);backdrop-filter:none;}}

#map-analysis-panel #gis-planar-note {padding:0 16px;}
/* The map's phone controls share one bottom budget. Component owners consume
 * these dimensions directly; playback/feedback dialogs keep their own sizes. */
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  html.cityrail-city-entered {
    --ui-city-badge-top: max(10px, env(safe-area-inset-top));
    --ui-city-badge-right: max(6px, env(safe-area-inset-right));
    --ui-city-badge-font-size: 9px;
    --ui-city-badge-height: 20px;
    --ui-city-badge-padding: 3px 4px;
    --ui-city-badge-width: clamp(28px, calc((100vw - 240px) / 2 - 12px), 88px);
    --ui-settings-inset: 16px;
    --ui-settings-header-height: 60px;
    --ui-settings-title-size: 20px;
    --ui-settings-row-height: 48px;
    --ui-settings-row-padding: 10px 0;
    --ui-settings-label-size: 14px;
    --ui-settings-section-inset: 12px;
    --ui-disclosure-margin: 8px 0;
    --ui-disclosure-height: 44px;
    --ui-disclosure-padding: 10px 12px;
    --ui-disclosure-font-size: 13px;
    --ui-toolbar-button-size: 30px;
    --ui-toolbar-min-height: 0px;
    --ui-toolbar-icon-size: 14px;
    --ui-map-action-size: clamp(20px, 5.6vw, 22px);
    --ui-map-action-icon-size: 12px;
    --ui-map-footer-inset: max(6px, env(safe-area-inset-bottom));
    --ui-map-footer-left: max(6px, env(safe-area-inset-left));
    --ui-map-footer-right: max(6px, env(safe-area-inset-right));
    --ui-map-actions-bottom: calc(var(--ui-map-footer-inset) + 18px);
    --ui-map-analysis-bottom: calc(var(--ui-map-actions-bottom) + 3 * var(--ui-map-action-size) + 16px);
    --ui-map-credit-font-size: 8px;
    --ui-map-credit-padding: 2px 4px;
    --ui-map-credit-width: calc(4 * var(--ui-map-action-size) + 12px);
    --ui-map-feedback-height: 26px;
    --ui-map-feedback-font-size: 9px;
    --ui-map-feedback-padding: 0 5px;
    --ui-map-feedback-gap: 3px;
    --ui-map-feedback-icon-size: 12px;
    --ui-playback-width: 108px;
    --ui-playback-bar-height: 26px;
    --ui-playback-button-size: 20px;
    --ui-playback-value-size: 10px;
    --ui-playback-icon-size: 12px;
    --ui-playback-bar-padding: 2px 3px;
    --ui-playback-bar-gap: 2px;
    --ui-playback-value-inset: 2px;
    --ui-playback-chevron-size: 8px;
    --ui-playback-chevron-inset: 0px;
    --ui-playback-popover-bottom: 34px;
  }
}

html.cityrail-light-ui #map-analysis-panel #gis-pop-opacity {color-scheme:light;}

#map-analysis-panel [data-gis-section="population"] h3 {margin:0 0 12px;font-size:15px;letter-spacing:-.02em;}

@media (hover:none), (pointer:coarse) {#map-analysis-panel #gis-pop-opacity {height:44px;}}

/* The schematic viewport fills the control center below its live header and navigation. */
html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-main {
  align-items:stretch!important;overflow:hidden!important;scrollbar-gutter:auto!important;touch-action:none!important;
  padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
}
html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-content-grid {
  display:flex!important;flex-direction:column!important;align-self:stretch!important;
  min-height:0!important;overflow:hidden!important;padding-bottom:0!important;
}
html body #ctrl-center-overlay[data-active-tab="schematic-map"] .cr-sch-card {padding:16px!important;}
@media(max-width:760px) {
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-main {
    padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))!important;
  }
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] .cr-sch-card {padding:12px!important;}
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-nav {padding-bottom:max(4px,env(safe-area-inset-bottom))!important;}
}
@media(max-height:500px) {
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-main {
    padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] .cr-sch-card {padding:8px!important;}
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] .cr-sch-head {
    flex-direction:row!important;align-items:center!important;flex-wrap:wrap;gap:8px;margin-bottom:8px;
  }
}
@media(max-width:760px) and (max-height:500px) {
  html body #ctrl-center-overlay[data-active-tab="schematic-map"] #ctrl-main {padding-bottom:8px!important;}
}

/* Existing panel containment and press feedback, formerly injected by the
   retired interaction wrapper. Kept with the shared component styles. */
.control-panel, .side-panel, .modal, .line-config-panel {
  contain: layout style;
}
button, [role="button"]:not(.leaflet-marker-icon):not(.ats-diagram *), .btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .16s ease;
}
button:active, [role="button"]:not(.leaflet-marker-icon):not(.ats-diagram *):active, .btn:active {
  transform: scale(.985);
}

/* Station hourly observations share the panel's neutral theme tokens. */
/* Line and station disclosures share one card and header contract. */
.cityrail-object-panel :is(.station-info-card, .line-config-disclosure) {
  box-sizing: border-box;
  width: 100%;
  margin: var(--ui-disclosure-margin,10px 0 12px);
  border: 1px solid var(--cr-object-border);
  border-left-color: var(--cr-object-accent);
  border-radius: 12px;
  background: var(--cr-object-card);
  color: var(--cr-object-text);
}
.cityrail-object-panel :is(details.station-info-card > summary, .line-config-disclosure > summary, .station-arrivals-toggle, .line-config-launcher) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--ui-disclosure-height,48px);
  box-sizing: border-box;
  padding: var(--ui-disclosure-padding,14px 16px);
  cursor: pointer;
  list-style: none;
  font-family: inherit;
  font-size: var(--ui-disclosure-font-size,14px);
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  color: var(--cr-object-text);
  transition: none;
}
.cityrail-object-panel summary::-webkit-details-marker { display: none; }
.cityrail-object-panel :is(details.station-info-card > summary, .line-config-disclosure > summary, .station-arrivals-toggle, .line-config-launcher)::after {
  content: '';
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-right: 1.5px solid var(--ui-muted);
  border-bottom: 1.5px solid var(--ui-muted);
  transform: rotate(-45deg);
}
.cityrail-object-panel :is(details[open] > summary, .station-arrivals-toggle[aria-expanded="true"])::after {
  transform: rotate(45deg);
}
.cityrail-object-panel :is(details.station-info-card, details.line-config-disclosure)[open] > summary { border-bottom: 1px solid var(--cr-object-line); }
#sd-passenger-flow .station-flow-content { padding: 0 16px 16px; }
#sd-passenger-flow .station-flow-title { margin:12px 0 8px; font-size:13px; font-weight:600; }
#sd-passenger-flow .station-flow-series + .station-flow-series { border-top:1px solid var(--ui-line); margin-top:14px; padding-top:4px; }
#sd-passenger-flow .station-flow-total { margin:12px 0 6px; font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
#sd-passenger-flow .station-flow-total span { margin-left:8px; color:var(--ui-muted); font-size:11px; font-weight:400; letter-spacing:0; }
#sd-passenger-flow .station-flow-chart { height:110px; display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:2px; border-bottom:1px solid var(--ui-line); background:repeating-linear-gradient(to top,transparent 0,transparent 35px,var(--ui-line) 36px,transparent 37px); }
#sd-passenger-flow .station-flow-hour { display:flex; flex-direction:column-reverse; justify-content:flex-start; min-width:0; min-height:0; height:100%; padding:0; margin:0; border:0; border-radius:3px 3px 0 0; background:transparent; cursor:pointer; }
#sd-passenger-flow .station-flow-hour i { display:block; width:100%; flex-shrink:0; pointer-events:none; }
#sd-passenger-flow .station-flow-hour[aria-pressed=true] { box-shadow:inset 0 -2px var(--ui-muted); }
#sd-passenger-flow .station-flow-hour:focus-visible { outline:2px solid var(--ui-focus); outline-offset:1px; }
#sd-passenger-flow .station-flow-axis { display:flex; justify-content:space-between; padding-top:6px; color:var(--ui-muted); font-size:10px; font-variant-numeric:tabular-nums; }
#sd-passenger-flow p { margin:10px 0 0; font-size:10px; line-height:1.5; color:var(--ui-muted); }

#sd-passenger-flow .station-flow-hour i:last-child { border-radius:3px 3px 0 0; }
#sd-passenger-flow .station-flow-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; font-size:11px; color:var(--ui-muted); }
#sd-passenger-flow .station-flow-legend span { display:inline-flex; align-items:center; gap:5px; }
#sd-passenger-flow .station-flow-legend i { width:7px; height:7px; border-radius:50%; flex-shrink:0; }


/* Existing modal roots share the visible viewport while a mobile keyboard is open. */
@media (pointer:coarse) {
  html.cityrail-city-entered body > :is(#settings-overlay,#line-config-overlay,#station-detail-overlay,#nav-overlay,#new-line-dialog-overlay,#cc-express-modal,.cityrail-system-dialog) {
    top:var(--ui-visual-top,0px);
    height:var(--ui-visual-height,100dvh);
    bottom:auto;
    padding-top:var(--ui-sheet-top,env(safe-area-inset-top));
    padding-bottom:var(--ui-sheet-bottom,env(safe-area-inset-bottom));
    box-sizing:border-box;
  }
}

/* In-game materials share one theme contract. Outside the entered game the
   website keeps its regular light palette. The existing map is the backdrop;
   no map snapshot, replacement renderer or animated shader is created. */
html.cityrail-glass-ui.cityrail-city-entered {
  --material-stage: rgba(240,243,245,.16);
  --material-background-blur: blur(7px) saturate(.9);
  --material-content: transparent;
  --material-sidebar: rgba(250,250,247,.72);
  --material-blur: var(--ui-material-blur,blur(24px) saturate(1.25));
  --material-panel: url("../assets/ui/control-material-grain.svg"),
    linear-gradient(125deg,rgba(255,255,255,.30),rgba(255,255,255,.09) 50%,rgba(255,255,255,.16)),
    rgba(250,250,247,var(--ui-material-panel-opacity,.70));
  --material-chrome: rgba(250,250,247,var(--ui-material-panel-opacity,.72));
  --material-popover: rgba(250,250,247,.97);
  --material-inset: rgba(255,255,255,.24);
  --material-scrim: rgba(223,229,234,.18);
  --material-button-fill: rgba(255,255,255,.24);
  --material-button-hover: rgba(255,255,255,.48);
  --material-button-border: rgba(255,255,255,.40);
  --material-rim: rgba(255,255,255,.54);
  --material-rim-light: rgba(255,255,255,.95);
  --material-rim-shade: rgba(88,104,114,.20);
  --material-rim-soft: rgba(255,255,255,.22);
  --material-shadow: 0 22px 48px -24px rgba(40,54,64,.24),0 5px 12px -6px rgba(40,54,64,.14),
    inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(255,255,255,.20);
  --material-button-shadow: inset 0 1px 0 rgba(255,255,255,.70),0 2px 6px rgba(40,54,64,.06);
  --ui-surface: rgba(250,250,247,var(--ui-material-surface-opacity,.44));
  --ui-card: rgba(255,255,255,var(--ui-material-card-opacity,.28));
  --ui-field: rgba(255,255,255,.58);
  --ui-canvas: var(--material-stage);
  --ui-chrome: var(--material-chrome);
  --ui-text: #252421;
  --ui-muted: #45413d;
  --ui-line: rgba(74,62,48,.14);
  --ui-hover: rgba(255,255,255,.56);
  --ui-selection: rgba(255,255,255,.54);
  --ui-shadow: var(--material-shadow);
  --site-bg: var(--material-stage);
  --site-surface: var(--ui-surface);
  --site-fill: var(--ui-field);
  --site-glass: var(--material-chrome);
  --site-shadow: var(--material-shadow);
  --site-backdrop: var(--material-scrim);
  --site-border: var(--ui-line);
  --cr416-surface: var(--material-chrome);
  --cr416-surface-strong: var(--ui-surface);
  --cr416-fill: var(--ui-card);
  --cr416-fill-hover: var(--ui-hover);
  --cr416-border: var(--material-rim);
  --cr416-blur: var(--material-blur);
  --cr416-shadow: var(--material-shadow);
  --cr-readable-text: var(--ui-text);
  --cr-readable-text-soft: var(--ui-muted);
  --cr-readable-text-muted: var(--ui-muted);
  --cr-readable-text-faint: var(--ui-muted);
  --panel: var(--ui-surface);
  --cr-readable-surface: var(--ui-surface);
  --cr-readable-card: var(--ui-card);
  --cr-readable-card-soft: var(--material-inset);
  --cr-readable-input: var(--ui-field);
  --cr-readable-action: var(--material-chrome);
  --cr-readable-border: var(--ui-line);
  --cr-readable-line: var(--ui-line);
}
/* Object sheets sit directly over detailed maps; slightly stronger diffusion
   than the control center compensates for its separate blurred backdrop. */
html.cityrail-glass-ui.cityrail-city-entered :is(#station-detail-panel,
  #line-config-panel, .cityrail-depot-panel, .cityrail-depot-connection-card, .ats-dialog) {
  --material-blur: var(--ui-material-blur,blur(30px) saturate(1.35));
}
/* Control-center chrome and cards keep the same geometry on every page. */
html.cityrail-glass-ui #ctrl-center-overlay {
  -webkit-backdrop-filter: var(--material-background-blur);
  backdrop-filter: var(--material-background-blur);
}
html.cityrail-glass-ui #ctrl-center-overlay .ctrl-nav-item.active {
  --material-button-fill: var(--ui-selection);
  --material-button-border: var(--material-rim-light);
}
html.cityrail-glass-ui #ctrl-center-overlay :is(.ctrl-card,#ctrl-nav,#ctrl-alerts) {
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
}
html.cityrail-glass-ui #ctrl-center-overlay .ctrl-card {
  position: relative;
}
/* Directional reflections have no layout width and never intercept input. */
html.cityrail-glass-ui :is(#ctrl-center-overlay .ctrl-card,
  #station-detail-panel, #line-config-panel, .cityrail-depot-panel,
  .cityrail-depot-connection-card, .ats-dialog)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,var(--material-rim-light),var(--material-rim-soft) 24%,
    transparent 43%,var(--material-rim-shade) 66%,var(--material-rim-light) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
html.cityrail-glass-ui #ctrl-center-overlay .ctrl-alert-item {
  --material-shadow: var(--material-button-shadow);
}
#map-theme-toggle[data-appearance="glass"] {
  color: var(--ui-accent);
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  html.cityrail-glass-ui.cityrail-city-entered,
  html.cityrail-glass-ui.cityrail-city-entered :is(#station-detail-panel, #line-config-panel, .cityrail-depot-panel, .cityrail-depot-connection-card, .ats-dialog) {
    --material-stage: #f5f5f7;
    --material-content: #f5f5f7;
    --material-sidebar: #fff;
    --material-panel: #fff;
    --material-popover: #fff;
    --material-chrome: #fff;
    --material-inset: #f5f5f7;
    --material-rim: var(--ui-line);
    --material-shadow: none;
    --material-button-shadow: none;
    --material-button-fill: #f5f5f7;
    --material-button-hover: #e8e8ed;
    --material-button-border: var(--ui-line);
    --material-background-blur: none;
    --material-blur: none;
    --ui-surface: #fff;
    --ui-field: #f5f5f7;
    --ui-card: #f5f5f7;
    --ui-canvas: #f5f5f7;
    --ui-chrome: #fff;
    --ui-selection: #e8e8ed;
  }
  html.cityrail-glass-ui :is(#ctrl-center-overlay .ctrl-card,
  #station-detail-panel, #line-config-panel, .cityrail-depot-panel,
  .cityrail-depot-connection-card, .ats-dialog)::after { content: none; }
}
@media (prefers-contrast:more) {
  html.cityrail-glass-ui.cityrail-city-entered {
    --ui-muted: #37332d;
    --ui-line: #68635a;
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html.cityrail-glass-ui.cityrail-city-entered,
  html.cityrail-glass-ui.cityrail-city-entered :is(#station-detail-panel, #line-config-panel, .cityrail-depot-panel, .cityrail-depot-connection-card, .ats-dialog) {
    --material-stage: #f5f5f7;
    --material-content: #f5f5f7;
    --material-sidebar: #fff;
    --material-panel: #fff;
    --material-popover: #fff;
    --material-chrome: #fff;
    --ui-surface: #fff;
    --ui-card: #f5f5f7;
    --ui-field: #f5f5f7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.cityrail-object-panel,.cityrail-depot-panel,.cr-eps-panel,.loop-choice-panel,#settings-panel,#nav-panel,#new-line-dialog,#ctrl-center-overlay,#cr-rni-panel) button:active:not(:disabled),
  #map-quick-controls button:active { scale: 1; }
}

/* Closed objects and an unready depot share a 4 px rim that fades into the surface. */
#line-config-panel.line-operation-closed,
#station-detail-panel.station-operation-closed,
#cityrail-line-depot-guide-popover.visible {
  --operation-frame-shadow: var(--ui-operation-frame), var(--material-shadow,var(--ui-shadow));
}
#station-detail-panel .station-operation-status {
  margin: 12px 0;
  color: var(--ui-danger,#ef4444);
  text-align: center;
  font-weight: 800;
}

/* Previous-day filters retain native selection and the existing report surface. */
.cr-daily-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.cr-daily-filters[hidden], .cr-daily-filters label[hidden] { display: none; }
.cr-daily-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ui-muted);
  font-size: 14px;
}
#cct-daily-report-card .cr-daily-filters select {
  max-width: 220px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-field);
  color: var(--ui-text);
  font: inherit;
}
.cr-daily-row span { font-size: 13px; color: var(--ui-muted); }

#sd-passenger-flow .station-flow-hour-detail { margin-top: 12px; }
#sd-passenger-flow .station-flow-hour-detail strong { color: var(--ui-text); font-weight: 500; white-space: nowrap; }