@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fontes/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fontes/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.acoes-admin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* FoxPanel */
:root {
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --superficie-2: #f2f4f7;
  --borda: #e4e7ec;
  --borda-forte: #d0d5dd;
  --texto: #101828;
  --muted: #667085;
  --fraco: #98a2b3;

  --laranja: #f26b1d;
  --laranja-forte: #d9570c;
  --laranja-suave: #fff3eb;
  --laranja-borda: #ffd6bd;
  --sobre-laranja: #ffffff;

  --verde: #12b76a; --verde-texto: #067647; --verde-suave: #ecfdf3;
  --ambar: #f79009; --ambar-texto: #93370d; --ambar-suave: #fffaeb; --ambar-borda: #fedf89;
  --vermelho: #f04438; --vermelho-texto: #b42318; --vermelho-suave: #fef3f2;
  --cinza: #98a2b3; --cinza-texto: #475467; --cinza-suave: #f2f4f7;

  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --sombra-3: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --raio: 14px;
  --raio-p: 9px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0b0f17;
    --superficie: #121826;
    --superficie-2: #182031;
    --borda: #232d42;
    --borda-forte: #33405c;
    --texto: #e8ecf4;
    --muted: #97a3ba;
    --fraco: #6b7891;

    --laranja: #ff7b30;
    --laranja-forte: #ff925a;
    --laranja-suave: rgba(255, 123, 48, .12);
    --laranja-borda: rgba(255, 123, 48, .35);
    --sobre-laranja: #1a0d05;

    --verde: #32d583; --verde-texto: #6ce9a6; --verde-suave: rgba(50, 213, 131, .12);
    --ambar: #fdb022; --ambar-texto: #fec84b; --ambar-suave: rgba(253, 176, 34, .1); --ambar-borda: rgba(253, 176, 34, .3);
    --vermelho: #f97066; --vermelho-texto: #fda29b; --vermelho-suave: rgba(249, 112, 102, .12);
    --cinza: #6b7891; --cinza-texto: #b3bdd0; --cinza-suave: #1d2638;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 1px 3px rgba(0, 0, 0, .35);
    --sombra-3: 0 16px 32px -8px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprites { position: absolute; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
code { font: 500 12.5px/1 ui-monospace, "SF Mono", Consolas, monospace; background: var(--superficie-2); border: 1px solid var(--borda); padding: 2px 6px; border-radius: 6px; }
svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------ marca */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.logo svg { width: 30px; height: 30px; color: var(--laranja); filter: drop-shadow(0 2px 6px rgba(242, 107, 29, .35)); }
.logo b { color: var(--laranja); font-weight: 800; }
.logo-claro { color: #fff; }

/* ------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 Inter, system-ui, sans-serif; padding: 10px 16px; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-1); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { background: var(--superficie-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--laranja-suave), 0 0 0 1px var(--laranja); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-primario { background: var(--laranja); border-color: var(--laranja); color: var(--sobre-laranja); box-shadow: 0 1px 2px rgba(242, 107, 29, .3), inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn-primario:hover { background: var(--laranja-forte); border-color: var(--laranja-forte); }
.btn-fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { color: var(--vermelho-texto); }
.btn-perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.btn-p { padding: 7px 12px; font-size: 13px; }
.btn-bloco { width: 100%; padding: 12px 16px; font-size: 15px; }

/* ------------------------------------------------ formulários */
.campo { display: block; margin-bottom: 16px; }
.campo-turnstile { margin-bottom: 16px; min-height: 65px; }   /* quadro "nao sou robo" da Cloudflare no cadastro */
.campo > span { display: block; font-size: 13.5px; font-weight: 550; color: var(--texto); margin-bottom: 6px; }
input:not([type=checkbox]), select {
  display: block; width: 100%; padding: 10px 12px; font: 15px/1.4 Inter, system-ui, sans-serif;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--fraco); }
input:focus, select:focus { border-color: var(--laranja); }
input[type=checkbox] { accent-color: var(--laranja); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
/* (27/10) campo de senha com o olho de mostrar/esconder (olhoSenha, js/comum.js) */
.senha-caixa, .campo > .senha-caixa { position: relative; display: block; margin: 0; }
.senha-caixa > input { padding-right: 42px; }
.senha-olho { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0 var(--raio-p) var(--raio-p) 0; background: none; color: var(--muted); cursor: pointer; }
.senha-olho:hover, .senha-olho[aria-pressed="true"] { color: var(--texto); }
.senha-olho:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
.senha-olho svg { width: 18px; height: 18px; }
.erro { color: var(--vermelho-texto); font-size: 13.5px; min-height: 1.3em; margin-top: 10px; }
.erro.ok { color: var(--verde-texto); }
.dica { display: flex; gap: 10px; font-size: 13px; color: var(--muted); background: var(--laranja-suave); border: 1px solid var(--laranja-borda); border-radius: var(--raio-p); padding: 10px 12px; margin-bottom: 16px; }
.dica svg { color: var(--laranja); margin-top: 1px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.linha-botoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.linha-botoes .erro { margin: 0; }

.interruptor { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 26px 0 16px; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor i { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .2s; margin-top: 1px; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.interruptor input:checked + i { background: var(--laranja); }
.interruptor input:checked + i::after { transform: translateX(16px); }
.interruptor input:focus-visible + i { box-shadow: 0 0 0 4px var(--laranja-suave); }
.interruptor span { font-size: 14px; font-weight: 550; }
.interruptor small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.campo small.ajuda { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 4px 0 18px; cursor: pointer; }

/* ------------------------------------------------ entrada */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.entrada-marca {
  position: relative; overflow: hidden; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(255, 123, 48, .55), transparent 60%),
    radial-gradient(700px 500px at -20% 120%, rgba(255, 158, 88, .25), transparent 60%),
    linear-gradient(160deg, #141b2b 0%, #0b0f17 100%);
}
.entrada-marca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.entrada-marca > * { position: relative; z-index: 1; }
.entrada-texto { max-width: 470px; }
.entrada-texto h1 { font-size: 36px; line-height: 1.15; font-weight: 750; letter-spacing: -.03em; }
.entrada-texto > p { color: rgba(255, 255, 255, .7); font-size: 16px; margin: 14px 0 34px; }
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.beneficios li { display: flex; gap: 14px; }
.beneficios svg { width: 40px; height: 40px; padding: 10px; border-radius: 11px; color: #ffb88a; background: rgba(255, 123, 48, .14); border: 1px solid rgba(255, 123, 48, .28); }
.beneficios strong { display: block; font-size: 15px; font-weight: 600; }
.beneficios span { color: rgba(255, 255, 255, .62); font-size: 14px; }
.entrada-rodape { color: rgba(255, 255, 255, .45); font-size: 13px; }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.form-caixa { width: 100%; max-width: 400px; }
.form-caixa h2 { font-size: 26px; font-weight: 700; }
.form-caixa > .muted { margin: 6px 0 24px; }
.logo-movel { display: none; margin-bottom: 28px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 11px; background: var(--superficie-2); border: 1px solid var(--borda); margin-bottom: 22px; }
.aba { font: 600 14px/1 Inter, system-ui, sans-serif; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.aba.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }

/* ------------------------------------------------ barra e conteúdo */
.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--superficie) 85%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borda); }
.barra-in { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--sobre-laranja); background: linear-gradient(135deg, var(--laranja), #ffa468); flex: none; }
.usuario-email { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (26/10) menu do e-mail no topo: varios e-mails logados no mesmo navegador, como no Outlook */
.menu-email { position: relative; min-width: 0; }
.menu-email > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 8px 3px 3px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.menu-email > summary::-webkit-details-marker { display: none; }
.menu-email > summary:hover, .menu-email[open] > summary { background: var(--superficie-2); border-color: var(--borda); }
.menu-email > summary:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.menu-email-seta { font-size: 11px; color: var(--muted); }
.menu-email-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 8px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-3); }
.menu-email-tit { padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.menu-email-item, .menu-email-acao { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; color: var(--texto); text-align: left; }
button.menu-email-item, .menu-email-acao { cursor: pointer; }
button.menu-email-item:hover, .menu-email-acao:hover, button.menu-email-item:focus-visible, .menu-email-acao:focus-visible { background: var(--laranja-suave); outline: none; }
.menu-email-item:disabled { opacity: .6; cursor: progress; }
.menu-email-item.ativo { background: var(--superficie-2); }
.menu-email-item .avatar { width: 28px; height: 28px; font-size: 13px; }
.menu-email-item svg { width: 16px; height: 16px; margin-left: auto; color: var(--laranja-forte); }
.menu-email-acao svg { width: 16px; height: 16px; }
.menu-email-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-email-lista hr { margin: 4px 0; border: 0; border-top: 1px solid var(--borda); }
.entrar-logados { display: grid; gap: 2px; margin-bottom: 18px; padding: 8px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
#entrar-logados-lista { display: grid; gap: 2px; }
#bt-voltar-painel { margin-top: 8px; }
.conteudo { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho .muted { margin-top: 4px; font-size: 15px; }
.secao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 36px 0 14px; flex-wrap: wrap; }
.secao-nome { display: flex; align-items: baseline; gap: 10px; }
.secao-titulo .secao-acao { margin-left: auto; }

/* ------------------------------------------------ troca de layout (lista / lado a lado) */
.layout-troca { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.layout-bt { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 Inter, system-ui, sans-serif; padding: 7px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.layout-bt svg { width: 16px; height: 16px; }
.layout-bt:hover { color: var(--texto); }
.layout-bt.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
.contas.lado { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.conteudo.amplo { max-width: 1480px; }
.contas.lado .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contas.lado .paineis { grid-template-columns: 1fr; }
.paineis.um { grid-template-columns: 1fr; }
/* jogar fora */
dialog.janela.janela-lixo { max-width: 860px; }
.lixo-legenda { font-size: 13px; margin: -8px 0 12px; }
.grade-lixo { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin-bottom: 16px; }
.item-lixo { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 8px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease; }
.item-lixo:hover { transform: translateY(-1px); border-color: var(--borda-forte); }
.item-lixo:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.item-lixo svg, .item-lixo img { width: 100%; height: 100%; max-width: 40px; max-height: 40px; transition: filter .15s ease, opacity .15s ease; }
.item-lixo img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; -webkit-user-drag: none; }
.item-lixo.fora { background: transparent; border-style: dashed; }
.item-lixo.fora svg, .item-lixo.fora img { filter: grayscale(1); opacity: .3; }
.item-lixo .lixeira { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--vermelho-texto); display: none; }
.item-lixo .lixeira::before { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #fff; border-radius: 1px; }
.item-lixo.fora .lixeira { display: block; }
.cfg-itens.sem-lixeira .item-lixo.fora .lixeira { display: none; }
/* (11/10) filtros da janela Configurar em grade de itens (Minerar: minérios e sujeira) */
.cfg-itens-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; font-size: 12.5px; }
.cfg-itens-est { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cfg-itens-est i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--borda-forte); background: var(--superficie-2); }
.cfg-itens-est.est-mochila i { border-color: var(--laranja); background: var(--laranja-suave); }
.cfg-itens-est.est-lixo i { border-style: dashed; background: transparent; }
.cfg-itens-linha { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--borda); }
.cfg-itens-linha:first-of-type { border-top: 0; }
.cfg-itens-linha:not(:has(.cfg-itens-titulo)) { grid-template-columns: 1fr; }
.cfg-itens-titulo { font-size: 13px; font-weight: 650; }
.cfg-itens-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cfg-item { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.cfg-item .item-lixo { width: 58px; }
.cfg-item small { max-width: 100%; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.item-filtro.est-mochila { border-color: var(--laranja); background: var(--laranja-suave); box-shadow: 0 0 0 1px var(--laranja) inset; }
.item-filtro.est-mochila::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--laranja); }
.item-filtro.est-mochila::before { content: ''; position: absolute; right: 8px; bottom: 8px; width: 6px; height: 5px; border-radius: 1px; background: #fff; z-index: 1; }
/* (17/10) filtro da venda da Pesca: vende na placa (verde) x guarda nos baus (apagado, sem a lixeira) */
.cfg-itens-est.est-vende i { border-color: var(--verde); background: var(--verde-suave); }
.cfg-itens-est.est-guarda i { border-style: dashed; background: transparent; }
.item-filtro.est-vende { border-color: var(--verde); background: var(--verde-suave); box-shadow: 0 0 0 1px var(--verde) inset; }
.item-filtro.est-guarda { background: transparent; border-style: dashed; }
.item-filtro.est-guarda img { filter: grayscale(1); opacity: .35; }
.cfg-itens-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 520px) { .cfg-itens-linha { grid-template-columns: 1fr; gap: 4px; } }
.manter-tipos { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.manter-tipos .enc-tipo { padding-top: 20px; }
.manter-tipos .enc-icone svg { width: 100%; height: 100%; }
.manter-badge { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 700; color: var(--verde-texto); }
.manter-tipos .enc-tipo.com-filtro:not(.sel) { border-color: var(--laranja-borda, var(--laranja)); }
.manter-aviso-arm { margin: 0 0 10px; }
.manter-editor { padding: 14px; margin-bottom: 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.manter-editor .enc-editor-topo .pilula { margin-left: auto; }
.manter-editor .enc-icone svg { width: 100%; height: 100%; }
.manter-nota { margin: -4px 0 10px; font-size: 12.5px; }
.manter-regra { padding: 10px; border: 1px dashed var(--borda-forte); border-radius: 10px; background: var(--superficie); }
.manter-regra.on { border-style: solid; border-color: #8b5cf6; }
.manter-regra-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.manter-grade { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.manter-editor .enc-editor-topo h3 { text-transform: none; letter-spacing: normal; color: var(--texto); font-size: 17px; }
.manter-grade .enc-card { grid-template-columns: 28px 1fr; }
.manter-grade .enc-card .enc-icone { width: 28px; height: 28px; }
.manter-grade .enc-card > span:empty { display: none; }
.manter-grade .enc-niveis { grid-column: 1 / -1; flex-wrap: wrap; }
/* 05/10: dourado = obrigatorio (o roxo, .on sozinho, = basta um dos roxos) */
.manter-grade .enc-card.ouro { border-color: #d99a00; background: rgba(245, 179, 1, .12); box-shadow: 0 0 0 1px rgba(245, 179, 1, .35); }
.manter-grade .enc-card.ouro .enc-card-meio b { color: var(--ambar-texto); }
.manter-grade .enc-card.ouro .enc-niveis button.sel { border-color: #d99a00; color: var(--ambar-texto); background: rgba(245, 179, 1, .14); }
.manter-grade .enc-card:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.manter-ou { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--laranja); }
.manter-ou::before, .manter-ou::after { content: ''; flex: 1; border-top: 1px solid var(--borda); }
.manter-acoes { margin: 10px 0 0; }
.manter-mat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.manter-mat-rotulo { font-weight: 600; margin-right: 2px; }
.manter-mat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 12.5px; cursor: pointer; opacity: .65; }
.manter-mat-btn img, .manter-mat-btn svg { width: 20px; height: 20px; image-rendering: pixelated; }
.manter-mat-btn:hover { opacity: 1; }
.manter-mat-btn.on { opacity: 1; border-color: #8b5cf6; background: rgba(139, 92, 246, .14); font-weight: 600; }
.manter-mat-btn:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.manter-mc { margin-top: 12px; }
.manter-mc-fora { margin-top: 4px; color: #ff5555; }
.lixo-conta { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--vermelho-suave); color: var(--vermelho-texto); }
/* abas do cartao da conta */
.abas-conta { display: flex; gap: 2px; margin: 0 22px; padding: 3px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); width: fit-content; max-width: calc(100% - 44px); overflow-x: auto; }
.aba-conta { position: relative; font: 600 13px/1 Inter, system-ui, sans-serif; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.aba-conta:hover { color: var(--texto); }
.aba-conta[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
.aba-conta:focus-visible { outline: 2px solid var(--laranja, #f97316); outline-offset: 1px; }
.aba-marca { display: inline-block; min-width: 18px; margin-left: 6px; padding: 2px 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ambar-suave); color: var(--ambar-texto); }
.aba-marca.ruim { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.conta .fora-da-aba { display: none !important; }
.conta .abas-conta { margin-top: 14px; margin-bottom: 14px; }
/* (09/10) abas + "Trocar macro" na mesma linha */
.abas-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 14px 22px; }
.conta .abas-linha .abas-conta { margin: 0; max-width: 100%; }
.troca-macro { flex: none; margin-left: auto; }
/* chat dentro do cartao (aba Chat) e no Mapa */
.chat-aba { padding: 0 22px 18px; }
.chat-painel .chat-log { height: 300px; }
.chat-painel .chat-situacao { margin-bottom: 8px; }
.chat-painel .interruptor.chat-robo { margin: 8px 0 0; }
.chat-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-atalhos .btn { font-size: 12px; padding: 4px 9px; }
/* tesouros e correio */
.tesouros-cartao { margin-top: 16px; }
.tesouros-cartao .cartao-topo { margin-bottom: 12px; }
/* (16/10) minimiza pelo titulo, como "Suas vagas" */
.tesouros-cartao.fechada { padding-top: 12px; padding-bottom: 12px; }
.tesouros-topo .vagas-tit { font-size: 16px; }
.tesouros-desc { margin: 4px 0 12px; }
.tesouros-linhas { display: grid; gap: 10px; }
.tesouro-linha { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.tesouro-linha:first-child { border-top: 0; padding-top: 0; }
.tesouro-nick { font-weight: 650; }
.tesouro-nick small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.niveis { display: flex; flex-wrap: wrap; gap: 6px; }
.nivel-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--cinza-suave); color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
.nivel-chip b { font-weight: 800; }
.nivel-chip.alto { background: var(--ambar-suave); color: var(--ambar-texto); }
.nivel-chip.topo { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.tesouro-situacao { text-align: right; font-size: 13px; color: var(--muted); }
.correio-bloco { padding: 16px 22px 18px; border-bottom: 1px solid var(--borda); }
.correio-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.correio-conteudo { display: grid; gap: 10px; font-size: 14px; }
.correio-conteudo .linha-itens { color: var(--muted); font-size: 13px; }
.tesouro-lista { display: grid; gap: 6px; }
.tesouro-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tesouro-item .quando { color: var(--muted); font-size: 12.5px; }
.frag-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 6px; }
.frag { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; }
.frag .trilho { grid-column: 1 / -1; }
.frag-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frag-conta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.frag.pronto { border-color: var(--verde-texto); background: var(--verde-suave); }
.frag.pronto .frag-conta { color: var(--verde-texto); }
.frag-linha { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.frag-linha.pronto { color: var(--verde-texto); font-weight: 600; }
/* (16/10) "Limpar histórico" ao lado da descricao e a home dos tesouros por conta */
.tesouros-desc { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tesouros-desc p { margin: 0; }
.tes-guarda { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.tes-guarda-tit { font-weight: 700; }
.tes-guarda-desc { margin: -4px 0 2px; font-size: 13px; }
.tes-guarda-linha { display: grid; grid-template-columns: 180px 96px minmax(140px, 260px) auto; gap: 6px 12px; align-items: center; justify-content: start; }
.tes-guarda-liga { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tes-guarda-liga input { margin: 0; }
.tes-guarda-home { width: 100%; min-width: 0; }
.tes-guarda-linha > .btn { justify-self: start; }
.tes-guarda-nota { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) {
  .tesouro-linha { grid-template-columns: 1fr; }
  .tesouro-situacao { text-align: left; }
  .tes-guarda-linha { grid-template-columns: auto 1fr auto; justify-content: stretch; }
  .tes-guarda-linha .tesouro-nick { grid-column: 1 / -1; }
}       /* acrobacia: so as skills */
.contas.lado .barras { gap: 3px; }
.contas.lado .coluna-dia { font-size: 10px; }
.contas.lado .conta-topo { flex-wrap: wrap; }
.contas.lado .modalidade-grade { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
@media (max-width: 1000px) { .contas.lado { grid-template-columns: 1fr; } .layout-troca { display: none; } }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2); padding: 22px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.cartao-topo .muted { margin-top: 4px; }

/* ------------------------------------------------ licença */
.licenca { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); box-shadow: var(--sombra-2); position: relative; overflow: hidden; }
.licenca::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor, var(--cinza)); }
.licenca.ok { --cor: var(--verde); }
.licenca.alerta { --cor: var(--ambar); background: linear-gradient(90deg, var(--ambar-suave), var(--superficie) 60%); }
.licenca.ruim { --cor: var(--vermelho); background: linear-gradient(90deg, var(--vermelho-suave), var(--superficie) 60%); }
.licenca-icone { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--laranja-suave); color: var(--laranja); flex: none; }
.licenca-icone svg { width: 24px; height: 24px; }
.licenca-corpo { flex: 1; min-width: 0; }
.licenca-titulo { font-size: 16px; font-weight: 650; }
.licenca-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.licenca-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); margin-top: 12px; max-width: 420px; overflow: hidden; }
.licenca-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--laranja), #ffa468); }

/* ------------------------------------------------ pílulas e status */
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pilula.ok { background: var(--verde-suave); color: var(--verde-texto); }
.pilula.alerta { background: var(--ambar-suave); color: var(--ambar-texto); }
.pilula.ruim { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.pilula.neutro { background: var(--cinza-suave); color: var(--cinza-texto); }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--borda); background: var(--superficie); white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); position: relative; }
.status.ok i { background: var(--verde); }
.status.ok i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--verde); opacity: .35; animation: pulso 1.8s ease-out infinite; }
.status.alerta i { background: var(--ambar); }
.status.ruim i { background: var(--vermelho); }
.vence-logo { color: var(--ambar-texto); font-weight: 600; }
/* (07/10) "Suas vagas", compacto: uma linha por vaga; o titulo minimiza */
.vagas-secao { margin-top: 16px; padding: 12px 18px 14px; }
.vagas-secao.fechada { padding-bottom: 12px; }
.vagas-topo { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vagas-tit { font-size: 15px; font-weight: 700; }
.vagas-sub { font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.vagas-seta { color: var(--muted); font-size: 13px; }
.vagas-topo:hover .vagas-seta, .vagas-topo:hover .vagas-tit { color: var(--laranja); }
.vagas-cab { display: flex; align-items: center; gap: 12px; }
.vagas-cab .vagas-topo { flex: 1; min-width: 0; }
.btn-discord { flex: none; text-decoration: none; white-space: nowrap; }
.barra-discord { text-decoration: none; white-space: nowrap; }
.barra-discord svg, .btn-discord svg { color: inherit; }
.entrada-discord { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.entrada-discord svg { width: 16px; height: 16px; flex: none; color: var(--laranja); }
.entrada-discord a { color: var(--laranja); font-weight: 600; }
.vagas-resumo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vagas-nota { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.vagas-vazio { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.vagas-linhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 14px; margin-top: 12px; }
.vaga-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) 10px auto 46px; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border: 1px solid var(--borda); border-left: 3px solid var(--cor, var(--cinza)); border-radius: 8px; }
.vaga-linha.ok { --cor: var(--verde); }
.vaga-linha.alerta { --cor: var(--ambar); }
.vaga-linha.ruim { --cor: var(--vermelho); }
.vaga-linha.neutro { --cor: var(--cinza); border-style: dashed; border-left-style: solid; }
.vaga-nick { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga-nick.livre { color: var(--muted); font-weight: 500; font-style: italic; }
/* (22/10/2026) o quadro de itens das outras macros: "Vendido nas placas" embaixo do que a macro trouxe */
.itens-sub { margin: 16px 0 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
/* (22/10/2026) o nível de XP do jogo e o money da conta: pílulas ao lado do VIP e do ping (só no cartão aberto) */
.conta-xp, .conta-money { font-size: 11.5px; padding: 2px 8px; background: var(--superficie-2); font-variant-numeric: tabular-nums; }
.conta-xp { color: var(--verde-texto); }
.conta-money { color: var(--texto); }
.conta.va-fechada .conta-xp, .conta.va-fechada .conta-money { display: none; }
/* (22/10/2026) o money da conta embaixo do nick */
.vaga-quem { display: grid; min-width: 0; line-height: 1.25; }
.vaga-saldo { font-size: 12px; font-weight: 600; color: var(--verde-texto); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga-num { font-weight: 700; font-size: 13px; color: var(--muted); text-align: center; }
.vaga-robo .ponto { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); }
.vaga-robo .ponto.ok { background: var(--verde); }
.vaga-robo .ponto.alerta { background: var(--ambar); }
.vaga-tempo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.vaga-tempo b { font-size: 13px; }
.vaga-tempo small { font-size: 11px; color: var(--muted); }
.vaga-linha.alerta .vaga-tempo b { color: var(--ambar-texto); }
.vaga-linha.ruim .vaga-tempo b { color: var(--vermelho-texto); }
.vaga-barra { height: 4px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.vaga-barra i { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--laranja)); }
.vaga-conta { font: inherit; font-size: 14px; font-weight: 500; padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--superficie); color: var(--texto); min-width: 0; }
#tb-vagas .vaga-conta { min-width: 150px; max-width: 220px; }
@keyframes pulso { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status.ok i::after { animation: none; } }

/* ------------------------------------------------ indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-1); }
.kpi-rotulo { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-valor { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-valor small { font-size: 15px; color: var(--fraco); font-weight: 600; }
.kpi.alerta { border-color: var(--ambar-borda); background: var(--ambar-suave); }
.kpi .quando { margin-top: 6px; color: var(--ambar-texto); }

/* ------------------------------------------------ adicionar conta */
.nova { margin-top: 20px; border-color: var(--laranja-borda); box-shadow: var(--sombra-3); }
.requisitos { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 14px 16px; font-size: 14px; margin-bottom: 16px; }
.requisitos strong { font-size: 13px; }
.requisitos ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.requisitos li { display: flex; gap: 8px; color: var(--muted); }
.requisitos li svg { color: var(--verde); width: 17px; height: 17px; margin-top: 2px; }
.requisitos li strong { color: var(--texto); font-size: 14px; }

/* ------------------------------------------------ contas */
.contas { display: grid; gap: 18px; }
.conta { padding: 0; overflow: hidden; }
.conta-topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--borda); }
.conta-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.conta-avatar { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--laranja); background: var(--laranja-suave); border: 1px solid var(--laranja-borda); flex: none; }
.nick { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.nick-linha { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.conta-apelido { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.conta-apelido:empty { display: none; }
.conta-vip { font-size: 11.5px; padding: 2px 8px; }
.conta-coins { font-size: 11.5px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.conta-ping { font-size: 11.5px; padding: 2px 8px; gap: 5px; font-variant-numeric: tabular-nums; }
.conta-ping svg { display: block; flex: none; }
.conta-ping rect.cheia { fill: currentColor; }
.conta-ping rect.vazia { fill: currentColor; opacity: .22; }
/* na lista (cartao fechado) o ping fica so no selinho do quadrado da conta, sem linha nova */
.conta-avatar { position: relative; }
.ping-selo { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; padding: 2px 2px 2px 3px; border-radius: 5px; background: var(--superficie); border: 1px solid var(--borda); line-height: 0; }
.ping-selo svg { width: 14px; height: 12px; display: block; }
.ping-selo rect.cheia { fill: currentColor; }
.ping-selo rect.vazia { fill: currentColor; opacity: .22; }
.ping-selo.ok { color: var(--verde-texto); }
.ping-selo.alerta { color: var(--ambar-texto); }
.ping-selo.ruim { color: var(--vermelho-texto); }
.ping-selo.neutro { color: var(--cinza-texto); }
.conta.va-fechada .conta-ping { display: none; }
.sub-macro { color: var(--texto); font-weight: 600; }
.conta.com-cor { border-left: 4px solid var(--cor-conta); }
.conta.com-cor .conta-avatar { color: #fff; background: var(--cor-conta); border-color: var(--cor-conta); }
.sub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.avisos { display: grid; gap: 8px; padding: 0 22px; }
.avisos:not(:empty) { padding-top: 16px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--ambar-suave); border: 1px solid var(--ambar-borda); color: var(--ambar-texto); border-radius: var(--raio-p); padding: 10px 12px; font-size: 14px; font-weight: 500; }
.aviso svg { margin-top: 1px; }
.aviso { transition: opacity .4s; }
.aviso.sumindo { opacity: 0; }
.numeros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--borda); border-block: 1px solid var(--borda); margin-top: 18px; }
.num { background: var(--superficie); padding: 14px 18px; }
.num .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num .r { font-size: 12.5px; color: var(--muted); }
.num.largo { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; }
.num.baixo .v { color: var(--ambar-texto); }
.num .num-sub { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
dialog.janela.janela-larga { max-width: 1120px; }
.grade-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; align-items: start; }
.grade-campos .janela-secao { grid-column: 1 / -1; }
.grade-campos .interruptor { margin: 4px 0 18px; }
@media (max-width: 960px) { .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade-campos { grid-template-columns: 1fr; } }
.janela-secao { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 12px; padding-top: 14px; border-top: 1px solid var(--borda); }
dialog.janela { max-height: calc(100vh - 32px); overflow-y: auto; }
.paineis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borda); border-bottom: 1px solid var(--borda); }
.painel { background: var(--superficie); padding: 18px 22px 20px; }
.vazio { color: var(--muted); font-size: 13.5px; }
.rodape-painel { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.skills-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.skills-topo h3 { margin-bottom: 0; }
.skills-topo + .skills { margin-top: 10px; }

.skill { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; margin-bottom: 11px; }
.skill-nome { font-size: 14px; font-weight: 550; }
.skill-nivel { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skill-nivel .mais { color: var(--verde-texto); background: var(--verde-suave); font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.trilho { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.trilho i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--laranja), #ffa468); }

.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.item-nome { font-weight: 500; }
.item-qtd { font-weight: 700; font-variant-numeric: tabular-nums; }
.item .trilho i { background: var(--borda-forte); }
.item.peixe .trilho i { background: linear-gradient(90deg, #2e90fa, #53b1fd); }
.item.especial .trilho i { background: linear-gradient(90deg, #9e77ed, #b692f6); }

.eventos { padding: 14px 22px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.eventos summary { cursor: pointer; font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.eventos summary::-webkit-details-marker { display: none; }
.eventos summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.eventos[open] summary::before { transform: rotate(45deg); }
.eventos ol { list-style: none; margin: 14px 0 4px; padding: 0 0 0 4px; }
.eventos li { position: relative; padding: 0 0 12px 20px; }
.eventos li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
.eventos li::after { content: ""; position: absolute; left: 3.5px; top: 18px; bottom: 0; width: 1px; background: var(--borda); }
.eventos li:last-child::after { display: none; }
.eventos .h { display: block; color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px; background: var(--superficie-2); }
.acoes .espaco { flex: 1; }

.vazio-grande { text-align: center; padding: 44px 24px; }
.vazio-grande svg { width: 48px; height: 48px; color: var(--laranja); opacity: .9; }
.vazio-grande h2 { margin: 12px 0 4px; }

/* ------------------------------------------------ senha do painel */
.configuracao { margin-top: 28px; padding: 0; }
.configuracao summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 22px; font-weight: 600; }
.configuracao summary::-webkit-details-marker { display: none; }
.configuracao summary svg { color: var(--muted); }
.configuracao form { padding: 0 22px 20px; }

/* ------------------------------------------------ janela e avisos */
dialog.janela { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3); padding: 24px; width: calc(100% - 32px); max-width: 420px; }
dialog.janela h2 { margin-bottom: 18px; }
dialog.janela .linha-botoes { justify-content: flex-end; margin-top: 6px; }
dialog::backdrop { background: rgba(8, 12, 20, .55); backdrop-filter: blur(3px); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 50; max-width: calc(100% - 40px); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: 10px; padding: 12px 16px; box-shadow: var(--sombra-3); font-size: 14px; font-weight: 500; animation: entra .2s ease-out; max-width: 380px; }
.toast.ruim { border-left-color: var(--vermelho); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

/* ------------------------------------------------ navegação entre seções */
.navegacao { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.navegacao::-webkit-scrollbar { display: none; }
.nav { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 Inter, system-ui, sans-serif; padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.nav svg { width: 16px; height: 16px; }
.nav:hover { color: var(--texto); }
.nav.ativa { color: var(--texto); border-bottom-color: var(--laranja); }
.vista > .cartao + .cartao { margin-top: 18px; }

/* ------------------------------------------------ gráfico de peixes por dia */
.grafico-caixa { padding: 18px 22px 12px; border-bottom: 1px solid var(--borda); }
.grafico-topo, .teste-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grafico-topo h3, .teste-topo h3 { margin-bottom: 8px; }
.grafico-resumo, .teste-quando { font-size: 12.5px; }
.barras { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 150px; }
.coluna { display: flex; flex-direction: column; min-width: 0; }
.coluna-area { flex: 1; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--borda); padding-top: 18px; }
.coluna-barra { position: relative; width: 100%; max-width: 30px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ff9a5c, var(--laranja)); opacity: .82; transition: opacity .15s, filter .15s; }
.coluna.zero .coluna-barra { background: var(--borda-forte); opacity: .7; }
.coluna.hoje .coluna-barra, .coluna:hover .coluna-barra { opacity: 1; filter: saturate(1.15); }
.coluna-valor { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; }
.coluna:hover .coluna-valor, .coluna.hoje:not(.zero) .coluna-valor { opacity: 1; }
.coluna-dia { text-align: center; font-size: 11px; color: var(--fraco); margin-top: 6px; font-variant-numeric: tabular-nums; }
.coluna.hoje .coluna-dia { color: var(--laranja); font-weight: 600; }

/* ------------------------------------------------ teste de instalação */
.teste { padding: 16px 22px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.teste summary { cursor: pointer; list-style: none; }
.teste summary::-webkit-details-marker { display: none; }
.teste summary h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.teste summary h3::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.teste[open] summary h3::before { transform: rotate(45deg); }
.teste[open] summary { margin-bottom: 8px; }
.teste-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.teste-lista li { display: flex; gap: 8px; align-items: flex-start; }
.teste-lista svg { width: 17px; height: 17px; margin-top: 2px; }
.teste-lista .t-ok svg { color: var(--verde); }
.teste-lista .t-aviso svg { color: var(--ambar); }
.teste-lista .t-falha svg { color: var(--vermelho); }
.teste-lista .espera { color: var(--muted); }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: var(--laranja); animation: gira .8s linear infinite; flex: none; margin-top: 3px; }
@keyframes gira { to { transform: rotate(360deg); } }

.skill-meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: -1px; }
.skill-meta b { color: var(--texto); font-weight: 600; }
/* (09/10) proximo marco de passiva da skill */
.skill-passiva { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 1px; }
.skill-passiva b { color: var(--texto); font-weight: 600; }
.skill-marco { display: inline-block; font-weight: 700; color: #c11574; background: #fdf2fa; border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skill-marco { color: #faa7e0; background: rgba(238, 70, 188, .14); } }

/* ------------------------------------------------ escolha de modalidade */
.escolha { padding: 18px 22px; border-top: 1px solid var(--borda); background: linear-gradient(180deg, var(--laranja-suave), transparent 70%); }
.escolha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.escolha-topo h3 { margin-bottom: 2px; color: var(--texto); text-transform: none; letter-spacing: -.01em; font-size: 15px; }
.modalidades { display: flex; flex-direction: column; gap: 14px; }
.modalidade-grupo-titulo { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.modalidade-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.modalidade-cartao { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s, transform .1s; }
.modalidade-cartao:hover:not(:disabled) { border-color: var(--laranja); box-shadow: 0 0 0 4px var(--laranja-suave); }
.modalidade-cartao:active:not(:disabled) { transform: translateY(1px); }
.modalidade-cartao:disabled { cursor: not-allowed; opacity: .6; box-shadow: none; }
.modalidade-cartao.atual { border-color: var(--verde); }
.modalidade-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modalidade-topo strong { font-size: 14px; }
.modalidade-cartao > .enc-icone { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.modalidade-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.modalidade-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.conta.sem-modalidade .avisos, .conta.sem-modalidade .numeros, .conta.sem-modalidade .grafico-caixa, .conta.sem-modalidade .teste,
.conta.sem-modalidade .paineis, .conta.sem-modalidade .eventos, .conta.sem-modalidade .correio-bloco, .conta.sem-modalidade .abas-linha, .conta.sem-modalidade .chat-aba, .conta.sem-modalidade .mochila-aba, .conta.sem-modalidade .dano-aba,
.conta.sem-modalidade [data-acao=alternar], .conta.sem-modalidade [data-acao=guardar], .conta.sem-modalidade [data-acao=testar],
.conta.sem-modalidade [data-acao=config], .conta.sem-modalidade [data-acao=modalidade], .conta.sem-modalidade [data-acao=lixo] { display: none; }

/* ------------------------------------------------ administração */
.busca { max-width: 260px; }
.tabela-cartao { padding-bottom: 8px; }
.tabela-rolagem { overflow-x: auto; margin: 0 -22px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 22px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.tabela td { padding: 14px 22px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .dir { text-align: right; }
.tabela .email { font-weight: 600; }
.tabela .quando { color: var(--muted); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 12.5px; font-weight: 550; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cinza); }
.chip.ok i { background: var(--verde); }
.chip.alerta i { background: var(--ambar); }
.botoes-linha { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* conta do cliente na Administracao: clicar pausa ou liga o robo */
button.chip { font: inherit; font-size: 12.5px; font-weight: 550; color: inherit; cursor: pointer; }
button.chip:hover { border-color: var(--borda-forte); }
.chip.pausada { color: var(--muted); text-decoration: line-through; }
.trava-admin { max-width: 520px; }
.trava-admin h2 { margin-bottom: 6px; }
.trava-admin .muted { margin-bottom: 18px; }
.trava-admin input[name=codigo] { max-width: 180px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.faixa-admin { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border-radius: var(--raio-p); background: var(--superficie-2); border: 1px solid var(--borda); font-size: 14px; color: var(--muted); }
#admin-aberta > .cartao { margin-top: 18px; }
.senha-temp { font: 600 20px/1.3 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: var(--raio-p); padding: 14px; text-align: center; margin: 12px 0 8px; user-select: all; }

/* ------------------------------------------------ telas menores */
@media (max-width: 960px) {
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-marca { display: none; }
  .logo-movel { display: inline-flex; }
}
@media (max-width: 680px) {
  .conteudo { padding: 22px 16px 48px; }
  .barra-in { padding: 10px 16px; }
  .usuario-email { display: none; }
  .menu-email-seta { display: none; }
  .menu-email > summary { padding: 3px; }
  .barra-discord { padding: 6px 10px; }
  .barra-discord-mais { display: none; }
  .licenca-corpo { flex-basis: calc(100% - 64px); }
  .vagas-cab { flex-wrap: wrap; gap: 8px; }
  .vagas-cab .vagas-topo { flex-basis: 100%; }
  .grade2, .paineis { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conta-topo { flex-wrap: wrap; padding: 16px; }
  .painel, .eventos { padding-left: 16px; padding-right: 16px; }
  .avisos { padding-left: 16px; padding-right: 16px; }
  .licenca { flex-wrap: wrap; }
  .cabecalho .btn { width: 100%; }
  .interruptor { margin-top: 4px; }
  .grafico-caixa, .teste { padding-left: 16px; padding-right: 16px; }
  .barras { gap: 3px; height: 130px; }
  .coluna-dia { font-size: 10px; }
  .tabela-rolagem { margin: 0 -22px; }
  .busca { max-width: none; }
  .cartao-topo { flex-direction: column; }
  h1 { font-size: 23px; }
}

/* verificacao em duas etapas */
.passos-2fa { margin: 4px 0 12px 18px; padding: 0; display: grid; gap: 4px; }
.passos-2fa code { font-size: 13px; letter-spacing: .06em; word-break: break-all; }
.qr-2fa { width: 196px; height: 196px; padding: 10px; background: #fff; border-radius: var(--raio-p); margin-bottom: 14px; }
.qr-2fa svg { width: 100%; height: 100%; display: block; }
.codigos-2fa { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.codigos-2fa li { font: 600 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; padding: 10px; border-radius: var(--raio-p); background: var(--superficie-2, rgba(127,127,127,.12)); text-align: center; }
/* Encantador: janela de encantamentos e a lista de pecas do cartao */
dialog.janela.janela-enc { max-width: 860px; }
.enc-legenda { margin: 0 0 14px; font-size: 13px; }
.enc-icone { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.enc-icone img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-user-drag: none; }
.enc-icone.brilho::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--glint); background-size: 64px 64px;
  opacity: .8; mix-blend-mode: screen; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  animation: enc-brilho 5s linear infinite; }
@keyframes enc-brilho { from { background-position: 0 0; } to { background-position: 64px 32px; } }
@media (prefers-reduced-motion: reduce) { .enc-icone.brilho::after { animation: none; } }
.enc-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 10px; }
.enc-tipo { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--superficie-2); color: var(--texto); font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.enc-tipo .enc-icone { width: 36px; height: 36px; }
.enc-tipo:hover { border-color: var(--borda-forte); }
.enc-tipo.sel { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; background: var(--laranja-suave); }
.enc-qtd { position: absolute; top: 4px; left: 6px; font-size: 10.5px; font-weight: 800; color: var(--ambar-texto); }
.enc-pct { position: absolute; top: 4px; right: 6px; font-size: 10.5px; font-weight: 700; color: var(--verde-texto); font-variant-numeric: tabular-nums; }
.enc-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.btn.btn-p { padding: 6px 10px; font-size: 12.5px; }
.enc-editor-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.enc-editor-topo .enc-icone { width: 40px; height: 40px; }
.enc-editor-topo h3 { margin: 0; font-size: 16px; }
.enc-fab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--laranja-borda);
  border-radius: 10px; background: var(--laranja-suave); font-size: 13.5px; }
.enc-fab .enc-icone { width: 22px; height: 22px; }
.enc-fab input { width: 70px; }
.enc-fab.enc-sem-fim input, .enc-fab.enc-exato input { width: auto; margin: 0; }
.enc-fab input:disabled { opacity: .45; }
.enc-fab small { flex-basis: 100%; }
/* 26/10: material da peca fabricada (enc_material) */
.enc-materiais { gap: 6px; }
.enc-material { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.enc-material:hover { border-color: var(--borda-forte); }
.enc-material.sel { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; background: var(--laranja-suave); }
.enc-material .enc-icone { width: 20px; height: 20px; }
.enc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.enc-card { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--superficie); cursor: pointer; user-select: none; }
.enc-card:hover { border-color: var(--borda-forte); }
.enc-card.on { border-color: #8b5cf6; background: rgba(139, 92, 246, .08); }
.enc-card.bloq { opacity: .45; cursor: not-allowed; }
.enc-card-meio b { display: block; font-size: 13.5px; }
.enc-card.on .enc-card-meio b { color: #7c3aed; }
.enc-card-meio small { color: var(--muted); font-size: 11.5px; }
.enc-estrela { border: 0; background: none; font-size: 19px; line-height: 1; color: var(--borda-forte); cursor: pointer; padding: 0 2px; }
.enc-card.on .enc-estrela { color: var(--fraco); }
.enc-card .enc-estrela.pri { color: #f5b301; text-shadow: 0 0 6px rgba(245, 179, 1, .45); }
.enc-niveis { grid-column: 2 / 4; display: flex; gap: 4px; }
.enc-niveis button { min-width: 32px; padding: 2px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie-2); color: var(--texto);
  font: 600 12px/1.4 Georgia, serif; cursor: pointer; }
.enc-niveis button.sel { border-color: #8b5cf6; color: #7c3aed; background: rgba(139, 92, 246, .1); }
.enc-niveis button.nao { text-decoration: line-through; color: var(--fraco); }
.enc-resultado { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 14px; }
@media (max-width: 560px) { .enc-resultado { grid-template-columns: 1fr; } }
/* a caixa de dica do proprio jogo: fundo quase preto e borda roxa em degrade */
.enc-mc { min-width: 220px; padding: 8px 10px; background: #100010f0; border: 2px solid; border-image: linear-gradient(#5000ff, #28007f) 1;
  font: 13px/1.5 Consolas, 'Courier New', monospace; color: #a8a8a8; }
.enc-mc-nome { color: #55ffff; }
.enc-mc-pri { color: #ffd84d; }
.enc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.enc-num { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); }
.enc-num b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.enc-num small { color: var(--muted); font-size: 11.5px; }
.enc-aviso { margin: 10px 0 0; color: var(--ambar-texto); font-size: 13px; }
.enc-peca { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.enc-peca:first-child { border-top: 0; }
.enc-peca-texto b { display: block; font-size: 13.5px; }
.enc-peca-texto span { color: var(--muted); font-size: 12.5px; }
.enc-peca.perfeita .enc-peca-texto b { color: var(--verde-texto); }
.enc-peca.parcial .enc-peca-texto b { color: var(--ambar-texto); }
.enc-peca-h { color: var(--fraco); font-size: 12px; white-space: nowrap; }
/* token da macro do PC (27/09): o token e longo, quebra em qualquer ponto */
.token-macro { display: inline-block; max-width: 100%; font-size: 13px; line-height: 1.5; word-break: break-all; user-select: all; }
.bots-macro { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bots-macro:empty { display: none; }
.bots-macro li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); }

/* Minerar Quartzo (28/09): o que o robo faz agora, e o kit com o estoque */
.qz-agora { margin: 18px 22px 0; padding: 14px 16px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-2); }
.qz-agora.ok { border-color: color-mix(in srgb, var(--verde) 35%, var(--borda)); background: var(--verde-suave); }
.qz-agora.alerta { border-color: var(--ambar-borda); background: var(--ambar-suave); }
.qz-agora.ruim { border-color: color-mix(in srgb, var(--vermelho) 40%, var(--borda)); background: var(--vermelho-suave); }
.qz-agora-titulo { font-size: 15.5px; }
.qz-agora-titulo .muted { font-size: 13px; font-variant-numeric: tabular-nums; }
.qz-parado { margin: 8px 0 0; font-size: 14px; color: var(--vermelho-texto); font-weight: 600; }
.qz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz-chip.ruim { border-color: var(--vermelho); color: var(--vermelho-texto); }
.qz-chip .qz-mini { width: 44px; margin-left: 4px; }
.trilho.qz-mini { height: 4px; }
.qz-estoque { padding: 16px 22px 18px; border-bottom: 1px solid var(--borda); }
.qz-estoque-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.qz-estoque-topo h3 { margin: 0; font-size: 15px; }
.qz-estoque-topo .muted { font-size: 12.5px; flex: 1; min-width: 200px; }
.qz-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qz-item { display: grid; grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); min-width: 0; }
.qz-item.alerta { border-color: var(--ambar-borda); }
.qz-item.ruim { border-color: var(--vermelho); background: var(--vermelho-suave); }
.qz-item .enc-icone { width: 28px; height: 28px; }
.qz-item-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.qz-item-nome b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.qz-item-nome .muted { font-size: 12px; }
.qz-item-valor { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 0; }
.qz-item-valor b { font-size: 15px; }
.qz-item-valor .qz-mini { margin-top: 4px; }
.qz-item.alerta .qz-item-valor b { color: var(--ambar-texto); }
.qz-item.ruim .qz-item-valor b { color: var(--vermelho-texto); }
.qz-item .pilula { font-size: 11.5px; padding: 3px 8px; }
.eventos .vezes { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.contas.lado .qz-grade { grid-template-columns: 1fr; }
@media (max-width: 900px) { .qz-grade { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .qz-agora { margin: 14px 16px 0; }
  .qz-estoque { padding-left: 16px; padding-right: 16px; }
  .qz-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .qz-item .pilula { grid-column: 2 / -1; justify-self: start; white-space: normal; }
}

/* ------------------------------------------------ downloads (29/09/2026) */
.downloads { display: grid; gap: 18px; max-width: 760px; }
.download-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.download-icone { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--laranja-suave); border: 1px solid var(--laranja-borda); color: var(--laranja); }
.download-icone svg { width: 24px; height: 24px; }
.download-id h2 { margin: 0; }
.download-resumo { margin: 0 0 16px; font-size: 14.5px; }
.download-opcoes { display: grid; gap: 10px; margin-bottom: 16px; }
.download-opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); }
.download-opcao > div { display: grid; gap: 3px; min-width: 0; }
.download-opcao strong { font-size: 14.5px; }
.download-opcao .muted { font-size: 13px; }
.download-opcao .btn { flex: none; text-decoration: none; }
.download-opcao .btn.desligado { opacity: .45; pointer-events: none; }
.download-opcao.trancada { background: var(--superficie-2); border-style: dashed; }
.download-opcao.trancada strong { color: var(--muted); }
.download-trava { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.download-trava svg { width: 16px; height: 16px; }
.download .dica { margin: 0; }
@media (max-width: 700px) {
  .download-opcao { flex-direction: column; align-items: stretch; }
  .download-opcao .btn { justify-content: center; }
  .download-trava { justify-content: center; }
}

/* ------------------------------------------------ mapa da Caca de Spawners (02/10/2026) */
.conteudo.mapa-aberto { max-width: 1600px; }
.mapa-casca { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.mapa-area { position: sticky; top: 16px; height: calc(100vh - 210px); min-height: 460px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); box-shadow: var(--sombra-2); }
#mapa-tela { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#mapa-tela.arrastando { cursor: grabbing; }
#mapa-tela.apontando { cursor: pointer; }
.mapa-coords { position: absolute; left: 10px; bottom: 34px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 3px 9px; font: 500 12px/1.4 ui-monospace, Consolas, monospace; color: var(--muted); pointer-events: none; }
.mapa-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapa-zoom .btn { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 18px; }
.mapa-rodape { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 12px; color: var(--muted); background: var(--superficie); border-top: 1px solid var(--borda); }
.mapa-menu { position: absolute; z-index: 5; min-width: 220px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra-3); padding: 6px; display: flex; flex-direction: column; }
.mapa-menu-tit { font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: var(--muted); padding: 4px 8px 6px; }
.mapa-menu-item { text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px; font: inherit; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.mapa-menu-item:hover, .mapa-menu-item:focus-visible { background: var(--laranja-suave); outline: none; }
.mapa-lado { display: flex; flex-direction: column; gap: 14px; }
.mapa-sec { padding: 16px; }
.mapa-sec h3 { margin-bottom: 10px; }
.mapa-sec-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mapa-sec-topo h3 { margin: 0; }
.mapa-sub { margin-top: 14px; }
.mapa-contas { display: flex; flex-direction: column; gap: 4px; }
.mapa-conta { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: var(--raio-p); border: 1px solid transparent; }
.mapa-conta:hover { background: var(--superficie-2); }
.mapa-conta.fora { opacity: .55; }
.mapa-conta input { margin-top: 4px; accent-color: var(--laranja); width: 16px; height: 16px; }
.mapa-cor { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; display: inline-block; }
.mapa-conta-info { display: flex; flex-direction: column; min-width: 0; }
.mapa-conta-info b { font-size: 14px; }
.mapa-conta-info small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.mapa-conta-acoes { display: flex; gap: 2px; }
.mapa-conta-acoes .ativo { color: var(--laranja); }
.mapa-xyz { font-family: ui-monospace, Consolas, monospace; font-size: 12px !important; color: var(--muted); }
.mapa-ped { color: var(--cinza-texto) !important; }
.mapa-qtd { font-size: 12.5px; margin: 8px 0; }
.mapa-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mapa-linha { display: flex; gap: 6px; margin-bottom: 8px; }
.mapa-linha input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13.5px; }
.mapa-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 6px 0; cursor: pointer; }
.mapa-chk input { accent-color: var(--laranja); width: 16px; height: 16px; }
.mapa-chk select { padding: 4px 6px; border: 1px solid var(--borda-forte); border-radius: 7px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.mapa-sethome-op { margin: 0 0 8px 24px; }
.mapa-sethome-op select { padding: 6px 8px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.mapa-dica { font-size: 12px; margin: 0; }
.mapa-trapconta { white-space: nowrap; }
#mapa-minfarm { width: 76px; }
.mapa-trapconta select { flex: 1; min-width: 0; }
.mapa-rota { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.mapa-rota .muted { font-size: 12.5px; }
.mapa-parada { display: flex; align-items: center; gap: 8px; }
.mapa-parada .mapa-xyz { flex: 1; }
.mapa-parada-n { width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); color: var(--sobre-laranja); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mapa-bussola { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mapa-dir { flex-direction: column; gap: 0; padding: 6px 0; justify-content: center; font-size: 17px; line-height: 1.1; }
.mapa-dir small { font-size: 10.5px; color: var(--muted); }
.mapa-detalhe h4 { margin: 0 0 8px; font-size: 15px; }
.mapa-detalhe .muted { font-size: 13px; }
.mapa-dl { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.mapa-dl span { color: var(--muted); }
.mapa-dl b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.mapa-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mapa-marca.ativa { border-color: currentColor; }
.mapa-marca.ativa.visitei { color: #2e90fa; }
.mapa-marca.ativa.trap { color: var(--verde-texto); background: var(--verde-suave); }
.mapa-marca.ativa.pego { color: var(--vermelho-texto); background: var(--vermelho-suave); }
.mapa-marca.ativa.oculto { color: var(--cinza-texto); background: var(--cinza-suave); }
.mapa-traps { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.mapa-trap { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; text-align: left; background: none; border: 0; border-radius: var(--raio-p); padding: 7px 8px; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.mapa-trap:hover, .mapa-trap:focus-visible { background: var(--superficie-2); outline: none; }
.mapa-trap-n { grid-row: span 2; font-size: 16px; font-variant-numeric: tabular-nums; }
.mapa-trap-n.nf, .lg.nf { color: var(--verde-texto); }
.mapa-trap-n.cf, .lg.cf { color: #9e77ed; }
.mapa-trap-n.teo, .lg.teo { color: var(--ambar-texto); }
.mapa-trap .mapa-xyz { grid-column: 2; }
.mapa-sit { grid-column: 3; grid-row: 1; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--cinza-suave); color: var(--cinza-texto); white-space: nowrap; }
.mapa-sit.trap { background: var(--verde-suave); color: var(--verde-texto); }
.mapa-sit.pego { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.mapa-camadas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mapa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-size: 12px; cursor: pointer; }
.mapa-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mapa-chip.off { opacity: .45; text-decoration: line-through; }
.mapa-legenda { font-size: 12px; margin-top: 12px; line-height: 1.7; }
.mapa-topo-legenda { margin: 4px 0 6px; }
.mapa-chip-fixo { cursor: default; }
.mapa-chip-fixo i { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.mapa-topo-ajuda { font-size: 12px; margin: 2px 0 8px; }
@media (max-width: 1000px) {
  .mapa-casca { grid-template-columns: 1fr; }
  .mapa-area { position: relative; top: 0; height: 62vh; min-height: 340px; }
  .mapa-camadas { grid-template-columns: 1fr; }
}
/* o "x" entre numeros vira "x" de multiplicacao no Inter (calt): nome de home tem que sair como se digita */
.mapa-lado, .mapa-menu { font-feature-settings: "calt" 0, "cv11", "ss01"; }

/* chat da conta (05/10/2026) */
dialog.janela.janela-chat { max-width: 760px; }
dialog.janela.janela-chat h2 { margin-bottom: 6px; }
.chat-situacao { margin: 0 0 12px; font-size: 13px; }
.chat-situacao.chat-parado { color: var(--ambar-texto); }
/* 16/10: fundo escuro como o do jogo nos dois temas (as cores do /cores somem no claro) */
.chat-log { height: min(52vh, 460px); overflow-y: auto; border: 1px solid #262c38; border-radius: var(--raio-p); background: #0d1017; color: #fff; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; color-scheme: dark; overscroll-behavior: contain; }
.chat-log .vazio { color: #8a92a0; margin: 0; }
.chat-linha { display: flex; gap: 10px; }
.chat-linha .h { flex: none; color: #6f7785; }
.chat-linha .t { min-width: 0; white-space: pre-wrap; }
.chat-srv .t { text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
.chat-eu .t { color: #ffb35a; font-weight: 600; }
.chat-falhou .t { color: #ff6b6b; }
.chat-robo .t { color: #8f98a6; font-style: italic; }
/* cores e formatos do jogo (§0..§f, §k..§o), a mesma paleta do Minecraft */
.mc-0 { color: #000; text-shadow: 0 0 2px rgba(255, 255, 255, .55); }
.mc-1 { color: #00a; }
.mc-2 { color: #0a0; }
.mc-3 { color: #0aa; }
.mc-4 { color: #a00; }
.mc-5 { color: #a0a; }
.mc-6 { color: #fa0; }
.mc-7 { color: #aaa; }
.mc-8 { color: #555; }
.mc-9 { color: #55f; }
.mc-a { color: #5f5; }
.mc-b { color: #5ff; }
.mc-c { color: #f55; }
.mc-d { color: #f5f; }
.mc-e { color: #ff5; }
.mc-f { color: #fff; }
.mc-l { font-weight: 700; }
.mc-o { font-style: italic; }
.mc-n { text-decoration: underline; }
.mc-m { text-decoration: line-through; }
.mc-n.mc-m { text-decoration: underline line-through; }
.mc-k { display: inline-block; filter: blur(2.5px); }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-dica { font-size: 12px; margin: 6px 0 0; }
.interruptor.chat-robo { margin: 14px 0 8px; font-size: 13px; }
/* Janela Configurar (05/10/2026): abas com icone do jogo, como Encantamentos e Jogar fora */
dialog.janela.janela-cfg { max-width: 900px; }
.cfg-legenda { margin: 0 0 14px; font-size: 13px; }
/* (09/10) explicacoes atras do "?" */
.cfg-legenda-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-legenda-linha .cfg-legenda { margin: 0; flex: 1 1 320px; }
.cfg-explicacoes { font-size: 13px; white-space: nowrap; flex: none; }
.ajuda-bt { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--muted); font: 700 11px/1 Inter, system-ui, sans-serif; cursor: pointer; vertical-align: 1px; }
.ajuda-bt:hover, .ajuda-bt[aria-expanded="true"] { color: var(--laranja-forte); border-color: var(--laranja-borda); background: var(--laranja-suave); }
.ajuda-bt:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.janela-cfg:not(.com-ajuda) .cfg-grade .ajuda:not(.aberta) { display: none; }
.janela-cfg.com-ajuda .ajuda-bt { display: none; }
.cfg-abas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cfg-aba { padding-top: 16px; }
.cfg-aba .enc-tipo-nome { text-align: center; }
.cfg-passo { position: absolute; top: 5px; left: 7px; font-size: 10.5px; font-weight: 700; color: var(--fraco); }
.cfg-aba.sel .cfg-passo { color: var(--laranja); }
.cfg-aba.falta:not(.sel) { border-color: var(--vermelho); }
.cfg-badge { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 700; }
.cfg-badge.ruim { color: var(--vermelho-texto); }
.cfg-painel { padding: 14px; margin-bottom: 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.cfg-topo { align-items: flex-start; }
.cfg-topo h3 { text-transform: none; letter-spacing: normal; color: var(--texto); font-size: 17px; }
.cfg-topo small { display: block; margin-top: 3px; font-size: 12.5px; }
.cfg-topo .pilula { margin-left: auto; }
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; align-items: start; }
.cfg-grade > [hidden] { display: none; }
.cfg-rotulo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.cfg-rotulo .enc-icone { width: 22px; height: 22px; }
.cfg-opcional { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--fraco); text-transform: uppercase; letter-spacing: .04em; }
.cfg-campo, .cfg-home, .cfg-escolha { margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); }
.cfg-campo > span.cfg-rotulo { display: flex; margin-bottom: 6px; }
.cfg-home-linha { display: flex; align-items: stretch; }
.cfg-prefixo { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--borda-forte); border-right: 0; border-radius: var(--raio-p) 0 0 var(--raio-p);
  background: var(--superficie-2); color: var(--muted); font: 500 13px ui-monospace, Consolas, monospace; }
.cfg-home-linha input { flex: 1; min-width: 0; border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.cfg-home small.ajuda, .cfg-escolha small.ajuda { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.cfg-sethome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.cfg-copiar { border: 0; background: none; color: var(--laranja); font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; padding: 2px 4px; }
.cfg-copiar:hover { text-decoration: underline; }
.cfg-erro { color: var(--vermelho-texto); font-weight: 600; }
.cfg-toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--superficie); cursor: pointer; user-select: none; }
.cfg-toggle:not(:has(.enc-icone)) { grid-template-columns: 1fr auto; }
.cfg-toggle .enc-icone { width: 28px; height: 28px; align-self: start; }
.cfg-toggle:hover { border-color: var(--borda-forte); }
.cfg-toggle.on { border-color: var(--laranja); background: var(--laranja-suave); }
.cfg-toggle-txt b { display: block; font-size: 13.5px; }
.cfg-toggle-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.cfg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-toggle i { width: 38px; height: 22px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .2s; }
.cfg-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.cfg-toggle input:checked + i { background: var(--laranja); }
.cfg-toggle input:checked + i::after { transform: translateX(16px); }
.cfg-toggle input:focus-visible + i { box-shadow: 0 0 0 4px var(--laranja-suave); }
.cfg-escolha.larga { grid-column: 1 / -1; }
/* 27/10: caixa de selecao para listas longas (c.lista, a conta que da a permissao no Criar Contas VIP) */
.cfg-escolha select.cfg-lista { box-sizing: border-box; max-width: 420px; margin-top: 8px; }
.cfg-nota ul { margin: 4px 0 0; padding-left: 18px; }
.cfg-nota li + li { margin-top: 4px; }
.cfg-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px; }
.cfg-opcao { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); color: var(--texto); text-align: left;
  font: 500 13px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.cfg-opcao:hover { border-color: var(--borda-forte); }
.cfg-opcao.sel { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; background: var(--laranja-suave); font-weight: 650; }
.cfg-opcao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.cfg-opcao[hidden] { display: none; }
/* (20/10) Fazer Poções: opção com o ícone do item e o material embaixo; opções em grupos com título */
.cfg-opcao.com-icone { display: flex; align-items: center; gap: 10px; }
.cfg-opcao.com-icone .enc-icone { width: 28px; height: 28px; }
.cfg-opcao-txt { display: flex; flex-direction: column; min-width: 0; }
.cfg-opcao-txt small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.cfg-opcoes.com-grupos { display: flex; flex-direction: column; gap: 10px; }
.cfg-opcoes-grupo { display: flex; flex-direction: column; gap: 6px; }
.cfg-filtro-nota { display: block; margin-top: 6px; font-size: 12.5px; }
.cfg-filtro-nota:empty { display: none; }
/* (20/10) a receita ao vivo: os passos com ícone e seta; borda laranja = vem do MKB dos ingredientes */
.cfg-receita { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.cfg-receita-passo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; max-width: 110px; padding: 8px 6px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); text-align: center; }
.cfg-receita-passo small { font-size: 11.5px; line-height: 1.25; color: var(--texto); }
.cfg-receita-passo.do-mkb { border-color: var(--laranja); }
.cfg-receita-passo.fim { border-color: var(--verde, #12b76a); background: var(--verde-suave, rgba(18, 183, 106, .1)); }
.cfg-receita-passo.fim small { font-weight: 650; }
.cfg-receita-seta { color: var(--muted); font-size: 18px; font-weight: 700; }
.cfg-receita-mkb { margin: 8px 0 0; font-size: 12.5px; }
.cfg-conferir .janela-secao:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cfg-pendencias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--vermelho);
  border-radius: 10px; background: var(--vermelho-suave); color: var(--vermelho-texto); font-size: 13px; }
.cfg-pendencias b { flex-basis: 100%; }
.cfg-lista-homes { display: grid; gap: 6px; }
/* Vender do MKB (11/10): onde cada item e vendido, na aba Conferir */
.cfg-lista-venda { max-height: 320px; overflow-y: auto; gap: 4px; }
.cfg-lista-venda .cfg-home-item { grid-template-columns: 1fr; padding: 6px 10px; }
.cfg-lista-venda .vd-nao { opacity: .55; }
.cfg-campo textarea { width: 100%; box-sizing: border-box; min-height: 110px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.cfg-busca { width: 100%; margin: 4px 0 8px; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); }
.cfg-home-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--superficie); }
.cfg-home-item .enc-icone { width: 28px; height: 28px; }
.cfg-home-item small { display: block; margin-top: 3px; font-size: 12px; }
.cfg-home-item code { font-size: 13.5px; }
.cfg-mc { max-width: 520px; }
.cfg-mc-sim { color: #55ff55; }
.cfg-mc-nao { color: #777; }
.cfg-botoes { flex-wrap: wrap; gap: 8px; }
.cfg-espaco { flex: 1; }
@media (max-width: 560px) {
  .cfg-abas { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .cfg-painel { padding: 10px; }
  .cfg-botoes .cfg-espaco { display: none; }
}
/* menu "Mais" do cartao (05/10): Trocar modalidade, Nick e senha e Remover */
.mais-menu { position: relative; }
.mais-menu > summary { list-style: none; gap: 6px; }
.mais-menu > summary::-webkit-details-marker { display: none; }
.mais-menu > summary span { font-size: 11px; }
.mais-menu[open] > summary { background: var(--superficie-2); color: var(--texto); }
.mais-lista { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--borda);
  border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-3); }
.mais-lista .btn { justify-content: flex-start; }
.kpi-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.modalidade-extra { font-size: 11.5px; font-weight: 600; color: var(--laranja-forte); }
.cfg-sobre { margin: -8px 0 10px; padding: 10px 12px; border-left: 3px solid var(--laranja); border-radius: 0 8px 8px 0; background: var(--laranja-suave); font-size: 13px; line-height: 1.5; }

/* (07/10) Novidades (changelog) */
.nav { position: relative; }
.nav-ponto { position: absolute; top: 6px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 2px var(--fundo); }
.novidades-acoes { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.novidades { max-width: 820px; }
.nov-mes { font-size: 13px; text-transform: none; color: var(--muted); font-weight: 650; margin: 22px 0 10px; }
.nov-mes:first-child { margin-top: 0; }
.nov-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--sombra-1); }
.nov-item.nao-vista { border-left: 3px solid var(--laranja); }
.nov-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.nov-tipo, .nov-mod { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.nov-novo { background: var(--laranja-suave); color: var(--laranja-forte); }
.nov-melhoria { background: var(--verde-suave); color: var(--verde-texto); }
.nov-correcao { background: var(--cinza-suave); color: var(--cinza-texto); }
.nov-mod { background: var(--superficie-2); color: var(--cinza-texto); font-weight: 600; }
.nov-data { font-size: 12px; color: var(--muted); margin-left: auto; }
.nov-nova { font-size: 11px; font-weight: 700; color: var(--laranja); }
.nov-titulo { font-size: 15.5px; margin: 2px 0 6px; }
.nov-texto { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--texto); }
.nov-lista { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.nov-lista li { margin: 3px 0; }
/* (30/10/2026) imagem na novidade: [imagem:arquivo.jpg] no texto */
.nov-figura { margin: 10px 0 4px; }
.nov-figura a { display: block; }
.nov-figura img { display: block; width: 100%; max-width: 720px; height: auto; border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra-1); }
.nov-figura figcaption { margin-top: 5px; font-size: 12.5px; color: var(--cinza-texto); }
.nov-admin { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }
.campo textarea { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); resize: vertical; min-height: 140px; }

/* (08/10) Janela de novidades ao entrar */
dialog.janela.janela-nov { max-width: 580px; padding: 0; overflow: hidden; display: flex; flex-direction: column; animation: jn-entra .32s cubic-bezier(.2, .9, .3, 1.15); }
dialog.janela.janela-nov:not([open]) { display: none; }
@keyframes jn-entra { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.jn-topo { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 56px 22px 22px; color: var(--sobre-laranja); background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-forte) 100%); overflow: hidden; isolation: isolate; }
.jn-topo::before, .jn-topo::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .14); z-index: -1; }
.jn-topo::before { width: 190px; height: 190px; right: -60px; top: -90px; }
.jn-topo::after { width: 110px; height: 110px; right: 70px; bottom: -70px; background: rgba(255, 255, 255, .09); }
.jn-marca { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 6px 16px -6px rgba(0, 0, 0, .35); }
.jn-marca svg { width: 30px; height: 30px; color: var(--sobre-laranja); }
.jn-tit { min-width: 0; }
.jn-sobre { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
dialog.janela.janela-nov .jn-tit h2 { margin: 2px 0 2px; font-size: 21px; font-weight: 750; letter-spacing: -.02em; color: inherit; }
.jn-tit p { font-size: 14px; opacity: .9; }
.jn-fechar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .16); color: inherit; cursor: pointer; transition: background .15s; }
.jn-fechar:hover { background: rgba(255, 255, 255, .3); }
.jn-fechar svg { width: 16px; height: 16px; }

.jn-corpo { padding: 8px 22px 6px; overflow-y: auto; max-height: min(58vh, 520px); overscroll-behavior: contain; }
.jn-dia { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 14px 0 8px; background: var(--superficie); font-size: 13px; }
.jn-dia strong { font-weight: 700; color: var(--texto); }
.jn-dia span { color: var(--muted); text-transform: capitalize; }
.jn-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 4px 0 16px; animation: jn-item .4s ease-out backwards; animation-delay: calc(80ms + var(--i, 0) * 60ms); }
@keyframes jn-item { from { transform: translateX(-6px); opacity: 0; } }
.jn-item::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--borda); border-radius: 2px; }
.jn-item:last-child::before, .jn-item:has(+ .jn-dia)::before, .jn-item:has(+ .jn-mais)::before { display: none; }
.jn-ponto { position: relative; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--laranja-suave); box-shadow: inset 0 0 0 2px var(--laranja-borda); }
.jn-ponto::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--laranja); }
.jn-melhoria .jn-ponto { background: var(--verde-suave); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--verde) 35%, transparent); }
.jn-melhoria .jn-ponto::after { background: var(--verde); }
.jn-correcao .jn-ponto { background: var(--cinza-suave); box-shadow: inset 0 0 0 2px var(--borda-forte); }
.jn-correcao .jn-ponto::after { background: var(--cinza); }
.jn-txt { min-width: 0; }
.jn-txt .nov-cab { margin-bottom: 4px; }
.jn-item-titulo { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; line-height: 1.35; color: var(--texto); text-transform: none; letter-spacing: -.01em; }
.jn-txt .nov-texto, .jn-txt .nov-lista { font-size: 14px; color: var(--cinza-texto); }
.jn-mais { margin: 0 0 12px 32px; font-size: 13px; font-weight: 600; color: var(--laranja-forte); }
.jn-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--borda); background: var(--superficie-2); }
@media (max-width: 560px) {
  dialog.janela.janela-nov { width: calc(100% - 20px); }
  .jn-topo { padding: 18px 50px 18px 16px; gap: 12px; }
  .jn-marca { width: 42px; height: 42px; border-radius: 12px; }
  .jn-marca svg { width: 25px; height: 25px; }
  dialog.janela.janela-nov .jn-tit h2 { font-size: 18px; }
  .jn-corpo { padding: 6px 16px 4px; max-height: 62vh; }
  .jn-rodape { padding: 12px 16px; }
  .jn-rodape .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { dialog.janela.janela-nov, .jn-item { animation: none; } }

/* Ilustracao das homes na janela Configurar (07/10/2026): cenario em <img> + SVG das homes por cima */
.ilu { margin: 0 0 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.ilu > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.ilu > summary::-webkit-details-marker { display: none; }
.ilu > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.ilu:not([open]) > summary::after { content: '▸'; }
.ilu-corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; padding: 0 12px 12px; align-items: start; }
.ilu-quadro { position: relative; aspect-ratio: 860 / 800; border-radius: 10px; overflow: hidden; background: #a9d1ff; }
.ilu-cena, .ilu-cima, .ilu-cima > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ilu-lado { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ilu-resumo { padding: 10px 12px; border-radius: 10px; }
.ilu-resumo b { display: block; font-size: 14px; }
.ilu-resumo small { color: var(--muted); font-size: 12px; }
.ilu-resumo.bom { background: var(--verde-suave); }
.ilu-resumo.bom b { color: var(--verde-texto); }
.ilu-resumo.ruim { background: var(--vermelho-suave); }
.ilu-resumo.ruim b { color: var(--vermelho-texto); }
.ilu-home { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1.5px solid var(--borda-forte); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.ilu-home:hover { background: var(--superficie-2); }
.ilu-home.ok { border-color: var(--verde); }
.ilu-home.falta { border-color: var(--vermelho); }
.ilu-home.opcional { border-style: dashed; }
.ilu-marca { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; }
.ilu-home.ok .ilu-marca { background: var(--verde); color: #fff; }
.ilu-home.ok .ilu-marca::before { content: '✓'; }
.ilu-home.falta .ilu-marca { background: var(--vermelho); color: #fff; }
.ilu-home.falta .ilu-marca::before { content: '!'; }
.ilu-home.opcional .ilu-marca { border: 2px dashed var(--cinza); }
.ilu-home-txt { display: flex; flex-direction: column; min-width: 0; }
.ilu-home-txt b { font-size: 13.5px; }
.ilu-home-txt small, .ilu-home-txt code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ilu-home.ok .ilu-home-txt code { color: var(--verde-texto); }
.ilu-home.falta .ilu-home-txt small { color: var(--vermelho-texto); }
.ilu-dicas-tit { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ilu-dica { font-size: 13px; }
.ilu-dica b { display: block; }
.ilu-dica small { color: var(--muted); }
@media (max-width: 720px) {
  .ilu-corpo { grid-template-columns: 1fr; }
}

/* Ilustracao numerada (Pesca, 07/10/2026) e home de opcao desligada */
.ilu-home.num .ilu-marca::before { content: none; }
.ilu-home.num .ilu-marca { font-size: 12.5px; }
.ilu-home.opcional.num .ilu-marca, .ilu-home.off .ilu-marca { color: var(--muted); }
.ilu-home.off { border-style: dashed; opacity: .6; }
.ilu-home.off .ilu-marca { border: 2px dashed var(--borda-forte); }

/* (07/10, pedido do usuario) "Suas vagas": o tempo numa linha so ("9 dias · ate 16/10") e a barrinha
   como faixa fina embaixo da linha inteira; antes a data descia para baixo dos dias e quebrava o layout */
.vaga-linha { position: relative; grid-template-columns: 22px minmax(0, 1fr) 10px auto; padding-bottom: 11px; }
.vaga-tempo { flex-direction: row; align-items: baseline; gap: 6px; }
.vaga-tempo small::before { content: '· '; }
.vaga-barra { position: absolute; left: 38px; right: 10px; bottom: 5px; height: 3px; }

/* Aba "Homes" (08/10/2026, pedido do usuario: a janela das homes estava grande e suja). O desenho e a
   propria tela: ao lado, uma linha por home (numero do desenho + nome + campo); so a home em edicao
   abre a ajuda e o /sethome, e o alfinete dela fica em destaque no desenho. */
.ilu { margin: 0; border: 0; background: none; overflow: visible; }
.ilu-corpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 0; gap: 14px; }
.ilu-quadro { position: sticky; top: 0; }
.ilu-cima .ilu-v { cursor: pointer; }
.ilu-cima .ilu-v.ativo { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #f26b1d); }
.ilu-lado { gap: 10px; }
.ilu-resumo { padding: 8px 12px; }
.ilu-resumo b { display: inline; font-size: 13.5px; margin-right: 6px; }
.ilu-lista { display: flex; flex-direction: column; gap: 6px; }
.cfg-home.ilu-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: 8px;
  padding: 6px 8px; border: 1.5px solid var(--borda-forte); cursor: pointer; }
.ilu-linha .cfg-rotulo { margin: 0; gap: 7px; font-size: 13px; min-width: 0; cursor: pointer; }
.ilu-linha .cfg-rotulo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilu-linha .cfg-rotulo .enc-icone, .ilu-linha .cfg-opcional { display: none; }
.ilu-linha .cfg-prefixo { padding: 0 7px; font-size: 12px; }
.ilu-linha .cfg-home-linha input { padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; }
.ilu-linha small.ajuda, .ilu-linha .cfg-sethome { grid-column: 1 / -1; }
.ilu-linha:not(.ativa) small.ajuda, .ilu-linha:not(.ativa) .cfg-sethome { display: none; }
.ilu-linha.ativa { box-shadow: 0 0 0 3px rgba(242, 107, 29, .22); border-color: #f26b1d; }
.ilu-linha.ok { border-color: var(--verde); }
.ilu-linha.falta { border-color: var(--vermelho); }
.ilu-linha.opcional { border-style: dashed; }
.ilu-linha.ativa.ok, .ilu-linha.ativa.falta { border-style: solid; }
.ilu-linha .ilu-marca { width: 22px; height: 22px; font-size: 12.5px; }
.ilu-linha.ok .ilu-marca { background: var(--verde); color: #fff; }
.ilu-linha.falta .ilu-marca { background: var(--vermelho); color: #fff; }
.ilu-linha.opcional .ilu-marca { border: 2px dashed var(--cinza); color: var(--muted); }
.ilu-linha:not(.num).ok .ilu-marca::before { content: '✓'; }
.ilu-linha:not(.num).falta .ilu-marca::before { content: '!'; }
.ilu-dicas { font-size: 13px; }
.ilu-dicas > summary { cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ilu-dicas .ilu-dica { margin-top: 6px; }
@media (max-width: 720px) {
  .ilu-corpo { grid-template-columns: 1fr; }
  .ilu-quadro { position: relative; }
  .cfg-home.ilu-linha { grid-template-columns: 1fr; row-gap: 6px; }
}
dialog.janela.janela-cfg:has(.ilu) { max-width: 1100px; }

/* ------------------------------------------------ aba Macros (09/10, cliente: menu geral das macros) */
.macros-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.macros-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.macros-semvip { font-size: 13px; }
.macros-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.macro-cartao { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.macro-cab { display: flex; align-items: center; gap: 12px; }
.macro-cab > .enc-icone { width: 34px; height: 34px; flex: none; }
.macro-tit { display: flex; flex-direction: column; min-width: 0; }
.macro-tit h3, .macro-tit h2 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: -.01em; color: var(--texto); }
.filtro-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--muted); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.filtro-chip:hover { color: var(--texto); }
.filtro-chip.ativo { background: var(--laranja-suave); border-color: var(--laranja-borda); color: var(--laranja-forte); }
.roteiro-cab b { font-size: 14px; }
.macro-tit .muted { font-size: 12px; }
.macro-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.macro-pilulas .pilula { font-size: 11.5px; padding: 3px 8px; }
.macro-curta { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.macro-sobe { margin: 0; font-size: 13px; }
.macro-usam { margin: 0; font-size: 12px; }
.macro-acoes { margin-top: auto; display: flex; gap: 8px; padding-top: 4px; }
.macros-roteiros { margin-top: 18px; }
.roteiros-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.roteiro { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--superficie-2); }
.roteiro-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.roteiro-cab .enc-icone { width: 22px; height: 22px; }
.roteiro-passos { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.roteiro-fase { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 6px; }
.roteiro-macro { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--laranja-forte); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.roteiro-txt { display: block; color: var(--muted); margin-top: 2px; }
.macros-vip { margin: 14px 0 0; }
dialog.janela.janela-macro { max-width: 980px; }
.janela-macro .macro-cab { margin-bottom: 8px; }
.janela-macro .macro-pilulas { margin-bottom: 8px; }
.macro-viptxt { font-size: 13px; margin: -4px 0 8px; }
.macro-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.macro-lista { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 5px; font-size: 13.5px; }
.macro-homes { margin-top: 10px; font-size: 13px; }
.macro-usar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.macro-usar select { width: auto; flex: 1 1 220px; max-width: 360px; }
.macro-usar-nota { flex-basis: 100%; }
.escolha-catalogo { margin-bottom: 10px; }
.janela-chat .chat-painel .chat-log { height: min(52vh, 460px); }
@media (max-width: 760px) { .macro-corpo { grid-template-columns: 1fr; } }

/* apelido e cor da conta (09/10) */
.cores-conta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cor-conta { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda-forte); cursor: pointer; padding: 0; }
.cor-conta.sem { background: repeating-linear-gradient(45deg, var(--superficie) 0 5px, var(--superficie-2) 5px 10px); }
.cor-conta.sel { box-shadow: 0 0 0 2px var(--texto); }
.cor-conta:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* mapa: rosto dos mobs, home da trap e chat (09/10) */
.mapa-chip img.mapa-rosto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid; image-rendering: pixelated; box-sizing: content-box; }
.mapa-sub-tit { margin: 12px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mapa-home-bts { margin-top: 0; }
.mapa-chat .chat-log { height: 220px; font-size: 12px; }
.mapa-chat .chat-dica { display: none; }
.mapa-chat-conta { width: auto; max-width: 60%; padding: 4px 8px; font-size: 13px; }

/* aviso de nivel de skill que fica no cartao (09/10) */
.aviso-fixo { background: var(--laranja-suave); border-color: var(--laranja-borda); color: var(--texto); }
.aviso-fixo svg { color: var(--laranja-forte); }
/* (24/10/2026) recado do admin no cartao: as quebras de linha do texto ficam */
.recado-texto { white-space: pre-line; overflow-wrap: anywhere; }
.link-aviso { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--laranja-forte); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* (09/10) "sem vaga: nick, nick..." quebra a linha no celular */
.vagas-resumo .pilula { white-space: normal; }

/* ------------------------------------------------ aba Mochila (09/10) */
.mochila-aba { padding: 0 22px 18px; }
/* (20/10) aba Dano e IK do Matar mob (js/dano.js) */
.dano-aba { padding: 0 22px 18px; }
.dano-arma { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.dano-arma .muted { font-size: 13px; }
.dano-mob { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px 14px; margin-bottom: 10px; }
.dano-mob-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dano-mob-topo .muted { font-size: 13px; }
.dano-mob-topo .pilula { margin-left: auto; }
.dano-linhas { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.5; }
.dano-linhas .muted { font-size: 12.5px; }
.dano-detalhe { margin-top: 8px; font-size: 13px; }
.dano-detalhe summary { cursor: pointer; color: var(--muted); }
.dano-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; }
.dano-tabela th, .dano-tabela td { border: 1px solid var(--borda); padding: 6px 8px; text-align: left; vertical-align: top; }
.dano-tabela th { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.dano-tabela td small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.dano-tabela td.mata b { color: var(--verde-texto); }
.dano-tabela td.nao-mata b { color: var(--vermelho-texto); }
.dano-tabela td.agora { box-shadow: inset 0 0 0 2px var(--borda-forte); }
.dano-nota { font-size: 12.5px; margin-top: 8px; }
/* (20/10) calculadora de IK no Configurar do Matar mob (js/dano.js, campoCalculadoraDano) */
.dano-calc-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; margin-bottom: 12px; }
.dano-calc-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.dano-calc-campo select, .dano-calc-campo input { width: 100%; min-width: 0; }
.dano-calc-agora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.dano-calc-rec { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
@media (max-width: 520px) { .dano-aba { padding: 0 14px 14px; } .dano-mob { padding: 10px; } .dano-tabela th, .dano-tabela td { padding: 5px; } }
.inv-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inv-topo h3 { margin: 0 0 2px; }
.inv-sub { font-size: 12.5px; }
.inv-grade { display: grid; gap: 6px; max-width: 470px; }
.inv-rot { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.inv-linha { display: flex; align-items: center; gap: 4px; }
.inv-linha .inv-rot { margin: 0 8px 0 0; }
.inv-bloco { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.inv-casa { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borda); display: grid; place-items: center; overflow: hidden; }
.inv-armadura .inv-casa { width: calc((100% - 32px) / 9); flex: none; }
.inv-casa img { width: 72%; height: 72%; image-rendering: pixelated; }
.inv-casa.vazia { background: transparent; border-style: dashed; }
.inv-casa.encantado { box-shadow: inset 0 0 0 2px rgba(158, 119, 237, .55); background: rgba(158, 119, 237, .10); }
.inv-casa.arma-fixa { border-color: var(--laranja-borda); }
.inv-casa.na-mao { outline: 2px solid var(--laranja); outline-offset: 1px; }
.inv-qtd { position: absolute; right: 3px; bottom: 1px; font: 700 11px/1 Inter, system-ui, sans-serif; color: var(--texto); text-shadow: 0 0 2px var(--superficie), 0 0 2px var(--superficie); }
.inv-dur { position: absolute; left: 3px; bottom: 3px; height: 3px; border-radius: 2px; }
.inv-sigla { font: 700 10px/1 Inter, system-ui, sans-serif; color: var(--muted); text-transform: uppercase; }
.inv-vazio { font: 700 11px/1 Inter, system-ui, sans-serif; color: var(--fraco); }
.inv-barra { padding-top: 2px; }
.inv-totais { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 12.5px; }
.inv-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.inv-chip.encantado { border-color: rgba(158, 119, 237, .55); }
.inv-baus { display: grid; gap: 10px; }
.inv-bau { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.inv-bau-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; font-size: 13.5px; }
.inv-bau-cab .muted { font-size: 12.5px; }
.inv-bau-cab .pilula { margin-left: auto; font-size: 11.5px; padding: 2px 8px; }
.inv-nota { font-size: 12.5px; margin: 8px 0 0; }
/* 18/10: mexer na mochila pelo site (clique seleciona, arrastar move, botao direito abre o menu) */
.inv-sel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 34px; margin-bottom: 8px; font-size: 12.5px; max-width: 470px; }
.inv-sel.ativa { padding: 8px 10px; border-radius: var(--raio-p); background: var(--laranja-suave); border: 1px solid var(--laranja-borda); font-size: 13px; }
.inv-sel-acoes { display: flex; gap: 6px; margin-left: auto; }
.inv-casa.inv-mexe { cursor: pointer; }
.inv-casa.inv-mexe:hover { border-color: var(--laranja-borda); }
.inv-casa.inv-mexe:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.inv-casa.inv-selecionada { outline: 2px solid var(--laranja); outline-offset: 1px; background: var(--laranja-suave); }
.inv-casa.inv-alvo { border: 2px solid var(--laranja); }
.inv-casa.inv-arrastando { opacity: .4; }
.inv-casa.inv-pendente { opacity: .55; border-style: dashed; border-color: var(--laranja); }
.inv-menu { position: fixed; z-index: 60; width: 260px; max-width: calc(100vw - 16px); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra-3); padding: 6px; display: flex; flex-direction: column; }
.inv-menu-cab { font-weight: 600; font-size: 13.5px; padding: 4px 8px 0; }
.inv-menu-sub { font-size: 12px; padding: 0 8px 6px; display: block; color: var(--muted); }
.inv-menu-item { text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px; font: inherit; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.inv-menu-item:hover, .inv-menu-item:focus-visible { background: var(--laranja-suave); outline: none; }
.inv-menu-item.perigo { color: var(--vermelho-texto); border-top: 1px solid var(--borda); border-radius: 0 0 7px 7px; margin-top: 4px; }
.inv-menu-home { padding: 6px 0 2px; border-top: 1px solid var(--borda); margin-top: 4px; }
.inv-menu-home .inv-menu-sub { padding-top: 4px; }
.inv-menu-linha { display: flex; gap: 6px; padding: 0 8px 4px; }
.inv-menu-linha input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); color: var(--texto); }
.inv-log { display: grid; gap: 4px; font-size: 12.5px; max-width: 620px; }
.inv-log-linha .muted { font-variant-numeric: tabular-nums; margin-right: 4px; }
.inv-log-linha.ruim { color: var(--vermelho-texto); }

/* livros por encantamento (09/10) */
dialog.janela.janela-livros { max-width: 860px; }
.livros-grade { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 4px; }
.livro-linha { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(120px, .9fr); gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; }
.livro-linha.regra { background: var(--laranja-suave); }
.livro-linha.lixo { background: var(--vermelho-suave); }
.livro-rot { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.livro-rot .enc-icone { width: 22px; height: 22px; flex: none; }
.livros-grade .janela-secao { padding-left: 6px; }
.livro-linha select, .livro-linha input { padding: 6px 8px; font-size: 13px; width: 100%; min-width: 0; }
.livro-linha .apagado { visibility: hidden; }
@media (max-width: 680px) { .livro-linha { grid-template-columns: 1fr 1fr; } .livro-rot { grid-column: 1 / -1; } .livros-grade { max-height: 46vh; } }

/* Monitor dos proxys (Administracao, 10/10/2026) */
.tabela-proxys { min-width: 1040px; }
.tabela-proxys td, .tabela-proxys th { padding-left: 14px; padding-right: 14px; }
.tabela-proxys td:first-child, .tabela-proxys th:first-child { padding-left: 22px; }
.tabela-proxys td { vertical-align: top; }
.tabela-proxys .proxy-col-contas { width: 34%; }
.proxy-testar { margin-top: 8px; }
#bt-proxys-testar { white-space: nowrap; }
.tabela-proxys tr.desligada td { opacity: .55; }
.tabela-proxys .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.proxy-ping { display: flex; align-items: center; gap: 10px; }
.proxy-ping b { min-width: 58px; font-variant-numeric: tabular-nums; }
.ping-ok { color: var(--verde-texto); }
.ping-alerta { color: var(--ambar-texto); }
.ping-ruim { color: var(--vermelho-texto); }
.ping-neutro { color: var(--muted); }
.proxy-grafico { width: 180px; height: 28px; display: block; background: var(--superficie-2); border-radius: 4px; }
.proxy-grafico rect.ok { fill: var(--verde); }
.proxy-grafico rect.falha { fill: var(--vermelho); }
.proxy-grafico rect.cheia { fill: var(--cinza); }
.proxy-ip-mudou { color: var(--ambar-texto); }
.proxy-conta-num { font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.proxy-trilho { max-width: 160px; margin-bottom: 8px; }
.proxy-trilho.cheio i { background: var(--ambar); }
.proxy-chips { gap: 4px; }
.proxy-chips .chip { font-size: 12px; padding: 2px 8px; }
.proxy-chips .chip small { font-size: 10px; font-weight: 700; color: var(--muted); }
.proxy-chips .chip.vip small { color: var(--laranja-forte); }
.proxy-vip { font-weight: 600; font-variant-numeric: tabular-nums; }
.proxys-filas { padding: 10px 0 4px; }
.proxys-filas p { margin: 4px 0; }
.proxy-fila { font-size: 13px; color: var(--ambar-texto); }

/* aba Lojas do cartao (11/10/2026, so do dono; web/lojas.js) */
.lj-painel { display: grid; gap: 4px; }
.lj-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lj-form input[type=text] { flex: 1 1 260px; min-width: 0; }
.lj-form .interruptor { margin: 4px 0; flex-basis: 100%; }
.lj-and { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lj-numeros { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; font-size: 13.5px; }
.lj-numeros b { font-size: 16px; margin-right: 4px; }
.lj-log { max-height: 190px; overflow: auto; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 10px; }
.lj-log div { white-space: pre-wrap; word-break: break-word; }
.lj-log .h { color: var(--muted); margin-right: 8px; }
.lj-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lj-filtros input { flex: 1 1 220px; min-width: 0; }
.lj-filtros select { flex: 0 1 auto; width: auto; max-width: 100%; }
.lj-tabela { min-width: 860px; font-size: 13px; }
.lj-tabela th, .lj-tabela td { padding: 8px 10px; }
.lj-tabela td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lj-tabela .sub { display: block; color: var(--muted); font-size: 12px; }
.lj-home { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.lj-home + .lj-home { margin-top: 3px; }
.lj-home button { padding: 2px 7px; }
.lj-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lj-rolagem { overflow-x: auto; }

/* ------------------------------------------------ visual A (12/10/2026)
   Direção A · Central, passo 1 de docs/INTERFACE-PLANO.md: cores com contraste AA, foco do
   teclado azul (diferente do selecionado, que é laranja) e menos efeito. Só vale com
   <html data-visual="a">: o app.js liga com ?visual=a (fica neste navegador) e desliga com
   ?visual=antigo. Sem a chave nada muda. Contraste medido em docs/INTERFACE-DIAGNOSTICO.md. */
:root[data-visual="a"] {
  --fundo: #f7f7f5;
  --superficie: #ffffff;
  --superficie-2: #f0f1f3;
  --borda: #e3e5e8;
  --borda-campo: #7d8491;      /* limite de campo e botão: 3,8:1 no branco, 3,5:1 no fundo */
  --texto: #16181d;            /* 16,6:1 */
  --muted: #4f5662;            /* 7,6:1 */
  --fraco: #636a77;            /* 5,4:1 (era 2,6:1) */

  --laranja: #c4410c;          /* ação: 5,1:1 como texto e sob texto branco (era 3,05:1) */
  --laranja-forte: #a8370a;
  --laranja-suave: #fdf0e8;
  --laranja-borda: #f3c3a6;
  --sobre-laranja: #ffffff;
  --marca: #f26b1d;            /* só a raposa */
  --foco: #2563eb;             /* 5,2:1 */

  --verde: #14874d; --verde-texto: #0b6b3a; --verde-suave: #e7f5ec;
  --ambar: #b26200; --ambar-texto: #7a4100; --ambar-suave: #fff3dc; --ambar-borda: #f0cf8f;
  --vermelho: #d1301c; --vermelho-texto: #a8200f; --vermelho-suave: #fdecea;
  --cinza: #80868f; --cinza-texto: #3f4552; --cinza-suave: #eef0f2;

  --sombra-1: none;
  --sombra-2: 0 1px 2px rgba(22, 24, 29, .06);
}
@media (prefers-color-scheme: dark) {
  :root[data-visual="a"]:not([data-theme="light"]) {
    --fundo: #0f1115;
    --superficie: #171a20;
    --superficie-2: #1d2129;
    --borda: #262b33;
    --borda-campo: #6b7380;    /* 3,6:1 */
    --texto: #eceef2;
    --muted: #c3c8d2;
    --fraco: #9aa1ae;          /* 6,7:1 (era 4,0:1) */

    --laranja: #ff8a4c;
    --laranja-forte: #ffa16e;
    --laranja-suave: rgba(255, 138, 76, .12);
    --laranja-borda: rgba(255, 138, 76, .35);
    --sobre-laranja: #1a0b03;  /* 8,2:1 */
    --marca: #ff7b30;
    --foco: #7aa7ff;

    --verde: #3cc47a; --verde-texto: #7fe0a8; --verde-suave: #12261b;
    --ambar: #f5a524; --ambar-texto: #ffc76b; --ambar-suave: #2b2110; --ambar-borda: rgba(245, 165, 36, .35);
    --vermelho: #ff6b5a; --vermelho-texto: #ff9c8f; --vermelho-suave: #2e1513;
    --cinza: #8a919e; --cinza-texto: #c3c8d2; --cinza-suave: #1d2129;

    --sombra-1: none;
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
/* limite de controle com contraste de 3:1 (decoração continua com --borda e --borda-forte) */
:root[data-visual="a"] .btn,
:root[data-visual="a"] input:not([type=checkbox]),
:root[data-visual="a"] select,
:root[data-visual="a"] .campo textarea,
:root[data-visual="a"] .cfg-prefixo,
:root[data-visual="a"] .cfg-busca,
:root[data-visual="a"] .mapa-linha input,
:root[data-visual="a"] .mapa-chk select,
:root[data-visual="a"] .mapa-sethome-op select,
:root[data-visual="a"] .vaga-conta { border-color: var(--borda-campo); }
:root[data-visual="a"] .btn-primario { border-color: var(--laranja); box-shadow: none; }
:root[data-visual="a"] .btn-primario:hover { border-color: var(--laranja-forte); }
:root[data-visual="a"] .btn-fantasma { border-color: transparent; }
:root[data-visual="a"] input:focus,
:root[data-visual="a"] select:focus { border-color: var(--borda-campo); }
/* foco do teclado: anel azul com folga, nunca igual ao "selecionado" (laranja) */
:root[data-visual="a"] :is(.btn, button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: none;
}
/* menos efeito: a raposa sem brilho, o ponto de "online" sem pulsar */
:root[data-visual="a"] .logo svg { color: var(--marca); filter: none; }
:root[data-visual="a"] .status.ok i::after { animation: none; display: none; }

/* ---- visual A · passo 2: o estado tem forma, cor e frase (círculo trabalhando, anel conectando,
   triângulo atenção, octógono problema, quadrado parada) */
:root[data-visual="a"] { --info: #2563eb; --info-texto: #1a4fb8; --info-suave: #e8effc; }
@media (prefers-color-scheme: dark) {
  :root[data-visual="a"]:not([data-theme="light"]) { --info: #6aa0ff; --info-texto: #9bbcff; --info-suave: #121c33; }
}
:root[data-visual="a"] .status i { width: 10px; height: 10px; border-radius: 0; background: var(--cinza); clip-path: inset(0 round 2px); }
:root[data-visual="a"] .status.ok i { background: var(--verde); clip-path: circle(50%); }
:root[data-visual="a"] .status.info { color: var(--info-texto); }
:root[data-visual="a"] .status.info i { background: transparent; box-shadow: inset 0 0 0 2px var(--info); clip-path: circle(50%); }
:root[data-visual="a"] .status.alerta { color: var(--ambar-texto); }
:root[data-visual="a"] .status.alerta i { width: 12px; height: 11px; background: var(--ambar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-visual="a"] .status.ruim { color: var(--vermelho-texto); }
:root[data-visual="a"] .status.ruim i { width: 11px; height: 11px; background: var(--vermelho); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
:root[data-visual="a"] .va-glifo { flex: none; display: inline-block; width: 16px; height: 16px; }
:root[data-visual="a"] .va-glifo.ruim { display: inline-grid; place-items: center; width: 18px; height: 18px; background: var(--vermelho); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
:root[data-visual="a"] .va-glifo.ruim::after { content: "!"; color: #fff; font: 800 12px/1 Inter, system-ui, sans-serif; }
:root[data-visual="a"] .va-glifo.alerta { width: 17px; background: var(--ambar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---- visual A · passo 3: "Precisam de você" no topo e os filtros */
:root[data-visual="a"] .va-precisa { margin: 24px 0 0; }
:root[data-visual="a"] .va-secao { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); margin: 0 0 8px; }
:root[data-visual="a"] .va-precisa-lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
:root[data-visual="a"] .va-precisa-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 16px; }
:root[data-visual="a"] .va-precisa-item + .va-precisa-item { border-top: 1px solid var(--borda); }
:root[data-visual="a"] .va-quem { display: flex; align-items: center; gap: 12px; flex: 0 0 200px; min-width: 0; }
:root[data-visual="a"] .va-nomes { display: flex; flex-direction: column; min-width: 0; }
:root[data-visual="a"] .va-nomes .muted { font-size: 13px; }
:root[data-visual="a"] .va-oque { flex: 1 1 320px; display: flex; flex-direction: column; min-width: 0; }
:root[data-visual="a"] .va-titulo { font-weight: 600; }
:root[data-visual="a"] .va-precisa-item.ruim .va-titulo { color: var(--vermelho-texto); }
:root[data-visual="a"] .va-precisa-item.alerta .va-titulo { color: var(--ambar-texto); }
:root[data-visual="a"] .va-sub { font-size: 14px; color: var(--muted); }
:root[data-visual="a"] .va-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-visual="a"] .va-filtros { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
:root[data-visual="a"] .va-filtro { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--muted); font: 500 14px Inter, system-ui, sans-serif; cursor: pointer; }
:root[data-visual="a"] .va-filtro.precisa { color: var(--vermelho-texto); }
:root[data-visual="a"] .va-filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
/* 18/10/2026: busca, filtro por macro e lista agrupada por macro (para quem tem muitas contas) */
:root[data-visual="a"] .va-filtros-linha,
:root[data-visual="a"] .va-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-visual="a"] .va-chips[hidden] { display: none; }
:root[data-visual="a"] .va-busca { flex: 0 1 240px; min-width: 160px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--superficie); color: var(--texto); font: 400 14px Inter, system-ui, sans-serif; }
:root[data-visual="a"] .va-agrupar { margin-left: auto; }
:root[data-visual="a"] .va-agrupar[aria-pressed="true"] { background: var(--laranja-suave); border-color: var(--laranja-borda); color: var(--texto); }
:root[data-visual="a"] .va-agrupar[hidden] { display: none; }
:root[data-visual="a"] .va-filtro.va-macro { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 8px; }
:root[data-visual="a"] .va-filtro.sem-macro { padding-left: 12px; color: var(--ambar-texto); }
:root[data-visual="a"] .va-filtro .enc-icone { width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; }
:root[data-visual="a"] .va-filtro .enc-icone img { width: 18px; height: 18px; image-rendering: pixelated; }
:root[data-visual="a"] .va-filtro-n { font-variant-numeric: tabular-nums; color: var(--fraco); }
:root[data-visual="a"] .va-filtro[aria-pressed="true"] .va-filtro-n { color: inherit; opacity: .75; }
:root[data-visual="a"] .va-filtro.zero:not([aria-pressed="true"]) { opacity: .5; }
:root[data-visual="a"] .va-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--muted); }
:root[data-visual="a"] .va-resumo[hidden] { display: none; }
:root[data-visual="a"] .va-resumo.vazio { padding: 12px 16px; border: 1px dashed var(--borda-campo); border-radius: 10px; font-size: 14px; }
:root[data-visual="a"] .va-grupo { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 16px; border: 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: 600 13px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
:root[data-visual="a"] .va-grupo:first-child { border-top: 0; }
:root[data-visual="a"] .va-grupo[hidden] { display: none; }
:root[data-visual="a"] .va-grupo:hover { background: color-mix(in srgb, var(--texto) 6%, var(--superficie-2)); }
:root[data-visual="a"] .va-grupo-seta { width: 8px; height: 8px; flex: none; border-right: 2px solid var(--fraco); border-bottom: 2px solid var(--fraco); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
:root[data-visual="a"] .va-grupo[aria-expanded="false"] .va-grupo-seta { transform: rotate(-45deg); }
:root[data-visual="a"] .va-grupo .enc-icone { width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; }
:root[data-visual="a"] .va-grupo .enc-icone img { width: 18px; height: 18px; image-rendering: pixelated; }
:root[data-visual="a"] .va-grupo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="a"] .va-grupo-n { color: var(--fraco); font-weight: 500; font-variant-numeric: tabular-nums; }
:root[data-visual="a"] .va-grupo-resumo { margin-left: auto; display: inline-flex; gap: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
:root[data-visual="a"] .va-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
:root[data-visual="a"] .va-mini::before { content: ""; width: 8px; height: 8px; background: var(--cinza); clip-path: inset(0 round 2px); }
:root[data-visual="a"] .va-mini.ok::before { background: var(--verde); clip-path: circle(50%); }
:root[data-visual="a"] .va-mini.alerta::before { width: 9px; background: var(--ambar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-visual="a"] .va-grupo + .conta { border-top: 0; }
@media (max-width: 720px) {
  /* celular: a busca ocupa a linha e as macros rolam de lado (sem empurrar a lista para baixo) */
  :root[data-visual="a"] .va-busca { flex: 1 1 100%; }
  :root[data-visual="a"] .va-agrupar { margin-left: 0; flex: none; }
  :root[data-visual="a"] .va-so-largo { display: none; }
  :root[data-visual="a"] #va-estados { flex: 1 1 0; min-width: 0; }
  :root[data-visual="a"] #va-estados,
  :root[data-visual="a"] .va-macros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :root[data-visual="a"] .va-macros { margin: 0 -16px; padding: 0 16px 2px; }
  :root[data-visual="a"] .va-chips .va-filtro { flex: none; }
}
:root[data-visual="a"] .layout-troca { display: none; }

/* ---- visual A · passo 5: uma linha por conta; a aberta é o detalhe */
:root[data-visual="a"] .conteudo { max-width: 1360px; }
:root[data-visual="a"] .contas,
:root[data-visual="a"] .contas.lado { display: flex; flex-direction: column; gap: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
:root[data-visual="a"] .contas:empty { display: none; }
:root[data-visual="a"] .conta.va-fechada { border: 0; border-radius: 0; box-shadow: none; }
:root[data-visual="a"] .conta.va-fechada + .conta { border-top: 1px solid var(--borda); }
:root[data-visual="a"] .conta.va-fechada > :not(.conta-topo) { display: none !important; }
:root[data-visual="a"] .conta.va-fechada .conta-topo { padding: 10px 16px; border-bottom: 0; min-height: 56px; cursor: pointer; }
:root[data-visual="a"] .conta.va-fechada .conta-topo:hover { background: var(--superficie-2); }
:root[data-visual="a"] .conta.va-fechada .conta-avatar { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
:root[data-visual="a"] .conta.va-fechada .nick { font-size: 15px; }
:root[data-visual="a"] .conta.va-fechada .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; max-width: 52ch; }
:root[data-visual="a"] .conta.va-fechada .conta-id > div { min-width: 0; }
:root[data-visual="a"] .conta.com-cor { border-left: 0; }
:root[data-visual="a"] .conta-topo[role="button"] { cursor: pointer; }
:root[data-visual="a"] .va-voltar { display: none; }
:root[data-visual="a"] .conta.va-fechada .conta-vip.ok { display: none; }
:root[data-visual="a"] .aviso.aviso-ruim { background: var(--vermelho-suave); border-color: transparent; color: var(--vermelho-texto); }
:root[data-visual="a"] .status.ruim i { width: 12px; height: 12px; }
:root[data-visual="a"] .conta.va-selecionada .conta-topo { background: var(--superficie-2); }
:root[data-visual="a"] .conta.va-selecionada .nick { color: var(--laranja); }
:root[data-visual="a"] .va-duplo { display: flex; align-items: flex-start; gap: 24px; }
:root[data-visual="a"] .va-duplo > .contas { flex: 1 1 360px; min-width: 0; }
:root[data-visual="a"] .va-duplo.com-detalhe > .contas { flex: 0 1 400px; }
:root[data-visual="a"] .va-duplo.com-detalhe > .contas .sub { max-width: 30ch; }
:root[data-visual="a"] .va-detalhe:empty { display: none; }
:root[data-visual="a"] .va-detalhe { flex: 1 1 600px; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: var(--raio); }
:root[data-visual="a"] .va-detalhe > .conta { border: 1px solid var(--borda); }
:root[data-visual="a"] .va-detalhe > .conta .conta-topo { cursor: default; }
@media (max-width: 1099px) {
  /* celular e tablet: a conta aberta cobre a tela, com "‹ Contas" para voltar */
  :root[data-visual="a"] .contas > .conta.va-aberta { position: fixed; inset: 0; z-index: 50; overflow-y: auto; border: 0; border-radius: 0; background: var(--fundo); padding-bottom: 88px; }
  :root[data-visual="a"] .contas > .conta.va-aberta .va-voltar { display: inline-flex; margin: 8px 8px 0; min-height: 44px; }
  :root[data-visual="a"].va-sobreposto body { overflow: hidden; }
}

/* ---- visual A · passo 6: no celular, navegação embaixo com 4 itens e "Mais" */
:root[data-visual="a"] .va-nav-mais { display: none; }
@media (max-width: 720px) {
  :root[data-visual="a"] .navegacao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 0; overflow: visible; }
  :root[data-visual="a"] .navegacao .nav { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; font-size: 12px; border-bottom: 0; }
  :root[data-visual="a"] .navegacao .nav.ativa { border-bottom: 0; color: var(--texto); box-shadow: inset 0 3px 0 var(--laranja); }
  :root[data-visual="a"] .navegacao .va-nav-mais { display: inline-flex; }
  :root[data-visual="a"] .navegacao .nav.va-no-mais { display: none; }
  :root[data-visual="a"] .navegacao.va-mais-aberto { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .12); }
  :root[data-visual="a"] .navegacao.va-mais-aberto .nav.va-no-mais:not([hidden]) { display: inline-flex; }
  :root[data-visual="a"] body { padding-bottom: 76px; }
  :root[data-visual="a"] .btn { min-height: 44px; }
  :root[data-visual="a"] .btn.btn-p { min-height: 40px; }
}

/* ---- visual A · passo 4: topo enxuto (vagas minimizadas com o alerta na linha) */
/* (16/10, usuario: "em pequenos quadradinhos, e nao apenas texto") indicadores em cartoes com icone, acima das vagas */
.kpi-icone { display: none; }
:root[data-visual="a"] .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0 0 16px; }
:root[data-visual="a"] .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: center; align-items: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; box-shadow: none; min-width: 0; }
:root[data-visual="a"] .kpi-icone { display: grid; place-items: center; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 10px; background: var(--superficie-2); background: color-mix(in srgb, var(--texto) 9%, var(--superficie)); border: 1px solid var(--borda); color: var(--laranja); }
:root[data-visual="a"] .kpi-icone img { width: 26px; height: 26px; image-rendering: pixelated; }
:root[data-visual="a"] .kpi-icone svg { width: 22px; height: 22px; }
:root[data-visual="a"] .kpi-rotulo { grid-column: 2; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-visual="a"] .kpi-valor { grid-column: 2; margin: 2px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-visual="a"] .kpi-valor small { font-size: 13px; }
:root[data-visual="a"] .kpi-sub { grid-column: 2; margin-top: 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-visual="a"] .kpi .quando { display: none; }
:root[data-visual="a"] .kpi.alerta { background: var(--superficie); }
:root[data-visual="a"] .kpi.kpi-coins .kpi-valor { color: var(--verde-texto); }
:root[data-visual="a"] .kpi.kpi-coins .kpi-icone { background: var(--verde-suave); }
:root[data-visual="a"] .vagas-secao.fechada { padding: 8px 14px; }
:root[data-visual="a"] .vagas-cab { flex-wrap: wrap; }
:root[data-visual="a"] .vagas-cab .pilula { flex: none; }
:root[data-visual="a"] .vagas-seta { order: -1; }
:root[data-visual="a"] .conta.va-fechada .status { min-width: 0; max-width: 60%; }
/* o estado é o que mais importa na linha: ele pega a largura que precisa (até 60%) e o nick/sub cortam antes */
:root[data-visual="a"] .conta.va-fechada .conta-id { flex: 1 1 0; min-width: 0; }
:root[data-visual="a"] .conta.va-fechada .status span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  :root[data-visual="a"] #sub-vista { display: none; }
  :root[data-visual="a"] .conteudo { padding-top: 20px; }
  /* indicadores em 2 colunas de cartoes menores (o 1º é "Contas online") */
  :root[data-visual="a"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root[data-visual="a"] .kpi { padding: 10px 12px; column-gap: 10px; }
  :root[data-visual="a"] .kpi-icone { width: 36px; height: 36px; border-radius: 8px; }
  :root[data-visual="a"] .kpi-icone img { width: 22px; height: 22px; }
  :root[data-visual="a"] .kpi-valor { font-size: 16px; }
  :root[data-visual="a"] .kpi-rotulo { font-size: 12px; white-space: normal; line-height: 1.25; }
  :root[data-visual="a"] .kpi-sub { display: none; }
  /* "Precisam de você": o botão ao lado do nome, a frase embaixo na largura toda */
  :root[data-visual="a"] .va-precisa-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
  :root[data-visual="a"] .va-quem { flex: none; min-width: 0; }
  :root[data-visual="a"] .va-acoes { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  :root[data-visual="a"] .va-oque { grid-column: 1 / -1; }
  :root[data-visual="a"] .va-nomes .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-visual="a"] .va-titulo { font-size: 14px; }
}
/* ---- visual A · passo 7: no Configurar, os botões ficam sempre à vista (rodapé fixo) e dizem que salvar reinicia o robô */
:root[data-visual="a"] dialog.janela-cfg .cfg-botoes { position: sticky; bottom: -24px; z-index: 3; margin: 12px -24px -24px; padding: 12px 24px 16px;
  background: var(--superficie); border-top: 1px solid var(--borda); }
:root[data-visual="a"] .cfg-nota-salvar { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  :root[data-visual="a"] dialog.janela.janela-cfg { padding: 16px; width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  :root[data-visual="a"] dialog.janela-cfg .cfg-botoes { bottom: -16px; margin: 12px -16px -16px; padding: 10px 16px 12px; }
  :root[data-visual="a"] dialog.janela-cfg .cfg-botoes .btn { flex: 1 1 auto; }
  /* no celular o botão "Salvar e reiniciar" já avisa; a frase sai para sobrar tela */
  :root[data-visual="a"] .cfg-nota-salvar { display: none; }
}
/* no computador os passos ficam numa coluna à esquerda, sempre à vista */
@media (min-width: 1100px) {
  :root[data-visual="a"] dialog.janela.janela-cfg { max-width: 1080px; }
  :root[data-visual="a"] dialog.janela.janela-cfg:has(.ilu) { max-width: 1260px; }
  :root[data-visual="a"] dialog.janela-cfg form { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  :root[data-visual="a"] dialog.janela-cfg form > * { grid-column: 1 / -1; }
  :root[data-visual="a"] dialog.janela-cfg form > .cfg-abas { grid-column: 1; position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
  :root[data-visual="a"] dialog.janela-cfg form > .cfg-paineis { grid-column: 2; min-width: 0; }
  :root[data-visual="a"] .cfg-aba { display: flex; align-items: center; justify-items: start; gap: 8px; padding: 8px 10px; text-align: left; }
  :root[data-visual="a"] .cfg-aba .enc-icone { width: 28px; height: 28px; flex: none; }
  :root[data-visual="a"] .cfg-aba .enc-tipo-nome { flex: 1; min-width: 0; text-align: left; font-size: 13px; }
  :root[data-visual="a"] .cfg-aba .cfg-passo { position: static; flex: none; width: 14px; font-size: 12px; }
  :root[data-visual="a"] .cfg-aba .cfg-badge { position: static; flex: none; }
}

/* (15/10) Sugestoes: o cliente manda e ve a resposta; o admin ve todas embaixo */
.sugestoes { max-width: 820px; }
.sug-titulo { font-size: 15px; font-weight: 650; margin: 26px 0 10px; }
.sug-vazio { margin: 0 0 6px; }
.sug-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--sombra-1); }
.sug-item.sug-nova { border-left: 3px solid var(--laranja); }
.sug-item .pilula { font-size: 12px; padding: 2px 8px; }
.sug-cat { background: var(--superficie-2); color: var(--cinza-texto); }
.sug-email { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.sug-item .nov-texto { overflow-wrap: anywhere; }
.sug-resposta { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--laranja); border-radius: 0 8px 8px 0; background: var(--laranja-suave); font-size: 14px; line-height: 1.5; }
.sug-resposta strong { display: block; font-size: 12.5px; color: var(--laranja-forte); margin-bottom: 2px; }
.sug-resposta p { margin: 4px 0 0; overflow-wrap: anywhere; }
.sug-admin-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--borda); }
.sug-admin-topo .sug-titulo { margin: 0 0 10px; }
.sug-filtro { margin-bottom: 10px; min-width: 200px; }
/* ---- conta principal (16/10/2026) */
.principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 980px; }
.pr-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.pr-confirmado { margin: 4px 0 12px; }
.pr-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.tabela-principal { min-width: 560px; }
.tabela-principal td:first-child { width: 90px; }
.tabela-principal input[type=checkbox] { width: 18px; height: 18px; }
.pr-eh-principal td { background: var(--superficie-2); }
.pr-envio { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; }
.pr-envio-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-envio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pr-envio-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
@media (max-width: 640px) { .pr-campos { grid-template-columns: 1fr; } }
/* ---- ranking de mobtraps (17/10/2026) */
.ranking { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1100px; }
.rk-minhas { display: grid; gap: 8px; }
.rk-minha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; }
.rk-minha-nome { display: flex; flex-direction: column; min-width: 0; }
.rk-minha .pilula { white-space: normal; justify-self: start; }
.rk-ordem { min-width: 210px; margin: 0; }
.rk-mobs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.rk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; }
.rk-chip.ativo { border-color: var(--laranja); background: var(--laranja-suave); }
.rk-chip-n { color: var(--muted); font-size: 12px; }
.rk-chip .rk-rosto { width: 14px; height: 14px; border-width: 2px; }
.rk-rosto { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ambar); image-rendering: pixelated; box-sizing: content-box; flex: none; }
.rk-rosto-vazio { display: inline-block; background: var(--superficie-2); }
.rk-lista { display: grid; gap: 10px; }
.rk-vazio { margin: 6px 0; }
.rk-item { display: grid; grid-template-columns: 44px minmax(190px, 1.2fr) minmax(170px, 1fr) minmax(0, 2.2fr); grid-template-areas: "pos trap eq num" "pos rod rod rod"; align-items: center; gap: 6px 16px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.rk-item.rk-sua { border-color: var(--laranja-borda); }
.rk-pos { grid-area: pos; font-size: 20px; font-weight: 700; color: var(--muted); text-align: center; }
.rk-item:nth-child(1) .rk-pos { color: var(--laranja); }
.rk-trap { grid-area: trap; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-trap-txt { display: flex; flex-direction: column; min-width: 0; }
.rk-x { font-size: 16px; }
.rk-nick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.rk-selo { padding: 1px 8px; font-size: 12px; }
.rk-eq { grid-area: eq; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rk-arma { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rk-num { grid-area: num; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.rk-num div { min-width: 0; }
.rk-num dt { color: var(--muted); font-size: 12px; }
.rk-num dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.rk-rodape { grid-area: rod; }
@media (max-width: 900px) {
  .rk-item { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "pos trap" "pos eq" "num num" "rod rod"; }
  .rk-num { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rk-minha { grid-template-columns: minmax(0, 1fr); }
  .rk-num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- visual A · passo 8: escala de 6 tamanhos (12 legenda · 13 auxiliar · 14 texto · 16 destaque · 20 título · 28 página).
   Gerado por ferramentas/escala-letras/gerar.js a partir das regras acima (mesmos seletores, mesma ordem); nada abaixo
   de 12 px. Fica no fim do arquivo: regra nova vai antes dele, e depois roda o gerador de novo. */
:root[data-visual="a"] body { font-size: 16px; }
:root[data-visual="a"] h1 { font-size: 28px; }
:root[data-visual="a"] h2 { font-size: 16px; }
:root[data-visual="a"] h3 { font-size: 12px; }
:root[data-visual="a"] .muted { font-size: 14px; }
:root[data-visual="a"] code { font-size: 13px; }
:root[data-visual="a"] .logo { font-size: 20px; }
:root[data-visual="a"] .btn { font-size: 14px; }
:root[data-visual="a"] .btn-p { font-size: 13px; }
:root[data-visual="a"] .btn-bloco { font-size: 16px; }
:root[data-visual="a"] .campo > span { font-size: 14px; }
:root[data-visual="a"] input:not([type=checkbox]), :root[data-visual="a"] select { font-size: 16px; }
:root[data-visual="a"] .erro { font-size: 14px; }
:root[data-visual="a"] .dica { font-size: 13px; }
:root[data-visual="a"] .interruptor span { font-size: 14px; }
:root[data-visual="a"] .interruptor small { font-size: 13px; }
:root[data-visual="a"] .campo small.ajuda { font-size: 13px; }
:root[data-visual="a"] .aceite { font-size: 14px; }
:root[data-visual="a"] .entrada-texto h1 { font-size: 28px; }
:root[data-visual="a"] .entrada-texto > p { font-size: 16px; }
:root[data-visual="a"] .beneficios strong { font-size: 16px; }
:root[data-visual="a"] .beneficios span { font-size: 14px; }
:root[data-visual="a"] .entrada-rodape { font-size: 13px; }
:root[data-visual="a"] .form-caixa h2 { font-size: 28px; }
:root[data-visual="a"] .aba { font-size: 14px; }
:root[data-visual="a"] .avatar { font-size: 14px; }
:root[data-visual="a"] .usuario-email { font-size: 14px; }
:root[data-visual="a"] .cabecalho .muted { font-size: 16px; }
:root[data-visual="a"] .layout-bt { font-size: 13px; }
:root[data-visual="a"] .lixo-legenda { font-size: 13px; }
:root[data-visual="a"] .cfg-itens-legenda { font-size: 13px; }
:root[data-visual="a"] .cfg-itens-titulo { font-size: 13px; }
:root[data-visual="a"] .cfg-item small { font-size: 12px; }
:root[data-visual="a"] .manter-badge { font-size: 12px; }
:root[data-visual="a"] .manter-nota { font-size: 13px; }
:root[data-visual="a"] .manter-regra-topo { font-size: 13px; }
:root[data-visual="a"] .manter-editor .enc-editor-topo h3 { font-size: 16px; }
:root[data-visual="a"] .manter-ou { font-size: 12px; }
:root[data-visual="a"] .manter-mat { font-size: 13px; }
:root[data-visual="a"] .manter-mat-btn { font-size: 13px; }
:root[data-visual="a"] .lixo-conta { font-size: 12px; }
:root[data-visual="a"] .aba-conta { font-size: 13px; }
:root[data-visual="a"] .aba-marca { font-size: 12px; }
:root[data-visual="a"] .chat-atalhos .btn { font-size: 12px; }
:root[data-visual="a"] .tesouros-topo .vagas-tit { font-size: 16px; }
:root[data-visual="a"] .tesouro-nick small { font-size: 12px; }
:root[data-visual="a"] .nivel-chip { font-size: 13px; }
:root[data-visual="a"] .tesouro-situacao { font-size: 13px; }
:root[data-visual="a"] .correio-conteudo { font-size: 14px; }
:root[data-visual="a"] .correio-conteudo .linha-itens { font-size: 13px; }
:root[data-visual="a"] .tesouro-item .quando { font-size: 13px; }
:root[data-visual="a"] .frag { font-size: 13px; }
:root[data-visual="a"] .frag-linha { font-size: 13px; }
:root[data-visual="a"] .tes-guarda-desc { font-size: 13px; }
:root[data-visual="a"] .tes-guarda-nota { font-size: 13px; }
:root[data-visual="a"] .contas.lado .coluna-dia { font-size: 12px; }
:root[data-visual="a"] .licenca-titulo { font-size: 16px; }
:root[data-visual="a"] .licenca-sub { font-size: 14px; }
:root[data-visual="a"] .pilula { font-size: 13px; }
:root[data-visual="a"] .status { font-size: 13px; }
:root[data-visual="a"] .vagas-topo { font-size: inherit; }
:root[data-visual="a"] .vagas-tit { font-size: 16px; }
:root[data-visual="a"] .vagas-sub { font-size: 13px; }
:root[data-visual="a"] .vagas-seta { font-size: 13px; }
:root[data-visual="a"] .entrada-discord { font-size: 13px; }
:root[data-visual="a"] .vagas-nota { font-size: 12px; }
:root[data-visual="a"] .vagas-vazio { font-size: 14px; }
:root[data-visual="a"] .vaga-nick { font-size: 14px; }
:root[data-visual="a"] .vaga-num { font-size: 13px; }
:root[data-visual="a"] .vaga-tempo b { font-size: 13px; }
:root[data-visual="a"] .vaga-tempo small { font-size: 12px; }
:root[data-visual="a"] .vaga-conta { font-size: 14px; }
:root[data-visual="a"] .kpi-rotulo { font-size: 13px; }
:root[data-visual="a"] .kpi-valor { font-size: 28px; }
:root[data-visual="a"] .kpi-valor small { font-size: 16px; }
:root[data-visual="a"] .requisitos { font-size: 14px; }
:root[data-visual="a"] .requisitos strong { font-size: 13px; }
:root[data-visual="a"] .requisitos li strong { font-size: 14px; }
:root[data-visual="a"] .conta-avatar { font-size: 16px; }
:root[data-visual="a"] .nick { font-size: 20px; }
:root[data-visual="a"] .conta-apelido { font-size: 14px; }
:root[data-visual="a"] .conta-vip { font-size: 12px; }
:root[data-visual="a"] .conta-coins { font-size: 12px; }
:root[data-visual="a"] .conta-ping { font-size: 12px; }
:root[data-visual="a"] .conta-xp, :root[data-visual="a"] .conta-money { font-size: 12px; }
:root[data-visual="a"] .sub { font-size: 13px; }
:root[data-visual="a"] .aviso { font-size: 14px; }
:root[data-visual="a"] .num .v { font-size: 20px; }
:root[data-visual="a"] .num .r { font-size: 13px; }
:root[data-visual="a"] .num .num-sub { font-size: 12px; }
:root[data-visual="a"] .janela-secao { font-size: 12px; }
:root[data-visual="a"] .vazio { font-size: 14px; }
:root[data-visual="a"] .rodape-painel { font-size: 13px; }
:root[data-visual="a"] .skill-nome { font-size: 14px; }
:root[data-visual="a"] .skill-nivel { font-size: 14px; }
:root[data-visual="a"] .skill-nivel .mais { font-size: 12px; }
:root[data-visual="a"] .item { font-size: 14px; }
:root[data-visual="a"] .eventos { font-size: 14px; }
:root[data-visual="a"] .eventos .h { font-size: 12px; }
:root[data-visual="a"] .toast { font-size: 14px; }
:root[data-visual="a"] .nav { font-size: 14px; }
:root[data-visual="a"] .grafico-resumo, :root[data-visual="a"] .teste-quando { font-size: 13px; }
:root[data-visual="a"] .coluna-valor { font-size: 12px; }
:root[data-visual="a"] .coluna-dia { font-size: 12px; }
:root[data-visual="a"] .teste-lista { font-size: 14px; }
:root[data-visual="a"] .skill-meta { font-size: 12px; }
:root[data-visual="a"] .skill-passiva { font-size: 12px; }
:root[data-visual="a"] .escolha-topo h3 { font-size: 16px; }
:root[data-visual="a"] .modalidade-grupo-titulo { font-size: 12px; }
:root[data-visual="a"] .modalidade-cartao { font-size: inherit; }
:root[data-visual="a"] .modalidade-topo strong { font-size: 14px; }
:root[data-visual="a"] .modalidade-desc { font-size: 13px; }
:root[data-visual="a"] .tabela { font-size: 14px; }
:root[data-visual="a"] .tabela th { font-size: 12px; }
:root[data-visual="a"] .tabela .quando { font-size: 13px; }
:root[data-visual="a"] .chip { font-size: 13px; }
:root[data-visual="a"] button.chip { font-size: 13px; }
:root[data-visual="a"] .faixa-admin { font-size: 14px; }
:root[data-visual="a"] .senha-temp { font-size: 20px; }
@media (max-width: 680px) {
  :root[data-visual="a"] .coluna-dia { font-size: 12px; }
  :root[data-visual="a"] h1 { font-size: 20px; }
}
:root[data-visual="a"] .passos-2fa code { font-size: 13px; }
:root[data-visual="a"] .codigos-2fa li { font-size: 16px; }
:root[data-visual="a"] .enc-legenda { font-size: 13px; }
:root[data-visual="a"] .enc-tipo { font-size: 12px; }
:root[data-visual="a"] .enc-qtd { font-size: 12px; }
:root[data-visual="a"] .enc-pct { font-size: 12px; }
:root[data-visual="a"] .btn.btn-p { font-size: 13px; }
:root[data-visual="a"] .enc-editor-topo h3 { font-size: 16px; }
:root[data-visual="a"] .enc-fab { font-size: 14px; }
:root[data-visual="a"] .enc-card-meio b { font-size: 14px; }
:root[data-visual="a"] .enc-card-meio small { font-size: 12px; }
:root[data-visual="a"] .enc-estrela { font-size: 20px; }
:root[data-visual="a"] .enc-niveis button { font-size: 12px; }
:root[data-visual="a"] .enc-mc { font-size: 13px; }
:root[data-visual="a"] .enc-num b { font-size: 20px; }
:root[data-visual="a"] .enc-num small { font-size: 12px; }
:root[data-visual="a"] .enc-aviso { font-size: 13px; }
:root[data-visual="a"] .enc-peca-texto b { font-size: 14px; }
:root[data-visual="a"] .enc-peca-texto span { font-size: 13px; }
:root[data-visual="a"] .enc-peca-h { font-size: 12px; }
:root[data-visual="a"] .token-macro { font-size: 13px; }
:root[data-visual="a"] .bots-macro li { font-size: 13px; }
:root[data-visual="a"] .qz-agora-titulo { font-size: 16px; }
:root[data-visual="a"] .qz-agora-titulo .muted { font-size: 13px; }
:root[data-visual="a"] .qz-parado { font-size: 14px; }
:root[data-visual="a"] .qz-chip { font-size: 13px; }
:root[data-visual="a"] .qz-estoque-topo h3 { font-size: 16px; }
:root[data-visual="a"] .qz-estoque-topo .muted { font-size: 13px; }
:root[data-visual="a"] .qz-item-nome b { font-size: 14px; }
:root[data-visual="a"] .qz-item-nome .muted { font-size: 12px; }
:root[data-visual="a"] .qz-item-valor { font-size: 13px; }
:root[data-visual="a"] .qz-item-valor b { font-size: 16px; }
:root[data-visual="a"] .qz-item .pilula { font-size: 12px; }
:root[data-visual="a"] .eventos .vezes { font-size: 12px; }
:root[data-visual="a"] .download-resumo { font-size: 14px; }
:root[data-visual="a"] .download-opcao strong { font-size: 14px; }
:root[data-visual="a"] .download-opcao .muted { font-size: 13px; }
:root[data-visual="a"] .download-trava { font-size: 13px; }
:root[data-visual="a"] .mapa-coords { font-size: 12px; }
:root[data-visual="a"] .mapa-zoom .btn { font-size: 20px; }
:root[data-visual="a"] .mapa-rodape { font-size: 12px; }
:root[data-visual="a"] .mapa-menu-tit { font-size: 12px; }
:root[data-visual="a"] .mapa-menu-item { font-size: 14px; }
:root[data-visual="a"] .mapa-conta-info b { font-size: 14px; }
:root[data-visual="a"] .mapa-conta-info small { font-size: 13px; }
:root[data-visual="a"] .mapa-xyz { font-size: 12px !important; }
:root[data-visual="a"] .mapa-qtd { font-size: 13px; }
:root[data-visual="a"] .mapa-linha input { font-size: 14px; }
:root[data-visual="a"] .mapa-chk { font-size: 14px; }
:root[data-visual="a"] .mapa-chk select { font-size: 13px; }
:root[data-visual="a"] .mapa-sethome-op select { font-size: 13px; }
:root[data-visual="a"] .mapa-dica { font-size: 12px; }
:root[data-visual="a"] .mapa-rota .muted { font-size: 13px; }
:root[data-visual="a"] .mapa-parada-n { font-size: 12px; }
:root[data-visual="a"] .mapa-dir { font-size: 16px; }
:root[data-visual="a"] .mapa-dir small { font-size: 12px; }
:root[data-visual="a"] .mapa-detalhe h4 { font-size: 16px; }
:root[data-visual="a"] .mapa-detalhe .muted { font-size: 13px; }
:root[data-visual="a"] .mapa-dl { font-size: 13px; }
:root[data-visual="a"] .mapa-trap { font-size: 13px; }
:root[data-visual="a"] .mapa-trap-n { font-size: 16px; }
:root[data-visual="a"] .mapa-sit { font-size: 12px; }
:root[data-visual="a"] .mapa-chip { font-size: 12px; }
:root[data-visual="a"] .mapa-legenda { font-size: 12px; }
:root[data-visual="a"] .chat-situacao { font-size: 13px; }
:root[data-visual="a"] .chat-log { font-size: 13px; }
:root[data-visual="a"] .chat-dica { font-size: 12px; }
:root[data-visual="a"] .interruptor.chat-robo { font-size: 13px; }
:root[data-visual="a"] .cfg-legenda { font-size: 13px; }
:root[data-visual="a"] .cfg-explicacoes { font-size: 13px; }
:root[data-visual="a"] .ajuda-bt { font-size: 12px; }
:root[data-visual="a"] .cfg-passo { font-size: 12px; }
:root[data-visual="a"] .cfg-badge { font-size: 12px; }
:root[data-visual="a"] .cfg-topo h3 { font-size: 16px; }
:root[data-visual="a"] .cfg-topo small { font-size: 13px; }
:root[data-visual="a"] .cfg-rotulo { font-size: 14px; }
:root[data-visual="a"] .cfg-opcional { font-size: 12px; }
:root[data-visual="a"] .cfg-prefixo { font-size: 13px; }
:root[data-visual="a"] .cfg-home small.ajuda, :root[data-visual="a"] .cfg-escolha small.ajuda { font-size: 13px; }
:root[data-visual="a"] .cfg-sethome { font-size: 13px; }
:root[data-visual="a"] .cfg-copiar { font-size: 12px; }
:root[data-visual="a"] .cfg-toggle-txt b { font-size: 14px; }
:root[data-visual="a"] .cfg-toggle-txt small { font-size: 12px; }
:root[data-visual="a"] .cfg-opcao { font-size: 13px; }
:root[data-visual="a"] .cfg-pendencias { font-size: 13px; }
:root[data-visual="a"] .cfg-campo textarea { font-size: 13px; }
:root[data-visual="a"] .cfg-busca { font-size: 14px; }
:root[data-visual="a"] .cfg-home-item small { font-size: 12px; }
:root[data-visual="a"] .cfg-home-item code { font-size: 14px; }
:root[data-visual="a"] .mais-menu > summary span { font-size: 12px; }
:root[data-visual="a"] .kpi-sub { font-size: 13px; }
:root[data-visual="a"] .modalidade-extra { font-size: 12px; }
:root[data-visual="a"] .cfg-sobre { font-size: 13px; }
:root[data-visual="a"] .nov-mes { font-size: 13px; }
:root[data-visual="a"] .nov-tipo, :root[data-visual="a"] .nov-mod { font-size: 12px; }
:root[data-visual="a"] .nov-data { font-size: 12px; }
:root[data-visual="a"] .nov-nova { font-size: 12px; }
:root[data-visual="a"] .nov-titulo { font-size: 16px; }
:root[data-visual="a"] .nov-texto { font-size: 14px; }
:root[data-visual="a"] .nov-lista { font-size: 14px; }
:root[data-visual="a"] .campo textarea { font-size: 14px; }
:root[data-visual="a"] .jn-sobre { font-size: 12px; }
:root[data-visual="a"] dialog.janela.janela-nov .jn-tit h2 { font-size: 20px; }
:root[data-visual="a"] .jn-tit p { font-size: 14px; }
:root[data-visual="a"] .jn-dia { font-size: 13px; }
:root[data-visual="a"] .jn-item-titulo { font-size: 16px; }
:root[data-visual="a"] .jn-txt .nov-texto, :root[data-visual="a"] .jn-txt .nov-lista { font-size: 14px; }
:root[data-visual="a"] .jn-mais { font-size: 13px; }
@media (max-width: 560px) {
  :root[data-visual="a"] dialog.janela.janela-nov .jn-tit h2 { font-size: 20px; }
}
:root[data-visual="a"] .ilu > summary { font-size: 14px; }
:root[data-visual="a"] .ilu-resumo b { font-size: 14px; }
:root[data-visual="a"] .ilu-resumo small { font-size: 12px; }
:root[data-visual="a"] .ilu-home { font-size: inherit; }
:root[data-visual="a"] .ilu-marca { font-size: 13px; }
:root[data-visual="a"] .ilu-home-txt b { font-size: 14px; }
:root[data-visual="a"] .ilu-home-txt small, :root[data-visual="a"] .ilu-home-txt code { font-size: 12px; }
:root[data-visual="a"] .ilu-dicas-tit { font-size: 12px; }
:root[data-visual="a"] .ilu-dica { font-size: 13px; }
:root[data-visual="a"] .ilu-home.num .ilu-marca { font-size: 13px; }
:root[data-visual="a"] .ilu-resumo b { font-size: 14px; }
:root[data-visual="a"] .ilu-linha .cfg-rotulo { font-size: 13px; }
:root[data-visual="a"] .ilu-linha .cfg-prefixo { font-size: 12px; }
:root[data-visual="a"] .ilu-linha .cfg-home-linha input { font-size: 14px; }
:root[data-visual="a"] .ilu-linha .ilu-marca { font-size: 13px; }
:root[data-visual="a"] .ilu-dicas { font-size: 13px; }
:root[data-visual="a"] .ilu-dicas > summary { font-size: 12px; }
:root[data-visual="a"] .macros-semvip { font-size: 13px; }
:root[data-visual="a"] .macro-tit h3, :root[data-visual="a"] .macro-tit h2 { font-size: 16px; }
:root[data-visual="a"] .filtro-chip { font-size: 13px; }
:root[data-visual="a"] .roteiro-cab b { font-size: 14px; }
:root[data-visual="a"] .macro-tit .muted { font-size: 12px; }
:root[data-visual="a"] .macro-pilulas .pilula { font-size: 12px; }
:root[data-visual="a"] .macro-curta { font-size: 14px; }
:root[data-visual="a"] .macro-sobe { font-size: 13px; }
:root[data-visual="a"] .macro-usam { font-size: 12px; }
:root[data-visual="a"] .roteiro-passos { font-size: 13px; }
:root[data-visual="a"] .roteiro-fase { font-size: 12px; }
:root[data-visual="a"] .roteiro-macro { font-size: inherit; }
:root[data-visual="a"] .macro-viptxt { font-size: 13px; }
:root[data-visual="a"] .macro-lista { font-size: 14px; }
:root[data-visual="a"] .macro-homes { font-size: 13px; }
:root[data-visual="a"] .mapa-sub-tit { font-size: 12px; }
:root[data-visual="a"] .mapa-chat .chat-log { font-size: 12px; }
:root[data-visual="a"] .mapa-chat-conta { font-size: 13px; }
:root[data-visual="a"] .link-aviso { font-size: inherit; }
:root[data-visual="a"] .inv-sub { font-size: 13px; }
:root[data-visual="a"] .inv-rot { font-size: 12px; }
:root[data-visual="a"] .inv-qtd { font-size: 12px; }
:root[data-visual="a"] .inv-sigla { font-size: 12px; }
:root[data-visual="a"] .inv-vazio { font-size: 12px; }
:root[data-visual="a"] .inv-chip { font-size: 13px; }
:root[data-visual="a"] .inv-bau-cab { font-size: 14px; }
:root[data-visual="a"] .inv-bau-cab .muted { font-size: 13px; }
:root[data-visual="a"] .inv-bau-cab .pilula { font-size: 12px; }
:root[data-visual="a"] .inv-nota { font-size: 13px; }
:root[data-visual="a"] .livro-rot { font-size: 14px; }
:root[data-visual="a"] .livro-linha select, :root[data-visual="a"] .livro-linha input { font-size: 13px; }
:root[data-visual="a"] .tabela-proxys .mono { font-size: 13px; }
:root[data-visual="a"] .proxy-chips .chip { font-size: 12px; }
:root[data-visual="a"] .proxy-chips .chip small { font-size: 12px; }
:root[data-visual="a"] .proxy-fila { font-size: 13px; }
:root[data-visual="a"] .lj-numeros { font-size: 14px; }
:root[data-visual="a"] .lj-numeros b { font-size: 16px; }
:root[data-visual="a"] .lj-log { font-size: 13px; }
:root[data-visual="a"] .lj-tabela { font-size: 13px; }
:root[data-visual="a"] .lj-tabela .sub { font-size: 12px; }
:root[data-visual="a"] .va-glifo.ruim::after { font-size: 12px; }
:root[data-visual="a"] .va-secao { font-size: 12px; }
:root[data-visual="a"] .va-nomes .muted { font-size: 13px; }
:root[data-visual="a"] .va-sub { font-size: 14px; }
:root[data-visual="a"] .va-filtro { font-size: 14px; }
:root[data-visual="a"] .va-busca { font-size: 14px; }
:root[data-visual="a"] .va-resumo { font-size: 13px; }
:root[data-visual="a"] .va-resumo.vazio { font-size: 14px; }
:root[data-visual="a"] .va-grupo { font-size: 13px; }
:root[data-visual="a"] .conta.va-fechada .conta-avatar { font-size: 14px; }
:root[data-visual="a"] .conta.va-fechada .nick { font-size: 16px; }
@media (max-width: 720px) {
  :root[data-visual="a"] .navegacao .nav { font-size: 12px; }
}
:root[data-visual="a"] .kpi-rotulo { font-size: 13px; }
:root[data-visual="a"] .kpi-valor { font-size: 20px; }
:root[data-visual="a"] .kpi-valor small { font-size: 13px; }
:root[data-visual="a"] .kpi-sub { font-size: 12px; }
@media (max-width: 720px) {
  :root[data-visual="a"] .kpi-valor { font-size: 16px; }
  :root[data-visual="a"] .kpi-rotulo { font-size: 12px; }
  :root[data-visual="a"] .va-titulo { font-size: 14px; }
}
:root[data-visual="a"] .cfg-nota-salvar { font-size: 13px; }
@media (min-width: 1100px) {
  :root[data-visual="a"] .cfg-aba .enc-tipo-nome { font-size: 13px; }
  :root[data-visual="a"] .cfg-aba .cfg-passo { font-size: 12px; }
}
:root[data-visual="a"] .sug-titulo { font-size: 16px; }
:root[data-visual="a"] .sug-item .pilula { font-size: 12px; }
:root[data-visual="a"] .sug-email { font-size: 13px; }
:root[data-visual="a"] .sug-resposta { font-size: 14px; }
:root[data-visual="a"] .sug-resposta strong { font-size: 13px; }
:root[data-visual="a"] .rk-chip { font-size: 13px; }
:root[data-visual="a"] .rk-chip-n { font-size: 12px; }
:root[data-visual="a"] .rk-pos { font-size: 20px; }
:root[data-visual="a"] .rk-x { font-size: 16px; }
:root[data-visual="a"] .rk-selo { font-size: 12px; }
:root[data-visual="a"] .rk-num dt { font-size: 12px; }

/* ======== Roteiros (28/10/2026, js/roteiros.js): lista a esquerda, editor de blocos e as contas do roteiro */
.rot { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.rot-lista { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rot-lista-topo { display: flex; align-items: center; gap: 8px; padding: 0 4px 2px; }
.rot-lista-topo h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.rot-conta-n { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--cinza-texto); background: var(--cinza-suave); border-radius: 999px; padding: 1px 7px; margin-left: 8px; }
.rot-lista-topo .rot-conta-n { margin-left: 0; }
.rot-item { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.rot-item:hover { border-color: var(--borda-forte); }
.rot-item.ativo { border-color: var(--laranja); background: var(--laranja-suave); }
.rot-item strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-item-meta { font-size: 12.5px; color: var(--muted); }
.rot-item-novo { cursor: default; }
.rot-item-icones { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.rot-item-icones .enc-icone { width: 20px; height: 20px; }
.rot-item-icones .enc-icone + .enc-icone { margin-left: 16px; }
.rot-item-icones .enc-icone + .enc-icone::before { content: ''; position: absolute; left: -12px; top: 50%; width: 8px; border-top: 1.5px solid var(--fraco); }
.rot-item-rep { width: 14px; height: 14px; margin-left: 8px; color: var(--muted); }
.rot-novo { justify-content: center; border: 1px dashed var(--borda-forte); }
.rot-novo svg { width: 16px; height: 16px; }

.rot-editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rot-cartao { padding: 20px 22px; }
.rot-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rot-nome { flex: 1 1 240px; min-width: 0; height: 40px; font: inherit; font-size: 16px; font-weight: 600; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 0 12px; }
.rot-nome:focus { border-color: var(--laranja); outline: none; box-shadow: 0 0 0 4px var(--laranja-suave); }
.rot-acoes { display: flex; align-items: center; gap: 8px; }
.rot-frase { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--raio-p); background: var(--cinza-suave); color: var(--cinza-texto); font-size: 14px; line-height: 1.55; }
.rot-frase svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--laranja); }
.rot-erro { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--raio-p); background: var(--vermelho-suave); color: var(--vermelho-texto); font-size: 13.5px; }

.rot-blocos { list-style: none; margin: 18px 0 0; padding: 0; }
.rot-bloco { position: relative; display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); }
.rot-bloco + .rot-bloco { margin-top: 22px; }
.rot-bloco + .rot-bloco::before { content: ''; position: absolute; left: 27px; top: -23px; height: 22px; border-left: 2px dashed var(--borda-forte); }
.rot-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja-suave); color: var(--laranja-forte); font-size: 13px; font-weight: 700; }
.rot-icone .enc-icone { width: 32px; height: 32px; }
.rot-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; min-width: 0; }
.rot-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rot-campo > span { font-size: 12px; font-weight: 550; color: var(--muted); }
.rot-sel, .rot-valor, .rot-busca { width: 100%; min-width: 0; height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); }
.rot-sel:focus, .rot-valor:focus, .rot-busca:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 4px var(--laranja-suave); }
.rot-valor-caixa { display: flex; align-items: center; gap: 6px; }
.rot-sufixo { flex: none; font-size: 13px; color: var(--muted); }
.rot-bloco-acoes { display: flex; gap: 2px; }
.rot-bt { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.rot-bt:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.rot-bt:disabled { opacity: .3; cursor: default; }
.rot-bt svg { width: 18px; height: 18px; }
.rot-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px; border: 1.5px dashed var(--borda-forte); border-radius: var(--raio-p); background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.rot-add:hover { border-color: var(--laranja); color: var(--laranja-forte); background: var(--laranja-suave); }
.rot-add svg { width: 16px; height: 16px; }
.rot-fim { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.rot-fim-rotulo { font-size: 13.5px; font-weight: 600; }
.rot-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--cinza-suave); }
.rot-seg-op { border: 0; border-radius: 8px; padding: 7px 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.rot-seg-op.ativo { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-2); }

.rot-contas { padding: 18px 22px; }
.rot-contas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rot-contas-topo h3 { margin: 0; display: flex; align-items: center; font-size: 15px; }
.rot-contas-dica, .rot-contas-vazio p { margin: 10px 0 0; line-height: 1.5; }
.rot-contas-vazio p { margin: 0; }
.rot-lista-contas { list-style: none; margin: 12px 0 0; padding: 0; }
.rot-conta { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.rot-conta-cfg { display: inline-flex; align-items: center; gap: 6px; }
.rot-conta-cfg svg { width: 16px; height: 16px; }

/* fila de homes do bloco (28/10): cada conta numa home da lista, as outras esperam a vez */
.rot-homes { grid-column: 3 / -1; min-width: 0; padding-top: 12px; border-top: 1px dashed var(--borda); }
.rot-homes-abrir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 8px 10px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-p); background: transparent; color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.rot-homes-abrir:hover { border-color: var(--laranja); background: var(--laranja-suave); }
.rot-homes-abrir .muted { font-size: 12.5px; font-weight: 400; }
.rot-homes-abrir .enc-icone, .rot-homes-tit .enc-icone { width: 18px; height: 18px; }
.rot-homes-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rot-homes-tit { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.rot-homes-conta { font-size: 12.5px; color: var(--muted); }
.rot-homes-dica { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rot-homes-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.rot-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2px; padding: 5px 2px 5px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.rot-home-nome, .rot-home-quem { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-home-nome { font-size: 13px; font-weight: 600; }
.rot-home-quem { font-size: 12px; color: var(--fraco); }
.rot-home.ocupada { border-color: var(--verde); background: var(--verde-suave); }
.rot-home.ocupada .rot-home-quem { color: var(--verde-texto); font-weight: 550; }
.rot-home-x { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.rot-home-x:hover { background: var(--superficie-2); color: var(--texto); }
.rot-home-x svg { width: 14px; height: 14px; }
.rot-homes-espera { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: var(--ambar-suave); color: var(--ambar-texto); font-size: 12.5px; }
.rot-homes-gerar, .rot-homes-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rot-homes-add { margin-top: 8px; }
.rot-homes-faixa { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rot-homes-rev { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--cinza-suave); }
.rot-homes-rev-rot { font-size: 13px; font-weight: 600; }
.rot-homes-rev .rot-valor { height: 32px; font-size: 13.5px; }
.rot-homes-rev .rot-homes-num { flex: none; width: 76px; }
.rot-homes-rev-dica { flex: 1 1 220px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rot-homes-ou { font-size: 12.5px; color: var(--muted); }
.rot-homes-gerar .rot-valor, .rot-homes-add .rot-valor { height: 32px; font-size: 13.5px; }
.rot-homes-gerar .rot-homes-pre { flex: 1 1 140px; width: auto; }
.rot-homes-gerar .rot-homes-num { flex: none; width: 68px; }
.rot-homes-add .rot-valor { flex: 1 1 200px; width: auto; }
/* fila de contas (28/10): sobem ate a Reparacao e entram sozinhas no painel */
.rot-lista-fila { margin-top: 14px; }
.rot-item-fila-tit { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rot-item-fila-tit svg { flex: none; width: 16px; height: 16px; color: var(--laranja); }
.rot-fc-titulo { margin: 0; font-size: 18px; }
.rot-fc-cfg { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; margin-top: 16px; }
.rot-fc-salvar { display: flex; align-items: flex-end; height: 100%; }
.rot-fc-add h3, .rot-fc-lista h3 { margin: 0; font-size: 15px; }
.rot-fc-add h3 { margin-bottom: 10px; }
.rot-fc-texto { display: block; width: 100%; min-height: 110px; padding: 10px 12px; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); resize: vertical; }
.rot-fc-texto:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 4px var(--laranja-suave); }
.rot-fc-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.rot-fc-linha .rot-sel { width: auto; flex: none; }
.rot-fc-aut { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; font-size: 13px; color: var(--cinza-texto); cursor: pointer; }
.rot-fc-aut input { width: 16px; height: 16px; margin: 0; flex: none; }
.rot-fc-erros { margin: 10px 0 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--vermelho-suave); color: var(--vermelho-texto); font-size: 13px; line-height: 1.5; }
.rot-fc-resumo { font-size: 13px; }
.rot-fc-acoes { display: flex; gap: 2px; }
.rot-fc-sub { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rot-fc-entraram { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rot-fc-entraram li { padding: 4px 10px; border-radius: 999px; background: var(--verde-suave); color: var(--verde-texto); font-size: 12.5px; }
.rot-escolha-bt { width: 100%; border: 0; background: transparent; color: var(--texto); font: inherit; text-align: left; }
.rot-escolha-bt svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.rot-conta-quem { display: flex; flex-direction: column; min-width: 0; }
.rot-conta-quem strong, .rot-conta-quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-conta-quem span { font-size: 12.5px; }
.rot-conta-prog { font-size: 13.5px; color: var(--cinza-texto); }

.rot-vazio { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 32px; text-align: center; }
.rot-vazio-icone { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--laranja-suave); color: var(--laranja); }
.rot-vazio-icone svg { width: 28px; height: 28px; }
.rot-vazio h2 { margin: 4px 0 0; }
.rot-vazio > p.muted { max-width: 540px; margin: 0; line-height: 1.55; }
.rot-vazio .btn svg { width: 16px; height: 16px; }
.rot-vazio-ou { margin: 14px 0 0; font-size: 12.5px; color: var(--fraco); }
.rot-exemplos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; max-width: 720px; }
.rot-exemplo { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s; }
.rot-exemplo:hover { border-color: var(--laranja); }
.rot-exemplo span { font-size: 13px; line-height: 1.45; color: var(--muted); }

.rot-janela { width: min(560px, calc(100vw - 32px)); }
.rot-janela-barra { display: flex; gap: 8px; margin: 12px 0; }
.rot-janela-barra .btn { white-space: nowrap; }
.rot-escolha { list-style: none; margin: 0 0 16px; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.rot-escolha li + li { border-top: 1px solid var(--borda); }
.rot-escolha-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.rot-escolha-item:hover { background: var(--superficie-2); }
.rot-escolha-item input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.rot-escolha-txt { display: flex; flex-direction: column; min-width: 0; }
.rot-escolha-txt .muted { font-size: 12.5px; }

@media (max-width: 900px) {
  .rot { grid-template-columns: minmax(0, 1fr); }
  .rot-lista { position: static; }
}
@media (max-width: 640px) {
  .rot-cartao, .rot-contas { padding: 16px; }
  .rot-bloco { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "num icone acoes" "campos campos campos"; padding: 12px; }
  .rot-bloco + .rot-bloco::before { left: 25px; }
  .rot-num { grid-area: num; }
  .rot-icone { grid-area: icone; }
  .rot-campos { grid-area: campos; grid-template-columns: minmax(0, 1fr); }
  .rot-bloco-acoes { grid-area: acoes; }
  .rot-acoes { width: 100%; justify-content: flex-end; }
  .rot-conta { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .rot-conta-prog { grid-column: 1 / -1; grid-row: 2; }
  .rot-conta-cfg span { display: none; }
  .rot-fc-cfg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rot-fc-cfg > :first-child, .rot-fc-salvar { grid-column: 1 / -1; }
  .rot-fc-salvar .btn { width: 100%; }
  .rot-homes { grid-column: 1 / -1; }
  .rot-vazio { padding: 28px 16px; }
}
/* O que avisar (28/10/2026, docs/BOT-DISCORD-PLANO.md): grupos de escolha da DM e do webhook */
.regras-grupo { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.regras-grupo legend { font-size: 13.5px; font-weight: 550; color: var(--texto); margin-bottom: 8px; padding: 0; }
.regras-grupo .aceite { margin: 0 0 8px; }
.regras-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; max-height: 260px; overflow-y: auto; padding: 10px 12px; margin: 2px 0 8px 26px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); }
.regras-lista .aceite { margin: 0; padding: 4px 0; overflow-wrap: break-word; }
.regras-horas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px 26px; }
/* o input geral (input:not([type=checkbox])) e de bloco e 100%: o radio e a hora voltam ao tamanho deles */
.regras-grupo input[type="radio"][name] { display: inline-block; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; flex: none; border: 0; box-shadow: none; accent-color: var(--laranja); }
.regras-horas input[type="time"][name] { display: inline-block; width: auto; padding: 6px 8px; }
.regras-horas small { flex-basis: 100%; }
@media (max-width: 560px) { .regras-lista, .regras-horas { margin-left: 0; } }
/* 30/10/2026 (dono: "um menu um pouco abaixo do menu de contas convencional, com as contas upando via roteiro"): as
   contas da fila de contas subindo ficam numa secao no fim da lista (vaSecaoUpando no visual-a.js) */
.va-upando { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 16px; font-weight: 600; }
.va-upando-dica { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fraco); font-weight: 500; font-size: 12px; }
:root[data-visual="a"] .va-grupo.va-upando { margin-top: 18px; border-top: 2px solid var(--borda); }
:root[data-visual="a"] .va-grupo.va-upando:first-child { margin-top: 0; }
/* 30/10/2026: a janela "Configurações salvas" da conta (roteiros.js configuracoesSalvas) */
.rot-salva { display: flex; align-items: center; gap: 6px; }
.rot-salva > .rot-escolha-bt { flex: 1; min-width: 0; }
.rot-salva.ativa > .rot-escolha-bt { background: var(--laranja-suave); border-radius: var(--raio-p); }
.sub-salva { color: var(--fraco); }