:root { --bg:#f6f7f9; --card:#fff; --line:#dfe3e8; --text:#1c2430; --muted:#6b7684; --accent:#0b6b3a; --warn:#b45309; --err:#b91c1c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,sans-serif; }
.top { display:flex; gap:16px; align-items:center; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top .sub { color:var(--muted); }
nav { display:flex; gap:4px; margin-left:16px; }
nav a { padding:4px 12px; border-radius:6px; color:var(--text); text-decoration:none; }
nav a.on { background:var(--bg); font-weight:600; }
.modes { margin-left:auto; display:flex; gap:8px; }
.pill { font-size:12px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
.pill.warn { color:var(--warn); border-color:var(--warn); }
button { font:inherit; padding:6px 12px; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:6px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.muted { color:var(--muted); font-size:13px; }
.layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; padding:16px 20px; height:calc(100vh - 53px); }
.lists, .viewer { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:auto; }
.toolbar { display:flex; gap:8px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:2; flex-wrap:wrap; }
.spacer { flex:1; }
/* Each row is one submission (left cell) next to its report (right cell), so they always line up. */
.row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.row.head { font-weight:600; background:var(--bg); position:sticky; top:53px; z-index:1; }
.row.active { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.cell { padding:10px 12px; min-height:56px; display:flex; align-items:center; gap:10px; min-width:0; }
.cell .main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cell .side { flex:none; width:84px; display:flex; justify-content:flex-end; }
.row.head .cell { min-height:0; padding:6px 12px; }
.cell + .cell { border-left:1px solid var(--line); }
.cell.click { cursor:pointer; }
.cell.click:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.cell .t { display:flex; gap:8px; align-items:center; min-width:0; }
.cell .t label { display:flex; gap:8px; align-items:center; cursor:pointer; min-width:0; }
.name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prev { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { font-size:11px; text-align:center; padding:1px 7px; border-radius:99px; border:1px solid currentColor; white-space:nowrap; }
.badge.new { color:var(--accent); } .badge.updated, .badge.stale, .badge.queued, .badge.running { color:var(--warn); } .badge.error { color:var(--err); } .badge.done { color:var(--accent); }
.badge.running::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty { padding:24px; color:var(--muted); }
.viewer { padding:16px 18px; }
.vhead { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.vhead h2 { margin:0; font-size:18px; }
.tabs { display:flex; } .tab { border-radius:0; } .tab:first-child { border-radius:6px 0 0 6px; } .tab:last-child { border-radius:0 6px 6px 0; margin-left:-1px; }
.tab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.banner { padding:8px 12px; border-radius:6px; border:1px solid var(--warn); color:var(--warn); margin:8px 0; font-size:14px; }
.banner.ok { border-color:var(--accent); color:var(--accent); }
.banner.err { border-color:var(--err); color:var(--err); }
#v-body pre.plain { white-space:pre-wrap; font:inherit; margin:0; }
#v-body.report pre { background:var(--bg); padding:10px; border-radius:6px; overflow:auto; }
#v-body.report h1, #v-body.report h2, #v-body.report h3 { margin:1em 0 .3em; font-size:16px; }
.vfoot { margin-top:16px; display:flex; gap:8px; }
.settings { max-width:860px; margin:0 auto; padding:20px; }
.settings label { display:block; margin:14px 0 4px; font-weight:600; }
.settings input, .settings textarea { display:block; width:100%; margin-top:4px; padding:8px; font:14px/1.45 ui-monospace,Menlo,monospace; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:6px; }
.settings small { font-weight:400; color:var(--muted); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:16px; font-size:13px; color:var(--muted); }
.chip { font:12px ui-monospace,Menlo,monospace; padding:2px 8px; }
.settings .toolbar { border:0; padding:16px 0; position:static; }
#preview pre { white-space:pre-wrap; background:var(--card); border:1px solid var(--line); padding:10px; border-radius:6px; }
@media (max-width:900px) { .layout { grid-template-columns:1fr; height:auto; } }

#project-switch { margin-left:12px; font:inherit; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 16px 14px; margin:12px 0; }
.card h3 { margin:12px 0 8px; }
.inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.inline input[name=name] { width:260px; margin:0; }
.settings label.check { margin:0; font-weight:400; display:flex; gap:6px; align-items:center; }
.settings label.check input { width:auto; margin:0; }
button.danger { color:var(--err); border-color:var(--err); }
.files { margin-top:18px; border-top:1px solid var(--line); padding-top:10px; }
.files h3 { margin:0 0 6px; font-size:14px; }
.file { display:flex; gap:8px; align-items:center; padding:5px 8px; border-radius:6px; cursor:pointer; }
.file:hover { background:var(--bg); }
.file .k { font-size:11px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 5px; min-width:46px; text-align:center; }
.file .sz { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.back { margin-bottom:10px; }
.afile { display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.afile a { color:var(--accent); }
iframe.pdf { width:100%; height:68vh; border:1px solid var(--line); border-radius:6px; }
img.preview { max-width:100%; border:1px solid var(--line); border-radius:6px; }
.nfiles { color:var(--muted); font-size:12px; }

.linklike { border:0; background:none; color:var(--accent); padding:0 4px; }
.logout { display:inline; margin:0; }
.topbanner { margin:0; border-radius:0; border-width:0 0 1px; }
.login { max-width:340px; margin:80px auto; padding:0 16px; }
.login label { display:block; margin:12px 0; font-weight:600; }
.login input { display:block; width:100%; padding:8px; margin-top:4px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); font:inherit; }
.settings .narrow { width:120px; }
table.audit { width:100%; border-collapse:collapse; font-size:13px; }
table.audit th, table.audit td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.file.cur { background:var(--bg); font-weight:600; }