:root{--bg:#070b12;--panel:#0d1421;--line:#1d2a3f;--fg:#d7e3f4;--dim:#7f93ad;--acc:#41d7ff;--warn:#ffb648;--bad:#ff5d6c;font-family:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--fg)}
[hidden]{display:none!important}
button{background:#12203a;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 12px;font:inherit;font-size:12px;letter-spacing:.08em;cursor:pointer}
button:hover:not(:disabled){border-color:var(--acc)}
button:disabled{opacity:.4;cursor:default}
button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
input,select{background:#050810;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:5px 6px;font:inherit;font-size:12px}
input[type=range]{padding:0;background:none;border:0;accent-color:var(--acc)}
input[type=checkbox]{accent-color:var(--acc)}
input.bad{border-color:var(--bad)}
.dim{color:var(--dim)}

/* ---- login (task 1) ---- */
.login{max-width:360px;margin:12vh auto;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:14px}
.login h1{margin:0 0 8px;font-size:18px;letter-spacing:.2em;color:var(--acc)}
.login label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}
.login input{padding:10px;font-size:15px}
#loginMsg{min-height:1.2em;color:var(--bad);font-size:12px;margin:0}

/* ---- shell ---- */
#app{height:100%;display:flex;flex-direction:column;min-height:0}
#app:not(.hasjob) .needjob{display:none}
#app.hasjob #drop{display:none}
.bar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.bar .brand{color:var(--acc);letter-spacing:.2em;font-size:12px}
.bar .jobname{font-size:11px;color:var(--dim)}
.bar .tools{margin-left:auto;display:flex;gap:6px}

/* ---- controls ---- */
.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.ctl.chk{flex-direction:row;align-items:center;gap:6px;padding-bottom:6px}
.ctl .pair{display:flex;align-items:center;gap:6px}
.ctl .pair input[type=range]{width:120px}
.ctl input[type=number]{width:62px}
.ctl output{color:var(--fg);font-size:12px;min-width:34px}
.controls .spacer{flex:1}
.zoom{display:flex;align-items:center;gap:6px}
.zoom #zoomVal{font-size:11px;color:var(--dim);min-width:44px;text-align:center}

/* ---- progress ---- */
#prog{height:2px;background:transparent;overflow:hidden}
#prog.on{background:#12203a}
#prog i{display:block;height:100%;width:35%;background:var(--acc);transform:translateX(-100%)}
#prog.on i{animation:slide 1.1s linear infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(320%)}}

/* ---- stage ---- */
#stage{flex:1;display:flex;min-height:0;position:relative}
.pane{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;min-height:0}
.pane+.pane{border-left:1px solid var(--line)}
.pane h2{margin:0;padding:4px 8px;font-size:10px;font-weight:400;letter-spacing:.2em;color:var(--dim);border-bottom:1px solid var(--line);background:#0a1019}
.canvas{flex:1;min-height:0;overflow:auto;padding:10px;
  background-color:#e7ecf3;
  background-image:linear-gradient(45deg,#cfd8e4 25%,transparent 25%),linear-gradient(-45deg,#cfd8e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd8e4 75%),linear-gradient(-45deg,transparent 75%,#cfd8e4 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
#srcImg{display:block}
#svgbox svg{display:block}
#stage.compare #paneOut{position:absolute;left:0;top:0;right:0;bottom:0;border-left:0;opacity:.5;pointer-events:none}
#stage.compare #paneOut h2{visibility:hidden}
#stage.compare #paneOut .canvas{background:none}
#stage.compare #paneSrc h2::after{content:" + RESULT @ 50%";color:var(--acc)}

/* ---- drop zone ---- */
.drop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--dim);text-align:center}
.drop .big{margin:0;font-size:20px;letter-spacing:.3em;color:var(--acc)}
.drop p{margin:0;font-size:12px}
body.dragging::after{content:"DROP TO TRACE";position:fixed;inset:0;display:grid;place-items:center;background:rgba(65,215,255,.12);border:2px dashed var(--acc);font-size:24px;letter-spacing:.3em;pointer-events:none;z-index:40}

/* ---- palette ---- */
.palette{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border-top:1px solid var(--line)}
.sws{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.sw{display:flex;align-items:center;gap:6px;padding:4px 6px}
.sw.sel{border-color:var(--acc);color:var(--acc)}
.sw .chip{width:18px;height:18px;border-radius:3px;border:1px solid rgba(255,255,255,.25);flex:none}
.sw .col{display:flex;flex-direction:column;line-height:1.15;align-items:flex-start}
.sw .hex{font-size:11px;letter-spacing:0}
/* the ΔE-nearest CSS name, under the hex: what a press operator reads */
.sw .name{font-size:9px;letter-spacing:0;color:var(--dim);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw .pct{font-size:10px;color:var(--dim)}
.sw .lock{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:1px 4px}
.sw.locked .lock{color:var(--warn);border-color:var(--warn)}
.pacts{display:flex;gap:6px;align-items:center}
.pacts #hexIn{width:88px}
.pacts #hexPick{width:28px;height:24px;padding:0;border:1px solid var(--line);background:none}
.seps .warn{width:100%;margin:0;font-size:11px;color:var(--warn)}

/* ---- stats + exports ---- */
.stats{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 10px;font-size:11px;color:var(--dim);border-top:1px solid var(--line);background:#0a1019}
.stats b{color:var(--fg);font-weight:400}
.stats .problem{color:var(--warn);flex-basis:100%}
.stats .note{color:var(--dim);flex-basis:100%}
.exports{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel)}
.exports .lbl,.seps .lbl{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.seps{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line);background:#0a1019}
.seps .lbl{align-self:center}
.seps .ctl input[type=number]{width:70px}
.seps #sepBtn{margin-left:auto}

/* ---- toasts ---- */
#toasts{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:50}
.toast{background:#12203a;border:1px solid var(--acc);padding:8px 12px;border-radius:6px;font-size:12px;max-width:60vw}
.toast.bad{border-color:var(--bad)}

/* ---- mobile: panes stack, and the page scrolls instead of squeezing them ---- */
@media (max-width:760px){
  html,body{height:auto}
  #app{height:auto;min-height:100vh}
  #stage{flex-direction:column;flex:none}
  .pane{flex:none}
  .pane .canvas{height:38vh;min-height:200px}
  .pane+.pane{border-left:0;border-top:1px solid var(--line)}
  #stage.compare #paneOut{border-top:0}
  .controls{gap:8px 12px}
  .ctl .pair input[type=range]{width:90px}
  .controls .spacer{display:none}
  .zoom{width:100%;justify-content:flex-start}
  .pacts{width:100%;flex-wrap:wrap}
  .toast{max-width:80vw}
}

/* ---- embroidery (StitchLab) ---- */
.emb{padding:10px;border-top:1px solid var(--line);background:var(--panel)}
.embctl{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.emb .lbl{color:var(--acc);letter-spacing:.2em;font-size:12px;align-self:center}
.embout{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.embout[hidden]{display:none}
#embPrev{max-width:min(560px,100%);max-height:60vh;background:#fff;border-radius:8px;border:1px solid var(--line)}
.embinfo{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px;font-size:12px}
#embStats b{color:var(--acc)}
.thr{display:flex;gap:8px;align-items:center;margin:4px 0}
.thr i{width:18px;height:18px;border-radius:4px;border:1px solid var(--line);flex:none}
.embdl{display:flex;flex-wrap:wrap;gap:6px}
.embdl a{display:inline-block;background:#12203a;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:12px;letter-spacing:.08em;text-decoration:none}
.embdl a:hover{border-color:var(--acc)}
.embpre{display:flex;gap:4px;flex-wrap:wrap}.embpre button{padding:5px 8px;font-size:10px}
.embhelp{width:100%;margin:2px 0 0;font-size:11px}