:root {
  --preto: #09090a; --painel: #141418; --painel2: #1b1b20; --linha: #2a2a31; --linha2: #3a3a43;
  --aco: #eceef1; --aco2: #b7bcc4; --aco3: #80858e; --aco4: #555a62;
  --tnt: #d6231c; --tnt-claro: #ff4332; --faisca: #ffb02e; --verde: #5fe06a; --amarelo: #ffd23f;
  --t: "Barlow Condensed", sans-serif; --c: "Barlow", system-ui, sans-serif; --m: "JetBrains Mono", monospace;
}
* { box-sizing: border-box; }
/* O atributo hidden SEMPRE esconde (.login é display:grid; sem isto a tela de login
   continuava por cima do painel depois de entrar). */
[hidden] { display: none !important; }
body { margin: 0; background: var(--preto); color: var(--aco2); font-family: var(--c); font-size: 15px; -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; color: var(--aco); }
button { font: inherit; cursor: pointer; }
input, button { font-family: var(--c); }
::selection { background: var(--tnt); color: #fff; }
:focus-visible { outline: 2px solid var(--faisca); outline-offset: 2px; }

.marca { font-family: "Teko", sans-serif; font-weight: 600; font-size: 30px; letter-spacing: .02em; line-height: 1; color: var(--aco); text-transform: uppercase; }
.marca b { color: var(--tnt-claro); }
.marca span { color: var(--aco4); font-size: .7em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  font-family: var(--t); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; border: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: filter .2s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn--tnt { color: #fff; background: linear-gradient(180deg, var(--tnt-claro), var(--tnt) 60%, #8f1510); }
.btn--tnt:hover { filter: brightness(1.08); }
.btn--aco { color: var(--aco); background: linear-gradient(180deg, #2a2a31, #1c1c21); box-shadow: inset 0 0 0 1px var(--linha2); }
.btn--aco:hover { color: #fff; }
.btn--peq { min-height: 34px; padding: 6px 12px; font-size: 12.5px; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.btn[disabled] { opacity: .5; cursor: default; }

/* --- login --- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(700px 400px at 50% 0%, rgba(214,35,28,.14), transparent 70%), var(--preto); }
.login__caixa { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 32px 26px;
  background: linear-gradient(160deg, var(--painel2), var(--painel)); border: 1px solid var(--linha2); position: relative; }
.login__caixa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--tnt) 0 10px, #111 10px 20px); }
.login__sub { margin: -6px 0 6px; font-family: var(--t); letter-spacing: .16em; text-transform: uppercase; font-size: 13px; color: var(--aco3); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-family: var(--t); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--aco); }
input[type=password], input[type=search] { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 16px; color: var(--aco);
  background: #0b0b0d; border: 1px solid var(--linha2); border-radius: 0; }
input:focus { outline: none; border-color: var(--faisca); }
.erro { color: var(--tnt-claro); font-size: 14px; margin: 0; }

/* --- app --- */
.app { max-width: 1100px; margin: 0 auto; padding: 16px clamp(12px, 3vw, 28px) 60px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 18px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; }

.resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.cartao { padding: 16px; background: var(--painel); border: 1px solid var(--linha); min-width: 0; }
/* O valor em reais (R$ 1.234,50) a 40 px não cabia em duas colunas de um celular de 390: a página ficava com 418 de
   largura e o celular afastava o zoom de tudo (28/10). */
.cartao b { display: block; font-family: "Teko", sans-serif; font-weight: 600; font-size: clamp(28px, 8.5vw, 40px); line-height: .9; color: var(--aco); overflow-wrap: anywhere; }
.cartao b.dinheiro { color: var(--verde); }
.cartao span { font-family: var(--t); letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; color: var(--aco3); }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; overflow-x: auto; }
.aba { flex: none; background: none; border: 1px solid transparent; color: var(--aco3); font-family: var(--t); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; font-size: 13px; padding: 9px 16px; }
.aba[aria-selected="true"] { color: var(--faisca); border-color: rgba(255,176,46,.5); border-bottom-color: transparent; background: rgba(255,176,46,.06); }

.ferramentas { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.servidor { margin-bottom: 14px; }
.servidor__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--aco3); }
.servidor__numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.servidor__numeros div { padding: 10px 12px; background: var(--painel); border: 1px solid var(--linha); }
.servidor__numeros b { display: block; font-family: "Teko", sans-serif; font-weight: 600; font-size: 26px; line-height: 1; color: var(--aco); }
.servidor__numeros span { font-family: var(--t); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--aco3); }
@media (min-width: 720px) { .servidor__numeros { grid-template-columns: repeat(4, 1fr); } }
.suspeitos { margin-top: 26px; }
.suspeitos__titulo { font-family: var(--t); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--aco2); margin: 0 0 10px; }
.ferramentas input { flex: 1; max-width: 340px; }
.contagem { font-family: var(--m); font-size: 12px; color: var(--aco4); }

.tabela-caixa { border: 1px solid var(--linha); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tabela th { text-align: left; font-family: var(--t); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: 11.5px; color: var(--aco3); padding: 10px 12px; background: var(--painel2); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: rgba(255,255,255,.02); }
.codigo { font-family: var(--m); font-weight: 700; color: var(--aco); letter-spacing: .04em; }
.mono { font-family: var(--m); font-size: 12px; color: var(--aco3); }
.copiar { background: none; border: 1px solid var(--linha2); color: var(--aco3); font-size: 11px; padding: 2px 7px; margin-left: 6px; }
.copiar:hover { color: #fff; border-color: var(--tnt); }

.selo { font-family: var(--t); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; padding: 2px 8px; border: 1px solid currentColor; }
.selo--ativa, .selo--aprovado { color: var(--verde); }
.selo--banida, .selo--expirado { color: var(--tnt-claro); }
.selo--pendente { color: var(--amarelo); }
.selo--adm { color: var(--faisca); }

.acao { background: none; border: 1px solid var(--linha2); color: var(--aco2); font-family: var(--t); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; padding: 5px 10px; white-space: nowrap; }
.acao--banir:hover { color: #fff; border-color: var(--tnt); background: rgba(214,35,28,.18); }
.acao--liberar:hover { color: #fff; border-color: var(--verde); background: rgba(95,224,106,.14); }
.acao--adm:hover:not(:disabled) { color: #fff; border-color: var(--faisca); background: rgba(255,176,46,.14); }
.acao--ligado { color: var(--faisca); border-color: rgba(255,176,46,.45); }
.acao:disabled { opacity: .4; cursor: not-allowed; }
.acoes { display: flex; gap: 6px; justify-content: flex-end; }

.vazio { padding: 30px; text-align: center; color: var(--aco4); }
.paginacao { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; font-family: var(--m); font-size: 13px; color: var(--aco3); }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 50; padding: 12px 18px; background: var(--painel2);
  border: 1px solid var(--linha2); border-left: 3px solid var(--verde); color: var(--aco); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s; max-width: calc(100% - 32px); }
.toast.mostrar { opacity: 1; translate: -50% 0; }
.toast.ruim { border-left-color: var(--tnt-claro); }

@media (min-width: 720px) { .resumo { grid-template-columns: repeat(4, 1fr); } }

/* --- criar chaves --- */
.ferramentas .btn { margin-left: auto; }
.janela { width: min(440px, calc(100% - 24px)); padding: 0; border: 1px solid var(--linha2); background: linear-gradient(160deg, var(--painel2), var(--painel)); color: var(--aco2); }
.janela::backdrop { background: rgba(0,0,0,.72); }
.janela__caixa { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; }
.janela h2 { font-family: var(--t); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 20px; }
.janela__sub { margin: -8px 0 4px; font-size: 13.5px; color: var(--aco3); }
.janela input[type=number], .janela input[type=email], .janela input[type=text] { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 16px; color: var(--aco);
  background: #0b0b0d; border: 1px solid var(--linha2); border-radius: 0; }
.janela__acoes { display: flex; justify-content: flex-end; gap: 10px; }
.criadas { border-top: 1px solid var(--linha); padding-top: 12px; }
.criadas__topo { display: flex; justify-content: space-between; align-items: center; font-family: var(--t); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--verde); }
.criadas ol { margin: 8px 0 0; padding-left: 0; list-style-position: inside; max-height: 240px; overflow: auto; }
.criadas li { font-family: var(--m); font-weight: 700; color: var(--aco); padding: 3px 0; }
.criadas li .copiar { margin-left: 8px; }

/* --- trocar a chave da conta Google (28/10) --- */
.acao--troca:hover { color: #fff; border-color: #6fa8ff; background: rgba(111,168,255,.14); }
.janela--troca { width: min(980px, calc(100% - 20px)); max-height: calc(100dvh - 24px); overflow: auto; }
.troca { display: flex; flex-direction: column; gap: 16px; padding: 0 22px 22px; position: relative; }
.troca::before { content: ""; position: sticky; top: 0; display: block; height: 4px; margin: 0 -22px;
  background: repeating-linear-gradient(-45deg, #6fa8ff 0 10px, #111 10px 20px); z-index: 1; }
.troca__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 16px; }
.troca__kicker { margin: 0 0 2px; font-family: var(--t); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 11.5px; color: #6fa8ff; }
.troca__topo h2 { font-family: var(--t); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 24px; }
.troca__fechar { background: none; border: 1px solid var(--linha2); color: var(--aco3); width: 36px; height: 36px; font-size: 15px; }
.troca__fechar:hover { color: #fff; border-color: var(--tnt); }

.troca__google { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #0d0d10; border: 1px solid var(--linha); }
.troca__inicial { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  font-family: "Teko", sans-serif; font-size: 28px; color: #fff; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); }
.troca__inicial span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #16161b; line-height: 1; padding-top: 3px; }
.troca__google b { display: block; color: var(--aco); font-size: 16px; }
.troca__google .mono { overflow-wrap: anywhere; }
.troca__google-datas { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--aco3); line-height: 1.55; }

.troca__lados { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
@media (min-width: 760px) { .troca__lados { grid-template-columns: 1fr 44px 1fr; } }
.troca__seta { display: grid; place-items: center; color: var(--faisca); font-family: "Teko", sans-serif; font-size: 40px; line-height: 1; }
.troca__seta span { display: inline-block; transform: rotate(90deg); }
@media (min-width: 760px) { .troca__seta span { transform: none; } }

/* Cada lado com a faixa de cor no alto: laranja = a chave de agora, azul = a nova; verde quando confere, vermelha quando
   não pode (o canto cortado dos botões aqui apagava um pedaço da borda). */
.lado { position: relative; padding: 18px 16px 16px; background: linear-gradient(160deg, var(--painel2), var(--painel)); border: 1px solid var(--linha2); min-width: 0; }
.lado::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px; background: var(--cor-lado, var(--linha2)); }
.lado--atual { --cor-lado: var(--faisca); border-color: rgba(255,176,46,.3); }
.lado--nova { --cor-lado: #6fa8ff; border-color: rgba(111,168,255,.35); }
.lado--ok { --cor-lado: var(--verde); border-color: rgba(95,224,106,.5); box-shadow: inset 0 0 0 1px rgba(95,224,106,.14); }
.lado--ruim { --cor-lado: var(--tnt-claro); border-color: rgba(255,67,50,.55); }
.lado--fraca { --cor-lado: var(--amarelo); border-color: rgba(255,210,63,.45); }
.lado__rotulo { margin: 0 0 10px; font-family: var(--t); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.lado--atual .lado__rotulo { color: var(--faisca); }
.lado--nova .lado__rotulo { color: #6fa8ff; }
.lado__codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.lado__codigo .codigo { font-size: 20px; }
.lado__selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.numeros div { padding: 8px 10px; background: #0d0d10; border: 1px solid var(--linha); min-width: 0; }
.numeros b { display: block; font-family: "Teko", sans-serif; font-weight: 600; font-size: 25px; line-height: 1; color: var(--aco); overflow-wrap: anywhere; }
.numeros b.vazio-num { color: var(--aco4); }
.numeros span { font-family: var(--t); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; color: var(--aco3); }
.aparelhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.aparelhos li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; background: rgba(255,255,255,.025); border-left: 2px solid var(--linha2); }
.aparelhos li.comum { border-left-color: var(--verde); background: rgba(95,224,106,.07); }
.aparelhos li.banido { border-left-color: var(--tnt-claro); }
.aparelhos .mono { color: var(--aco2); }
.aparelhos__titulo { margin: 0 0 6px; font-family: var(--t); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--aco3); }
.lado__aviso { margin: 0 0 12px; padding: 9px 11px; font-size: 13.5px; border-left: 3px solid var(--tnt-claro); background: rgba(214,35,28,.12); color: #ffd9d4; }
.lado__dica { margin: 8px 0 0; font-size: 13px; color: var(--aco3); }

.troca__busca { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.troca__busca .campo { flex: 1; min-width: 0; }
.troca__busca input, .troca__final input[type=text] { width: 100%; min-height: 40px; padding: 8px 12px; font-size: 15px; color: var(--aco);
  background: #0b0b0d; border: 1px solid var(--linha2); border-radius: 0; }
.troca__busca input { font-family: var(--m); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.troca__busca input::placeholder { text-transform: none; font-weight: 500; }

.provas { padding: 12px 14px; border: 1px solid var(--linha2); border-left-width: 4px; }
.provas--ok { border-color: rgba(95,224,106,.5); background: rgba(95,224,106,.06); }
.provas--fraca { border-color: rgba(255,210,63,.55); background: rgba(255,210,63,.06); }
.provas h3 { margin: 0 0 6px; font-family: var(--t); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--aco); }
.provas--ok h3 { color: var(--verde); }
.provas--fraca h3 { color: var(--amarelo); }
.provas p { margin: 0; font-size: 13.5px; }
.provas ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }

.troca__final { display: grid; gap: 12px; }
.marcar { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--aco2); cursor: pointer; }
.marcar input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--tnt); }

.historico { border-top: 1px solid var(--linha); padding-top: 14px; }
.historico h3 { margin: 0 0 8px; font-family: var(--t); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--aco2); }
.historico ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.historico li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: #0d0d10; border: 1px solid var(--linha); font-size: 13px; }
.historico li > .selo, .historico li > .acao { justify-self: start; }
.historico .de-para { font-family: var(--m); font-size: 12.5px; color: var(--aco); overflow-wrap: anywhere; }
.historico .motivo { display: block; color: var(--aco3); font-family: var(--c); font-size: 12.5px; margin-top: 2px; }
.selo--jogo { color: #6fa8ff; }
.selo--painel { color: var(--faisca); }
.selo--desfazer { color: var(--aco3); }
@media (max-width: 560px) {
  .troca { padding: 0 14px 16px; }
  .troca::before { margin: 0 -14px; }
  .troca__google { flex-wrap: wrap; }
  .troca__google-datas { margin-left: 0; text-align: left; }
  .historico li { grid-template-columns: 1fr; }
}

/* --- envio de arquivos para a VPS (publicar.sh): a barra de progresso do topo --- */
.envio { margin-bottom: 22px; padding: 16px; background: linear-gradient(160deg, var(--painel2), var(--painel)); border: 1px solid var(--linha2); position: relative; }
.envio::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: repeating-linear-gradient(-45deg, var(--faisca) 0 10px, #111 10px 20px); }
.envio__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; color: var(--aco3); }
.envio__topo h2 { font-family: var(--t); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; }
.envio__nome { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.envio__nome b { color: var(--aco); font-weight: 600; overflow-wrap: anywhere; }
.envio__nome span { font-family: "Teko", sans-serif; font-weight: 600; font-size: 30px; line-height: .8; color: var(--aco); }
.barra { height: 18px; background: #0d0d10; border: 1px solid var(--linha2); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, var(--faisca), #d9861a);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 8px, transparent 8px 16px), linear-gradient(180deg, var(--faisca), #d9861a);
  background-size: 22px 22px, auto; animation: barra-listras 1s linear infinite; }
.barra--ok i { background: linear-gradient(180deg, var(--verde), #3aa845); animation: none; }
.barra--ruim i { background: linear-gradient(180deg, var(--tnt-claro), var(--tnt)); animation: none; }
.barra--andando i { opacity: .75; }
@keyframes barra-listras { to { background-position: 22px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .barra i { animation: none; } }
.envio__numeros { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--aco3); }
.envio__numeros b { color: var(--aco); font-weight: 700; }
.envio__etapa { margin: 8px 0 0; font-size: 13px; color: var(--aco2); }
.envio__etapa:empty { display: none; }
.envio__etapa--ruim { color: var(--tnt-claro); }
.envio__lista { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linha); display: grid; gap: 6px; font-size: 13px; }
.envio__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.envio__lista .mono { color: var(--aco3); font-size: 12px; }