.space-onboarding { padding:32px; margin:24px 0; border:1px solid var(--border); border-radius:8px; }
.space-onboarding p { color:var(--muted); margin:12px 0 20px; }
.space-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.space-actions>span { margin-left:auto; font-size:var(--text-label-size); color:var(--muted); }
.space-layout { display:grid; grid-template-columns:144px minmax(0,1fr) 230px; gap:12px; }
.space-palette,.space-inspector { border:1px solid var(--border); border-radius:8px; padding:14px; min-width:0; }
.space-palette label,.space-inspector label { display:grid; gap:8px; color:var(--muted); font-size:var(--text-label-size); margin-bottom:18px; }
.space-inspector h2 { font-size:var(--text-h3-size); margin-bottom:20px; }
.space-palette input,.space-inspector input,.space-inspector select,.space-inspector textarea { width:100%; min-width:0; }
#spaceTypes { display:grid; gap:8px; }
#spaceTypes button { text-align:left; font-size:var(--text-label-size); }
.space-inspector-actions { display:grid; gap:8px; margin-top:24px; }
.space-inspector-actions button { text-align:left; font-size:var(--text-label-size); }
.space-canvas { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:8px; min-width:0; background:#070707; }
#spaceViewport { height:680px; overflow:auto; position:relative; }
#spaceWorld { position:relative; transform-origin:0 0; }
#spaceEdges { position:absolute; inset:0; pointer-events:none; }
#spaceEdges path { fill:none; stroke:var(--subtle); stroke-width:1.5; }
.space-node { position:absolute; width:250px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.space-node.is-selected { outline:2px solid var(--fg); outline-offset:2px; }
.space-node header { cursor:grab; display:flex; justify-content:space-between; gap:10px; padding:14px; border-bottom:1px solid var(--border); font-size:var(--text-body-sm-size); touch-action:none; }
.space-node header small { color:var(--muted); font-size:var(--text-label-size); }
.space-node-body { padding:12px; min-height:148px; }
.space-node-body img,.space-node-body video { display:block; width:100%; max-height:210px; object-fit:contain; }
.space-node-body audio { max-width:100%; }
.space-node-empty { color:var(--subtle); font-size:var(--text-label-size); padding-top:48px; text-align:center; }
.space-text-output { font-size:var(--text-label-size); line-height:1.6; white-space:pre-wrap; max-height:170px; overflow:auto; }
.space-node footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); font-size:var(--text-label-size); padding:4px; }
.space-node footer button { border:0; background:none; font-size:var(--text-label-size); padding:6px; }
.space-zoom { position:absolute; bottom:16px; left:16px; z-index:2; display:flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:4px; }
.space-zoom button { min-width:36px; font-size:var(--text-label-size); border:0; }
@media(max-width:1100px) { .space-layout { grid-template-columns:minmax(0,1fr) 220px; }.space-palette { grid-column:1/-1; }#spaceTypes { display:flex; flex-wrap:wrap; }.space-palette label { max-width:250px; } }
@media(max-width:700px) { .space-layout { grid-template-columns:minmax(0,1fr); }.space-inspector { order:3; }.space-palette { display:none; }#spaceViewport { height:500px; }.space-actions>span { width:100%; margin:0; }.space-node header { cursor:default; } }
.space-options{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 16px;color:var(--muted);font-size:var(--text-label-size)}.space-options label{display:flex;align-items:center;gap:8px}.space-options input{width:16px;height:16px;accent-color:white}
.flow-inputs{display:grid;gap:12px;margin:20px 0}.flow-inputs label{display:flex;gap:12px;align-items:center}.flow-inputs input{width:16px;height:16px}.flow-card{padding:16px 0;border-bottom:1px solid var(--border)}
.space-simple.space-layout{display:block}.space-simple .space-palette,.space-simple .space-inspector,.space-simple #spaceEdges,.space-simple .space-zoom{display:none}.space-simple #spaceWorld{width:100%!important;height:auto!important;min-height:320px;display:flex;gap:24px;padding:24px;flex-wrap:wrap;transform:none!important}.space-simple .space-node{position:relative;left:auto!important;top:auto!important}.space-simple .space-node footer button{display:none}
@media(max-width:700px){.space-inspector,#spaceAlign,#spaceSaveFlow{display:none}.space-actions{gap:8px}.space-options{gap:12px}.space-node header{touch-action:pan-x pan-y}}
.space-palette{max-height:680px;overflow-y:auto}.space-node footer{flex-wrap:wrap;gap:6px}
.space-creative-origin{font-size:var(--text-label-size);color:var(--muted);line-height:1.5;margin-bottom:10px;overflow-wrap:anywhere}
.space-creative-check{display:flex!important;align-items:center;gap:8px}.space-creative-check input{width:18px!important;height:18px;flex:none}
.space-creative-check[hidden]{display:none!important}
#spaceCreativeResult pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:var(--text-label-size);padding:12px;background:var(--surface)}
#spaceCreativeResult h3{font-size:var(--text-body-size);line-height:1.5;margin:16px 0 8px}
/* Quiet canvas tools; the existing graph and execution contracts remain authoritative. */
.space-layout { position:relative; grid-template-columns:minmax(0,1fr) 230px; }
.space-palette { position:absolute; left:12px; top:12px; width:210px; z-index:4; background:var(--bg); }
.space-palette[hidden] { display:none; }
.space-actions { flex-wrap:nowrap; gap:8px; }
.space-actions>button:not(.btn-primary),.space-menu>summary { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; }
.space-actions>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.space-menu { position:relative; }
.space-menu>summary { cursor:pointer; list-style:none; border:1px solid var(--border); border-radius:4px; }
.space-menu-items { position:absolute; right:0; top:calc(100% + 8px); width:260px; padding:8px; z-index:6; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.space-menu-items>button { display:block; width:100%; text-align:left; background:transparent; border:0; min-height:44px; }
.space-menu-items .space-options { display:grid; gap:12px; padding:12px; margin:8px 0 0; border-top:1px solid var(--line); }
#spaceViewport { overflow:hidden; cursor:grab; touch-action:none; }
#spaceViewport.is-panning { cursor:grabbing; }
.space-node { cursor:default; }
.space-node header { cursor:grab; touch-action:none; }
.space-node footer button { min-height:32px; color:var(--muted); }
.space-node footer .can-connect { outline:2px solid var(--fg); outline-offset:-2px; color:var(--fg); }
.space-node footer [aria-pressed=true] { background:var(--fg); color:var(--bg); }
.space-canvas { background:var(--black); }
.space-canvas-hint { position:absolute; top:12px; left:16px; right:16px; pointer-events:none; color:var(--muted); font-size:var(--text-label-size); margin:0; }
.space-zoom { align-items:center; }
#spaceZoomValue { min-width:42px; text-align:center; font-size:var(--text-label-size); color:var(--muted); }
.space-zoom button { min-height:36px; }
@media(max-width:1100px){.space-layout{grid-template-columns:minmax(0,1fr) 220px}.space-palette{grid-column:auto}#spaceTypes{display:grid}}
@media(max-width:700px){.space-layout{grid-template-columns:minmax(0,1fr)}.space-inspector{display:block}.space-palette:not([hidden]){display:block}.space-actions{flex-wrap:wrap}.space-actions>span{order:5;width:100%;font-size:var(--text-label-size)}.space-actions .btn-primary{margin-left:auto}.space-menu-items{right:-48px}#spaceAlign,#spaceSaveFlow{display:block}.space-node footer button{min-height:44px}.space-zoom button{min-height:44px}.space-canvas-hint{font-size:var(--text-label-size)}.space-inspector{order:3}}

/* 20/09/2026 · ESTADO VAZIO DA PALETA, NO TAMANHO DO PAINEL.
   `.empty-page` nasceu para região de página inteira: 340 px de altura mínima,
   32 px de padding e `h2` de 24 px. A paleta é um painel flutuante de 210 px, e
   medindo a captura o título quebrava em QUATRO linhas. Escopo a caixa ao
   painel — exatamente como `studio.css` já faz em `.home-recent .empty-page`,
   que existe pelo mesmo motivo. Nenhuma cor nova, nenhum valor fora dos tokens,
   e nenhum padrão novo de estado vazio: continua sendo `.empty-page`. */
.space-palette .empty-page { min-height:0; padding:var(--space-4); gap:8px; }
.space-palette .empty-page h2 { font-size:var(--text-h3-size); }

/* ==========================================================================
   ONDA 4 (22/09/2026) — CANVAS INFINITO (V1.4 §6.1-C, §28, §41, §46).
   O mundo não tem borda: #spaceWorld é um ponto na origem que o transform
   desloca e escala; as etapas vivem em coordenadas livres (inclusive
   negativas). Só tokens da casa; nenhuma cor de marca nova.
   ========================================================================== */
#spaceViewport { position:relative; overflow:hidden; cursor:grab; touch-action:none; user-select:none;
  background-color:var(--black); background-image:radial-gradient(circle, color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 1.2px);
  background-size:var(--space-grid,16px) var(--space-grid,16px); }
#spaceViewport:focus-visible { outline:2px solid var(--fg); outline-offset:-2px; }
#spaceViewport.is-space, #spaceViewport.is-space * { cursor:grab !important; }
#spaceViewport.is-panning, #spaceViewport.is-panning * { cursor:grabbing !important; }
#spaceViewport.is-dragging { cursor:grabbing; }
#spaceViewport.is-drop { outline:2px dashed var(--fg); outline-offset:-6px; }
#spaceWorld { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; will-change:transform; }
#spaceAnnotations { position:absolute; left:0; top:0; }
#spaceEdges { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
#spaceEdges .space-edge { fill:none; stroke:var(--subtle); stroke-width:1.5; }
#spaceEdges .space-edge.is-selected { stroke:var(--fg); stroke-width:2.5; }
#spaceEdges .space-edge.is-temp { stroke:var(--fg); stroke-dasharray:6 6; }
#spaceEdges .space-edge-hit { fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer; }
.space-node { user-select:none; }
.space-node header span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.space-node header small { flex:none; }
.space-node-body { height:170px; min-height:0; overflow:hidden; }
.space-node-body .space-text-output { max-height:146px; }
.space-node-problem { margin:0; padding:8px 12px; border-top:1px solid var(--border); color:var(--fg); font-size:var(--text-label-size); line-height:1.45; }
.space-node.has-problem { border-color:var(--fg); }
.space-node.is-locked header { cursor:default; }
.space-node.is-locked header span::after { content:" · travada"; color:var(--muted); font-size:var(--text-label-size); }
.space-node-resize { position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:ew-resize; background:linear-gradient(135deg, transparent 50%, var(--line) 50%); border-bottom-right-radius:8px; }
/* Cores NEUTRAS por categoria (§28): só uma faixa fina no topo, para achar etapas de relance. */
.space-node { border-top-width:3px; }
.space-node.cat-input { border-top-color:color-mix(in srgb, var(--fg) 55%, transparent); }
.space-node.cat-agent { border-top-color:color-mix(in srgb, #8fa3b8 70%, var(--line)); }
.space-node.cat-image { border-top-color:color-mix(in srgb, #a89a86 70%, var(--line)); }
.space-node.cat-video { border-top-color:color-mix(in srgb, #9a8fb0 70%, var(--line)); }
.space-node.cat-audio { border-top-color:color-mix(in srgb, #8fae9e 70%, var(--line)); }
.space-node.cat-post { border-top-color:color-mix(in srgb, #b3a27f 70%, var(--line)); }
.space-node.cat-output { border-top-color:var(--line); }
.space-guide { position:absolute; display:block; background:var(--fg); opacity:.55; pointer-events:none; }
.space-guide.is-v { width:1px; }
.space-guide.is-h { height:1px; }
.space-marquee { position:absolute; border:1px solid var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); pointer-events:none; z-index:3; }
.space-marquee[hidden] { display:none; }
/* Notas e grupos (§28): grupo é moldura atrás das etapas; só o título e o canto pegam o ponteiro. */
.space-annotation { position:absolute; box-sizing:border-box; }
.space-group { border:1px dashed var(--line); border-radius:12px; background:color-mix(in srgb, var(--fg) 3%, transparent); pointer-events:none; }
.space-group-title { pointer-events:auto; position:absolute; left:12px; top:-14px; max-width:calc(100% - 24px); padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--fg); font-size:var(--text-label-size); cursor:grab; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.space-note { border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:12px; cursor:grab; overflow:hidden; }
.space-note p { margin:0; font-size:var(--text-label-size); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--body); }
.space-annotation.is-selected { outline:2px solid var(--fg); outline-offset:2px; }
.space-ann-resize { pointer-events:auto; position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; background:linear-gradient(135deg, transparent 50%, var(--line) 50%); border-bottom-right-radius:8px; }
/* Minimapa (§6.1 "apenas se necessário"). */
.space-minimap { position:absolute; right:12px; bottom:12px; width:200px; height:136px; z-index:3; background:var(--bg); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.space-minimap[hidden] { display:none; }
.space-minimap svg { width:100%; height:100%; display:block; }
.space-minimap .mm-node { fill:var(--line); }
.space-minimap .mm-node.is-selected { fill:var(--fg); }
.space-minimap .mm-group { fill:none; stroke:var(--line); stroke-dasharray:24 16; stroke-width:6; }
.space-minimap .mm-view { fill:color-mix(in srgb, var(--fg) 10%, transparent); stroke:var(--fg); stroke-width:2; vector-effect:non-scaling-stroke; }
.space-zoom button[aria-pressed=true] { color:var(--fg); }
.space-zoom button[aria-pressed=false] { color:var(--muted); }
.space-palette-tools { display:grid; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--border); }
.space-palette-tools button { text-align:left; font-size:var(--text-label-size); }
.space-inputs ul { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:6px; }
.space-inputs li { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:var(--text-label-size); color:var(--muted); }
.space-inputs li button { font-size:var(--text-label-size); padding:4px 8px; }
.space-lock { display:flex !important; align-items:center; gap:8px; }
.space-lock input { width:18px !important; height:18px; flex:none; }
.space-upload input { font-size:var(--text-label-size); }
.space-sheet-close { display:none; }
.space-deferred { border:1px solid var(--border); border-radius:6px; padding:12px; margin:12px 0; }
.space-deferred p { margin:4px 0; }
/* Onboarding por intenção (§47). */
.space-intents { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:8px 0 24px; }
.space-intent { display:grid; gap:6px; align-content:start; text-align:left; padding:16px; min-height:96px; border:1px solid var(--border); border-radius:8px; background:transparent; }
.space-intent strong { color:var(--fg); }
.space-intent span { color:var(--muted); font-size:var(--text-label-size); line-height:1.45; }
.space-intent:hover, .space-intent:focus-visible { border-color:var(--fg); }
/* Abrir uma execução (§27). */
.space-runs { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.space-runs button { width:100%; text-align:left; }
.space-run-table { overflow-x:auto; max-width:100%; }
.space-run-table table { width:100%; border-collapse:collapse; font-size:var(--text-label-size); }
.space-run-table th, .space-run-table td { text-align:left; vertical-align:top; padding:8px; border-bottom:1px solid var(--border); }
.space-run-output img, .space-run-output video { width:96px; max-height:72px; object-fit:cover; display:block; }
.space-run-output audio { width:160px; }
.space-shortcuts { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; font-size:var(--text-label-size); }
.space-shortcuts dt { color:var(--fg); }
.space-shortcuts dd { margin:0; color:var(--muted); }
.space-simple #spaceWorld { position:relative; will-change:auto; }
.space-simple .space-minimap, .space-simple .space-node-resize { display:none; }
.space-simple .space-node-body { height:auto; min-height:148px; }
/* Celular (§46): configuração da etapa em folha inferior, sobre o canvas, sem rolar a página. */
@media (max-width:700px) {
  .space-minimap { display:none; }
  .space-inspector { position:fixed; left:0; right:0; bottom:0; z-index:40; max-height:62vh; overflow-y:auto; border-radius:14px 14px 0 0; background:var(--bg); box-shadow:0 -8px 24px rgba(0,0,0,.5); transform:translateY(105%); transition:transform .18s ease; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .space-inspector.is-open { transform:none; }
  .space-sheet-close { display:block; margin-left:auto; min-height:44px; }
  #spaceViewport { height:calc(100dvh - 260px); min-height:360px; }
  .space-zoom { flex-wrap:wrap; max-width:calc(100% - 32px); }
  .space-node-resize { display:none; }
}
@media (prefers-reduced-motion: reduce) { .space-inspector { transition:none; } }
.space-canvas-hint { transition:opacity .4s ease; z-index:2; }
.space-canvas-hint.is-quiet { opacity:0; }

/* ==========================================================================
   23/09/2026 — TUDO ACONTECE DENTRO DO NÓ.
   O painel lateral da etapa (e a folha inferior do celular) saíram: cada
   cartão carrega o motor, o preço, as bandejas de referência, a instrução,
   as fichas de ajuste, os interruptores, o resultado e o próprio "Executar".
   Menos moldura, menos barra: o conteúdo é que tem de aparecer.
   Só tokens da casa; nenhuma cor de marca nova.
   ========================================================================== */
.space-layout, .space-layout.space-simple { grid-template-columns:minmax(0,1fr); }
#spaceInspector, .space-inspector, .space-sheet-close { display:none !important; }
.space-canvas { border-color:color-mix(in srgb, var(--border) 60%, transparent); }
#spaceViewport { height:min(760px, calc(100dvh - 210px)); }

/* ---------- o cartão ---------- */
/* Sem sombra, de propósito: além de moldura a mais, 200 sombras são 200 pinturas por quadro ao
   arrastar o canvas. A borda fina e o fundo já separam o cartão do fundo.
   ⚠️ E sem `contain`: ele faz de cada cartão um contexto de empilhamento, e aí o ponto da porta —
   que vive FORA da borda — some por baixo do cartão vizinho quando dois se sobrepõem. */
.space-node { width:288px; border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:12px; background:var(--surface); }
.space-node.is-selected { outline:2px solid var(--fg); outline-offset:1px; }
.space-node header { display:flex; align-items:center; gap:6px; padding:8px 8px 8px 12px;
  border-bottom:0; background:color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius:11px 11px 0 0; font-size:var(--text-label-size); }
.space-node header b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:600; color:var(--fg); }
.space-node-price { flex:none; color:var(--muted); font-size:var(--text-label-size); white-space:nowrap; }
.space-node-more, .space-node-caret { flex:none; border:0; background:none; color:var(--muted);
  min-width:26px; min-height:26px; padding:0 4px; font-size:var(--text-label-size); line-height:1; }
.space-node-more:hover, .space-node-caret:hover { color:var(--fg); }
.space-node-menu { position:absolute; right:6px; top:36px; z-index:7; width:210px; padding:6px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.space-node-menu[hidden] { display:none; }
.space-node-menu button { display:block; width:100%; text-align:left; border:0; background:transparent;
  color:var(--body); min-height:36px; font-size:var(--text-label-size); padding:0 8px; }
.space-node-menu button:hover { color:var(--fg); }
.space-node-fill { height:300px; }
.space-node.is-collapsed .space-node-fill { display:none; }

/* ---------- portas: pontos na borda do cartão, sempre presentes ---------- */
.space-rail-in { position:absolute; left:-7px; top:46px; display:flex; flex-direction:column; z-index:2; }
.space-rail-in button, .space-rail-out { width:14px; height:14px; min-height:0; padding:0; border-radius:50%;
  border:2px solid var(--bg); background:var(--subtle); position:relative; }
.space-rail-in button { margin-bottom:24px; }
.space-rail-out { position:absolute; right:-7px; top:46px; z-index:2; }
.space-rail-in button::before, .space-rail-out::before { content:""; position:absolute; inset:-9px; border-radius:50%; }
.space-node .can-connect { background:var(--fg); box-shadow:0 0 0 4px color-mix(in srgb, var(--fg) 25%, transparent); }
.space-node [aria-pressed="true"].space-rail-out { background:var(--fg); }

/* ---------- resultado dentro do cartão ---------- */
.space-node-body { height:auto; min-height:0; padding:10px 12px 0; }
.space-node-body img, .space-node-body video { border-radius:8px; max-height:190px; }
.space-node-body audio { width:100%; }
.space-node-empty { padding:22px 0; text-align:center; }

/* ---------- bandejas de referência, com contador ---------- */
.space-node-edit { padding:10px 12px 12px; display:grid; gap:8px; }
.space-trays { display:grid; gap:6px; }
.space-tray p { display:flex; justify-content:space-between; gap:8px; margin:0;
  font-size:var(--text-label-size); color:var(--muted); }
.space-tray p b { color:var(--body); font-weight:500; font-variant-numeric:tabular-nums; }
.space-tray-items { display:flex; align-items:center; gap:6px; min-height:34px; }
.space-tray-items img, .space-tray-items video { width:34px; height:34px; object-fit:cover; border-radius:6px; flex:none; }
.space-tray-empty { color:var(--subtle); font-size:var(--text-label-size); }
.space-tray-chip { font-size:var(--text-label-size); color:var(--body); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.space-tray-items button { margin-left:auto; flex:none; border:0; background:none; color:var(--muted);
  font-size:var(--text-label-size); min-height:32px; padding:0 4px; }
.space-tray-items button:hover { color:var(--fg); }

/* ---------- soltar arquivo, como o cartão de envio da referência ---------- */
.space-drop { position:relative; display:grid; gap:4px; justify-items:center; text-align:center;
  padding:18px 12px; border:1px dashed var(--line); border-radius:10px; cursor:pointer; }
.space-drop.is-over { border-color:var(--fg); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.space-drop p { margin:0; font-size:var(--text-label-size); color:var(--body); }
.space-drop small { color:var(--subtle); font-size:var(--text-label-size); }
.space-drop input[type="file"] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }

/* ---------- instrução ---------- */
.space-node-prompt { display:grid; gap:4px; position:relative; }
.space-node-prompt span { font-size:var(--text-label-size); color:var(--muted); }
.space-node-prompt textarea { width:100%; min-width:0; resize:vertical; font-size:var(--text-label-size);
  line-height:1.5; border-radius:8px; }
/* A alça de ampliar mora no CANTO do campo, como um puxador — fora dele virava uma palavra solta
   no meio do cartão, que é exatamente o tipo de ruído que esta fatia veio tirar. */
.space-node-grow { position:absolute; right:4px; bottom:4px; border:0; background:none; color:var(--subtle);
  min-width:24px; min-height:24px; padding:0; font-size:var(--text-label-size); line-height:1; }
.space-node-grow:hover { color:var(--fg); }
.space-node-write { justify-self:start; border:0; background:none; color:var(--muted);
  font-size:var(--text-label-size); min-height:32px; padding:0; }
.space-node-write { color:var(--fg); text-decoration:underline; }
.space-node-from { margin:0; font-size:var(--text-label-size); color:var(--muted); }

/* ---------- fichas de ajuste (motor, formato, duração, resolução) ---------- */
.space-chips { display:flex; flex-wrap:wrap; gap:6px; }
.space-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); max-width:100%; }
.space-chip.is-model { flex:1 1 100%; }
.space-chip span { color:var(--subtle); font-size:var(--text-label-size); white-space:nowrap; }
.space-chip select, .space-chip input { border:0; background:none; color:var(--fg); padding:0; min-width:0;
  max-width:132px; font-size:var(--text-label-size); min-height:26px; }
.space-toggles { display:grid; gap:4px; }
.space-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:var(--text-label-size); color:var(--body); }
.space-toggle input { width:18px; height:18px; flex:none; accent-color:var(--fg); }
.space-node-field { display:grid; gap:4px; }
.space-node-field span { font-size:var(--text-label-size); color:var(--muted); }
.space-node-field select, .space-node-field input { width:100%; min-width:0; font-size:var(--text-label-size); }
.space-node-field.is-quiet span { color:var(--subtle); }
.space-node-edit #spaceMediaControls { display:grid; gap:8px; }
.space-node-edit #spaceMediaControls label { display:grid; gap:4px; font-size:var(--text-label-size);
  color:var(--muted); margin:0; }
.space-node-edit #spaceMediaControls select, .space-node-edit #spaceMediaControls input,
.space-node-edit #spaceMediaControls textarea { width:100%; min-width:0; font-size:var(--text-label-size); }
.space-node-edit #spaceCreativeResult pre { max-height:160px; }

/* ---------- rodapé: o Executar da própria etapa ---------- */
.space-node footer { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:0;
  flex-wrap:nowrap; }
.space-node-run { flex:none; display:inline-flex; align-items:center; gap:6px;
  border:1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius:8px;
  background:color-mix(in srgb, var(--fg) 8%, transparent);
  color:var(--fg); min-height:32px; padding:0 12px; font-size:var(--text-label-size); }
.space-node-run:hover { border-color:var(--fg); }
.space-node-state { margin-left:auto; color:var(--muted); font-size:var(--text-label-size);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.space-node-problem { border-top:0; padding:8px 12px 0; color:var(--fg); }

/* ---------- barra da seleção múltipla: só existe quando há seleção múltipla ---------- */
.space-selection { position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:5;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 32px);
  padding:6px 10px; background:var(--bg); border:1px solid var(--border); border-radius:999px; }
.space-selection[hidden] { display:none; }
.space-selection span { color:var(--muted); font-size:var(--text-label-size); padding:0 4px; }
.space-selection button { border:0; background:none; color:var(--body); min-height:34px; padding:0 8px;
  font-size:var(--text-label-size); border-radius:999px; }
.space-selection button:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 10%, transparent); }

/* ---------- a ligação escolhida: uma ação, em cima dela ---------- */
.space-edge-tool { position:absolute; z-index:5; transform:translate(-50%,-50%); }
.space-edge-tool[hidden] { display:none; }
.space-edge-tool button { border:1px solid var(--border); background:var(--bg); color:var(--body);
  border-radius:999px; min-height:30px; padding:0 10px; font-size:var(--text-label-size); }

/* ---------- notas e grupos: o campo é o próprio objeto ---------- */
.space-note { display:flex; flex-direction:column; padding:0; cursor:default; }
.space-note-grip { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; cursor:grab; color:var(--subtle); font-size:var(--text-label-size); touch-action:none; }
.space-note-grip button { border:0; background:none; color:var(--muted); font-size:var(--text-label-size);
  min-height:30px; padding:0 4px; }
.space-note textarea { flex:1; width:100%; min-width:0; border:0; background:transparent; resize:none;
  padding:0 10px 10px; color:var(--body); font-size:var(--text-label-size); line-height:1.55; }
.space-ann-edit { position:absolute; left:12px; top:18px; display:flex; gap:6px; pointer-events:auto;
  padding:6px; background:var(--bg); border:1px solid var(--border); border-radius:8px; z-index:3; }
.space-ann-edit input { min-width:0; width:160px; font-size:var(--text-label-size); }
.space-ann-edit button { border:0; background:none; color:var(--muted); font-size:var(--text-label-size); min-height:32px; }

/* ---------- barra de zoom: recua quando ninguém a usa ---------- */
.space-zoom { opacity:.42; transition:opacity .2s ease; background:color-mix(in srgb, var(--bg) 82%, transparent); }
.space-zoom:hover, .space-zoom:focus-within { opacity:1; }
@media (prefers-reduced-motion: reduce) { .space-zoom { transition:none; opacity:1; } }

/* ---------- "Ver resultados": só a mídia, sem os controles de edição ---------- */
.space-simple .space-node-edit, .space-simple .space-node-menu, .space-simple .space-rail-in,
.space-simple .space-rail-out, .space-simple .space-node-caret, .space-simple .space-node-more,
.space-simple .space-selection, .space-simple .space-edge-tool { display:none; }
.space-simple .space-node { width:288px; }

/* ==========================================================================
   CELULAR (390 px): o cartão ocupa a largura toda da tela, com 16 px de
   respiro de cada lado. Instrução, fichas e "Executar" continuam no cartão —
   não há folha, não há painel, e a página nunca rola para o lado.
   ========================================================================== */
@media (max-width:700px) {
  .space-node { width:calc(100vw - 32px) !important; max-width:358px; }
  /* No telefone o cartão inteiro precisa caber no gesto: a prévia e a instrução encolhem para que
     as fichas e o "Executar" fiquem ao alcance sem ter de arrastar o canvas até o rodapé. */
  .space-node-body img, .space-node-body video { max-height:120px; }
  /* Sem resultado ainda, o telefone não gasta altura dizendo que não há resultado: a área volta
     assim que houver mídia de verdade para mostrar. */
  .space-node-body:has(.space-node-empty) { display:none; }
  .space-node-edit { gap:6px; padding:8px 12px 10px; }
  .space-node-prompt textarea { max-height:96px; }
  .space-node header { padding:10px 8px 10px 12px; }
  .space-node-more, .space-node-caret { min-width:36px; min-height:36px; }
  .space-node-run { min-height:40px; }
  .space-rail-in button, .space-rail-out { width:18px; height:18px; }
  .space-rail-in button { margin-bottom:26px; }
  .space-chip select, .space-chip input { max-width:118px; min-height:32px; }
  .space-selection { bottom:64px; }
  /* No telefone a tela do Space devolve ao canvas o que o título gastava: o nome do Space fica, a
     linha de seção e a frase de apoio saem. `:has()` prende isto à tela do Space — nenhuma outra
     página perde o seu título por causa desta fatia. */
  #mainContent:has(.space-layout) .page-heading .eyebrow,
  #mainContent:has(.space-layout) .page-heading > div > p.muted { display:none; }
  #mainContent:has(.space-layout) .page-heading { margin-bottom:8px; }
  #spaceViewport { height:calc(100dvh - 120px); min-height:480px; }
}

/* ==========================================================================
   23/09/2026 — o que a medição de uso (cliques, arrastos, procuras) mostrou. Só tokens da casa.
   ========================================================================== */
/* "Abrir" o resultado em tamanho real: por cima do canto da prévia, discreto até alguém chegar. */
.space-node-body { position:relative; }
.space-node-open { position:absolute; right:18px; top:16px; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--bg) 80%, transparent); color:var(--fg); text-decoration:none;
  font-size:var(--text-label-size); opacity:0; transition:opacity .15s ease; }
.space-node-body:hover .space-node-open, .space-node-open:focus-visible { opacity:1; }
@media (pointer:coarse) { .space-node-open { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .space-node-open { transition:none; } }

/* Portas vazias sem ação: uma linha dizendo o que a etapa aceita, em vez de uma bandeja "vazio" por porta. */
.space-tray-more { margin:0; font-size:var(--text-label-size); color:var(--subtle); line-height:1.45; }

/* "Usar em ▸": ação secundária do rodapé — pesa menos que o Executar, mais que o estado. */
.space-node-next { flex:none; border:0; background:none; color:var(--body); min-height:32px; padding:0 6px;
  font-size:var(--text-label-size); border-radius:8px; }
.space-node-next:hover, .space-node-next[aria-expanded="true"] { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.space-node-menu.is-next p { margin:4px 8px 6px; font-size:var(--text-label-size); color:var(--subtle); }
.space-node-menu.is-foot { top:auto; bottom:48px; left:12px; right:auto; }

/* Renomear no próprio cabeçalho. */
.space-node-rename { flex:1; min-width:0; font-size:var(--text-label-size); font-weight:600; padding:2px 6px; min-height:26px; }

/* A barra da seleção era absoluta com left:50%: sem largura própria encolhia para METADE do canvas e
   quebrava em duas linhas por cima das etapas (medido a 1440); centrada numa linha, cruzava a barra de
   zoom. Agora mora no pé do canvas, À DIREITA — com a borda direita presa, a largura disponível é o
   canvas inteiro e ela cabe numa linha. Em cima ela cobria a primeira fileira de etapas depois de
   "Enquadrar", porque o enquadramento só reserva o pé do canvas. */
.space-selection { left:auto; right:16px; transform:none; }
/* A prévia de vídeo nasce com a altura que vai ter: sem isso o cartão crescia DEPOIS de aproximar,
   e o rodapé (Executar, Usar em) descia para baixo da barra de zoom. */
.space-node-body video { width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--bg); }
.space-selection button, .space-selection span { white-space:nowrap; }

/* ---------- vista de longe (zoom abaixo de 60 %): só o que se lê de longe ---------- */
#spaceViewport.is-far .space-node-edit, #spaceViewport.is-far .space-node-problem,
#spaceViewport.is-far .space-node-more, #spaceViewport.is-far .space-node-caret,
#spaceViewport.is-far .space-node-run, #spaceViewport.is-far .space-node-next,
#spaceViewport.is-far .space-node-open, #spaceViewport.is-far .space-node-resize,
#spaceViewport.is-far .space-node-empty, #spaceViewport.is-far .space-text-output { display:none; }
#spaceViewport.is-far .space-node { cursor:zoom-in; }
/* As portas continuam (as ligações saem delas), mas encostadas: longe, uma coluna de pontos
   pendurada abaixo do cartão encolhido parecia sujeira. */
#spaceViewport.is-far .space-rail-in button { margin-bottom:4px; }
#spaceViewport.is-far .space-node header { display:block; padding:12px 14px;
  font-size:calc(var(--text-label-size) * var(--space-inv, 1)); line-height:1.25; }
#spaceViewport.is-far .space-node header b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; }
#spaceViewport.is-far .space-node-price { display:block; margin-top:4px; font-size:inherit; color:var(--body); }
#spaceViewport.is-far .space-node footer { padding:10px 14px; }
#spaceViewport.is-far .space-node-state { margin-left:0; font-size:calc(var(--text-label-size) * var(--space-inv, 1)); color:var(--body); }
#spaceViewport.is-far .space-node.has-problem .space-node-state { color:var(--fg); }

@media (max-width:700px) {
  /* Barra de zoom do telefone numa linha só: eram duas linhas e ~200 px por cima do canvas. */
  .space-zoom { flex-wrap:nowrap; overflow-x:auto; max-width:calc(100% - 24px); left:12px; bottom:12px; }
  /* Atalhos de TECLADO não servem no telefone; "Refazer" sai para a barra caber numa linha
     (desfazer fica — é o que salva um gesto errado). */
  #spaceShortcuts, #spaceRedo { display:none; }
  .space-zoom button { min-width:40px; }
  .space-selection { width:auto; max-width:calc(100% - 24px); overflow-x:auto; top:12px; bottom:auto; }
  .space-node-next { min-height:40px; }
  /* No telefone o nome se troca pelo ⋯ › Renomear: o campo no fim do cartão em foco era a linha que
     empurrava o "Executar" para fora da tela ao aproximar (medido). */
  .space-node-field.is-quiet { display:none; }
}