:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --ink:#1c2024; --muted:#7b8794;
  --brand:#1f6feb; --ok:#1a7f37; --warn:#b26a00; --bad:#c62828;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
button{font:inherit;padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}
button:hover:not(:disabled){border-color:#c9ced6}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.ok{background:#eaf6ee;border-color:#b7dfc3;color:var(--ok)}
button.bad{background:#fdeeee;border-color:#f0c6c6;color:var(--bad)}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.brand strong{font-size:15px}
.brand .sub{color:var(--muted);margin-left:10px}
.bar-actions{display:flex;align-items:center;gap:8px}
.status{color:var(--muted);min-width:120px;text-align:right}

.layout{display:grid;grid-template-columns:260px 1fr 240px;gap:0;height:calc(100vh - 92px)}
.pane{overflow:auto;background:var(--panel)}
.pane.list{border-right:1px solid var(--line)}
.pane.side{border-left:1px solid var(--line);display:flex;flex-direction:column}
.pane-head{display:flex;justify-content:space-between;padding:10px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.files{display:flex;flex-direction:column}
.file{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;text-align:left;border:0;border-bottom:1px solid #f1f3f5;border-radius:0;padding:8px 12px;background:#fff}
.file:hover{background:#f7f9fc}
.file.active{background:#eef4ff}
.file .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.file .badge{font-size:11px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#cbd3dc}
.dot.doing{background:var(--brand);animation:pulse 1s infinite}
.dot.review{background:var(--warn)}
.dot.pass{background:var(--ok)}
.dot.reject,.dot.fail{background:var(--bad)}
.dot.done{background:#137a63}
@keyframes pulse{50%{opacity:.3}}

.view{display:flex;flex-direction:column;overflow:hidden;background:#eef1f5}
.view-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line)}
.tabs button{border-radius:6px;margin-right:4px}
.tabs button.active{background:#eef4ff;border-color:#bcd3ff;color:var(--brand)}
.hint{color:var(--muted);font-size:12px}
.stage{flex:1;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center}
.empty{color:var(--muted)}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;height:100%}
.explain{color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.panel-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.pc{max-width:100%;max-height:100%;object-fit:contain;display:block}
.single{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.single.checker{background-image:linear-gradient(45deg,#e9edf1 25%,transparent 25%),linear-gradient(-45deg,#e9edf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf1 75%),linear-gradient(-45deg,transparent 75%,#e9edf1 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.single .panel{border:0;background:linear-gradient(45deg,#e9edf1 25%,transparent 25%),linear-gradient(-45deg,#e9edf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf1 75%),linear-gradient(-45deg,transparent 75%,#e9edf1 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;background-color:#fff}
svg.quad{position:absolute;inset:0;pointer-events:none}
svg.quad polygon{fill:rgba(31,111,235,.08);stroke:#1f6feb;stroke-width:2}
.handle{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:2px solid var(--brand);cursor:grab;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}

.info{padding:10px 12px;font-size:12px}
.info .row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed #f0f2f4}
.info .row span{color:var(--muted)}
.info .row b{font-weight:500;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.info .warn{margin-top:8px;padding:8px;border-radius:6px;background:#fff8e6;color:#8a5a00;font-size:12px}

.opts{padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12px}
.opts label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.opts select,.opts input{padding:5px 6px;border:1px solid var(--line);border-radius:5px;font:inherit;color:var(--ink)}
.judge{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.legend{padding:10px 12px;font-size:11px;color:var(--muted);margin-top:auto}
.legend pre{background:#f5f7fa;padding:8px;border-radius:6px;overflow:auto}
.foot{display:flex;justify-content:space-between;padding:6px 16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);background:#fff}
.muted{color:var(--muted)}