.viz-root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f3f2ee;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --series-flight: #2a78d6;
  --series-train: #eb6834;
  --series-mixed: #1baf7a;
  --together: rgba(42, 120, 214, 0.08);
  --commute: #d6d5ce;
  --work: #ecebe6;
  --warning: #fab219;
  --serious: #ec835a;
  --good-text: #006300;
  --focus: #2a78d6;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #232321;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --series-flight: #3987e5;
    --series-train: #d95926;
    --series-mixed: #199e70;
    --together: rgba(57, 135, 229, 0.14);
    --commute: #4a4a46;
    --work: #2a2a28;
    --good-text: #0ca30c;
    --focus: #3987e5;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #f9f9f7;
}

@media (prefers-color-scheme: dark) {
  html, body { background: #0d0d0d; }
}

.viz-root {
  background: var(--page);
  color: var(--text-primary);
  font: 14px/1.5 system-ui, -apple-system, "PingFang SC", "Segoe UI", sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  min-height: 100vh;
}

h1 { font-size: 22px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 6px; font-weight: 600; }
.sub { color: var(--text-secondary); margin: 2px 0 0; font-size: 13px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

button {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--text-primary);
  color: var(--surface-1);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--text-primary); }
button.link {
  background: none; border: 0; padding: 0; color: var(--text-secondary);
  text-decoration: underline; text-underline-offset: 2px; font-size: 12px;
}
button:focus-visible, select:focus-visible, input:focus-visible, tr:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

input, select {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
}
input[type="number"] { width: 72px; font-variant-numeric: tabular-nums; }
input[type="time"] { width: 100px; }

label { display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary); font-size: 12px; }
label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-bottom: 16px;
}
.head-actions { display: flex; gap: 8px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

details > summary { cursor: pointer; font-weight: 600; }
.settings > summary { font-size: 15px; }
.settings-top { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }

.persons { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.person { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.person-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.person-head input { width: 80px; font-weight: 600; }
.person-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.places { width: 100%; border-collapse: collapse; font-size: 13px; }
.places th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: 12px; padding: 4px 6px; }
.places td { padding: 3px 6px; border-top: 1px solid var(--grid); }
.places tr.off td:not(:first-child) { opacity: 0.45; }
.places .kind { color: var(--text-muted); font-size: 12px; }

.advanced { margin-top: 12px; }
.advanced > summary { font-weight: 500; color: var(--text-secondary); }
.grid-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin: 4px 0 16px;
}

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; min-width: 150px;
}
.stat .label { color: var(--text-secondary); font-size: 12px; }
.stat .value { font-size: 22px; font-weight: 600; }
.stat .hint { color: var(--text-muted); font-size: 12px; }

.charts { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 960px) { .charts { grid-template-columns: 1fr; } }
.chart { margin: 0 0 16px; }
.chart figcaption { margin-bottom: 8px; }
.chart-body { position: relative; }
.chart-body svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 14px; height: 14px; }

.axis text, .tick text { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.grid line { stroke: var(--grid); stroke-width: 1; }
.axis line, .axis path { stroke: var(--axis); stroke-width: 1; }
.label-text { fill: var(--text-secondary); font-size: 12px; }
.label-strong { fill: var(--text-primary); font-size: 12px; font-weight: 600; }
.hit { fill: transparent; cursor: pointer; }
.pt { stroke: var(--surface-1); stroke-width: 2; }
.pt.sel { stroke: var(--text-primary); stroke-width: 2.5; }
.frontier { fill: none; stroke: var(--axis); stroke-width: 1; }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--surface-1, #fcfcfb); color: var(--text-primary, #0b0b0b);
  border: 1px solid rgba(11, 11, 11, 0.12); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 10px; font: 12px/1.5 system-ui, -apple-system, "PingFang SC", sans-serif;
  max-width: 320px;
}
@media (prefers-color-scheme: dark) {
  .tooltip { background: #232321; color: #f0efec; border-color: rgba(255, 255, 255, 0.12); }
}
.tooltip .tt-title { color: inherit; opacity: 0.75; margin-bottom: 2px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.tooltip .tt-row strong { font-weight: 600; }
.tooltip .key-line { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }

.detail h2 { margin-bottom: 4px; }
.detail .summary-line { color: var(--text-secondary); margin: 0 0 12px; }
.timeline svg { display: block; width: 100%; height: auto; }
.itin { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-top: 12px; }
.itin ol { margin: 0; padding-left: 18px; }
.itin li { margin: 2px 0; }
.itin .muted { color: var(--text-muted); }
.cost-break { margin-top: 12px; color: var(--text-secondary); font-size: 13px; }

.table-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.table-wrap { overflow-x: auto; }
table#routes { width: 100%; border-collapse: collapse; font-size: 13px; }
#routes th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--axis); white-space: nowrap; }
#routes td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
#routes .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#routes tbody tr { cursor: pointer; }
#routes tbody tr:hover { background: var(--surface-2); }
#routes tbody tr.sel { background: var(--together); }
#routes tbody tr.alt td { color: var(--text-secondary); }
#routes tbody tr.alt td:first-child { padding-left: 22px; }
.dest { font-weight: 600; white-space: nowrap; }
.dest .tag { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.leg { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.flight { background: var(--series-flight); }
.dot.train { background: var(--series-train); border-radius: 2px; }
.flags { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); }
.flag::before { content: "!"; display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center;
  border-radius: 50%; background: var(--warning); color: #0b0b0b; font-size: 10px; font-weight: 700; margin-right: 4px; }
.flag.info::before { content: "i"; background: var(--grid); color: var(--text-secondary); }
.empty { color: var(--text-secondary); padding: 24px 0; text-align: center; }
.foot { color: var(--text-muted); font-size: 12px; margin-top: 24px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #0b0b0b; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; }