:root {
  --fundo: #f6f3fd; --superficie: #ffffff; --superficie2: #f1ecfb; --borda: #e3dcf5; --borda-forte: #c9bdf0;
  --texto: #1e174d; --texto2: #5b5689; --texto3: #8c88b0; --botao-fundo: #2f1a7a; --botao-texto: #ffffff;
  --ok: #0e7c66; --ok-fundo: #e3f5ef; --alerta: #b4233c; --alerta-fundo: #fdecef; --aviso: #7a5300; --aviso-fundo: #fff6dc;
  --sombra: 0 1px 2px rgba(30, 23, 77, .06), 0 8px 24px rgba(30, 23, 77, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #120f26; --superficie: #1b1736; --superficie2: #241f45; --borda: rgba(147, 114, 216, .25); --borda-forte: rgba(147, 114, 216, .45);
    --texto: #f3f0ff; --texto2: #c3bce6; --texto3: rgba(255, 255, 255, .45); --botao-fundo: #6b45c8;
    --ok: #4ade80; --ok-fundo: rgba(74, 222, 128, .12); --alerta: #f0716c; --alerta-fundo: rgba(240, 113, 108, .12); --aviso: #f0b45c; --aviso-fundo: rgba(240, 180, 92, .12);
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  --fundo: #120f26; --superficie: #1b1736; --superficie2: #241f45; --borda: rgba(147, 114, 216, .25); --borda-forte: rgba(147, 114, 216, .45);
  --texto: #f3f0ff; --texto2: #c3bce6; --texto3: rgba(255, 255, 255, .45); --botao-fundo: #6b45c8;
  --ok: #4ade80; --ok-fundo: rgba(74, 222, 128, .12); --alerta: #f0716c; --alerta-fundo: rgba(240, 113, 108, .12); --aviso: #f0b45c; --aviso-fundo: rgba(240, 180, 92, .12);
  --sombra: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.45; }
a { color: inherit; }
button, input, select { font: inherit; }
.topo { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo-linha { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; text-decoration: none; }
.marca img { width: 24px; height: 28px; }
.topo .titulo { font-weight: 700; color: var(--texto2); }
.topo .espaco { flex: 1; }
.quem { font-size: 13.5px; color: var(--texto2); }
.quem b { color: var(--texto); }
.pagina { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 28px; margin: 6px 0 4px; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0 0 12px; }
.sub { color: var(--texto2); margin: 0 0 20px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; padding: 20px; box-shadow: var(--sombra); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 11px; border: 0; background: var(--botao-fundo); color: var(--botao-texto); font-weight: 700; cursor: pointer; text-decoration: none; }
.botao:disabled { opacity: .6; cursor: default; }
.botao.secundario { background: var(--superficie2); color: var(--texto); }
.botao.perigo { background: var(--alerta-fundo); color: var(--alerta); }
.botao.pequeno { padding: 6px 11px; font-size: 13.5px; border-radius: 9px; }
.link-botao { background: none; border: 0; padding: 0; color: var(--texto2); font-weight: 600; cursor: pointer; text-decoration: underline; }
label.campo { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=search], select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--botao-fundo); outline-offset: 2px; }
.ajuda { font-size: 12.5px; color: var(--texto3); margin: 5px 0 0; }
.erro { background: var(--alerta-fundo); color: var(--alerta); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin: 12px 0 0; }
.ok-msg { background: var(--ok-fundo); color: var(--ok); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin: 12px 0 0; }
.login { max-width: 400px; margin: 10vh auto; }
.login .marca { margin-bottom: 18px; }
.login .botao { width: 100%; margin-top: 18px; }
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--superficie2); color: var(--texto2); white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.ruim { background: var(--alerta-fundo); color: var(--alerta); }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo.forte { background: var(--botao-fundo); color: #fff; }
.vazio { color: var(--texto2); padding: 18px 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; transition: .25s; background: var(--texto); color: var(--superficie); padding: 11px 16px; border-radius: 12px; font-weight: 600; z-index: 50; pointer-events: none; }
.toast.mostrar { opacity: 1; transform: translateX(-50%); }
@media (max-width: 640px) { .pagina { padding: 18px 14px 50px; } h1 { font-size: 23px; } .topo-linha { padding: 10px 14px; } }