/* modos.css: as abas "Escolha por CPU/GPU" e "Monte manualmente" (21/10/2026). Par do modos.js.
 *
 * 1. a barra de abas: Passo a passo reaproveita .p-abas/.p-aba do Gamer e não tem regra aqui; Night City e
 *    Nightly City reaproveitam .p-tipos/.p-tipo (só o invólucro .md-barra é daqui); Bancada (.b-aba) e
 *    Clássico (.md-aba) copiam o visual das teclas e das abas deles;
 * 2. a regra única de quem some fora do modo jogo: [data-md-so="jogo"];
 * 3. os painéis (.md-*), escritos só com variáveis --md-*;
 * 4. o mapa --md-* -> tokens reais de cada um dos cinco temas (body[data-md-tema]). No Gamer o mapa usa
 *    var() dos tokens da pele, então acompanha as 12 peles sozinho, vidro e transparência incluídos;
 * 5. responsivo, movimento e transparência reduzidos.
 *
 * Com body[data-md="jogo"] nada daqui toca no tema: só existem as classes md-*, b-aba e md-aba.
 */

/* ============================================================ 1. barra de abas */
/* Passo a passo: a barra usa .p-abas/.p-aba do tema; só em 320 px o padding de 16 px do botão estoura a linha (+5 px) */
@media (max-width:380px){
  .p-aba[data-md-modo]{padding:0 9px;font-size:13px;line-height:1.2;text-align:center}
}

/* Night City e Nightly City: o segmentado do tema (.p-tipos) em largura cheia, rótulos que quebram */
.md-barra{margin:0 0 14px}
.md-barra .p-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.md-barra .p-tipo{justify-content:center;text-align:center;line-height:1.2;padding:6px 8px;min-width:0;white-space:normal}

/* Bancada: três teclas, como as dos jogos */
.b-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 0;padding-bottom:6px}
.b-aba{display:flex;flex-direction:column;gap:3px;justify-content:center;min-height:64px;padding:10px 14px 9px;text-align:left;
  background:linear-gradient(180deg,var(--cap-alto),var(--cap));border:1px solid var(--linha-forte);border-radius:var(--r);
  box-shadow:0 4px 0 var(--cap-saia),0 8px 18px -10px #000;
  transition:transform .12s var(--e),box-shadow .12s var(--e),border-color .15s var(--e)}
.b-aba:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--cap-saia),0 12px 22px -10px #000}
.b-aba[aria-selected="true"]{background:var(--escolha-fraca);border-color:var(--escolha);transform:translateY(3px);box-shadow:0 1px 0 var(--cap-saia)}
@supports (color:color-mix(in srgb,red,blue)){
  .b-aba[aria-selected="true"]{
    background:linear-gradient(180deg,color-mix(in srgb,var(--escolha) 14%,var(--cap-alto)),color-mix(in srgb,var(--escolha) 9%,var(--cap)));
    box-shadow:0 1px 0 var(--cap-saia),inset 0 1px 0 color-mix(in srgb,var(--escolha) 28%,transparent)}
}
.b-aba[aria-selected="true"] .b-aba-nome{color:var(--escolha)}
.b-aba-nome{font-size:14px;font-weight:600;line-height:1.25}
.b-aba-tx{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--traco)}
@media (max-width:560px){
  .b-abas{gap:8px}
  .b-aba{padding:8px 9px;min-height:60px}
  .b-aba-nome{font-size:12.5px}
  .b-aba-tx{display:none}
}

/* Clássico: o trilho em pílula das abas dele (.rp-tabs), com classes próprias */
.md-abas{display:flex;gap:6px;margin:0 0 18px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.md-aba{flex:1 1 0;min-width:0;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--text-2);
  background:transparent;border:none;border-radius:999px;padding:11px 8px;cursor:pointer;transition:var(--ease) .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.2;min-height:44px}
.md-aba:hover{color:var(--text)}
.md-aba[aria-selected="true"]{background:linear-gradient(120deg,var(--brand-bright),var(--brand));color:var(--on-brand);box-shadow:var(--shadow-brand)}
@media (max-width:900px){.md-abas{border-radius:16px}}
@media (max-width:420px){.md-aba{font-size:12px;padding:9px 4px}}

/* ============================================================ 2. o que só vale no modo jogo */
body[data-md]:not([data-md="jogo"]) [data-md-so="jogo"]{display:none!important}

/* ============================================================ 3. painéis */
.md-painel,.md-painel *,.md-painel *::before,.md-painel *::after{box-sizing:border-box}
.md-painel{display:grid;gap:var(--md-gap,12px);min-width:0;font-family:var(--md-fonte);color:var(--md-tinta);line-height:1.5}
.md-painel[hidden],.md-painel [hidden]{display:none}
:where(.md-painel) button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left}
:where(.md-painel) button:disabled{cursor:not-allowed}
.md-painel :focus-visible{outline:3px solid var(--md-foco);outline-offset:2px}
.md-painel:focus{outline:none}
.md-vista{display:grid;gap:var(--md-gap,12px);min-width:0}

.md-bloco{position:relative;min-width:0;overflow:hidden;background:var(--md-bg);border:1px solid var(--md-linha);
  border-radius:var(--md-r-g);box-shadow:var(--md-sombra)}
.md-bloco[data-estado="ok"]{border-color:var(--md-linha-forte)}
.md-cab{display:flex;align-items:center;gap:14px;padding:16px 18px;min-width:0}
.md-ord{flex:0 0 auto;width:36px;height:36px;border-radius:var(--md-r);display:grid;place-items:center;
  background:var(--md-ord-bg);color:var(--md-ord-fg);box-shadow:var(--md-ord-anel,none);
  font-family:var(--md-fonte-n);font-weight:700;font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.md-cab-tx{flex:1 1 auto;min-width:0}
.md-cab-tx b{display:block;font-family:var(--md-fonte-d);font-size:15px;font-weight:700;line-height:1.25;
  text-transform:var(--md-tt,none);letter-spacing:var(--md-ls,0)}
.md-cab-res{display:block;margin-top:1px;font-size:12.5px;color:var(--md-tinta-2);overflow-wrap:anywhere}
.md-limpar{flex:0 0 auto;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;
  color:var(--md-tinta-2);border:1px solid var(--md-linha);border-radius:var(--md-r);background:var(--md-bg-2);
  transition:color .15s var(--md-e),border-color .15s var(--md-e),background .15s var(--md-e)}
.md-limpar:hover{color:var(--md-tinta);border-color:var(--md-linha-forte);background:var(--md-bg-3)}
.md-corpo{padding:0 18px 18px;border-top:1px solid var(--md-linha)}
.md-diz{padding:14px 0 12px;font-size:13px;color:var(--md-tinta-2)}

/* busca */
.md-filtro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.md-busca{flex:1 1 220px;position:relative;display:flex;align-items:center;min-width:0}
.md-busca svg{position:absolute;left:12px;width:16px;height:16px;color:var(--md-tinta-2);pointer-events:none}
.md-busca input{width:100%;min-height:44px;padding:10px 12px 10px 36px;font:inherit;font-size:14px;color:var(--md-tinta);
  background:var(--md-campo);border:1px solid var(--md-linha);border-radius:var(--md-r)}
.md-busca input::placeholder{color:var(--md-tinta-2)}
.md-busca input:focus{border-color:var(--md-acento)}
.md-conta{flex:0 0 auto;font-size:12px;color:var(--md-tinta-2)}

/* lista de peças */
.md-lista{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
  max-height:440px;overflow-y:auto;overscroll-behavior:auto;padding:8px 10px 10px 8px;margin:-8px -10px -10px -8px}
.md-lista::-webkit-scrollbar{width:8px}
.md-lista::-webkit-scrollbar-thumb{background:var(--md-linha-forte);border-radius:4px}
.md-peca{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;padding:10px 13px;
  background:var(--md-bg-2);border:1px solid var(--md-borda-peca);border-radius:var(--md-r);
  transition:border-color .15s var(--md-e),background .15s var(--md-e),transform .15s var(--md-e)}
.md-peca:hover{background:var(--md-bg-3)}
.md-peca:focus-visible{outline-offset:-3px}
.md-foto{flex:0 0 auto;width:56px;height:56px;border-radius:8px;background:#fff;border:1px solid var(--md-linha);
  object-fit:contain;padding:3px;display:grid;place-items:center;color:#556}
.md-foto.vazia{background:var(--md-bg-3)}
.md-foto svg{width:28px;height:28px}
.md-foto-chip{background:var(--md-bg-3);color:var(--md-tinta-2)}
.md-peca-tx{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.md-peca-tags{display:flex;gap:5px;flex-wrap:wrap}
.md-selo,.md-rar{display:inline-block;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.4}
.md-selo{background:var(--md-marca);color:var(--md-sobre-marca)}
.md-rar{color:#fff;background:#7c3aed}
.md-rar.legendary{background:#b8570f}
.md-rar.mythic{background:#c8223a}
.md-peca-n{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.md-peca-i{font-size:11.5px;color:var(--md-tinta-2);line-height:1.35}
.md-peca-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.md-preco{font-family:var(--md-fonte-n);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.md-parc{font-size:11px;color:var(--md-tinta-2);font-variant-numeric:tabular-nums}
.md-cx{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--md-linha-forte);background:var(--md-bg);
  display:grid;place-items:center;color:transparent;align-self:flex-start;margin-top:2px}
.md-cx svg{width:12px;height:12px}
.md-peca[aria-checked="true"]{background:var(--md-sel-bg);border-color:var(--md-acento);box-shadow:var(--md-sombra)}
.md-peca[aria-checked="true"] .md-cx{background:var(--md-acento);border-color:var(--md-acento);color:var(--md-sobre-acento)}
.md-peca[aria-checked="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--md-marca)}
.md-peca.desab{cursor:not-allowed}
.md-peca.desab:hover{background:var(--md-bg-2)}
.md-peca.desab :is(.md-foto,.md-peca-tags,.md-peca-n,.md-peca-i,.md-peca-p){opacity:.62}
.md-peca.desab .md-cx{opacity:.35}
.md-motivo{font-size:11.5px;line-height:1.35;color:var(--md-erro);font-weight:600}
.md-esq{display:block;min-height:76px;border-radius:var(--md-r);background:var(--md-bg-2);
  animation:md-pulsa 1.4s ease-in-out infinite}
@keyframes md-pulsa{0%,100%{opacity:.5}50%{opacity:1}}
.md-vazio{grid-column:1/-1;padding:18px 4px;text-align:center;color:var(--md-tinta-2);font-size:13px}
.md-erro-lista{grid-column:1/-1;padding:14px;border:1px solid var(--md-erro-borda);border-radius:var(--md-r);background:var(--md-erro-bg);
  color:var(--md-erro);font-size:13px}
.md-tentar{margin-left:8px;min-height:44px;padding:0 14px;font-weight:700;text-decoration:underline}

/* rodapé: o resumo do que foi escolhido */
.md-rodape{display:flex;align-items:center;justify-content:space-between;gap:6px 18px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--md-linha)}
.md-vista>.md-rodape{margin:0;padding:14px 18px;border:1px solid var(--md-linha);border-radius:var(--md-r-g);background:var(--md-bg)}
.md-resumo{flex:1 1 240px;min-width:0;font-size:13px;color:var(--md-tinta-2)}
.md-total+.md-resumo{text-align:right}
.md-total{flex:0 0 auto;font-size:13px;color:var(--md-tinta-2)}
.md-total b{font-family:var(--md-fonte-n);font-size:16px;color:var(--md-tinta);font-variant-numeric:tabular-nums}

/* monte manualmente: as oito peças */
.md-slots{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.md-slot{min-width:0;background:var(--md-bg-2);border:1px solid var(--md-borda-peca);border-radius:var(--md-r)}
.md-slot[data-estado="ok"]{border-color:var(--md-linha-forte)}
.md-slot[data-estado="conflito"]{border-color:var(--md-erro-borda);background:var(--md-erro-bg)}
.md-slot.aberto{border-color:var(--md-acento)}
.md-slot-linha{display:flex;align-items:stretch;min-width:0}
.md-slot-bt{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 12px;border-radius:var(--md-r)}
.md-slot-bt:hover{background:var(--md-bg-3)}
.md-slot-bt:focus-visible{outline-offset:-3px}
.md-slot-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--md-fonte-n);
  font-size:12px;font-weight:700;color:var(--md-tinta-2);border:1px solid var(--md-linha-forte);font-variant-numeric:tabular-nums}
.md-slot[data-estado="ok"] .md-slot-n{background:var(--md-acento);border-color:var(--md-acento);color:var(--md-sobre-acento)}
.md-slot[data-estado="conflito"] .md-slot-n{background:var(--md-erro);border-color:var(--md-erro);color:var(--md-sobre-erro,var(--md-erro-bg))}
.md-slot-img{flex:0 0 auto;width:44px;height:44px;display:block}
.md-slot-img:empty{display:none}
.md-slot-img img{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid var(--md-linha);object-fit:contain;padding:2px;display:block}
.md-slot-tx{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.md-slot-r{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--md-tinta-2)}
.md-slot-r i{font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:600;margin-left:4px}
.md-slot-v{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.md-slot:not([data-estado="ok"]):not([data-estado="conflito"]) .md-slot-v{color:var(--md-tinta-2);font-weight:500}
.md-slot-m{font-size:11.5px;line-height:1.35;color:var(--md-aviso);font-weight:600}
.md-slot[data-estado="conflito"] .md-slot-m{color:var(--md-erro)}
.md-slot-p,.md-slot-p2{font-family:var(--md-fonte-n);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.md-slot-p{flex:0 0 auto}
.md-slot-p2{display:none}
.md-seta{flex:0 0 auto;width:18px;height:18px;color:var(--md-tinta-2);transition:transform .2s var(--md-e)}
.md-slot.aberto .md-seta{transform:rotate(180deg)}
.md-slot-x{flex:0 0 auto;width:44px;display:grid;place-items:center;color:var(--md-tinta-2);border-radius:var(--md-r)}
.md-slot-x:hover{color:var(--md-erro);background:var(--md-bg-3)}
.md-slot-x svg{width:16px;height:16px}
.md-slot-extra{padding:0 12px 12px 50px}
.md-qtd{display:inline-flex;align-items:center;border:1px solid var(--md-linha-forte);border-radius:var(--md-r);overflow:hidden;background:var(--md-campo)}
.md-qtd-bt{width:44px;height:44px;display:grid;place-items:center;font-size:24px;font-weight:700;line-height:1;text-align:center}
.md-qtd-bt:hover:not(:disabled){background:var(--md-bg-3)}
.md-qtd-bt:disabled{opacity:.35}
.md-qtd-v{min-width:78px;padding:0 8px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.md-qtd-dica{margin-top:8px;font-size:12px;color:var(--md-tinta-2);max-width:60ch}
.md-gaveta{padding:12px;border-top:1px solid var(--md-linha);background:var(--md-gaveta,var(--md-bg))}
.md-gaveta .md-lista{max-height:360px}
.md-slot.aberto>.md-gaveta{border-radius:0 0 var(--md-r) var(--md-r)}

/* ============================================================ 4. o mapa para cada tema */
/* Passo a passo (Gamer) e as 12 peles: tudo por var() dos tokens da pele */
body[data-md-tema="passo"]{
  --md-bg:var(--carta);--md-bg-2:var(--carta-2);--md-bg-3:var(--carta-3);--md-campo:var(--carta);
  --md-linha:var(--risco);--md-linha-forte:var(--risco-forte);--md-borda-peca:transparent;
  --md-tinta:var(--grafite);--md-tinta-2:var(--grafite-2);
  --md-acento:var(--marinho);--md-sobre-acento:var(--sobre-marinho);--md-marca:var(--marca);--md-sobre-marca:var(--sobre-marca);
  --md-sel-bg:var(--carta);--md-foco:var(--marinho);--md-gaveta:transparent;
  --md-ok:var(--confere);--md-aviso:var(--aviso);--md-erro:var(--erro);--md-erro-bg:var(--erro-fundo);--md-erro-borda:var(--erro-borda);
  --md-r:9px;--md-r-g:var(--r-g);--md-sombra:var(--sombra);--md-e:var(--e);
  --md-ord-bg:var(--marca);--md-ord-fg:var(--sobre-marca);
  --md-fonte:var(--font-body,'Plus Jakarta Sans',system-ui,sans-serif);
  --md-fonte-d:var(--font-display,'Archivo',system-ui,sans-serif);--md-fonte-n:var(--md-fonte-d);
}
body[data-md-tema="passo"] .md-peca{border-radius:var(--r)}
body[data-md-tema="passo"] .md-cab-tx b{font-family:var(--font-body,'Plus Jakarta Sans',system-ui,sans-serif)}
@supports (color:color-mix(in srgb,red,blue)){
  body[data-md-tema="passo"] .md-ord{--md-ord-anel:0 0 0 4px color-mix(in srgb,var(--marca) 22%,transparent)}
}
/* nas peles os painéis de fora são vidro e o escolhido ganha um tom da cor da pele (temas.css, seção "vidro") */
body[data-md-tema="passo"]:not([data-jogo="passo"]){--md-sel-bg:var(--carta)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body[data-md-tema="passo"]:not([data-jogo="passo"]) :is(.md-bloco,.md-vista>.md-rodape){-webkit-backdrop-filter:var(--filtro-vidro);backdrop-filter:var(--filtro-vidro)}
  body[data-md-tema="passo"]:not([data-jogo="passo"]) .md-peca[aria-checked="true"]{background:color-mix(in srgb,var(--marca) 16%,transparent)}
}
@media (prefers-reduced-transparency:reduce){
  body[data-md-tema="passo"]:not([data-jogo="passo"]) :is(.md-bloco,.md-vista>.md-rodape){-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Night City e Nightly City: mesmos nomes de token, valores e raios diferentes */
body[data-md-tema="night-city"],body[data-md-tema="nightly-city"]{
  --md-bg:var(--painel-2);--md-bg-2:#0B0B0Ecc;--md-bg-3:#16161B;--md-campo:#0A0A0Dd8;
  --md-linha:var(--linha);--md-linha-forte:var(--linha-forte);--md-borda-peca:var(--linha);
  --md-tinta:var(--tinta);--md-tinta-2:var(--tinta-2);
  --md-acento:var(--amarelo);--md-sobre-acento:#0A0A00;--md-marca:var(--amarelo);--md-sobre-marca:#0A0A00;
  --md-sel-bg:#161608;--md-foco:var(--amarelo);
  --md-ok:var(--verde);--md-aviso:var(--vermelho);--md-erro:var(--vermelho);--md-erro-bg:#2A0A12;--md-erro-borda:var(--vermelho);
  --md-r:0;--md-r-g:0;--md-sombra:none;--md-e:var(--e);
  --md-ord-bg:var(--amarelo);--md-ord-fg:#0A0A00;
  --md-tt:uppercase;--md-ls:.07em;
}
body[data-md-tema="night-city"]{
  --md-fonte:var(--font-body,'Rajdhani',system-ui,sans-serif);--md-fonte-d:var(--md-fonte);
  --md-fonte-n:'Share Tech Mono',ui-monospace,monospace;
}
body[data-md-tema="nightly-city"]{
  --md-fonte:var(--font-body,'Barlow Condensed',system-ui,sans-serif);--md-fonte-d:var(--md-fonte);
  --md-fonte-n:'IBM Plex Mono',ui-monospace,monospace;
  --md-r:3px;--md-r-g:4px;
}
body[data-md-tema="night-city"] .md-bloco::before,body[data-md-tema="night-city"] .md-bloco::after,
body[data-md-tema="nightly-city"] .md-bloco::before,body[data-md-tema="nightly-city"] .md-bloco::after{
  content:"";position:absolute;width:11px;height:11px;border-color:var(--amarelo);pointer-events:none;z-index:1}
body[data-md-tema="night-city"] .md-bloco::before,body[data-md-tema="nightly-city"] .md-bloco::before{top:0;left:0;border-top:2px solid;border-left:2px solid}
body[data-md-tema="night-city"] .md-bloco::after,body[data-md-tema="nightly-city"] .md-bloco::after{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}
body[data-md-tema="nightly-city"] .md-bloco{border-top:2px solid var(--linha-forte)}
body[data-md-tema="night-city"] .md-cab-res,body[data-md-tema="nightly-city"] .md-cab-res{font-family:var(--md-fonte-n);font-size:12px;letter-spacing:.04em}
body[data-md-tema="night-city"] .md-peca[aria-checked="true"]::before,body[data-md-tema="nightly-city"] .md-peca[aria-checked="true"]::before{
  top:0;bottom:0;border-radius:0;box-shadow:var(--brilho-a)}
body[data-md-tema="night-city"] .md-peca:hover:not(.desab),body[data-md-tema="nightly-city"] .md-peca:hover:not(.desab){border-color:var(--linha-v)}
body[data-md-tema="night-city"] .md-peca[aria-checked="true"],body[data-md-tema="nightly-city"] .md-peca[aria-checked="true"]{border-color:var(--amarelo)}
body[data-md-tema="night-city"] .md-cx,body[data-md-tema="nightly-city"] .md-cx{border-radius:0}
body[data-md-tema="night-city"] .md-foto,body[data-md-tema="nightly-city"] .md-foto{border-radius:0}
body[data-md-tema="night-city"] .md-selo,body[data-md-tema="night-city"] .md-rar,
body[data-md-tema="nightly-city"] .md-selo,body[data-md-tema="nightly-city"] .md-rar{border-radius:0}
body[data-md-tema="night-city"] .md-slot-r,body[data-md-tema="nightly-city"] .md-slot-r{font-family:var(--md-fonte-n);letter-spacing:.12em}
body[data-md-tema="night-city"] .md-peca-n,body[data-md-tema="nightly-city"] .md-peca-n{font-size:15px}
body[data-md-tema="night-city"] .md-slot-v,body[data-md-tema="nightly-city"] .md-slot-v{font-size:15px}
body[data-md-tema="night-city"] .md-slot-n,body[data-md-tema="nightly-city"] .md-slot-n{border-radius:0}
body[data-md-tema="nightly-city"] .md-slot-n{border-radius:3px}

/* Bancada: as peças são teclas */
body[data-md-tema="bancada"]{
  --md-bg:var(--painel);--md-bg-2:var(--cap);--md-bg-3:var(--cap-alto);--md-campo:var(--painel-2);
  --md-linha:var(--linha);--md-linha-forte:var(--linha-forte);--md-borda-peca:var(--linha-forte);
  --md-tinta:var(--tinta);--md-tinta-2:#B3B9C2;
  --md-acento:var(--escolha);--md-sobre-acento:var(--sobre-escolha);--md-marca:var(--escolha);--md-sobre-marca:var(--sobre-escolha);
  --md-sel-bg:var(--escolha-fraca);--md-foco:var(--escolha);
  --md-ok:var(--escolha);--md-aviso:var(--carga);--md-erro:#FCA5A5;--md-erro-bg:#EF444418;--md-erro-borda:#EF4444;
  --md-r:var(--r);--md-r-g:var(--r-g);--md-sombra:none;--md-e:var(--e);
  --md-ord-bg:var(--cap-alto);--md-ord-fg:var(--escolha);
  --md-fonte:var(--font-body,'Chakra Petch',system-ui,sans-serif);
  --md-fonte-d:var(--md-fonte);--md-fonte-n:var(--font-display,'Russo One',system-ui,sans-serif);
}
/* o cinza do tema (--traco) dá 4,1:1 sobre as teclas; o texto secundário sobe de tom (a reserva acima vale sem color-mix) */
@supports (color:color-mix(in srgb,red,blue)){
  body[data-md-tema="bancada"]{--md-tinta-2:color-mix(in srgb,var(--tinta) 68%,var(--cap))}
}
body[data-md-tema="bancada"] .md-ord{border:1px solid var(--linha-forte);font-weight:400}
body[data-md-tema="bancada"] .md-cab-tx b{font-size:clamp(17px,2.2vw,20px)}
body[data-md-tema="bancada"] .md-peca{background:linear-gradient(180deg,var(--cap-alto),var(--cap));
  box-shadow:0 4px 0 var(--cap-saia),0 8px 18px -10px #000;
  transition:transform .12s var(--e),box-shadow .12s var(--e),border-color .15s var(--e)}
body[data-md-tema="bancada"] .md-peca:hover:not(.desab){transform:translateY(-1px);box-shadow:0 5px 0 var(--cap-saia),0 12px 22px -10px #000}
body[data-md-tema="bancada"] .md-peca[aria-checked="true"]{background:var(--escolha-fraca);transform:translateY(3px);box-shadow:0 1px 0 var(--cap-saia)}
body[data-md-tema="bancada"] .md-peca[aria-checked="true"]::before{display:none}
body[data-md-tema="bancada"] .md-peca.desab{box-shadow:0 4px 0 var(--cap-saia)}
body[data-md-tema="bancada"] .md-peca.desab:hover{background:linear-gradient(180deg,var(--cap-alto),var(--cap))}
@supports (color:color-mix(in srgb,red,blue)){
  body[data-md-tema="bancada"] .md-peca[aria-checked="true"]{
    background:linear-gradient(180deg,color-mix(in srgb,var(--escolha) 14%,var(--cap-alto)),color-mix(in srgb,var(--escolha) 9%,var(--cap)));
    box-shadow:0 1px 0 var(--cap-saia),inset 0 1px 0 color-mix(in srgb,var(--escolha) 28%,transparent)}
}
body[data-md-tema="bancada"] .md-lista{padding-bottom:14px;margin-bottom:-14px}
body[data-md-tema="bancada"] .md-peca[aria-checked="true"] .md-peca-n{color:var(--escolha)}
body[data-md-tema="bancada"] .md-slot-r{letter-spacing:.13em}
/* a etapa da Bancada é plana: número miúdo, título grande e um fio em cima (.b-etapa / .b-cab) */
body[data-md-tema="bancada"] .md-vista{gap:0}
body[data-md-tema="bancada"] .md-bloco{overflow:visible;background:none;border:0;border-top:1px solid var(--linha);border-radius:0;box-shadow:none;
  padding-top:34px;margin-top:30px}
body[data-md-tema="bancada"] .md-vista>.md-bloco:first-child{border-top:0;margin-top:8px}
body[data-md-tema="bancada"] .md-cab{padding:0 0 6px;gap:12px;align-items:baseline}
body[data-md-tema="bancada"] .md-ord{width:auto;height:auto;display:inline;background:none;border:0;border-radius:0;color:var(--md-tinta-2);
  font-size:13px;letter-spacing:.1em}
body[data-md-tema="bancada"] .md-cab-tx b{font-size:clamp(19px,2.4vw,25px);letter-spacing:-.01em}
body[data-md-tema="bancada"] .md-corpo{padding:0;border-top:0}
body[data-md-tema="bancada"] .md-diz{padding:0 0 20px;max-width:64ch;font-size:14px}
body[data-md-tema="bancada"] .md-vista>.md-rodape{display:none}
body[data-md-tema="bancada"] .md-rodape .md-resumo{display:none}
body[data-md-tema="bancada"] .md-bloco-manual .md-rodape{border-top:0;padding-top:6px;margin-top:10px}
/* a barra fixa de baixo da Bancada cobre o fim da página: folga para o último painel não ficar atrás dela */
body[data-md-tema="bancada"] .md-painel{padding-bottom:24px}

/* Clássico: o painel .panel / .field do tema */
body[data-md-tema="classico"]{
  --md-bg:var(--surface);--md-bg-2:var(--surface-2);--md-bg-3:var(--surface-3);--md-campo:#0a0f18;
  --md-linha:var(--border);--md-linha-forte:var(--border-strong);--md-borda-peca:var(--border);
  --md-tinta:var(--text);--md-tinta-2:var(--text-2);
  --md-acento:var(--brand);--md-sobre-acento:var(--on-brand);--md-marca:var(--brand);--md-sobre-marca:var(--on-brand);
  --md-sel-bg:var(--brand-tint,#a6e22e1f);--md-foco:var(--brand-bright,var(--brand));
  --md-ok:var(--brand);--md-aviso:var(--accent,#ff6a1a);--md-erro:#ff8a8a;--md-erro-bg:#ff5c5c14;--md-erro-borda:#ff5c5c66;
  --md-r:var(--radius-sm,9px);--md-r-g:var(--radius,14px);--md-sombra:var(--shadow,none);--md-e:var(--ease,ease);
  --md-ord-bg:linear-gradient(120deg,var(--brand-bright,var(--brand)),var(--brand));--md-ord-fg:var(--on-brand);
  --md-fonte:var(--font-body,'Inter',system-ui,sans-serif);--md-fonte-d:var(--font-display,'Oxanium',system-ui,sans-serif);
  --md-fonte-n:var(--md-fonte-d);
}
body[data-md-tema="classico"] .md-cab-tx b{font-size:16px}
/* dentro do .panel do Clássico não há moldura de novo: os blocos são faixas separadas por um fio */
body[data-md-tema="classico"] .md-bloco{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body[data-md-tema="classico"] .md-vista{gap:0}
body[data-md-tema="classico"] .md-vista>.md-bloco+.md-bloco{border-top:1px solid var(--border);margin-top:18px;padding-top:18px}
body[data-md-tema="classico"] .md-cab{padding:0 0 12px}
body[data-md-tema="classico"] .md-corpo{padding:0;border-top:0}
body[data-md-tema="classico"] .md-diz{padding:0 0 12px}
body[data-md-tema="classico"] .md-vista>.md-rodape{margin-top:14px;padding:14px 0 0;border:0;border-top:1px solid var(--border);border-radius:0;background:none}
/* o rótulo da coluna já diz "Suas peças": no modo manual o cabeçalho do bloco só repetiria */
body[data-md-tema="classico"] [data-vista="manual"] .md-cab{display:none}
body[data-md-tema="classico"] .md-peca[aria-checked="true"]::before{background:var(--brand)}
body[data-md-tema="classico"] .md-peca[aria-checked="true"]{border-color:var(--brand-border,var(--brand))}

/* Passo a passo, Night City e Nightly City: com as duas colunas o cartão do botão acompanha a rolagem
   (position:sticky) e já mostra o resumo; o resumo do painel só serve quando a coluna do botão vai para baixo */
@media (min-width:941px){
  body[data-md-tema="passo"] .md-vista[data-vista="cpugpu"]>.md-rodape,body[data-md-tema="passo"] .md-rodape .md-resumo{display:none}
}
@media (min-width:1081px){
  body:is([data-md-tema="night-city"],[data-md-tema="nightly-city"]) .md-vista[data-vista="cpugpu"]>.md-rodape,
  body:is([data-md-tema="night-city"],[data-md-tema="nightly-city"]) .md-rodape .md-resumo{display:none}
}

/* ============================================================ 5. telas pequenas, movimento, transparência */
@media (max-width:640px){
  .md-cab{padding:14px}
  .md-corpo{padding:0 14px 14px}
  .md-vista>.md-rodape{padding:12px 14px}
  .md-lista{max-height:min(440px,64vh)}
  .md-slot-bt{gap:10px;padding:8px 10px}
  .md-slot-extra{padding:0 10px 12px 10px}
  .md-gaveta{padding:10px}
  .md-slot-p{display:none}
  .md-slot-p2{display:block;font-size:13px}
  .md-total+.md-resumo{text-align:left}
}
@media (max-width:380px){
  .md-slot-img{display:none}
  .md-foto{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .md-peca,.md-limpar,.md-seta,.md-slot-bt{transition:none}
  .md-esq{animation:none;opacity:.7}
  body[data-md-tema="bancada"] .md-peca,body[data-md-tema="bancada"] .md-peca:hover:not(.desab),
  body[data-md-tema="bancada"] .md-peca[aria-checked="true"]{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .md-bloco{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ============================================================ 5. ajustes depois da verificação (21/10/2026) */
/* A barra só aparece quando o modos.js assumiu a página: sem ele seriam três botões mortos. */
body:not([data-md]) .md-barra,body:not([data-md]) .md-abas,body:not([data-md]) .b-abas,
body:not([data-md]) .p-abas-linha:has([data-md-modo]){display:none}
/* Paletas do /admin (Tema Claro): a cor de erro e o campo seguem o tema em vez de supor fundo escuro. */
@supports (color:color-mix(in srgb,red,blue)){
  body[data-md-tema="bancada"]{--md-erro:color-mix(in srgb,#ef4444 64%,var(--tinta));--md-sobre-erro:var(--bancada)}
  body[data-md-tema="classico"]{--md-erro:color-mix(in srgb,#ff4d4d 62%,var(--text));--md-sobre-erro:var(--bg);
    --md-campo:color-mix(in srgb,var(--bg) 70%,var(--surface))}
}
/* A barra de ações fixa da Bancada cobre o fim da tela: o foco do teclado e o scrollIntoView deixam folga. */
body[data-md-tema="bancada"] .md-peca,body[data-md-tema="bancada"] .md-slot{scroll-margin-bottom:190px}