:root {
  --bg: #f6f7f9; --surface: #ffffff; --ink: #1b1f24; --muted: #5c6670; --line: #dfe3e8;
  --accent: #1f5fbf; --accent-ink: #ffffff; --good: #18794e; --bad: #b42318; --warn-bg: #fff4e0; --warn-ink: #7a4a00;
  --info-bg: #e8f0fb; --info-ink: #1f3f73; --sample: #8a3ffc; --cached: #8a6d00; --live: #18794e;
  --radius: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111418; --surface: #1a1e24; --ink: #e8ebef; --muted: #9aa4ae; --line: #2c333b;
    --accent: #6ea2ff; --accent-ink: #0b1220; --good: #4cc38a; --bad: #ff7b72; --warn-bg: #3a2a0a; --warn-ink: #ffcf7a;
    --info-bg: #15233b; --info-ink: #a9c7ff; --sample: #b38cff; --cached: #e3c14d; --live: #4cc38a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); }
a { color: var(--accent); }
main { max-width: 1120px; margin: 0 auto; padding: 16px; }
h1 { font-size: 24px; margin: 8px 0 12px; } h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.topbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 2px 0; }
.topbar nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--accent); }
.count { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 6px; font-size: 12px; }
.logout { margin: 0; }
.banner { padding: 8px 16px; font-size: 14px; }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); } .banner.info { background: var(--info-bg); color: var(--info-ink); }
.banner.error { background: #fde8e7; color: var(--bad); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card.narrow { max-width: 420px; margin: 48px auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cards .card { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid3 .card { margin: 0 0 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.grid2.gap { gap: 16px; }
@media (max-width: 860px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid2, .grid4 { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); margin: 6px 0; }
input, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
table input { width: 100%; }
fieldset.inline { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
fieldset.inline legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
fieldset.inline label { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); }
details.more { margin: 12px 0; } details.more summary, details summary { cursor: pointer; color: var(--accent); }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
.btn.small { padding: 5px 10px; font-size: 13px; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.actions, .toolbar, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.row input { width: auto; flex: 1; } .row input.cur { flex: 0 0 64px; }
.inline-form { display: inline; margin-left: 8px; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); } .small { font-size: 13px; } .hint { font-size: 12px; color: var(--muted); }
.error { color: var(--bad); } .ok { color: var(--good); } .warn-text { color: var(--warn-ink); background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; font-size: 13px; margin: 6px 0; }
.note { font-size: 13px; color: var(--muted); margin: 4px 0; }
.callout { background: var(--info-bg); color: var(--info-ink); padding: 10px 14px; border-radius: var(--radius); }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.live { color: var(--live); border-color: var(--live); } .badge.sample { color: var(--sample); border-color: var(--sample); }
.badge.cached { color: var(--cached); border-color: var(--cached); } .badge.unknown { color: var(--bad); border-color: var(--bad); }
.badge.user { color: var(--accent); border-color: var(--accent); }
.st-active { color: var(--good); border-color: var(--good); } .st-paused { color: var(--warn-ink); } .st-booked { color: var(--accent); border-color: var(--accent); }
.k-urgent { color: var(--bad); border-color: var(--bad); } .k-system { color: var(--warn-ink); }
.watch { text-decoration: none; color: inherit; display: block; }
.watch:hover { border-color: var(--accent); }
.watch-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.watch-top .badge, .head-row .badge { flex: 0 0 auto; align-self: flex-start; }
.chart-wrap { overflow-x: auto; }
.chart { min-width: 480px; max-width: 820px; display: block; }
@media (max-width: 700px) {
  .topbar { flex-wrap: nowrap; overflow-x: auto; gap: 14px; }
  .topbar nav { flex-wrap: nowrap; white-space: nowrap; }
  .brand { white-space: nowrap; }
  .logout { white-space: nowrap; }
}
.route { font-weight: 700; font-size: 17px; }
.price-row { display: flex; gap: 16px; align-items: flex-end; margin: 10px 0 4px; }
.price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.down { color: var(--good); } .up { color: var(--bad); }
.deal { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--good); }
.spark { width: 100%; height: 48px; } .spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stat .price { margin: 4px 0; }
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--line); } .chart .tick { fill: var(--muted); font-size: 11px; }
.chart .live-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.chart .cached-line { fill: none; stroke: var(--cached); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .pt { fill: var(--accent); }
.legend { font-size: 13px; color: var(--muted); } .key { display: inline-block; width: 18px; height: 3px; vertical-align: middle; }
.live-key { background: var(--accent); } .cached-key { border-top: 2px dashed var(--cached); height: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.grid-table td, .grid-table th { text-align: center; } .grid-table td.best { background: var(--info-bg); font-weight: 700; }
tr.total td { font-weight: 700; }
.offer { border-top: 1px solid var(--line); padding: 10px 0; }
.seg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; }
.ident { font-weight: 700; min-width: 64px; } .op { font-weight: 600; }
.book { margin-top: 6px; }
.meter { width: 100%; height: 10px; accent-color: var(--accent); }
.alert-line { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
details.alert summary { list-style: none; } details.alert pre, .card pre { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); padding: 10px; border-radius: 8px; }
.alert.unread summary { font-weight: 600; }
.vs-met { color: var(--good); } .vs-not_met { color: var(--bad); } .vs-stale, .vs-no_rule { color: var(--warn-ink); }
.secret { font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.pay { display: flex; gap: 14px; text-decoration: none; color: inherit; } .pay:hover { border-color: var(--accent); }
.pay-icon { width: 40px; height: 40px; flex: 0 0 40px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.empty { text-align: center; padding: 32px; }
.booked-box summary { display: inline-block; }
.foot { max-width: 1120px; margin: 0 auto; padding: 8px 16px 32px; color: var(--muted); font-size: 12px; }