:root { --bg:#f4f4f2; --panel:#fff; --line:#d9d9d4; --text:#1c1c1a; --muted:#6b6b66; --accent:#2457d6; --danger:#c0392b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1b1b1a; --panel:#262625; --line:#3a3a38; --text:#eeeeea; --muted:#9a9a94; --accent:#6c93f5; --danger:#e7685a; }
}
* { box-sizing: border-box; }
body { margin:0; height:100vh; overflow:hidden; display:grid; grid-template-columns:130px 1fr 320px; grid-template-rows:auto 1fr;
       font:14px system-ui, sans-serif; background:var(--bg); color:var(--text); }
header { grid-column:1/4; display:flex; gap:12px; align-items:center; padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line); }
header b { flex:1; }
button, .btn { font:inherit; padding:5px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
#thumbs { overflow-y:auto; padding:8px; background:var(--panel); border-right:1px solid var(--line); }
#thumbs div { position:relative; margin-bottom:8px; border:2px solid transparent; border-radius:4px; cursor:pointer; line-height:0; }
#thumbs div.cur { border-color:var(--accent); }
#thumbs div.del canvas { opacity:.25; }
#thumbs canvas { width:100%; aspect-ratio:1/1.41; background:#fff; }
#thumbs span { position:absolute; left:4px; bottom:4px; font-size:11px; line-height:1; background:#000a; color:#fff; padding:2px 4px; border-radius:3px; }
#view { display:flex; gap:10px; padding:8px; overflow:hidden; justify-content:center; min-height:0; }
.pane { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; }
.pane h4 { margin:0 0 4px; font-weight:600; color:var(--text); align-self:flex-start; }
.wrap { position:relative; line-height:0; border:1px solid var(--line); background:#fff; max-width:100%; min-height:0; }
.wrap img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 100px); user-select:none; -webkit-user-drag:none; }
#proc { cursor:crosshair; }
.box { position:absolute; border:1px solid var(--danger); background:#c0392b22; pointer-events:none; }
.box .x { position:absolute; top:-9px; right:-9px; width:18px; height:18px; padding:0; border-radius:50%; border:0;
          background:var(--danger); color:#fff; font:13px/18px system-ui, sans-serif; text-align:center; cursor:pointer;
          pointer-events:auto; box-shadow:0 0 0 2px var(--panel); }
.box .x:hover { filter:brightness(1.2); }
#ctl { overflow-y:auto; padding:12px 16px; background:var(--panel); border-left:1px solid var(--line); }
fieldset { border:0; border-top:1px solid var(--line); margin:0 0 8px; padding:8px 0 0; }
legend { color:var(--text); font-weight:600; font-size:13px; padding:0 6px 0 0; }
fieldset legend + * { margin-top:2px; }
.sub { font-weight:600; font-size:13px; margin:10px 0 2px; }
label { display:flex; align-items:center; gap:8px; margin:6px 0; }
label > span { flex:0 0 96px; }
label.sl { flex-wrap:wrap; margin:10px 0 0; }
label.sl > .hint { flex:0 0 100%; margin:-2px 0 0; }
select { font:inherit; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); flex:1; min-width:0; width:100%; }
input[type=range] { flex:1; min-width:60px; accent-color:var(--accent); height:20px; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); }
output { flex:0 0 38px; text-align:right; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.row { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.hint { color:var(--muted); font-size:12px; margin:4px 0; }
#msg { color:var(--muted); font-size:13px; }
body.drag #view { outline:3px dashed var(--accent); outline-offset:-8px; }
#drop { margin:auto; padding:40px; border:2px dashed var(--line); border-radius:10px; text-align:center; color:var(--muted); }