:root{
  --bg:#14161a; --panel:#1c1f25; --line:#2c313a; --ink:#e8eaed;
  --dim:#9aa3ad; --accent:#ff9500; --ok:#4caf72; --bad:#e0523f;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "Segoe UI",system-ui,sans-serif;
}
header{padding:22px 26px 6px}
h1{margin:0; font-size:22px; letter-spacing:.2px}
.sub{margin:2px 0 0; color:var(--dim); font-size:13px}
main{padding:16px 26px 40px; display:flex; flex-direction:column; gap:18px;
  width:100%; max-width:1440px; margin:0 auto}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px}

/* --- загрузка --- */
.drop{
  border:2px dashed var(--line); border-radius:8px; min-height:260px;
  display:flex; align-items:center; justify-content:center; padding:14px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.drop.over{border-color:var(--accent); background:#20242b}
.drop.has-image{cursor:default; border-style:solid}
.drop-hint{display:flex; flex-direction:column; gap:6px; text-align:center; color:var(--dim)}
.drop-hint strong{color:var(--ink); font-size:16px}
.dim{font-size:12px; opacity:.7}

.stack{position:relative; display:inline-block; line-height:0; max-width:100%}
.stack img{max-width:100%; height:auto; display:block; border-radius:4px}
.stack canvas{position:absolute; inset:0; width:100%; height:100%}
.stack.fixed{width:min(520px, 100%, 72vh); aspect-ratio:1}
.stack.fixed img{width:100%; image-rendering:auto}

/* --- панель кнопок --- */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{
  background:#262b33; color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:8px 15px; font-size:14px; cursor:pointer;
}
.btn:hover:not(:disabled){border-color:#3d444f}
.btn.active{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); color:#1a1200; border-color:var(--accent); font-weight:600}
.btn.primary:disabled{background:#3a3226; color:#7c7364; border-color:#3a3226}
.btn.ghost{background:transparent; color:var(--dim)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.status{color:var(--dim); font-size:13px}

.slider{display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px}
.slider input{width:130px}

/* --- рабочая область --- */
.work{display:flex; gap:26px; flex-wrap:nowrap; justify-content:center;
  align-items:flex-start}
.col{display:flex; flex-direction:column; gap:10px; min-width:0; flex:0 1 auto}
/* Колонка кода и колонка результата делят место ПОРОВНУ: иначе панель
   инструментов держала левую колонку шире, правая ужималась, и коды
   получались разного размера - сравнивать их становилось нельзя. */
.work > .col:not(.rounding){flex:1 1 0; max-width:520px}
h2{margin:0; font-size:14px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.6px}

.codes{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line); border-radius:6px; padding:5px 11px;
  font-size:13px; cursor:pointer; background:#22262d; color:var(--dim);
}
.chip.on{border-color:var(--accent); color:var(--accent)}

.stats{margin:6px 0 0; display:flex; flex-direction:column; gap:6px; font-size:13px}
.stats div{display:flex; gap:10px}
.stats dt{color:var(--dim); min-width:150px}
.stats dd{margin:0}
.stats dd.text{word-break:break-all; max-width:340px}
.good{color:var(--ok)} .bad{color:var(--bad)}

.note{color:var(--dim); font-size:12px; max-width:420px; margin:4px 0 0}
.err{color:var(--bad); background:#2a1c1a; border:1px solid #43241f;
     border-radius:8px; padding:10px 14px; margin:0}

#work-overlay{cursor:crosshair}

/* --- скругления --- */
.rounding{max-width:230px; flex:0 0 auto}
.round-row{display:flex; gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:8px; padding:10px; background:#20242b}
.swatch{width:92px; height:92px; flex:0 0 auto; background:#fff; border-radius:4px}
.round-ctl{display:flex; flex-direction:column; gap:5px}
.round-name{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.5px}
.round-ctl label{color:var(--dim); font-size:12px}
.round-ctl input{
  width:56px; background:#171a1f; color:var(--ink); border:1px solid var(--line);
  border-radius:4px; padding:4px 6px; font-size:13px;
}
.round-btns{display:flex; gap:6px}
.btn.small{padding:3px 10px; font-size:12px}

.btn.icon{display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px; line-height:0}
.btn.icon svg{display:block}

/* --- инструменты: кнопки каждого под ним самим --- */
.tools{display:flex; gap:16px; align-items:flex-start; margin-top:12px; flex-wrap:wrap}
.tool{display:flex; flex-direction:column; gap:8px}
.tool-sub{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  border-left:2px solid var(--accent); padding:2px 0 2px 9px}
.btn.small{padding:4px 11px; font-size:12px}

.btn.icon.on{border-color:var(--accent); color:var(--accent)}

.warn{color:#e0902f}

/* Картинка кода теперь рисуется в canvas: только так её можно гнуть живьём,
 * пока тянут мышью. Она и задаёт высоту стопки, поэтому не absolute. */
/* Снимок с сервера грузится в этот img, но на экран не идёт: рисуем его в
 * canvas. Атрибута hidden мало - правило .stack img задаёт display:block и
 * перебивает его; нужен селектор по id. */
#work-img{display:none}

#work-cv{position:relative; width:100%; height:auto; display:block;
  border-radius:4px; image-rendering:auto}

.head-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:30px}
.head-row h2{margin:0}
.seg{display:flex; gap:6px}
.btn.small.on{border-color:var(--accent); color:var(--accent)}

/* Окно лупы ходит за мышью поверх всего. pointer-events:none - иначе оно
   перехватывало бы мышь у холста, под которым и находится точка прицела. */
#loupe{position:fixed; width:520px; height:520px; pointer-events:none;
  z-index:9999; border:2px solid var(--accent); border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.55); background:#fff}