/* SENDERCUT — camada moderna no visual do WebUI do CncSender (AMERIGO DESIGN, 11/10/2026).
   Carrega por último: troca tokens e a forma dos componentes; não muda estrutura nem comportamento. */
:root{
  --bg:#f3f4f6;--sup:#fff;--sup2:#f6f7f9;--borda:#e7e9ee;--borda2:#d9dde4;
  --tx:#0b0d10;--tx2:#343a46;--tx3:#6b7280;
  --cy:#84cc16;--cy-tx:#3f6212;--cy-suave:#f1f9e1;--cy-tinta:#0b0d10;--foco:#65a30d;
  --chapa:#eef0f3;--chapa-borda:#9aa1ad;--peca:#e6f5c8;--peca-borda:#65a30d;--peca-tx:#365314;--marca-corte:#a3e635;
  --sombra:0 1px 0 rgba(11,13,16,.03),0 10px 30px -12px rgba(11,13,16,.12);
  --brilho:0 8px 24px -8px rgba(132,204,22,.55);
  --r:20px;--r2:12px;
  --vp-bg:#0b0d10;--vp-grade:rgba(255,255,255,.055);--vp-tx:#c9ced6;--vp-tx2:#8b919c;
  --vp-ent:#22d3ee;--vp-sai:#fbbf24;--vp-perf:#f43f5e;--vp-lima:#a3e635;
}
:root[data-tema=escuro]{
  --bg:#07080a;--sup:#111317;--sup2:#171a1f;--borda:rgba(255,255,255,.07);--borda2:rgba(255,255,255,.12);
  --tx:#f2f4f7;--tx2:#c3c8d0;--tx3:#8b919c;
  --cy:#a3e635;--cy-tx:#bef264;--cy-suave:rgba(163,230,53,.12);--cy-tinta:#0b0d10;--foco:#bef264;
  --chapa:#14171c;--chapa-borda:#3a404b;--peca:rgba(163,230,53,.16);--peca-borda:#a3e635;--peca-tx:#d9f99d;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -18px rgba(0,0,0,.8);
  --brilho:0 0 0 1px rgba(163,230,53,.4),0 10px 30px -8px rgba(163,230,53,.45);
}
:root[data-tema=escuro] body{background:radial-gradient(1200px 600px at 60% -10%,rgba(163,230,53,.06),transparent 60%),var(--bg)}
body{letter-spacing:-.005em}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
h2{font-weight:650;letter-spacing:-.01em}
h2>svg{color:var(--cy-tx)}

/* casca: topo e menu como painéis flutuantes */
.topo{margin:12px 12px 0;border:1px solid var(--borda);border-radius:18px;background:color-mix(in srgb,var(--sup) 80%,transparent);box-shadow:var(--sombra);top:12px;height:58px}
.nav{margin:12px 0 12px 12px;border:1px solid var(--borda);border-radius:20px;top:82px;height:calc(100vh - 94px);box-shadow:var(--sombra)}
.nav button{border-radius:12px}
.nav button.on{background:var(--cy);color:var(--cy-tinta);box-shadow:var(--brilho)}
.nav button.on svg{color:var(--cy-tinta)}
.card{border-radius:var(--r);padding:22px;border-color:var(--borda)}

/* campos */
input,select,textarea{min-height:44px;border-radius:12px;border-color:transparent;background:var(--sup2);box-shadow:inset 0 0 0 1px var(--borda)}
input:hover,select:hover,textarea:hover{box-shadow:inset 0 0 0 1px var(--borda2)}
input:focus,select:focus,textarea:focus{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--cy),0 0 0 4px color-mix(in srgb,var(--cy) 18%,transparent)}
input[type=number]{font-variant-numeric:tabular-nums}

/* botões */
.bt{border-radius:12px;min-height:42px;transition:transform .12s,box-shadow .15s,border-color .15s,background .15s}
.bt:hover{transform:translateY(-1px)}
.bt.primario{box-shadow:var(--brilho)}
.bt.primario:hover{color:var(--cy-tinta)}
.bt.grande{border-radius:14px}

/* segmentos em pílula e chave */
.segmentos{padding:4px;border:0;border-radius:14px;background:var(--sup2);box-shadow:inset 0 0 0 1px var(--borda)}
.segmentos button{border-radius:10px;transition:background .15s,color .15s}
.segmentos button[aria-checked=true]{background:var(--cy);color:var(--cy-tinta);box-shadow:var(--brilho)}
.chave .trilho{width:44px;height:26px;border-radius:13px}
.chave input:checked+.trilho{box-shadow:var(--brilho)}

/* passos do assistente */
.as-passos button,.as-passos li>*{border-radius:14px}

/* ferramenta: chips */
.fe-resumo span{border-color:transparent;background:var(--sup2);box-shadow:inset 0 0 0 1px var(--borda)}
.fe-resumo span:first-child{background:var(--cy-suave);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cy) 45%,transparent)}
.fe-dlg{border-radius:24px}
.fe-grupo{border-radius:16px}

/* ===== desenhos: viewport escuro como o do WebUI, nos dois temas ===== */
.fe-desenho,.fe-fresa{background:var(--vp-bg);border-radius:16px;padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fe-desenho svg,.fe-fresa svg{background-image:radial-gradient(var(--vp-grade) 1px,transparent 1.2px);background-size:12px 12px;border-radius:10px}
.fe-desenho .fe-tx,.fe-fresa .fe-tx{fill:var(--vp-tx);font:600 11px var(--fonte);letter-spacing:.02em}
.fe-desenho .fe-tx2,.fe-fresa .fe-tx2{font-weight:600;font-size:9.5px;fill:var(--vp-tx2)}
.fe-desenho .fe-tx-ent{fill:var(--vp-ent)}.fe-desenho .fe-tx-sai{fill:var(--vp-sai)}
.fe-desenho .fe-titulo,.fe-fresa .fe-titulo{fill:var(--vp-tx2);font:700 9px var(--fonte);letter-spacing:.14em}
.fe-peca{fill:url(#fe-g-peca);stroke:none}
.fe-sobra{fill:rgba(255,255,255,.015)}
.fe-cam{fill:none;stroke:rgba(163,230,53,.75);stroke-width:1.6;stroke-dasharray:none}
.fe-ent{fill:none;stroke:var(--vp-ent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(34,211,238,.75))}
.fe-sai{fill:none;stroke:var(--vp-sai);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(251,191,36,.7))}
.fe-fino{stroke-width:1.6}
.fe-perf{fill:var(--vp-perf);filter:drop-shadow(0 0 5px rgba(244,63,94,.9))}
.fe-perf-anel{fill:none;stroke:var(--vp-perf);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:fe-pulso 1.8s ease-out infinite}
@keyframes fe-pulso{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.fe-ferr{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.fe-seta{fill:none;stroke:var(--vp-tx2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fe-mat{fill:url(#fe-g-mat);stroke:none}
.fe-cota{fill:none;stroke:var(--vp-tx2);stroke-width:.9}
.fe-fr-haste{fill:url(#fe-g-haste);stroke:rgba(255,255,255,.25);stroke-width:.8}
.fe-fr-corpo{fill:url(#fe-g-corte);stroke:var(--vp-lima);stroke-width:1.2;filter:drop-shadow(0 0 6px rgba(163,230,53,.35))}
.fe-fr-hel{fill:none;stroke:rgba(11,13,16,.55);stroke-width:1.6}
.fe-fresa .fe-tx-n{color:var(--vp-tx2)}
.fe-fresa .fe-tx-n b{color:#f2f4f7}
.fe-leg{color:var(--vp-tx2)}
.fe-leg i{box-shadow:0 0 6px currentColor}
.fe-l-ent{background:var(--vp-ent)!important;color:var(--vp-ent)}.fe-l-sai{background:var(--vp-sai)!important;color:var(--vp-sai)}.fe-l-perf{background:var(--vp-perf)!important;color:var(--vp-perf)}
@media (prefers-reduced-motion:reduce){.fe-perf-anel{animation:none;opacity:0}.fe-ferr{display:none}}
.fe-desenho{display:flex;flex-wrap:wrap;gap:12px}
.fe-desenho svg{flex:1 1 280px;width:auto;max-width:none;min-width:0}
.fe-desenho .fe-leg{flex:1 1 100%}

/* v6: centralização */
.passo .un input{padding-left:44px;padding-right:44px;text-align:center}
.passo .un i{right:12px}
.passo .ico-bt{height:44px;width:44px;border-radius:12px;display:inline-grid;place-items:center;flex:none}
.segmentos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.segmentos button{display:grid;place-items:center;text-align:center;line-height:1.15}
.fe-resumo span,.selo{display:inline-flex;align-items:center;justify-content:center;line-height:1.1}
.etq-config .card{container-type:inline-size}
@container (max-width:300px){.etq-config .card .g2{grid-template-columns:minmax(0,1fr)}}
.segmentos.fe-seg{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}