/* PAINEL ADMIN -- mesmo clima do lobby (escuro, laranja). Celular primeiro:
   cartoes em grade que quebra, tabelas com rolagem lateral propria. */
:root {
  --fundo: #0b0f15; --painel: #121821; --painel2: #182030; --borda: #263142;
  --texto: #e6ebf2; --apagado: #8a95a3; --laranja: #ff9f1c; --laranja2: #ffd166;
  --verde: #4fd18b; --vermelho: #ff5a4f; --azul: #5aa9ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.4 "Segoe UI", Roboto, Arial, sans-serif; }
button, input, select { font: inherit; }

.topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px;
  background: linear-gradient(180deg, #1b212b, #12161d); border-bottom: 2px solid var(--laranja); }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 40px; width: auto; }
.marca span { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--laranja); }
.quem { color: var(--apagado); font-size: 12px; margin-left: auto; }
.voltar { color: var(--texto); text-decoration: none; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--borda); border-radius: 4px; }
.voltar:hover { border-color: var(--laranja); }

.abas { display: flex; gap: 4px; padding: 10px 16px 0; overflow-x: auto; border-bottom: 1px solid var(--borda); }
.abas button { padding: 9px 16px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--apagado);
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; cursor: pointer; white-space: nowrap; }
.abas button.ativa { color: var(--texto); border-bottom-color: var(--laranja); }

main { padding: 16px; max-width: 1280px; margin: 0 auto; }
h2 { margin: 22px 0 10px; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--apagado); }
h2:first-child { margin-top: 4px; }
.aviso { color: var(--apagado); }
.erro-grande { margin: 40px auto; max-width: 420px; text-align: center; padding: 24px; background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; padding: 12px; }
.cartao small { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--apagado); }
.cartao b { display: block; font-size: 26px; margin-top: 4px; }
.cartao span { display: block; font-size: 12px; color: var(--apagado); margin-top: 2px; }
.cartao.destaque { border-color: var(--laranja); }
.cartao.verde b { color: var(--verde); }

.tabela-caixa { overflow-x: auto; background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #1c2533; white-space: nowrap; }
th { position: sticky; top: 0; background: var(--painel2); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--apagado); font-weight: 600; }
th:first-child, td:first-child { text-align: left; }
td.txt, th.txt { text-align: left; }
tr:last-child td { border-bottom: 0; }
tr.hoje td { background: #1d1a12; }
tr.mudado td { background: #1d1a12; }

.barras { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 10px; background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barra i { display: block; width: 100%; background: var(--laranja); border-radius: 2px 2px 0 0; min-height: 1px; }
.barra i.b2 { background: var(--azul); }
.barra em { font-style: normal; font-size: 10px; color: var(--texto); margin-bottom: 2px; }
.barra small { font-size: 9px; color: var(--apagado); margin-top: 3px; white-space: nowrap; }

.lista-barras { display: grid; gap: 6px; background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; padding: 12px; }
.lb-linha { display: grid; grid-template-columns: 110px 1fr 46px; gap: 8px; align-items: center; font-size: 13px; }
.lb-linha .trilho { height: 10px; background: #1c2533; border-radius: 5px; overflow: hidden; }
.lb-linha .trilho i { display: block; height: 100%; background: var(--laranja); }
.lb-linha b { text-align: right; }

.linha-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
input[type=text], input[type=number], input[type=search], select { padding: 8px 10px; background: #0d121a; color: var(--texto); border: 1px solid var(--borda); border-radius: 4px; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--laranja); }
td input[type=number] { width: 110px; text-align: right; padding: 5px 8px; }
.btn { padding: 8px 14px; border: 0; border-radius: 4px; cursor: pointer; font-weight: 700; letter-spacing: 1px; font-size: 12px; text-transform: uppercase;
  color: #1c1206; background: linear-gradient(180deg, var(--laranja2), var(--laranja)); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sec { color: var(--texto); background: #263142; }
.btn.perigo { color: #fff; background: #b8322a; }
.btn.mini { padding: 5px 10px; font-size: 11px; }

.jogadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.jog { background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; padding: 12px; }
.jog.banido { border-color: var(--vermelho); }
.jog h3 { margin: 0 0 2px; font-size: 17px; }
.jog .sub { color: var(--apagado); font-size: 12px; margin-bottom: 8px; word-break: break-all; }
.jog dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; font-size: 13px; }
.jog dt { color: var(--apagado); }
.jog dd { margin: 0; text-align: right; }
.selo { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; margin-left: 6px; }
.selo.ban { background: var(--vermelho); color: #fff; }
.selo.bot { background: #263142; color: var(--apagado); }
/* item INVISIVEL na loja (migracao_055): linha apagada + selo */
.selo.oculto { background: #4a3b12; color: #ffd166; }
tr.oculto td { opacity: .55; }
tr.oculto td:last-child { opacity: 1; }
.selo.on { background: var(--verde); color: #08130d; }
.selo.off { background: #263142; color: var(--apagado); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .duas { grid-template-columns: 1fr; } main { padding: 12px; } .cartao b { font-size: 22px; } }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 10px 18px; border-radius: 5px; background: #1f2a3a;
  border: 1px solid var(--borda); z-index: 9; max-width: calc(100vw - 32px); }
.toast.ok { border-color: var(--verde); }
.toast.erro { border-color: var(--vermelho); }
.nota { color: var(--apagado); font-size: 12px; margin: 6px 0 0; }