:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #1d2433; --muted: #667085; --line: #e3e6ec;
  --ok: #12a150; --fl: #e08a00; --mn: #2563eb; --rj: #98a2b3; --err: #d92d20; --accent: #1f3864;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: var(--accent); color: #fff; }
header .brand { font-weight: 700; letter-spacing: .2px; }
header .sub { font-weight: 400; opacity: .7; }
header .jobbar { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
header select, header input { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid #c9d1e3; }
header .who { white-space: nowrap; }
#jobState { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { flex: 1; display: grid; grid-template-columns: 1fr 520px; min-height: 0; }
#viewerWrap { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.sheetbar { display: flex; gap: 12px; align-items: center; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.legend { color: var(--muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.sw { display: inline-block; width: 12px; height: 12px; border: 2px solid; border-radius: 2px; vertical-align: -2px; }
.sw.ok { border-color: var(--ok); } .sw.fl { border-color: var(--fl); } .sw.mn { border-color: var(--mn); } .sw.rj { border-color: var(--rj); border-style: dashed; }
#viewer { flex: 1; background: #fff; }
aside { display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; padding: 10px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.pill { background: var(--err); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; }
.pill:empty { display: none; }
.tab { display: none; overflow: auto; padding: 10px; flex: 1; }
.tab.on { display: block; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; background: #f0f2f6; }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.on { background: #eef4ff; }
.exports { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.btn, button { font: inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid #c9d1e3; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
header .btn { color: var(--ink); }
.btn.primary, button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.disabled { opacity: .45; pointer-events: none; }
button.danger { color: var(--err); border-color: #f3b4ae; }
#drawBtn.on { background: var(--mn); color: #fff; }
.note { color: var(--muted); font-size: 13px; }
#flagList { list-style: none; padding: 0; margin: 0; }
.flag { border: 1px solid var(--line); border-left: 4px solid var(--fl); border-radius: 6px; padding: 8px; margin-bottom: 8px; cursor: pointer; }
.flag.error { border-left-color: var(--err); }
.flag.resolved { opacity: .6; border-left-color: var(--ok); }
.flag.on { box-shadow: 0 0 0 2px #b2ccff; }
.flag .fh { font-size: 12px; color: var(--muted); }
.flag input { width: 100%; margin: 6px 0; padding: 4px 6px; font: inherit; }
.res { font-size: 12px; color: var(--ok); }
#itemPanel label { display: block; margin: 6px 0; font-size: 13px; color: var(--muted); }
#itemPanel input { display: block; width: 100%; padding: 4px 6px; font: inherit; color: var(--ink); }
.acts { display: flex; gap: 8px; margin: 10px 0; }
.st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; color: #fff; background: var(--rj); }
.st.confirmed { background: var(--ok); } .st.flagged { background: var(--fl); } .st.manual { background: var(--mn); }
.box { border: 2px solid var(--ok); border-radius: 2px; cursor: pointer; }
.box.flagged { border-color: var(--fl); background: rgba(224, 138, 0, .08); }
.box.manual { border-color: var(--mn); }
.box.rejected { border: 2px dashed var(--rj); }
.box.hi { box-shadow: 0 0 0 3px rgba(37, 99, 235, .55); }
.box.sel { border-width: 3px; box-shadow: 0 0 0 3px rgba(31, 56, 100, .45); }
.flagpin { border: 2px dotted var(--err); border-radius: 50%; pointer-events: auto; cursor: pointer; }
.flagpin.warn { border-color: var(--fl); }
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 16px; width: 360px; }
dialog label { display: block; margin: 6px 0; font-size: 13px; color: var(--muted); }
dialog input { display: block; width: 100%; padding: 5px 6px; font: inherit; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 12px 0 0; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; grid-template-rows: 60vh 1fr; } }