:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #182b35;
  background: #edf1f2;
  font-variant-numeric: tabular-nums;
}
body { background: #edf1f2; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #e2b642;
  outline-offset: 2px;
}
.top { background: #102c35; border-bottom: 3px solid #d9af40; color: #f3f6f4; }
.top-inner { max-width: 1580px; padding: 14px 30px; }
.brand { font-size: 18px; letter-spacing: .02em; }
.brand-mark { background: #d9af40; color: #102c35; border-radius: 7px; }
.top-right { color: #a8bdc1; }
.top-right strong { color: #e4c875; }
.shell {
  max-width: 1580px;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  padding: 18px 30px 50px;
}
.query-modes { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.query-mode {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-width: 0; padding: 13px 17px; border-radius: 10px;
  border: 1px solid #cfdadd; border-bottom: 3px solid #cfdadd;
  background: #fff; color: #233b44; box-shadow: 0 2px 4px #15333a08;
}
.query-mode:hover { border-color: #95abb0; background: #f8fbfa; }
.query-mode.active { border-color: #d9af40; background: #fffdf6; }
.mode-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 7px; background: #e9f0ef; font-size: 12px; font-weight: 800; color: #1f5a61; }
.query-mode.active .mode-icon { background: #e6c75f; color: #23343a; }
.query-mode span:nth-child(2) { min-width: 0; }
.query-mode b, .query-mode small { display: block; }
.query-mode b { font-size: 15px; }
.query-mode small { color: #71858b; font-size: 11px; margin-top: 3px; }
.mode-arrow { margin-left: auto; color: #81959a; font-size: 20px; }
.hero {
  grid-column: 1 / -1; grid-row: 2; margin: 0 0 15px; padding: 22px 25px 18px;
  border: 0; border-radius: 12px; box-shadow: 0 9px 23px #0d30321a;
  background: radial-gradient(circle at 85% -50%,#34777b 0,transparent 42%), linear-gradient(115deg,#10333e,#1b5058);
  color: #fff;
}
.eyebrow { color: #e0c66d; font-size: 10px; letter-spacing: .2em; }
.hero h1 { color: #fff; font-size: clamp(26px,3vw,38px); margin: 5px 0; }
.route-description { color: #ccdbda; font-size: 13px; }
.search-row { margin-top: 16px; }
.field, .button { border-radius: 7px; min-height: 38px; padding: 8px 11px; border-color: #c9d6d8; color: #1a3339; }
.field::placeholder { color: #88999e; }
.button { background: #fff; transition: background .15s, border-color .15s; }
.button:hover { background: #f1f6f5; border-color: #7b9ca0; }
.button.primary, .button.primary:hover { background: #e6bf54; color: #183038; border-color: #e6bf54; }
.button.soft { background: #e9f3f1; color: #1c5960; border-color: #c8dfdb; }
.search-row label.field { color: #29424a; }
.status-line { color: #c5d8d8; }
.status-line.error { color: #ffe49f; }
.metrics { margin-top: 17px; gap: 1px; border: 1px solid #487079; background: #487079; overflow: hidden; border-radius: 7px; }
.metric { border: 0; border-radius: 0; background: #173e47; padding: 10px 15px; }
.metric b { color: #fff; font-size: 22px; }
.metric span { color: #a5c1c2; font-size: 11px; }
.tabs { grid-column: 1; grid-row: 3; position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 8px; border: 1px solid #d4dfe0; border-radius: 10px; background: #fff; overflow: visible; }
.tab { width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 11px 12px; color: #50656b; background: transparent; font-size: 13px; }
.tab:hover { background: #edf3f2; }
.tab.active { background: #16434b; color: #fff; }
.tabs [data-tab="driver"], .tabs [data-tab="fleet"] { display: none; }
.panel { grid-column: 2; grid-row: 3; min-width: 0; padding: 22px 24px; margin: 0; border-radius: 10px; border: 1px solid #d4dfe0; box-shadow: 0 4px 11px #0d30320b; }
.panel h2 { font-size: 21px; letter-spacing: .01em; }
.panel-head { margin-bottom: 18px; }
.sub { color: #687d83; line-height: 1.5; }
.controls { align-items: center; }
.table-wrap { border-radius: 7px; border-color: #dce5e6; }
.table { min-width: 760px; font-size: 12px; }
.table th { background: #edf3f2; color: #3d5d64; position: sticky; top: 0; z-index: 1; }
.table th, .table td { padding: 10px 11px; border-bottom-color: #e7eeee; }
.table tbody tr:nth-child(even) { background: #fafcfc; }
.table tbody tr:hover { background: #eaf5f2; }
.table .number { color: #12656d; }
.pill { background: #e6f1ed; color: #1b6468; }
.hint { border-color: #d5e2e1; background: #f2f7f6; color: #48666b; }
.day-button { background: #f5f8f7; border-color: #cbdad9; color: #34565d; }
.day-button.active { background: #1b5860; border-color: #1b5860; color: #fff; }
.mini-stat, .analysis-card, .source-card { border-color: #dce5e5; background: #f8fbfa; }
.analysis-card strong { color: #15636c; }
.mapbox, .stop-list { border-radius: 7px; }
.stop-row .seq { background: #e4f1ed; color: #1a686d; }
#toast { background: #163b44; border-radius: 7px; }
body[data-query-mode="driver"] .hero, body[data-query-mode="fleet"] .hero, body[data-query-mode="history"] .hero,
body[data-query-mode="driver"] .tabs, body[data-query-mode="fleet"] .tabs, body[data-query-mode="history"] .tabs { display: none; }
body[data-query-mode="driver"] .panel.active, body[data-query-mode="fleet"] .panel.active, body[data-query-mode="history"] .panel.active { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 900px) {
  .top-inner { padding: 11px 16px; }
  .shell { display: block; padding: 14px 14px 35px; }
  .query-modes { gap: 6px; }
  .query-mode { padding: 10px; gap: 7px; }
  .mode-icon, .mode-arrow { display: none; }
  .query-mode b { font-size: 13px; }
  .query-mode small { font-size: 10px; }
  .hero { padding: 18px; margin: 0 0 12px; }
  .tabs { position: static; flex-direction: row; overflow-x: auto; padding: 5px; margin-bottom: 10px; }
  .tab { width: auto; white-space: nowrap; padding: 9px 11px; }
  .panel { padding: 17px; }
}
@media (max-width: 600px) {
  .brand { font-size: 15px; }
  .top-right span { display: none; }
  .query-mode { justify-content: center; text-align: center; min-height: 56px; }
  .query-mode small { display: none; }
  .search-row > .field, .search-row > .button { flex: 1 1 100%; max-width: none; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .panel-head .controls { width: 100%; }
  .panel-head .controls > * { flex: 1 1 130px; }
}

:root { background: #f0f5f8; }
body { background: #f0f5f8; }
a { color: #0769ae; }
.top { background: #0566a8; border-bottom-color: #8cc63f; }
.top-right strong { color: #d7f19b; }
.brand-mark { background: #fff; width: 38px; height: 38px; border-radius: 7px; }
.brand-mark img { width: 24px; height: 24px; image-rendering: auto; }
.livery-chip { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 16px; border-radius: 6px; padding: 3px 8px 3px 3px; background: #ffffffee; color: #165782; font-size: 10px; font-weight: 750; letter-spacing: .03em; }
.livery-chip img { width: 43px; height: 27px; object-fit: contain; }
.hero { position: relative; overflow: hidden; background: linear-gradient(110deg,#064f90,#0071bc 74%,#0a81bf); box-shadow: 0 9px 23px #075d9a21; }
.hero::before { content: ""; position: absolute; height: 9px; left: 0; right: 0; bottom: 0; background: #8cc63f; }
.hero-livery { position: absolute; top: 18px; right: 24px; width: 171px; height: 87px; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px #003d7040; transform: rotate(3deg); pointer-events: none; }
.hero-livery img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero h1, .hero .route-description { max-width: calc(100% - 185px); }
.hero .search-row, .hero .metrics, .hero .route-results { position: relative; z-index: 1; }
.eyebrow { color: #cced90; }
.route-description, .status-line { color: #dcecf5; }
.metric { background: #075a9b; }
.metrics { border-color: #4c99c5; background: #4c99c5; }
.metric span { color: #d2e6f1; }
.query-mode.active { border-color: #8cc63f; background: #f8fce9; }
.query-mode.active .mode-icon { background: #8cc63f; color: #164f7d; }
.query-mode:hover { border-color: #7db6d5; background: #f4faff; }
.query-mode.active:hover { border-color: #8cc63f; background: #f8fce9; }
.mode-icon { background: #e5f1f6; color: #0764a3; }
.button.primary, .button.primary:hover { background: #8cc63f; color: #164064; border-color: #8cc63f; }
.button.soft { background: #e9f4fa; color: #0969a8; border-color: #c6e1ef; }
.button:hover { border-color: #68a7ce; }
.tab.active { background: #0870b2; }
.tab:hover { background: #e8f4f9; }
.table th { background: #eaf4f9; color: #225c7e; }
.table tbody tr:hover { background: #eef8fc; }
.table .number { color: #056db3; }
.pill { background: #eaf6d9; color: #427b0e; }
.day-button.active { background: #0870b2; border-color: #0870b2; }
.analysis-card strong { color: #0870b2; }
.hint { background: #f2f8fb; border-color: #d5e7f0; color: #466977; }
.model-search { padding: 13px; border-radius: 8px; border: 1px solid #d7e7ee; background: #f6fafc; }
.model-search::before { content: "车型筛选"; color: #27739d; font-size: 12px; font-weight: 800; }
.model-search input:first-of-type { min-width: 220px; }
.model-search input:nth-of-type(2) { min-width: 170px; }
.model-field { position: relative; flex: 0 1 260px; min-width: 220px; }
.model-field > input { width: 100%; }
.model-suggestions { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; border: 1px solid #bdd7e5; border-radius: 7px; background: #fff; box-shadow: 0 12px 24px #174e6c23; z-index: 40; }
.model-suggestions.active { display: block; }
.model-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid #e7eff2; background: #fff; color: #19445d; padding: 9px 11px; text-align: left; font-size: 12px; }
.model-option:last-child { border-bottom: 0; }
.model-option:hover, .model-option:focus-visible { background: #eef8e0; }
.model-option small { color: #6b8491; white-space: nowrap; }
.account-button { flex: none; border: 1px solid #c9eb93; border-radius: 9px; padding: 9px 12px; background: #f3fbdc; color: #235b14; font-size: 12px; font-weight: 800; }
.account-button:hover { background: #fff; }
.private-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; margin-bottom: 13px; border: 1px solid #d4e6f0; border-radius: 10px; background: #f3f8fb; color: #235c78; font-size: 13px; font-weight: 800; }
.private-lock[hidden] { display: none; }
.private-cell { color: #7992a1; font-size: 12px; }
.arrival-metrics { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 6px; color: #66818d; font-size: 11px; }
.arrival-metrics b { color: #155a7c; font-weight: 800; }
.auth-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: #0c263ab8; }
.auth-overlay[hidden], .auth-card [hidden] { display: none; }
.auth-card { position: relative; width: min(100%, 430px); padding: 28px; border: 1px solid #cbe4ed; border-radius: 18px; background: #fff; color: #18394d; box-shadow: 0 24px 80px #071d3059; }
.auth-card h2 { margin: 8px 0 5px; font-size: 24px; }
.auth-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e9f5d8; }
.auth-sub, .auth-note { color: #5d7785; font-size: 13px; line-height: 1.5; }
.auth-note { margin-bottom: 0; font-size: 11px; }
.auth-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: #64808d; font-size: 26px; }
.auth-card form { display: grid; gap: 8px; margin-top: 20px; }
.auth-card form label { font-size: 12px; font-weight: 800; }
.auth-card form button { margin-top: 5px; }
.auth-message { min-height: 18px; margin-top: 12px; color: #bd4538; font-size: 12px; }
.auth-account { margin: 19px 0 8px; padding: 13px; border-radius: 9px; background: #f0f8e4; }
.auth-account strong { display: block; margin-top: 3px; }
.auth-contact { margin: 17px 0; padding: 14px; border: 1px solid #cfe4ef; border-radius: 11px; background: #f4f9fc; }
.auth-contact strong { display: block; color: #1b526c; font-size: 14px; }
.auth-contact p { margin: 7px 0 11px; color: #5d7785; font-size: 12px; line-height: 1.5; }
.auth-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auth-contact-actions .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 12px; }
@media (max-width: 700px) {
  .top-inner { flex-wrap: wrap; }
  .account-button { margin-left: auto; }
  .livery-chip { order: 3; width: 100%; justify-content: center; margin: 2px 0 0; padding-right: 3px; }
  .livery-chip span { display: block; }
  .hero-livery { width: 92px; height: 49px; right: 15px; top: 15px; }
  .hero h1, .hero .route-description { max-width: calc(100% - 100px); }
  .model-field, .model-search input, .model-search button { flex: 1 1 100%; }
}
.retired-record,.retired-record a,.table .retired-record.number{color:#89949f!important;filter:grayscale(1);text-decoration-color:#a0a8af}.retired-number:after{content:' 已报废';font-size:10px;font-weight:700;margin-left:4px;color:#89949f}
.history-query-grid{display:grid;gap:10px}.history-query{border:1px solid #dce6ef;border-radius:12px;background:#fbfdff}.history-query[open]{background:#fff;box-shadow:0 4px 15px #213a5409}.history-query summary{cursor:pointer;list-style:none;padding:15px 17px;font-weight:800;color:#254b69}.history-query summary::-webkit-details-marker{display:none}.history-query summary:after{content:'⌄';float:right;color:#6d879b}.history-query[open] summary:after{content:'⌃'}.history-query-body{padding:0 17px 18px}.history-query .route-results{display:block;box-shadow:none;max-height:190px;margin:9px 0 14px}.history-query h3{font-size:16px;margin:24px 0 8px}
.availability-strip{padding:9px 18px;background:#e9f5dc;color:#285b24;text-align:center;font-size:12px;font-weight:700;border-bottom:1px solid #cae5ac}
.availability-overlay{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:22px;background:#103b56ed}
.availability-overlay[hidden]{display:none}
.availability-card{width:min(100%,520px);padding:30px;border-radius:18px;border-top:7px solid #8cc63f;background:#fff;box-shadow:0 24px 80px #071d3059}
.availability-card h1{font-size:28px;margin:14px 0 10px;color:#153e59}
.availability-card p{color:#456575;line-height:1.7}
.availability-card small{color:#658090}
.availability-tag{display:inline-block;padding:5px 10px;border-radius:30px;background:#e9f5dc;color:#346d24;font-size:12px;font-weight:800}