:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1c2330; --muted: #6b7482; --line: #e1e4ea; --accent: #2563eb;
  --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --hover: #fff4c2; --sel: #dbeafe;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); height: 100vh; overflow: hidden; }
#app { height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; overflow: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 17px; margin: 0; } h3 { font-size: 15px; margin: 0; } h4 { margin: 14px 0 6px; font-size: 13px; }
button, select, input, textarea { font: inherit; }
button { border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 3px 9px; cursor: pointer; color: var(--ink); }
button:hover { border-color: #b9c0cc; }
button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); }
button.link { border: 0; background: none; color: var(--accent); padding: 0 4px; }
button.small, .small { font-size: 11.5px; }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: #fff; }
.muted { color: var(--muted); } .warn { color: var(--warn); } .ok { color: var(--ok); } .pad { padding: 6px 8px; }
.grow { flex: 1; } .block { display: block; margin: 4px 0; } .click { cursor: pointer; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.bar.tight { padding: 4px 6px; gap: 6px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.tag { display: inline-block; padding: 0 6px; border-radius: 9px; background: #eef1f5; font-size: 11px; margin-left: 4px; }
.tag.done, .tag.approved { background: #dcfce7; } .tag.flagged, .tag.needs { background: #fef3c7; } .tag.deleted, .tag.exclude { background: #fee2e2; }

header.top { display: flex; align-items: center; gap: 14px; padding: 6px 14px; background: #121826; color: #e5e9f0; }
header.top a, header.top .link { color: #c7d2fe; }
header.top a.on { color: #fff; font-weight: 600; }
header.top nav { display: flex; gap: 14px; }
header.top select { background: #1f2837; color: #fff; border-color: #334155; }
.brand { letter-spacing: .02em; }
details.menu { position: relative; }
details.menu summary { cursor: pointer; list-style: none; color: #c7d2fe; }
details.menu > div { position: absolute; right: 0; top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px; z-index: 50; min-width: 240px; box-shadow: 0 6px 20px #0002; }
details.menu > div a { display: block; padding: 4px 8px; color: var(--ink) !important; }

.login { display: grid; place-items: center; height: 100vh; }
.login form { background: #fff; padding: 28px; border-radius: 10px; box-shadow: 0 6px 30px #0001; display: flex; flex-direction: column; gap: 10px; width: 300px; }
.login h1 { font-size: 18px; margin: 0 0 8px; }

.page { padding: 14px 18px; } .page.narrow { max-width: 900px; }
.summary { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.summary .prog { width: 260px; }
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
table.grid th { position: sticky; top: 0; background: #f0f2f5; font-weight: 600; z-index: 1; white-space: nowrap; }
table.grid tr.click:hover td { background: #f3f6fb; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog { display: flex; height: 8px; width: 140px; background: #e9ecf1; border-radius: 4px; overflow: hidden; }
.prog i { display: block; height: 100%; } .prog i.approved { background: var(--ok); } .prog i.flagged { background: var(--warn); } .prog i.deleted { background: #9ca3af; }
.prog-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* paper view */
.paper { display: flex; flex-direction: column; height: 100%; }
#phead { padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line); }
#phead input.grow { min-width: 200px; }
.split { flex: 1; min-height: 0; display: flex; }
.left { flex: 1.35; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.right { flex: 1; min-width: 380px; display: flex; flex-direction: column; background: #fff; }
.tabs { display: flex; gap: 4px; padding: 5px 6px 0; overflow-x: auto; background: #eef0f4; }
.tab { border-radius: 6px 6px 0 0; border-bottom: 0; white-space: nowrap; font-size: 12px; background: #e3e6eb; }
.tab.on { background: #fff; color: var(--ink); border-color: var(--line); font-weight: 600; }
#ctools .bar { background: #fff; border-bottom: 1px solid var(--line); }
.cal { font-size: 10px; padding: 0 5px; border-radius: 8px; margin-left: 5px; background: #e5e7eb; font-weight: 500; }
.cal.auto { background: #dbeafe; } .cal.gotion { background: #dcfce7; } .cal.human { background: #bbf7d0; } .cal.suspect { background: #fee2e2; } .cal.none { background: #f3f4f6; color: #999; }
.viewport { position: relative; flex: 1; min-height: 200px; overflow: hidden; background: #d9dde3; cursor: grab; touch-action: none; }
.viewport:active { cursor: grabbing; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 1px 8px #0003; background: #fff; }
.stage img { display: block; user-select: none; image-rendering: auto; }
svg.overlay { position: absolute; left: 0; top: 0; overflow: visible; }
svg.overlay.mode-add { cursor: crosshair; } svg.overlay.mode-calib { cursor: crosshair; }
.pt { cursor: pointer; }
.pt .halo { fill: none; stroke: transparent; }
.pt.hover .halo { stroke: #111; fill: #ffe06655; }
.pt.sel .halo { stroke: var(--accent); fill: #2563eb22; }
.pt.hover circle:not(.halo) { fill-opacity: 1; }
.pt .lbl { fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
rect.box { fill: none; stroke: #6366f1; stroke-dasharray: 6 4; opacity: .6; pointer-events: none; }
rect.lasso { fill: #2563eb18; stroke: var(--accent); stroke-dasharray: 4 3; }
.tick line:not(.grab) { stroke-dasharray: 5 4; }
.tick.x line:not(.grab) { stroke: #2563eb; } .tick.y line:not(.grab) { stroke: #ea580c; }
.tick line.grab { stroke: transparent; cursor: ew-resize; }
.tick.y line.grab { cursor: ns-resize; }
.tick text { paint-order: stroke; stroke: #fff; stroke-width: 3px; font-weight: 600; }
.tick.x text { fill: #1d4ed8; } .tick.y text { fill: #c2410c; }
.tip { position: absolute; display: none; pointer-events: none; background: #111827ee; color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; max-width: 280px; z-index: 5; }
.tip .muted { color: #cbd5e1; }
.hint { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: #334155; background: #ffffffcc; padding: 2px 6px; border-radius: 4px; pointer-events: none; }
#plotbox { height: 250px; background: #fff; border-top: 1px solid var(--line); overflow: hidden; }
svg.aplot text { font-size: 10.5px; fill: #555; } svg.aplot .axl { fill: #888; }
svg.aplot line.grid { stroke: #eef0f3; } svg.aplot line.fit { stroke-width: 1.2; opacity: .6; }
svg.aplot .pp { cursor: pointer; stroke: #fff; stroke-width: .8; }
svg.aplot .pp.off { stroke: var(--bad); stroke-width: 2; }
svg.aplot .pp.hover { stroke: #111; stroke-width: 2.5; r: 6; }
svg.aplot .pp.sel { stroke: var(--accent); stroke-width: 2.5; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 10px; font-size: 11.5px; max-height: 38px; overflow: auto; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

#rtools { border-bottom: 1px solid var(--line); }
#rtools .bulk { background: var(--sel); }
.rtable { flex: 1; overflow: auto; }
table.rows td { padding: 3px 5px; font-size: 12px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
table.rows tr.hover td { background: var(--hover) !important; }
table.rows tr.sel td { background: var(--sel); }
table.rows tr.deleted td { color: #9ca3af; text-decoration: line-through; }
table.rows tr.deleted td.st { text-decoration: none; }
td.st { text-align: center; font-weight: 700; width: 18px; } td.st.approved { color: var(--ok); } td.st.flagged { color: var(--warn); } td.st.deleted { color: #9ca3af; }
td.key { white-space: nowrap; } td.ser { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
td.comp { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.note { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.edit { cursor: text; } td.changed { background: #fefce8; box-shadow: inset 2px 0 #eab308; }
input.cellin { width: 100%; min-width: 60px; padding: 1px 3px; }
i.preview { color: var(--accent); }
.calib { padding: 4px 8px 8px; overflow: auto; max-height: 100%; }
.calib fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; padding: 4px 8px 8px; }
.calib legend { font-weight: 600; padding: 0 4px; }
table.ticks input { width: 90px; } table.ticks th { font-weight: 500; color: var(--muted); text-align: left; }
.right:has(.calib) .rtable { max-height: 35%; }

.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 560px; max-width: 100vw; background: #fff; box-shadow: -8px 0 30px #0002; z-index: 40; overflow: auto; padding: 8px 14px 40px; }
.drawer .st { padding: 0 6px; border-radius: 8px; background: #eef1f5; font-size: 11px; }
table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 2px 6px 2px 0; width: 36%; vertical-align: top; font-size: 11.5px; word-break: break-all; }
table.kv td input, table.kv td textarea { width: 100%; font-size: 12px; }
table.kv tr.changed th { color: #a16207; }
table.comps { width: 100%; border-collapse: collapse; } table.comps td { border-bottom: 1px solid var(--line); padding: 4px 3px; vertical-align: top; }
td.smi input { font-family: ui-monospace, monospace; font-size: 11.5px; }
img.mol { height: 90px; } img.mol.big { height: 200px; display: block; margin: 6px 0; }
.badge { font-size: 11px; margin-left: 6px; } .badge.ok { color: var(--ok); } .badge.bad { color: var(--bad); font-weight: 600; }
.bar.sticky { position: sticky; bottom: -40px; background: #fff; border-top: 1px solid var(--line); padding: 8px 0; }
.hist div { padding: 2px 0; }

.comp-list { display: flex; flex-direction: column; gap: 8px; }
.ccard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ccard.conflict { border-left: 4px solid var(--warn); } .ccard.invalid { border-left: 4px solid var(--bad); }
.chead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.variants { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.variant { border: 1px solid var(--line); border-radius: 6px; padding: 6px; width: 230px; display: flex; flex-direction: column; gap: 3px; }
.variant img.mol { height: 130px; width: 200px; object-fit: contain; }
.variant .mol.empty { height: 130px; display: grid; place-items: center; color: var(--muted); background: #fafafa; }
.variant code { font-size: 11px; word-break: break-all; }
.modal { position: fixed; inset: 0; background: #0006; display: grid; place-items: center; z-index: 60; }
.dialog { background: #fff; border-radius: 10px; padding: 16px 18px; width: 620px; max-width: 95vw; max-height: 90vh; overflow: auto; }
.dialog label.block input { display: block; margin-top: 3px; font-family: ui-monospace, monospace; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 100; }
.toast { background: #111827; color: #fff; padding: 7px 14px; border-radius: 6px; box-shadow: 0 4px 14px #0003; }
.toast.err { background: var(--bad); } .toast.warn { background: var(--warn); }
.help li { margin: 6px 0; }
.tick.passive { opacity: .45; pointer-events: none; }
.tick.passive text { display: none; }