/* ── tokens ─────────────────────────────────────────────── */
:root{
  --bg:#12120f;
  --bg-2:#191915;
  --bg-3:#20201b;
  --line:#32322b;
  --line-2:#43433a;
  --ink:#eceae3;
  --ink-2:#a8a599;
  --ink-3:#75736a;
  --accent:#d8a24a;
  --accent-ink:#1a1409;
  --danger:#d1655a;
  --radius:9px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f4f2ed; --bg-2:#fbfaf7; --bg-3:#efece5;
    --line:#ddd8cd; --line-2:#c8c2b4;
    --ink:#22211c; --ink-2:#5d5a50; --ink-3:#8b8779;
    --accent:#9a6b12; --accent-ink:#fffdf7;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 var(--sans);
  display:flex; flex-direction:column; overflow:hidden;
}
.hidden{display:none !important}

/* ── topbar ─────────────────────────────────────────────── */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 16px; background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px}
.logo{width:32px; height:32px; color:var(--accent); flex:0 0 auto}
.brand h1{font-size:15px; margin:0; letter-spacing:.2px; font-weight:600}
.tag{margin:0; font-size:11.5px; color:var(--ink-3)}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ── buttons / inputs ───────────────────────────────────── */
.btn{
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:7px 13px; cursor:pointer;
  transition:background .12s, border-color .12s, opacity .12s;
  white-space:nowrap;
}
.btn:hover:not(:disabled){background:var(--line); border-color:var(--ink-3)}
.btn:disabled{opacity:.38; cursor:not-allowed}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover:not(:disabled){filter:brightness(1.1); background:var(--accent)}
.btn-sm{padding:5px 10px; font-size:12px}
.btn.is-danger{color:var(--danger); border-color:var(--danger)}

.chip{
  font:inherit; font-size:11.5px; padding:3px 9px; cursor:pointer;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:99px;
}
.chip:hover{color:var(--ink); border-color:var(--accent)}

input[type=range]{
  width:100%; accent-color:var(--accent); height:18px; margin:2px 0 0;
}
input[type=color]{
  width:38px; height:26px; padding:0; border:1px solid var(--line-2);
  border-radius:5px; background:none; cursor:pointer;
}
input.num, select.num{
  width:100%; font:inherit; font-size:13px; padding:5px 7px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:6px;
}
input[type=checkbox]{accent-color:var(--accent); margin:0 5px 0 0; vertical-align:-2px}

/* ── layout ─────────────────────────────────────────────── */
.layout{flex:1 1 auto; display:flex; min-height:0}
.sidebar{
  flex:0 0 302px; overflow-y:auto; overflow-x:hidden;
  background:var(--bg-2); border-right:1px solid var(--line);
  scrollbar-width:thin;
}
.stage{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0}

/* ── panels ─────────────────────────────────────────────── */
.panel{border-bottom:1px solid var(--line)}
.panel-h{
  margin:0; padding:11px 14px 8px; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.panel-b{padding:0 14px 15px; display:flex; flex-direction:column; gap:11px}

.ctrl{display:flex; flex-direction:column; gap:1px}
.ctrl.inline{flex-direction:row; align-items:center; justify-content:space-between}
.ctrl label{font-size:12px; color:var(--ink-2); display:flex; justify-content:space-between; gap:8px}
.ctrl output{font-family:var(--mono); font-size:11.5px; color:var(--ink)}
.grid2{display:grid; grid-template-columns:1fr 78px; gap:9px}
.row{display:flex; gap:8px; align-items:center}
.row.wrap{flex-wrap:wrap}
.check{font-size:12px; color:var(--ink-2); cursor:pointer; user-select:none; display:inline-flex; align-items:center}
.note{margin:0; font-size:11.5px; line-height:1.4; color:var(--ink-3)}
.note.warn{color:var(--danger)}
.hint{margin:0; font-size:11px; color:var(--ink-3); text-align:center}

/* ── dropzone ───────────────────────────────────────────── */
.dropzone{
  border:1.5px dashed var(--line-2); border-radius:var(--radius);
  padding:18px 12px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-2); transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone:focus-visible,.dropzone.is-over{
  border-color:var(--accent); background:var(--bg-3); outline:none;
}
.dz-icon{width:26px; height:26px; color:var(--ink-3); margin-bottom:2px}
.dropzone strong{font-size:13px; color:var(--ink); font-weight:600}
.dropzone span{font-size:11px; color:var(--ink-3)}
.samples{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.samples-label{font-size:11.5px; color:var(--ink-3); margin-right:2px}

.crop-wrap{display:flex; flex-direction:column; gap:9px}
#cropCanvas{
  width:100%; height:auto; aspect-ratio:1; display:block; cursor:grab;
  border-radius:var(--radius); background:var(--bg); touch-action:none;
  border:1px solid var(--line);
}
#cropCanvas.is-drag{cursor:grabbing}

/* ── threads ────────────────────────────────────────────── */
.thread-list{display:flex; flex-direction:column; gap:9px}
.thread{
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:9px 10px;
  display:flex; flex-direction:column; gap:7px;
}
.thread-top{display:flex; align-items:center; gap:8px}
.thread-name{
  flex:1 1 auto; font-size:12.5px; font-weight:600;
  font-family:var(--mono); color:var(--ink);
}
.thread-del{
  border:none; background:none; color:var(--ink-3); cursor:pointer;
  font-size:16px; line-height:1; padding:2px 4px; border-radius:4px;
}
.thread-del:hover{color:var(--danger); background:var(--bg)}

/* ── stage ──────────────────────────────────────────────── */
.stage-bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 14px; border-bottom:1px solid var(--line);
  background:var(--bg-2); flex-wrap:wrap;
}
.tabs{display:flex; gap:3px; background:var(--bg-3); padding:3px; border-radius:8px}
.tab{
  font:inherit; font-size:12.5px; padding:4px 13px; border:none; cursor:pointer;
  background:transparent; color:var(--ink-2); border-radius:6px;
}
.tab.is-active{background:var(--bg); color:var(--ink); font-weight:600}
.stage-bar-right{display:flex; gap:14px; align-items:center}

.canvas-holder{
  flex:1 1 auto; position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:
    repeating-conic-gradient(var(--bg) 0% 25%, var(--bg-3) 0% 50%) 50%/22px 22px;
  container-type:size;   /* lets the stack size itself off this box */
}
/* Every canvas inside is position:absolute, so the stack has no content to
   size itself from — it must be given an explicit square that fits the
   holder's shorter axis, or it collapses to 0x0 and nothing is visible. */
.canvas-stack{
  position:relative; aspect-ratio:1;
  width:min(100%, 70vh);              /* fallback if cq units are unsupported */
  width:min(100cqw, 100cqh);
  height:auto;
}
.canvas-stack:not(.has-image){display:none}
.stage-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; display:block;
  box-shadow:0 6px 28px rgba(0,0,0,.4);
}
#sourceCanvas{z-index:1}
#resultCanvas{z-index:2}
.stage-canvas.overlay{z-index:3; box-shadow:none; pointer-events:none}
.split-handle{
  position:absolute; top:0; bottom:0; width:22px; margin-left:-11px;
  z-index:4; cursor:ew-resize; display:flex; align-items:center; justify-content:center;
}
.split-handle span{width:2px; height:100%; background:var(--accent); opacity:.55; display:block}
/* Kept small and translucent — it sits over the middle of the artwork. */
.split-handle::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  background:var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.5);
  opacity:.5; transition:opacity .12s, width .12s, height .12s;
}
.split-handle:hover::after{opacity:1; width:22px; height:22px}
.split-handle:hover span{opacity:.9}
.empty-state{position:absolute; color:var(--ink-3); font-size:13px}

.progress-wrap{
  flex:0 0 auto; display:flex; align-items:center; gap:11px;
  padding:8px 14px; border-top:1px solid var(--line); background:var(--bg-2);
}
.progress{flex:1 1 auto; height:5px; background:var(--bg-3); border-radius:99px; overflow:hidden}
.progress-bar{height:100%; width:0; background:var(--accent); transition:width .12s linear}
.progress-txt{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); min-width:190px; text-align:right}

.stats{
  flex:0 0 auto; display:flex; gap:2px; flex-wrap:wrap;
  padding:9px 14px; background:var(--bg-2); border-top:1px solid var(--line);
}
.stat{flex:1 1 118px; display:flex; flex-direction:column; gap:1px}
.stat-k{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.stat-v{font-family:var(--mono); font-size:13px; color:var(--ink)}

.exports{
  flex:0 0 auto; display:flex; gap:7px; flex-wrap:wrap; align-items:center;
  padding:9px 14px; background:var(--bg-2); border-top:1px solid var(--line);
}
.exports-label{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-right:3px}

/* ── modal / guide ──────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.guide{
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  width:min(1000px,100%); max-height:100%; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.guide-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.guide-head h2{margin:0; font-size:15px}
.guide-sub{margin:2px 0 0; font-size:11.5px; color:var(--ink-3)}
.guide-body{display:flex; gap:18px; padding:18px; overflow-y:auto; flex-wrap:wrap}
.guide-map{flex:0 1 460px; min-width:280px}
#guideCanvas{width:100%; height:auto; aspect-ratio:1; display:block; border-radius:50%}
.guide-steps{flex:1 1 300px; display:flex; flex-direction:column; gap:14px; min-width:260px}
.guide-now{
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; text-align:center;
}
.guide-lbl{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em}
.guide-nails{display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 4px}
.nail-from,.nail-to{
  font-family:var(--mono); font-size:38px; font-weight:700; line-height:1;
}
.nail-from{color:var(--ink-3)}
.nail-to{color:var(--accent)}
.arrow{width:34px; height:20px; color:var(--ink-3)}
.guide-hint{margin:0; font-size:12px; color:var(--ink-2)}
.guide-hint b{color:var(--ink); font-family:var(--mono)}
.guide-controls{display:flex; gap:9px}
.guide-controls .btn{flex:1 1 0; justify-content:center; padding:10px}
.guide-slider{width:100%}
.guide-next-list h3{
  margin:0 0 5px; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.guide-next-list ol{
  margin:0; padding:0; list-style:none; font-family:var(--mono); font-size:12.5px;
  color:var(--ink-2); display:flex; flex-direction:column; gap:2px;
  max-height:150px; overflow-y:auto;
}
.guide-next-list li{display:flex; gap:9px}
.guide-next-list li i{color:var(--ink-3); font-style:normal; min-width:44px}

/* ── toast ──────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:99px;
  font-size:13px; z-index:80; box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:pop .2s ease;
}
@keyframes pop{from{opacity:0; transform:translate(-50%,8px)}}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:900px){
  body{overflow:auto}
  .layout{flex-direction:column}
  .sidebar{flex:0 0 auto; width:100%; border-right:none; border-bottom:1px solid var(--line); max-height:none; overflow:visible}
  .canvas-holder{min-height:min(92vw, 68vh)}
  .progress-txt{min-width:0}
}