:root {
  --bg: #0f1115; --painel: #171a21; --painel2: #1f232c; --borda: #2a2f3a;
  --texto: #e8eaf0; --suave: #9aa3b2; --destaque: #f2a33a; --destaque2: #ffbf66;
  --ok: #3ccf7a; --aviso: #f2c94c; --ruim: #ef5b5b; --raio: 12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); }
button, select, input { font: inherit; color: inherit; }
button {
  background: var(--painel2); border: 1px solid var(--borda); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
button:hover { border-color: #3a4150; background: #252a35; }
button.primario { background: var(--destaque); color: #1a1207; border-color: var(--destaque); font-weight: 600; }
button.primario:hover { background: var(--destaque2); }
button.perigo { color: var(--ruim); }
button.ativo { background: #3a1d1d; border-color: var(--ruim); color: #ffb3b3; }
button:disabled { opacity: .5; cursor: default; }
input, select {
  background: var(--painel2); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
a { color: var(--destaque2); }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.espaco { flex: 1; }
.bolinha { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #555; flex: none; }
.bolinha.excelente, .bolinha.online { background: var(--ok); }
.bolinha.boa { background: var(--aviso); }
.bolinha.ruim, .bolinha.perdida { background: var(--ruim); }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2b3140; color: var(--texto);
  padding: 10px 16px; border-radius: 8px; z-index: 99; box-shadow: 0 6px 24px #0008; font-size: 14px;
}
.logo { font-weight: 800; letter-spacing: .5px; }
.logo span { color: var(--destaque); }
video { background: #000; }