/* Academia de Líderes — tema preto / dourado / vermelho (o mesmo da logo) */
:root {
  --fundo: #0a0a0c;
  --painel: #141417;
  --painel2: #1c1c21;
  --borda: #2a2a31;
  --texto: #f2f2f3;
  --suave: #9a9aa5;
  --ouro: #d4a851;
  --ouro2: #f3d78a;
  --vermelho: #d81f2a;
  --verde: #2fb56b;
  --grad-ouro: linear-gradient(135deg, #f3d78a, #c9983f 55%, #8a6321);
  --raio: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100dvh; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
a { color: var(--ouro2); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.suave { color: var(--suave); }
.ouro { color: var(--ouro2); }
.pequeno { font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--borda); background: var(--painel2); color: var(--texto);
  padding: 12px 16px; border-radius: 12px; font-weight: 600; text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ouro { background: var(--grad-ouro); color: #1a1204; border-color: transparent; }
.btn.vermelho { background: var(--vermelho); border-color: transparent; color: #fff; }
.btn.fantasma { background: transparent; }
.btn.mini { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.btn.bloco { width: 100%; }

label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: #0e0e11;
  border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ouro); }
textarea { resize: vertical; min-height: 80px; }

.etiqueta { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--painel2); color: var(--suave); white-space: nowrap; }
.etiqueta.ok { background: rgba(47,181,107,.15); color: #57d68f; }
.etiqueta.alerta { background: rgba(212,168,81,.16); color: var(--ouro2); }
.etiqueta.erro { background: rgba(216,31,42,.18); color: #ff6a73; }

#aviso {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99;
  background: #222228; border: 1px solid var(--borda); color: var(--texto);
  padding: 12px 18px; border-radius: 12px; max-width: 90vw; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
#aviso.erro { border-color: var(--vermelho); }