:root {
  --bg: #f3f4f6;
  --line: #e6e8eb;
  --ink: #1f2328;
  --muted: #66707a;
  --accent: #1677ff;
  --bad: #cf1322;
  --warn: #d48806;
  --ok: #389e0d;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 "IBM Plex Sans", "Noto Sans CJK SC", "PingFang SC", sans-serif;
}
button, input, select { font: inherit; color: inherit; }
.top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}
.pill {
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fafbfc;
}
.pill.bad { color: var(--bad); background: #fff1f0; border-color: #ffccc7; }
.pill.ok { color: var(--ok); background: #f6ffed; border-color: #b7eb8f; }
.pill.warn { color: var(--warn); background: #fffbe6; border-color: #ffe58f; }
.clock { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.note { min-height: 18px; padding: 6px 16px 0; color: var(--muted); }
.note.bad { color: var(--bad); }
.wrap {
  padding: 12px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.hd .tools { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.body { overflow: auto; max-height: calc(100vh - 180px); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 12px; text-align: left; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; background: #fafbfc; position: sticky; top: 0; }
.num { font-family: "IBM Plex Mono", "Noto Sans Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
tr.current td { background: #f7fbff; }
button, select, input[type="text"], input[type="number"] {
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d0d5dd;
  background: #fff;
  padding: 0 10px;
}
button.pri { background: var(--accent); color: #fff; border-color: var(--accent); }
button:disabled { color: #b0b6be; background: #f5f6f7; border-color: #e6e8eb; }
input[type="text"] { width: 120px; }
input.dwell { width: 64px; text-align: right; padding-right: 4px; }
label.loop { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 500; }
label.loop input { width: auto; height: auto; }
select { max-width: 160px; }
.sub { font-weight: 400; color: var(--muted); }
.auto-card, .route-card { grid-column: 1 / -1; }
.hd { overflow-x: auto; }
.auto-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  writing-mode: horizontal-tb;
}
.auto-cell {
  flex: 1 0 8.5em;
  min-width: 8.5em;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.auto-cell:last-child { border-right: 0; }
.auto-name { color: var(--muted); font-size: 12px; font-weight: 500; }
.auto-status { font-weight: 600; margin-top: 2px; }
.auto-notes {
  border-top: 1px solid var(--line);
  padding: 6px 12px;
  white-space: nowrap;
  overflow-x: auto;
  color: var(--muted);
  min-height: 28px;
}
@media (max-width: 960px) {
  .wrap { grid-template-columns: 1fr; }
  .body { max-height: none; }
}