/* Guerreiros Z · visual "Arena Shonen": tinta preta com retícula, laranja e amarelo de energia, diagonais e títulos condensados.
   Celular primeiro na intenção; o layout de celular entra abaixo de 700 px. */
:root {
  color-scheme: dark;
  --tinta: rgb(16 13 18); --tinta2: rgb(30 25 33); --tinta3: rgb(44 38 48);
  --papel: rgb(246 239 226); --lar: rgb(255 122 20); --ama: rgb(255 210 30);
  --ver: rgb(228 44 50); --azu: rgb(40 150 255); --cinza: rgb(150 140 150);
  --linha: rgb(255 255 255 / .08);
  --titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --texto: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --nav-h: 62px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body { margin: 0; min-height: 100vh; background-color: var(--tinta); background-image: radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1.6px); background-size: 7px 7px; color: var(--papel); font: 15px/1.45 var(--texto); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p { margin: 0; }
fieldset { min-width: 0; }
code { font-size: .92em; color: var(--ama); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ama); outline-offset: 3px; }

/* Topo e navegação */
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 32px; background: #000; border-bottom: 4px solid var(--lar); }
.logo { display: flex; align-items: center; gap: 8px; font: 28px var(--titulo); letter-spacing: .5px; white-space: nowrap; transform: skew(-10deg); }
.logo b { font-weight: 400; background: var(--lar); color: #000; padding: 0 8px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { display: inline-flex; align-items: center; padding: 6px 14px; font: 18px var(--titulo); letter-spacing: 1px; transform: skew(-10deg); }
.nav a:hover { color: var(--ama); }
.nav a.active { background: var(--ama); color: #000; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--ver); color: #fff; font: 800 11px/1 var(--texto); letter-spacing: 0; }
.topo .eu { display: flex; align-items: center; gap: 10px; margin-left: auto; font-weight: 700; }
.topo .eu.active .av, .topo .eu:hover .av { box-shadow: 0 0 0 3px var(--ama); }
.av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--papel); border-radius: 50%; background: var(--azu); color: #fff; font: 900 15px var(--texto); text-transform: uppercase; }
.barra-baixo { display: none; }

/* Estrutura */
.app { display: flex; flex-direction: column; min-height: calc(100vh - 68px); }
main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 32px; }
.rodape { display: flex; align-items: center; gap: 24px; padding: 18px 32px; background: #000; border-top: 3px solid var(--tinta3); color: var(--cinza); font-size: 12px; }
.rodape .logo { font-size: 18px; color: var(--papel); }
.rodape span { margin-left: auto; letter-spacing: 1px; }
.rodape a:hover { color: var(--ama); }

/* Títulos e textos */
.tit { margin-bottom: 6px; font: 54px/.95 var(--titulo); text-transform: uppercase; transform: skew(-8deg); transform-origin: left bottom; overflow-wrap: anywhere; }
.tit em { font-style: normal; color: var(--lar); }
.tit .tag { vertical-align: middle; transform: skew(8deg); }
.tit-sm { font-size: 34px; }
.sub { margin-bottom: 24px; color: var(--cinza); font-size: 15px; }
.sub a:hover { color: var(--ama); }
.dica { color: var(--cinza); font-size: 13px; }
.dica.ok { color: var(--ama); }
.eyebrow { color: var(--cinza); font: 800 11px var(--texto); letter-spacing: 2px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .sub { margin-bottom: 0; }
.sub-head { margin: 4px 0 18px; }
.secao { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font: 26px var(--titulo); text-transform: uppercase; }
.secao::after { content: ""; flex: 1; height: 3px; background: rgb(255 255 255 / .12); }
.vazio { padding: 22px; border: 2px dashed rgb(255 255 255 / .18); color: var(--cinza); text-align: center; }
.nota-rodape, .nota-teste { margin-top: 18px; }
.nota-teste { padding: 10px 14px; border-left: 4px solid var(--azu); background: rgb(40 150 255 / .08); }
.legenda { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; color: var(--cinza); font-size: 13px; }
.legenda i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

/* Botões, etiquetas e campos */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 0; background: var(--ama); color: #000; font: 18px var(--titulo); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; transform: skew(-10deg); cursor: pointer; }
.button:hover { background: rgb(255 226 110); }
.button:disabled { background: var(--tinta3); color: var(--cinza); cursor: default; }
.button-small { padding: 6px 12px; font-size: 14px; }
.button-quiet { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 2px var(--papel); }
.button-quiet:hover { background: rgb(255 255 255 / .1); }
.button-quiet:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta3); }
.button-dark { background: #000; color: var(--ama); }
.button-dark:hover { background: rgb(40 34 44); }
.button-outline-dark { background: transparent; color: #000; box-shadow: inset 0 0 0 2px #000; }
.button-outline-dark:hover { background: rgb(0 0 0 / .1); }
.icon-button { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid rgb(255 255 255 / .25); background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.icon-button:hover { border-color: var(--ama); color: var(--ama); }
.tag { display: inline-block; padding: 3px 8px; background: var(--papel); color: #000; font: 800 11px/1.3 var(--texto); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.tag.ama { background: var(--ama); }
.tag.ver { background: var(--ver); color: #fff; }
.tag.azu { background: var(--azu); color: #fff; }
.tag.cin { background: var(--tinta3); color: var(--papel); }
.tag.provisorio { background: transparent; color: var(--azu); box-shadow: inset 0 0 0 1px var(--azu); font-size: 10px; }
.tag.tag-regra { background: #000; color: var(--ama); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: var(--tinta2); color: var(--papel); font: 800 12px var(--texto); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.chip:hover { background: var(--tinta3); }
.chip.active { background: var(--papel); color: #000; }
.chip-select { appearance: none; padding-right: 14px; }
.chip-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--lar); }
.busca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.campo { flex: 1; min-width: 200px; padding: 12px 14px; border: 2px solid rgb(255 255 255 / .2); border-radius: 0; background: #000; color: var(--papel); font: 16px var(--texto); outline: none; }
.campo:focus { border-color: var(--ama); }
.campo::placeholder { color: rgb(150 140 150 / .8); }
.campo:disabled { opacity: .5; }
select.campo { min-width: 0; }
.cmp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cmp .campo { min-width: 0; }
label, .cmp label { color: var(--cinza); font: 800 11px var(--texto); letter-spacing: 2px; text-transform: uppercase; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dupla.tripla { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.dupla > * { min-width: 0; }
.cmp .campo { width: 100%; }
.cmp > .button { align-self: flex-start; }
.form-error { min-height: 18px; margin: 8px 0; color: rgb(255 120 120); font-size: 13px; font-weight: 600; }

/* Caixas e linhas */
.caixa { padding: 20px; background: var(--tinta2); border-top: 4px solid var(--ama); }
.caixa h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font: 22px var(--titulo); letter-spacing: .5px; text-transform: uppercase; }
.caixa-ver { border-top-color: var(--ver); }
.caixa-azu { border-top-color: var(--azu); margin-bottom: 16px; }
.caixa-lar { border-top-color: var(--lar); }
.caixa > .button { margin-top: 12px; }
.faixa { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 24px; }
.linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.linha:last-child { border-bottom: 0; }
a.linha:hover b { color: var(--ama); }
.linha .n { flex: 1; min-width: 0; }
.linha .n b { display: block; overflow-wrap: anywhere; }
.linha .n > span { color: var(--cinza); font-size: 13px; }
.linha.minha { box-shadow: inset 4px 0 0 var(--azu); padding-left: 12px; }
.tabela .linha { margin-bottom: 6px; padding: 12px 16px; border: 0; background: var(--tinta2); }
.vit { font: 26px var(--titulo); color: var(--ama); text-align: right; }
.vit small { display: block; color: var(--cinza); font: 700 10px var(--texto); }
.prog { width: 160px; height: 8px; margin-top: 6px; background: rgb(255 255 255 / .1); }
.prog i { display: block; height: 8px; background: var(--azu); }
.aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 18px; background: var(--ama); color: #000; font-weight: 600; }
.aviso .n { flex: 1; min-width: 200px; }
.aviso.neutro { background: var(--tinta2); color: var(--papel); box-shadow: inset 4px 0 0 var(--lar); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Emblema de rank (placeholder) */
.hex { display: grid; place-items: center; flex: none; width: 56px; height: 62px; border: 3px solid #000; outline: 2px solid var(--ama); background: linear-gradient(160deg, var(--ama), var(--lar)); color: #000; font: 26px var(--titulo); transform: skew(-10deg); }
.hex.p { background: repeating-linear-gradient(45deg, rgb(80 75 85) 0 6px, rgb(60 56 64) 6px 12px); color: var(--papel); }
.hex.sm { width: 40px; height: 44px; font-size: 20px; }
.hex.xs { width: 28px; height: 31px; border-width: 2px; outline-width: 1px; font-size: 14px; }
.hex.lg { width: 96px; height: 106px; font-size: 44px; }

/* Ranking Top 6 */
.grade-rank { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.r1 { position: relative; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; min-height: 330px; padding: 28px; overflow: hidden; background: linear-gradient(140deg, var(--lar), var(--ver)); border-bottom: 8px solid var(--ama); color: #000; }
.r1 .num { position: absolute; top: 18px; right: 20px; color: rgb(0 0 0 / .18); font: 190px/.8 var(--titulo); }
.r1 .hex { width: 84px; height: 94px; background: #000; color: var(--ama); font-size: 40px; }
.r1 .hex.p { color: var(--papel); }
.r1 h3 { margin-top: 14px; font: 52px/1 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.r1 p { font-weight: 700; }
.r1 .button { margin-top: 10px; background: #000; color: var(--ama); }
.r1.eu-rk { box-shadow: 0 0 0 3px var(--azu); }
.vaga-r1 { background: repeating-linear-gradient(-45deg, rgb(40 34 44) 0 14px, rgb(30 25 33) 14px 28px); color: var(--papel); border-bottom-color: var(--cinza); }
.vaga-r1 .num { color: rgb(255 255 255 / .06); }
.rk { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; background: var(--tinta2); border-left: 6px solid var(--lar); transform: skew(-4deg); }
.rk > * { transform: skew(4deg); }
.rk .hex { transform: skew(-6deg); }
.rk-info { flex: 1; min-width: 130px; }
.rk h3 { font: 26px/1.1 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.rk p { color: var(--cinza); font-size: 13px; }
.rk a:hover, .r1 a:hover { text-decoration: underline; }
.rk.eu-rk { border-left-color: var(--azu); box-shadow: 0 0 0 2px var(--azu); }
.rk-largo { grid-column: 1 / -1; }
.rk-vaga { border-left-color: var(--tinta3); }
.vaga-nome { color: var(--cinza); }

/* Perfil */
.perfil-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin: -32px -32px 28px; padding: 32px; background: linear-gradient(110deg, #000 0 62%, var(--lar) 62.1%, var(--ver)); }
.perfil-topo .av { width: 120px; height: 120px; border-width: 4px; font-size: 44px; }
.perfil-topo h2 { margin-top: 6px; font: 64px/1 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.perfil-topo p { color: var(--cinza); }
.perfil-topo .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.perfil-topo .acoes .button-quiet { background: rgb(0 0 0 / .55); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat { padding: 16px; background: var(--tinta2); text-align: center; }
.stat b { display: block; color: var(--ama); font: 44px var(--titulo); font-weight: 400; }
.stat span { color: var(--cinza); font: 700 11px var(--texto); letter-spacing: 1px; text-transform: uppercase; }
.record-bar { display: flex; height: 10px; overflow: hidden; background: var(--tinta3); }
.record-bar i { display: block; height: 100%; }
.bar-wins { width: var(--wins, 0%); background: var(--ama); }
.bar-losses { flex: 1; background: var(--ver); }
.record-bar.empty .bar-losses { background: var(--tinta3); }
.challenges-link { display: inline-block; margin-bottom: 8px; color: var(--ama); font-weight: 700; }
.challenges-link.none { color: var(--cinza); pointer-events: none; }
.caixa-icone { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.caixa-icone .hex { margin: 4px 0 4px 8px; }

/* Entrada / cadastro de nick */
.cad { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.cad .esq { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 48px; background: linear-gradient(150deg, var(--lar), var(--ver)); border-right: 12px solid var(--ama); color: #000; }
.cad-kicker { font-weight: 800; letter-spacing: 2px; }
.cad h1 { font: 84px/.9 var(--titulo); text-transform: uppercase; transform: skew(-8deg); transform-origin: left bottom; }
.cad-texto { max-width: 340px; font-weight: 600; }
.cad .dir { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 48px; max-width: 640px; }
.cad form { display: flex; flex-direction: column; gap: 10px; }
.cad form > .button { align-self: flex-start; }
.campo-grande { padding: 16px; border-color: var(--ama); font-size: 22px; }
.campo-codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase; }

/* Fotos de perfil (sem foto, fica a inicial na cor do jogador) */
.av.com-foto { overflow: hidden; background: var(--tinta3); }
.av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-sm { width: 28px; height: 28px; border-width: 1px; font-size: 12px; }
.av-xl { width: 128px; height: 128px; border-width: 4px; font-size: 48px; }
.r1-topo { display: flex; align-items: center; gap: 16px; }
.r1 .av { border-color: #000; }
.quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lutador .quem { justify-content: center; }

/* Perfil: primeiro acesso e edição */
.perfil-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.foto-campo { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.foto-campo .acoes-linha { margin: 8px 0; }

/* Painel de admin */
.contas .conta { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 12px 16px; background: var(--tinta2); }
.conta .n { flex: 1; min-width: 0; }
.conta .n b { display: block; overflow-wrap: anywhere; }
.conta .n b a:hover { color: var(--ama); }
.conta .n > span { color: var(--cinza); font-size: 13px; }
.conta-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.conta-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.conta.revogada { opacity: .6; }
.sem-nome { color: var(--cinza); font-style: italic; }
.codigos-novos { margin-bottom: 18px; }
.codigo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 14px; background: #000; }
.codigo { color: var(--ama); font: 700 24px ui-monospace, Consolas, monospace; letter-spacing: 2px; user-select: all; }
.codigo-linha .dica { flex: 1; min-width: 160px; }

/* Listas de jogadores nas janelas */
.login-players { display: grid; gap: 6px; margin: 4px 0 8px; max-height: 320px; overflow: auto; }
.login-players .login-player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: var(--tinta3); text-align: left; cursor: pointer; }
.login-players .login-player b { flex: 1; font-size: 14px; }
.login-players .login-player small { color: var(--cinza); font-size: 12px; }
.login-players .login-player:hover { box-shadow: inset 0 0 0 2px var(--ama); }
.login-player:disabled { opacity: .45; cursor: default; box-shadow: none !important; }

/* Desafios: cartão VS e relógio */
.lista-vs { display: grid; gap: 14px; }
.vs { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px; background: var(--tinta2); }
.vs .lado { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vs .lado.d { flex-direction: row-reverse; text-align: right; }
.vs .x { color: var(--lar); font: 44px var(--titulo); transform: skew(-10deg); }
.vs h3 { font: 24px var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.vs p { color: var(--cinza); font-size: 12px; }
.prazo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed rgb(255 255 255 / .15); }
.relogio { color: var(--ver); font: 30px var(--titulo); font-variant-numeric: tabular-nums; }
.vs.enviado .relogio { color: var(--ama); }
.relogio.estourado, .vez .estourado { color: var(--ver); }
.relogio.estourado::after { content: " · estourado"; font: 700 12px var(--texto); text-transform: uppercase; }
.barra { flex: 1; min-width: 120px; height: 10px; background: rgb(255 255 255 / .1); }
.barra i { display: block; height: 10px; background: linear-gradient(90deg, var(--ver), var(--ama)); }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.challenge-status { color: var(--ama); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.slot-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--cinza); font-size: 12px; }
.slot-chip { padding: 5px 9px; background: var(--tinta3); color: var(--papel); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-picker { grid-column: 1 / -1; margin: 0; padding: 10px 14px 14px; border: 2px solid var(--ama); }
.slot-picker legend { padding: 0 6px; color: var(--ama); font-weight: 700; font-size: 13px; }
.slot-option { display: flex; align-items: center; gap: 9px; padding: 7px 0; color: var(--papel); font: 600 14px var(--texto); letter-spacing: 0; text-transform: none; cursor: pointer; }
.slot-option input { accent-color: var(--lar); }
.slot-picker .challenge-actions { margin-top: 8px; }
.slot-rows { display: grid; gap: 8px; margin-bottom: 12px; }
.slot-row { display: flex; gap: 8px; }
.slot-row .campo { min-width: 0; }
.slot-row .icon-button { width: 48px; height: auto; }

/* Sala de disputa */
.sala-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#sala-hint { margin-bottom: 16px; }
#sala-hint:empty { display: none; }
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 18px; margin-bottom: 20px; }
.lutador { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; background: linear-gradient(160deg, var(--azu), rgb(20 60 140)); text-align: center; }
.lutador.b { background: linear-gradient(200deg, var(--ver), rgb(120 20 30)); }
.lutador > .av { width: 72px; height: 72px; font-size: 26px; }
.lutador .duel-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.lutador .duel-card b { font: 34px/1.05 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.lutador .duel-vd { padding: 2px 10px; background: rgb(0 0 0 / .35); font: 20px var(--titulo); }
.lutador .you-tag { background: rgb(0 0 0 / .4); }
.vsg { align-self: center; color: var(--ama); font: 80px var(--titulo); text-shadow: 4px 4px 0 var(--ver); transform: skew(-10deg); }
.duel-card { position: relative; user-select: none; }
.duel-card[draggable="true"] { cursor: grab; }
.duel-card.dragging { opacity: .4; }
.duel-card.drag-over, .duel-card.selected { outline: 3px solid var(--ama); outline-offset: 4px; }
.vagas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vaga { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 96px; padding: 14px; background: var(--tinta2); }
.vaga .duel-card { display: flex; flex-direction: column; gap: 6px; }
.vaga small { color: var(--cinza); font: 800 10px var(--texto); letter-spacing: 2px; }
.vaga b { overflow-wrap: anywhere; }
.vaga .duel-vd { color: var(--cinza); font-size: 13px; }
.vaga .duel-card.mine b { color: var(--azu); }
.vaga.pending { box-shadow: inset 0 0 0 2px var(--ama); }
.vaga.livre { align-items: center; border: 2px dashed rgb(255 255 255 / .25); background: transparent; color: var(--cinza); font-weight: 700; }
button.vaga.livre { cursor: pointer; color: var(--ama); border-color: rgb(255 210 30 / .45); }
button.vaga.livre:hover { background: rgb(255 210 30 / .08); }
.card-tag { align-self: flex-start; font-style: normal; }
.lutador .card-tag { align-self: center; }
.you-tag { align-self: flex-start; padding: 2px 6px; background: var(--azu); color: #fff; font: 800 10px var(--texto); letter-spacing: 1px; text-transform: uppercase; }
.lutador .you-tag { align-self: center; }
.mediator-icon { position: absolute; top: 0; right: 0; color: var(--ama); font-size: 16px; }
.vaga .button { align-self: flex-start; margin-top: 4px; }
.winner-button { margin-top: auto; }
.feed { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.feed li { padding: 8px 0; border-bottom: 1px solid var(--linha); color: rgb(220 212 220); }
.feed time { margin-right: 8px; color: var(--lar); font-weight: 800; font-variant-numeric: tabular-nums; }
.room-players { display: grid; gap: 6px; margin: 14px 0; max-height: 300px; overflow: auto; }
.room-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--tinta3); }
.room-row input { accent-color: var(--lar); }
.room-row label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--papel); font: 400 13px var(--texto); letter-spacing: 0; text-transform: none; }
.room-pick { flex: 1; min-width: 0; cursor: pointer; }
.room-pick span { display: grid; }
.room-pick b { font-size: 14px; }
.room-pick small { color: var(--cinza); font-size: 12px; }
.room-mediator { flex: none; color: var(--ama) !important; }

/* Regras */
.regras-lista { display: grid; gap: 10px; max-width: 900px; }
.regras-lista article { display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.regras-lista article > span { color: var(--lar); font: 30px/1 var(--titulo); }
.regras-lista :is(h3, h4) { display: block; margin-bottom: 4px; font: 22px var(--titulo); text-transform: uppercase; }
.regras-lista p { color: rgb(220 212 220); font-size: 14px; }
.regras-lista b { color: var(--papel); }
.regras-lista .caixa-ver > span { color: var(--ver); }
.regras-lista .caixa-azu { margin-bottom: 0; }
.regras-lista .caixa-azu > span { color: var(--azu); }
.regras { max-width: 900px; }
.regras-bloco + .regras-bloco { margin-top: 34px; }
.regras .secao { margin-top: 0; }
.regras-final { display: grid; gap: 12px; }
.regras-final p { color: rgb(220 212 220); }

/* Janelas */
dialog { width: min(460px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 24px; border: 0; border-top: 4px solid var(--ama); background: var(--tinta2); color: var(--papel); box-shadow: 0 20px 80px rgb(0 0 0 / .8); }
dialog::backdrop { background: rgb(5 5 7 / .8); backdrop-filter: blur(4px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dialog-head h2 { margin-top: 6px; font: 34px/1 var(--titulo); text-transform: uppercase; transform: skew(-8deg); transform-origin: left bottom; overflow-wrap: anywhere; }
.dialog-head h2 em { font-style: normal; color: var(--lar); }
dialog form > label { display: block; margin: 0 0 6px; }
dialog form > .campo { width: 100%; }
dialog .dica { margin: 12px 0; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; padding: 12px 18px; background: var(--ama); color: #000; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 20px) skew(-6deg); transition: .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0) skew(-6deg); }

/* Torneio: abas, chave e estados */
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.chave { display: flex; overflow-x: auto; padding: 22px 0 10px; }
.fase { flex: none; display: flex; flex-direction: column; width: 310px; padding: 0 24px; }
.fase:first-child { padding-left: 0; }
.fase-campeao { width: 220px; }
.fase h5 { height: 34px; color: var(--ama); font: 18px var(--titulo); letter-spacing: 1px; text-transform: uppercase; }
.fase h5 small { margin-left: 6px; color: var(--cinza); font: 700 11px var(--texto); }
.par { position: relative; display: flex; flex-direction: column; height: 384px; }
.par.g { height: 768px; }
.slot { position: relative; flex: 1; display: flex; align-items: center; }
.slot.f { flex: none; height: 768px; }
.par::after { content: ""; position: absolute; top: 96px; bottom: 96px; right: -24px; width: 24px; border: 3px solid var(--lar); border-left: 0; }
.par.g::after { top: 192px; bottom: 192px; }
.fase + .fase .slot::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 24px; height: 3px; margin: auto 0; background: var(--lar); }
.jogo { position: relative; flex: 1; min-width: 0; background: var(--tinta2); border-left: 5px solid rgb(90 84 96); }
a.jogo:hover { background: var(--tinta3); }
.jogo .st { position: absolute; top: -20px; left: 0; color: var(--cinza); font: 800 10px var(--texto); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.jogo.fim { border-left-color: var(--ama); }
.jogo.vivo { border-left-color: var(--ver); box-shadow: 0 0 0 2px var(--ver), 0 0 24px rgb(228 44 50 / .45); }
.jogo.vivo .st { color: var(--ver); }
.jogo.pick { border-left-color: var(--azu); box-shadow: 0 0 0 2px var(--azu); }
.jogo.pick .st { color: var(--azu); }
.jogo.espera { background: transparent; border: 2px dashed rgb(255 255 255 / .22); border-left-width: 5px; }
.j { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; }
.j + .j { border-top: 1px solid var(--linha); }
.j .nm { min-width: 0; }
.j .nm b { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.j .nm b .tag { padding: 1px 4px; font-size: 9px; vertical-align: 1px; }
.j .nm small { display: block; overflow: hidden; color: var(--cinza); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.j .sd { margin-right: 6px; color: var(--cinza); font: 800 10px var(--texto); }
.j em { min-width: 20px; font: 24px var(--titulo); font-style: normal; text-align: right; }
.j.ven em { color: var(--ama); }
.j.perde .nm b, .j.perde em { opacity: .5; }
.aguarda { color: var(--cinza); }
.campeao { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 3px solid var(--ama); text-align: center; }
.campeao .tr { color: var(--ama); font-size: 42px; }
.campeao b { font: 24px var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }

/* Retratos de personagem (placeholder ou imagem enviada) */
.ret { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 2px solid rgb(90 84 96); background: repeating-linear-gradient(135deg, rgb(70 64 76) 0 5px, rgb(52 47 58) 5px 10px); color: rgb(210 200 215); font: 800 10px var(--texto); }
.ret.img, .picks i.img, .img.com-img, .drop[style] { background-size: cover; background-position: center; }
.ret.oc { background: var(--tinta3); color: var(--cinza); font-size: 16px; }
.picks { display: flex; gap: 3px; margin-top: 4px; }
.picks i { width: 20px; height: 20px; border: 2px solid transparent; background: repeating-linear-gradient(135deg, rgb(70 64 76) 0 3px, rgb(52 47 58) 3px 6px); color: rgb(200 190 205); font: 800 7px/16px var(--texto); font-style: normal; text-align: center; }
.picks i.w { border-color: var(--ama); }
.picks i.l { opacity: .4; }
.picks i.n { border: 1px dashed rgb(255 255 255 / .25); background: transparent; }
.picks i.n.img { background-color: transparent; opacity: .55; }
.picks i.a { border-color: var(--ver); }
.picks i.o { background: var(--tinta3); font-size: 9px; }

/* Confronto */
.voltar { margin-bottom: 12px; }
.voltar .tag { vertical-align: 1px; }
.serie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 22px; }
.serie .lado { display: flex; align-items: center; gap: 14px; min-width: 0; }
.serie .lado.d { flex-direction: row-reverse; text-align: right; }
.serie .lado.d .picks { justify-content: flex-end; }
.serie h3 { font: 36px/1.05 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.av-lg { width: 70px; height: 70px; font-size: 26px; }
.placarg { display: flex; align-items: center; gap: 18px; font: 76px/1 var(--titulo); }
.placarg b { color: var(--ama); font-weight: 400; }
.placarg span { color: var(--cinza); font-size: 28px; }
.rod { display: grid; grid-template-columns: 1fr 54px 70px 54px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px; background: var(--tinta2); border-left: 5px solid var(--azu); }
.pk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk > div { min-width: 0; }
.pk.d { flex-direction: row-reverse; text-align: right; }
.pk .ret { width: 64px; height: 64px; font-size: 12px; }
.pk b { display: block; overflow: hidden; font: 22px var(--titulo); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.pk small { color: var(--cinza); font-size: 12px; }
.pt { display: grid; place-items: center; height: 64px; background: rgb(255 255 255 / .06); font: 30px var(--titulo); text-align: center; }
.pt.w { background: var(--ama); color: #000; }
.rn { color: var(--cinza); font: 800 11px var(--texto); letter-spacing: 1px; text-align: center; }
.rod.agora { border-left-color: var(--ver); box-shadow: 0 0 0 2px var(--ver); }
.rod.agora .rn { color: var(--ver); }
.rod.fut { opacity: .45; border-left-color: var(--tinta3); }
.registro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -2px 0 12px; padding: 12px 14px; background: rgb(228 44 50 / .12); border-left: 5px solid var(--ver); }
.registro span { flex: 1; min-width: 180px; font-weight: 700; }

/* Pick */
.pick-vs { margin: -6px 0 12px; }
.passos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.passos span { padding: 8px 12px; background: var(--tinta2); color: var(--cinza); font: 800 11px var(--texto); letter-spacing: 1px; text-transform: uppercase; transform: skew(-10deg); }
.passos span.ok { background: var(--tinta3); color: var(--papel); }
.passos span.on { background: var(--ama); color: #000; }
.vez { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px 18px; background: var(--ama); color: #000; }
.vez b { font: 30px/1.1 var(--titulo); font-weight: 400; text-transform: uppercase; }
.vez .n { flex: 1; min-width: 200px; }
.vez [data-until] { font-weight: 800; font-variant-numeric: tabular-nums; }
.vez.adv { background: var(--tinta2); color: var(--papel); box-shadow: inset 0 0 0 2px var(--azu); }
.vez.rev { background: linear-gradient(110deg, var(--lar), var(--ver)); color: #000; }
.seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 18px; }
.seq .dica { margin-right: 6px; }
.seq i { padding: 5px 8px; background: var(--tinta2); color: var(--cinza); font: 800 11px var(--texto); font-style: normal; }
.seq i.f { background: var(--tinta3); color: var(--papel); }
.seq i.eu { box-shadow: inset 0 -3px 0 var(--azu); }
.seq i.on { background: var(--ama); color: #000; }
.pickw { display: grid; grid-template-columns: 270px 1fr 250px; align-items: start; gap: 20px; }
.pickw-espectador { grid-template-columns: 1fr 1fr; }
.pickw > *, .faixa > *, .form-admin > * { min-width: 0; }
.lista h4 { margin-bottom: 4px; font: 20px var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.lista .dica { margin-bottom: 10px; }
.sl { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px; background: var(--tinta2); border-left: 4px solid var(--azu); }
.sl .r { width: 28px; color: var(--ama); font: 20px var(--titulo); }
.sl .nm { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sl .nm small { display: block; color: var(--cinza); font-size: 11px; font-weight: 400; }
.sl .ret { width: 46px; height: 46px; }
.sl .ctl { display: flex; flex-direction: column; gap: 2px; }
.sl .ctl button { width: 28px; height: 22px; padding: 0; border: 0; background: var(--tinta3); color: var(--papel); font-size: 13px; cursor: pointer; }
.sl .ctl button:hover:not(:disabled) { background: var(--ama); color: #000; }
.sl .ctl button:disabled { opacity: .3; cursor: default; }
.sl.vazio { background: transparent; border: 2px dashed rgb(255 255 255 / .2); border-left-width: 4px; color: var(--cinza); }
.sl.atual { background: rgb(255 210 30 / .08); border-left-color: var(--ama); box-shadow: 0 0 0 2px var(--ama); }
.sl.adv { border-left-color: var(--ver); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.grade.inativa { opacity: .5; }
.pc { position: relative; display: block; min-width: 0; padding: 6px; border: 0; background: var(--tinta2); color: var(--papel); text-align: left; }
button.pc { cursor: pointer; }
button.pc:hover:not(:disabled) { box-shadow: 0 0 0 2px rgb(255 210 30 / .5); }
button.pc:disabled { cursor: default; }
.pc .img { display: grid; place-items: center; height: 112px; background: repeating-linear-gradient(135deg, rgb(70 64 76) 0 6px, rgb(52 47 58) 6px 12px); color: rgb(210 200 215); font: 800 13px var(--texto); }
.pc b { display: block; overflow: hidden; margin-top: 6px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.pc small { display: block; color: var(--cinza); font-size: 11px; }
.pc .tag { position: absolute; top: 10px; left: 10px; padding: 2px 5px; font-size: 9px; }
.pc.sel { background: rgb(255 210 30 / .12); box-shadow: 0 0 0 3px var(--ama); }
.pc.usado { opacity: .4; }
.pc.off .img { filter: grayscale(1); opacity: .5; }
.acao { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px -32px -32px; padding: 14px 32px; background: #000; border-top: 3px solid var(--ama); }
.acao .n { flex: 1; min-width: 200px; }
.acao b { font: 22px var(--titulo); font-weight: 400; text-transform: uppercase; }
.face { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.face i { width: 46px; height: 58px; border: 2px solid #000; outline: 2px solid var(--ama); background: repeating-linear-gradient(45deg, var(--lar) 0 4px, rgb(200 90 10) 4px 8px); color: #000; font: 22px/54px var(--titulo); font-style: normal; text-align: center; }

/* Catálogo e administração */
.form-admin { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
.drop { display: grid; place-items: center; height: 190px; border: 2px dashed var(--ama); background: repeating-linear-gradient(135deg, rgb(40 34 44) 0 8px, rgb(30 25 33) 8px 16px); color: var(--cinza); font: 400 13px var(--texto); letter-spacing: 0; text-align: center; text-transform: none; cursor: pointer; }
.drop[style] { width: 190px; }
.drop.over { background-color: rgb(255 210 30 / .1); box-shadow: inset 0 0 0 3px var(--ama); }
.lin { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lin .n { flex: 1; min-width: 0; }
.lin .n b { display: block; font-size: 14px; }
.lin .n span { color: var(--cinza); font-size: 12px; }

/* Classificação */
.tabela-wrap { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 15px; }
.tab th { padding: 10px 12px; border-bottom: 3px solid var(--lar); color: var(--cinza); font: 800 11px var(--texto); letter-spacing: 1px; text-align: left; text-transform: uppercase; }
.tab td { padding: 12px; border-bottom: 1px solid var(--linha); background: var(--tinta2); }
.tab td.pos { width: 56px; color: var(--ama); font: 24px var(--titulo); }
.tab td.pts { color: var(--ama); font: 26px var(--titulo); }
.tab tr.eu td { background: rgb(40 150 255 / .18); }
.vazio-torneio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; }
.vazio-torneio b { color: var(--papel); font: 26px var(--titulo); text-transform: uppercase; }

/* Celular */
@media (max-width: 700px) {
  .topo { height: 56px; gap: 10px; padding: 0 16px; }
  .topo .nav, .topo .eu span:not(.av) { display: none; }
  .logo { flex: 1; font-size: 22px; }
  .av { width: 34px; height: 34px; font-size: 13px; }
  main { padding: 18px 16px calc(var(--nav-h) + 28px); }
  .rodape { display: none; }
  .barra-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); background: #000; border-top: 3px solid var(--lar); }
  .barra-baixo[hidden] { display: none; }
  .barra-baixo a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 12px; font: 700 10px var(--texto); letter-spacing: .5px; text-transform: uppercase; }
  .barra-baixo a i { font-size: 20px; font-style: normal; line-height: 1; }
  .barra-baixo a.active { color: var(--ama); }
  .barra-baixo a.active::before { content: ""; position: absolute; top: -3px; left: 20px; right: 20px; height: 3px; background: var(--ama); }
  .barra-baixo .badge { position: absolute; top: 4px; right: 50%; margin: 0 -24px 0 0; }
  .toast { bottom: calc(var(--nav-h) + 16px); max-width: calc(100% - 32px); }
  .tit { font-size: 40px; }
  .tit-sm { font-size: 28px; }
  .sub { margin-bottom: 16px; font-size: 14px; }
  .page-head { align-items: flex-start; margin-bottom: 16px; }
  .page-head .tit + .sub { margin-bottom: 0; }
  .secao { font-size: 22px; }
  .grade-rank { grid-template-columns: 1fr; gap: 10px; }
  .r1 { grid-row: auto; min-height: 220px; padding: 20px; }
  .r1 .num { font-size: 130px; }
  .r1 h3 { font-size: 40px; }
  .r1 .hex { width: 64px; height: 72px; font-size: 30px; }
  .rk { padding: 12px; flex-wrap: wrap; }
  .rk h3 { font-size: 22px; }
  .faixa { grid-template-columns: 1fr; }
  .chip { padding: 8px 10px; font-size: 11px; }
  .busca .campo { min-width: 100%; }
  .tabela .linha { padding: 10px 12px; }
  .prog { width: 100px; }
  .perfil-topo { grid-template-columns: auto 1fr; gap: 16px; margin: -18px -16px 20px; padding: 22px 16px; background: linear-gradient(160deg, #000 0 64%, var(--lar) 64.1%, var(--ver)); }
  .perfil-topo .av { width: 76px; height: 76px; font-size: 28px; }
  .perfil-topo h2 { font-size: 40px; }
  .perfil-topo .acoes { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 34px; }
  .cad { grid-template-columns: 1fr; min-height: 0; }
  .cad .esq { padding: 32px 20px; border-right: 0; border-bottom: 10px solid var(--ama); }
  .cad h1 { font-size: 56px; }
  .cad .dir { padding: 20px 16px 32px; }
  .foto-campo { gap: 14px; }
  .av-xl { width: 92px; height: 92px; font-size: 34px; }
  .contas .conta { flex-wrap: wrap; padding: 10px 12px; }
  .conta-acoes { width: 100%; justify-content: flex-start; }
  .codigo { font-size: 20px; }
  .dupla { grid-template-columns: 1fr; }
  .dupla.tripla { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dupla.tripla .campo { padding: 10px 8px; }
  .vs { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 14px; }
  .vs .lado, .vs .lado.d { flex-direction: column; text-align: center; }
  .vs h3 { font-size: 18px; }
  .vs .x { font-size: 30px; }
  .vs .hex { width: 44px; height: 50px; font-size: 20px; }
  .prazo .challenge-actions { width: 100%; }
  .prazo .challenge-actions .button { flex: 1; }
  .duelo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vsg { grid-column: 1 / -1; grid-row: 1; margin-bottom: -6px; font-size: 48px; text-align: center; }
  .lutador { padding: 14px; }
  .lutador .duel-card b { font-size: 24px; }
  .lutador > .av { width: 52px; height: 52px; font-size: 20px; }
  .vagas { grid-template-columns: 1fr 1fr; }
  .fase { width: 270px; padding: 0 18px; }
  .fase-campeao { width: 180px; }
  .par::after { right: -18px; width: 18px; }
  .fase + .fase .slot::before { left: -18px; width: 18px; }
  .serie { gap: 6px; }
  .serie .lado, .serie .lado.d { flex-direction: column; gap: 6px; text-align: center; }
  .serie .lado .picks, .serie .lado.d .picks { justify-content: center; }
  .serie h3 { font-size: 20px; }
  .av-lg { width: 56px; height: 56px; font-size: 20px; }
  .placarg { gap: 8px; font-size: 48px; }
  .placarg span { font-size: 18px; }
  .rod { grid-template-columns: 1fr 34px 34px 34px 1fr; gap: 5px; padding: 6px; }
  .pk, .pk.d { flex-direction: column; gap: 4px; text-align: center; }
  .pk .ret { width: 52px; height: 52px; font-size: 10px; }
  .pk b { max-width: 96px; font-size: 13px; }
  .pk small { font-size: 10px; }
  .pt { height: 40px; font-size: 20px; }
  .rn { font-size: 9px; }
  .vez b { font-size: 22px; }
  .pickw, .pickw-espectador { grid-template-columns: 1fr; gap: 14px; }
  .pickw .meu { order: 1; }
  .pickw .cat { order: 2; }
  .pickw .dele { order: 3; }
  .lista .sls { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .lista .sl { flex: none; flex-direction: column; gap: 4px; width: 76px; margin: 0; padding: 6px 4px; border-left: 0; border-top: 4px solid var(--azu); text-align: center; }
  .lista .sl.adv { border-top-color: var(--ver); }
  .lista .sl.atual { border-top-color: var(--ama); }
  .lista .sl.vazio { border-left-width: 2px; border-top-width: 4px; }
  .sl .nm { width: 66px; font-size: 10px; }
  .sl .ret { width: 44px; height: 44px; }
  .sl .ctl { flex-direction: row; }
  .sl .ctl button { width: 30px; height: 24px; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pc .img { height: 84px; }
  .acao { bottom: var(--nav-h); margin: 16px -16px 0; padding: 12px 16px; }
  .form-admin { grid-template-columns: 1fr; }
  .tab .hm { display: none; }
  .tab td, .tab th { padding: 9px 6px; }
}

/* Modo local (config.js vazio): selo discreto no canto; no celular fica acima da barra de baixo. */
.modo-local { position: fixed; left: 10px; bottom: 10px; z-index: 30; padding: 3px 9px; border: 1px solid var(--azu); background: rgb(16 13 18 / .85); color: var(--azu); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.lembrar { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-weight: 600; cursor: pointer; }
.lembrar input { width: 16px; height: 16px; margin: 0; accent-color: var(--lar); }
@media (max-width: 700px) { .modo-local { bottom: calc(var(--nav-h) + 8px); left: 8px; } }