/* CityRail consolidated Apple-style UI. */
/* ===== 00-design-system.css ===== */
/* ===== APPLE DESIGN SYSTEM ===== */
:root {
  --bg: #000000;
  --panel: rgba(28, 28, 30, 0.78);
  --text: #f5f5f7;
  --text-dim: #86868b;
  --accent: #0A84FF;
  --accent-glow: rgba(10, 132, 255, 0.4);
  --danger: #FF453A;
  --success: #30D158;
  --warning: #FF9F0A;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition-fast: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --blur-glass: blur(40px) saturate(180%);
  --font-sans: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-weight: 400;
  letter-spacing: -0.01em;
}
html.cityrail-compat-conservative .splash-logo-stage::before,
html.cityrail-compat-conservative .splash-logo-stage::after {
  display: none !important;
}
html.cityrail-compat-conservative .splash-logo-stage,
html.cityrail-compat-conservative .glass-panel,
html.cityrail-compat-conservative .panel,
html.cityrail-compat-conservative #toolbar,
html.cityrail-compat-conservative #city-badge .city-cn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.cityrail-compat-conservative * {
  scroll-behavior: auto !important;
}
#map { width: 100vw; height: 100dvh; z-index: 1; background: var(--ui-surface, #202226); }
.cityrail-openrailway-overlay {
  position: absolute;
  pointer-events: none;
}

#map.hidden { display: none; }
#map.hide-labels .station-label,
#map.low-zoom .station-label,
#map.high-zoom .station-label { display: none !important; }
#map.low-zoom .train-marker,
#map.high-zoom .train-marker,
#map.low-zoom #cityrail-train-canvas-v31,
#map.high-zoom #cityrail-train-canvas-v31 { display: none !important; }
.station-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 760;
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 0 5px rgba(0,0,0,0.72),
    0 0 10px rgba(0,0,0,0.38);
  padding: 0 !important; margin: 0 !important;
  letter-spacing: 0;
}
html[data-cityrail-station-label-tone="light-map"] .station-label {
  color: rgba(24,28,34,0.98);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 4px rgba(255,255,255,0.88),
    0 0 9px rgba(255,255,255,0.62);
}
html[data-cityrail-station-label-tone="dark-map"] .station-label,
html[data-cityrail-station-label-tone="mixed-map"] .station-label {
  color: rgba(255,255,255,0.97);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.96),
    0 0 6px rgba(0,0,0,0.78),
    0 0 12px rgba(0,0,0,0.48);
}
.station-label::before { display: none !important; }

/* App Logo - Apple Style Text */
#app-logo {
  position: fixed; top: 14px; left: 20px; z-index: 1001;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
#app-logo .logo-en {
  font-family: var(--font-sans);
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #d0e2ff 35%, #0A84FF 75%, #0055cc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 4px rgba(10,132,255,0.25));
}
#app-logo .logo-zh {
  font-family: 'PingFang SC', 'Noto Sans SC', 'Heiti SC', sans-serif;
  font-size: 17px; font-weight: 500; letter-spacing: 0.3em;
  line-height: 1.3;
  color: rgba(255,255,255,0.45);
  padding-left: 1px;
}

/* Light map style */
#app-logo.map-light .logo-en {
  background: linear-gradient(135deg, #1d1d1f 0%, #424245 40%, #0071e3 80%, #004a99 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}
#app-logo.map-light .logo-zh { color: rgba(0,0,0,0.35); }

/* Satellite map style */
#app-logo.map-satellite .logo-en {
  background: linear-gradient(135deg, #ffffff 0%, #e8f0ff 30%, #fff 60%, #ffffff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
}
#app-logo.map-satellite .logo-zh { color: rgba(255,255,255,0.65); }

/* City Badge */
#city-badge {
  position: fixed;
  top: 18px;
  right: 28px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
#city-badge.visible {
  opacity: 1;
  transform: translateY(0);
}
#city-badge .city-cn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px 7px;
  border-radius: 999px;
  background: rgba(28,28,30,.50);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
  font-family: 'PingFang SC', 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .18em;
}
#city-badge.map-light .city-cn {
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  color: rgba(29,29,31,.86);
  text-shadow: 0 1px 0 rgba(255,255,255,.48);
}
#city-badge.map-satellite .city-cn {
  background: rgba(18,18,20,.46);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 10px rgba(0,0,0,.72);
}
@media(max-width:720px){
  #city-badge { top: 70px; right: 14px; }
  #city-badge .city-cn { min-height: 30px; padding: 5px 10px 6px; font-size: 15px; letter-spacing: .12em; }
}

/* ===== DIALOGS & OVERLAYS ===== */
/* Build workspace components */
#new-line-dialog-overlay {
  position:fixed;
  inset:0;
  z-index:3000;
  display:flex;
  align-items:var(--ui-task-align,safe center);
  justify-content:var(--ui-task-align,center);
  box-sizing:border-box;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:var(--material-scrim,rgba(0,0,0,.32));
}
#new-line-dialog-overlay.hidden,#new-build-choice.hidden,#new-line-form.hidden,#new-line-back.hidden,#new-line-start.hidden {display:none!important;}
html body #new-line-dialog {
  width:var(--ui-sheet-width,min(680px,100%));
  min-width:0;
  max-width:100%;
  max-height:calc(var(--ui-layout-height,100dvh) - 40px);
  overflow:auto;
  padding:28px;
  box-sizing:border-box;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
#new-line-dialog h2 {font-size:26px;font-weight:650;line-height:1.2;letter-spacing:-.025em;margin:0 0 8px;color:var(--ui-text);text-align:left;}
#new-build-choice {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;gap:12px;}
#new-build-choice .new-build-card {display:grid;grid-template-columns:44px minmax(0,1fr);align-content:center;align-items:center;gap:4px 14px;min-width:0;min-height:112px;padding:20px;text-align:left;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card);color:var(--ui-text);box-shadow:none;transition:opacity 120ms ease;}
.new-build-card strong {font-size:17px;font-weight:600;}
.new-build-icon {width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--ui-selection);color:var(--ui-focus);}
.new-build-icon svg {width:24px;height:24px;}
#new-build-choice .new-build-card:active {opacity:.65;}
.new-line-row {display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:20px;}
.new-line-label {font-size:15px;font-weight:500;color:var(--ui-text);}
.new-line-input {min-width:0;width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;}
.new-line-color-input {width:64px;height:44px;padding:4px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-field);cursor:pointer;}
.new-line-btns {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ui-line);}
.new-line-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;min-height:44px!important;padding:10px 18px;border:0;border-radius:10px;font-size:15px;font-weight:600;color:var(--ui-text);background:var(--ui-card);cursor:pointer;}
.new-line-btn-start {background:var(--ui-accent)!important;color:#fff!important;}
#draw-line-indicator {position:fixed;top:var(--ui-draw-top,max(76px,calc(env(safe-area-inset-top) + 68px)));left:50%;transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 16px;background: var(--material-panel,var(--ui-surface));color:var(--ui-text);border:1px solid var(--ui-line);border-radius:18px;box-shadow: var(--material-shadow,var(--ui-shadow));
  backdrop-filter: var(--material-blur,none);

  -webkit-backdrop-filter: var(--material-blur,none);
}
#draw-line-indicator.hidden {display:none;}
#draw-line-indicator[data-placement="depot"] :is(.draw-line-tools,#draw-line-undo) {display:none;}
.draw-line-status {min-width:0;max-width:420px;display:grid;gap:4px;}
.draw-line-status strong {font-size:15px;font-weight:600;}
#draw-line-hint {font-size:12px;line-height:1.5;color:var(--ui-muted);overflow-wrap:anywhere;}
.draw-line-tools {display:flex;flex-shrink:0;background:var(--ui-field);border-radius:11px;padding:3px;gap:2px;}
#draw-line-indicator button {min-width:44px;min-height:44px;padding:10px 12px;white-space:nowrap;border:0;border-radius:9px;font-size:14px;font-weight:550;background:var(--ui-card);color:var(--ui-text);cursor:pointer;touch-action:manipulation;}
#draw-line-indicator .draw-line-tools button {background:transparent;}
#draw-line-indicator .draw-line-tools button[aria-pressed=true] {background:var(--ui-surface)!important;color:var(--ui-focus)!important;box-shadow:0 1px 4px #0002;}
#draw-line-indicator #draw-line-finish {background:var(--ui-accent)!important;color:#fff!important;}
#draw-line-indicator button:active {opacity:.65;}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
 html body #new-line-dialog {padding:16px;max-height:calc(var(--ui-layout-height,100dvh) - var(--ui-sheet-top,16px) - var(--ui-sheet-bottom,16px));}
 #new-line-dialog h2 {font-size:20px;margin-bottom:16px;}
 #new-line-dialog-overlay {padding:var(--ui-sheet-top) var(--ui-sheet-right) var(--ui-sheet-bottom) var(--ui-sheet-left);}
 #new-build-choice {grid-template-columns:1fr;gap:8px;}
 #new-build-choice .new-build-card {grid-template-columns:32px minmax(0,1fr);min-height:56px;padding:10px 14px;gap:12px;}
 .new-build-icon {width:32px;height:32px;border-radius:9px;}
 .new-build-icon svg {width:20px;height:20px;}
 .new-build-card strong {font-size:15px;}
 .new-line-btns {margin-top:16px;padding-top:12px;}
 .new-line-row {grid-template-columns:1fr;gap:8px;}
 .new-line-btns {gap:8px;}
 .new-line-btn {flex:1;padding:10px 12px;}
 #draw-line-indicator {display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;padding:10px;width:calc(100% - 24px);max-width:560px;}
 .draw-line-status {grid-column:1/-1;max-width:none;}
 #draw-line-indicator button {padding:8px;font-size:13px;}
}
@media(max-height:500px) and (min-width:600px){
 #new-build-choice {grid-template-columns:repeat(2,minmax(0,1fr));}
 #new-build-choice .new-build-card {min-height:56px;padding:10px 12px;}
 #draw-line-indicator {top:max(68px,calc(env(safe-area-inset-top) + 60px));}
 .draw-line-status {max-width:240px;}
}
@media(pointer:coarse){#draw-tooltip {display:none!important;}}


/* Floating Draw Tooltip */
#draw-tooltip {
  position: fixed; z-index: 10001; pointer-events: none;
  background: rgba(28,28,30,0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 8px 16px; font-size: 12px; font-weight: 500;
  color: var(--text-dim); display: flex; gap: 10px;
  align-items: center; white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: opacity var(--transition-fast);
}
#draw-tooltip.hidden { display: none; }
#draw-tooltip .tooltip-left { color: var(--success); }
#draw-tooltip .tooltip-right { color: var(--warning); }
#draw-tooltip .tooltip-distance {
  color: #fff;
  font-weight: 700;
}
#draw-tooltip .tooltip-distance.muted {
  color: var(--text-muted);
  font-weight: 500;
}

/* Drag Transfer Warning Tooltip */
#drag-transfer-tooltip {
  position: fixed; z-index: 10002; pointer-events: none;
  background: rgba(255,149,0,0.12); border: 1px solid rgba(255,149,0,0.3);
  border-radius: var(--radius-md);
  padding: 6px 14px; font-size: 12px; font-weight: 500;
  color: #FF9F0A; display: flex; gap: 6px;
  align-items: center; white-space: nowrap;
  box-shadow: 0 0 16px rgba(255,149,0,0.15);
  transition: opacity var(--transition-fast);
}
#drag-transfer-tooltip.hidden { display: none; }
#draw-tooltip .tooltip-divider { color: rgba(255,255,255,0.1); }
#cityrail-map-credit {
  position: fixed;
  left: var(--ui-map-footer-left,12px);
  bottom: var(--ui-map-footer-inset,max(10px, env(safe-area-inset-bottom)));
  z-index: 1000;
  pointer-events: none;
  box-sizing: border-box;
  max-width: var(--ui-map-credit-width, none);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--ui-map-credit-padding,4px 8px);
  border-radius: 9px;
  background: rgba(28,28,30,.42);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
  font-size: var(--ui-map-credit-font-size,10px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
html.cityrail-light-ui #cityrail-map-credit {
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.08);
  color: rgba(29,29,31,.62);
  box-shadow: 0 8px 22px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.68);
}

/* Train Markers — GPU-accelerated */
.train-marker {
  background: none !important; border: none !important; box-shadow: none !important;
  will-change: transform; cursor: pointer;
}
.train-marker-overload svg { animation: train-overload-pulse 0.6s ease-in-out infinite; }
@keyframes train-overload-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Train card: semantic theme tokens, one floating material above the map. */
.leaflet-cityrailTrainCard-pane { z-index: 710; }
.train-info-popup[hidden] { display: none; }
.train-info-popup .leaflet-popup-content-wrapper {
  background: var(--material-panel,var(--ui-chrome));
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  padding: 1px;
  box-shadow: var(--material-shadow,var(--ui-shadow));
  backdrop-filter: var(--material-blur,blur(20px) saturate(140%));
  -webkit-backdrop-filter: var(--material-blur,blur(20px) saturate(140%));
  font-family: var(--font-sans);
  font-size: 13px;
}
.train-info-popup .leaflet-popup-content {
  width: min(250px, calc(100vw - 72px));
  margin: 12px;
  color: var(--ui-text);
  line-height: 1.45;
}
.train-info-popup .leaflet-popup-tip {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  box-shadow: none;
}
.train-info-popup a.leaflet-popup-close-button {
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ui-muted);
  border-radius: 50%;
  font: 24px/1 var(--font-sans);
}
@media (hover: hover) and (pointer: fine) {
.train-info-popup a.leaflet-popup-close-button:hover {
  color: var(--ui-text);
  background: var(--ui-card);
}
}
.train-info-popup :is(.leaflet-popup-close-button, .train-card-action):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 2px;
}
.train-card-list {
  max-height: min(360px, calc(100dvh - 180px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.train-card-group-title { margin: 0 36px 10px 0; font-size: 15px; font-weight: 600; }
.train-card-heading { padding: 0 30px 0 8px; border-left: 3px solid var(--train-card-line); }
.train-card-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.train-card-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.train-card-service, .train-card-stock {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ui-card);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}
.train-info-popup .train-card-direction { margin: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.train-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.train-card-label { color: var(--ui-muted); font-size: 12px; margin-bottom: 2px; }
.train-card-speed, .train-card-load {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.train-info-popup .train-card-capacity { margin: 6px 0 0; color: var(--ui-muted); font-size: 12px; }
.train-info-popup .train-card-status {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: 12px;
}
.train-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.train-card-action {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-card);
  color: var(--ui-text);
  font: 500 13px/1.4 var(--font-sans);
  cursor: pointer;
}
.train-card-action:disabled {
  opacity: .45;
  cursor: default;
}
.train-info-popup .train-card-feedback {
  margin: 6px 0 0;
  color: var(--ui-muted);
  font-size: 12px;
}
.train-card-feedback:empty {
  display: none;
}
.train-card-follow[aria-pressed="true"] { background: var(--ui-selection); }
.train-card-list .cityrail-train-popup-entry + .cityrail-train-popup-entry {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-line);
}
@media (prefers-reduced-transparency: reduce) {
  .train-info-popup .leaflet-popup-content-wrapper {
    background: var(--ui-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .train-info-popup .leaflet-popup-content-wrapper { background: var(--ui-surface); border-color: var(--ui-text); }
  .train-info-popup .train-card-label, .train-info-popup .train-card-capacity,
  .train-info-popup .train-card-status { color: var(--ui-text); }
}

/* Top Bar */
#topbar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; gap: 4px;
  padding: 4px;
  background: var(--panel);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.tool-btn {
  background: transparent; border: none;
  border-radius: var(--radius-md);
  color: var(--text-dim); padding: 6px 12px;
  cursor: pointer; font-size: 12px; font-weight: 500;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  white-space: nowrap;
  font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
.tool-btn:hover {
  background: rgba(255,255,255,0.08); color: var(--text);
}
}
.tool-btn.active {
  background: rgba(10,132,255,0.15); color: var(--accent);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.tool-btn.danger:hover { background: rgba(255,69,58,0.12); color: var(--danger); }
}

/* ===== SETTINGS OVERLAY (full-screen) ===== */
#settings-overlay {
  position: fixed; inset: var(--ui-overlay-top,0px) 0 auto; z-index: 3000;
  height: var(--ui-layout-height);
  box-sizing: border-box;
  display: flex; align-items: var(--ui-task-align,center); justify-content: var(--ui-task-align,center);
  padding-inline: var(--ui-sheet-left,0px) var(--ui-sheet-right,0px);
  pointer-events: var(--ui-task-pointer-events,auto);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
#settings-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#settings-panel {
  width: 380px; max-height: 80vh;
  background: var(--panel);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: auto;
}
#settings-panel h2 {
  font-size: 18px; font-weight: 600; color: var(--text);
  text-align: center; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--radius-md);
  cursor: pointer; gap: 14px;
  transition: background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.settings-row:hover { background: rgba(255,255,255,0.06); }
}
.settings-row .sr-label {
  font-size: 14px; color: var(--text-dim); white-space: nowrap;
  font-weight: 500;
}
#settings-panel .settings-mode-copy {
  display: grid;
  gap: 3px;
  text-align: left;
}
#settings-panel .settings-mode-detail {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
.settings-toggle {
  width: 44px; height: 26px; border-radius: 999px;
  border: none; cursor: pointer; position: relative;
  transition: background 0.2s ease; flex-shrink: 0;
}
.settings-toggle.on  { background: var(--accent); }
.settings-toggle.off { background: rgba(120,120,128,0.32); }
.settings-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 240ms cubic-bezier(.32,.72,0,1), scale 140ms var(--ui-ease-out);
}
.settings-toggle.on::after  { transform: translateX(18px); }
.settings-toggle.off::after { transform: translateX(0); }
.settings-row:active .settings-toggle::after { scale: 1.08 .94; }
@media (prefers-reduced-motion: reduce) {
  .settings-toggle::after { transition: none; }
  .settings-row:active .settings-toggle::after { scale: 1; }
}
html[data-cityrail-input="keyboard"] .settings-toggle::after { transition: none; }
html[data-cityrail-input="keyboard"] .settings-row:active .settings-toggle::after { scale: 1; }

.settings-divider {
  height: 1px; margin: 8px 0;
  background: var(--border-strong);
}

/* Settings footer — logo & contact */
.settings-footer {
  padding-top: 20px; margin-top: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.settings-footer .sf-logo-en {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #d0e2ff 35%, #0A84FF 75%, #0055cc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 4px rgba(10,132,255,0.3));
}
.settings-footer .sf-logo-zh {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.25em; color: rgba(255,255,255,0.38);
}
.settings-footer .sf-contact-cn {
  font-size: 18px; font-weight: 600; letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffffff 0%, #c0d8ff 50%, #0A84FF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(10,132,255,0.25));
}

.panel-close-btn {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: var(--text-dim);
  font-family: inherit; font-size: 18px; line-height: 1; font-weight: 500;
  cursor: pointer; flex: 0 0 auto;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
.panel-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }
}
.panel-close-btn:active { transform: scale(0.94); }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.modal {
  background: var(--panel);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px; min-width: 340px;
}
.modal h2 {
  margin-bottom: 18px; font-size: 17px; font-weight: 600;
  color: var(--text); letter-spacing: -0.01em;
}
.modal input, .modal select {
  width: 100%; padding: 10px 14px; margin-bottom: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; outline: none;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.modal input:focus, .modal select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.modal select option { background: #1c1c1e; color: var(--text); }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-btns button {
  padding: 10px 24px; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  font-family: inherit;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 8px var(--accent-glow);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { background: #0070E0; box-shadow: 0 0 16px var(--accent-glow); }
}
.btn-cancel {
  background: rgba(255,255,255,0.06); color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.08);
}
@media (hover: hover) and (pointer: fine) {
.btn-cancel:hover { background: rgba(255,255,255,0.1); color: var(--text); }
}

/* ===== TOOLTIP ===== */
#tooltip {
  position: fixed; z-index: 1500; pointer-events: none;
  background: rgba(28,28,30,0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px 16px; font-size: 12px; font-weight: 500;
  color: var(--text-dim); display: none;
}

/* ===== LINE CONFIG PANEL ===== */
@keyframes cfg-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
@keyframes nav-dash-march {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}
.nav-dash-line { animation: nav-dash-march 1.5s linear infinite; }
#line-config-overlay {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
}
#line-config-overlay.hidden { display: none; }
#line-config-panel {
  position: absolute; top: 70px; left: 12px;
  width: 380px; max-height: calc(var(--ui-layout-height,100dvh) - 100px);
  background: var(--panel);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  overflow-y: auto; overflow-x: hidden;
  pointer-events: auto;
}
#line-config-panel::-webkit-scrollbar { width: 4px; }
#line-config-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
#cfg-content { position: relative; }
#line-config-panel h2 {
  font-size: 17px; font-weight: 600;
  margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;
  color: var(--text);
}
.cfg-line-name {
  font-size: 22px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: opacity var(--transition-fast);
  display: inline-block; padding: 4px 12px; margin: -4px -12px;
}
@media (hover: hover) and (pointer: fine) {
.cfg-line-name:hover { opacity: 0.7; }
}
#cfg-name-editor { margin-bottom: 14px; }
#cfg-name-editor.hidden { display: none; }
.cfg-name-editor-row { display: flex; align-items: center; gap: 8px; }
.cfg-edit-name-input {
  flex: 1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; padding: 7px 12px;
  outline: none; font-family: inherit;
  transition: border-color var(--transition-fast);
}
.cfg-edit-name-input:focus { border-color: var(--accent); }
.cfg-edit-color-input {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); cursor: pointer; padding: 3px;
}
.cfg-name-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 14px;
  cursor: pointer; padding: 5px 12px;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
.cfg-name-btn-save:hover { color: var(--success); border-color: var(--success); }
}
@media (hover: hover) and (pointer: fine) {
.cfg-name-btn-cancel:hover { color: var(--danger); border-color: var(--danger); }
}
#line-config-close {
  background: none; border: none;
  color: var(--text-dim); font-size: 18px;
  cursor: pointer; padding: 4px;
  transition: color var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
#line-config-close:hover { color: var(--danger); }
}
/* Form rows */
.cfg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cfg-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  min-width: 38px; text-align: left;
}
.cfg-label::before, .cfg-label::after { content: ''; }
.cfg-select {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: inherit;
  outline: none; cursor: pointer;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2386868b'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 30px;
}
@media (hover: hover) and (pointer: fine) {
.cfg-select:hover { border-color: rgba(255,255,255,0.2); }
}
.cfg-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.cfg-select option { background: #1c1c1e; color: var(--text); padding: 8px; }
/* Config panel buttons */
#cfg-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
#cfg-btn-row button {
  width: 100%; min-width: 0; height: 36px; padding: 0 14px; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
/* Edit mode action buttons */
#cfg-edit-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0; }
#cfg-edit-actions button {
  min-height: 44px; padding: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03); color: var(--text-dim);
  cursor: pointer; font-size: 11px; font-weight: 500;
  font-family: inherit;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
#cfg-edit-actions button:hover { background: rgba(255,255,255,0.06); color: var(--text); }
}
/* Frequency panel */
.freq-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.freq-input-row .freq-label {
  font-size: 11px; font-weight: 500; color: var(--text-dim);
  min-width: 56px; text-align: right;
}
.freq-input-row .freq-slider-wrp { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.freq-input-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.1); border-radius: 2px;
  outline: none; cursor: pointer;
}
.freq-input-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent);
  border: 3px solid #000; cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
}
.freq-input-row .freq-val {
  font-size: 12px; font-weight: 600; color: var(--accent);
  min-width: 52px; text-align: left;
}
.freq-input-row .freq-sub { font-size: 9px; color: var(--text-dim); }
#cfg-time-panel .freq-input-row { margin-bottom: 12px; }
.cfg-time-hint {
  font-size: 9px; color: var(--text-dim);
  margin-top: -4px; margin-left: 66px;
}

/* ===== LINE OPS PANEL (线路运营) ===== */
.ops-divider {
  height: 1px; background: rgba(255,255,255,0.08);
  margin: 16px 0 14px;
}
.ops-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ops-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ops-train-count {
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: rgba(10,132,255,0.12);
  border: 1px solid rgba(10,132,255,0.25);
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.ops-dir-toggle {
  display: flex; gap: 4px;
}
.ops-dir-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; color: var(--text-dim);
  font-size: 11px; font-weight: 500; padding: 4px 14px;
  cursor: pointer; font-family: inherit;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
.ops-dir-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
}
.ops-dir-btn.active {
  background: rgba(10,132,255,0.15); border-color: var(--accent);
  color: var(--accent);
}
#ops-station-list {
  max-height: 340px; overflow-y: auto;
}
#ops-station-list::-webkit-scrollbar { width: 3px; }
#ops-station-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.ops-empty {
  font-size: 12px; color: var(--text-dim); text-align: center;
  padding: 20px 0;
}
.ops-station-row {
  padding: 6px 0 2px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ops-station-row:last-child { border-bottom: none; }
.ops-station-head {
  display: flex; align-items: center; gap: 8px;
}
.ops-station-dot {
  width: 10px; height: 10px; min-width: 10px; border-radius: 50%;
  opacity: 0.85; box-shadow: 0 0 6px rgba(255,255,255,0.15);
}
.ops-station-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.ops-station-idx {
  font-size: 10px; font-weight: 400; color: var(--text-dim);
  margin-left: 4px; opacity: 0.6;
}
.ops-train-list {
  margin-left: 18px; padding: 2px 0 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.ops-train-tag {
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,132,255,0.06); border: 1px solid rgba(10,132,255,0.1);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  position: relative;
}
.ops-train-tag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px; vertical-align: middle;
}
.ops-train-load { color: var(--text-dim); min-width: 55px; }
.ops-train-speed { color: var(--accent); font-weight: 600; min-width: 48px; }
.ops-train-dwell { color: var(--warning); font-weight: 600; min-width: 48px; }
.ops-train-id {
  font-size: 10px; color: var(--text-dim); opacity: 0.5;
  margin-left: auto;
}
.ops-summary {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; color: var(--text-dim);
  display: flex; gap: 16px;
}
.ops-summary span { font-weight: 500; color: var(--text); }

/* ===== NAVIGATION PANEL ===== */
#nav-overlay {
  --nav-bg: rgba(8,12,18,.38);
  --nav-panel: rgba(26,29,36,.88);
  --nav-panel-strong: rgba(36,40,49,.92);
  --nav-card: rgba(255,255,255,.055);
  --nav-card-strong: rgba(255,255,255,.08);
  --nav-line: rgba(255,255,255,.13);
  --nav-line-soft: rgba(255,255,255,.08);
  --nav-text: rgba(245,245,247,.96);
  --nav-muted: rgba(235,235,245,.70);
  --nav-faint: rgba(235,235,245,.38);
  --nav-blue: #0a84ff;
  --nav-green: #30d158;
  --nav-orange: #ff9f0a;
  --nav-red: #ff453a;
  position: fixed; inset: var(--ui-overlay-top,0px) 0 auto; z-index: 2000;
  height: var(--ui-layout-height);
  box-sizing: border-box;
  display: flex; align-items: var(--ui-task-align,center); justify-content: var(--ui-task-align,center);
  pointer-events: var(--ui-task-pointer-events,auto);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: hidden;
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
html.cityrail-light-ui #nav-overlay {
  --nav-bg: rgba(235,238,244,.34);
  --nav-panel: rgba(255,255,255,.88);
  --nav-panel-strong: rgba(255,255,255,.96);
  --nav-card: rgba(15,23,42,.045);
  --nav-card-strong: rgba(255,255,255,.72);
  --nav-line: rgba(15,23,42,.13);
  --nav-line-soft: rgba(15,23,42,.08);
  --nav-text: #111827;
  --nav-muted: rgba(17,24,39,.74);
  --nav-faint: rgba(17,24,39,.42);
  --nav-blue: #006edb;
  --nav-green: #188038;
  --nav-orange: #a45a00;
  --nav-red: #d70015;
}
#nav-overlay.hidden { display: none; }
#nav-panel {
  pointer-events: auto;
  position: relative;
  width: min(760px, calc(100vw - 36px));
  max-height: min(720px, calc(100dvh - 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--nav-line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--nav-panel-strong), var(--nav-panel));
  color: var(--nav-text);
  box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
}
html.cityrail-light-ui #nav-panel { box-shadow: 0 28px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.82); }
#nav-panel::before,
#nav-panel::after { display: none; }
.nav-panel-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(150px,1fr) auto;
  gap: 16px;
  overflow: auto;
  padding: 22px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.nav-titlebar {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  gap: 14px;
  align-items: center;
  margin: 0;
}
.nav-title-stack { min-width: 0; display: grid; gap: 3px; }
.nav-kicker {
  color: var(--nav-blue);
  font-size: 11px;
  font-weight: 760;
}
#nav-panel h2 .nav-title {
  color: var(--nav-text);
  font-size: 24px;
  font-weight: 820;
  line-height: 1.12;
}
#nav-close {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--nav-line);
  border-radius: 50%;
  background: var(--nav-card);
  color: var(--nav-muted);
  font-size: 0;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine) {
#nav-close:hover { background: rgba(255,69,58,.12); border-color: rgba(255,69,58,.25); color: var(--nav-red); }
}
#nav-close:active,
#nav-btn-swap:active,
#nav-btn-row button:active { transform: scale(.98); }
html.cityrail-apple-spatial-ui #nav-overlay .nav-label { color: var(--nav-muted) !important; }
.nav-od-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
}
.nav-row {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-rows: auto minmax(40px,auto) minmax(40px,auto);
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--nav-line-soft);
  border-radius: 14px;
  background: var(--nav-card);
}
.nav-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nav-muted);
  font-size: 12px;
  font-weight: 720;
}
.nav-label::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nav-green);
  box-shadow: 0 0 0 3px rgba(48,209,88,.14);
}
.nav-row.nav-to .nav-label::before {
  background: var(--nav-red);
  box-shadow: 0 0 0 3px rgba(255,69,58,.14);
}
.nav-select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--nav-line);
  border-radius: 10px;
  background-color: var(--nav-card-strong);
  color: var(--nav-text);
  font: 650 13px/1.2 inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nav-muted) 50%), linear-gradient(135deg, var(--nav-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
@media (hover: hover) and (pointer: fine) {
.nav-select:hover { border-color: rgba(10,132,255,.38); background-color: rgba(10,132,255,.08); }
}
.nav-select:focus { border-color: rgba(10,132,255,.74); box-shadow: 0 0 0 3px rgba(10,132,255,.18); }
.nav-select:disabled { cursor: not-allowed; color: var(--nav-faint); opacity: 1; }
.nav-select option { background: #1c1c1e; color: #f5f5f7; }
html.cityrail-light-ui .nav-select option { background: #fff; color: #111827; }
#nav-btn-swap {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(10,132,255,.34);
  border-radius: 50%;
  background: rgba(10,132,255,.13);
  color: var(--nav-blue);
  cursor: pointer;
  font-size: 0;
  transition: background-color .16s ease, border-color .16s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine) {
#nav-btn-swap:hover { background: rgba(10,132,255,.20); border-color: rgba(10,132,255,.58); }
}
#nav-route {
  position: relative;
  min-height: 150px;
  max-height: min(330px, 38dvh);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--nav-line-soft);
  border-radius: 14px;
  background: var(--nav-card);
  color: var(--nav-text);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#nav-route:empty::before {
  content: '选择起点和终点后，路径、换乘次数、距离和预计时间会显示在这里。';
  color: var(--nav-faint);
  font-size: 13px;
  line-height: 1.6;
}
.nav-route-notice {
  display: flex;
  align-items: center;
  min-height: 54px;
  color: var(--nav-muted);
  font-size: 13px;
  line-height: 1.55;
}
.nav-route-notice.warn { color: var(--nav-orange); }
.nav-route-notice.error { color: var(--nav-red); }
#nav-route .nav-itinerary-summary {
  display: grid;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nav-line-soft);
}
.nav-itinerary-summary strong { font-size: 24px; letter-spacing: -.6px; }
.nav-itinerary-summary span { font-size: 13px; color: var(--nav-text); }
.nav-itinerary-summary small { font-size: 12px; color: var(--nav-muted); }
.nav-itinerary-legs { list-style: none; margin: 16px 0 0; padding: 0 0 0 10px; }
.nav-itinerary-leg {
  position: relative;
  padding: 0 0 20px 22px;
  border-left: 5px solid var(--itinerary-line);
}
.nav-itinerary-stop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nav-itinerary-stop strong { min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.nav-itinerary-stop time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--nav-muted); }
.nav-itinerary-leg::before,
.nav-itinerary-arrival::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 2px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--itinerary-line);
  border-radius: 50%;
  background: var(--nav-card-strong);
}
.nav-itinerary-service { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; font-size: 11px; color: var(--nav-muted); }
.nav-itinerary-line { padding: 4px 7px; border-radius: 6px; background: var(--nav-card-strong); color: var(--nav-text); border-left: 3px solid var(--itinerary-line); font-size: 12px; font-weight: 650; }
.nav-itinerary-stops summary { min-height: 36px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--nav-muted); }
.nav-itinerary-stops summary::before { content: '›'; font-size: 20px; }
.nav-itinerary-stops[open] summary::before { transform: rotate(90deg); }
.nav-itinerary-stops ol { list-style: none; margin: 0; padding: 0; }
.nav-itinerary-stops li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 12px; color: var(--nav-muted); border-top: 1px solid var(--nav-line-soft); }
.nav-itinerary-walk { border-left-style: dotted; }
.nav-itinerary-walk-time { font-size: 12px; color: var(--nav-muted); }
.nav-itinerary-arrival { position: relative; border-left: 5px solid transparent; padding-left: 22px; }
.nav-itinerary-arrival > span { display: block; margin-top: 8px; font-size: 12px; color: var(--nav-muted); }
@media (max-width: 760px) {
  .nav-itinerary-summary strong { font-size: 22px; }
  .nav-itinerary-stop strong { font-size: 14px; }
  .nav-itinerary-leg { padding-left: 18px; padding-bottom: 16px; }
  .nav-itinerary-arrival { padding-left: 18px; }
}
#nav-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#nav-btn-row button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 12px;
  font: 760 13px/1 inherit;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
#nav-btn-clear {
  border: 1px solid var(--nav-line);
  background: var(--nav-card);
  color: var(--nav-muted);
}
@media (hover: hover) and (pointer: fine) {
#nav-btn-clear:hover { background: var(--nav-card-strong); color: var(--nav-text); }
}
#nav-btn-find {
  border: 1px solid transparent;
  background: var(--nav-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(10,132,255,.28);
}
#nav-btn-row .cityrail-heroicon { --cityrail-heroicon-size: 16px; }
@media (hover: hover) and (pointer: fine) {
#nav-btn-find:hover { background: #0077ed; }
}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  #nav-overlay { padding-inline:var(--ui-sheet-left) var(--ui-sheet-right); align-items:var(--ui-task-align,stretch); }
  #nav-panel { width: 100%; max-height: calc(100dvh - 24px); border-radius: 18px; }
  .nav-panel-body { grid-template-rows: auto auto minmax(170px,1fr) auto; padding: 16px; }
  .nav-od-grid { grid-template-columns: minmax(0,1fr) 44px; gap: 8px; }
  .nav-row {
    grid-column: 1;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 10px;
    gap: 6px;
  }
  .nav-row .nav-label { grid-column: 1 / -1; }
  #nav-btn-swap { grid-row: 1 / 3; }
  #nav-route { max-height: none; }
}
@media(max-width:420px){
  #nav-panel h2 .nav-title { font-size: 21px; }
  .nav-panel-body { gap: 12px; padding: 14px; }
  .nav-row { padding: 10px; }
  #nav-btn-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #nav-btn-row button { width: 100%; padding-left: 10px; padding-right: 10px; }
}

/* ===== STATION DETAIL PANEL ===== */
#station-detail-overlay {
  position: fixed; inset: 0; z-index: 2100;
  pointer-events: none;
}
#station-detail-overlay.hidden { display: none; }
#station-detail-panel {
  position: absolute; top: 70px; left: 12px;
  width: 380px; max-height: calc(var(--ui-layout-height,100dvh) - 100px);
  background: var(--panel);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px; overflow-y: auto; overflow-x: hidden;
  pointer-events: auto;
}
#station-detail-panel::-webkit-scrollbar { width: 4px; }
#station-detail-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
#station-detail-panel h2 {
  font-size: 17px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
#station-detail-panel h2 button {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 18px;
  padding: 2px 6px; transition: color var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
#station-detail-panel h2 button:hover { color: var(--accent); }
}
#sd-station-name { cursor: pointer; transition: opacity var(--transition-fast); }
@media (hover: hover) and (pointer: fine) {
#sd-station-name:hover { opacity: 0.6; }
}
#sd-name-editor { margin-bottom: 10px; }
#sd-name-editor.hidden { display: none; }
.sd-name-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.sd-edit-name-input {
  --ui-field: transparent;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; padding: 7px 12px;
  outline: none; font-family: inherit;
  transition: border-color var(--transition-fast);
}
.sd-edit-name-input:focus { border-color: var(--accent); }
.sd-name-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 14px;
  cursor: pointer; padding: 5px 12px;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
.sd-name-btn-save:hover { color: var(--success); border-color: var(--success); }
}
@media (hover: hover) and (pointer: fine) {
.sd-name-btn-cancel:hover { color: var(--danger); border-color: var(--danger); }
}
.sd-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  margin: 14px 0 8px;
}
.sd-section-title::before { content: ''; }







/* ===== STATION WAITING ===== */
#sd-waiting-section { margin-top: 4px; }
.sd-waiting-entry-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sd-waiting-line-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.sd-waiting-line-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px; font-weight: 600; color: var(--cr-object-text);
}
.sd-waiting-dir-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.sd-waiting-dir-label {
  font-size: 11px; font-weight: 500; min-width: 32px;
  padding: 2px 8px; border-radius: 3px; text-align: center;
}
.sd-waiting-dir-forward {
  background: rgba(10,132,255,0.12); color: var(--accent);
}
.sd-waiting-dir-backward {
  background: rgba(255,159,10,0.12); color: var(--warning);
}
.sd-waiting-dir-to {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px; color: var(--cr-object-muted);
}
.sd-waiting-dir-count {
  white-space: nowrap;
  font-size: 13px; font-weight: 700; min-width: 48px; text-align: right;
  color: var(--cr-object-text);
}
.sd-waiting-empty {
  font-size: 12px; color: var(--cr-object-muted); text-align: center;
  padding: 12px 0;
}
.sd-waiting-entry {
  padding: 2px 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--cr-object-border);
}
.sd-waiting-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
#sd-zone-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 14px 16px;
}
#sd-zone-row .sd-zone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: max(44px, calc(44px / var(--ui-desktop-scale, 1)));
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--ui-line);
  background: var(--ui-field);
  color: var(--ui-text);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#sd-zone-row .sd-zone-btn::before {
  content: '';
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ui-muted);
  border-radius: 50%;
}
#sd-zone-row .sd-zone-btn[aria-pressed="true"] {
  background: var(--ui-selected-fill);
  border-color: var(--ui-selected-border);
  color: var(--ui-selected-text);
  font-weight: 700;
  box-shadow: var(--ui-selected-shadow);
}
#sd-zone-row .sd-zone-btn[aria-pressed="true"]::before {
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(0 47%, 16% 33%, 40% 58%, 85% 10%, 100% 25%, 40% 90%);
}
#sd-zone-row .sd-zone-btn:active {
  opacity: .82;
}
#sd-zone-row .sd-zone-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
#sd-zone-row .sd-zone-hint {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-muted);
  margin-top: 1px;
}
@media (prefers-reduced-motion: reduce) {
  #sd-zone-row .sd-zone-btn {
    transition: none;
  }
}
/* Transfer controls share the panel material; semantic colours adapt by theme. */
#sd-transfer-section {
  --transfer-on: #8fe7a0;
  --transfer-off: #c5c8d0;
  --transfer-danger: #ffb4ad;
  --transfer-warning: #ffcc66;
}
#sd-transfer-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 16px;
}
html.cityrail-light-ui #sd-transfer-section {
  --transfer-on: #176b32;
  --transfer-off: #525660;
  --transfer-danger: #b42318;
  --transfer-warning: #805600;
}
.sd-transfer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-card);
}
.sd-transfer-copy {
  min-width: 0;
}
.sd-transfer-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sd-transfer-meta {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-muted);
}
.sd-transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sd-transfer-button {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--transfer-off);
  background: color-mix(in srgb, currentColor 8%, var(--ui-surface));
}
.sd-transfer-toggle[aria-pressed="true"] {
  color: var(--transfer-on);
}
.sd-transfer-remove {
  color: var(--transfer-danger);
}
@media (hover: hover) and (pointer: fine) {
.sd-transfer-button:hover {
  background: color-mix(in srgb, currentColor 14%, var(--ui-surface));
}
}
.sd-transfer-button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.sd-transfer-review {
  font-size: 12px;
  line-height: 1.45;
  color: var(--transfer-warning);
  background: color-mix(in srgb, var(--transfer-warning) 10%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--transfer-warning) 25%, transparent);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
#station-detail-panel .sd-actions button {
  width: 100%; min-width: 0; height: 36px; padding: 0 8px; font-size: 12px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  border: 0; border-radius: 11px;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-dim);
}
@media (hover: hover) and (pointer: fine) {
#station-detail-panel .sd-actions button:hover { background: rgba(255,255,255,0.08); color: var(--text); }
}
#station-detail-panel .sd-actions button.active-action {
  background: rgba(10,132,255,0.1); border-color: var(--accent); color: var(--accent);
}
#station-detail-panel .sd-actions #sd-btn-extend-line { order: 1; }
#station-detail-panel .sd-actions #sd-btn-branch-line { order: 2; }
#station-detail-panel .sd-actions #sd-btn-delete {
  order: 3;
  margin-right: 0;
}
#station-detail-panel .sd-actions #sd-station-toggle-open { order: 7; }
#station-detail-panel .sd-actions #sd-btn-move { order: 5; }
#station-detail-panel .sd-actions #sd-btn-block-external-flow { order: 6; }
#station-detail-panel .sd-actions #sd-btn-block-external-flow.active-action {
  background: rgba(255,159,10,0.14);
  border-color: rgba(255,159,10,0.55);
  color: #ffb340;
}
@media (hover: hover) and (pointer: fine) {
.sd-btn-danger:hover { border-color: var(--danger) !important; color: var(--danger) !important; background: rgba(255,69,58,0.06) !important; }
}
#sd-station-toggle-open {
  background: rgba(48,209,88,0.16);
  border: 1px solid rgba(48,209,88,0.36);
  color: #30d158;
}
@media (hover: hover) and (pointer: fine) {
#sd-station-toggle-open:hover {
  background: rgba(48,209,88,0.22);
  border-color: rgba(48,209,88,0.50);
  color: #8ff0a4;
}
}
#sd-station-toggle-open.closed {
  background: rgba(255,69,58,0.10);
  border-color: rgba(255,69,58,0.24);
  color: #ffb4ad;
  box-shadow: 0 10px 24px rgba(255,69,58,0.12), inset 0 1px 0 rgba(255,255,255,0.10);
}
@media (hover: hover) and (pointer: fine) {
#sd-station-toggle-open.closed:hover {
  background: rgba(255,69,58,0.16);
  border-color: rgba(255,69,58,0.42);
  color: #ffd1cc;
}
}

/* ===== Unified Object Panels: Line / Station / Depot / Passenger Source ===== */
.cityrail-object-panel,
.cityrail-depot-panel,
.cr-eps-panel {
  width: min(430px, calc(100vw - 36px));
  max-width: min(430px, calc(100vw - 36px));
  max-height: calc(var(--ui-layout-height,100dvh) - 100px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--cr-object-border, rgba(255,255,255,.13));
  overflow: hidden;
  pointer-events: auto;
  color: var(--cr-object-text, #f8fafc);
}
#line-config-panel,
#station-detail-panel {
  padding: 0;
  overflow: hidden;
}
.cityrail-object-panel-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 20px 14px;
}
/* One viewport budget, including desktop UI zoom and mobile browser chrome. */
.cityrail-depot-modal {
  --depot-panel-top: 0px;
  --depot-panel-bottom: 0px;
  position: fixed;
  top: var(--depot-panel-top);
  left: 12px;
  z-index: 100200;
  display: none;
  --depot-panel-height: calc(var(--ui-layout-height, 100dvh) - var(--depot-panel-top) - var(--depot-panel-bottom));
  max-height: var(--depot-panel-height);
  pointer-events: none;
}
.cityrail-depot-modal.visible {
  display: block;
}
.cityrail-depot-modal .cityrail-depot-panel {
  --cr-object-accent: #0a84ff;
  position: relative;
  width: min(380px, calc(var(--ui-layout-width) - 24px));
  max-width: min(380px, calc(var(--ui-layout-width) - 24px));
  height: var(--depot-panel-height);
  max-height: var(--depot-panel-height);
  overscroll-behavior: contain;
  text-shadow: none;
}
.cityrail-depot-panel > .cityrail-depot-head,
.cityrail-depot-panel > .depot-actions {
  flex: 0 0 auto;
}
.cityrail-depot-panel > .cityrail-depot-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 12px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (pointer: coarse) {
  .cityrail-depot-modal {
    --depot-panel-top: var(--ui-sheet-top,max(8px,env(safe-area-inset-top)));
    --depot-panel-bottom: var(--ui-sheet-bottom,max(8px,env(safe-area-inset-bottom)));
    top: calc(var(--ui-visual-top,0px) + var(--depot-panel-top));
  }
}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  .cityrail-depot-modal {
    left: var(--ui-sheet-left);
    right: auto;
  }
  .cityrail-depot-modal .cityrail-depot-panel {
    width: var(--ui-sheet-width,calc(var(--ui-layout-width) - var(--ui-sheet-left) - var(--ui-sheet-right)));
    max-width: none;
  }
}
@media (max-height: 500px) {
  .cityrail-depot-panel > .cityrail-depot-head {
    padding: 12px 20px;
  }
  .cityrail-depot-panel > .depot-actions {
    padding: 10px 20px;
  }
}
/* At very low heights, fixed chrome would leave no usable content viewport.
 * Move all three sections into one native scroller instead of nesting scrolls. */
@media (max-height: 360px) {
  .cityrail-depot-modal .cityrail-depot-panel {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .cityrail-depot-panel > .cityrail-depot-body {
    flex: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }
}
#line-config-panel h2,
#station-detail-panel h2,
.cityrail-depot-head {
  margin: 0;
  padding: 28px 20px 16px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cr-object-line, rgba(255,255,255,.095));
}
#line-config-close,
#station-detail-close,
.cityrail-depot-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cr-object-border, rgba(255,255,255,.13));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.055);
  color: var(--cr-object-muted, rgba(235,241,248,.62));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
@media (hover: hover) and (pointer: fine) {
#line-config-close:hover,
#station-detail-close:hover,
.cityrail-depot-close:hover {
  background: rgba(255,255,255,.09);
  color: var(--cr-object-text, #f8fafc);
}
}

.cityrail-object-panel-actions,
.depot-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 0;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--cr-object-line, rgba(255,255,255,.095));
  background: rgba(9,11,15,.82);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  position: sticky;
  bottom: 0;
  z-index: 4;
}
.cityrail-object-panel-actions button,
.depot-actions button {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--cr-object-border, rgba(255,255,255,.13));
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.cityrail-object-panel-actions button:active,
.depot-actions button:active { transform: scale(0.97); }
#sd-btn-move,
#sd-btn-block-external-flow,
.depot-actions .secondary {
  background: rgba(255,255,255,.055);
  color: var(--cr-object-text, #f8fafc);
}
.depot-actions .primary {
  background: var(--cr-object-accent, var(--accent));
  border-color: var(--cr-object-accent, var(--accent));
  color: #fff;
  box-shadow: none;
}
#cfg-btn-delete-line,
#sd-btn-delete,
.depot-actions .danger {
  background: rgba(255,69,58,0.16);
  color: #ffb4ad;
  border: 1px solid rgba(255,69,58,0.28);
}
@media (hover: hover) and (pointer: fine) {
#cfg-btn-delete-line:hover,
#sd-btn-delete:hover,
.depot-actions .danger:hover {
  background: rgba(255,69,58,0.22) !important;
  color: #fff !important;
  border-color: rgba(255,69,58,0.42) !important;
}
}
#cfg-btn-delete-line {
  order: 0;
  margin-right: 0;
}
html.cityrail-light-ui #sd-btn-move,
html.cityrail-light-ui #sd-btn-block-external-flow,
html.cityrail-light-ui .depot-actions .secondary {
  background: rgba(255,255,255,.055) !important;
  color: var(--cr-object-text, #f8fafc) !important;
}
html.cityrail-light-ui #cfg-btn-delete-line,
html.cityrail-light-ui #sd-btn-delete,
html.cityrail-light-ui .depot-actions .danger {
  background: rgba(255,59,48,.10) !important;
  color: #b42318 !important;
  border-color: rgba(255,59,48,.22) !important;
}

/* ===== STATION ACTIONS ===== */
.sd-extend-btn { color: var(--success); border-color: rgba(48,209,88,0.25); }
@media (hover: hover) and (pointer: fine) {
.sd-extend-btn:hover { background: rgba(48,209,88,0.08); }
}
.sd-branch-btn { color: var(--warning); border-color: rgba(255,159,10,0.25); }
@media (hover: hover) and (pointer: fine) {
.sd-branch-btn:hover { background: rgba(255,159,10,0.08); }
}
.sd-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.25);
}
@media (hover: hover) and (pointer: fine) {
.sd-actions button:disabled:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
}
}

/* Branch Config */
#sd-branch-config {
  margin-top: 10px; padding: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
#sd-branch-config.cityrail-branch-config-focus {
  border-color: rgba(255,159,10,0.46);
  box-shadow: 0 0 0 2px rgba(255,159,10,0.18), 0 10px 28px rgba(0,0,0,0.22);
}
.branch-config-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.branch-config-label { font-size: 11px; color: var(--text-dim); min-width: 50px; }
.branch-config-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.branch-config-select {
  min-width: 0;
  flex: 1; padding: 6px 10px; font-size: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text); outline: none;
  font-family: inherit;
}
.branch-config-select:focus { border-color: var(--accent); }
.branch-config-btns {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.branch-config-btn {
  padding: 7px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  border: 1px solid; border-radius: var(--radius-sm); background: transparent;
}
.branch-config-btn-cancel { color: var(--danger); border-color: rgba(255,69,58,0.2); }
@media (hover: hover) and (pointer: fine) {
.branch-config-btn-cancel:hover { background: rgba(255,69,58,0.06); }
}
.branch-config-btn-start { color: var(--warning); border-color: rgba(255,159,10,0.3); }
@media (hover: hover) and (pointer: fine) {
.branch-config-btn-start:hover { background: rgba(255,159,10,0.08); }
}
.sd-move-hint { font-size: 10px; color: var(--accent); margin-top: 8px; text-align: center; }
.sd-line-picker {
  margin-top: 10px; padding: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
.sd-line-picker-title { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; text-align: center; }
.sd-line-picker-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sd-line-pick-btn {
  padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid;
  font-size: 12px; font-weight: 500; cursor: pointer;
  background: rgba(255,255,255,0.04); color: var(--text);
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
.sd-line-pick-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.02); }
}

/* ===== NETWORK STATS PANEL ===== */


/* ===== SPLASH SCREEN ===== */
#splash-screen {
  position: fixed; inset: 0; z-index: 99999;
  background:
    radial-gradient(circle at 18% 8%, rgba(10,132,255,0.26), transparent 26%),
    radial-gradient(circle at 78% 72%, rgba(48,209,88,0.09), transparent 34%),
    linear-gradient(145deg, #05172c 0%, #020a17 46%, #010610 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 22px;
  transition: opacity 0.46s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.46s;
  overflow: hidden;
}
#splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(115deg, transparent 0 17%, rgba(10,132,255,0.22) 17.1%, transparent 17.45% 48%, rgba(125,212,255,0.16) 48.1%, transparent 48.42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 92px);
  mask-image: radial-gradient(circle at 44% 46%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.62) 60%, transparent 100%);
}
#splash-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,6,16,0.18), rgba(1,6,16,0.02) 44%, rgba(1,6,16,0.44)),
    radial-gradient(circle at 50% 54%, transparent 0%, rgba(0,0,0,0.35) 100%);
}
#splash-screen.fade-out {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.splash-main {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  justify-content: space-between;
}
.cityrail-build-mark {
  position: fixed;
  top: max(28px, env(safe-area-inset-top));
  right: max(32px, env(safe-area-inset-right));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 50px;
  padding: 9px 18px 10px;
  border: 1px solid rgba(164,216,255,0.22);
  border-radius: 999px;
  color: rgba(238,248,255,0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
    rgba(5,16,30,0.56);
  box-shadow: 0 18px 54px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.cityrail-build-mark.ready {
  opacity: 1;
  transform: translateY(0);
}
.cityrail-build-mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(125,212,255,0.50), transparent 30% 68%, rgba(10,132,255,0.42));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}
.cityrail-build-number {
  position: relative;
  display: inline-block;
  font-family: "Avenir Next", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(126deg, #ffffff 0%, #e3f3ff 28%, #8bddff 54%, #0a84ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 12px 34px rgba(10,132,255,0.32);
  transform: skewX(-7deg);
}
.cityrail-build-number::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 2%;
  bottom: -4px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(125,212,255,0.85), transparent);
  transform: skewX(-14deg);
}
.splash-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  animation: splashFadeUp 0.82s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.splash-hero-copy {
  width: min(920px, 100%);
  text-align: left;
}
.splash-hero-title {
  margin: 0;
  color: #eaf5ff;
  font-size: clamp(58px, 8.6vw, 118px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: 0;
}
.splash-hero-title span {
  display: block;
}
.splash-hero-lede {
  margin: 28px 0 0;
  max-width: 860px;
  color: rgba(225,238,255,0.70);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.78;
  font-weight: 720;
}
.splash-action-row {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}
/* Homepage actions: one component for links and buttons. */
.splash-action {
  --action-fill: #e8e8ed;
  --action-text: #1d1d1f;
  --action-hover: #f5f5f7;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 200px;
  min-height: 64px;
  padding: 18px 30px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--action-fill);
  color: var(--action-text);
  box-shadow: none;
  font: 600 19px/1.25 var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.splash-action--primary { --action-fill: #0071e3; --action-text: #fff; --action-hover: #0077ed; }
@media (hover: hover) and (pointer: fine) {
  .splash-action:hover { background: var(--action-hover); }
}
.splash-action:active { transform: scale(.97); }
.splash-action:focus-visible { outline: 3px solid #64b5ff; outline-offset: 4px; }
.splash-action:is(:disabled,[aria-disabled="true"]) { opacity: .45; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .splash-action { transition: none; }
  .splash-action:active { transform: none; }
}
@media (prefers-contrast: more) {
  .splash-action { border-color: currentColor; }
}
html.cityrail-desktop-entry .splash-download-btn {
  display: none !important;
}
html.cityrail-desktop-entry #splash-continue-btn {
  min-width: 240px;
}
.splash-version-note {
  margin-top: 30px;
  color: rgba(214,229,249,0.52);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.7;
}
.splash-logo-stage {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  animation: splashFadeUp 0.82s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}
.splash-logo-stage::before {
  content: "";
  position: absolute;
  width: min(34vw, 420px);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(10,132,255,0.34), rgba(10,132,255,0.08) 48%, transparent 70%);
  filter: blur(18px);
  z-index: -2;
}
.splash-logo-stage::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(125,212,255,0.14);
  border-radius: 28px;
  transform: rotate(-4deg);
  background: rgba(255,255,255,0.025);
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
  z-index: -1;
}
.splash-logo-img {
  width: min(28vw, 320px);
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 34px 70px rgba(0,0,0,0.42));
}

/* Stagger fade-up base */
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 980px) {
  #splash-screen { padding: 28px 18px; align-items: flex-start; overflow-y: auto; }
  .cityrail-build-mark {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    min-width: 86px;
    min-height: 40px;
    padding: 7px 13px 8px;
  }
  .cityrail-build-number { font-size: 27px; }
  .splash-main {
    min-height: calc(var(--site-layout-height, 100dvh) - 56px);
    grid-template-columns: 1fr;
    gap: 22px;
    align-content: center;
  }
  .splash-logo-stage {
    order: -1;
    min-height: 180px;
    justify-content: flex-start;
  }
  .splash-logo-stage::before { width: 140px; }
  .splash-logo-stage::after { inset: -8px auto auto -8px; width: 104px; height: 104px; border-radius:20px; }
  .splash-logo-img { width: min(42vw, 180px); }
  .splash-hero-title { font-size: clamp(48px, 15vw, 86px); }
  .splash-hero-lede { margin-top: 20px; font-size: 17px; }
  .splash-action-row { margin-top: 30px; }

}
@media (max-width: 560px) {
  .cityrail-build-mark { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .splash-action-row { align-items: stretch; flex-direction: column; }
  .splash-action { width: 100%; min-width: 0; }

  .splash-version-note { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-content,
  .splash-logo-stage {
    animation: none !important;
  }
}

/* ===== CITY SELECT SCREEN ===== */
/* Auth Screen — 登录/注册/邀请码入口 */
#auth-screen {
  position: fixed; inset: 0; z-index: 99997;
  background:
    radial-gradient(circle at 16% 22%, rgba(10,132,255,0.20), transparent 32%),
    radial-gradient(circle at 84% 70%, rgba(48,209,88,0.10), transparent 34%),
    linear-gradient(145deg, #06142a 0%, #020b18 52%, #02050b 100%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px;
  overflow-y: auto;
}
#auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image:
    linear-gradient(118deg, transparent 0 20%, rgba(10,132,255,0.24) 20.1%, transparent 20.45% 55%, rgba(125,212,255,0.16) 55.1%, transparent 55.42%),
    linear-gradient(32deg, transparent 0 30%, rgba(48,209,88,0.15) 30.1%, transparent 30.42% 64%, rgba(255,204,0,0.12) 64.1%, transparent 64.42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 82px);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.82) 62%, transparent 100%);
}
#auth-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, rgba(2,8,18,0.18) 62%, rgba(0,0,0,0.46) 100%);
}
.auth-back-btn {
  position: fixed; top: 56px; left: 32px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.auth-back-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
}
.auth-back-btn:active { transform: scale(0.96); }
.auth-back-btn svg {
  width: 18px; height: 18px;
  stroke: rgba(255,255,255,0.7); fill: none;
  stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.auth-back-btn:hover svg { stroke: rgba(255,255,255,0.95); }
}
.auth-back-btn span {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.auth-back-btn:hover span { color: rgba(255,255,255,0.95); }
}
#auth-screen.visible { display: flex; }
#auth-screen.fade-out {
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.auth-header {
  position: relative; z-index: 1;
  text-align: left;
}
.auth-title {
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  color: transparent;
  background: linear-gradient(135deg, #ffffff 0%, #d0e2ff 35%, #0A84FF 75%, #0055cc 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(10,132,255,0.3));
}
.auth-subtitle {
  font-size: 13px; font-weight: 850; letter-spacing: 0.18em;
  color: rgba(125,212,255,0.68);
  margin-bottom: 16px;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}
.auth-shell {
  max-width: 100%;
  position: relative;
  z-index: 1;
  width: min(1040px, calc(var(--site-layout-width, 100vw) - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 430px);
  gap: 34px;
  align-items: center;
}
.auth-hero-card {
  position: relative;
  min-height: 456px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.030)),
    rgba(2,11,24,0.42);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  box-shadow: 0 30px 90px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}
.auth-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.58;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(10,132,255,0.22) 18.1%, transparent 18.5% 54%, rgba(48,209,88,0.14) 54.1%, transparent 54.5%),
    radial-gradient(circle at 78% 24%, rgba(10,132,255,0.24), transparent 24%);
}
.auth-hero-card > * { position: relative; z-index: 1; }
.auth-lede {
  max-width: 560px;
  margin-top: 22px;
  color: rgba(226,238,255,0.66);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 520;
}
.auth-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}
.auth-stat {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
}
.auth-stat strong {
  color: rgba(255,255,255,0.94);
  font-size: 20px;
  font-weight: 850;
}
.auth-stat span {
  margin-top: 4px;
  color: rgba(220,236,255,0.50);
  font-size: 12px;
  font-weight: 700;
}
.auth-action-card {
  position: relative;
  z-index: 1;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,14,24,0.72);
  box-shadow: 0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(34px) saturate(170%);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
}
.auth-action-title {
  color: rgba(255,255,255,0.94);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: 0;
}
.auth-action-subtitle {
  margin-top: 8px;
  margin-bottom: 14px;
  color: rgba(220,236,255,0.50);
  font-size: 13px;
  line-height: 1.55;
}
.auth-auto-remember {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(125,212,255,0.18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(10,132,255,0.115), rgba(255,255,255,0.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}
.auth-auto-remember input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-auto-check {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.22);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.auth-auto-check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 3px 10px rgba(0,0,0,0.24);
  transition: transform 0.18s ease, background 0.18s ease;
}
.auth-auto-remember input:checked + .auth-auto-check {
  background: rgba(10,132,255,0.88);
  border-color: rgba(125,212,255,0.62);
}
.auth-auto-remember input:checked + .auth-auto-check::after {
  transform: translateX(20px);
  background: #fff;
}
.auth-auto-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-auto-copy strong {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
}
.auth-auto-copy span {
  color: rgba(220,236,255,0.52);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 650;
}
.auth-buttons {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.auth-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 820; letter-spacing: 0;
  color: #fff;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  border: none;
  overflow: hidden;
}
/* Primary — 注册 */
.auth-btn-primary {
  background: var(--site-primary);
  color: #fff;
  border: 1px solid var(--site-primary);
  box-shadow: 0 4px 16px rgba(10,132,255,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
@media (hover: hover) and (pointer: fine) {
.auth-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(10,132,255,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
}
.auth-btn-primary:active { transform: translateY(0); }
/* Secondary — 登录 */
.auth-btn-secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}
@media (hover: hover) and (pointer: fine) {
.auth-btn-secondary:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.06);
}
}
.auth-btn-secondary:active { transform: translateY(0); }
/* Tertiary — 邀请码 */
.auth-btn-tertiary {
  background: transparent;
  border: 1px solid rgba(255,149,10,0.35);
  color: #FF9F0A;
}
@media (hover: hover) and (pointer: fine) {
.auth-btn-tertiary:hover {
  background: rgba(255,149,10,0.08);
  border-color: rgba(255,149,10,0.55);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,149,10,0.12);
}
}
.auth-btn-tertiary:active { transform: translateY(0); }
/* Recover — 找回帐号/密码 */
.auth-btn-recover {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}
@media (hover: hover) and (pointer: fine) {
.auth-btn-recover:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.05);
}
}
.auth-btn-recover:active { transform: translateY(0); }
.auth-btn-workshop {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@media (hover: hover) and (pointer: fine) {
.auth-btn-workshop:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.34);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
}
.auth-btn-workshop:active { transform: translateY(0); }
.auth-btn .auth-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  font-size: 22px;
  flex-shrink: 0;
}
.auth-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.auth-btn-text strong {
  color: currentColor;
  font-size: 17px;
  font-weight: 850;
}
.auth-btn-text span {
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  font-weight: 650;
}
.auth-btn-tertiary .auth-btn-text span { color: rgba(255,159,10,0.58); }
.auth-btn-recover .auth-btn-text span { color: rgba(255,255,255,0.45); }
.auth-btn-primary :is(.auth-icon,.auth-btn-text,.auth-btn-text strong,.auth-btn-text span) { color: inherit; }
.auth-action-note {
  margin-top: 16px;
  color: rgba(220,236,255,0.42);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 860px) {
  #auth-screen { padding: 24px 16px; justify-content: flex-start; }
  .auth-back-btn { top: 20px; left: 18px; }
  .auth-shell { grid-template-columns: 1fr; width: min(560px, calc(var(--site-layout-width, 100vw) - 24px)); gap: 16px; padding-top: 74px; }
  .auth-hero-card { min-height: 0; padding: 26px 22px; border-radius: 24px; }
  .auth-header { text-align: center; }
  .auth-lede { margin-left: auto; margin-right: auto; font-size: 15px; text-align: center; }
  .auth-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
  .auth-stat { min-height: 60px; padding: 10px 8px; text-align: center; }
  .auth-stat strong { font-size: 17px; }
  .auth-stat span { font-size: 11px; }
  .auth-action-card { padding: 18px; border-radius: 22px; }
  .auth-auto-remember { min-height: 52px; margin-bottom: 12px; padding: 9px 10px; border-radius: 15px; grid-template-columns: 44px minmax(0, 1fr); }
  .auth-auto-check { width: 42px; height: 24px; }
  .auth-auto-check::after { width: 18px; height: 18px; }
  .auth-auto-remember input:checked + .auth-auto-check::after { transform: translateX(18px); }
  .auth-auto-copy strong { font-size: 13px; }
  .auth-auto-copy span { font-size: 10px; line-height: 1.3; }
}
@media (pointer: coarse) and (max-width: 860px) {
  #auth-screen { padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); }
  .auth-shell { width: min(600px, calc(var(--site-layout-width, 100vw) - 28px)); gap: 12px; padding-top: 58px; padding-bottom: 8px; }
  .auth-back-btn { top: max(14px, env(safe-area-inset-top)); }
  .auth-hero-card { padding: 18px 18px 16px; border-radius: 22px; }
  .auth-title { font-size: clamp(32px, 7.2vw, 46px); line-height: 1.02; }
  .auth-subtitle { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.12em; }
  .auth-lede { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .auth-stat-row { margin-top: 12px; gap: 8px; }
  .auth-stat { min-height: 48px; padding: 8px 6px; border-radius: 14px; }
  .auth-stat strong { font-size: 15px; }
  .auth-stat span { font-size: 10px; }
  .auth-action-card { padding: 14px; border-radius: 20px; }
  .auth-action-title { font-size: 20px; }
  .auth-action-subtitle { margin-top: 5px; margin-bottom: 12px; font-size: 12px; line-height: 1.42; }
  .auth-buttons { gap: 9px; }
  .auth-btn { min-height: 56px; padding: 12px 14px; border-radius: 16px; }
  .auth-btn .auth-icon { width: 34px; height: 34px; border-radius: 12px; }
  .auth-btn-text strong { font-size: 15px; }
  .auth-btn-text span { font-size: 11px; }
  .auth-action-note { margin-top: 10px; font-size: 11px; line-height: 1.4; }
}
@media (pointer: coarse) and (max-width: 860px) and (max-height: 760px) {
  #auth-screen { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .auth-shell { gap: 10px; padding-top: 48px; }
  .auth-hero-card { padding: 14px 16px; }
  .auth-lede { display: none; }
  .auth-stat-row { display: none; }
  .auth-action-card { padding: 12px; }
  .auth-action-subtitle,
  .auth-action-note { display: none; }
  .auth-auto-remember { min-height: 46px; margin-bottom: 8px; padding: 8px 9px; }
  .auth-auto-copy span { display: none; }
  .auth-buttons { gap: 8px; }
  .auth-btn { min-height: 52px; padding: 10px 12px; }
}

#workshop-screen {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: none;
  flex-direction: column;
  color: #fff;
  background: #101012;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  padding: max(22px, env(safe-area-inset-top)) 28px 28px;
}
#workshop-screen.visible { display: flex; }
.workshop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-shrink: 0;
}
.workshop-back {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--material-popover,var(--site-fill));
  color: var(--site-text);
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
  box-shadow: var(--material-shadow,var(--site-shadow));
  cursor: pointer;
}
.workshop-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
}
.workshop-tagline {
  margin-top: 14px;
  padding: 0 4px;
  color: rgba(255,255,255,0.52);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
}
.workshop-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.workshop-my-btn {
  min-width: 102px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.94);
  padding: 0 14px 0 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.workshop-avatar,
.workshop-author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(10,132,255,0.75), rgba(48,209,88,0.65));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.workshop-avatar img,
.workshop-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.workshop-action {
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: var(--ui-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.workshop-action.primary {
  background: #0A84FF;
  border-color: rgba(10,132,255,0.8);
}
.workshop-toolbar {display:flex;align-items:end;gap:16px;width:100%;max-width:1280px;margin:24px auto 0;flex-shrink:0;}
.workshop-search {flex:1;min-width:0;}
.workshop-toolbar label {display:flex;flex-direction:column;gap:8px;font-size:12px;color:#a1a1aa;}
.workshop-toolbar input,.workshop-toolbar select {box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border-radius:12px;font:inherit;}
.workshop-sort {width:160px;flex-shrink:0;}
#workshop-count {font-size:13px;color:#a1a1aa;white-space:nowrap;padding-bottom:12px;}
.workshop-layout {margin-top:24px;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.workshop-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-content:start;max-width:1280px;margin:0 auto;padding:4px 4px 32px;}
.workshop-card {min-width:0;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:#1c1c1e;overflow:hidden;cursor:pointer;transition:border-color 140ms ease-out;}
.workshop-card:focus-visible {outline:3px solid #64b5ff;outline-offset:3px;}
@media(hover:hover) and (pointer:fine){.workshop-card:hover {border-color:rgba(255,255,255,.35);}}
.workshop-preview {height:auto;aspect-ratio:16/10;overflow:hidden;background:#0d0f14;}
.workshop-preview svg {display:block;width:100%;height:100%;}
.workshop-card-body {padding:20px;}
.workshop-card h3 {margin:0;font-size:19px;line-height:1.4;font-weight:650;overflow-wrap:anywhere;}
.workshop-card p {margin:10px 0 18px;color:#a1a1aa;line-height:1.6;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px;overflow-wrap:anywhere;}
.workshop-meta {display:flex;align-items:center;gap:8px;color:var(--site-muted);font-size:13px;min-width:0;}
.workshop-meta>span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.workshop-stats {display:flex;gap:16px;flex-wrap:wrap;margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#a1a1aa;font-variant-numeric:tabular-nums;}
.workshop-empty {grid-column:1/-1;padding:48px 20px;text-align:center;}
@media(max-width:1100px){.workshop-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.workshop-grid {grid-template-columns:minmax(0,1fr);gap:20px;}.workshop-toolbar{gap:12px;flex-wrap:wrap;margin-top:16px;}.workshop-sort{width:120px;}#workshop-count{width:100%;padding:0;}.workshop-layout{margin-top:16px;}}
.workshop-side {
  position: relative;
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  min-height: 0;
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--site-border);
  border-radius: 24px;
  background: var(--material-panel, var(--site-surface));
  color: var(--site-text);
  box-shadow: var(--site-shadow);
  -webkit-backdrop-filter: var(--material-blur, none);
  backdrop-filter: var(--material-blur, none);
}
.workshop-my-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--site-fill);
  color: var(--site-muted);
  font-size: 24px;
  cursor: pointer;
}
.workshop-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 40px 24px 0;
  border-bottom: 1px solid var(--site-border);
}
.workshop-profile .workshop-avatar {
  width: 52px;
  height: 52px;
  border: 0;
  background: var(--site-fill);
  color: var(--site-blue);
  font-size: 22px;
  font-weight: 600;
}
.workshop-profile-name {
  overflow-wrap: anywhere;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
#workshop-my-modal .workshop-action {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: var(--site-fill);
  color: var(--site-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
#workshop-my-modal .workshop-action.primary {
  background: var(--site-primary);
  border-color: var(--site-primary);
  color: #fff;
}
#workshop-my-modal .workshop-avatar-upload {
  min-height: 32px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--site-blue);
}
#workshop-avatar-input,
.workshop-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.workshop-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.workshop-side h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.workshop-login-gate {
  display: none;
}
.workshop-login-gate.visible { display: block; }
.workshop-login-gate h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0;
}
.workshop-login-gate p {
  margin: 0 0 16px;
  color: var(--site-text);
  font-size: 13px;
  line-height: 1.55;
}
.workshop-upload-panel.is-locked {
  display: none;
}
.workshop-field {
  margin-bottom: 18px;
}
.workshop-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--site-muted);
  font-size: 13px;
  font-weight: 600;
}
.workshop-field input:not([type="file"]),
.workshop-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: var(--site-surface);
  color: var(--site-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.workshop-field :is(input, textarea)::placeholder {
  color: var(--site-muted);
  opacity: 1;
}
.workshop-field textarea {
  min-height: 112px;
  resize: vertical;
}
.workshop-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: var(--site-surface);
}
.workshop-file-row .workshop-action {
  flex-shrink: 0;
}
.workshop-file-name {
  min-width: 0;
  color: var(--site-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
#workshop-my-modal :is(button, input:not([type="file"]), textarea):focus-visible,
.workshop-file-row:focus-within,
.workshop-profile > div:focus-within .workshop-avatar-upload {
  outline: 2px solid var(--site-blue);
  outline-offset: 3px;
}
.workshop-status {
  margin-top: 12px;
  color: var(--site-muted);
  font-size: 13px;
  line-height: 1.5;
}
.workshop-status:empty { display: none; }
.workshop-manage-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 480px) {
  .workshop-side { padding: 24px 20px; }
  .workshop-panel-actions { grid-template-columns: 1fr; }
}
.workshop-manage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
}
.workshop-delete {
  border: 0;
  border-radius: 999px;
  background: rgba(255,69,58,0.16);
  color: #FF453A;
  padding: 8px 11px;
  cursor: pointer;
}
.workshop-empty {
  color: var(--ui-muted);
  padding: 30px;
  text-align: center;
}
.workshop-modal {
  position: fixed;
  inset: 0;
  z-index: 100003;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--material-scrim,var(--site-backdrop));
}
.workshop-modal.visible { display: flex; }
/* Item detail: the network map owns the whole viewport; the text floats above it. */
.workshop-detail {
  position: fixed;
  inset: 0;
  z-index: 100003;
  display: none;
  color: var(--site-text);
  background: var(--site-bg);
}
.workshop-detail.visible { display: block; }
.workshop-detail-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.workshop-detail-map.dragging { cursor: grabbing; }
.workshop-detail-map svg { display: block; width: 100%; height: 100%; }
.workshop-detail-top {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.workshop-detail-top > * { pointer-events: auto; }
.workshop-detail-hint {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--material-popover,var(--site-surface));
  color: var(--site-muted);
  font-size: 12px;
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
}
.workshop-detail-panel {
  position: absolute;
  right: 28px;
  bottom: max(28px, env(safe-area-inset-bottom));
  width: min(360px, calc(var(--site-layout-width, 100vw) - 56px));
  max-height: min(70vh, 640px);
  overflow: auto;
  box-sizing: border-box;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid var(--site-border);
  background: var(--material-panel,var(--site-surface));
  color: var(--site-text);
  box-shadow: var(--material-shadow,var(--site-shadow));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
}
.workshop-detail-panel h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: 0; overflow-wrap: anywhere; }
.workshop-detail-panel p { margin: 12px 0 0; color: var(--site-text); line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; }
.workshop-detail-panel .workshop-meta { flex-wrap: wrap; }
.workshop-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 600px) {
  .workshop-detail-top { left: 12px; right: 12px; }
  .workshop-detail-hint { display: none; }
  .workshop-detail-panel { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: 44vh; padding: 16px 18px; border-radius: 18px; }
  .workshop-detail-panel h2 { font-size: 20px; }
}
.workshop-login-modal-card {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--site-border);
  background: var(--material-panel,var(--site-surface));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
  color: var(--site-text);
  box-shadow: var(--material-shadow,var(--site-shadow));
}
.workshop-login-modal-card h2 {
  margin: 0 0 9px;
  font-size: 22px;
  letter-spacing: 0;
}
.workshop-login-modal-card p {
  margin: 0;
  color: var(--site-muted);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 900px) and (min-height: 521px) {
  #workshop-screen { padding: 18px; }
  .workshop-topbar { gap:10px; }
  .workshop-title {font-size:22px;}
  .workshop-my-btn {min-width:72px;}

}

/* Product Intro Screen */
#product-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(10,132,255,0.20), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(48,209,88,0.10), transparent 32%),
    linear-gradient(145deg, #03060d 0%, #07111f 48%, #02040a 100%);
  overflow: hidden;
}
#product-intro-screen.visible { display: block; }
#product-intro-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
#product-intro-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(118deg, transparent 0 17%, rgba(125,212,255,0.46) 17.16%, transparent 17.46% 45%, rgba(10,132,255,0.34) 45.18%, transparent 45.50%),
    linear-gradient(32deg, transparent 0 27%, rgba(255,255,255,0.16) 27.15%, transparent 27.45% 61%, rgba(48,209,88,0.20) 61.16%, transparent 61.48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.70) 68%, transparent 100%);
}
.intro-shell {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  width: min(1180px, calc(var(--site-layout-width, 100vw) - 72px));
  margin: 0 auto;
  padding: 56px 0;
  box-sizing: border-box;
}
.intro-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(125,212,255,0.72);
  text-transform: uppercase;
}
.intro-title {
  margin-top: 18px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 0.98;
  font-weight: 850;
  letter-spacing: 0;
}
.intro-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, #fff 0%, #dbeaff 42%, #6dbdff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.intro-copy {
  margin-top: 24px;
  max-width: 560px;
  color: rgba(255,255,255,0.68);
  font-size: 17px;
  line-height: 1.82;
  font-weight: 500;
}
.intro-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.intro-primary,
.intro-secondary {
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 0 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.intro-primary {
  height: 56px;
  padding: 0 34px;
  font-size: 16px;
  background: linear-gradient(135deg, #0A84FF, #0067d7);
  border-color: rgba(125,212,255,0.38);
  box-shadow: 0 20px 54px rgba(10,132,255,0.34), inset 0 1px 0 rgba(255,255,255,0.20);
}
.intro-secondary {
  background: rgba(255,255,255,0.075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
@media (hover: hover) and (pointer: fine) {
.intro-primary:hover,
.intro-secondary:hover { transform: translateY(-1px); }
}
.intro-proof {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}
.intro-proof-item {
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
}
.intro-proof-item strong {
  display: block;
  font-size: 20px;
  letter-spacing: 0;
}
.intro-proof-item span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  line-height: 1.4;
}
.intro-visual {
  position: relative;
  min-height: 560px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(7,12,21,0.72);
  box-shadow: 0 36px 110px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  overflow: hidden;
}
.intro-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.20;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 64px);
}
.intro-map {
  position: absolute;
  inset: 32px;
}
.intro-line {
  position: absolute;
  height: 8px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 28px color-mix(in srgb, var(--b) 52%, transparent);
}
.intro-line.l1 { left: 4%; top: 26%; width: 78%; transform: rotate(18deg); --a:#0A84FF; --b:#7dd4ff; }
.intro-line.l2 { left: 12%; top: 72%; width: 72%; transform: rotate(-27deg); --a:#30D158; --b:#98f5c2; }
.intro-line.l3 { left: 20%; top: 15%; width: 64%; transform: rotate(82deg); --a:#FF9F0A; --b:#ffd166; }
.intro-line.l4 { left: 5%; top: 52%; width: 88%; transform: rotate(-4deg); --a:#BF5AF2; --b:#9ad7ff; }
.intro-station {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 3px solid rgba(10,132,255,0.86);
  box-shadow: 0 0 0 8px rgba(10,132,255,0.10);
}
.intro-station.s1 { left: 16%; top: 29%; }
.intro-station.s2 { left: 45%; top: 39%; }
.intro-station.s3 { left: 72%; top: 48%; }
.intro-station.s4 { left: 36%; top: 69%; border-color: rgba(48,209,88,0.92); }
.intro-station.s5 { left: 62%; top: 19%; border-color: rgba(255,159,10,0.92); }
.intro-station.s6 { left: 78%; top: 70%; border-color: rgba(191,90,242,0.92); }
.intro-train {
  position: absolute;
  left: 42%;
  top: 50%;
  width: 54px;
  height: 24px;
  border-radius: 9px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 38px rgba(10,132,255,0.28);
  transform: rotate(-4deg);
}
.intro-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.intro-metric {
  padding: 14px;
  border-radius: 16px;
  background: rgba(3,8,16,0.62);
  border: 1px solid rgba(255,255,255,0.10);
}
.intro-metric b {
  display: block;
  font-size: 19px;
}
.intro-metric span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.44);
  font-size: 12px;
}
@media (max-width: 900px) and (min-height: 521px) {
  #product-intro-screen { overflow-y: auto; }
  .intro-shell {
    min-height: 100%;
    grid-template-columns: 1fr;
    width: min(var(--site-layout-width, 100vw) - 32px, 620px);
    padding: 74px 0 28px;
  }
  .intro-visual { min-height: 380px; border-radius: 26px; }
  .intro-proof { grid-template-columns: 1fr; }
  .intro-panel { grid-template-columns: 1fr; }
}

/* Register Screen — 注册表单 */
#register-screen {
  position: fixed; inset: 0; z-index: 99998;
  background:
    radial-gradient(circle at 18% 16%, rgba(10,132,255,0.22), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(92,200,255,0.12), transparent 30%),
    linear-gradient(145deg, #020713 0%, #07111f 48%, #02060d 100%);
  display: none;
  padding: 0;
  overflow-y: auto;
}
#register-screen.visible { display: block; }
#register-screen.fade-out {
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#register-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 34%, black 0%, transparent 72%);
}
.reg-shell {
  max-width: 100%;
  position: relative;
  z-index: 1;
  width: min(1280px, calc(var(--site-layout-width, 100vw) - 56px));
  min-height: 100%;
  margin: 0 auto;
  padding: 92px 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 28px;
  align-items: start;
}
.reg-story,
.reg-panel {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,19,27,0.68);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.reg-story {
  border-radius: 30px;
  overflow: hidden;
}
.reg-story-copy {
  padding: 34px 36px 22px;
}
.reg-headline {
  margin: 12px 0 12px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: 0;
  color: rgba(255,255,255,0.96);
}
.reg-lede {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,0.66);
  font-size: 17px;
  line-height: 1.75;
}
.reg-showcase {
  position: relative;
  margin: 0 18px 18px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: #05080e;
}
.reg-showcase img,
.reg-feature-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.reg-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28));
}
.reg-shot-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  background: rgba(12,16,24,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.reg-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 20px;
}
.reg-feature-card {
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease, background 0.32s ease;
  will-change: transform;
  cursor: zoom-in;
}
.reg-feature-thumb {
  height: 116px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.reg-feature-card img {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), filter 0.48s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.reg-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(10,132,255,0.30);
  background: rgba(255,255,255,0.065);
  box-shadow: 0 18px 44px rgba(0,0,0,0.32), 0 0 0 1px rgba(10,132,255,0.08);
}
}
@media (hover: hover) and (pointer: fine) {
.reg-feature-card:hover img {
  transform: scale(1.12);
  filter: saturate(1.08) brightness(1.06);
}
}
.reg-feature-copy {
  padding: 13px 14px 15px;
}
.reg-feature-copy strong {
  display: block;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.35;
}
.reg-feature-copy span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.54);
  font-size: 12px;
  line-height: 1.55;
}
.reg-topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 22px;
}
.reg-topic-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}
@media (hover: hover) and (pointer: fine) {
.reg-topic-links a:hover {
  border-color: rgba(10,132,255,0.32);
  background: rgba(10,132,255,0.14);
  color: rgba(255,255,255,0.96);
}
}
.reg-panel {
  position: sticky;
  top: 92px;
  border-radius: 28px;
  padding: 34px;
}
#register-screen .reg-header {
  text-align: left;
  margin-bottom: 22px;
}
#register-screen .reg-title {
  font-size: 34px;
  letter-spacing: 0;
}
#register-screen .reg-subtitle {
  letter-spacing: 0.08em;
}
.reg-value-line {
  margin: -6px 0 24px;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.7;
}
#register-screen .reg-form {
  width: 100%;
  margin-bottom: 18px;
}
#register-screen .reg-hint {
  text-align: left;
  max-width: none;
  margin-bottom: 20px;
}
#register-screen .reg-submit-btn {
  width: 100%;
  padding: 17px 24px;
  opacity: 1;
  animation: none;
  letter-spacing: 0;
}
@media (max-width: 980px) {
  .reg-shell {
    width: min(var(--site-layout-width, 100vw) - 28px, 720px);
    grid-template-columns: 1fr;
    padding-top: 82px;
  }
  .reg-panel {
    position: relative;
    top: 0;
  }
  .reg-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  #register-screen .reg-back-btn {
    top: 18px;
    left: 16px;
  }
  .reg-shell {
    width: calc(var(--site-layout-width, 100vw) - 22px);
    padding-top: 74px;
  }
  .reg-story-copy,
  .reg-panel {
    padding: 24px;
  }
  .reg-headline {
    font-size: 34px;
  }
  .reg-feature-grid {
    grid-template-columns: 1fr;
  }
  .reg-feature-thumb {
    height: 150px;
  }
}
.reg-back-btn {
  position: fixed; top: 56px; left: 32px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.reg-back-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
}
.reg-back-btn:active { transform: scale(0.96); }
.reg-back-btn svg {
  width: 18px; height: 18px;
  stroke: rgba(255,255,255,0.7); fill: none;
  stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.reg-back-btn:hover svg { stroke: rgba(255,255,255,0.95); }
}
.reg-back-btn span {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.reg-back-btn:hover span { color: rgba(255,255,255,0.95); }
}

.reg-header {
  position: relative; z-index: 1;
  text-align: center; margin-bottom: 44px;
}
.reg-title {
  font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2;
  color: transparent;
  background: linear-gradient(135deg, #ffffff 0%, #d0e2ff 35%, #0A84FF 75%, #0055cc 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(10,132,255,0.3));
}
.reg-subtitle {
  font-size: 16px; font-weight: 400; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.35);
  margin-top: 8px;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}

.reg-form {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(420px, 88vw);
  margin-bottom: 28px;
}
.reg-input-wrap {
  position: relative;
  width: 100%;
}
.reg-input-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.reg-input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  color: #fff;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  box-sizing: border-box;
}
.reg-input::placeholder {
  color: rgba(255,255,255,0.22);
}
.reg-input:focus {
  border-color: rgba(10,132,255,0.6);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.12), 0 4px 16px rgba(10,132,255,0.08);
  background: rgba(10,132,255,0.05);
}
.reg-field-limit-hint,
.reg-password-limit-hint {
  margin: 7px 0 0;
  color: rgba(255,255,255,0.66);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.reg-hint {
  position: relative; z-index: 1;
  text-align: center;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 13px; font-weight: 400;
  color: rgba(255,149,10,0.6);
  line-height: 1.6;
  max-width: 360px;
  margin-bottom: 24px;
}
.reg-error-hint {
  position: relative; z-index: 1;
  text-align: center;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 13px; font-weight: 500;
  color: #FF453A;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.25s ease;
  margin-top: -4px;
  margin-bottom: 4px;
}
.reg-error-hint.visible {
  opacity: 1;
}
.reg-error-hint.success { color: #30D158; }
.reg-submit-btn {
  position: relative; z-index: 1;
  padding: 17px 80px;
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 600; letter-spacing: 0.08em;
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  border: none;
  opacity: 0;
  animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
  color: #fff;
  background: linear-gradient(135deg, #0A84FF 0%, #0066cc 100%);
  border: 1px solid rgba(10,132,255,0.4);
  box-shadow: 0 4px 20px rgba(10,132,255,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
@media (hover: hover) and (pointer: fine) {
.reg-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(10,132,255,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
}
.reg-submit-btn:active { transform: translateY(0); }
.reg-submit-btn.disabled {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.25);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Login Screen */
#login-screen,
#recover-screen {
  position: fixed; inset: 0; z-index: 99998;
  background: var(--site-bg);
  color: var(--site-text);
  display: none;
  align-items: safe center;
  justify-content: safe center;
  padding: max(72px, calc(env(safe-area-inset-top) + 56px)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
}
#login-screen::after,
#recover-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 0 24%, rgba(125,212,255,0.06) 24.1%, transparent 24.45% 66%, rgba(255,255,255,0.035) 66.1%, transparent 66.45%);
}
#login-screen.visible,
#recover-screen.visible { display: flex; }
#login-screen.fade-out,
#recover-screen.fade-out {
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.login-panel {
  position: relative;
  z-index: 1;
  width: min(560px, calc(var(--site-layout-width, 100vw) - 48px));
  padding: 46px;
  border-radius: 30px;
  border: 1px solid var(--site-border);
  background: var(--material-panel,var(--site-surface));
  box-shadow: var(--site-shadow);
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
  box-sizing: border-box;
}
#login-screen .reg-header,
#recover-screen .reg-header {
  text-align: left;
  margin-bottom: 30px;
}
#login-screen .reg-title,
#recover-screen .reg-title {
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
}
#login-screen .reg-subtitle {
  margin-top: 12px;
  letter-spacing: 0.10em;
}
#login-screen .reg-form,
#recover-screen .reg-form {
  width: 100%;
  gap: 20px;
  margin-bottom: 20px;
}
#login-screen .reg-input-label,
#recover-screen .reg-input-label {
  font-size: 14px;
  margin-bottom: 10px;
}
#login-screen .reg-input,
#recover-screen .reg-input {
  min-height: 64px;
  padding: 18px 22px;
  font-size: 18px;
}
#login-screen .reg-error-hint,
#recover-screen .reg-error-hint {
  min-height: 22px;
  margin: -2px 0 0;
}
#login-screen .reg-submit-btn,
#recover-screen .reg-submit-btn {
  width: 100%;
  padding: 19px 24px;
  opacity: 1;
  animation: none;
  letter-spacing: 0;
}


/* Account recovery screen — 找回帐号/密码 (shares the login panel) */
#recover-screen .reg-title {
  font-size: clamp(38px, 4.4vw, 58px);
  background: none;
  color: var(--site-text);
  -webkit-text-fill-color: currentColor;
  filter: none;
}
#recover-screen .reg-input-label { color: var(--site-muted); }
#recover-screen .reg-input {
  background: var(--site-surface);
  color: var(--site-text);
  border-color: var(--site-border);
}
#recover-screen .reg-input::placeholder { color: var(--site-muted); opacity: 1; }
#recover-screen .reg-input:focus { border-color: var(--site-blue); }
#recover-screen .reg-back-btn { color: var(--site-text); }
#recover-screen .reg-back-btn :is(span,svg) { color: inherit; stroke: currentColor; }
#recover-screen .reg-error-hint { color: var(--site-error); }
.recover-lede {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--site-muted);
  text-transform: none;
}
.recover-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--site-fill);
  border: 1px solid var(--site-border);
  box-sizing: border-box;
}
.recover-mode-btn {
  min-height: 48px;
  border: none;
  border-radius: calc(var(--radius-lg) - 6px);
  background: transparent;
  color: var(--site-muted);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
.recover-mode-btn:hover { color: var(--site-text); }
}
.recover-mode-btn.active {
  background: var(--site-primary);
  color: #fff;
  box-shadow: none;
}
.recover-mode-btn:focus-visible { outline: 2px solid var(--site-blue); outline-offset: 2px; }

/* Invite Code Screen — 邀请码输入界面 */
#invite-code-screen {
  position: fixed; inset: 0; z-index: 99999;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(145deg, #020814 0%, #07101e 48%, #02050b 100%);
  background-size: 48px 48px, 48px 48px, auto;
  display: none;
  align-items: safe center;
  justify-content: safe center;
  padding: max(72px, calc(env(safe-area-inset-top) + 56px)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
}
#invite-code-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 0 24%, rgba(125,212,255,0.06) 24.1%, transparent 24.45% 66%, rgba(255,255,255,0.035) 66.1%, transparent 66.45%);
}
.invite-back-btn {
  position: fixed; top: 56px; left: 32px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.invite-back-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
}
.invite-back-btn:active {
  transform: scale(0.96);
}
.invite-back-btn svg {
  width: 18px; height: 18px;
  stroke: rgba(255,255,255,0.7);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.invite-back-btn:hover svg {
  stroke: rgba(255,255,255,0.95);
}
}
.invite-back-btn span {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.invite-back-btn:hover span {
  color: rgba(255,255,255,0.95);
}
}
#invite-code-screen.visible { display: flex; }
#invite-code-screen.fade-out {
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.invite-panel {
  position: relative;
  z-index: 1;
  width: min(760px, calc(var(--site-layout-width, 100vw) - 48px));
  padding: 52px 48px 46px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,19,27,0.72);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-sizing: border-box;
}
.invite-header {
  position: relative; z-index: 1;
  text-align: center; margin-bottom: 34px;
}
.invite-title {
  font-size: clamp(48px, 5.8vw, 74px); font-weight: 760; letter-spacing: 0;
  line-height: 1.04;
  color: transparent;
  background: linear-gradient(135deg, #ffffff 0%, #d0e2ff 35%, #FF9F0A 70%, #cc7a00 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(255,149,10,0.25));
}
.invite-code-container {
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 34px;
}
.invite-digit-box {
  width: 82px; height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  font-size: 44px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: #fff;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  caret-color: transparent;
  user-select: none;
}
/* 当前输入框内的闪烁竖线光标 */
.invite-digit-box.cursor-active::after {
  content: '';
  display: inline-block;
  width: 3px; height: 46px;
  background: #0A84FF;
  border-radius: 1px;
  animation: inviteCursorBlink 1.1s step-end infinite;
  vertical-align: middle;
}
@keyframes inviteCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.invite-digit-box:focus {
  border-color: rgba(255,149,10,0.6);
  box-shadow: 0 0 0 3px rgba(255,149,10,0.15), 0 4px 16px rgba(255,149,10,0.1);
  background: rgba(255,149,10,0.06);
}
.invite-digit-box.filled {
  border-color: rgba(255,149,10,0.4);
  background: rgba(255,149,10,0.08);
}
.invite-digit-box.error {
  border-color: rgba(255,69,58,0.6);
  box-shadow: 0 0 0 3px rgba(255,69,58,0.12);
  animation: inviteShake 0.45s ease-in-out;
}
@keyframes inviteShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
/* 隐藏原生输入框 */
#invite-hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.invite-continue-btn {
  position: relative; z-index: 1;
  width: min(360px, 100%);
  display: block;
  margin: 0 auto;
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 820; letter-spacing: 0.08em;
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
  border: none;
  opacity: 0;
  animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}
.invite-continue-btn.disabled {
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: not-allowed;
  pointer-events: none;
}
.invite-continue-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #31A8FF 0%, #0A84FF 46%, #0066CC 100%);
  border: 1px solid rgba(125,212,255,0.66);
  box-shadow:
    0 12px 34px rgba(10,132,255,0.42),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    inset 0 1px 0 rgba(255,255,255,0.28);
  cursor: pointer;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
.invite-continue-btn.active:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #64D2FF 0%, #0A84FF 48%, #007AFF 100%);
  border-color: rgba(167,226,255,0.82);
  box-shadow:
    0 16px 44px rgba(10,132,255,0.56),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    inset 0 1px 0 rgba(255,255,255,0.34);
}
}
.invite-continue-btn.active:focus-visible {
  box-shadow:
    0 14px 38px rgba(10,132,255,0.50),
    0 0 0 4px rgba(100,210,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.invite-continue-btn.active:active {
  transform: translateY(1px) scale(0.98);
  background: linear-gradient(135deg, #007AFF 0%, #0066CC 100%);
  box-shadow:
    0 6px 18px rgba(10,132,255,0.34),
    inset 0 3px 10px rgba(0,42,94,0.36),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
@media (max-width: 720px) {
  #login-screen,
  #recover-screen,
  #invite-code-screen {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 88px 18px 24px;
  }
  #login-screen .reg-back-btn,
  #recover-screen .reg-back-btn,
  #invite-code-screen .invite-back-btn {
    top: 20px;
    left: 18px;
  }
  .login-panel,
  .invite-panel {
    width: 100%;
    padding: 30px 24px 28px;
    border-radius: 24px;
  }
  #login-screen .reg-title,
  #recover-screen .reg-title,
  .invite-title {
    font-size: clamp(42px, 13vw, 58px);
  }
  #recover-screen .reg-title { font-size: clamp(30px, 9vw, 44px); }
  .invite-code-container {
    gap: 8px;
  }
  .invite-digit-box {
    width: calc((var(--site-layout-width, 100vw) - 116px) / 6);
    max-width: 62px;
    min-width: 42px;
    height: 74px;
    font-size: 34px;
    border-radius: 14px;
  }
  .invite-digit-box.cursor-active::after {
    height: 36px;
  }
  .invite-continue-btn {
    width: 100%;
  }
}

#city-select-screen {
  position:fixed; inset:0; z-index:99998; display:none;
  background:var(--site-bg); color:var(--site-text); overflow-y:auto;
  overscroll-behavior:contain; align-items:flex-start; justify-content:center;
}
#city-select-screen.visible { display:flex; }
#city-select-screen.fade-out { opacity:0; pointer-events:none; transition:opacity 200ms var(--ui-ease-out,cubic-bezier(.23,1,.32,1)); }
#city-select-screen.loading { align-items:center; }
.city-picker-content { width:100%; }
#city-select-error { max-width:1064px; margin:24px auto 0; padding:0 20px; color:var(--site-text); }
.cityrail-brand-line {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.34);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}
.auth-header .cityrail-brand-line {
  margin-top: 14px;
  color: rgba(255,255,255,0.30);
}
.city-loading-panel {
  position: relative;
  z-index: 2;
  display: none;
  width: min(520px, calc(var(--site-layout-width, 100vw) - 44px));
  padding: 30px;
  border-radius: 26px;
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  backdrop-filter: blur(34px) saturate(175%);
  -webkit-backdrop-filter: blur(34px) saturate(175%);
  box-shadow: var(--site-shadow);
}
#city-select-screen.loading .city-picker-content { display:none; }
#city-select-screen.loading .city-loading-panel { display: block; }
.city-loading-kicker {
  color: var(--site-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.city-loading-title {
  margin-top: 10px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0;
}
.city-loading-subtitle {
  margin-top: 8px;
  color: var(--site-muted);
  font-size: 13px;
}
.city-progress-track {
  height: 8px;
  margin-top: 24px;
  border-radius: 999px;
  background: var(--site-fill);
  overflow: hidden;
}
.city-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0A84FF, #7dd4ff);
  box-shadow: 0 0 22px rgba(10,132,255,0.48);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms linear;
}
#city-select-screen.loading .city-progress-fill { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .city-progress-fill { transition: none; }
  #city-select-screen.fade-out { transition: opacity 140ms linear; }
}
.city-loading-steps {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.city-loading-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--site-muted);
  font-size: 13px;
}
.city-loading-step.active { color: var(--site-text); }
.city-loading-step.done { color: rgba(48,209,88,0.88); }
.city-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
/* Payment Screen */
#payment-screen {
  position: fixed; inset: 0; z-index: 99998;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(145deg, #020814 0%, #07101e 48%, #02050b 100%);
  background-size: 48px 48px, 48px 48px, auto;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
}
#payment-screen::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 0 24%, rgba(125,212,255,0.06) 24.1%, transparent 24.45% 66%, rgba(255,255,255,0.035) 66.1%, transparent 66.45%);
}
#payment-screen.visible { display: flex; }
#payment-screen.fade-out {
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.pay-shell {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px;
  align-items: center;
}
.pay-header {
  text-align: left;
}
.pay-title {
  max-width: 560px;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.02;
  color: rgba(255,255,255,0.96);
}
.pay-subtitle {
  max-width: 520px;
  margin-top: 22px;
  color: rgba(214,229,249,0.62);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
.pay-account-help {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--site-border);
  border-left: 4px solid var(--site-blue);
  border-radius: 14px;
  background: var(--site-fill);
  color: var(--site-text);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
  user-select: text;
}
.pay-account-help strong {
  font-weight: 750;
}
.pay-panel {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,19,27,0.68);
  box-shadow: 0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.pay-amount {
  margin: 0 0 22px;
  color: #fff;
  font-size: 56px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}
.pay-amount span {
  color: rgba(255,255,255,0.42);
  font-size: 24px;
  font-weight: 650;
}
.pay-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 13px 15px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.pay-option:hover {
  background: rgba(10,132,255,0.14);
  border-color: rgba(125,212,255,0.26);
  transform: translateY(-2px);
}
}
.pay-option:active { transform: scale(0.98); }
.pay-option-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pay-option-icon.wechat { background: rgba(7,193,96,0.12); }
.pay-option-icon.alipay { background: rgba(22,119,255,0.12); }
.pay-option-info { flex: 1; }
.pay-option-name {
  font-size: 16px; font-weight: 750; color: rgba(255,255,255,0.94);
}
.pay-option-desc {
  font-size: 12px; font-weight: 650;
  color: rgba(214,229,249,0.46);
  margin-top: 3px;
}
.pay-option-arrow {
  color: rgba(255,255,255,0.22);
  font-size: 20px;
}
.pay-contact {
  margin-top: 18px;
  color: rgba(214,229,249,0.46);
  font-size: 13px;
  line-height: 1.7;
}
.pay-contact a {
  color: rgba(125,212,255,0.82);
  text-decoration: none;
}
@media (max-width: 820px) {
  #payment-screen { align-items: flex-start; justify-content: flex-start; }
  .pay-shell {
    width: min(100%, 560px);
    grid-template-columns: 1fr;
    padding-top: 70px;
  }
  .pay-title { font-size: clamp(42px, 13vw, 70px); }
  .pay-subtitle { font-size: 16px; }
  .pay-panel { padding: 22px; }
}
/* Typing cursor blink */
.typing-cursor::after {
  content: '▌';
  animation: cursorBlink 1s step-end infinite;
  color: rgba(10,132,255,0.7);
}
@keyframes cursorBlink { 0%,100% {opacity:1;} 50% {opacity:0;} }

/* ═══ 控制中心 OCC Dashboard ═══ */
#ctrl-center-overlay {
  /* Fixed edges own the fullscreen extent; CSS zoom must not impose a second viewport size. */
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0a0c;
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  color: #e8e8ed;
  overflow: hidden;
}
#ctrl-center-overlay.hidden { display: none; }
#ctrl-center-overlay:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  pointer-events:auto!important;
}
#ctrl-center-overlay #ctrl-topbar{
  flex:0 0 auto!important;
  min-width:0!important;
}
#ctrl-center-overlay #ctrl-body{flex:1 1 auto!important;min-height:0!important;min-width:0!important;overflow:hidden!important;pointer-events:auto!important;}
#ctrl-center-overlay #ctrl-nav{
  flex:0 0 auto!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}
#ctrl-center-overlay #ctrl-main{
  flex:1 1 auto!important;
  min-height:0!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  align-items:flex-start!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable!important;
  pointer-events:auto!important;
}
#ctrl-center-overlay #ctrl-content-grid{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:max-content!important;
  overflow:visible!important;
  align-content:start!important;
  align-self:flex-start!important;
  padding-bottom:max(36px,env(safe-area-inset-bottom))!important;
}
#ctrl-center-overlay #ctrl-alerts{
  flex:0 0 260px!important;
  min-height:0!important;
  max-height:calc(var(--ui-layout-height,100dvh) - 96px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
#ctrl-center-overlay .ctrl-card{min-width:0!important;max-width:100%!important;}
#ctrl-center-overlay .ctrl-card.full,
#ctrl-center-overlay .cr200-depot-card,
#ctrl-center-overlay .cr210-fare-card,
#ctrl-center-overlay .cr-daily-card,
#ctrl-center-overlay .cr177-od-card,
#ctrl-center-overlay .cr207-station-data-card{
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#ctrl-center-overlay :is(.cr177-side,.cr207-table-wrap,.cr-daily-list,.ctrl-line-stats-scroll-wrap){
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}
#ctrl-center-overlay #cct-line-stats-scroll-wrap,
#ctrl-center-overlay .ctrl-line-stats-scroll-wrap{
  max-height:min(46vh,420px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.035)!important;
}
#ctrl-center-overlay .ctrl-line-stats-scroll-wrap table.ctrl-table{min-width:860px!important;width:100%!important;}
#ctrl-center-overlay .ctrl-line-stats-scroll-wrap thead th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:rgba(20,22,30,.96)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
#ctrl-center-overlay #cct-intensity-bars{max-height:none!important;overflow:visible!important;}
#ctrl-center-overlay #ctrl-main::-webkit-scrollbar,
#ctrl-center-overlay #ctrl-topbar::-webkit-scrollbar,
#ctrl-center-overlay #ctrl-nav::-webkit-scrollbar,
#ctrl-center-overlay #ctrl-alerts::-webkit-scrollbar,
#ctrl-center-overlay .ctrl-line-stats-scroll-wrap::-webkit-scrollbar{width:8px!important;height:8px!important;}
#ctrl-center-overlay #ctrl-main::-webkit-scrollbar-thumb,
#ctrl-center-overlay #ctrl-topbar::-webkit-scrollbar-thumb,
#ctrl-center-overlay #ctrl-nav::-webkit-scrollbar-thumb,
#ctrl-center-overlay #ctrl-alerts::-webkit-scrollbar-thumb,
#ctrl-center-overlay .ctrl-line-stats-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)!important;border-radius:999px!important;}
#ctrl-center-overlay:not([data-active-tab="depots"]) .cr200-depot-card{display:none!important;}
#ctrl-center-overlay[data-active-tab="depots"] #ctrl-content-grid>.ctrl-card:not(.cr200-depot-card){display:none!important;}
#ctrl-center-overlay[data-active-tab="depots"] .cr200-depot-card{display:block!important;grid-column:1 / -1;}
#ctrl-center-overlay:not([data-active-tab="fare-policy"]) .cr210-fare-card{display:none!important;}
#ctrl-center-overlay[data-active-tab="fare-policy"] #ctrl-content-grid>.ctrl-card:not(.cr210-fare-card){display:none!important;}
#ctrl-center-overlay[data-active-tab="fare-policy"] .cr210-fare-card{display:block!important;grid-column:1 / -1;}
#ctrl-center-overlay:not([data-active-tab="daily-report"]) .cr-daily-card{display:none!important;}
#ctrl-center-overlay[data-active-tab="daily-report"] #ctrl-content-grid>.ctrl-card:not(.cr-daily-card){display:none!important;}
#ctrl-center-overlay[data-active-tab="daily-report"] .cr-daily-card{display:block!important;grid-column:1 / -1;}
.cr200-depot-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.cr200-depot-summary>div {
  padding: 12px 0;
}
.cr200-depot-summary span{display:block;font-size:11px;color:rgba(255,255,255,.44);margin-bottom:5px;}
.cr200-depot-summary b{display:block;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0;}
.cr200-depot-list{display:grid;gap:10px;}
.cr200-depot-row {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(72px,.55fr));
  gap:10px;
  align-items:center;
  min-height:58px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
}
.cr200-depot-row.shortage{border-color:rgba(255,69,58,.35);background:rgba(255,69,58,.075);}
.cr200-depot-name{min-width:0;font-size:14px;font-weight:850;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr200-depot-lines{margin-top:4px;font-size:11px;color:rgba(255,255,255,.46);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr200-depot-stat{text-align:right;font-variant-numeric:tabular-nums;}
.cr200-depot-stat span{display:block;font-size:10px;color:rgba(255,255,255,.42);}
.cr200-depot-stat b{display:block;margin-top:3px;font-size:15px;color:#fff;}
.cr200-depot-alert{margin-top:12px;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,69,58,.30);background:rgba(255,69,58,.08);color:#ffb4ad;font-size:12px;font-weight:760;}
#cct-line-stats-table.cityrail-control-line-table{width:100%;min-width:860px;table-layout:fixed;border-collapse:collapse;}
#cct-line-stats-table.cityrail-control-line-table th,
#cct-line-stats-table.cityrail-control-line-table td{box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
#cct-line-stats-table.cityrail-control-line-table [data-col="color"]{text-align:center;}
#cct-line-stats-table.cityrail-control-line-table [data-col="speed"],
#cct-line-stats-table.cityrail-control-line-table [data-col="length"],
#cct-line-stats-table.cityrail-control-line-table [data-col="trains"],
#cct-line-stats-table.cityrail-control-line-table [data-col="ridership"],
#cct-line-stats-table.cityrail-control-line-table [data-col="crowding"]{text-align:right!important;font-variant-numeric:tabular-nums;}
#cct-line-stats-table.cityrail-control-line-table th[data-col="crowding"],
#cct-line-stats-table.cityrail-control-line-table td[data-col="crowding"]{width:88px;min-width:88px;max-width:88px;padding-right:14px!important;}
#cct-line-stats-table.cityrail-control-line-table th[data-col="line"],
#cct-line-stats-table.cityrail-control-line-table td[data-col="line"]{text-align:left;}
#ctrl-center-overlay[data-active-tab="fare-policy"] #ctrl-main{overflow-y:auto!important;overflow-x:hidden!important;}
#ctrl-center-overlay[data-active-tab="fare-policy"] #ctrl-content-grid{min-height:max-content!important;align-content:start!important;overflow:visible!important;padding-bottom:max(36px,env(safe-area-inset-bottom))!important;}
.cr210-fare-card{box-sizing:border-box;overflow:visible!important;min-height:0;}
#ctrl-center-overlay[data-active-tab="fare-policy"] .cr210-fare-card{height:auto!important;max-height:none!important;overflow:visible!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important;}
#ctrl-center-overlay[data-active-tab="fare-policy"] .cr210-fare-card::-webkit-scrollbar{width:8px;}
#ctrl-center-overlay[data-active-tab="fare-policy"] .cr210-fare-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px;}
.cr210-fare-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;}
.cr210-fare-title{font-size:20px;font-weight:900;letter-spacing:0;color:#fff;}
.cr210-fare-badge{min-width:96px;text-align:center;padding:7px 10px;border-radius:999px;background:rgba(48,209,88,.14);color:#30D158;font-size:12px;font-weight:850;font-variant-numeric:tabular-nums;}
.cr210-segment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);margin-bottom:16px;}
.cr210-segment button{height:34px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-selection);color:var(--ui-text);font-weight:800;cursor:pointer;}
@media (hover: hover) and (pointer: fine) {
.cr210-segment button:hover{background:var(--ui-card);}
}
.cr210-segment button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff;box-shadow:none;}
.cr210-segment button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;}
.cr210-fare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.cr210-field {
  padding:12px 0;
  border:0;
}
.cr210-field label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;color:rgba(255,255,255,.48);}
.cr210-field label b{font-size:12px;color:#fff;font-weight:850;font-variant-numeric:tabular-nums;}
.cr210-field input{width:100%;height:34px;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.18);color:#fff;padding:0 10px;font-size:14px;font-weight:760;font-variant-numeric:tabular-nums;outline:none;}
.cr210-field input:focus{border-color:rgba(10,132,255,.78);box-shadow:0 0 0 3px rgba(10,132,255,.16);}
.cr210-field input:disabled{cursor:not-allowed;opacity:.52;background:rgba(255,255,255,.035);color:rgba(255,255,255,.48);}
.cr210-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;}
.cr210-sample {
  padding:12px 0;
  border:0;
}
.cr210-sample span{display:block;font-size:11px;color:rgba(255,255,255,.44);}
.cr210-sample b{display:block;margin-top:5px;font-size:18px;color:#fff;font-variant-numeric:tabular-nums;}
.cr210-fare-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.cr210-fare-actions button{height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);font-weight:800;padding:0 14px;cursor:pointer;}
@media (hover: hover) and (pointer: fine) {
.cr210-fare-actions button:hover{background:rgba(255,255,255,.10);}
}
.cr210-line-section{margin-top:16px;padding-top:14px;padding-bottom:2px;border-top:1px solid rgba(255,255,255,.08);}
.cr210-line-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px;}
.cr210-line-head b{font-size:14px;color:#fff;}
.cr210-line-head span{font-size:12px;color:rgba(255,255,255,.44);}
.cr210-line-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(104px,148px);grid-template-rows:repeat(2,32px);gap:8px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px 2px;scrollbar-gutter:stable;overscroll-behavior-x:contain;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
.cr210-line-buttons[data-control-scroll-surface="fare-line-selector"]{contain:layout paint;scroll-snap-type:x proximity;}
.cr210-line-buttons[data-control-scroll-surface="fare-line-selector"] .cr210-line-btn{scroll-snap-align:start;}
.cr210-line-buttons .ctrl-empty-row{grid-row:1 / -1;align-self:center;min-width:180px;}
.cr210-line-buttons::-webkit-scrollbar{height:8px;}
.cr210-line-buttons::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px;}
.cr210-line-btn{height:32px;min-width:0;width:100%;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18);border-left:4px solid var(--line-color,#0A84FF);border-radius:999px;padding:0 10px 0 8px;background:rgba(255,255,255,.065);color:#fff;font-weight:850;font-size:12px;cursor:pointer;overflow:hidden;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);}
.cr210-line-btn span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr210-line-swatch{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--line-color,#0A84FF);box-shadow:0 0 0 2px rgba(255,255,255,.16);}
.cr210-line-btn.on{border-color:var(--line-color,#0A84FF);box-shadow:0 0 0 3px color-mix(in srgb,var(--line-color,#0A84FF) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.18);}
.cr210-line-editor{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:10px;align-items:end;margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
.cr210-line-editor-name{min-width:0;display:flex;align-items:center;gap:10px;}
.cr210-line-color{width:14px;height:14px;border-radius:999px;flex:0 0 auto;background:var(--line-color,#0A84FF);box-shadow:0 0 0 3px rgba(255,255,255,.10);}
.cr210-line-editor-name>div{min-width:0;}
.cr210-line-editor-name b{display:block;color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr210-line-editor-name span{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.44);}
.cr210-line-editor label{display:block;font-size:11px;color:rgba(255,255,255,.46);}
.cr210-line-editor input{margin-top:6px;width:100%;height:34px;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.18);color:#fff;padding:0 10px;font-size:14px;font-weight:760;font-variant-numeric:tabular-nums;outline:none;}
.cr210-line-editor input:focus{border-color:rgba(10,132,255,.78);box-shadow:0 0 0 3px rgba(10,132,255,.16);}
.cr210-line-editor button{height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);font-weight:800;padding:0 14px;cursor:pointer;}
html.cityrail-light-ui .cr210-fare-title{color:#111827;}
html.cityrail-light-ui .cr210-field label,html.cityrail-light-ui .cr210-sample span,html.cityrail-light-ui .cr210-line-head span,html.cityrail-light-ui .cr210-line-editor-name span,html.cityrail-light-ui .cr210-line-editor label{color:rgba(17,24,39,.55);}
html.cityrail-light-ui .cr210-line-head b,html.cityrail-light-ui .cr210-line-editor-name b{color:#111827;}
html.cityrail-light-ui .cr210-line-section{border-top-color:rgba(15,23,42,.10);}
html.cityrail-light-ui .cr210-segment,html.cityrail-light-ui .cr210-line-editor{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.10);}
html.cityrail-light-ui .cr210-field label b,html.cityrail-light-ui .cr210-sample b{color:#111827;}
html.cityrail-light-ui .cr210-field input,html.cityrail-light-ui .cr210-line-editor input{background:rgba(248,250,252,.92);border-color:rgba(15,23,42,.12);color:#111827;}
html.cityrail-light-ui .cr210-field input:disabled{background:rgba(241,245,249,.72);color:rgba(17,24,39,.42);}
html.cityrail-light-ui .cr210-fare-actions button,html.cityrail-light-ui .cr210-line-editor button{background:rgba(248,250,252,.86);border-color:rgba(15,23,42,.12);color:#111827;}
html.cityrail-light-ui .cr210-line-btn{background:rgba(248,250,252,.88);border-top-color:rgba(15,23,42,.12);border-right-color:rgba(15,23,42,.12);border-bottom-color:rgba(15,23,42,.12);color:#111827;}
html.cityrail-light-ui .cr210-line-swatch{box-shadow:0 0 0 2px rgba(15,23,42,.10);}
html.cityrail-apple-spatial-ui .cr210-line-btn{background:var(--cr416-fill)!important;border-top-color:var(--cr416-border)!important;border-right-color:var(--cr416-border)!important;border-bottom-color:var(--cr416-border)!important;color:var(--cr416-text)!important;}
html.cityrail-apple-spatial-ui .cr210-line-btn.on{border-color:var(--line-color,#0A84FF)!important;}
.cr-daily-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.cr-daily-title{font-size:20px;font-weight:900;color:#fff;letter-spacing:0;}
.cr-daily-badge {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-focus);
  background: var(--ui-selection);
  color: var(--ui-focus);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.cr-daily-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.cr-daily-kpi {
  min-width: 0;
  padding: 12px 0;
}
.cr-daily-kpi span{display:block;font-size:11px;color:rgba(255,255,255,.46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-daily-kpi b{display:block;margin-top:5px;font-size:20px;line-height:1.1;color:#fff;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-daily-list{display:grid;max-height:280px;overflow:auto;scrollbar-gutter:stable;}
.cr-daily-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:rgba(255,255,255,.68);}
.cr-daily-row:last-child{border-bottom:0;}
.cr-daily-row strong{display:block;color:rgba(255,255,255,.92);font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-daily-note{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;line-height:1.5;color:rgba(255,255,255,.70);}
html.cityrail-light-ui .cr-daily-title,html.cityrail-light-ui .cr-daily-kpi b,html.cityrail-light-ui .cr-daily-row strong{color:#111827;}
html.cityrail-light-ui .cr-daily-kpi span,html.cityrail-light-ui .cr-daily-row,html.cityrail-light-ui .cr-daily-note{color:rgba(17,24,39,.62);}
@media(max-width:900px){
  #ctrl-center-overlay #ctrl-main{padding-bottom:max(18px,env(safe-area-inset-bottom))!important;}
  #ctrl-center-overlay #ctrl-alerts{display:none!important;}
  .cr200-depot-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr200-depot-row{grid-template-columns:1fr 1fr 1fr;}
  .cr200-depot-row .cr200-depot-namebox{grid-column:1 / -1;}
  .cr200-depot-stat{text-align:left;}
  .cr210-fare-grid{grid-template-columns:1fr 1fr;}
  .cr210-samples{grid-template-columns:1fr 1fr;}
  .cr210-segment{grid-template-columns:1fr 1fr;}
  .cr210-fare-head{display:block;}
  .cr210-fare-badge{display:inline-block;margin-top:10px;}
  #ctrl-center-overlay[data-active-tab="fare-policy"] .cr210-fare-card{padding-bottom:max(24px,env(safe-area-inset-bottom))!important;}
  .cr210-line-editor{grid-template-columns:1fr;}
  .cr210-line-buttons{grid-auto-columns:minmax(92px,128px);grid-template-rows:repeat(2,32px);}
  .cr-daily-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr-daily-head{display:block;}
  .cr-daily-badge{display:inline-block;margin-top:10px;}
}

/* 顶部状态栏 */
#ctrl-topbar {
  height: 52px; min-height: 52px;
  display: flex; align-items: center;
  background: #121214;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 20px;
  gap: 0;
}
.ctrl-top-logo { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: #0A84FF; margin-right: 24px; }
.ctrl-top-logo small { font-weight: 400; font-size: 10px; color: rgba(255,255,255,0.3); margin-left: 6px; }
.ctrl-top-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 32px;
  border-right: 1px solid rgba(255,255,255,0.05);
  font-size: 11px; white-space: nowrap;
}
.ctrl-top-stat:last-child { border-right: none; }
.ctrl-top-stat .ts-label { color: rgba(255,255,255,0.35); }
.ctrl-top-stat .ts-val { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctrl-top-stat .ts-val.warn { color: #FF9F0A; }
.ctrl-top-stat .ts-val.err { color: #FF453A; }
.ctrl-top-stat .ts-val.ok { color: #30D158; }
#ctrl-close-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  border: none; color: rgba(255,255,255,0.5);
  padding: 6px 14px; border-radius: 6px;
  cursor: pointer; font-size: 12px;
  transition: 0.15s;
}
@media (hover: hover) and (pointer: fine) {
#ctrl-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
}

/* 主体布局 */

/* 顶部状态栏 */
#ctrl-topbar {
  height: 52px; min-height: 52px;
  display: flex; align-items: center;
  background: #121214;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 20px;
  gap: 0;
}
.ctrl-top-logo { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: #0A84FF; margin-right: 24px; }
.ctrl-top-logo small { font-weight: 400; font-size: 10px; color: rgba(255,255,255,0.3); margin-left: 6px; }
.ctrl-top-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 32px;
  border-right: 1px solid rgba(255,255,255,0.05);
  font-size: 11px; white-space: nowrap;
}
.ctrl-top-stat:last-child { border-right: none; }
.ctrl-top-stat .ts-label { color: rgba(255,255,255,0.35); }
.ctrl-top-stat .ts-val { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctrl-top-stat .ts-val.warn { color: #FF9F0A; }
.ctrl-top-stat .ts-val.err { color: #FF453A; }
.ctrl-top-stat .ts-val.ok { color: #30D158; }
#ctrl-close-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  border: none; color: rgba(255,255,255,0.5);
  padding: 6px 14px; border-radius: 6px;
  cursor: pointer; font-size: 12px;
  transition: 0.15s;
}
@media (hover: hover) and (pointer: fine) {
#ctrl-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
}

/* 主体布局 */
#ctrl-body { flex: 1; display: flex; min-height: 0; }

/* 左侧导航 */
#ctrl-nav {
  width: 56px; min-width: 56px;
  background: #0d0d10;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 2px;
}
.ctrl-nav-item {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 8px;
  color: rgba(255,255,255,0.3);
  border: none; background: transparent;
  flex-direction: column; gap: 2px;
  transition: 0.15s;
}
.ctrl-nav-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) {
.ctrl-nav-item:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); }
}
.ctrl-nav-item.active { color: #0A84FF; background: rgba(10,132,255,0.1); }

/* 中间内容区 */
#ctrl-main {
  flex: 1; display: flex; min-width: 0;
  padding: 16px; gap: 16px;
  overflow-y: auto;
}
#ctrl-main::-webkit-scrollbar { width: 4px; }
#ctrl-main::-webkit-scrollbar-track { background: transparent; }
#ctrl-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* 左侧主内容卡片网格 */
#ctrl-content-grid {
  flex: 1; display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 12px;
  align-content: start;
}
.ctrl-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.ctrl-card.full { grid-column: 1 / -1; }
.ctrl-card.half { grid-column: span 1; }
.ctrl-card-title {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* 大型数字卡片 */
.ctrl-big-num { font-size: 32px; font-weight: 700; color: #fff; line-height: 1.1; }
.ctrl-big-num small { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.3); margin-left: 4px; }
.ctrl-big-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 4px; }

/* 线路统计行 */
.ctrl-line-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 11px;
}
.ctrl-line-row:last-child { border-bottom: none; }
.ctrl-line-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ctrl-line-name { width: 60px; color: rgba(255,255,255,0.8); }
.ctrl-line-row .cl-val { flex: 1; text-align: right; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }

/* 运营总览专属侧栏；栏目状态由控制中心 owner 同步。 */
#ctrl-center-overlay:not([data-active-tab="overview"]) #ctrl-alerts {
  display: none;
}
#ctrl-alerts {
  width: 260px; min-width: 260px;
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 100%;
  padding-right: 4px;
}
#ctrl-alerts::-webkit-scrollbar { width: 3px; }
#ctrl-alerts::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.ctrl-alert-section-title {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.ctrl-alert-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.4;
}
.ctrl-alert-item .al-time { color: rgba(255,255,255,0.25); font-size: 10px; }
.ctrl-alert-item .al-msg { color: rgba(255,255,255,0.7); margin-top: 3px; }
.ctrl-alert-item.al-warn { border-left: 3px solid #FF9F0A; }
.ctrl-alert-item.al-err { border-left: 3px solid #FF453A; }
.ctrl-alert-item.al-ok { border-left: 3px solid #30D158; }

/* 线路状态小卡片 */
.ctrl-line-status {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  margin-bottom: 4px;
}
.ctrl-line-status .cls-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ctrl-line-status .cls-name { width: 50px; color: rgba(255,255,255,0.7); }
.ctrl-line-status .cls-info { flex: 1; text-align: right; color: rgba(255,255,255,0.35); }
.ctrl-line-status .cls-tardy { color: #FF9F0A; }

/* 表格 */
.ctrl-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ctrl-table th {
  text-align: left; padding: 4px 6px;
  color: rgba(255,255,255,0.3);
  font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ctrl-table td { padding: 5px 6px; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.03); }
.ctrl-table td:last-child { text-align: right; }
.ctrl-table tr:last-child td { border-bottom: none; }

/* 编号 */
.ctrl-rank { font-size: 10px; color: rgba(255,255,255,0.2); width: 20px; }

/* ===== 90-app-shell.css ===== */
/* CityRail App Shell: shared UI for newly modularized features */
.cityrail-floating-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(20,20,22,.88);
  color: #fff;
  font: 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.cityrail-floating-toast.show { opacity: 1; }

/* ===== 10-operation-panel.css ===== */
:root{
 --glass:rgba(255,255,255,.58);
 --border:rgba(255,255,255,.35);
 --shadow:0 10px 40px rgba(0,0,0,.12);
 --radius:22px;
 --text:#0f172a;
}
body{
 background:linear-gradient(180deg,#edf3fb 0%,#dfe7f2 100%);
 font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC',sans-serif;
}
.glass-panel,.panel,.control-panel{
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 background:var(--glass)!important;
 border:1px solid var(--border)!important;
 border-radius:var(--radius)!important;
 box-shadow:var(--shadow)!important;
}
button:not(:is(#auth-screen,#recover-screen,#workshop-modal,#workshop-my-modal,#line-edit-toolbar) button):not(#living-city-overlay button):not(.settings-row):not(#bottombar button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):not(.splash-action):not(#map-quick-controls button):not(.express-config-button):not(.business-button):not(.ats-dialog *):not(.line-config-launcher):not(.line-strip *){
 border-radius:16px!important;
 transition: opacity 140ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
button:not(.splash-action):not(.line-config-launcher):not(.line-strip *):hover{
 transform:translateY(-1px);
}
}


/* ===== 20-realistic-boarding.css ===== */
/* Restore original readable Apple-dark text color across UI */
:root{
  --text:#f5f5f7!important;
  --text-dim:#a1a1aa!important;
  --cr-text-main:#f5f5f7!important;
  --cr-text-secondary:#d1d5db!important;
  --cr-text-muted:#9ca3af!important;
}
body,
.panel,.control-panel,.glass-panel,.modal,.metric-card,.sidebar,.dashboard,.settings-panel,
.auth-card,.city-card,#cityrailControlCenterPlus,.leaflet-popup:not(.train-info-popup) .leaflet-popup-content{
  color:#f5f5f7!important;
}
.panel *,.control-panel *,.glass-panel *,.modal *,.metric-card *,.sidebar *,.dashboard *,
.settings-panel *,.auth-card *,.city-card *,#cityrailControlCenterPlus *{
  color:#f5f5f7!important;
}
small,.muted,.secondary,.hint,.label,.stat-label,.metric-label,
.cr-metric-card .k,.cr-chart-title,.cr-bar-label,.cr-center-note{
  color:#d1d5db!important;
}
input:not([role=switch]):not([type=range]):not(#bottombar input):not(#recover-screen input),select:not(.line-strip *),textarea{
  color:#f5f5f7!important;
  background:rgba(28,28,30,.82)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.cr-metric-card,.cr-chart-card{
  background:rgba(44,44,46,.72)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.cr-metric-card .v{
  color:#ffffff!important;
}
.cr-bar-track{
  background:rgba(255,255,255,.16)!important;
}


/* ===== 30-hourly-flow.css ===== */
#cityrailControlCenterPlus{display:none!important;visibility:hidden!important;pointer-events:none!important;}


/* ===== 40-performance-safe.css ===== */
/* Performance-only hints: does not remove UI or gameplay features */
.train-marker, .station-marker {
  will-change: transform;
}
.leaflet-interactive {
  vector-effect: non-scaling-stroke;
}
.ctrl-card, #ctrl-center-overlay, #settings-overlay, .panel, .glass-panel {
  contain: layout paint;
}


/* ===== 50-smoothness-protect.css ===== */
/* deeper performance: keep train animation untouched */
#ctrl-center-overlay.hidden,
#settings-overlay.hidden,
#nav-overlay.hidden {
  content-visibility: auto;
}
.ctrl-table tbody,
#cct-alerts-list,
#cct-line-status-list,
#cct-line-balance-panel,
#cct-load-level-panel {
  contain: content;
}
#cct-line-status-list {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  overscroll-behavior: auto;
}
.leaflet-tooltip,
.leaflet-popup {
  will-change: transform, opacity;
}

/* ===== 95-train-animation-v22.css ===== */
/* CITYRAIL V22: smooth visible train marker motion without increasing simulation workload. */
.leaflet-marker-icon.train-marker {
  transition: transform 120ms linear !important;
  will-change: transform;
  contain: layout style paint;
}
.leaflet-marker-icon.train-marker svg,
.leaflet-marker-icon.train-marker polygon {
  pointer-events: auto;
}

/* ===== 100-performance-v30.css ===== */
/* CityRail v30 performance layer: layout containment and cheaper marker compositing. */
#ctrl-center-overlay .ctrl-panel,
#ctrl-center-overlay .control-card,
#ctrl-center-overlay .line-ops-table-wrap,
#ctrl-center-overlay .flow-rank-scroll,
#cc-express-modal,
#station-detail-panel {
  contain: layout paint style;
}
.train-marker,
.train-marker * {
  backface-visibility: hidden;
}
body.cityrail-v30-heavy .train-marker-overload svg,
body.cityrail-v30-heavy .train-marker svg polygon {
  filter: none !important;
}
body.cityrail-v30-heavy .leaflet-tooltip {
  transition: none !important;
}


/* ===== 101-deep-performance-v31.css ===== */
/* CityRail v31 deep performance */
#cityrail-train-canvas-v31{
  contain: strict;
  will-change: transform;
  transform: translateZ(0);
}
/* Canvas 已经绘制列车，避免旧 DOM marker 残留导致双重渲染 */
.leaflet-marker-icon.train-marker{
  display: none !important;
}
/* 隐藏面板彻底隔离布局，减少主地图重排 */
.hidden.ctrl-center-overlay,
.hidden.settings-overlay,
.hidden.line-config-overlay,
.hidden.station-detail-panel,
.hidden.nav-overlay{
  content-visibility: hidden;
  contain: layout paint style;
}
/* 大表格滚动更顺滑 */
.line-ops-scroll,
.ctrl-flow-rank-scroll,
.control-line-table-scroll{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: layout paint;
}


/* ===== 102-smooth-zoom-v33.css ===== */
/* CityRail v33 smooth zoom visual tuning */
.cityrail-smooth-zoom-v33 .leaflet-tile {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.cityrail-apple-zooming .leaflet-tile,
html.cityrail-map-zooming .leaflet-tile,
html.cityrail-basemap-dragging .leaflet-tile {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

html.cityrail-basemap-dragging .leaflet-tile-pane,
html.cityrail-map-zooming .leaflet-tile-pane {
  will-change: transform;
}

html.cityrail-map-zooming .leaflet-tile,
html.cityrail-apple-zoom-committing .leaflet-tile,
html.cityrail-apple-zoom-committing .leaflet-tile-pane,
#map.cityrail-apple-zoom-committing .leaflet-tile,
#map.cityrail-apple-zoom-committing .leaflet-tile-pane {
  transition: none !important;
  animation: none !important;
}

.cityrail-tile-continuity-hold {
  position: absolute;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform, opacity;
  contain: layout paint style;
  transition: opacity .16s ease;
}

.cityrail-tile-continuity-hold {
  opacity: 1;
}

.cityrail-tile-continuity-hold.retiring {
  opacity: 0;
}

.cityrail-tile-continuity-hold .cityrail-held-tile {
  position: absolute;
  max-width: none !important;
  pointer-events: none !important;
  user-select: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.cityrail-smooth-zoom-v33 #cityrail-train-canvas-v31 {
  will-change: transform;
  image-rendering: auto;
}

/* During zoom gestures, avoid expensive decorative shadow filters causing jank. */
.cityrail-is-zooming-v33 .leaflet-tooltip,
.cityrail-is-zooming-v33 .leaflet-popup,
.cityrail-is-zooming-v33 .od-icon-label {
  transition: none !important;
}


/* ===== 103-stable-line-ops-v36.css ===== */
/* CITYRAIL V36: stable line operation table */
#cct-line-stats-body tr,
#cct-line-stats-body td,
#cct-line-stats-body .cc-express-open {
  transition: none !important;
}
#cct-line-stats-body .cc-express-cell {
  min-width: 118px;
  width: 118px;
  white-space: nowrap;
}
#cct-line-stats-body .cc-express-open {
  min-width: 112px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  overflow: hidden;
}


/* ===== 105-settings-scroll-v47.css ===== */
/* v47: settings panel scrolls internally; appended settings never overflow the rounded frame. */
#settings-panel {
  max-height: min(82vh, 720px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#settings-panel > * { flex-shrink: 0; }
#settings-panel::-webkit-scrollbar { width: 8px; }
#settings-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }
#settings-panel::-webkit-scrollbar-track { background: transparent; }


/* ===== 107-deploy-stable-v66.css ===== */
/* CityRail v66 root-level UI fixes */
#cct-network-length{
  display:inline-block;
  margin-left:8px;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  color:inherit !important;
  opacity:1 !important;
  line-height:inherit !important;
  vertical-align:baseline;
}
#cct-line-stats-table,
.ctrl-table[data-control-table="line-stats"]{
  table-layout:fixed;
}
#cct-line-stats-table [data-col="speed"],
#cct-line-stats-table [data-col="length"],
#cct-line-stats-table [data-col="trains"],
#cct-line-stats-table [data-col="ridership"],
#cct-line-stats-table [data-col="crowding"],
.ctrl-table[data-control-table="line-stats"] [data-col="speed"],
.ctrl-table[data-control-table="line-stats"] [data-col="length"],
.ctrl-table[data-control-table="line-stats"] [data-col="trains"],
.ctrl-table[data-control-table="line-stats"] [data-col="ridership"],
.ctrl-table[data-control-table="line-stats"] [data-col="crowding"]{
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}
#cct-line-stats-table [data-col="crowding"],
.ctrl-table[data-control-table="line-stats"] [data-col="crowding"]{
  width:88px;
  min-width:88px;
  max-width:88px;
  padding-right:14px !important;
}
/* ===== 108-root-stability-v67.css ===== */
/* CityRail v67 root stability styles */
#cct-network-length-stat.ctrl-top-stat .ts-label{
  font: inherit;
}
#cct-network-length-stat .ts-val{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
#cct-network-length{
  margin-left: 0 !important;
  opacity: 1 !important;
}

/* ===== 110-root-station-and-index-v75.css ===== */
/* CityRail v75 station status and stable-operation polish */
.sd-status-v75{margin:8px 0 10px 0;padding:8px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.035)}
.sd-status-title{font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:600}
.sd-status-buttons{display:flex;gap:6px;flex-wrap:wrap}
.sd-status-buttons button{font-size:12px;padding:5px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.sd-status-buttons button.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}
.station-status-closed{opacity:.35;filter:grayscale(1)}
.station-status-sealed{opacity:.72}

/* ===== 111-root-final-v76.css ===== */
/* CityRail v76 root-final styles */
#settings-panel .settings-row[data-setting="openrailway"]{border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:12px;}
#settings-panel .settings-row[data-setting="openrailway"] .sr-label{letter-spacing:.01em;}


/* Settings save action layout. Button motion belongs to design foundation. */
.cityrail-setting-actions{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0 10px;
}
.cityrail-setting-actions .cityrail-action-btn{
  min-height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:inherit;
  font-weight:650;
  cursor:pointer;
}
.cityrail-setting-actions .cityrail-action-btn.primary{
  background:rgba(70,135,255,.22);
  border-color:rgba(116,165,255,.38);
}
.cityrail-setting-actions input[type="file"]{ display:none!important; }
/* ===== CityRail v142 Clean UI Shell ===== */
:root{
  --cr-surface: rgba(18,22,28,.86);
  --cr-surface-strong: rgba(20,24,31,.96);
  --cr-hairline: rgba(255,255,255,.10);
  --cr-text: rgba(255,255,255,.92);
  --cr-muted: rgba(255,255,255,.58);
  --cr-blue: #0A84FF;
}
#ctrl-center-overlay,#station-detail-overlay,#settings-overlay{
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#ctrl-center-panel,#station-detail-panel,#settings-panel,.line-config-panel{
  background: linear-gradient(180deg,rgba(29,33,41,.94),rgba(13,16,21,.94)) !important;
  border: 1px solid var(--cr-hairline) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  border-radius: 22px !important;
}
button,.tool-btn,.ctrl-tab,.settings-toggle,.cc-express-open{
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}
button:active,.tool-btn:active{ transform: scale(.985); }
button:focus-visible,.tool-btn:focus-visible,input:focus-visible,select:focus-visible{
  outline: 2px solid rgba(10,132,255,.72); outline-offset: 2px;
}
#station-detail-overlay [data-v130-canonical],#station-detail-overlay .v101-line-wait-card,#station-detail-overlay .v102-line-wait-card,#station-detail-overlay .v112-line-wait-card,#station-detail-overlay .v130-line-wait-card{
  display:none!important; pointer-events:none!important;
}
.cr-v142-stable-container{ contain: content; }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* ===== CityRail v144 Apple Stable Shell ===== */
:root{
  --cr-v144-bg:#0b0b0f;
  --cr-v144-surface:rgba(28,28,30,.82);
  --cr-v144-card:rgba(255,255,255,.055);
  --cr-v144-line:rgba(255,255,255,.105);
  --cr-v144-text:#f5f5f7;
  --cr-v144-muted:rgba(235,235,245,.58);
  --cr-v144-blue:#0a84ff;
}
html.cityrail-v144-ready body{
  color:var(--cr-v144-text);
  background:var(--cr-v144-bg);
  -webkit-font-smoothing:antialiased;
}
html.cityrail-v144-ready #topbar{
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  max-width:calc(100vw - 32px);
  padding:6px;
  gap:4px;
  border:1px solid var(--cr-v144-line);
  border-radius:18px;
  background:rgba(22,22,24,.76);
  box-shadow:0 16px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(1.25);
}
html.cityrail-v144-ready #topbar .tool-btn{
  min-height:var(--ui-toolbar-button-size,34px);
  padding:0 12px;
  color:rgba(245,245,247,.78)!important;
  border:1px solid transparent;
  border-radius:12px!important;
  background:transparent;
  box-shadow:none;
  font-size:12px;
  letter-spacing:0;
}
html.cityrail-v144-ready #topbar .tool-btn.active{
  color:#fff!important;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.10);
  transform:none;
}
@media (hover: hover) and (pointer: fine) {
html.cityrail-v144-ready #topbar .tool-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.10);
  transform:none;
}
}
html.cityrail-v144-ready #ctrl-center-overlay{
  color:var(--cr-v144-text);
  background:linear-gradient(180deg,#111114 0%,#09090c 100%);
}
html.cityrail-v144-ready #ctrl-topbar{
  height:60px;
  min-height:60px;
  padding:0 18px;
  gap:4px;
  border-bottom:1px solid var(--cr-v144-line);
  background:rgba(22,22,24,.82);
  backdrop-filter:blur(24px) saturate(1.2);
}
html.cityrail-v144-ready .ctrl-top-logo{
  color:var(--cr-v144-blue);
  font-size:14px;
  letter-spacing:.03em;
}
html.cityrail-v144-ready .ctrl-top-stat{
  height:34px;
  padding:0 12px;
  border-right:1px solid rgba(255,255,255,.07);
}
html.cityrail-v144-ready #ctrl-close-btn{
  min-height:34px;
  padding:0 13px;
  color:rgba(245,245,247,.72)!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px!important;
  background:rgba(255,255,255,.06);
}
html.cityrail-v144-ready #ctrl-nav{
  width:64px;
  min-width:64px;
  padding:12px 0;
  gap:6px;
  border-right:1px solid var(--cr-v144-line);
  background:rgba(18,18,20,.72);
}
html.cityrail-v144-ready .ctrl-nav-item{
  width:42px;
  height:42px;
  border-radius:12px!important;
}
html.cityrail-v144-ready .ctrl-nav-item.active{
  color:#fff!important;
  background:rgba(10,132,255,.88);
  box-shadow:0 6px 18px rgba(10,132,255,.22);
}
html.cityrail-v144-ready #ctrl-main{
  padding:18px;
  gap:14px;
}
html.cityrail-v144-ready .ctrl-card,
html.cityrail-v144-ready .ctrl-alert-item{
  border:1px solid var(--cr-v144-line);
  border-radius:16px!important;
  background:var(--cr-v144-card)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
html.cityrail-v144-ready .ctrl-card{
  padding:15px 16px;
}
html.cityrail-v144-ready .ctrl-card-title,
html.cityrail-v144-ready .ctrl-alert-section-title{
  color:var(--cr-v144-muted);
  letter-spacing:.06em;
}
html.cityrail-v144-ready .ctrl-big-num{
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
}
html.cityrail-v144-ready .ctrl-table th{
  color:var(--cr-v144-muted);
  background:rgba(24,24,27,.94)!important;
}
html.cityrail-v144-ready .ctrl-table td{
  border-color:rgba(255,255,255,.055);
}
html.cityrail-v144-ready #settings-panel,
html.cityrail-v144-ready #nav-panel{
  border:1px solid var(--cr-v144-line)!important;
  border-radius:18px!important;
  background:var(--cr-v144-surface)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(24px) saturate(1.2);
}
html.cityrail-v144-ready button:not(.map-display-button):not(.station-info-card),
html.cityrail-v144-ready [role="button"]:not(.leaflet-marker-icon):not(.ats-diagram *){
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease,transform .12s ease!important;
  will-change:auto!important;
}
html.cityrail-v144-ready .cityrail-v144-tapped{
  transform:scale(.985)!important;
}
html.cityrail-v144-ready #cityrailControlCenterPlus{
  display:none!important;
}
@media (max-width:900px){
  html.cityrail-v144-ready #topbar{left:12px;right:12px;transform:none;overflow-x:auto;}
  html.cityrail-v144-ready #ctrl-topbar{overflow:visible;}
  html.cityrail-v144-ready #ctrl-alerts{display:none;}
}

/* v145 control snapshots update atomically and never animate table geometry. */
html.cityrail-v145-ready #cct-line-stats-body tr,
html.cityrail-v145-ready #cct-line-stats-body td,
html.cityrail-v145-ready #cct-top5-body tr,
html.cityrail-v145-ready #cct-top5-body td{
  transition:none!important;
}
html.cityrail-v145-ready .ctrl-empty-row{
  padding:12px;
  color:var(--ui-muted);
  font-size:11px;
  text-align:center;
}
html.cityrail-v145-ready .v145-line-status{
  padding:6px 8px;
  border-bottom:1px solid var(--ui-line);
  color:var(--ui-text);
  font-size:11px;
}

#cct-line-status-list [data-f="active"] { color:var(--ui-muted); }

/* ===== v146.4 control center clean overview and hourly chart ===== */
.ctrl-v1464-flow-overview{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  text-align:center!important;
}
.ctrl-v1464-flow-overview>div{
  min-width:0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  padding:14px 10px 12px;
}
.ctrl-v1464-hourly-legend{
  display:flex!important;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:11px;
  color:rgba(255,255,255,.58);
}
#cct-hourly-flow-svg .grid{stroke:rgba(255,255,255,.08);stroke-width:1;}
#cct-hourly-flow-svg .axis{stroke:rgba(255,255,255,.20);stroke-width:1.2;}
#cct-hourly-flow-svg .line{fill:none;stroke:#0A84FF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
#cct-hourly-flow-svg .area{fill:rgba(10,132,255,.16);}
#cct-hourly-flow-svg .dot{fill:#fff;stroke:#0A84FF;stroke-width:3;}
#cct-hourly-flow-svg text{fill:rgba(255,255,255,.58);font-size:10px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;}

/* CityRail v146.6 payment modal: isolated styles, no game panel impact */
.cityrail-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 100500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,8,20,.68);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.cityrail-pay-modal.visible { display: flex; }
.cityrail-pay-card {
  position: relative;
  width: min(390px, calc(100vw - 36px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(15,19,27,.88);
  color: #fff;
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
.cityrail-pay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cityrail-pay-card-title { font-size: 22px; font-weight: 820; letter-spacing: 0; }
.cityrail-pay-card-subtitle { margin-top: 8px; color: rgba(214,229,249,.58); font-size: 13px; line-height:1.6; }
.cityrail-pay-qr-wrap {
  margin: 24px auto 18px;
  width: min(230px, 100%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.cityrail-pay-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
.cityrail-pay-status { min-height: 22px; color: rgba(214,229,249,.66); font-size: 14px; line-height:1.55; }
.cityrail-pay-open {
  margin-top: 18px;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1594ff, #0877df);
  color: #fff;
  font-weight: 820;
  cursor: pointer;
}
.pay-option.pay-loading { opacity: .62; }

/* Payment success screen */
#payment-success-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(145deg, #020814 0%, #07101e 48%, #02050b 100%);
  background-size: 48px 48px, 48px 48px, auto;
}
#payment-success-screen.visible { display: flex; }
#payment-success-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.pay-success-panel {
  width: min(520px, calc(100vw - 40px));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: rgba(15,19,27,.78);
  box-shadow: 0 28px 90px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  padding: 30px;
  color: #fff;
}
.pay-success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  background: rgba(48,209,88,.12);
  border: 1px solid rgba(48,209,88,.28);
  color: #30D158;
  font-size: 30px;
  font-weight: 850;
}
.pay-success-title {
  text-align: center;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: 0;
}
.pay-success-subtitle {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: rgba(214,229,249,.58);
}
.pay-success-account {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.pay-success-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.pay-success-label {
  font-size: 13px;
  color: rgba(214,229,249,.50);
}
.pay-success-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 16px;
  color: #fff;
}
.pay-success-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(214,229,249,.58);
}
.pay-success-login {
  margin-top: 24px;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1594ff, #0877df);
  color: #fff;
  font-size: 16px;
  font-weight: 820;
  cursor: pointer;
}

/* CityRail depot update guide */
.cityrail-update-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 100760;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--material-scrim,var(--site-backdrop));
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
}
.cityrail-update-guide-overlay.visible { display: flex; }
.cityrail-update-guide-panel {
  width: min(880px, calc(100vw - 36px));
  max-height: min(790px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: var(--material-panel,radial-gradient(circle at 14% 0%, rgba(10,132,255,.22), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(48,209,88,.16), transparent 30%),
    linear-gradient(180deg, rgba(30,34,42,.97), rgba(8,11,17,.97)));
  color: var(--ui-text);
  box-shadow: var(--material-shadow,0 34px 110px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08));

  backdrop-filter: var(--material-blur,none);

  -webkit-backdrop-filter: var(--material-blur,none);
}
.cityrail-update-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cityrail-update-guide-kicker {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--ui-muted);
}
.cityrail-update-guide-title {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 860;
  letter-spacing: 0;
}
.cityrail-update-guide-subtitle {
  margin-top: 8px;
  max-width: 680px;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.65;
}
.cityrail-update-guide-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cityrail-update-guide-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 18px;
}
.cityrail-update-guide-body::-webkit-scrollbar { width: 8px; }
.cityrail-update-guide-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 999px; }
.cityrail-update-guide-visual {
  position: relative;
  min-height: 138px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(10,132,255,.20), rgba(48,209,88,.10));
  background-size: 26px 26px, 26px 26px, auto;
}
.cityrail-update-guide-line {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 53%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0A84FF, #30D158);
  box-shadow: 0 0 24px rgba(10,132,255,.32);
}
.cityrail-update-guide-depot {
  position: absolute;
  left: 9%;
  top: 25%;
  width: 128px;
  height: 58px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0A84FF 0 55%, #30D158 55% 100%);
  box-shadow: 0 18px 38px rgba(0,0,0,.32);
}
.cityrail-update-guide-depot::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.88) 0 2px, transparent 2px 10px);
  opacity: .82;
}
.cityrail-update-guide-station {
  position: absolute;
  right: 13%;
  top: calc(53% - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #0A84FF;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.cityrail-update-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cityrail-update-guide-point {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 15px;
  background: var(--ui-card);
}
.cityrail-update-guide-point b {
  display: block;
  margin-bottom: 6px;
  color: var(--ui-text);
  font-size: 14px;
  line-height: 1.35;
}
.cityrail-update-guide-point span {
  display: block;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.62;
}
.cityrail-update-guide-progress {
  display: flex;
  gap: 6px;
  padding: 0 26px 16px;
}
.cityrail-update-guide-dot {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.cityrail-update-guide-dot.active { background: linear-gradient(90deg, #0A84FF, #30D158); }
.cityrail-update-guide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cityrail-update-guide-count {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.45;
}
.cityrail-update-guide-actions {
  display: flex;
  gap: 10px;
}
.cityrail-update-guide-actions button {
  height: 40px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  padding: 0 16px;
  background: var(--ui-card);
  color: var(--ui-text);
  font-weight: 760;
  cursor: pointer;
}
.cityrail-update-guide-actions .primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(10,132,255,.94), rgba(0,102,204,.94));
  box-shadow: 0 12px 28px rgba(10,132,255,.24);
}
.cityrail-update-guide-actions button:disabled {
  opacity: .42;
  cursor: default;
}
@media (max-width: 640px) {
  .cityrail-update-guide-overlay { padding: 12px; }
  .cityrail-update-guide-panel { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .cityrail-update-guide-head,
  .cityrail-update-guide-body,
  .cityrail-update-guide-foot { padding-left: 16px; padding-right: 16px; }
  .cityrail-update-guide-title { font-size: 23px; }
  .cityrail-update-guide-grid { grid-template-columns: 1fr; }
  .cityrail-update-guide-foot { align-items: stretch; flex-direction: column; }
  .cityrail-update-guide-actions { width: 100%; }
  .cityrail-update-guide-actions button { flex: 1; }
}

/* ===== v416 Apple Spatial UI Authority ===== */
html.cityrail-apple-spatial-ui,
html.cityrail-apple-spatial-ui *{letter-spacing:0!important;}
html.cityrail-apple-spatial-ui{
  --cr416-bg:#0b0c10;
  --cr416-text:#f5f5f7;
  --cr416-secondary:rgba(235,235,245,.62);
  --cr416-tertiary:rgba(235,235,245,.38);
  --cr416-surface:rgba(30,31,36,.72);
  --cr416-surface-strong:rgba(38,39,44,.86);
  --cr416-fill:rgba(255,255,255,.075);
  --cr416-fill-hover:rgba(255,255,255,.12);
  --cr416-border:rgba(255,255,255,.105);
  --cr416-blue:#0a84ff;
  --cr416-green:#30d158;
  --cr416-orange:#ff9f0a;
  --cr416-red:#ff453a;
  --cr416-radius:8px;
  --cr416-blur:blur(26px) saturate(170%);
  --cr416-shadow:0 22px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
}
html.cityrail-apple-spatial-ui.cityrail-light-ui{
  --bg:#f5f5f7;--panel:rgba(255,255,255,.76);--text:#1d1d1f;--text-dim:rgba(60,60,67,.66);
  --cr416-bg:#f5f5f7;
  --cr416-text:#1d1d1f;
  --cr416-secondary:rgba(60,60,67,.70);
  --cr416-tertiary:rgba(60,60,67,.42);
  --cr416-surface:rgba(255,255,255,.74);
  --cr416-surface-strong:rgba(255,255,255,.88);
  --cr416-fill:rgba(120,120,128,.12);
  --cr416-fill-hover:rgba(120,120,128,.18);
  --cr416-border:rgba(60,60,67,.16);
  --cr416-shadow:0 20px 64px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.72);
}
html.cityrail-apple-spatial-ui body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif!important;background:var(--cr416-bg)!important;color:var(--cr416-text)!important;}
html.cityrail-apple-spatial-ui #nav-panel>div[style*=background-image],
html.cityrail-apple-spatial-ui #nav-panel>div[style*=cfg-scanline],
html.cityrail-apple-spatial-ui #nav-panel::before,
html.cityrail-apple-spatial-ui #nav-panel::after{display:none!important;}
html.cityrail-apple-spatial-ui #app-logo{top:16px!important;left:18px!important;filter:none!important;}
html.cityrail-apple-spatial-ui #app-logo .logo-en{font-size:24px!important;font-weight:720!important;background:none!important;-webkit-text-fill-color:var(--cr416-text)!important;color:var(--cr416-text)!important;filter:none!important;}
html.cityrail-apple-spatial-ui #app-logo .logo-zh{font-size:12px!important;letter-spacing:.08em!important;color:var(--cr416-tertiary)!important;}
html.cityrail-apple-spatial-ui #city-badge {
  top: var(--ui-city-badge-top,16px)!important;
  right: var(--ui-city-badge-right,18px)!important;
}
html.cityrail-apple-spatial-ui #city-badge .city-cn {
  box-sizing: border-box;
  max-width: var(--ui-city-badge-width,none);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: var(--ui-city-badge-height,30px)!important;
  padding: var(--ui-city-badge-padding,5px 11px)!important;
  border-radius: 999px!important;
  background: var(--cr416-surface)!important;
  border: 1px solid var(--cr416-border)!important;
  color: var(--cr416-text)!important;
  box-shadow: var(--cr416-shadow)!important;
  backdrop-filter: var(--cr416-blur)!important;
  -webkit-backdrop-filter: var(--cr416-blur)!important;
  font-size: var(--ui-city-badge-font-size,14px)!important;
  font-weight: 650!important;
  letter-spacing: .08em!important;
  text-shadow: none!important;
}
html.cityrail-apple-spatial-ui #topbar {
  top: 14px!important;
  left: 50%!important;
  transform: translateX(-50%)!important;
  width: var(--ui-toolbar-width,max-content)!important;
  max-width: calc(100vw - 20px)!important;
  display: flex!important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3px!important;
  padding: 5px!important;
  border-radius: 999px!important;
  background: var(--cr416-surface)!important;
  border: 1px solid var(--cr416-border)!important;
  box-shadow: var(--cr416-shadow)!important;
  backdrop-filter: var(--cr416-blur)!important;
  -webkit-backdrop-filter: var(--cr416-blur)!important;
  overflow-x: auto!important;
  overflow-y: hidden!important;
}
html.cityrail-apple-spatial-ui #topbar .tool-btn{width:var(--ui-toolbar-button-size,34px)!important;height:var(--ui-toolbar-button-size,34px)!important;padding:0!important;border:0!important;border-radius:999px!important;background:var(--toolbar-button-fill,transparent)!important;color:var(--toolbar-button-text,var(--cr416-secondary))!important;font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
html.cityrail-apple-spatial-ui #topbar .tool-btn{min-width:var(--ui-toolbar-button-size,34px)!important;max-width:var(--ui-toolbar-button-size,34px)!important;flex:0 0 var(--ui-toolbar-button-size,34px)!important;overflow:hidden!important;}
html.cityrail-apple-spatial-ui #topbar .tool-btn::before{content:none!important;}
html.cityrail-apple-spatial-ui #topbar .tool-btn.active{background:var(--cr416-fill-hover)!important;color:var(--cr416-text)!important;}
@media (hover: hover) and (pointer: fine) {
  html.cityrail-apple-spatial-ui #topbar .tool-btn:hover {
    --toolbar-button-fill: var(--cr416-fill-hover);
    --toolbar-button-text: var(--cr416-text);
  }
}
html.cityrail-apple-spatial-ui #topbar #btn-new-line{background:var(--cr416-blue)!important;color:#fff!important;}
html.cityrail-apple-spatial-ui .cityrail-pressing{transform:scale(.97)!important;filter:brightness(1.06)!important;transition:transform .10s ease,filter .10s ease,background .10s ease!important;}
html.cityrail-apple-spatial-ui #topbar .tool-btn.cityrail-pressing{background:var(--cr416-fill-hover)!important;}
html.cityrail-apple-spatial-ui #topbar #btn-new-line.cityrail-pressing{filter:brightness(1.10)!important;}

html.cityrail-apple-spatial-ui input[type=range]{accent-color:var(--cr416-blue);}

html.cityrail-apple-spatial-ui #settings-overlay,
html.cityrail-apple-spatial-ui #nav-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
html.cityrail-apple-spatial-ui #line-config-overlay{z-index:2000!important;}
html.cityrail-apple-spatial-ui #station-detail-overlay{z-index:2100!important;}
html.cityrail-apple-spatial-ui.cityrail-light-ui #settings-overlay,
html.cityrail-apple-spatial-ui.cityrail-light-ui #nav-overlay,
html.cityrail-apple-spatial-ui.cityrail-light-ui #line-config-overlay,
html.cityrail-apple-spatial-ui.cityrail-light-ui #station-detail-overlay{background:transparent!important;}
html.cityrail-apple-spatial-ui #settings-panel,
html.cityrail-apple-spatial-ui #nav-panel,
html.cityrail-apple-spatial-ui .modal,
html.cityrail-apple-spatial-ui .pay-success-panel{color:var(--cr416-text)!important;background:var(--material-panel,var(--cr416-surface-strong))!important;border:1px solid var(--cr416-border)!important;border-radius:var(--cr416-radius)!important;box-shadow:var(--cr416-shadow)!important;backdrop-filter:var(--cr416-blur)!important;-webkit-backdrop-filter:var(--cr416-blur)!important;text-shadow:none!important;}
html.cityrail-apple-spatial-ui #nav-panel {
  width:var(--ui-sheet-width,min(760px,calc(var(--ui-layout-width) - var(--ui-sheet-left,18px) - var(--ui-sheet-right,18px))))!important;
  max-height:min(720px,calc(var(--ui-layout-height) - var(--ui-sheet-top,28px) - var(--ui-sheet-bottom,28px)))!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:22px!important;
}
html.cityrail-apple-spatial-ui #nav-panel>div[style*=relative],
html.cityrail-apple-spatial-ui #nav-panel .nav-panel-body{height:auto!important;max-height:inherit!important;overflow:auto!important;min-height:0!important;}
html.cityrail-apple-spatial-ui h1,html.cityrail-apple-spatial-ui h2,html.cityrail-apple-spatial-ui h3,html.cityrail-apple-spatial-ui h4,
html.cityrail-apple-spatial-ui .ctrl-big-num,html.cityrail-apple-spatial-ui .ctrl-card-title{color:var(--cr416-text)!important;font-weight:680!important;text-shadow:none!important;}
html.cityrail-apple-spatial-ui p,html.cityrail-apple-spatial-ui label,html.cityrail-apple-spatial-ui span,html.cityrail-apple-spatial-ui small,html.cityrail-apple-spatial-ui td,html.cityrail-apple-spatial-ui th,html.cityrail-apple-spatial-ui div{ text-shadow:none; }
html.cityrail-apple-spatial-ui .ctrl-big-sub,html.cityrail-apple-spatial-ui .ctrl-card-subtitle,html.cityrail-apple-spatial-ui [class*=-hint]:not(#recover-screen *),html.cityrail-apple-spatial-ui [class*=-sub]:not(#recover-screen *),html.cityrail-apple-spatial-ui [class*=-label]:not(#recover-screen *){color:var(--cr416-secondary)!important;}
html.cityrail-apple-spatial-ui button:not(:is(#auth-screen,#recover-screen,#workshop-modal,#workshop-my-modal,#line-edit-toolbar) button):not(#living-city-overlay button):not(.ctrl-ranking-sort):not(#settings-panel button):not(.offline-maps-dialog button):not(#bottombar button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):not(#sim-btn):not(.train-graph-card *, .ats-dialog *, .sd-storage-card *, .line-strip *):not(.line-config-launcher):not(.splash-action):not(.map-display-button):not(.express-config-button):not(.business-button),
html.cityrail-apple-spatial-ui input:not(:is(#recover-screen, #workshop-my-modal) input):not(.train-graph-card *, .ats-dialog *, #bottombar *),
html.cityrail-apple-spatial-ui select:not(.train-graph-card *, .ats-dialog *, .line-strip *),
html.cityrail-apple-spatial-ui textarea:not(#workshop-my-modal textarea){font-family:inherit!important;border-radius:var(--cr416-radius)!important;}
html.cityrail-apple-spatial-ui input:not(:is(#recover-screen, #workshop-my-modal) input):not(.train-graph-card *, .ats-dialog *, #bottombar *):not([type=color]):not([type=range]):not([role=switch]),
html.cityrail-apple-spatial-ui select:not(.train-graph-card *, .ats-dialog *, .line-strip *),
html.cityrail-apple-spatial-ui textarea:not(#workshop-my-modal textarea){background:var(--cr416-fill)!important;border:1px solid var(--cr416-border)!important;color:var(--cr416-text)!important;outline:none!important;}
html.cityrail-apple-spatial-ui input:not(:is(#recover-screen, #workshop-my-modal) input):not(.train-graph-card *, .ats-dialog *, #bottombar *):focus,
html.cityrail-apple-spatial-ui select:not(.train-graph-card *, .ats-dialog *, .line-strip *):focus,
html.cityrail-apple-spatial-ui textarea:not(#workshop-my-modal textarea):focus{border-color:rgba(10,132,255,.72)!important;box-shadow:0 0 0 3px rgba(10,132,255,.18)!important;}
html.cityrail-apple-spatial-ui button:not(:is(#auth-screen,#recover-screen,#workshop-modal,#workshop-my-modal,#line-edit-toolbar) button):not(#living-city-overlay button):not(.ctrl-ranking-sort):not(#cfg-line-name):not(#cr-rni-panel button):not(#settings-panel button):not(.offline-maps-dialog button):not(#bottombar button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):not(.train-graph-card *, .ats-dialog *, .sd-storage-card *, .line-strip *):not(.line-config-launcher):where(:not(.map-display-button):not(.tool-btn):not(#sim-btn):not(.splash-action):not(.sd-zone-btn):not(.cr210-line-btn):not(.cr-eps-chip):not(.cr-eps-title):not(.connector-build-continue):not([data-fare-preset]):not(.cr207-station-name):not(.express-config-button):not(.business-button):not([data-consist-policy])){background:var(--material-button-fill,var(--cr416-fill))!important;border:1px solid var(--material-button-border,var(--cr416-border))!important;color:var(--cr416-text)!important;box-shadow:var(--material-button-shadow,none)!important;}
@media (hover: hover) and (pointer: fine) {
html.cityrail-apple-spatial-ui button:not(:is(#auth-screen,#recover-screen,#workshop-modal,#workshop-my-modal,#line-edit-toolbar) button):not(#living-city-overlay button):not(.ctrl-ranking-sort):not(#cfg-line-name):not(#cr-rni-panel button):not(#settings-panel button):not(.offline-maps-dialog button):not(#bottombar button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):not(.train-graph-card *, .ats-dialog *, .sd-storage-card *, .line-strip *):not(.line-config-launcher):where(:not(.map-display-button):not(.tool-btn):not(#sim-btn):not(.splash-action):not(.sd-zone-btn):not(.cr210-line-btn):not(.cr-eps-chip):not(.cr-eps-title):not(.connector-build-continue):not([data-fare-preset]):not(.cr207-station-name):not(.express-config-button):not(.business-button):not([data-consist-policy])):hover{background:var(--material-button-hover,var(--cr416-fill-hover))!important;}
}
html.cityrail-apple-spatial-ui .reg-error-hint{color:#FF453A!important;}
html.cityrail-apple-spatial-ui .reg-error-hint.success{color:#30D158!important;}


html.cityrail-apple-spatial-ui #nav-btn-find,
html.cityrail-apple-spatial-ui .branch-config-btn-start{background:var(--cr416-blue)!important;border-color:transparent!important;color:#fff!important;}
html.cityrail-apple-spatial-ui .sd-btn-danger,
html.cityrail-apple-spatial-ui #cfg-btn-delete-line,
html.cityrail-apple-spatial-ui .cfg-btn-danger{color:var(--cr416-red)!important;background:rgba(255,69,58,.12)!important;border-color:rgba(255,69,58,.24)!important;}
html.cityrail-apple-spatial-ui .panel-close-btn,
html.cityrail-apple-spatial-ui table{border-collapse:separate!important;border-spacing:0!important;}
html.cityrail-apple-spatial-ui th{font-size:11px!important;font-weight:620!important;color:var(--cr416-secondary)!important;background:var(--cr416-fill)!important;}
html.cityrail-apple-spatial-ui td{color:var(--cr416-text)!important;border-color:var(--cr416-border)!important;}
html.cityrail-apple-spatial-ui .ctrl-table th,html.cityrail-apple-spatial-ui .ctrl-table td{padding:8px 10px!important;}
html.cityrail-apple-spatial-ui #ctrl-center-overlay{background:var(--material-stage,var(--cr416-bg))!important;color:var(--cr416-text)!important;}
html.cityrail-apple-spatial-ui #ctrl-topbar{height:58px!important;min-height:58px!important;padding:0 16px!important;background:var(--cr416-surface-strong)!important;border-bottom:1px solid var(--cr416-border)!important;backdrop-filter:var(--cr416-blur)!important;-webkit-backdrop-filter:var(--cr416-blur)!important;}
html.cityrail-apple-spatial-ui #ctrl-nav{width:60px!important;min-width:60px!important;background:var(--cr416-surface)!important;border-right:1px solid var(--cr416-border)!important;}
html.cityrail-apple-spatial-ui .ctrl-nav-item{border-radius:999px!important;color:var(--cr416-secondary)!important;background:transparent!important;}
html.cityrail-apple-spatial-ui .ctrl-nav-item.active{background:var(--cr416-blue)!important;color:#fff!important;}
html.cityrail-apple-spatial-ui #ctrl-main{padding:16px!important;gap:12px!important;background:transparent!important;}
html.cityrail-apple-spatial-ui .ctrl-card,
html.cityrail-apple-spatial-ui .ctrl-alert-item,
html.cityrail-apple-spatial-ui .ctrl-line-status,
html.cityrail-apple-spatial-ui .cr210-line-editor,
html.cityrail-apple-spatial-ui .ctrl-card{padding:14px!important;}
html.cityrail-apple-spatial-ui .ctrl-card-title{text-transform:none!important;font-size:13px!important;margin-bottom:10px!important;}
html.cityrail-apple-spatial-ui #ctrl-alerts{width:260px!important;min-width:260px!important;}
html.cityrail-apple-spatial-ui .settings-toggle{width:44px!important;height:26px!important;border-radius:999px!important;background:rgba(120,120,128,.30)!important;border:0!important;position:relative!important;}
html.cityrail-apple-spatial-ui .settings-toggle.on{background:var(--cr416-green)!important;}
html.cityrail-apple-spatial-ui ::-webkit-scrollbar{width:8px;height:8px;}
html.cityrail-apple-spatial-ui ::-webkit-scrollbar-thumb{background:rgba(120,120,128,.36);border-radius:999px;}
html.cityrail-apple-spatial-ui ::-webkit-scrollbar-track{background:transparent;}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  html.cityrail-apple-spatial-ui #app-logo{display:none!important;}
  html.cityrail-apple-spatial-ui #topbar {
    top: max(10px,env(safe-area-inset-top))!important;
    width: var(--ui-toolbar-width,max-content)!important;
    max-width: calc(100vw - 20px)!important;
    overflow-x: auto!important;
  }


  html.cityrail-apple-spatial-ui #ctrl-alerts{display:none!important;}
  html.cityrail-apple-spatial-ui #ctrl-content-grid{grid-template-columns:1fr!important;}
}

/* v516 Pad adaptation: touch-first layout for iPad and Android tablets without changing phone/desktop breakpoints. */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1366px) and (min-height: 521px) {
  html.cityrail-apple-spatial-ui {
    --cr516-pad-edge: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    --cr516-pad-bottom: max(18px, env(safe-area-inset-bottom));
  }
  html.cityrail-apple-spatial-ui #app-logo { top: max(18px, env(safe-area-inset-top)) !important; left: var(--cr516-pad-edge) !important; }
  html.cityrail-apple-spatial-ui #city-badge { top: var(--ui-city-badge-top,max(18px, env(safe-area-inset-top))) !important; right: var(--ui-city-badge-right,var(--cr516-pad-edge)) !important; }
  html.cityrail-apple-spatial-ui #topbar {
    top: max(16px, env(safe-area-inset-top)) !important;
    max-width: min(420px, calc(100vw - 260px)) !important;
    min-height: var(--ui-toolbar-min-height,50px) !important;
    padding: 6px !important;
    gap: 4px !important;
  }
  html.cityrail-apple-spatial-ui #topbar .tool-btn::before { font-size: 18px !important; }

  html.cityrail-apple-spatial-ui #nav-panel { width: min(760px, calc(100vw - 72px)) !important; max-height: calc(100dvh - 116px) !important; padding: 0 !important; }
  html.cityrail-apple-spatial-ui #ctrl-topbar { min-height: 62px !important; height: 62px !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
  html.cityrail-apple-spatial-ui #ctrl-nav { width: 68px !important; min-width: 68px !important; }
  html.cityrail-apple-spatial-ui .ctrl-nav-item { width: 46px !important; height: 46px !important; }
  html.cityrail-apple-spatial-ui #ctrl-main { padding: 18px !important; gap: 14px !important; }
  html.cityrail-apple-spatial-ui #ctrl-content-grid { gap: 14px !important; }
  html.cityrail-apple-spatial-ui .ctrl-card { padding: 16px !important; }
  html.cityrail-apple-spatial-ui #ctrl-alerts { width: clamp(220px, 22vw, 280px) !important; min-width: clamp(220px, 22vw, 280px) !important; }
  html.cityrail-apple-spatial-ui .cityrail-update-guide-panel { width: min(860px, calc(100vw - 72px)) !important; max-height: calc(100dvh - 72px) !important; }
}
@media (pointer: coarse) and (min-width: 761px) and (max-width: 900px) and (min-height: 521px) {
  html.cityrail-apple-spatial-ui #topbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 220px) !important;
  }

  html.cityrail-apple-spatial-ui #ctrl-alerts { display: none !important; }
  html.cityrail-apple-spatial-ui #ctrl-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Compact entry forms keep native input sizes and their existing actions. */
@media (pointer: coarse) and (max-width: 760px) {
  #splash-screen,
  #auth-screen,
  #login-screen,
  #recover-screen,
  #invite-code-screen,
  #register-screen {
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .splash-main {
    min-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    gap: 20px !important;
    align-content: center !important;
  }
  .splash-logo-stage { min-height: 96px !important; }
  .splash-logo-img { width: 88px !important; }
  .splash-hero-title { font-size: clamp(30px, 9vw, 38px) !important; line-height: 1.14 !important; }
  .splash-hero-lede { margin-top: 12px !important; font-size: 14px !important; line-height: 1.5 !important; }
  .splash-action-row { margin-top: 24px !important; gap: 10px !important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .splash-action {min-width:0;min-height:44px;padding:12px 16px;font-size:15px;}
  .splash-action--primary {grid-column:1/-1;min-height:52px;}
  .splash-community-links {gap:12px;margin-top:20px;}

  .splash-version-note { margin-top: 16px !important; font-size: 12px !important; line-height: 1.45 !important; }

  #auth-screen { padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important; }
  .auth-back-btn,
  #login-screen .reg-back-btn,
  #recover-screen .reg-back-btn,
  #register-screen .reg-back-btn,
  #invite-code-screen .invite-back-btn { top: max(12px, env(safe-area-inset-top)) !important; left: max(12px, env(safe-area-inset-left)) !important; }
  .auth-shell { width: min(560px, calc(100vw - 32px)) !important; gap: 12px !important; padding-top: 48px !important; padding-bottom: 6px !important; grid-template-columns:1fr; }
  .auth-hero-card { display:none; }
  .auth-title { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.02 !important; }
  .auth-subtitle { margin-bottom: 6px !important; font-size: 10px !important; letter-spacing: 0.10em !important; }
  .auth-lede { margin-top: 10px !important; font-size: 12px !important; line-height: 1.42 !important; }
  .auth-stat-row { margin-top: 10px !important; gap: 6px !important; }
  .auth-stat { min-height: 42px !important; padding: 7px 5px !important; border-radius: 12px !important; }
  .auth-stat strong { font-size: 14px !important; }
  .auth-stat span { font-size: 9px !important; }
  .auth-action-card { padding: 16px !important; border-radius: 20px !important; }
  .auth-action-title { font-size: 19px !important; }
  .auth-action-subtitle { display:none; }
  .auth-buttons { gap: 8px !important; }
  .auth-btn { min-height: 50px !important; padding: 9px 11px !important; gap: 10px !important; border-radius: 14px !important; }
  .auth-btn .auth-icon { width: 32px !important; height: 32px !important; border-radius: 11px !important; }
  .auth-btn-text strong { font-size: 15px !important; }
  .auth-btn-text span { display:none; }
  .auth-action-note { margin-top: 8px !important; font-size: 10px !important; line-height: 1.32 !important; }

  #login-screen,
  #recover-screen,
  #invite-code-screen {
    padding: max(68px, calc(env(safe-area-inset-top) + 56px)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  }
  .login-panel,
  .invite-panel {
    width: min(520px, calc(100vw - 28px)) !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
  }
  #login-screen .reg-title,
  #recover-screen .reg-title,
  .invite-title { font-size: 28px !important; line-height: 1.2 !important; }
  #recover-screen .reg-title { font-size: 26px !important; }
  #login-screen .reg-header,
  #recover-screen .reg-header,
  .invite-header { margin-bottom: 22px !important; }
  #login-screen .reg-form,
  #recover-screen .reg-form { gap: 14px !important; margin-bottom: 14px !important; }
  #login-screen .reg-input,
  #recover-screen .reg-input { min-height: 48px !important; padding: 12px 14px !important; font-size: 16px !important; }
  #login-screen .reg-submit-btn,
  #recover-screen .reg-submit-btn { min-height: 48px !important; padding: 12px 16px !important; }

  #register-screen { overflow-y: auto !important; }
  .reg-shell { width: min(560px, calc(100vw - 24px)) !important; padding: 70px 0 18px !important; gap: 14px !important; }
  .reg-story { display: none !important; }
  .reg-panel { order: -1 !important; }
  .reg-story-copy { padding: 24px 22px 16px !important; }
  .reg-headline { font-size: clamp(30px, 9vw, 42px) !important; }
  .reg-lede { font-size: 14px !important; line-height: 1.55 !important; }
  .reg-showcase { margin: 0 12px 12px !important; border-radius: 18px !important; }
  .reg-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; padding: 0 12px 14px !important; }
  .reg-feature-thumb { height: 86px !important; }
  .reg-feature-copy { padding: 10px 11px 12px !important; }
  .reg-feature-copy strong { font-size: 13px !important; }
  .reg-feature-copy span { font-size: 10px !important; line-height: 1.4 !important; }
  .reg-panel { padding: 18px 18px !important; border-radius: 22px !important; }
  #register-screen .reg-header { margin-bottom: 14px !important; }
  #register-screen .reg-title { font-size: 28px !important; }
  .reg-value-line,
  .reg-field-limit-hint,
  .reg-password-limit-hint,
  #register-screen .reg-hint { display: none !important; }
  #register-screen .reg-form { gap: 9px !important; margin-bottom: 12px !important; }
  #register-screen .reg-input-label { margin-bottom: 5px !important; font-size: 11px !important; }
  #register-screen .reg-input { min-height: 46px !important; padding: 10px 13px !important; font-size: 16px !important; }
  #register-screen .reg-submit-btn { min-height: 48px !important; padding: 12px 16px !important; }


  html.cityrail-apple-spatial-ui #topbar {
    max-width: calc(100vw - 16px) !important;
    scrollbar-width: none !important;
  }
  html.cityrail-apple-spatial-ui #topbar::-webkit-scrollbar { display: none !important; }


}
@media (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  #splash-screen { padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)) !important; }
  .splash-main { min-height: calc(100dvh - 20px) !important; grid-template-columns: minmax(0, 1fr) minmax(110px, 148px) !important; align-items: center !important; gap: 16px !important; }
  .splash-logo-stage { order: 0 !important; min-height: 120px !important; justify-content: center !important; }
  .splash-logo-stage::after { width: min(26vw, 132px) !important; height: min(26vw, 132px) !important; inset: auto !important; }
  .splash-logo-img { width: min(24vw, 118px) !important; }
  .splash-hero-title { font-size: clamp(30px, 8.2vw, 48px) !important; line-height: 1.02 !important; }
  .splash-hero-lede { margin-top: 10px !important; font-size: 12px !important; line-height: 1.42 !important; max-width: 520px !important; }
  .splash-action-row { margin-top: 14px !important; flex-direction: row !important; align-items: center !important; gap: 9px !important; }

  .splash-version-note { margin-top: 10px !important; font-size: 10px !important; line-height: 1.35 !important; }

  .auth-shell { width: min(720px, calc(100vw - 24px)) !important; max-width: none !important; grid-template-columns: minmax(170px, 0.72fr) minmax(300px, 1.28fr) !important; gap: 10px !important; padding-top: 46px !important; align-items: stretch !important; }
  .auth-hero-card { min-height: 0 !important; justify-content: center !important; padding: 12px 14px !important; }
  .auth-title { font-size: clamp(28px, 6.4vw, 38px) !important; }
  .auth-lede,
  .auth-stat-row,
  .auth-action-subtitle,
  .auth-action-note { display: none !important; }
  .auth-action-card { padding: 11px !important; }
  .auth-buttons { gap: 7px !important; }
  .auth-btn { min-height: 45px !important; padding: 8px 10px !important; }
  .auth-btn .auth-icon { width: 30px !important; height: 30px !important; }

  .reg-shell { width: min(520px, calc(100vw - 24px)) !important; grid-template-columns: 1fr !important; padding-top: 42px !important; gap: 0 !important; align-items: start !important; }
  .reg-story { display: none !important; }
  .reg-story-copy { padding: 14px 16px 12px !important; }
  .reg-headline { font-size: clamp(24px, 5.6vw, 34px) !important; margin: 8px 0 !important; }
  .reg-lede { display: none !important; }
  .reg-showcase { display: none !important; }
  .reg-feature-grid { display: none !important; }
  .reg-panel { padding: 12px 14px !important; }
  #register-screen .reg-header { margin-bottom: 8px !important; }
  #register-screen .reg-title { font-size: clamp(28px, 6.5vw, 36px) !important; }
  #register-screen .reg-subtitle { display: none !important; }
  .reg-value-line,
  #register-screen .reg-hint { display: none !important; }
  #register-screen .reg-form { gap: 6px !important; margin-bottom: 8px !important; }
  #register-screen .reg-input { min-height: 44px !important; padding: 10px 12px !important; font-size: 16px !important; }
  #register-screen .reg-input-label { margin-bottom: 4px !important; }
  .reg-field-limit-hint,
  .reg-password-limit-hint,
  #register-screen .reg-error-hint { font-size: 10px !important; }
  #register-screen .reg-submit-btn { min-height: 44px !important; padding: 10px 14px !important; }


  html.cityrail-apple-spatial-ui #topbar {
    top: max(6px, env(safe-area-inset-top)) !important;
    max-width: calc(100vw - 72px) !important;
  }

  html.cityrail-apple-spatial-ui #ctrl-topbar { min-height: 46px !important; height: auto !important; overflow: visible !important; padding: 6px 8px !important; }
}

/* v448: map object panel system for station and line panels. */
:root{
  --cr-object-accent:#0a84ff;
  --cr-object-bg:var(--ui-surface);
  --cr-object-card:var(--ui-card);
  --cr-object-card-soft:rgba(255,255,255,.045);
  --cr-object-border:var(--ui-line);
  --cr-object-line:var(--ui-line);
  --cr-object-text:var(--ui-text);
  --cr-object-muted:var(--ui-muted);
  --cr-object-faint:var(--ui-muted);
}
#line-config-overlay,
#station-detail-overlay,
html.cityrail-apple-spatial-ui #line-config-overlay,
html.cityrail-apple-spatial-ui #station-detail-overlay{
  position:fixed!important;
  inset:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none!important;
}
#line-config-panel,
#station-detail-panel{
  --cr-object-accent:var(--accent,#0a84ff);
  position:absolute!important;
  top: var(--cr-object-top,0px);
  left:var(--cr-object-inline-inset, 18px)!important;
  right:auto!important;
  bottom: 0;
  width: var(--cr-object-width,min(380px, calc(var(--ui-layout-width) - 24px)));
  max-width: var(--cr-object-width,min(380px, calc(var(--ui-layout-width) - 24px)));
  max-height: var(--cr-object-height,var(--ui-layout-height));
  padding:0!important;
  overflow:hidden!important;
  color:var(--cr-object-text)!important;
  border-radius:var(--ui-panel-radius,20px)!important;
  text-shadow:none!important;
  pointer-events:auto!important;
  height: var(--cr-object-height,var(--ui-layout-height));
}
#line-config-panel *,
#station-detail-panel *{
  letter-spacing:0!important;
  text-shadow:none!important;
}
#line-config-panel .cityrail-object-panel-body,
#station-detail-panel .cityrail-object-panel-body{
  position:relative!important;
  z-index:1!important;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  overflow:auto!important;
  padding:var(--cr-object-body-padding, 24px)!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}
#line-config-panel h2,
#station-detail-panel h2{
  min-height:0!important;
  margin:0 0 16px!important;
  padding:0 0 16px!important;
  border:0!important;
  border-bottom:1px solid var(--cr-object-line)!important;
  background:transparent!important;
  color:var(--cr-object-text)!important;
}
#line-config-panel h2{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:8px!important;
}
#station-detail-panel h2{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:12px!important;
}
#line-config-panel #cfg-line-name{
  grid-column:1!important;
  justify-self:start!important;
  text-align:left!important;
}
#station-detail-panel #sd-station-name{
  grid-column:1!important;
  justify-self:start!important;
  text-align:left!important;
}
#cfg-line-name,
#sd-station-name{
  display:block!important;
  margin-top:2px!important;
  padding:0!important;
  max-width:100%!important;
  color:var(--cr-object-text)!important;
  font-size:24px!important;
  font-weight:650!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#cfg-line-name{color:var(--cr-object-accent)!important;}
#line-config-close,
#station-detail-close{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid var(--cr-object-border)!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--cr-object-muted)!important;
  box-shadow:none!important;
}
#line-config-close{grid-column:2!important;grid-row:1!important;}
#station-detail-close{grid-column:2!important;grid-row:1!important;}
@media (hover: hover) and (pointer: fine) {
#line-config-close:hover,
#station-detail-close:hover{
  background:rgba(255,255,255,.09)!important;
  color:var(--cr-object-text)!important;
}
}
#cfg-name-editor,
#cfg-edit-actions,
#sd-name-editor,
#sd-branch-config,
#sd-line-picker,
.cfg-row,
.freq-input-row,
.branch-config-row{
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#cfg-name-editor,
#cfg-edit-actions,
#sd-name-editor,
#sd-branch-config,
#sd-line-picker{
  padding:12px!important;
  margin:10px 0 12px!important;
}
.cfg-row,
.freq-input-row,
.branch-config-row{
  min-height:44px!important;
  padding:9px 10px!important;
  margin:8px 0!important;
}
#line-config-panel .cfg-row{
  display:grid!important;
  grid-template-columns:80px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
}
#line-config-panel .cfg-row .cfg-label{
  min-width:0!important;
  width:auto!important;
  text-align:left!important;
  white-space:nowrap!important;
}
#line-config-panel .cfg-row .cfg-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#line-config-panel :is(#cfg-name-editor,#cfg-edit-actions,.cfg-row),
#station-detail-panel :is(#sd-name-editor,#sd-zone-row,#sd-waiting-section,#sd-branch-config,#sd-line-picker,.branch-config-row){
  font-size:13px!important;
}
#line-config-panel :is(.cfg-label,.freq-label,.cfg-select,.freq-val),
#station-detail-panel :is(.sd-section-title,.sd-waiting-line-name,.sd-waiting-dir-to,.sd-waiting-dir-count,.branch-config-label){
  font-size:13px!important;
}
#station-detail-panel .sd-waiting-line-name,
#station-detail-panel .sd-waiting-dir-count{
  font-size:14px!important;
}

.sd-section-title{
  color:var(--cr-object-text)!important;
  font-size:12px!important;
  font-weight:820!important;
  line-height:1.25!important;
  margin:0 0 10px!important;
}
.cfg-label,
.freq-label,
.freq-sub,
.branch-config-label,
.sd-zone-hint,
.cfg-time-hint{
  color:var(--cr-object-muted)!important;
}
#line-config-panel input:not([type=color]):not([type=checkbox]):not([type=range]),
#line-config-panel select,
#station-detail-panel input:not([role=switch]):not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]),
#station-detail-panel select{
  height:44px!important;
  color:var(--cr-object-text)!important;
  background:var(--ui-field)!important;
  border:1px solid var(--cr-object-line)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  outline:none!important;
}
#line-config-panel input:focus,
#line-config-panel select:focus,
#station-detail-panel input:not([role=switch]):not([type=checkbox]):not([type=radio]):focus,
#station-detail-panel select:focus{
  border-color:var(--cr-object-accent)!important;
  box-shadow:none!important;
}
#line-config-panel input[type=color]{
  border:1px solid var(--cr-object-border)!important;
  border-radius:8px!important;
  background:transparent!important;
}
#line-config-panel input[type=range],#station-detail-panel input[type=range] {height:44px!important;min-height:44px!important;background:transparent!important;border:0!important;appearance:none;accent-color:var(--ui-accent)!important;}
#line-config-panel input[type=range]::-webkit-slider-runnable-track,#station-detail-panel input[type=range]::-webkit-slider-runnable-track {height:4px;border-radius:2px;background:var(--ui-line);}
#line-config-panel input[type=range]::-webkit-slider-thumb,#station-detail-panel input[type=range]::-webkit-slider-thumb {appearance:none;width:20px!important;height:20px!important;margin-top:-8px;border:0!important;border-radius:50%;background:var(--ui-focus)!important;box-shadow:0 1px 3px #0003!important;}
#line-config-panel input[type=range]::-moz-range-track,#station-detail-panel input[type=range]::-moz-range-track {height:4px;border:0;border-radius:2px;background:var(--ui-line);}
#line-config-panel input[type=range]::-moz-range-thumb,#station-detail-panel input[type=range]::-moz-range-thumb {width:20px;height:20px;border:0;border-radius:50%;background:var(--ui-focus);}
#cfg-btn-row,
#station-detail-panel .sd-actions,
#line-config-panel .cityrail-object-panel-actions,
#station-detail-panel .cityrail-object-panel-actions{
  position:var(--ui-object-actions-position,sticky)!important;
  bottom:calc(-1 * var(--cr-object-body-padding, 24px))!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;
  margin:20px calc(-1 * var(--cr-object-body-padding, 24px)) calc(-1 * var(--cr-object-body-padding, 24px))!important;
  padding:12px var(--cr-object-body-padding, 24px) max(16px,env(safe-area-inset-bottom))!important;
  border:0!important;
  border-top:1px solid var(--cr-object-line)!important;
  background:var(--ui-surface)!important;
  backdrop-filter:blur(10px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(10px) saturate(120%)!important;
}
#station-detail-panel {
  --cr-object-body-padding: clamp(12px, 4vw, 24px);
}
#station-detail-panel .sd-actions {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: minmax(44px, auto);
}
#line-config-panel button:not([data-consist-policy]):not(.express-config-button):not(.business-button):not(#cfg-line-name):not(.line-config-launcher),
#station-detail-panel button:not([data-consist-policy]):not(.sd-zone-btn):not(.sd-storage-card button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button){
  min-height:44px!important;
  border:1px solid var(--cr-object-border)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--cr-object-text)!important;
  box-shadow:none!important;
  font-weight:550!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media (hover: hover) and (pointer: fine) {
#line-config-panel button:not([data-consist-policy]):not(.express-config-button):not(.business-button):not(#cfg-line-name):not(.line-config-launcher):hover,
#station-detail-panel button:not([data-consist-policy]):not(.sd-zone-btn):not(.sd-storage-card button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):hover{
  background:rgba(255,255,255,.09)!important;
  border-color:color-mix(in srgb,var(--cr-object-accent) 70%, rgba(255,255,255,.18))!important;
}
}
.branch-config-btn-start{
  background:var(--cr-object-accent)!important;
  border-color:var(--cr-object-accent)!important;
  color:#fff!important;
}
#cfg-btn-delete-line,
#sd-btn-delete,
.sd-btn-danger{
  background:rgba(255,69,58,.12)!important;
  border-color:rgba(255,69,58,.42)!important;
  color:#ffb4ad!important;
}
.sd-extend-btn{
  color:#8ff0a4!important;
  border-color:rgba(48,209,88,.40)!important;
}
.sd-branch-btn{
  color:#ffd37a!important;
  border-color:rgba(255,159,10,.42)!important;
}


#line-config-panel ::-webkit-scrollbar,
#station-detail-panel ::-webkit-scrollbar{width:7px;height:7px;}
#line-config-panel ::-webkit-scrollbar-thumb,
#station-detail-panel ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  #line-config-panel,
  #station-detail-panel {
    --cr-object-inline-inset: var(--ui-sheet-left);
    --cr-object-top: calc(var(--ui-visual-top,0px) + var(--ui-sheet-top));
    --cr-object-width: var(--ui-sheet-width,calc(var(--ui-layout-width) - var(--ui-sheet-left) - var(--ui-sheet-right)));
    --cr-object-height: calc(var(--ui-layout-height) - var(--ui-sheet-top) - var(--ui-sheet-bottom));
    --cr-object-body-padding: 16px;
  }
  #cfg-line-name,
  #sd-station-name{font-size:20px!important;}
}

.editor-disclosure {margin:20px 0;border-block:1px solid var(--ui-line);}
.editor-disclosure>summary {cursor:pointer;padding:16px 0;min-height:44px;box-sizing:border-box;font-size:14px;font-weight:600;}
#line-config-panel #cfg-line-name {background:transparent!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere;}
#line-config-panel .freq-input-row {border:0!important;border-radius:0!important;background:transparent!important;padding:8px 0!important;}
#line-config-panel .cfg-row {border:0!important;border-bottom:1px solid var(--ui-line)!important;border-radius:0!important;background:transparent!important;padding:12px 0!important;margin:0!important;}
#line-config-panel .cfg-name-editor-row {display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:10px;}
#line-config-panel .cfg-name-editor-row input {min-width:0;width:100%;box-sizing:border-box;}

/* v442: light control-center homepage readability pass */
html.cityrail-light-ui #ctrl-center-overlay{
  --cc-light-bg:#eef2f7;--cc-light-surface:rgba(255,255,255,.90);--cc-light-border:rgba(15,23,42,.12);--cc-light-border-soft:rgba(15,23,42,.075);--cc-light-text:#111827;--cc-light-text-2:rgba(17,24,39,.74);--cc-light-text-3:rgba(17,24,39,.58);--cc-light-blue:#006edb;--cc-light-green:#188038;--cc-light-orange:#a45a00;--cc-light-red:#d70015;
  background:var(--material-stage,radial-gradient(circle at 22% 0%,rgba(0,122,255,.08),transparent 34%),linear-gradient(180deg,#f7f9fc,var(--cc-light-bg)))!important;color:var(--cc-light-text)!important;
}
html.cityrail-light-ui #ctrl-center-overlay,html.cityrail-light-ui #ctrl-center-overlay *{letter-spacing:0!important;text-shadow:none!important;}
html.cityrail-light-ui #ctrl-center-overlay #ctrl-topbar{background:var(--material-chrome,rgba(255,255,255,.94))!important;border-bottom-color:var(--material-rim,var(--cc-light-border))!important;box-shadow:0 8px 28px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.86)!important;color:var(--cc-light-text)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-logo{color:var(--cc-light-blue)!important;font-weight:850!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-logo small,html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat .ts-label{color:var(--cc-light-text-3)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat{border-right-color:var(--cc-light-border-soft)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat .ts-val{color:var(--cc-light-text)!important;font-weight:800!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat .ts-val.ok{color:var(--cc-light-green)!important;} html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat .ts-val.warn{color:var(--cc-light-orange)!important;} html.cityrail-light-ui #ctrl-center-overlay .ctrl-top-stat .ts-val.err{color:var(--cc-light-red)!important;}
html.cityrail-light-ui #ctrl-center-overlay #ctrl-close-btn{background:rgba(15,23,42,.055)!important;border:1px solid rgba(15,23,42,.10)!important;color:var(--cc-light-text-2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.74)!important;}
@media (hover: hover) and (pointer: fine) {
html.cityrail-light-ui #ctrl-center-overlay #ctrl-close-btn:hover{background:rgba(215,0,21,.10)!important;border-color:rgba(215,0,21,.22)!important;color:var(--cc-light-red)!important;}
}
html.cityrail-light-ui #ctrl-center-overlay #ctrl-nav{background:var(--material-chrome,rgba(255,255,255,.80))!important;border-right-color:var(--material-rim,var(--cc-light-border))!important;box-shadow:8px 0 28px rgba(15,23,42,.055)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-nav-item{color:rgba(17,24,39,.58)!important;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;}
@media (hover: hover) and (pointer: fine) {
html.cityrail-light-ui #ctrl-center-overlay .ctrl-nav-item:hover{color:var(--cc-light-text)!important;background:rgba(0,122,255,.08)!important;border-color:rgba(0,122,255,.16)!important;}
}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-nav-item.active{color:#fff!important;background:var(--cc-light-blue)!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(0,110,219,.24),inset 0 1px 0 rgba(255,255,255,.20)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-card,html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-status{background:var(--material-panel,var(--cc-light-surface))!important;border-color:var(--material-rim,var(--cc-light-border))!important;color:var(--cc-light-text)!important;box-shadow:var(--material-shadow,0 12px 32px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.88))!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-card{border-radius:10px!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-card-title,html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-section-title{color:rgba(17,24,39,.70)!important;font-weight:850!important;text-transform:none!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-big-num,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-name,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-status .cls-name,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-name,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-summary b,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-stat b{color:var(--cc-light-text)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-big-num small,html.cityrail-light-ui #ctrl-center-overlay .ctrl-big-sub,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-row .cl-val,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-status .cls-info,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-lines,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-summary span,html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-stat span,html.cityrail-light-ui #ctrl-center-overlay .ctrl-rank{color:var(--cc-light-text-2)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item .al-time{color:var(--cc-light-text-3)!important;} html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item .al-msg{color:rgba(17,24,39,.84)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item.al-warn{border-left-color:#ff9f0a!important;background:linear-gradient(90deg,rgba(255,159,10,.12),var(--cc-light-surface) 24%)!important;} html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item.al-err{border-left-color:var(--cc-light-red)!important;background:linear-gradient(90deg,rgba(215,0,21,.10),var(--cc-light-surface) 24%)!important;} html.cityrail-light-ui #ctrl-center-overlay .ctrl-alert-item.al-ok{border-left-color:var(--cc-light-green)!important;background:linear-gradient(90deg,rgba(24,128,56,.10),var(--cc-light-surface) 24%)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-row{border-bottom-color:rgba(15,23,42,.075)!important;}
html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-dot,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-status .cls-dot{box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 0 3px rgba(15,23,42,.12)!important;}
html.cityrail-light-ui #ctrl-center-overlay table.ctrl-table th,html.cityrail-light-ui #ctrl-center-overlay .ctrl-table th,html.cityrail-light-ui #ctrl-center-overlay #ctrl-content-grid .ctrl-card table.ctrl-table thead tr th,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-stats-scroll-wrap table.ctrl-table thead tr th{background:rgba(246,248,252,.98)!important;color:rgba(17,24,39,.72)!important;border-bottom-color:rgba(15,23,42,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.84)!important;}
html.cityrail-light-ui #ctrl-center-overlay table.ctrl-table td,html.cityrail-light-ui #ctrl-center-overlay .ctrl-table td{color:rgba(17,24,39,.88)!important;border-bottom-color:rgba(15,23,42,.07)!important;}
html.cityrail-light-ui #ctrl-center-overlay #cct-line-stats-scroll-wrap,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-stats-scroll-wrap{background:rgba(255,255,255,.66)!important;border-color:var(--cc-light-border)!important;}
html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-row.shortage{background:linear-gradient(90deg,rgba(215,0,21,.10),rgba(255,255,255,.88) 28%)!important;border-color:rgba(215,0,21,.24)!important;}
html.cityrail-light-ui #ctrl-center-overlay .cr200-depot-alert{background:rgba(215,0,21,.09)!important;border-color:rgba(215,0,21,.24)!important;color:var(--cc-light-red)!important;}
html.cityrail-light-ui #ctrl-center-overlay #ctrl-main::-webkit-scrollbar-thumb,html.cityrail-light-ui #ctrl-center-overlay #ctrl-alerts::-webkit-scrollbar-thumb,html.cityrail-light-ui #ctrl-center-overlay .ctrl-line-stats-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22)!important;}
/* v451: unified readable color system for dark and light UI. */
:root{
  --cr-readable-text:#f8fafc;
  --cr-readable-text-soft:rgba(235,241,248,.80);
  --cr-readable-text-muted:rgba(235,241,248,.66);
  --cr-readable-text-faint:rgba(235,241,248,.50);
  --cr-readable-surface:rgba(12,14,18,.88);
  --cr-readable-card:rgba(18,21,27,.78);
  --cr-readable-card-soft:rgba(255,255,255,.055);
  --cr-readable-border:rgba(255,255,255,.14);
  --cr-readable-line:rgba(255,255,255,.10);
  --cr-readable-input:rgba(4,7,11,.34);
  --cr-readable-action:rgba(9,11,15,.84);
  --cr-object-bg:var(--cr-readable-surface);
  --cr-object-card:var(--cr-readable-card);
  --cr-object-card-soft:var(--cr-readable-card-soft);
  --cr-object-border:var(--cr-readable-border);
  --cr-object-line:var(--cr-readable-line);
  --cr-object-text:var(--cr-readable-text);
  --cr-object-muted:var(--cr-readable-text-muted);
  --cr-object-faint:var(--cr-readable-text-faint);
}
html.cityrail-light-ui{
  color-scheme:light;
  --text:#111827;
  --text-dim:rgba(31,41,55,.76);
  --panel:rgba(255,255,255,.88);
  --border:rgba(15,23,42,.12);
  --border-strong:rgba(15,23,42,.18);
  --light-text-primary:#111827;
  --light-text-secondary:rgba(31,41,55,.78);
  --light-text-tertiary:rgba(55,65,81,.66);
  --cr-readable-text:#111827;
  --cr-readable-text-soft:rgba(31,41,55,.84);
  --cr-readable-text-muted:rgba(55,65,81,.72);
  --cr-readable-text-faint:rgba(75,85,99,.62);
  --cr-readable-surface:rgba(255,255,255,.92);
  --cr-readable-card:rgba(255,255,255,.84);
  --cr-readable-card-soft:rgba(15,23,42,.045);
  --cr-readable-border:rgba(15,23,42,.14);
  --cr-readable-line:rgba(15,23,42,.10);
  --cr-readable-input:rgba(255,255,255,.96);
  --cr-readable-action:rgba(255,255,255,.92);
  --cr-object-bg:var(--cr-readable-surface);
  --cr-object-card:var(--cr-readable-card);
  --cr-object-card-soft:var(--cr-readable-card-soft);
  --cr-object-border:var(--cr-readable-border);
  --cr-object-line:var(--cr-readable-line);
  --cr-object-text:var(--cr-readable-text);
  --cr-object-muted:var(--cr-readable-text-muted);
  --cr-object-faint:var(--cr-readable-text-faint);
}
html:not(.cityrail-light-ui){
  color-scheme:dark;
}
html.cityrail-apple-spatial-ui{
  --cr416-secondary:rgba(235,235,245,.72);
  --cr416-tertiary:rgba(235,235,245,.54);
}
html.cityrail-apple-spatial-ui.cityrail-light-ui{
  --cr416-text:#111827;
  --cr416-secondary:rgba(31,41,55,.78);
  --cr416-tertiary:rgba(55,65,81,.66);
  --cr416-fill:rgba(15,23,42,.07);
  --cr416-fill-hover:rgba(15,23,42,.11);
  --cr416-border:rgba(15,23,42,.14);
}
html.cityrail-light-ui body,
html.cityrail-light-ui :is(#topbar,#settings-panel,#new-line-dialog,#nav-panel,#auth-screen,#city-select-screen,#workshop-screen,#ctrl-center-overlay,.modal,.panel,.side-panel,.control-panel,.auth-card,.reg-panel,.ctrl-card,.cityrail-object-panel,.cr-eps-panel,.cityrail-depot-panel){
  color:var(--cr-readable-text)!important;
  text-shadow:none!important;
}
html.cityrail-light-ui :is(h1,h2,h3,h4,b,strong,.title,.card-title,.ctrl-card-title,.ctrl-big-num,.ctrl-line-name,.ctrl-line-status .cls-name,#cfg-line-name,#sd-station-name,.cr-eps-title,.cityrail-depot-name,.auth-title,.reg-headline):not(.auth-btn-primary *){
  color:var(--cr-readable-text)!important;
  text-shadow:none!important;
}
html.cityrail-light-ui :is(small,.muted,.secondary,.hint,.label,.stat-label,.metric-label,.ctrl-card-subtitle,.ctrl-big-sub,.ctrl-line-row .cl-val,.ctrl-rank,.sd-zone-hint,.sd-storage-note,.sd-storage-empty,.depot-field label,.depot-empty,.cr-eps-label,.cr-eps-row-sub,.cr-eps-kpi span,[class*="-hint"],[class*="-note"],[class*="-desc"],[class*="-subtitle"],[class*="-sub"]){
  color:var(--cr-readable-text-muted)!important;
  text-shadow:none!important;
}
html.cityrail-light-ui :is(input:not([role=switch]):not([type=range]):not(#bottombar input),select,textarea,.cfg-select,.nav-select,.cr-eps-input,.cr-eps-select,.cr-eps-title-input,.depot-field input,.depot-field select):not(#recover-screen input):not(.line-strip *){
  color:var(--cr-readable-text)!important;
  background:var(--cr-readable-input)!important;
  border-color:var(--cr-readable-border)!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html.cityrail-light-ui :is(input,textarea):not(#recover-screen input)::placeholder{
  color:rgba(75,85,99,.58)!important;
}
html.cityrail-light-ui option{
  color:#111827!important;
  background:#fff!important;
}
html.cityrail-light-ui .cr-eps-panel{
  background:var(--material-panel,var(--cr-object-bg))!important;
  border-color:var(--cr-object-border)!important;
  color:var(--cr-object-text)!important;
}
html.cityrail-light-ui :is(#line-config-panel,#station-detail-panel,.cr-eps-panel,.cityrail-depot-panel) .cityrail-depot-lines{
  background:var(--cr-object-card)!important;
  border-color:var(--cr-object-border)!important;
  color:var(--cr-object-text)!important;
}
html.cityrail-light-ui :is(#line-config-panel,#station-detail-panel,.cr-eps-panel,.cityrail-depot-panel) :is(.cr-eps-row,.depot-line-row,.depot-conn-node-row,.depot-empty){
  background:var(--cr-readable-card-soft)!important;
  border-color:var(--cr-object-line)!important;
  color:var(--cr-object-text)!important;
}
html.cityrail-light-ui :is(#cfg-btn-row,#station-detail-panel .sd-actions,#line-config-panel .cityrail-object-panel-actions,#station-detail-panel .cityrail-object-panel-actions,.cr-eps-actions,.depot-actions){
  background:var(--cr-readable-action)!important;
  border-top-color:var(--cr-object-line)!important;
}
html.cityrail-light-ui :is(#line-config-panel,#station-detail-panel,.cr-eps-panel,.cityrail-depot-panel) button:not(#cfg-line-name):not(.line-config-launcher):not(.settings-row):not(#bottombar button):not(.sd-transfer-button):not(#sd-passenger-flow button):not(.station-info-card):not(.station-direction-button):not(.sd-storage-card button):not(.active):not(.active-action):not(.on):not(.primary):not(.danger):not(#cfg-btn-delete-line):not(#sd-btn-delete):not(.branch-config-btn-start):not(.sd-extend-btn):not(.sd-branch-btn):not(.sd-zone-btn):not(.express-config-button):not(.business-button):not([data-consist-policy]){
  color:var(--cr-object-text)!important;
  background:rgba(15,23,42,.055)!important;
  border-color:var(--cr-object-border)!important;
}
html.cityrail-light-ui :is(.branch-config-btn-start,.cr-eps-chip.active,.depot-actions .primary){
  background:var(--cr-object-accent,#0a84ff)!important;
  border-color:var(--cr-object-accent,#0a84ff)!important;
  color:#fff!important;
}
html.cityrail-light-ui :is(#cfg-btn-delete-line,#sd-btn-delete,.sd-btn-danger,.cr-eps-actions .danger,.depot-actions .danger,.depot-conn-tools .danger,.depot-conn-node-row i){
  background:rgba(180,35,24,.09)!important;
  border-color:rgba(180,35,24,.28)!important;
  color:#b42318!important;
}
html.cityrail-light-ui .depot-conn-tools .primary{
  background:rgba(10,132,255,.12)!important;
  border-color:rgba(10,132,255,.30)!important;
  color:#0057b8!important;
}

html.cityrail-light-ui .depot-capacity-error{
  color:#b42318!important;
}
html.cityrail-light-ui .sd-extend-btn{
  background:rgba(24,128,56,.08)!important;
  border-color:rgba(24,128,56,.28)!important;
  color:#137333!important;
}
html.cityrail-light-ui .sd-branch-btn{
  background:rgba(164,90,0,.08)!important;
  border-color:rgba(164,90,0,.30)!important;
  color:#8a4b00!important;
}
html.cityrail-light-ui :is(#line-config-panel,#station-detail-panel,.cr-eps-panel,.cityrail-depot-panel) :is(input[type=range],.cr-eps-range-row input,.depot-angle-wrap input[type="range"]){
  accent-color:var(--cr-object-accent,#0a84ff)!important;
}
html.cityrail-light-ui :is(table,.ctrl-table,#sd-od-table) :is(th,td){
  color:var(--cr-readable-text-soft)!important;
  border-color:var(--cr-readable-line)!important;
}
html.cityrail-light-ui :is(.leaflet-popup:not(.train-info-popup) .leaflet-popup-content-wrapper,.leaflet-control,.maplibregl-ctrl-group){
  background:var(--material-panel,rgba(255,255,255,.92))!important;
  color:var(--cr-readable-text)!important;
  border-color:rgba(15,23,42,.12)!important;
}
html.cityrail-light-ui[data-cityrail-station-label-tone="light-map"] .leaflet-tooltip.station-label,
html.cityrail-light-ui[data-cityrail-station-label-tone="light-map"] .station-label,
html.cityrail-light-ui:not([data-cityrail-station-label-tone]) .leaflet-tooltip.station-label,
html.cityrail-light-ui:not([data-cityrail-station-label-tone]) .station-label{
  color:#111827!important;
  text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 5px rgba(255,255,255,.88),0 0 10px rgba(255,255,255,.70)!important;
}
html.cityrail-light-ui[data-cityrail-station-label-tone="dark-map"] .leaflet-tooltip.station-label,
html.cityrail-light-ui[data-cityrail-station-label-tone="mixed-map"] .leaflet-tooltip.station-label,
html.cityrail-light-ui[data-cityrail-station-label-tone="dark-map"] .station-label,
html.cityrail-light-ui[data-cityrail-station-label-tone="mixed-map"] .station-label{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.90),0 0 5px rgba(0,0,0,.78),0 0 12px rgba(0,0,0,.66)!important;
}
html.cityrail-light-ui :is(#nav-panel,#settings-panel,#new-line-dialog,.modal,.cityrail-info-card,.loop-choice-panel,.cityrail-system-dialog,.cityrail-node-action-popup) [style*="color:#fff" i]:not(.primary):not(.active):not(.on):not([style*="background:#0a84ff" i]):not([style*="background: #0a84ff" i]),
html.cityrail-light-ui :is(#nav-panel,#settings-panel,#new-line-dialog,.modal,.cityrail-info-card,.loop-choice-panel,.cityrail-system-dialog,.cityrail-node-action-popup) [style*="color: #fff" i]:not(.primary):not(.active):not(.on):not([style*="background:#0a84ff" i]):not([style*="background: #0a84ff" i]){
  color:var(--cr-readable-text)!important;
}
html.cityrail-light-ui :is(#nav-panel,#settings-panel,#new-line-dialog,.modal,.cityrail-info-card,.loop-choice-panel,.cityrail-system-dialog,.cityrail-node-action-popup) [style*="color:rgba(255,255,255" i],
html.cityrail-light-ui :is(#nav-panel,#settings-panel,#new-line-dialog,.modal,.cityrail-info-card,.loop-choice-panel,.cityrail-system-dialog,.cityrail-node-action-popup) [style*="color: rgba(255,255,255" i]{
  color:var(--cr-readable-text-muted)!important;
}
html.cityrail-light-ui :is(.cityrail-info-card,.loop-choice-panel,.cityrail-system-card){
  background:var(--cr-readable-surface)!important;
  border-color:var(--cr-readable-border)!important;
  color:var(--cr-readable-text)!important;
}
html:not(.cityrail-light-ui) .cityrail-system-card{
  background:rgba(35,35,39,.88)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fff!important;
}

/* Public city catalogue entry, separate from the primary play actions. */
.splash-cities-link,.splash-contact-link,.splash-demo-link{display:inline-flex;align-items:center;gap:12px;margin-top:24px;color:#b8c9d8;font-size:14px;text-decoration:none;padding:6px 0;border-bottom:1px solid #ffffff26;}
@media (hover: hover) and (pointer: fine) {
.splash-cities-link:hover,.splash-contact-link:hover,.splash-demo-link:hover{color:#fff;border-color:#ffffff80;}
}
.splash-cities-link:focus-visible,.splash-contact-link:focus-visible,.splash-demo-link:focus-visible{outline:2px solid #79baff;outline-offset:5px;}

/* Automatic backup settings share the settings surface and theme tokens. */
#settings-panel .autosave-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--ui-text);
  padding:14px 0;
  border:0;
}
#settings-panel .autosave-settings legend { padding: 0 6px; }
#settings-panel .autosave-settings select { min-width: 100px; }
#settings-panel .autosave-settings p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-muted);
  overflow-wrap: anywhere;
}
#settings-panel .autosave-settings button { grid-column: 1 / -1; }
#settings-panel .autosave-settings [hidden] { display: none; }

/* Two independent entries share one depot/line stock assignment. */
.cityrail-depot-body .depot-line-connect {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0,1fr);
  display: grid;
  gap: 10px;
}
.cityrail-depot-body .depot-entry-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
}
.cityrail-depot-body .depot-entry-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--ui-muted);
}
.cityrail-depot-body .depot-entry-row select { width: 100%; min-width: 0; }
.cityrail-depot-body .depot-connection-error { color: var(--danger); margin: 0; }
.cityrail-depot-body .depot-connection-error:empty { display: none; }

@media (max-width: 480px) {
  .cityrail-depot-body .depot-entry-row { grid-template-columns: minmax(0,1fr); }
}

.cityrail-depot-body .depot-connections-field {
  grid-template-columns: minmax(0,1fr);
  align-items: start;
}

/* Station angle surface; geometry remains in the station detail owner. */
.sd-angle-control {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: transparent;
}
.sd-angle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sd-angle-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text);
}
.sd-angle-mode {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-line);
  background: var(--ui-field);
  color: var(--ui-muted);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.sd-angle-mode:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
}
.sd-angle-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 10px;
  align-items: center;
}
.sd-angle-wrap input[type="range"] { width: 100%; accent-color: var(--ui-accent); cursor: pointer; }
.sd-angle-wrap input[type="number"] {
  width: 74px;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid var(--ui-line);
  background: var(--ui-field);
  color: var(--ui-text);
  font-size: 12px;
}

/* Out-of-depot connection editor shares the object-panel viewport budget. */
.cityrail-depot-connection-modal {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 100220;
  display: none;
  pointer-events: none;
}

.cityrail-depot-connection-modal.visible {
  display: block;
}

.cityrail-depot-connection-card {
  --cr-object-accent: #0a84ff;
  width: min(380px,calc(var(--ui-layout-width) - 24px));
  max-width: min(380px,calc(var(--ui-layout-width) - 24px));
  height: var(--ui-layout-height);
  max-height: var(--ui-layout-height);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--material-rim,var(--cr-object-border,rgba(255,255,255,.13)));
  position: relative;
  background: var(--material-panel,var(--cr-object-bg,rgba(12,14,18,.88)));
  box-shadow: var(--material-shadow,none);
  overflow: hidden;
  color: var(--cr-object-text,#f8fafc);
  pointer-events: auto;
  backdrop-filter: var(--material-blur,blur(12px) saturate(126%));
  -webkit-backdrop-filter: var(--material-blur,blur(12px) saturate(126%));
  text-shadow: none;
}

.cityrail-depot-connection-body {
  padding: 12px 20px 14px;
  overflow: auto;
  display: grid;
  gap: 12px;
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#sd-waiting-section {
  padding: 14px 16px;
}