/* 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); }
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; }