/* Color rule (Balint's standard): brand color = SIGNAL, not SURFACE.
   Filled primary buttons are NEUTRAL (off-white) in the dark theme; the brand
   accent appears only as a signal -- wordmark dot, focus ring, active/selected
   state. A saturated fill on a desaturated surface reads as a template. */
:root {
  color-scheme: dark;
  --bg:#0f1115; --panel:#181b21; --panel2:#1e222a; --line:#2a303a;
  --fg:#e8ebf0; --mut:#9aa4b2; --faint:#6b7480;
  --acc:#4da3ff;                 /* brand -- SIGNAL ONLY */
  --ok:#3ecf8e; --err:#ff6b6b;
  --primary:#e8ebf0; --primary-ink:#14161a;   /* neutral filled primary */
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--fg); }

header { display:flex; gap:18px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--panel); }
.brand { display:flex; align-items:baseline; gap:8px; font-size:18px; font-weight:700; letter-spacing:.2px; margin:0; }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--acc); display:inline-block; } /* brand as signal */
.formats { display:flex; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:3px; }
.formats label { padding:5px 12px; border-radius:7px; color:var(--mut); cursor:pointer; font-size:13px; user-select:none; }
.formats input { position:absolute; opacity:0; pointer-events:none; }
.formats label:has(input:checked) { background:var(--panel); color:var(--fg); box-shadow:inset 0 0 0 1px var(--acc); } /* active = signal */

/* neutral primary buttons -- NOT brand-filled */
.btn { background:var(--primary); color:var(--primary-ink); border:0; border-radius:9px; padding:9px 16px; font-weight:650; font-size:14px; cursor:pointer; }
.btn:hover { filter:brightness(1.05); }
.btn:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.upload { margin-left:auto; }

main { display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:18px; padding:18px; align-items:start; }
@media (max-width:760px){ main{ grid-template-columns:1fr; } }

.col-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:2px 0 10px; }

/* upload progress rows */
.uploads { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.uprow { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 11px; }
.uprow .top { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.uprow .nm { color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uprow .st { color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap; }
.uprow .st.ok { color:var(--ok); } .uprow .st.err { color:var(--err); }
.uprow .bar { height:4px; border-radius:3px; background:var(--panel2); margin-top:7px; overflow:hidden; }
.uprow .bar > i { display:block; height:100%; width:0; background:var(--acc); transition:width .15s; } /* progress = signal */
.uprow.err .bar > i { background:var(--err); }

.clips { display:flex; flex-direction:column; gap:10px; }
.empty { color:var(--faint); font-size:14px; padding:14px; border:1px dashed var(--line); border-radius:10px; text-align:center; }
.clip { background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:10px; display:flex; gap:10px; }
.clip.sel { border-color:var(--acc); } /* selected = signal */
.clip .idx { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; width:16px; text-align:right; padding-top:2px; }
.clip img { width:72px; height:104px; object-fit:cover; border-radius:7px; background:#000; cursor:pointer; }
.clip .meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.clip .name { font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip .row { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--mut); }
.clip input[type=range]{ width:100%; accent-color:var(--acc); }
.clip select, .clip .row button { background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:7px; padding:3px 7px; font-size:12px; cursor:pointer; }
.clip .row button:hover { border-color:var(--acc); }

.preview { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.canvas-wrap { display:flex; justify-content:center; align-items:center; background:#07080b; border-radius:9px; padding:10px; min-height:40vh; }
#preview { max-height:60vh; max-width:100%; height:auto; background:#000; border-radius:5px; }
.label { color:var(--mut); font-size:13px; margin:12px 0; font-variant-numeric:tabular-nums; }
.status { color:var(--mut); font-size:13px; min-height:18px; }
.status a { color:var(--acc); }