:root { --bg: #f7f8fa; --fg: #1d2330; --muted: #6b7384; --line: #2f6fe0; --band: #2f6fe02a; --grid: #e3e6ec; --card: #fff;
  --cursor: #e0542f; --pulse: #2f6fe014; --window: #2f6fe066; --track: #e3e6ec; --trigger: #c77800;
  --marker: #8a3ffc; --span: #8a3ffc14; --anno: #b9d3ff; --anno-warn: #ffd27a; --anno-error: #ff9e9e; --anno-text: #1d2330; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171d; --fg: #e6e9ef; --muted: #98a0b0; --line: #6ea0ff; --band: #6ea0ff33; --grid: #262b35; --card: #1b1f27;
    --cursor: #ff7a52; --pulse: #6ea0ff1f; --window: #6ea0ff77; --track: #262b35; --trigger: #ffb347;
    --marker: #b68cff; --span: #b68cff1f; --anno: #243b63; --anno-warn: #5a4516; --anno-error: #5e2424; --anno-text: #e6e9ef; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--grid); }
.topbar h1 { margin: 0; font-size: 18px; }
.topbar p { margin: 0; color: var(--muted); }
.top-actions { display: flex; gap: 12px; align-items: center; }
.top-actions a { color: var(--line); }
.button { cursor: pointer; padding: 6px 12px; border-radius: 6px; background: var(--line); color: #fff; }
main { padding: 16px 20px; }
.drop { border: 2px dashed var(--grid); border-radius: 8px; padding: 32px; text-align: center; color: var(--muted); }
.drop.over { border-color: var(--line); color: var(--fg); }
.summary, .details { background: var(--card); border: 1px solid var(--grid); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.summary code, .details code { font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0; }
.lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--grid); }
.lane.ruler, .lane.overview { border-bottom: 0; }
.lane.overview canvas { cursor: pointer; }
.lane .name { font-weight: 600; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.lane .name small { display: block; font-weight: 400; color: var(--muted); }
.lane canvas { width: 100%; display: block; cursor: grab; touch-action: none; }
table { border-collapse: collapse; }
td, th { text-align: left; padding: 2px 12px 2px 0; vertical-align: top; }
.summary .aligned { display: block; margin-top: 4px; color: var(--muted); cursor: pointer; }
.lane.annotation .name { font-weight: 400; font-size: 12px; color: var(--muted); }
.lane.annotation.unsure canvas { opacity: 0.55; } .lane.annotation.unsure .name small { color: #b35900; }
.checks td.ok { color: #1a7f37; font-weight: 600; } .checks td.ng { color: #cf222e; font-weight: 600; } .checks td.unchecked { color: #b35900; font-weight: 600; } .checks td.measured { color: var(--muted); }
.markers .marker-row { display: flex; gap: 8px; align-items: center; margin: 2px 0; }
.markers button, .note-form button, .summary button { font: inherit; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--grid); background: var(--bg); color: var(--fg); cursor: pointer; }
.note-form { display: flex; gap: 8px; margin-top: 8px; } .note-form input { flex: 1; font: inherit; padding: 2px 6px; }
.summary .other { color: var(--muted); } .summary .other.unaligned { color: #cf222e; }
.summary .add-file { display: inline-block; margin-top: 4px; color: var(--line); cursor: pointer; text-decoration: underline; }
.tip { position: absolute; z-index: 10; pointer-events: none; background: var(--card); border: 1px solid var(--grid); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 2px 8px #0003; white-space: nowrap; font-variant-numeric: tabular-nums; }