:root{--ink:#0C0B0A;--panel:#161512;--panel2:#1E1C18;--line:#2E2B25;
--cream:#F1EFE8;--mute:#8A8579;--orange:#D85A30;--red:#E24B4A}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink);color:var(--cream);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;-webkit-font-smoothing:antialiased}
.wrap{display:grid;grid-template-columns:1fr 350px;height:100vh}
@media(max-width:900px){.wrap{grid-template-columns:1fr;height:auto}}
.stage{display:flex;align-items:center;padding:24px;overflow:auto;
background:repeating-linear-gradient(45deg,#111 0 10px,#131313 10px 20px)}
.rail{display:flex;gap:10px;margin:auto;align-items:flex-start}
.rail.tight{gap:0}
.slot{position:relative;flex:0 0 auto}
.slot canvas{display:block;box-shadow:0 0 0 1px var(--line);cursor:grab;touch-action:none}
.slot.act canvas{box-shadow:0 0 0 2px var(--orange)}
.slot canvas.drag{cursor:grabbing}
.slot .tag{position:absolute;top:-19px;left:0;font-size:10px;color:var(--mute);letter-spacing:.1em}
.slot.act .tag{color:var(--orange)}
.guides{position:absolute;inset:0;pointer-events:none;display:none}
.guides.on{display:block}
.guides i{position:absolute;left:0;right:0;background:rgba(226,75,74,.16);
border-top:1px dashed rgba(226,75,74,.55);border-bottom:1px dashed rgba(226,75,74,.55)}
.guides .t{top:0;height:13%}
.guides .b{bottom:0;height:20%}
.panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:0 0 60px;position:relative}
.phead{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line);padding:14px 14px 0}
.tabs{display:flex;gap:2px}
.tabs button{flex:1;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:8px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--mute);font-size:9px;letter-spacing:.08em}
.tabs button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button:hover{color:var(--cream)}
.tabs button.on{color:var(--orange);border-bottom-color:var(--orange);background:transparent}
.hist{display:flex;gap:6px;padding:9px 0 10px;border-top:1px solid var(--line)}
.hist button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.hist button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
button:disabled{opacity:.34;cursor:default}
button:disabled:hover{border-color:var(--line)}
.pbody{padding:16px 16px 0}
.sec{border-top:1px solid var(--line);padding:16px 0 4px}
.sec.hide{display:none}
details.grp{border-top:1px solid var(--line);margin:0 -16px;padding:0 16px}
details.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:11px 0;color:var(--mute);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::before{content:'';width:0;height:0;border-left:4px solid var(--mute);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s}
details.grp[open]>summary::before{transform:rotate(90deg)}
details.grp[open]>summary{color:var(--cream)}
details.grp>div{padding-bottom:10px}
h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.16em;margin:0 0 2px;text-transform:uppercase}
.sub{color:var(--mute);font-size:11px;margin:0 0 18px;line-height:1.5}
.sec{border-top:1px solid var(--line);padding:16px 0 4px}
.sec:first-of-type{border-top:0;padding-top:0}
.lbl{display:block;color:var(--mute);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
button,select,input[type=text],textarea{font-family:inherit;font-size:12px;color:var(--cream);
background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:7px 9px;outline:none}
select,input[type=text]{width:100%}
button{cursor:pointer}
button:hover{border-color:#4A463C}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
button.on{background:var(--orange);border-color:var(--orange);color:#3A1508;font-weight:500}
.seg button{flex:1;min-width:0}
textarea{width:100%;resize:vertical;min-height:62px;line-height:1.4}
input[type=range]{width:100%;accent-color:var(--orange)}
.num{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.num .lbl{margin:0;flex:0 0 66px}
.num output{font-size:11px;min-width:40px;text-align:right}
.layers{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.chip{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:3px;
background:var(--panel2);border:1px solid var(--line);cursor:pointer;text-align:left}
.chip.sel{border-color:var(--orange)}
/* Seleção múltipla: a PRIMÁRIA (a que o painel edita) fica laranja, com a
   etiqueta “painel”; as EXTRAS, que só se movem junto, ficam creme. As duas
   marcações repetem exatamente o que aparece desenhado na arte. */
.chip.sel2{border-color:var(--cream);background:#222019}
.chip .pri{flex:0 0 auto;font-style:normal;font-size:8.5px;letter-spacing:.1em;
text-transform:uppercase;color:#3A1508;background:var(--orange);border-radius:2px;padding:2px 5px}
.chip b{font-weight:400;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.chip .sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.chip .x{color:var(--mute);font-size:14px;line-height:1;padding:0 2px}
.chip .x:hover{color:var(--red)}
/* ARRASTAR PARA REORDENAR. O pegador de seis pontos é a única parte do item
   que anuncia o gesto; o arraste em si vale no item inteiro. A marca de
   soltura é uma linha laranja na borda que vai receber a camada — em cima
   significa "vai ficar por cima", que é a mesma leitura da lista. */
.chip .grip{cursor:grab;color:#4A463C}
.chip .grip:hover{color:var(--cream);background:transparent}
.chip.dragging{opacity:.4;cursor:grabbing}
.chip.dropbefore{box-shadow:inset 0 3px 0 -1px var(--orange)}
.chip.dropafter{box-shadow:inset 0 -3px 0 -1px var(--orange)}
/* Seção diferente: contínua não vira camada do slide arrastando (a conversão
   de coordenadas tem comando próprio). A marca vermelha diz isso durante o
   gesto, e a nota abaixo da lista explica na hora de soltar. */
.chip.nodrop{box-shadow:inset 0 0 0 1px var(--red)}
/* MENU DE CONTEXTO (botão direito) na lista e na arte. max-height + rolagem
   interna: perto da borda o menu encosta e para, nunca vaza da janela. */
#ctxmenu{position:fixed;z-index:70;min-width:216px;padding:4px;
  max-height:calc(100vh - 24px);overflow:auto;
  background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.62)}
#ctxmenu button{display:flex;align-items:center;width:100%;text-align:left;
  background:transparent;border:0;border-radius:3px;padding:7px 9px;
  font-size:11px;line-height:1.3;color:var(--cream)}
#ctxmenu button:hover:not(:disabled){background:var(--line);border-color:transparent}
#ctxmenu button:disabled{color:var(--mute);opacity:.55}
#ctxmenu button.danger{color:var(--red)}
#ctxmenu button.danger:hover:not(:disabled){background:rgba(226,75,74,.14)}
#ctxmenu .k{margin-left:auto;padding-left:14px;color:var(--mute);font-size:9.5px}
#ctxmenu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:28px;height:28px;padding:0;border-radius:3px}
.swatches button.on{outline:2px solid var(--cream);outline-offset:1px}
/* “Transparente” do degradê com RÓTULO ESCRITO. Era um quadrado vazio com
   title só no hover: ninguém descobria, e a saída era mexer na opacidade da
   caixa — que é outra coisa. O xadrez repete o mesmo código visual das
   miniaturas com alfa da biblioteca. Especificidade acima de button.on de
   propósito: selecionado, ele continua xadrez e a marca é o contorno creme. */
.swatches button.transp{width:auto;height:28px;padding:0 9px;font-size:9px;
letter-spacing:.06em;color:var(--cream);font-weight:400;
background:repeating-conic-gradient(#3B3629 0% 25%,#17150F 0% 50%) 50%/8px 8px}
.swatches button.transp:hover{color:var(--cream);border-color:#4A463C}
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:10px}
.igrid button{padding:0;height:34px;display:flex;align-items:center;justify-content:center}
.igrid button svg{width:18px;height:18px;stroke:var(--cream);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.igrid button.on svg{stroke:#3A1508}
.hide{display:none}
.swatches button.none{background:linear-gradient(135deg,transparent 44%,var(--red) 44%,var(--red) 56%,transparent 56%),var(--panel2)}
/* Biblioteca de imagens do projeto. O xadrez atrás da miniatura é proposital:
   é o que deixa ver, sem abrir nada, que o PNG guardou a transparência. */
.xadrez{background:repeating-conic-gradient(#242119 0% 25%,#17150F 0% 50%) 50%/12px 12px}
.lib{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lib:empty{display:none}
.libit{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel2)}
.libit.used{border-color:#4A463C}
.libth{position:relative;height:62px;display:flex;align-items:center;justify-content:center;padding:4px}
.libth img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.libtag{position:absolute;left:3px;top:3px;font-size:8px;letter-spacing:.08em;
  background:rgba(12,11,10,.82);color:var(--mute);padding:1px 4px;border-radius:2px}
.libdot{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 2px rgba(12,11,10,.75)}
.libact{display:flex;gap:1px;border-top:1px solid var(--line)}
.libact button{flex:1;border:0;border-radius:0;padding:5px 1px;font-size:9px;
  letter-spacing:.03em;background:transparent;color:var(--mute)}
.libact button:hover{color:var(--cream);background:var(--line);border-color:transparent}
.libact button.rm{flex:0 0 22px;font-size:12px;line-height:1}
.libact button.rm:hover{color:var(--red)}
.imgprev{height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  border:1px solid var(--line);border-radius:3px;color:var(--mute);font-size:10px;
  text-align:center;padding:6px}
.imgprev img{max-width:100%;max-height:100%;object-fit:contain}
.export{width:100%;padding:11px;background:var(--orange);border-color:var(--orange);color:#3A1508;font-weight:500;letter-spacing:.06em}
.note{color:var(--mute);font-size:10px;line-height:1.6;margin:10px 0 0}
.warn{color:var(--red)}
.ok{color:var(--orange)}
.drop{border:1px dashed var(--line);border-radius:3px;padding:12px;text-align:center;color:var(--mute);font-size:11px;cursor:pointer;line-height:1.5}
.drop:hover,.drop.over{border-color:var(--orange);color:var(--cream)}
input[type=file]{display:none}
optgroup{color:var(--mute);font-style:normal}
.hide{display:none}
/* Edição de texto na própria arte. O <textarea> fica em cima da camada e
   precisa ser invisível como caixa: sem moldura, sem fundo, sem respiro, sem
   entrelinha herdada. Tudo que posiciona (font, line-height, letter-spacing,
   left/top/width/height, transform) vem por style inline de textedit.js. */
.tedit{position:fixed;z-index:40;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;resize:none;overflow:hidden;
  white-space:pre;word-wrap:normal;min-height:0;min-width:0;
  font-family:Montserrat,sans-serif;caret-color:var(--orange);
  text-align:left;vertical-align:top}
.tedit:focus,.tedit:focus-visible{outline:0}
.tedit::selection{background:rgba(216,90,48,.45)}
/* Sonda de linha de base: mede onde o navegador põe a baseline da 1ª linha.
   O <i> tem altura zero e alinhamento por baseline, então a borda de baixo
   dele cai exatamente na baseline. */
.tedit-probe{position:fixed;left:-99999px;top:0;visibility:hidden;
  pointer-events:none;white-space:pre;margin:0;padding:0;border:0}
.tedit-probe i{display:inline-block;width:0;height:0;vertical-align:baseline}
.toast{position:fixed;left:18px;bottom:18px;z-index:60;
  max-width:min(430px,calc(100vw - 36px));display:none;gap:12px;align-items:flex-start;
  background:var(--panel2);border:1px solid var(--red);border-left-width:3px;border-radius:3px;
  padding:12px 12px 12px 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;line-height:1.65;color:var(--cream);box-shadow:0 12px 34px rgba(0,0,0,.6)}
.toast.on{display:flex}
.toast.info{border-color:var(--orange)}
.toast p{margin:0;flex:1}
.toast b{display:block;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:9.5px;color:var(--red);margin-bottom:5px}
.toast.info b{color:var(--orange)}
.toast button{background:transparent;border:0;padding:0 2px;color:var(--mute);
  font-size:15px;line-height:1;flex:0 0 auto}
.toast button:hover{color:var(--cream);border-color:transparent}
/* Remoção de fundo: barra de progresso honesta. Fica acima do toast (bottom
   maior) para os dois poderem aparecer juntos — o aviso de erro não some a
   barra do lugar. Só é visível com a classe .on. */
#cutbar{position:fixed;left:18px;bottom:18px;z-index:55;display:none;
gap:12px;align-items:center;max-width:min(430px,calc(100vw - 36px));
background:var(--panel2);border:1px solid var(--orange);border-left-width:3px;border-radius:3px;
padding:12px 12px 12px 14px;font-size:11px;line-height:1.6;color:var(--cream);
box-shadow:0 12px 34px rgba(0,0,0,.6)}
#cutbar.on{display:flex}
#cutbar.on ~ .toast.on{bottom:110px}
#cutbar p{margin:0;flex:1}
#cutbar b{display:block;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
font-size:9.5px;color:var(--orange);margin-bottom:5px}
#cutbar button{flex:0 0 auto;font-size:10px;letter-spacing:.06em;padding:6px 9px}
.cutprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);overflow:hidden}
.cutprog i{display:block;height:100%;width:0;background:var(--orange);transition:width .18s linear}
/* Fase sem porcentagem (preparando/processando): faixa que vai e volta, para
   não mentir um número que não existe. */
.cutprog.indef i{width:34%;animation:cutvai 1.1s ease-in-out infinite;transition:none}
@keyframes cutvai{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
.libact button.cut{flex:1;letter-spacing:.02em}
.libact button.cut:hover{color:var(--orange)}