/*
 * @file Editor de overlay do Streak (beta): só a moldura do editor. O que é
 * desenhado no palco usa overlay-design.css, o mesmo do overlay. Cores e
 * tipos da paleta "Entidade" (fila.css): --fog-*, --bone, --ash, --rust…
 *
 * Moldura de app de edição: topo, trilho de ferramentas (cada uma abre a sua
 * gaveta), palco com a doca de teste embaixo e o inspetor à direita. Em tela
 * larga a moldura ocupa a altura da janela e cada coluna rola sozinha; em tela
 * estreita tudo empilha (ver o @media no fim).
 */
.ed-app {
  --ed-selecao: var(--moss);
  --ed-borda: var(--fog-800);
  --ed-painel: var(--fog-900);
  margin: 0 auto; padding: 10px 12px 12px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px;
  height: var(--ed-altura, auto);
}
.ed-espaco { flex: 1; }
/* O atributo hidden sempre vence (vários blocos daqui têm display próprio). */
.ed-app [hidden] { display: none !important; }
.ed-app svg.ed-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- topo ---------- */
.ed-topo {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0;
  border: 1px solid var(--ed-borda); border-radius: 12px; background: var(--ed-painel);
}
.ed-marca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-marca h1 { margin: 0; font: 700 20px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.ed-beta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: rgba(242, 181, 68, .16); color: var(--moss); }
.ed-status { font-size: 12.5px; color: var(--ash); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ed-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5fbf7a; }
.ed-status.ed-pendente { color: var(--moss); }
.ed-status.ed-pendente::before { background: var(--moss); }
.ed-par { display: flex; gap: 2px; }

/* ---------- botões (mesmo desenho do site) ---------- */
.ed-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px;
  font: 600 13px/1 var(--body); color: var(--bone); white-space: nowrap; cursor: pointer;
  background: transparent; border: 1px solid var(--fog-700); border-radius: 6px; padding: 8px 11px;
}
select.ed-bt { padding-right: 8px; background: var(--fog-950); }
@media (hover: hover) { .ed-bt:not(:disabled):hover { background: rgba(240, 231, 220, .05); border-color: var(--bone); } }
.ed-bt:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.ed-bt:disabled { opacity: .4; cursor: default; }
.ed-bt.ed-forte { background: var(--rust); border-color: transparent; font: 600 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; }
@media (hover: hover) { .ed-bt.ed-forte:not(:disabled):hover { background: #c81a28; border-color: transparent; box-shadow: 0 10px 26px rgba(179, 18, 31, .42); } }
.ed-bt[aria-pressed="true"] { border-color: var(--rust-text); color: var(--rust-text); background: rgba(240, 90, 90, .08); }
.ed-bt.ed-mini { min-height: 30px; padding: 6px 9px; font-size: 12.5px; }
.ed-bt.ed-ico-bt { width: 34px; padding: 0; border-color: transparent; color: var(--ash); }
@media (hover: hover) { .ed-bt.ed-ico-bt:not(:disabled):hover { color: var(--bone); border-color: var(--fog-700); } }
#ed-salvar.ed-limpo { background: transparent; border-color: var(--fog-700); color: var(--ash); }
.ed-usar[aria-pressed="true"] { border-color: rgba(95, 191, 122, .55); color: #8fdca3; background: rgba(95, 191, 122, .08); }
a.ed-bt { text-decoration: none; }

/* Menus e popovers (details/summary: abrem sem JS; o JS só fecha ao clicar fora). */
.ed-menu, .ed-pop { position: relative; }
.ed-menu > summary, .ed-pop > summary { list-style: none; }
.ed-menu > summary::-webkit-details-marker, .ed-pop > summary::-webkit-details-marker { display: none; }
.ed-menu-lista, .ed-pop-corpo {
  position: absolute; z-index: 50; right: 0; top: calc(100% + 6px); min-width: 240px; padding: 6px;
  background: var(--fog-900); border: 1px solid var(--fog-700); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.ed-menu-lista { display: grid; }
.ed-menu-lista > * {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  font: 500 13.5px var(--body); color: var(--bone); text-decoration: none; text-align: left;
}
.ed-menu-lista > *:hover { background: rgba(240, 231, 220, .06); }
.ed-menu-lista svg.ed-svg { color: var(--ash); }
.ed-pop-corpo { display: grid; gap: 10px; padding: 12px; width: 300px; }
.ed-doca .ed-pop-corpo { top: auto; bottom: calc(100% + 6px); }
.ed-atalhos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--ash); }
.ed-atalhos kbd { font: 600 11px var(--body); color: var(--bone); padding: 1px 5px; border: 1px solid var(--fog-700); border-bottom-width: 2px; border-radius: 4px; background: var(--fog-950); }

/* ---------- área de trabalho ---------- */
.ed-trabalho { display: grid; grid-template-columns: 64px 232px minmax(0, 1fr) 320px; gap: 10px; min-height: 0; }
.ed-trabalho.sem-gaveta { grid-template-columns: 64px minmax(0, 1fr) 320px; }
.ed-trabalho.sem-gaveta .ed-gaveta { display: none; }

/* Trilho de ferramentas */
.ed-trilho {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; min-height: 0; overflow: auto;
  border: 1px solid var(--ed-borda); border-radius: 12px; background: var(--ed-painel);
}
.ed-trilho button {
  display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--ash); font: 600 10px/1.1 var(--body);
}
.ed-trilho button:hover { color: var(--bone); background: rgba(240, 231, 220, .05); }
.ed-trilho button[aria-pressed="true"] { color: var(--bone); background: rgba(240, 90, 90, .13); box-shadow: inset 2px 0 0 var(--rust-text); }
.ed-trilho button svg.ed-svg { width: 21px; height: 21px; }
.ed-trilho .ed-fim { margin-top: auto; }

/* Gaveta da ferramenta aberta */
.ed-gaveta {
  min-height: 0; overflow: auto; padding: 12px 10px 16px;
  border: 1px solid var(--ed-borda); border-radius: 12px; background: var(--ed-painel);
}
.ed-gaveta section { display: grid; gap: 10px; align-content: start; }
.ed-gaveta h2 { margin: 4px 0 0; font: 600 14px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.ed-ajuda { color: var(--ash); font-size: 12.5px; font-family: var(--body); font-weight: 500; text-transform: none; letter-spacing: 0; margin: 0; }
.ed-modelos { display: grid; gap: 8px; }
.ed-modelo {
  display: grid; gap: 6px; padding: 8px; cursor: pointer; text-align: left; color: var(--bone); font: 600 12.5px var(--body);
  background: var(--fog-950); border: 1px solid var(--fog-800); border-radius: 8px;
}
.ed-modelo:hover { border-color: var(--rust-text); }
.ed-modelo-mini { position: relative; height: 78px; overflow: hidden; border-radius: 5px; background: repeating-conic-gradient(#141012 0 25%, #1a1517 0 50%) 0 0 / 14px 14px; }
.ed-modelo-mini > .dsg-palco { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; pointer-events: none; overflow: visible; }
.ed-modelo-vazio { display: grid; place-items: center; color: var(--ash); font-size: 12px; }

/* paleta (itens das gavetas) */
.ed-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-item {
  display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 4px 6px; cursor: pointer;
  border-radius: 6px; background: var(--fog-950); border: 1px solid var(--fog-800); color: var(--ash);
  font: 500 11px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-item:hover { border-color: var(--rust-text); color: var(--bone); }
.ed-item i { display: block; width: 30px; height: 20px; background: linear-gradient(135deg, var(--bone), var(--rust-text) 40%, var(--rust)); }
.i-placa { clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.i-ret { border-radius: 2px; }
.i-fraco { opacity: .35; }
.i-arred { border-radius: 6px; }
.i-pilula { border-radius: 99px; }
.i-hex { clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%); }
.i-paral { clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ed-item .i-circ { width: 22px; height: 22px; border-radius: 50%; }
.ed-item .i-quad { width: 22px; height: 22px; border-radius: 2px; }
.ed-item .i-hexv { width: 20px; height: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ed-item .i-txt { background: none; font: 700 17px/20px 'Barlow Condensed', sans-serif; color: var(--bone); text-align: center; font-style: normal; }
.ed-item .i-ouro { color: var(--moss); }
.ed-item .i-mini { font-size: 11px; letter-spacing: .1em; }
.ed-item .i-ico { width: 20px; height: 20px; background: linear-gradient(180deg, var(--bone), var(--moss)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ed-item .i-losango { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ed-item .i-octo { clip-path: polygon(25% 0, 75% 0, 100% 30%, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 30%); }
.ed-item .i-seta { clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.ed-item .i-aba { clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.ed-item .i-med-barra { height: 9px; margin: 5px 0; border-radius: 99px; background: linear-gradient(90deg, var(--rust-text) 62%, var(--fog-700) 62%); }
.ed-item .i-med-anel { width: 22px; height: 22px; margin: -1px 4px; border-radius: 50%; background: conic-gradient(var(--rust-text) 66%, var(--fog-700) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 52%, #000 56%); mask: radial-gradient(farthest-side, transparent 52%, #000 56%); }
.ed-item .i-med-seg { height: 10px; margin: 5px 0; background: repeating-linear-gradient(90deg, var(--rust-text) 0 4px, transparent 4px 6px); -webkit-mask: linear-gradient(90deg, #000 70%, rgba(0,0,0,.35) 70%); mask: linear-gradient(90deg, #000 70%, rgba(0,0,0,.35) 70%); }
.ed-item .i-med-pips { height: 10px; margin: 5px 0; background: radial-gradient(circle, var(--rust-text) 0 3px, transparent 3.6px) 0 0 / 10px 10px repeat-x; }
.ed-item .i-perks { height: 11px; margin: 4px 0; background: repeating-linear-gradient(90deg, var(--moss) 0 6px, transparent 6px 8px); border-radius: 2px; }
.ed-item .i-rank { height: 17px; margin: 1px 0; background: repeating-linear-gradient(180deg, var(--bone) 0 4px, transparent 4px 7px); border-left: 3px solid var(--rust-text); border-radius: 2px; }
.ed-item .i-pausa { width: 34px; height: 14px; border-radius: 99px; background: var(--fog-950); border: 1px solid var(--rust-text); }

/* ---------- palco ---------- */
.ed-palco-col { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.ed-palco-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-palco-barra .ed-pop-corpo { width: 330px; }
/* Mesa: a área escura em volta; a prancheta (folha) fica centralizada nela. */
.ed-mesa {
  position: relative; width: 100%; height: 100%; min-height: 260px; overflow: auto;
  display: grid; padding: 24px; border-radius: 12px;
  border: 1px solid var(--ed-borda); background: radial-gradient(ellipse at 50% 40%, #171214, #0b0809 75%);
}
.ed-folha { position: relative; margin: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--fog-700), 0 20px 50px rgba(0, 0, 0, .5); }
.ed-palco { position: absolute; left: 0; top: 0; border-radius: 6px; touch-action: none; user-select: none;
  background: repeating-conic-gradient(#141012 0 25%, #1a1517 0 50%) 0 0 / 24px 24px; }
/* O que vai pro OBS: o recorte em volta do conteúdo. */
.ed-recorte { position: absolute; z-index: 9996; pointer-events: none; border-radius: calc(4px / var(--k, 1));
  outline: calc(1px / var(--k, 1)) dashed rgba(240, 231, 220, .35); }
.ed-recorte span { position: absolute; right: 0; bottom: 100%; margin-bottom: calc(4px / var(--k, 1));
  font: 600 calc(10.5px / var(--k, 1)) var(--body); color: var(--ash); white-space: nowrap; }
.dsg-previa .ed-recorte { display: none; }
.ed-palco.fundo-escuro { background: radial-gradient(120% 90% at 50% 30%, #1d1a26, #07070b); }
.ed-palco.fundo-claro { background: linear-gradient(160deg, #c9ccd2, #8f949c 60%, #6b7078); }
.ed-palco.fundo-jogo { background:
  radial-gradient(60% 50% at 70% 40%, rgba(255, 140, 60, .18), transparent 70%),
  radial-gradient(80% 60% at 20% 80%, rgba(40, 90, 60, .35), transparent 70%),
  linear-gradient(180deg, #1c2524, #0d1210 70%); }
.ed-palco.com-grade::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9998;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px; }
.dsg-editando:not(.dsg-previa) .dsg-el { cursor: move; }

.ed-guia { position: absolute; z-index: 9999; background: var(--ed-selecao); pointer-events: none; display: none; }
.ed-guia.ed-v { top: 0; bottom: 0; width: calc(1px / var(--k, 1)); left: 50%; }
.ed-guia.ed-h { left: 0; right: 0; height: calc(1px / var(--k, 1)); top: 50%; }
.ed-guia.on { display: block; }

.ed-sel { position: absolute; z-index: 9997; pointer-events: none; outline: calc(1.5px / var(--k, 1)) solid var(--ed-selecao); }
.ed-al { position: absolute; width: calc(11px / var(--k, 1)); height: calc(11px / var(--k, 1)); background: var(--bone);
  border: calc(1.5px / var(--k, 1)) solid var(--ed-selecao); border-radius: 2px; pointer-events: auto; touch-action: none; }
.ed-al[data-h=nw] { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.ed-al[data-h=n]  { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.ed-al[data-h=ne] { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.ed-al[data-h=e]  { right: 0; top: 50%; transform: translate(50%, -50%); cursor: ew-resize; }
.ed-al[data-h=se] { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.ed-al[data-h=s]  { left: 50%; bottom: 0; transform: translate(-50%, 50%); cursor: ns-resize; }
.ed-al[data-h=sw] { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.ed-al[data-h=w]  { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }
.ed-tam { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(8px / var(--k, 1)));
  font: 600 calc(11px / var(--k, 1)) var(--body); background: var(--ed-selecao); color: #241703;
  padding: calc(1px / var(--k, 1)) calc(5px / var(--k, 1)); border-radius: calc(4px / var(--k, 1)); white-space: nowrap; }
.dsg-previa .ed-sel, .dsg-previa .ed-guia { display: none !important; }

/* Barra que segue o elemento selecionado (fica na folha: posição em px de tela, calculada no JS). */
.ed-flut {
  position: absolute; z-index: 30; display: flex; gap: 2px; padding: 3px;
  background: var(--fog-900); border: 1px solid var(--fog-700); border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  transform: translate(-50%, -100%);
}
.ed-flut.embaixo { transform: translate(-50%, 0); }
.ed-flut button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 5px; background: none; color: var(--ash); cursor: pointer; }
.ed-flut button:hover { background: rgba(240, 231, 220, .07); color: var(--bone); }
.ed-flut button.ed-perigo:hover { color: var(--rust-text); background: rgba(240, 90, 90, .12); }
.ed-flut button[aria-pressed="true"] { color: var(--moss); }
.ed-flut svg.ed-svg { width: 16px; height: 16px; }
.dsg-previa ~ .ed-flut { display: none; }

/* Doca de teste embaixo do palco */
.ed-doca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--ed-borda); border-radius: 12px; background: var(--ed-painel);
}
.ed-doca-rot { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); margin-right: 2px; }
.ed-bt.ed-ganho { border-color: rgba(95, 191, 122, .5); color: #8fdca3; }
.ed-bt.ed-perda { border-color: rgba(240, 90, 90, .45); color: var(--rust-text); }
.ed-leitura { font: 500 14px var(--display); letter-spacing: .02em; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-leitura b { color: var(--bone); }
.ed-campo small { font-weight: 500; color: var(--moss); }

/* ---------- inspetor ---------- */
.ed-inspetor {
  min-width: 0; min-height: 0; overflow: auto; padding: 12px 12px 90px; /* embaixo: espaço pro botão flutuante de Ajuda */
  border: 1px solid var(--ed-borda); border-radius: 12px; background: var(--ed-painel);
}
.ed-insp-titulo { margin: 2px 0 10px; font: 600 15px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.ed-abas { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 2px; padding: 3px; margin-bottom: 4px; border-radius: 8px; background: var(--fog-950); border: 1px solid var(--fog-800); }
.ed-abas button { padding: 7px 4px; border: 0; border-radius: 6px; background: none; color: var(--ash); font: 600 12.5px var(--body); cursor: pointer; }
.ed-abas button:hover { color: var(--bone); }
.ed-abas button[aria-selected="true"] { background: var(--fog-800); color: var(--bone); }
.ed-aba { display: grid; gap: 10px; }
.ed-aba[hidden] { display: none; }
.ed-aba > .ed-secao:first-child { border-top: 0; padding-top: 4px; }
/* Opções que pouca gente usa ficam dobradas (abrem sozinhas quando já têm algo preenchido). */
.ed-dobra { display: grid; gap: 8px; }
.ed-dobra > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ash); list-style: none; display: flex; align-items: center; gap: 6px; }
.ed-dobra > summary::-webkit-details-marker { display: none; }
.ed-dobra > summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.ed-dobra[open] > summary::before { transform: rotate(90deg); }
.ed-dobra > summary:hover { color: var(--bone); }
.ed-dobra[open] { gap: 8px; }

/* ---------- camadas ---------- */
.ed-camadas { display: grid; gap: 3px; }
.ed-camada { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 6px;
  border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.ed-camada:hover { background: rgba(240, 231, 220, .04); }
.ed-camada.ativa { background: rgba(242, 181, 68, .10); border-color: rgba(242, 181, 68, .45); }
.ed-camada .tipo { font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .06em; color: var(--ash); text-align: center; }
.ed-camada.ativa .tipo { color: var(--moss); }
.ed-camada .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ed-camada.oculta .nm { color: var(--ash); text-decoration: line-through; }
.ed-camada .olho { background: none; border: 0; cursor: pointer; color: var(--ash); padding: 2px 4px; font-size: 12px; }
.ed-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

/* ---------- propriedades ---------- */
.ed-props { display: grid; gap: 10px; }
.ed-vazio { color: var(--ash); font-size: 13px; padding: 4px 2px; margin: 0; }
.ed-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.ed-grade2 > .ed-bt { align-self: end; }
.ed-campo { display: grid; gap: 3px; min-width: 0; }
.ed-campo > span { font-size: 12px; font-weight: 600; color: var(--ash); }
.ed-campo input[type=number], .ed-campo input[type=text], .ed-campo select, .ed-campo textarea {
  width: 100%; min-width: 0; height: 34px; padding: 0 9px; font: inherit; font-size: 14px; color: var(--bone);
  background: var(--fog-950); border: 1px solid var(--fog-700); border-radius: 6px;
}
.ed-campo textarea { height: 56px; padding: 6px 9px; resize: vertical; }
.ed-campo input:focus, .ed-campo select:focus, .ed-campo textarea:focus { outline: none; border-color: var(--rust-text); box-shadow: 0 0 0 3px rgba(240, 90, 90, .25); }
.ed-campo input[type=range] { width: 100%; accent-color: var(--rust-text); }
.ed-campo input[type=color] { width: 100%; height: 34px; padding: 2px; background: var(--fog-950); border: 1px solid var(--fog-700); border-radius: 6px; }
.ed-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.ed-chk input { accent-color: var(--rust-text); }
.ed-secao { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--fog-800); }
.ed-secao > b { font: 600 13px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ed-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-seg button { flex: 1 1 auto; padding: 6px 8px; font: 600 12.5px var(--body); color: var(--ash); cursor: pointer;
  background: var(--fog-950); border: 1px solid var(--fog-700); border-radius: 6px; }
.ed-seg button:hover { color: var(--bone); }
.ed-seg button.on { border-color: var(--rust-text); color: var(--bone); background: rgba(240, 90, 90, .10); }
.ed-tokens { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-tokens button { font: 600 12px var(--body); padding: 3px 9px; border-radius: 99px; cursor: pointer; color: var(--ash);
  background: rgba(242, 181, 68, .10); border: 1px solid rgba(242, 181, 68, .3); }
.ed-tokens button:hover { color: var(--moss); border-color: var(--moss); }

/* ---------- modal JSON ---------- */
.ed-modal { width: min(720px, calc(100vw - 32px)); padding: 16px; color: var(--bone); background: var(--fog-900); border: 1px solid var(--fog-800); border-radius: 12px; }
.ed-modal::backdrop { background: rgba(0, 0, 0, .6); }
.ed-modal[open] { display: grid; gap: 10px; }
.ed-modal h3 { margin: 0; font: 700 22px var(--display); }
.ed-modal textarea { width: 100%; height: 320px; padding: 10px; border-radius: 8px; resize: vertical;
  background: var(--fog-950); border: 1px solid var(--fog-800); color: var(--moss); font: 12px/1.45 ui-monospace, Menlo, monospace; }
.ed-m-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.ed-m-acoes .ed-ajuda { margin-right: auto; }

/* ---------- tela estreita: empilha ---------- */
@media (max-width: 1100px) {
  .ed-app { height: auto; }
  .ed-topo { flex-wrap: wrap; }
  .ed-trabalho, .ed-trabalho.sem-gaveta { grid-template-columns: minmax(0, 1fr); }
  .ed-trilho { flex-direction: row; overflow-x: auto; }
  .ed-trilho button { min-width: 62px; }
  .ed-trilho .ed-fim { margin-top: 0; margin-left: auto; }
  .ed-gaveta, .ed-inspetor { overflow: visible; }
  .ed-mesa { height: clamp(300px, 55vh, 560px); }
  .ed-itens { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .ed-modelos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 640px) {
  .ed-marca h1 { font-size: 17px; }
  .ed-status { display: none; }
}

/* ---------- mover a vista e selecionar tudo ---------- */
/* O fundo escuro em volta da prancheta se arrasta (move a vista); em cima da prancheta o cursor é o de sempre. */
.ed-mesa { cursor: grab; }
.ed-palco { cursor: default; }
.ed-mao, .ed-mao .ed-palco, .ed-mao .dsg-el { cursor: grab !important; }
.ed-pegou, .ed-pegou * { cursor: grabbing !important; }
.ed-sel.ed-grupo { outline-style: dashed; }
.ed-sel.ed-grupo .ed-al { display: none; }