/* Status público do FlyFF Universe — página leve, tema escuro único (fora do jogo; sem canvas). */
:root {
  --bg: #0d1017;
  --panel: #151a24;
  --panel2: #1b2130;
  --texto: #dce3f0;
  --fraco: #8b94a7;
  --acento: #ffb02e;
  --ok: #4cc38a;
  --ruim: #e5534b;
  --linha: #262d3d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--texto);
  font: 15px/1.5 system-ui, "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 10px;
  flex-wrap: wrap;
}
h1 { font-size: 20px; letter-spacing: 0.3px; }
h1 .sub { color: var(--fraco); font-weight: 400; font-size: 14px; margin-left: 6px; }
.saude { font-size: 13px; color: var(--fraco); }
.saude.ok::before { content: "● "; color: var(--ok); }
.saude.ruim::before { content: "● "; color: var(--ruim); }
.badges { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* Conteúdo RESTRITO (decisão do dono 2026-08-05): só aparece com sessão de admin validada pelo
   backend — esconder aqui é apresentação; o dado nem chega sem o Bearer aprovado. */
body:not(.admin) .soAdmin { display: none; }
.entrar { font-size: 12px; color: var(--fraco); text-decoration: none; opacity: 0.7; }
.entrar:hover { opacity: 1; text-decoration: underline; }
.loginOverlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
/* `hidden` sozinho PERDE para o display:flex acima (estilo de autor > UA stylesheet) — sem esta
   regra o overlay nasce aberto e o Cancelar "não funciona". Só abre pelo link "entrar". */
.loginOverlay[hidden] { display: none; }
.loginBox {
  background: var(--painel, #1c2230); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 260px;
}
.loginBox h3 { font-size: 14px; margin-bottom: 4px; }
.loginBox input {
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px;
  color: inherit; padding: 7px 9px; font-size: 13px;
}
.loginAcoes { display: flex; gap: 8px; justify-content: flex-end; }
.loginAcoes button {
  background: rgba(255, 176, 46, 0.15); border: 1px solid rgba(255, 176, 46, 0.4); border-radius: 4px;
  color: inherit; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.loginErro { color: var(--ruim, #ff6b6b); font-size: 12px; min-height: 14px; }
main { flex: 1; padding: 8px 22px 22px; max-width: 1100px; width: 100%; margin: 0 auto; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.tile {
  background: var(--panel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
}
.tile .rotulo { font-size: 12px; color: var(--fraco); text-transform: uppercase; letter-spacing: 0.5px; }
.tile .valor { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile.destaque { grid-column: span 2; border-color: #3a3325; background: linear-gradient(180deg, #1d1a12, var(--panel)); }
.tile.destaque .valor { color: var(--acento); font-size: 34px; }
.tile .mini { font-size: 12px; color: var(--fraco); margin-top: 4px; }

.painel {
  background: var(--panel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.painel h2 { font-size: 14px; color: var(--fraco); font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; }
.troca button {
  background: var(--panel2);
  color: var(--fraco);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 2px 10px;
  margin-left: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.troca button.ativo { color: var(--texto); border-color: var(--acento); }
#grafico { width: 100%; height: 160px; display: block; }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .colunas { grid-template-columns: 1fr; } .tile.destaque { grid-column: span 1; } }

.feed, .top { list-style: none; max-height: 340px; overflow-y: auto; }
.feed li, .top li { padding: 6px 2px; border-bottom: 1px solid var(--linha); font-size: 13.5px; display: flex; gap: 8px; }
.feed li:last-child, .top li:last-child { border-bottom: none; }
.feed .hora { color: var(--fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed .mapa { color: var(--fraco); margin-left: auto; white-space: nowrap; }
.top .qtd { margin-left: auto; color: var(--acento); font-variant-numeric: tabular-nums; }
.vazio { color: var(--fraco); font-style: italic; }
footer { padding: 12px 22px 18px; color: var(--fraco); font-size: 12px; text-align: center; }

/* ── Balanceamento (restrito) ──────────────────────────────────────────────────────────────────── */
.notaPainel { color: var(--dim, #8b93a7); font-size: 12px; margin: 0 0 10px; }
.subPainel { font-size: 13px; margin: 16px 0 6px; font-weight: 600; }
.subPainel .dica { color: var(--dim, #8b93a7); font-size: 11px; font-weight: 400; margin-left: 8px; }
.tabelaWrap { overflow-x: auto; }
.tabela { border-collapse: collapse; width: 100%; font-size: 12px; }
.tabela th, .tabela td { text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(128,128,128,.22); white-space: nowrap; }
.tabela th { color: var(--dim, #8b93a7); font-weight: 600; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.vazio { text-align: center; color: var(--dim, #8b93a7); }
/* Razão simulado×observado: verde perto de 1, âmbar longe, vermelho muito longe. */
.razao.ok { color: #64c8a0; }
.razao.atencao { color: #ffb454; }
.razao.ruim { color: #ff6b6b; }

/* FUNIL: barra proporcional ao maior valor da tabela. */
.tabela td.colBarra, .tabela th.colBarra { width: 40%; min-width: 80px; }
.barra { height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--acento), #c9821c); min-width: 2px; }