:root{
  /* tema escuro (padrão original) — MESMOS valores de player/index.html
     (bloco :root), pra landing/entrar/conta/404 serem o mesmo produto que o
     app, não uma segunda paleta inventada por cima */
  --bg:#07070c; --fg:#f4f4f8; --dim:#8b8b9e; --forte:#d3d3e0;
  --accent:#ff2d78; --accent2:#7c5cff; --good:#2ce8a0;
  --line:#ffffff1a; --cx:#1b1b27;
  --navbg:#07070ce6; --input-bg:#ffffff0d; --btn-sec-bg:#ffffff12;
  --erro-bg:#ff2d5514; --erro-border:#ff2d5540; --erro-fg:#ff9db5;
  --ok-bg:#2ce8a014; --ok-border:#2ce8a040;
  --sombra-cartao:none;
  /* o rosa/roxo puro (--accent/--accent2) não fecha 4,5:1 com texto branco —
     o botão usa uma versão um pouco mais escura só pro fundo dele (mesma
     solução que o app já usa pro mesmo problema) */
  --btn-a:#d81f68; --btn-b:#6a4bdb;
}
html[data-tema="claro"]{
  /* tema claro — MESMOS valores de player/index.html (bloco :root[tema=claro]).
     todo par texto/fundo abaixo foi medido com contraste WCAG real (ver script de auditoria) */
  --bg:#f6f6fa; --fg:#14141c; --dim:#5b5b70; --forte:#33333f;
  --accent:#c4145a; --accent2:#5636d6; --good:#0a7d55;
  --line:#0000001f; --cx:#ffffff;
  --navbg:#f6f6fae6; --input-bg:#00000008; --btn-sec-bg:#00000010;
  --erro-bg:#ffe3e9; --erro-border:#e0567b66; --erro-fg:#a3123f;
  --ok-bg:#dcf6ea; --ok-border:#067a5240;
  --sombra-cartao:0 1px 2px #00000008,0 10px 26px #00000012;
  --btn-a:var(--accent); --btn-b:var(--accent2); /* no claro o próprio accent já fecha 4,5:1 com branco */
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

/* foco de teclado visível em qualquer link/botão do site — antes só existia
   dentro do <style> de vendas.html, então quem navegava por teclado em
   entrar/conta/404 tabulava às cegas, sem nenhum contorno aparecendo */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent2);
  outline-offset:3px;border-radius:8px}

/* troca de tema é instantânea no clique, mas suave — some no reduced-motion abaixo */
body,.nav,.cx,.bt,.temasel,.campo input,.abas{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:16px 28px;background:var(--navbg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.logo span{background:linear-gradient(92deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav .dir{margin-left:auto;display:flex;align-items:center;gap:10px}

.bt{display:inline-block;background:linear-gradient(92deg,var(--btn-a),var(--btn-b));
  color:#fff;padding:12px 26px;border-radius:999px;font-weight:650;font-size:15px;
  text-decoration:none;box-shadow:0 8px 26px #ff2d7833;text-align:center}
.bt.sm{padding:9px 18px;font-size:14px;box-shadow:none}
.bt.sec{background:var(--btn-sec-bg);color:var(--fg);box-shadow:none;font-weight:500}
.bt:disabled{opacity:.55;cursor:not-allowed}

.wrap{max-width:980px;margin:0 auto;padding:0 24px}
h1{font-size:clamp(34px,6.5vw,62px);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(92deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(22px,3.4vw,32px);font-weight:750;letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:18px;color:var(--dim);max-width:60ch;margin-top:18px;text-wrap:pretty}
.dim{color:var(--dim)}

.cx{background:var(--cx);border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:var(--sombra-cartao)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.campo input{width:100%;background:var(--input-bg);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;outline:none;font-size:15px}
.campo input:focus{border-color:var(--accent2)}
.erro{background:var(--erro-bg);border:1px solid var(--erro-border);color:var(--erro-fg);
  border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:16px}
.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--good);
  border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:16px}

/* texto só pra leitor de tela — usado nos rótulos do seletor de tema */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* link "pular pro conteúdo" — some da tela normalmente, aparece só quando
   ganha foco (primeiro Tab da página), pra quem navega por teclado não
   precisar passar por nav/seletor de tema toda vez */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);
  color:var(--bg);padding:12px 18px;border-radius:10px;font-weight:600;
  font-size:14px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}

/* campo de senha com botão de mostrar/esconder — usado em entrar.html e
   conta.html (troca de senha). o botão fica dentro do campo, à direita */
.senha-caixa{position:relative}
.senha-caixa input{padding-right:46px}
.senha-caixa .olho{position:absolute;right:4px;top:4px;bottom:4px;width:38px;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  color:var(--dim)}
.senha-caixa .olho:hover{color:var(--fg)}
.senha-caixa .olho svg{width:19px;height:19px}
.senha-caixa .olho .risco{opacity:0;transition:opacity .1s ease}
.senha-caixa .olho.aceso .risco{opacity:1}

/* botão de apagar com confirmação em duas etapas, sem usar confirm() do
   navegador — no segundo clique ele fica vermelho e muda de texto */
.del.confirmando{color:var(--erro-fg);border-color:var(--erro-border);
  background:var(--erro-bg)}

/* seletor de tema (claro / escuro / automático) — vive na barra de navegação */
.temasel{display:flex;align-items:center;gap:2px;background:var(--cx);
  border:1px solid var(--line);padding:3px;border-radius:999px;flex:none}
.temasel button{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;color:var(--dim)}
.temasel button svg{width:16px;height:16px;display:block}
.temasel button.sel{background:var(--fg);color:var(--bg)}
.temasel button:hover:not(.sel){color:var(--fg)}
.temasel button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* celular: logo + ações não cabem numa linha só (ainda mais com o seletor de tema),
   então a barra quebra em duas linhas em vez de espremer ou vazar da tela */
@media (max-width:640px){
  .nav{flex-wrap:wrap;row-gap:10px;padding:14px 18px}
  .nav .dir{width:100%;justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}