/* Layout: editor em três colunas — biblioteca (roteiros, marca, camadas) | palco com transporte | presets e propriedades da camada */
:root{
  --bg:#010409; --panel:#0D1117; --raised:#151B23; --raised-2:#212830; --line:#262C36; --line-2:#3D444D; /* Cinzas da marca: Noite, Fundo, Cartão, Elevado, Borda */
  --fg:#D1D7E0; --muted:#9198A1; --faint:#656C76; /* Claro, Texto apagado, Neutro */
  /* o verde (--accent) aparece na seleção, no foco e nos botões principais (--btn, um verde mais vivo) */
  --accent:#6A9C79; --accent-ink:#08150C; --accent-soft:rgba(106,156,121,.14);
  --btn:#4FB574; --btn-ink:#06130A; /* botão principal e avisos com ação */
  --sel:var(--accent); --sel-ink:var(--accent-ink); --sel-rgb:106,156,121; --margin-rgb:160,140,230; --frame-rgb:122,160,230; /* seleção e guias do palco: o canvas lê estes (uiC/uiA em app.js) */
  --danger:#E5645D;
  --c-text:#6B9FE8; --c-logo:#C79B3A; --c-cta:#78A98A; --c-image:#D07AA8; --c-shape:#A68DE8; --c-bg:#8A9199; --c-group:#D07A3F;
  --f-ui:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-display:"Mona Sans", "Inter", system-ui, sans-serif;
  --r:8px;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:13px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased;overflow:hidden}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} /* barra de rolagem: um padrão só, para todo elemento que rola */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:268px minmax(0,1fr) 332px;grid-template-rows:54px minmax(0,1fr);grid-template-areas:"top top top" "left stage right"}
.top{grid-area:top;display:flex;align-items:center;gap:14px;padding-inline:16px;border-bottom:1px solid var(--line);background:var(--panel);min-width:0}
.logo-word{font:800 22px/1 var(--f-display);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.logo-word i{width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--fg);display:inline-block;transform:rotate(-45deg)}
.seg{display:inline-flex;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:5px 12px;border-radius:999px;color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* formato principal (os outros se reorganizam a partir dele) */
#fmt button.base::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-left:5px;vertical-align:2px}
.posnote{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--faint);font-size:11px;margin:2px 0 4px}
.top .spacer{flex:1}
.btn{border:1px solid var(--line-2);background:var(--raised);padding:7px 12px;border-radius:999px;font-weight:600;font-size:12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--raised-2)}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:4px 10px;font-size:11.5px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--raised)}
.btn:disabled{opacity:.45;cursor:default}
.tog{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap;cursor:pointer}
.top .durbox{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}
.top .durbox input{width:62px}
.top .durbox #slides{width:48px}
.top .cdims{gap:4px}.top .cdims[hidden]{display:none}.top .durbox.cdims input{width:58px}

.left,.right{background:var(--panel);overflow-y:auto;overflow-x:hidden;min-width:0}
.left{grid-area:left;border-right:1px solid var(--line)}
.right{grid-area:right;border-left:1px solid var(--line)}
.sec{padding:20px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.sec h3{margin:0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sec > h3:not(:first-child){margin:8px -16px 0;padding:22px 16px 0;border-top:1px solid var(--line)}
.sec h3 small{letter-spacing:0;text-transform:none;font-weight:500;color:var(--faint)}
.hint{color:var(--faint);font-size:11.5px;margin:0}

.tpls{display:grid;grid-template-columns:1fr;gap:6px}
.tpl{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--raised);border-radius:var(--r);padding:8px 10px}
.tpl:hover{border-color:var(--line-2);background:var(--raised-2)}
.tpl[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.tpl b{display:block;font-weight:600;font-size:12.5px}
.tpl span{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.tpl .ic{width:34px;height:34px;border-radius:6px;background:var(--bg);display:grid;place-items:center;font:500 10px var(--f-mono);color:var(--muted)}

.drop{border:1px dashed var(--line-2);border-radius:var(--r);padding:10px;display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;cursor:pointer;background:var(--bg)}
.drop:hover{border-color:var(--muted)}.drop.over{border-color:var(--accent)}
.drop .thumb{width:56px;height:56px;border-radius:6px;background:repeating-conic-gradient(var(--raised-2) 0 25%, var(--raised) 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden}
.drop .thumb img{max-width:48px;max-height:48px}
.drop b{font-size:12px;font-weight:600;display:block}
.drop span{font-size:11.5px;color:var(--muted)}

.swatches{display:flex;flex-direction:column;gap:6px}
.sw{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);overflow:hidden;padding:0}
.sw-lbl{font-size:10.5px;color:var(--faint);text-align:center}
.swcol{display:flex;align-items:center;gap:10px}
#brandColors{display:flex;flex-direction:column;gap:12px}
.pgroup{display:flex;flex-direction:column;gap:6px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pg-name{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:2px 0;min-width:0;flex:1;outline:none}
input.pg-name:focus{color:var(--fg);border-bottom:1px solid var(--accent)}
input.sw-lbl{flex:1;min-width:0;width:auto;text-align:left;font-size:12px;color:var(--muted)}
input.sw-lbl:focus{color:var(--fg)}
.sw-grip{flex:none;width:20px;height:var(--ctl);margin-right:-6px;display:grid;place-items:center;color:var(--muted);cursor:grab;opacity:.35;user-select:none;touch-action:none;border-radius:5px}
.swcol:hover .sw-grip,.swcol.dragging .sw-grip{opacity:1}
.sw-grip:hover{color:var(--fg)}
.swcol.dragging{opacity:.55}
.swcol.drop-above{box-shadow:0 -2px 0 var(--accent)}
.swcol.drop-below{box-shadow:0 2px 0 var(--accent)}
.swwrap{position:relative;flex:none}
.sw-del{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);background:var(--raised);color:var(--fg);font-size:11px;line-height:1;padding:0;display:none;place-items:center;z-index:1}
.swwrap:hover .sw-del{display:grid}
.sw-add{width:100%;height:var(--ctl);border-radius:5px;border:1.5px dashed var(--line-2);background:transparent;color:var(--muted);font-size:11px;line-height:1;padding:0}
.sw-add:hover{color:var(--fg);border-color:var(--muted)}
.btn.small.pg-new{align-self:stretch;width:100%;height:var(--ctl);justify-content:center;border:1px solid var(--line-2);color:var(--fg);margin:4px 0 8px}
.btn.small.pg-new:hover{border-color:var(--muted)}

.row{display:flex;gap:6px;align-items:center;min-width:0}
.row > *{min-width:0}
.row > .btn{flex:none}
.row > input{flex:1 1 auto}
.row.row-wrap{flex-wrap:wrap}
.hint.hint-pad{padding:8px var(--pad) 0}
.fontrow{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:center}
.fontrow label{color:var(--muted);font-size:12px}
input[type=text],input[type=number],select,textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;width:100%;min-width:0}
textarea{resize:vertical;min-height:58px;line-height:1.35}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--muted);outline:none}
.fontlist{display:flex;flex-wrap:wrap;gap:4px}
.ftag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--raised);border:1px solid var(--line);color:var(--muted)}
.ftag.err{color:var(--danger);border-color:var(--danger)}

.layers{display:flex;flex-direction:column;gap:2px}
.layer{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;border:1px solid transparent;cursor:pointer}
.layer:hover{background:var(--raised)}
.layer[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.layer .dot{width:8px;height:8px;border-radius:2px}
/* célula de camada/grupo (lista e timeline): o mesmo componente, ver layerCell/groupCell */
.lnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.lnm small{color:var(--faint);margin-left:4px;font:10.5px var(--f-mono)}
.tl-nm .lnm small{display:none}
.acts{display:flex;gap:0;flex:none;margin-left:auto}
.acts .icon-btn{width:20px;height:20px}
.acts .icon-btn svg{width:13px;height:13px}
.acts .icon-btn .x{font-size:14px;line-height:1}
.acts .icon-btn:not(.on){display:none}
.lcell:not(:hover):not(:focus-within) .acts:not(:has(.on)){display:none}
.lcell:hover .acts .icon-btn,.lcell:focus-within .acts .icon-btn{display:grid}
.acts .icon-btn.on{color:var(--accent)}
/* cadeado e olho ocupam sempre o mesmo lugar (só somem, não saem do lugar) */
.acts:has(.on) .icon-btn.fix:not(.on){display:grid;visibility:hidden}
.lcell:hover .acts .icon-btn.fix,.lcell:focus-within .acts .icon-btn.fix{visibility:visible}
.icon-btn{border:0;background:transparent;color:var(--muted);width:24px;height:24px;border-radius:5px;display:grid;place-items:center}
.icon-btn:hover{color:var(--fg);background:var(--line)}
.icon-btn svg{width:14px;height:14px}
.layer.off .lnm,.layer.off .dot{opacity:.4}
.tl-row.locked .tl-bar{cursor:default;border-style:dashed}
.tl-row.locked .tl-bar .h{display:none}
.adds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.add{border:1px solid var(--line);background:var(--raised);border-radius:var(--r);padding:8px 4px 7px;display:grid;justify-items:center;gap:4px;font-size:11.5px;color:var(--muted);min-width:0}
.add:hover{border-color:var(--line-2);background:var(--raised-2);color:var(--fg)}
.add .gl{height:24px;display:grid;place-items:center;color:var(--fg);line-height:1}
.dropzone{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:10px;background:rgba(0,0,0,.55);display:grid;place-items:center;color:var(--fg);font-weight:600;font-size:15px;pointer-events:none}
.dropzone[hidden]{display:none}

.stage{grid-area:stage;display:flex;flex-direction:column;min-width:0;min-height:0;background:
  radial-gradient(circle at 1px 1px, var(--raised) 1px, transparent 0) 0 0/18px 18px, var(--bg)}
.stage-box{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none} /* pinça = zoom do palco (js, TCH); sem o zoom da página por cima */
/* o palco rola quando o zoom passa do espaço; em volta do quadro sobra mesa (as alças de quem encosta na borda ficam à mão) */
.stage-scroll{position:absolute;inset:0;overflow:auto;display:flex;touch-action:none}
.stage-pad{margin:auto;padding:var(--stage-pad,36px);flex:none}
.stage-ov{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
.zoom{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.zoom button{border:0;background:var(--raised);color:var(--muted);height:24px;min-width:28px;padding:0 6px;font:500 11px var(--f-mono);font-variant-numeric:tabular-nums}
.zoom button+button{border-left:1px solid var(--line)}
.zoom button:hover{background:var(--raised-2);color:var(--fg)}
.zoom #zVal{min-width:54px}
/* #cv = o quadro na tela (tamanho e cliques); o desenho fica em #cvr, por cima, que com zoom cobre só a parte vista (setView) */
.stage-frame{position:relative;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line-2),0 30px 80px -20px rgba(0,0,0,.7)}
#cv{display:block;background:#000;touch-action:none}
#cvr{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.transport{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);background:var(--panel)}
.play{width:36px;height:36px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);display:grid;place-items:center;flex:none}
.play svg{width:14px;height:14px}
.tc{font:500 12px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.tc span{color:var(--faint)}
.scrub{flex:1;min-width:60px;position:relative;height:30px;display:flex;align-items:center}
.scrub input{width:100%;accent-color:var(--accent)}
.marks{position:absolute;inset:0;pointer-events:none}
.marks i{position:absolute;top:3px;width:2px;height:6px;border-radius:1px;opacity:.9}

/* timeline: uma faixa por camada, barra = entra..sai, com trechos de entrada e saída */
.tl{--name:160px;background:var(--panel);border-top:1px solid var(--line);max-height:34vh;overflow-y:auto;overflow-x:hidden;position:relative;user-select:none;flex:none}
.tl[hidden]{display:none}
.tl-ruler{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:var(--name) 1fr;height:22px;background:var(--panel);border-bottom:1px solid var(--line)}
.tl-ruler .tl-scale{position:relative;cursor:ew-resize}
.tl-ruler i{position:absolute;top:0;bottom:0;border-left:1px solid var(--line-2)}
.tl-ruler b{position:absolute;top:4px;font:500 10px var(--f-mono);color:var(--faint);transform:translateX(3px)}
.tl-row{display:grid;grid-template-columns:var(--name) 1fr;height:30px;border-bottom:1px solid var(--line)}
.tl-row.sel{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.tl-row.off .tl-lane,.tl-row.off .lnm,.tl-row.off .dot{opacity:.4}
.tl-nm{display:flex;align-items:center;gap:7px;padding:0 8px 0 12px;font-size:11.5px;color:var(--muted);cursor:pointer;min-width:0;border-right:1px solid var(--line)}
.tl-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row.sel .tl-nm{color:var(--fg);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.tl-nm .dot{width:7px;height:7px;border-radius:50%;flex:none}
.tl-lane{position:relative;cursor:default}
.tl-row.grp{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tl-row.grp.sel{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.tl-row.grp .tl-nm{color:var(--fg);font-weight:600;padding-left:6px}
.tl-row.ingrp .tl-nm{padding-left:28px;box-shadow:inset 2px 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
.tl-row.ingrp.sel .tl-nm{box-shadow:inset 3px 0 0 var(--accent)}
.tl-bar.grp{background:color-mix(in srgb,var(--accent) 16%,transparent);border-style:dashed;border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.tl-row.grp.sel .tl-bar.grp{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 28%,transparent)}
.tl-chev{all:unset;cursor:pointer;width:22px;height:26px;line-height:26px;margin:0 -4px;text-align:center;color:var(--muted);flex:none;font-size:11px;transition:transform .12s}
.tl-chev:hover{color:var(--fg)}
.tl-n{color:var(--faint);font:500 10px var(--f-mono);flex:none}
.tl-bar{position:absolute;top:4px;bottom:4px;border-radius:4px;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);cursor:grab;overflow:hidden;min-width:6px}
.tl-row.sel .tl-bar{border-color:var(--accent);background:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 0 0 1px var(--accent)}
.tl-bar:active{cursor:grabbing}
.tl-bar .seg{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--c) 45%,transparent)}
.tl-bar .seg.in{left:0}
.tl-bar .seg.out{right:0}
.tl-bar em{position:relative;z-index:1;display:block;font:normal 500 10px var(--f-mono);color:var(--fg);padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tl-bar{touch-action:none;user-select:none;-webkit-user-select:none}
.tl-bar .h{position:absolute;top:0;bottom:0;width:9px;pointer-events:none}
@media (pointer:coarse){.tl-bar .h{width:22px}}
.tl-bar .h.l{left:0}
.tl-bar .h.r{right:0}
.tl-bar .h::after{content:"";position:absolute;top:22%;bottom:22%;width:3px;border-radius:2px;background:var(--c);opacity:0;transition:opacity .12s}
.tl-bar .h.l::after{left:2px}
.tl-bar .h.r::after{right:2px}
.tl-lane:hover .tl-bar .h::after,.tl-row.sel .tl-bar .h::after{opacity:.55}
.tl-bar.hl .h.l::after,.tl-bar.hr .h.r::after{opacity:1;top:12%;bottom:12%;background:var(--fg)}
.tl-bar.drag{cursor:grabbing}
.tl-tip{position:absolute;top:50%;transform:translateY(-50%);z-index:5;padding:2px 6px;border-radius:4px;background:var(--fg);color:var(--bg);font:600 10px var(--f-mono);white-space:nowrap;pointer-events:none}
.tl-snap{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--fg);opacity:.6;pointer-events:none;z-index:4}
.tl-snap[hidden]{display:none}
/* arrastar a barra na vertical: muda a ordem */
.tl.stacking,.tl.stacking *{cursor:grabbing!important}
.tl.stacking .tl-row{pointer-events:none}
.tl-bar.lift{z-index:2;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.tl-row.moving>.tl-nm{opacity:.45}
.tl-row.moving .tl-bar:not(.lift){opacity:.35}
.tl-drop{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:var(--accent);pointer-events:none;z-index:4}
.tl-drop[hidden]{display:none}
.tl-drop.in{left:22px}
.tl-drop::before{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tl-drop span{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:1px 6px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font:600 10px var(--f-mono);white-space:nowrap}
.tl-drop span:empty{display:none}
.richbar .clr{margin-left:auto}
.richbar .clr[hidden]{display:none}
.hexwrap{display:inline-flex;align-items:center;height:var(--ctl);background:var(--raised);border:1px solid transparent;border-radius:5px;padding:0 6px;gap:2px;font:11px var(--f-mono);color:var(--muted)}
.hexwrap:hover{border-color:var(--line-2)}
.hexwrap:focus-within{border-color:var(--muted)}
.hexwrap i{font-style:normal}
.hexwrap input.hex,.hexwrap input.cp-hex{width:62px;border:0;background:transparent;color:var(--fg);font:11px var(--f-mono);text-transform:uppercase;padding:0;outline:none}
.tl-head{position:absolute;top:0;height:100%;width:0;border-left:1.5px solid var(--fg);pointer-events:none;z-index:4}
.tl-head::before{content:"";position:absolute;top:0;left:-5px;border:5px solid transparent;border-top:6px solid var(--fg)}
.tl-grip{height:7px;flex:none;cursor:ns-resize;touch-action:none;background:var(--panel);border-top:1px solid var(--line);position:relative}
.tl-grip::after{content:"";position:absolute;left:50%;top:2px;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:var(--line-2)}
.tl-grip:hover::after{background:var(--muted)}
.tl-grip::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-6px}
@media (pointer:coarse){.tl-grip{height:14px}.tl-grip::after{top:5px}}
.tl-grip[hidden]{display:none}
.tl-end{position:absolute;top:0;bottom:0;right:0;width:12px;cursor:ew-resize;z-index:2;border-right:3px solid var(--muted)}
.tl-end:hover{background:rgba(255,255,255,.06)}
.tl-empty{padding:12px 16px;color:var(--faint);font-size:12px}
/* menu do botão direito */
.ctx{position:fixed;z-index:60;min-width:196px;background:var(--raised);border:1px solid var(--line-2);border-radius:9px;padding:4px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);display:flex;flex-direction:column}
.ctx button{border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:6px;font-size:12.5px;display:flex;justify-content:space-between;gap:18px;color:var(--fg)}
.ctx button:hover:not(:disabled){background:var(--raised-2)}
.ctx button:disabled{color:var(--faint)}
.ctx button kbd{font:11px var(--f-mono);color:var(--muted)}
.ctx button.danger{color:var(--danger)}
.blendbtn{width:100%;height:var(--ctl);display:flex;justify-content:space-between;align-items:center;background:var(--raised);border:1px solid transparent;border-radius:5px;padding:0 8px;font-size:11px;color:var(--fg);text-align:left}
.blendbtn:hover{border-color:var(--line-2)}
.blendbtn:focus-visible{border-color:var(--muted)}
.blendbtn i{font-style:normal;color:var(--muted);display:flex;flex:none}
.blendmenu{overflow-y:auto;padding:6px}
.blendmenu button{justify-content:flex-start;gap:6px}
.blendmenu button b{width:14px;font-weight:600;color:var(--muted);flex:none}
.blendmenu button.on{background:var(--accent-soft)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
/* margem: painel com os quatro lados */
.mwrap{position:relative}
.mwrap #mSum{font:500 11px var(--f-mono);color:var(--faint)}
.mpop{position:absolute;top:calc(100% + 8px);left:0;z-index:50;width:250px;background:var(--raised);border:1px solid var(--line-2);border-radius:9px;padding:12px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}
.mpop[hidden]{display:none}
.gf-pop{position:fixed;z-index:60;background:var(--raised);border:1px solid var(--line-2);border-radius:9px;padding:4px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);overflow-y:auto;overscroll-behavior:contain}
.gf-pop[hidden]{display:none}
.gf-pop button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:6px;font-size:11px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-pop button:hover,.gf-pop button.on{background:var(--raised-2)}.gf-pop button.sel{background:var(--accent-soft)}.gf-pop button:disabled{color:var(--faint)}.sel-pop{z-index:300}
.mgrid{display:grid;grid-template-columns:1fr 64px 1fr;grid-template-areas:". t ." "l box r" ". b .";gap:6px;align-items:center;justify-items:center}
.mgrid label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);align-items:center}
.mgrid input{width:64px;text-align:center}
.mgrid .mt{grid-area:t}.mgrid .ml{grid-area:l}.mgrid .mr{grid-area:r}.mgrid .mb{grid-area:b}
.mbox{grid-area:box;width:44px;height:54px;border:1.5px dashed rgba(var(--margin-rgb),.7);border-radius:3px;background:var(--bg)}
.props-empty{padding:24px 16px;color:var(--muted)}
.lhead{display:flex;align-items:center;gap:8px}
.lhead input{font-weight:600;font-size:14px;background:transparent;border-color:transparent;padding:4px 6px}
.lhead input:hover{border-color:var(--line-2)}
.type-chip{font:500 10px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:4px;background:var(--raised-2);white-space:nowrap}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.chip{border:1px solid var(--line);background:var(--raised);border-radius:7px;padding:8px 9px;text-align:left;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--line-2);background:var(--raised-2)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.chip em{font:normal 500 9px var(--f-mono);color:var(--muted);border:1px solid currentColor;border-radius:3px;padding:0 3px;flex:none}
.chip.dim{opacity:.55}
.chip-cat{grid-column:1/-1;font-size:10px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:8px 2px 1px}
.chip-cat:first-child{padding-top:0}
/* favoritos (estrela aparece ao passar o mouse e fica acesa no favorito) e busca com lupa */
.chip-w{position:relative;display:flex;min-width:0}
.chip-w .chip{flex:1;min-width:0}
.chip-w:hover .chip,.chip-w.on .chip,.chip-w:focus-within .chip{padding-right:24px}
.fav{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--faint);display:none;place-items:center}
.chip-w:hover .fav,.chip-w.on .fav,.fav:focus-visible{display:grid}
.fav svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.fav:hover{color:var(--fg);background:var(--raised-2)}
.fav[aria-pressed="true"]{color:var(--accent)}
.fav[aria-pressed="true"] svg{fill:currentColor}
.chip-none{grid-column:1/-1;margin:0;padding:6px 2px;color:var(--faint);font-size:11px}
.psearch{position:relative;display:flex;align-items:center}
.psearch input[type=text]{width:100%;padding-left:27px;padding-right:26px}
.psearch-i{position:absolute;left:8px;display:flex;color:var(--faint);pointer-events:none}
.psearch-i svg{width:13px;height:13px}
.psearch:focus-within .psearch-i{color:var(--fg)}
.psearch-x{position:absolute;right:3px;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:15px;line-height:1;display:grid;place-items:center}
.psearch-x:hover{background:var(--raised-2);color:var(--fg)}
.tabs{display:flex;gap:2px;background:var(--raised);border-radius:7px;padding:3px}
.tabs button{flex:1;border:0;background:transparent;padding:6px 4px;border-radius:5px;color:var(--muted);font-size:12px;font-weight:600}
.tabs button[aria-selected="true"]{background:var(--raised-2);color:var(--fg)}
.field{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;min-height:32px}
.field > label{color:var(--muted);font-size:13px}
.field.stack{grid-template-columns:1fr;gap:8px}
.rng{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:6px;align-items:center}
.rng input{width:100%;accent-color:var(--accent);min-width:0}
/* número ao lado da barra: parece texto, vira campo ao clicar */
.rng input.num{font:11px var(--f-mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;background:transparent;border:1px solid transparent;border-radius:5px;padding:3px 5px;cursor:text}
.rng input.num:hover{border-color:var(--line-2);color:var(--fg)}
.rng input.num:focus{background:var(--bg);border-color:var(--accent);color:var(--fg);outline:none}
/* editor de texto com peso por trecho */
.rich{background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;min-height:58px;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.35;font-size:14px;cursor:text}
.rich:focus{border-color:var(--accent);outline:none}
.edit-flash{animation:editFlash .7s ease-out}
@keyframes editFlash{0%{box-shadow:0 0 0 0 rgba(var(--sel-rgb),.7)}100%{box-shadow:0 0 0 10px rgba(var(--sel-rgb),0)}}
.richbar{display:flex;gap:4px;align-items:center}
.richbar .btn{width:30px;justify-content:center;padding-inline:0}
.richbar select{flex:1;padding:4px 6px;font-size:11px}
.fontgrp{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.colorctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:root{--checker:conic-gradient(#8a8a8a 25%,#c9c9c9 0 50%,#8a8a8a 0 75%,#c9c9c9 0) 0 0/8px 8px}
.cpick{width:34px;height:var(--ctl);border:1px solid var(--line-2);border-radius:5px;padding:0;cursor:pointer;background:linear-gradient(var(--c),var(--c)),var(--checker)}
.cp-alpha{position:relative;flex:1;height:12px;border-radius:5px;cursor:crosshair;touch-action:none;background:linear-gradient(to right,transparent,var(--top)),var(--checker)}
.cp-alpha .cp-knob{top:50%}
.pctwrap{gap:1px}
.hexwrap.pctwrap input[type=number]{width:30px;height:auto;min-width:0;box-sizing:content-box;border:0;border-radius:0;background:transparent;color:var(--fg);font:11px var(--f-mono);padding:0;outline:none;text-align:right;-moz-appearance:textfield;appearance:textfield}
.hexwrap.pctwrap input[type=number]:hover,.hexwrap.pctwrap input[type=number]:focus{border:0;background:transparent}
.hexwrap.pctwrap input::-webkit-outer-spin-button,.hexwrap.pctwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cpick.sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line-2)}
.cp-pop{position:fixed;z-index:1000;width:220px;padding:10px;background:var(--raised);border:1px solid var(--line-2);border-radius:9px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}
.cp-lib{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line-2);padding-top:10px;margin:0 -10px -10px;padding-inline:10px;padding-bottom:6px}
.cp-q{height:var(--ctl);background:var(--bg);border:1px solid transparent;border-radius:var(--r);color:var(--fg);font:11px var(--f-ui);padding:0 8px;outline:none}
.cp-q:focus{border-color:var(--accent)}
.cp-list{max-height:190px;overflow:auto;margin:0 -4px;padding:0 4px;display:flex;flex-direction:column;gap:1px}
.cp-gh{font:600 10.5px var(--f-mono);color:var(--faint);letter-spacing:.04em;padding:8px 4px 4px}
.cp-it{display:flex;align-items:center;gap:8px;height:var(--ctl);flex:none;padding:0 6px;border:0;border-radius:var(--r);background:transparent;color:var(--fg);font:11px var(--f-ui);text-align:left;cursor:pointer}
.cp-it:hover{background:var(--raised-2, rgba(255,255,255,.07))}
.cp-it.on{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.cp-dot{flex:none;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-hx{font:10.5px var(--f-mono);color:var(--faint)}
.cp-empty{font-size:11px;color:var(--faint);padding:8px 4px}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cp-lbl{font:600 10.5px var(--f-mono);color:var(--faint);letter-spacing:.06em}
.cp-sv,.cp-hue{position:relative;border-radius:5px;cursor:crosshair;touch-action:none}
.cp-sv{height:130px}
.cp-hue{height:12px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-knob{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
.cp-hue .cp-knob{top:50%}

.mini-sw{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);padding:0}
.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.segs button{border:1px solid var(--line);background:var(--raised);padding:11px 10px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap;line-height:1.2}
.segs button:hover{border-color:var(--line-2);background:var(--raised-2);color:var(--fg)}
.segs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg);font-weight:600}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;cursor:pointer}
details.adv summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none;display:flex;align-items:center;gap:6px}
details.adv summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.adv[open] summary::before{transform:rotate(45deg)}
details.adv > div{display:flex;flex-direction:column;gap:10px;margin-top:10px}

/* arquivos */
.filebox{display:flex;align-items:center;gap:4px;min-width:0;flex-shrink:1;overflow:hidden} /* janela estreita: encolhe o nome e o projeto em vez de passar por baixo do formato */
.filebox > *{flex:none}
.filebox .slash{color:var(--faint)}
.top #fileName{width:180px;flex:0 1 180px;min-width:72px;background:transparent;border-color:transparent;font-weight:600;padding:4px 6px}
.top #fileName:hover{border-color:var(--line-2)}
.top #fileName:focus{background:var(--bg);border-color:var(--accent)}
.savest{font-size:11px;color:var(--faint);white-space:nowrap;width:68px;min-width:0;flex:0 1 68px!important;overflow:hidden;text-overflow:ellipsis} /* largura fixa: "Salvo" ↔ "Salvando…" não empurra o resto da barra */
.files{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;z-index:30;padding:16px}
.files-card{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;width:min(980px,100%);height:min(720px,100%);max-height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;padding:20px}
.files-head{display:flex;align-items:center;gap:10px}
.files-head h2{margin:0;font:700 18px var(--f-display)}
.files-head #fileSearch{width:200px}
.files-head .spacer{flex:1}
.fgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;align-content:start;padding:2px}
.fcard{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);background:var(--raised);border-radius:10px;padding:8px;cursor:pointer;min-width:0}
.fcard:hover{border-color:var(--line-2);background:var(--raised-2)}
.fcard.cur{border-color:var(--accent)}
.fcard b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:52px}
.fcard small{color:var(--faint);font-size:11px}
.fcard input{font-size:12.5px;padding:3px 6px}
.fthumb{position:relative;aspect-ratio:4/5;border-radius:6px;background:var(--bg);overflow:hidden;display:grid;place-items:center;margin-bottom:4px}
.fthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fthumb em{position:absolute;top:6px;left:6px;font:normal 600 10px var(--f-ui);background:var(--raised-2);color:var(--fg);padding:2px 6px;border-radius:999px}
.fcard.new .fthumb{border:1px dashed var(--line-2)}
.fcard.new .fthumb span{font:300 40px/1 var(--f-ui);color:var(--muted)}
.facts{position:absolute;right:6px;bottom:8px;display:flex;gap:2px;opacity:0}
.fcard:hover .facts,.fcard:focus-within .facts{opacity:1}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:30;padding:16px}
.modal-card{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;width:min(520px,100%);max-height:calc(100% - 32px);overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-card h2{margin:0;font:700 18px var(--f-display)}
.bar{height:6px;background:var(--raised-2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--muted);transition:width .1s}
.modal video{width:100%;max-height:52vh;background:#000;border-radius:8px}
.modal .meta{font:11px var(--f-mono);color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:999px;font-weight:600;font-size:12.5px;z-index:40;max-width:calc(100% - 32px);text-align:center}

@media (max-width: 1020px){
  body{overflow:auto}
  html,body{height:auto}
  .app{display:flex;flex-direction:column;height:auto}
  .top{flex-wrap:wrap;padding-block:10px;height:auto}
  .stage{order:1;height:72vh}
  .right{order:2;border-left:0}
  .left{order:3;border-right:0}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
.nm-edit{width:100%;min-width:0;font:inherit;padding:1px 4px;border-radius:4px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg)}
/* linha por dentro da célula: por fora, a do primeiro/último item era cortada pela borda da lista */
.layer.drop-before,.lgroup.drop-before,.tl-nm.drop-before,.layer.drop-after,.tl-nm.drop-after{position:relative}
.layer.drop-before::after,.lgroup.drop-before::after,.tl-nm.drop-before::after,.layer.drop-after::after,.tl-nm.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px var(--panel),0 0 8px var(--accent);pointer-events:none;z-index:5}
.layer.drop-before::before,.lgroup.drop-before::before,.tl-nm.drop-before::before,.layer.drop-after::before,.tl-nm.drop-after::before{content:"";position:absolute;left:0;width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--accent);box-sizing:border-box;pointer-events:none;z-index:6}
.layer.drop-before::after,.lgroup.drop-before::after,.tl-nm.drop-before::after{top:0}
.layer.drop-before::before,.lgroup.drop-before::before,.tl-nm.drop-before::before{top:-3px}
.layer.drop-after::after,.tl-nm.drop-after::after{bottom:0}
.layer.drop-after::before,.tl-nm.drop-after::before{bottom:-3px}
.layer.dragging,.lgroup.dragging,.tl-nm.dragging{opacity:.4}
.lgroup.drop-in{box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.tl-nm.drop-in{box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.layer[draggable="true"],.tl-nm[draggable="true"]{cursor:grab}

.alrow{display:flex;align-items:center;gap:2px}
.alrow i{width:1px;height:16px;background:var(--line-2);margin:0 5px}
.alrow .icon-btn:disabled{opacity:.3;cursor:default}
.alrow .icon-btn:disabled:hover{background:transparent;color:var(--muted)}
.lgroup{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;border:1px solid transparent;cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lgroup:hover{background:var(--raised)}
.lgroup[aria-selected="true"]{color:var(--fg);border-color:var(--accent);background:var(--accent-soft)}
.lgroup.has-sel,.tl-nm.has-sel{box-shadow:inset 3px 0 0 var(--accent)}
.lgroup small{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:0}
.lgroup .tl-chev{height:20px;line-height:20px;margin:0 -4px 0 -2px}
.layer.ingrp{margin-left:10px;border-left:2px solid var(--line-2);border-radius:0 6px 6px 0}
.lgroup.nested{border-left:2px solid var(--line-2);border-radius:0 6px 6px 0}
.lgroup.nested[aria-selected="true"],.layer.ingrp[aria-selected="true"]{border-left-color:var(--accent)}

/* ===== Densidade e proporções no padrão do Figma (painéis 11px, controles de 28px, seções de 16px) ===== */
:root{--f-ui:"Mona Sans","Inter",ui-sans-serif,system-ui,sans-serif;--r:5px;--ctl:28px;--pad:16px}
body{font-size:11px;line-height:1.4;letter-spacing:.005em}
.app{--lw:240px;--rw:300px;--th:48px;grid-template-columns:var(--lw) minmax(0,1fr) var(--rw);grid-template-rows:var(--th) minmax(0,1fr)}
.top{gap:10px;padding-inline:12px}
.btn{padding:0 8px;height:24px;font-size:11px;border-radius:5px}
.btn.small{height:24px;padding:0 8px;font-size:11px}
.seg button{padding:4px 10px;font-size:11px}
.sec{padding:8px var(--pad) var(--pad);gap:8px}
.sec h3{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--fg);min-height:32px;margin:0 0 -2px}
.sec > h3:not(:first-child){margin:4px calc(var(--pad) * -1) -2px;padding:8px var(--pad) 0;border-top:1px solid var(--line)}
.sec h3 small{font-size:11px;color:var(--faint)}
.hint{font-size:11px;color:var(--muted)}
input[type=text],input[type=number],select{height:var(--ctl);padding:0 8px;border-radius:5px;border:1px solid transparent;background:var(--raised);font-size:11px}
input[type=text]:hover,input[type=number]:hover,select:hover{border-color:var(--line-2)}
textarea{border-color:transparent;background:var(--raised);border-radius:5px;padding:6px 8px;font-size:11px}
.rich{background:var(--raised);border-color:transparent;font-size:12px;padding:6px 8px}
.field{grid-template-columns:76px minmax(0,1fr);gap:8px;min-height:var(--ctl)}
.field > label{font-size:11px;color:var(--muted)}
.field.stack{gap:4px}
.rng{grid-template-columns:minmax(0,1fr) 52px;gap:4px}
.rng input.num{font-size:11px;height:24px;padding:0 6px}
.chips{gap:4px}
.chip{padding:0 6px;height:var(--ctl);font-size:11px;border-radius:5px;border-color:transparent}
.segs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:4px}
.segs button{padding:0 8px;height:var(--ctl);font-size:11px;border-radius:5px;border-color:transparent}
.tabs{padding:2px;border-radius:var(--r);gap:0}
.tabs button{padding:0;height:24px;font-size:11px;border-radius:4px}
.lhead{gap:6px;min-height:32px}
.lhead input{font-size:12px;height:24px;padding:0 6px}
.type-chip{font-size:9px;padding:2px 5px}
.icon-btn{width:28px;height:28px;border-radius:5px}
.icon-btn svg{width:16px;height:16px}
.check{font-size:11px}
.layer{padding:0 8px;height:28px;border-radius:5px}
.layers{gap:0}
.adds{gap:4px}
.add{padding:6px 2px 5px;font-size:11px;border-radius:var(--r);border-color:transparent}
.tpl{border-radius:var(--r)}
.drop{padding:8px}
.pg-name{font-size:11px;letter-spacing:0;text-transform:none;color:var(--fg)}
.fontrow{grid-template-columns:64px 1fr;gap:8px}
.fontrow label{font-size:11px}
.transport{padding:6px 12px;gap:8px}
.play{width:28px;height:28px}
.tc{font-size:11px}
.tl{--name:160px}
.tl-ruler{height:24px}
.tl-row{height:28px}
.tl-nm{font-size:11px}
.alrow{gap:0}
.alrow i{margin:0 4px}
.props-empty{padding:16px;font-size:11px}
.mpop{width:232px}
.ctx button{font-size:11px;padding:6px 8px}
.cp-pop{width:232px}
@media (max-width:1180px){.app{--lw:220px;--rw:280px}}

/* campos de cor (Base, Luz, Cor 1…): mais ar entre um e outro, com divisor */
.field:has(> .colorctl){align-items:start;padding-block:16px;margin-block:0}
.field:has(> .colorctl) > label{padding-top:6px}
.field:has(> .colorctl) + .field:has(> .colorctl){border-top:1px solid var(--line);margin-top:0}
.colorctl{gap:8px 6px;row-gap:10px}
.colorctl .mini-sw{width:20px;height:20px}
.colorctl > :nth-child(2){margin-right:4px}

/* texto: grupos claros, alinhamento numa linha só, sem nada recolhido */
.segs.tight{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.segs.tight button{padding:0 4px}
.checks{display:flex;gap:16px;min-height:var(--ctl);align-items:center}
.field:has(> .colorctl){padding-block:8px}
.field.stack > .segs{width:100%}

/* cor: rótulo em cima, controles embaixo (largura toda); hint e caixas de seleção respiram igual */
.field:has(> .colorctl){grid-template-columns:1fr;gap:8px;padding-block:8px}
.field:has(> .colorctl) > label{padding-top:0}
.sec > .check{min-height:var(--ctl)}
.sec > .hint{margin-top:-2px}
.sec > .row{min-height:var(--ctl)}

.tl-row .tl-nm[draggable="true"]{cursor:grab}
.tl-row .tl-nm[draggable="true"]:active{cursor:grabbing}
.tl-chev{cursor:pointer!important}

/* ===== Usabilidade: aviso com ação, aviso no palco, botão Ver, atalhos, conta-gotas ===== */
.toast{display:flex;align-items:center;gap:10px}
.toast .toast-act{border:0;background:rgba(16,17,21,.1);color:var(--bg);font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px}
.toast .toast-act:hover{background:rgba(16,17,21,.2)}
.stage-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);
  padding:4px 4px 4px 12px;border-radius:999px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line-2);box-shadow:0 8px 24px -8px rgba(0,0,0,.6);font-size:11px;color:var(--fg)}
.stage-hint span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-hint button{flex:none;border:0;background:var(--btn);color:var(--btn-ink);font-weight:600;font-size:11px;height:22px;padding:0 10px;border-radius:999px}
.stage-hint button:hover{filter:brightness(1.08)}
.stage-hint button.ghost{background:var(--raised);color:var(--fg);font-weight:500}
.stage-hint .hseg{flex:none;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--raised)}
.stage-hint .hseg button{background:transparent;color:var(--muted);font-weight:500;height:18px;padding:0 9px}
.stage-hint .hseg button:hover{color:var(--fg);filter:none}
.stage-hint .hseg button[aria-pressed="true"]{background:var(--line-2);color:var(--fg)}
.sec h3 .see{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:11px;font-weight:600}
.sec h3 .see svg{width:9px;height:9px}
.sec h3 .see:hover{color:var(--fg);background:var(--raised-2);border-color:var(--line-2)}
.sec h3 .h3r{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.sec h3 .h3r .see{margin-left:0}
.keysbtn{width:24px;padding:0;justify-content:center;font-weight:700}
.keys-card{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;width:min(1040px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:20px}
.keys-grid{columns:3 300px;column-gap:28px}
.keys-grid section{break-inside:avoid;margin:0 0 20px}
.keys-grid h3{margin:0 0 6px;font-size:11px;font-weight:600;color:var(--fg)}
.krow{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;padding:6px 0;border-bottom:1px solid var(--line)}
.krow kbd{font:500 10.5px/1.5 var(--f-mono);color:var(--fg);background:var(--raised-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 6px;justify-self:start}
.krow span{color:var(--muted);font-size:11px;line-height:1.5}
.cp-rr{display:inline-flex;align-items:center;gap:4px}
.cp-eye{width:var(--ctl);height:var(--ctl)}
.cp-eye svg{width:14px;height:14px}
/* sem cor: quadrado branco cortado por uma diagonal vermelha (amostra e botão) */
:root{--slash:linear-gradient(to top right,transparent calc(50% - 1px),var(--danger) calc(50% - 1px),var(--danger) calc(50% + 1px),transparent calc(50% + 1px))}
.cpick.none{background:var(--slash),#fff}
.cnone{width:var(--ctl);height:var(--ctl);padding:0;border:1px solid transparent;border-radius:var(--r);background:var(--raised);cursor:pointer;display:inline-grid;place-items:center}
.cnone::before{content:"";width:16px;height:16px;border-radius:3px;border:1px solid var(--line-2);background:var(--slash),#fff}
.cnone:hover{border-color:var(--line-2)}
.cnone:focus-visible,.cnone[aria-pressed="true"]{border-color:var(--accent)}
.colorctl.is-none .hexwrap{opacity:.5}

/* ===== Recursos novos: câmera, transição, trilha, variações, exportar, meus elementos ===== */
:root{--c-camera:#7FD4E8;--c-fx:#FF8F6B;--c-video:#B8E05C;--c-svg:#E6EAF2}
.adds-sub{grid-column:1/-1;font-size:10px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:8px 2px 1px}
.add.my{position:relative;cursor:pointer}
.add.my img.gl{width:auto;max-width:100%;height:24px;object-fit:contain}
.add.my>span:last-of-type{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add{position:relative}
.add .x{position:absolute;top:1px;right:2px;width:16px;height:16px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:13px;line-height:1;display:none;place-items:center;padding:0}
.add:hover .x,.add:focus-within .x{display:grid}
.add .x:hover{background:var(--raised-2);color:var(--fg)}
.add .x.ed{top:2px;right:2px}
.add .x.ed.l{right:auto;left:2px}
.add.my .nm-edit{width:100%;min-width:0;height:20px;font-size:11px;padding:0 4px}
#audioBox{display:flex;flex-direction:column;gap:8px}
#audioBox .hint{margin:0}
.aud{display:flex;align-items:center;gap:6px;min-width:0}
.aud-nm{flex:1;min-width:0;display:grid;line-height:1.25}
.aud-nm b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aud-nm small{color:var(--muted);font:500 10.5px var(--f-mono)}
.tl-ruler u.tl-beat{position:absolute;bottom:0;height:5px;border-left:1px solid var(--muted);text-decoration:none;pointer-events:none}
/* carrossel: fim de cada slide mais curto que a timeline; barra de quem está num slide-imagem fica apagada */
.tl-ruler s.tl-send{position:absolute;top:0;bottom:0;border-left:1px dashed var(--muted);text-decoration:none;pointer-events:none;padding:12px 0 0 3px;font:600 9px/1 var(--f-mono);color:var(--muted)}
.tl-bar.still{opacity:.4}
.tl-row.tl-audio{background:rgba(255,255,255,.02)}
.tl-row.tl-audio .tl-lane{cursor:ew-resize}
.tl-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.xcard{height:auto;max-height:100%;width:min(520px,100%);overflow:auto}
.xcard h3{margin:6px 0 0;font-size:11px;font-weight:600;color:var(--muted)}
.xcard .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.xcard .chip{justify-content:center;height:30px}
.xsum{margin-top:8px;color:var(--fg)}
.vcard{width:min(1180px,100%)}
.vbody{flex:1;min-height:0;display:flex;gap:16px}
.vscroll{flex:1;min-width:0;overflow:auto}
.vgrid{display:grid;gap:4px;align-items:start}
.vgrid .vh{position:sticky;top:0;z-index:1;background:var(--panel);font-size:11px;font-weight:600;color:var(--muted);padding:2px 2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgrid input,.vgrid textarea{width:100%;border:1px solid var(--line);background:var(--raised);border-radius:6px;padding:6px 8px;font-size:12px;resize:vertical;min-height:34px}
.vgrid textarea::placeholder{color:var(--faint)}
.vgrid input[readonly]{color:var(--muted);background:transparent}
.vgrid .vsel{border-color:var(--accent)}
.vgrid .icon-btn{margin-top:6px}
.vside{flex:none;width:300px;display:grid;align-content:start;gap:8px;justify-items:center}
.vprev{width:300px;height:auto;border-radius:8px;border:1px solid var(--line-2);background:#000}
.vside b{font-size:12px;color:var(--muted);font-weight:600}
/* layout automático (grupo) */
.flow .icon-btn[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft)}
.field.cont > label{visibility:hidden} /* continuação da linha de modo acima (Abraçar | Fixa…): mesmo nome, só para leitores de tela */
.flow-num{font:11px var(--f-mono);color:var(--muted);text-align:right;padding:3px 5px}
/* padronização: todo slider usa a cor da marca; o valor ao lado de um slider fora do .rng parece o do .rng */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:16px;margin:0;padding:0 6px;cursor:pointer;clip-path:inset(-8px 0)}
/* slider: trilha fina, bolinha pequena com anel claro; o preenchimento é a borda-imagem da bolinha esticada para a esquerda */
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--raised-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:6px;height:6px;border:0;border-radius:50%;background:transparent;outline:3px solid var(--fg);border-image:linear-gradient(var(--muted),var(--muted)) 0 fill / 0 / 0 0 0 100vw}
/* slider com zero no meio (.bi, ver rangeFill): o mesmo preenchimento, mas a partir do zero e para o lado em que a bolinha está (--ol/--or = quanto estica para cada lado) */
input[type=range].bi::-webkit-slider-thumb{border-image:linear-gradient(var(--muted),var(--muted)) 0 fill / 0 / 0 var(--or,0px) 0 var(--ol,0px)}
input[type=range]:disabled{opacity:.5}
::placeholder{color:color-mix(in srgb,var(--muted) 55%,var(--faint));opacity:1}
/* caixa de marcar: marcada = fundo do acento com o visto escuro (--accent-ink), para ler de longe; desmarcada = contorno visível */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:16px;height:16px;margin:0;border:1.5px solid var(--faint);border-radius:4px;background:var(--bg) center/12px no-repeat;cursor:pointer;transition:background-color .1s,border-color .1s}
input[type=checkbox]:hover{border-color:var(--muted)}
input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.5 2.5 4.8-5.3' fill='none' stroke='%2308150C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
.sec .row > output{font:11px var(--f-mono);color:var(--muted);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}

/* campo de cor ocupa a linha toda: amostra | hex (estica) | opacidade */
.colorctl{display:grid;grid-template-columns:34px minmax(0,1fr) 72px var(--ctl);gap:6px;width:100%}
.colorctl > .hexwrap{min-width:0}
.colorctl .hexwrap input.hex{flex:1;width:auto;min-width:0}
.colorctl .pctwrap{justify-content:flex-end}

/* abas Animação / Conteúdo e estilo: destaque na cor do tipo da camada, para achar de relance */
.sec-head .tabs{background:color-mix(in srgb,var(--tc) 12%,var(--raised))}
.sec-head .tabs button{color:color-mix(in srgb,var(--tc) 75%,var(--fg))}
.sec-head .tabs button:hover{background:rgba(255,255,255,.08)}
.sec-head .tabs button[aria-selected="true"]{background:var(--tc);color:var(--bg);font-weight:700}
#stageBox.pen,#stageBox.pen #cv{cursor:crosshair!important}
#stageBox.hand,#stageBox.hand #cv{cursor:grab!important}

/* ===== Seções que abrem e fecham, como no Figma: título à esquerda, + (abre) / − (fecha) à direita, o cabeçalho inteiro clicável.
   Fechada, mostra o valor atual (preset escolhido) logo depois do título ===== */
.sec > h3.fold-h{justify-content:flex-start;cursor:pointer;user-select:none}
.sec > h3.fold-h > .see,.sec > h3.fold-h > .h3r{margin-left:0}
.fold-sum{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:500}
.fold-h.shut.has-sum > small{display:none}
.fold-btn{flex:none;width:24px;height:24px;margin-right:-6px;padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--muted);display:grid;place-items:center}
.fold-btn svg{width:16px;height:16px;transition:transform .12s;transform:rotate(180deg)}
.shut .fold-btn svg{transform:none}
.fold-h:hover .fold-btn,.chip-cat:hover .fold-btn{color:var(--fg)}
.fold-btn:hover,.chip-cat:hover .fold-btn{background:var(--line)}
.folded{display:none!important}
.sec.sec-shut{padding-bottom:8px}
/* subtítulo dentro de uma seção (Luz, Cor, Detalhes em Ajustes) e categorias das grades de animação: um nível abaixo, mesma seta */
.sec > h3.sub{border-top:0;margin-top:0;padding-top:0;min-height:28px;color:var(--muted);font-weight:500}
.chip-cat{font:500 11px var(--f-ui);letter-spacing:0;text-transform:none;color:var(--muted);padding:8px 0 2px}
button.chip-cat{display:flex;align-items:center;gap:8px;height:28px;margin:0;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;min-width:0}
button.chip-cat:hover{color:var(--fg)}
.chip-cat small{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px var(--f-ui);color:var(--faint)}
.chip-cat.shut small.cur{color:var(--accent)}

/* ===== Painéis que se escondem: botões no transporte (colunas, barra de cima, timeline) e Ctrl + \ esconde tudo ===== */
.app.no-left{--lw:0px}.app.no-right{--rw:0px}.app.no-top{--th:0px}
.app.no-left>.left,.app.no-right>.right,.app.no-top>.top,.app.no-bottom .transport,.app.no-bottom .tl,.app.no-bottom .tl-grip{display:none!important}
.app.no-ui{--lw:0px;--rw:0px;--th:0px}
.app.no-ui>.top,.app.no-ui>.left,.app.no-ui>.right,.app.no-ui .transport,.app.no-ui .tl,.app.no-ui .tl-grip{display:none!important}
.panes{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panes button{border:0;background:var(--raised);color:var(--faint);height:24px;width:28px;padding:0;display:grid;place-items:center}
.panes button+button{border-left:1px solid var(--line)}
.panes button:hover{background:var(--raised-2);color:var(--fg)}
.panes button[aria-pressed="true"],.panes #pAll{color:var(--fg)}
.panes svg{width:16px;height:16px}
.panes button[aria-pressed="false"] .pf{opacity:0}
.ui-back{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;height:28px;padding:0 5px 0 12px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--muted);font-size:11px;font-weight:600;opacity:.6;transition:opacity .15s}
.ui-back:hover,.ui-back:focus-visible{opacity:1;color:var(--fg)}
.ui-ico{width:28px;padding:0;justify-content:center}.ui-ico svg{width:16px;height:16px}
/* janela estreita: o transporte quebra em duas linhas em vez de passar por cima da coluna da direita */
.transport{flex-wrap:wrap;row-gap:6px}
/* imagem estática (Duração 0): some o que é de vídeo (tocar, posição, repetir, timeline, FPS, trilha) */
.app.still #play,.app.still #tc,.app.still .scrub,.app.still label[for="loop"],.app.still #tlToggle,.app.still .tl,.app.still .tl-grip,
.app.still label[for="fps"],.app.still .left .sec:has(#audioBox){display:none!important}
.app.still .transport .zoom{margin-left:auto}
/* cabeçalho fechado com resumo: o resumo vale mais que a dica ("no fim do vídeo" volta ao abrir); dica nunca quebra linha */
.sec h3 small{white-space:nowrap}
.fold-h.shut.has-sum .h3r small{display:none}

/* ===== Nível de dentro (como os grupos de estilos do Figma): mesma seta à direita e o grupo aberto vira um bloco destacado ===== */
.fold-btn.fold-chev{margin:0 -4px 0 0}
button.chip-cat{gap:8px}
.cat-box{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 -8px;padding:0 8px 8px;border-radius:6px;background:var(--raised)}
.cat-box > .chip-cat{grid-column:1/-1}
.cat-box .chip{background:var(--raised-2)}
.cat-box .chip:hover{background:var(--line-2)}
.cat-box .chip[aria-pressed="true"],.cat-box .chip[aria-pressed="true"]:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--raised-2))}
.sec > h3.sub.sub-open{margin-left:-8px;margin-right:-8px;padding:0 8px;border-radius:6px 6px 0 0;background:var(--raised)}
.sec > .in-sub{margin:-8px -8px 0;padding:8px 8px 0;background:var(--raised)}
.sec > .in-sub-end{padding-bottom:8px;border-radius:0 0 6px 6px}
.sec > h3.sub.in-sub-end{border-radius:6px}
.sec > h3.sub:not(:first-child){margin-top:4px}

/* a barra de rolagem das colunas não empurra o conteúdo quando aparece (antes dava um tranco para o lado ao abrir uma seção) */
.left,.right{scrollbar-gutter:stable}
.pfrow{display:flex;flex-wrap:wrap;gap:6px}
.pfrow .btn{display:inline-flex;align-items:center;gap:5px}
.pfrow .btn svg{width:14px;height:14px;flex:none}

/* componentes: padrão de cada elemento de Adicionar (lista na coluna da esquerda + janela) */
.comp-list{display:flex;flex-direction:column;gap:2px}
.comp-it{display:grid;grid-template-columns:12px auto minmax(0,1fr) 6px;align-items:center;gap:8px;height:var(--ctl);padding:0 8px;border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--fg);font-size:11px;text-align:left}
.comp-it:hover{background:var(--raised)}
.comp-it b{font-weight:600}
.comp-it small{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.comp-sw{width:12px;height:12px;border-radius:3px;background:linear-gradient(var(--c),var(--c)),var(--checker);border:1px solid var(--line-2)}
.comp-it i,.comp-nv i{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.comp-card{width:min(1440px,100%);height:100%} /* quase a tela toda (pedido do usuário) */
.comp-wrap{flex:1;min-height:0;display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px}
.comp-nav{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.comp-nv{display:flex;justify-content:space-between;align-items:center;gap:8px;height:var(--ctl);flex:none;padding:0 10px;border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--muted);font-size:12px;text-align:left}
.comp-nv:hover{background:var(--raised);color:var(--fg)}
.comp-nv[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.comp-grp{flex:none;margin:10px 0 2px;padding:0 10px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.comp-list .comp-grp{padding:0 8px}
.comp-main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:20px}
.comp-main .comp-body{min-height:0;overflow:auto;padding-right:6px;scrollbar-gutter:stable}
.comp-pvbox{position:relative;min-height:0;display:grid;place-items:center;background:var(--bg);border-radius:9px}
.comp-pv{display:block;max-width:100%;max-height:100%;width:100%;height:auto;aspect-ratio:640/300;border-radius:9px;border:1px solid var(--line-2)}
.comp-play{position:absolute;right:8px;bottom:8px}
.comp-body{display:flex;flex-direction:column;gap:6px}
.comp-body>*{flex-shrink:0} /* com muitos campos a coluna rola; sem isso os campos encolhiam e se sobrepunham */
.comp-body h3{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:8px}
.comp-body h3.sub{font-size:11px;color:var(--muted);margin-top:10px}
.comp-body h3 small{font-size:11px;font-weight:500;color:var(--faint)}
.comp-colors{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.comp-colors .cpick{width:var(--ctl)}
.comp-colors .cpick[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.comp-or{color:var(--faint);font-size:11px;padding:0 2px}
.comp-tag{color:var(--muted);font-size:11px;margin-left:4px}
.comp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* projetos: pastas de arquivos (barra de cima + janela Arquivos) */
.filebox .projbtn{display:inline-flex;align-items:center;width:auto;max-width:170px;min-width:0;flex:0 0 auto;gap:5px;color:var(--muted)} /* do tamanho do nome; nome longo vira reticências */
.projbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:16px}
.projbtn svg{display:block;flex:none}
.projbtn .pj-ic{flex:none;color:var(--faint);margin-top:-1px}
.projbtn:hover .pj-ic{color:var(--muted)}
.projbtn:hover{color:var(--fg)}
.fbody{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.fbody .fgrid{min-height:0}
.fside{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;padding-right:4px}
.fside-h{font-size:11px;font-weight:600;color:var(--faint);padding:12px 8px 4px}
.fproj{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;align-items:center;gap:8px;height:var(--ctl);flex:none;padding:0 4px 0 8px;border:1px solid transparent;border-radius:var(--r);color:var(--muted);font-size:12px;cursor:pointer}
.fproj:hover{background:var(--raised);color:var(--fg)}
.fproj[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.fproj.drop-in{border-color:var(--accent);border-style:dashed;background:var(--accent-soft)}
.fp-ic{display:grid;place-items:center;color:var(--faint)}
.fp-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fproj small{color:var(--faint);font:11px var(--f-mono)}
.fproj input.nm-edit{height:22px;font:inherit;font-size:12px;line-height:20px;padding:0 3px;margin-left:-4px;border-radius:4px;min-width:0} /* mesmo tamanho do nome: não pula ao renomear */
.fp-acts{display:flex;gap:2px}
.fp-del{opacity:0;width:22px;height:22px}

.fproj:hover .fp-del,.fproj:focus-within .fp-del{opacity:1}
.btn.small.fp-new{margin-top:6px;justify-content:center}
.fcard.dragging{opacity:.5}
.fempty{grid-column:1/-1;padding:24px 4px}
.ctx-lbl{font-size:11px;color:var(--faint);padding:6px 8px 4px}
/* barra de cima em janela estreita: menos respiro e só o símbolo do logo, para o arquivo e o projeto continuarem legíveis */
@media (max-width:1720px){
  .top{gap:8px;padding-inline:12px}
  .logo-word{font-size:0;gap:0}
}

.modal.ask{z-index:70}
.modal.ask .modal-card{width:min(420px,100%)}
.ask-msg{margin:0;color:var(--muted);font-size:12px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--btn-ink)}
.ctx button .ctx-sub{display:block;color:var(--faint);font-size:10.5px;margin-top:1px}

/* carrossel: renomear o slide pelo nome acima dele (clique duplo) */
input.slide-nm{position:fixed;z-index:40;width:180px;height:var(--ctl);background:var(--raised);color:var(--fg);border:1px solid var(--accent);border-radius:var(--r);font:600 11px var(--f-ui);padding:0 8px;outline:none}

/* segmento só de ícones (alinhamento, caixa alta/itálico, tipo de forma, contorno, máscara, virar, direção): mesmo controle dos
   segmentos escritos (28 px, --raised, marcado = verde), com 32 px de largura por ícone; o nome fica no title */
.segs.ico{display:flex;flex-wrap:wrap;gap:4px}
.segs.ico button{width:30px;padding:0;display:grid;place-items:center}
.segs.ico button svg{width:16px;height:16px;overflow:visible}
.segs.ico button[aria-pressed="true"]{color:var(--fg)}
/* as escolhas com ícone do layout automático (Livre/Coluna/Linha, Alinhar, Fixo) seguem o mesmo controle */
.alrow:has(> .icon-btn[aria-pressed]){gap:4px}
.alrow .icon-btn[aria-pressed]{width:30px;background:var(--raised);border:1px solid transparent}
.alrow .icon-btn[aria-pressed]:hover{border-color:var(--line-2);color:var(--fg)}
.alrow .icon-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
/* B / I do editor de trecho: mesmo ícone do "Itálico" do texto inteiro */
.richbar .icon-btn{flex:none;background:var(--raised)}
.richbar .icon-btn:hover{background:var(--raised-2)}
/* desfazer / refazer no topo */
#undo,#redo{flex:none}
#undo:disabled,#redo:disabled{opacity:.35;cursor:default;background:transparent}
.comp-play{gap:5px}
.comp-play svg{width:9px;height:9px}