:root { --bg:#0b0c10; --panel:#121318; --muted:#99a; --accent:#6ea8fe; --ok:#28a745; --bad:#dc3545; }
html,body { background:var(--bg); color:#e5e7eb; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.container { max-width:1800px; margin:24px auto; padding:0 16px; }
h2 { margin:8px 0 6px; font-size:22px; }
.layout { display:grid; grid-template-columns:320px minmax(0,1fr) 380px; gap:16px; align-items:start; }
@media (max-width:1300px){ .layout { grid-template-columns:1fr; } }
.sidebar { position:static; align-self:start; }
.rightbar { position:sticky; top:16px; align-self:start; margin-top:72px; }
.legend-card { max-height:none; overflow:visible; }
.legend h3 { margin:12px 0 6px; font-size:16px; }
.legend ul { margin:0 0 12px 18px; color:#cfd3dc; }
.legend li { margin:4px 0; }

/* Right saved list */
.rightbar .saved-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.saved-list { display:flex; flex-direction:column; gap:10px; }
.saved-card { background:var(--panel); border:1px solid #1f2230; border-radius:10px; padding:10px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.saved-card img { width:84px; height:auto; border-radius:6px; }
.saved-meta { flex:1; min-width:0; }
.saved-meta .grade { font-weight:700; }
.saved-actions { display:flex; gap:8px; }
.btn-danger { background:#dc3545; color:#fff; border:0; padding:6px 10px; border-radius:8px; cursor:pointer; }
.btn-secondary { background:#2b2f3a; color:#e5e7eb; border:1px solid #3a4154; padding:6px 10px; border-radius:8px; cursor:pointer; }
.btn-sm { padding:4px 8px; font-size:12px; }

/* Top bar */
.topbar { display:flex; justify-content:flex-end; align-items:center; margin-bottom:8px; }
.topbar .user { color:#cfd3dc; }
.topbar .user .muted { color:#99a; margin-left:2px; }
h1 { margin:8px 0 6px; font-size:28px; }
.subtle { color:var(--muted); margin:0 0 16px; }
.card { background:var(--panel); border:1px solid #1f2230; border-radius:12px; padding:16px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .grid { grid-template-columns:1fr; } }
.label { display:block; font-weight:600; margin:0 0 8px; }
.chk { display:block; margin:8px 0; color:#cfd3dc; }
input[type="file"], select, input[type="range"] { width:100%; }
.card select {
	background:#1a1d28;
	color:#e5e7eb;
	border:1px solid #2a3245;
	border-radius:8px;
	padding:8px 10px;
	appearance:none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cfd3dc' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size:12px 8px;
}
.card select:focus { outline:none; border-color:#3d7bfd; box-shadow:0 0 0 2px rgba(61,123,253,.25); }
.actions { display:flex; justify-content:flex-end; margin-top:12px; }
button { background:var(--accent); color:#0b0c10; border:0; padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer; }
button:hover { filter:brightness(1.05); }
.file-group { display:flex; align-items:center; gap:10px; }
.file-input { display:none; }
.file-btn { background:#2b2f3a; color:#e5e7eb; border:1px solid #3a4154; padding:8px 12px; border-radius:8px; cursor:pointer; }
.file-btn:hover { filter:brightness(1.08); }
.file-name { max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg { display:inline-flex; border:1px solid #2a3245; border-radius:10px; overflow:hidden; }
.seg-btn { background:#1a1d28; color:#cfd3dc; border:0; padding:8px 12px; cursor:pointer; }
.seg-btn.active { background:#3b4257; color:#fff; }
.seg-btn + .seg-btn { border-left:1px solid #2a3245; }
.results { margin-top:16px; }
.metrics { margin-bottom:16px; }
.images { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1100px){ .images { grid-template-columns:1fr; } }
.images img { width:100%; height:auto; border-radius:8px; display:block; }
.alert { border-radius:10px; padding:10px 12px; margin:10px 0; }
.alert.error { background:#3a1b1b; color:#ffd3d3; border:1px solid #6b1a1a; }
.alert.warn { background:#2e2a1b; color:#ffe8b0; border:1px solid #7a6a2a; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-weight:700; }
.badge.ok { background:rgba(40,167,69,.15); color:#a8f0b8; border:1px solid #28a745; }
.badge.bad { background:rgba(220,53,69,.15); color:#ffc5cc; border:1px solid #dc3545; }
.badge.na { background:rgba(108,117,125,.15); color:#cfd3dc; border:1px solid #6c757d; }
.mt { margin-top:10px; }

/* Rulers */
.ruler-card { grid-column:1 / -1; }
.ruler-wrap { position:relative; display:inline-block; width:auto; max-width:100%; margin:0 auto; isolation:isolate; }
.ruler-wrap img { display:block; height:auto; max-width:100%; }
.ruler { position:absolute; background:rgba(255,140,0,.95); z-index:10; cursor:grab; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.ruler.outer { background:rgba(255,140,0,.95); }
.ruler.inner { background:rgba(255,90,0,.95); }
.ruler.v { top:0; width:4px; height:100%; }
.ruler.h { left:0; height:4px; width:100%; }
.ruler.v::after,
.ruler.h::after { content:""; position:absolute; background:rgba(255,140,0,.9); border:1px solid rgba(0,0,0,.35); border-radius:6px; }
.ruler.v.outer::after { left:-10px; top:12px; width:18px; height:26px; }
.ruler.v.inner::after { left:-10px; top:42px; width:18px; height:26px; background:rgba(255,90,0,.9); }
.ruler.h.outer::after { top:-10px; left:12px; width:26px; height:18px; }
.ruler.h.inner::after { top:-10px; left:42px; width:26px; height:18px; background:rgba(255,90,0,.9); }
.magnifier { position:absolute; display:none; border:2px solid #fff; border-radius:8px; z-index:5; background:#000; }