/* Turbo Quiz Studio, telas de acesso. Mesmos tokens da landing (landing/dark-saas/index.html); nada de paleta nova,
   só --erro, que a landing não precisa. Sem biblioteca, sem fonte externa. Escuro e, desde 2026-10-07, claro: o tema do
   Studio (tema.js põe data-tema no <html> antes do desenho; docs/architecture/14-design-system.md).
   Pares de contraste (WCAG, calculados com a luminância relativa):
   texto 18,0:1 sobre --fundo, 17,2:1 sobre --superficie, 16,1:1 sobre --superficie-2 ·
   texto-2 8,9:1 / 8,5:1 / 8,0:1 (fundo / superficie / superficie-2) ·
   acento-texto 8,1:1 / 7,7:1 / 7,2:1 · erro #FF9B9B 9,8:1 / 9,3:1 / 8,7:1 · verde-ok 10,2:1 / 9,8:1 / 9,2:1 ·
   branco sobre --acento 5,13:1 (botão), sobre --acento-hover 6,9:1 ·
   componente (>= 3:1): --linha-forte sobre --fundo 4,3:1 (borda do campo), sobre --superficie 4,1:1 (borda do botão
   secundário), foco --texto sobre --superficie 17,2:1.
   Claro: texto 17,5 / 18,9 / 17,0 · texto-2 7,4 / 8,0 / 7,2 · acento-texto 6,4 / 6,9 / 6,2 · verde-ok 5,1 / 5,5 / 4,9 ·
   erro 6,1 / 6,6 / 5,9 · branco sobre --acento 5,13 e --acento-hover 6,9 · --linha-forte 3,1 / 3,4 / 3,0. */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/auth/assets/hanken-grotesk-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --fundo:#0A0B0D; --superficie:#101216; --superficie-2:#161920; --superficie-3:#1C2029;
  --texto:#F3F5F8; --texto-2:#A8AFBC;
  --linha:#262A32; --linha-forte:#6E7686;
  --acento:#3D5AFE; --acento-hover:#2F49D6; --sobre-acento:#FFFFFF; --acento-texto:#8CA0FF;
  --feixe:#7C93FF; --verde-ok:#34D399; --erro:#FF9B9B;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;
  --raio:6px; --raio-janela:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --sombra-cartao:0 40px 90px -40px rgb(0 0 0/.9);
  /* a grade e o clarão do fundo: calibrados para o preto; o claro tem os seus (o --feixe a 16% some no fundo claro) */
  --grade:color-mix(in srgb,var(--linha) 70%,transparent); --clarao:color-mix(in srgb,var(--feixe) 16%,transparent);
}
:root[data-tema='claro']{
  color-scheme:light;
  --fundo:#F5F6F8; --superficie:#FFFFFF; --superficie-2:#F1F3F6; --superficie-3:#E7EAEF;
  --texto:#0F1115; --texto-2:#4A5160;
  --linha:#E2E5EA; --linha-forte:#858C9B;
  --acento-texto:#2F49D6; --verde-ok:#047857; --erro:#B42323;
  --sombra-cartao:0 1px 2px rgb(15 17 21/.06),0 24px 48px -24px rgb(15 17 21/.22);
  --grade:color-mix(in srgb,var(--linha-forte) 30%,transparent); --clarao:color-mix(in srgb,var(--acento) 15%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--fundo);color:var(--texto);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,p{margin:0}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px}

/* grade fina esmaecendo ao fundo, com o clarão do --feixe (a mesma do hero da landing) */
.fundo-grade{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.fundo-grade::before{content:"";position:absolute;inset:0;background:
  linear-gradient(to right,var(--grade) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(to bottom,var(--grade) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask:radial-gradient(ellipse 70% 75% at 50% 42%,#000 25%,transparent 100%);mask:radial-gradient(ellipse 70% 75% at 50% 42%,#000 25%,transparent 100%)}
.fundo-grade::after{content:"";position:absolute;left:50%;top:30%;width:min(48rem,140%);aspect-ratio:2/1;translate:-50% -50%;background:radial-gradient(closest-side,var(--clarao),transparent);filter:blur(24px)}

/* uma coluna centrada */
.pagina{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--e5);width:min(100% - 2*var(--e4),26rem);margin-inline:auto;padding-block:var(--e6) var(--e7)}
@media (min-width:48em){.pagina{padding-top:var(--e8)}}

.logo{display:inline-flex;align-items:center;gap:var(--e2);min-height:44px;padding:0 var(--e3) 0 var(--e2);text-decoration:none;font:700 1.125rem/1 var(--sans);letter-spacing:-.02em;background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--raio)}
.logo img{width:28px;height:28px;flex:none}.logo b{font-weight:inherit;color:var(--acento-texto)}

.cartao{width:100%;display:grid;gap:var(--e4);padding:var(--e5);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-janela);box-shadow:var(--sombra-cartao)}
h1{font:600 1.625rem/1.15 var(--sans);letter-spacing:-.03em}
h2{font:600 1.0625rem/1.3 var(--sans);letter-spacing:-.02em}
.sub{color:var(--texto-2);font-size:.9375rem}

form{display:grid;gap:var(--e4)}
.campo{display:grid;gap:var(--e2)}
label{font-weight:600;font-size:.9375rem}
.entrada{position:relative;display:flex}
input{width:100%;min-width:0;min-height:48px;padding:0 var(--e4);background:var(--fundo);color:var(--texto);font:400 1rem/1.2 var(--sans);border:1px solid var(--linha-forte);border-radius:var(--raio);transition:border-color .15s var(--ease)}
input:hover{border-color:var(--texto-2)}
input:focus-visible{outline:2px solid var(--texto);outline-offset:2px}
input[aria-invalid="true"]{border-color:var(--erro)}
.entrada:has(.ver-senha:not([hidden])) input{padding-right:3.25rem}
.ver-senha{position:absolute;right:2px;top:2px;bottom:2px;width:44px;display:grid;place-items:center;padding:0;background:transparent;color:var(--texto-2);border:0;border-radius:var(--raio);cursor:pointer}
.ver-senha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ver-senha .olho-fechado,.ver-senha[aria-pressed="true"] .olho-aberto{display:none}
.ver-senha[aria-pressed="true"] .olho-fechado{display:block}
.ver-senha:hover{background:var(--superficie-2)}
.dica{color:var(--texto-2);font-size:.875rem}

/* medidor: só informa (comprimento), nunca bloqueia */
.forca{display:flex;align-items:center;gap:var(--e3);font-size:.875rem;color:var(--texto-2)}
.forca-barra{flex:1;min-width:0;height:4px;border-radius:2px;background:var(--linha);overflow:hidden}
.forca-barra i{display:block;height:100%;width:0;border-radius:2px;background:var(--erro);transition:width .25s var(--ease),background-color .25s var(--ease)}
.forca[data-nivel="1"] i{width:33%}
.forca[data-nivel="2"] i{width:66%;background:var(--acento-texto)}
.forca[data-nivel="3"] i{width:100%;background:var(--verde-ok)}

/* botões: acento só no primário; o secundário tem contorno */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);width:100%;min-height:48px;padding:var(--e3) var(--e4);font:600 1rem/1.2 var(--sans);text-align:center;text-decoration:none;border:1px solid transparent;border-radius:var(--raio);cursor:pointer;transition:background-color .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.btn-primario{background:var(--acento);color:var(--sobre-acento)}
.btn-primario:hover{background:var(--acento-hover)}
.btn-sec{background:var(--superficie);color:var(--texto);border-color:var(--linha-forte)}
.btn-sec:hover{background:var(--superficie-2);border-color:var(--texto-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:progress;opacity:.75}
.btn[disabled]:hover{background:var(--acento)}
.btn-sec[disabled]:hover{background:var(--superficie);border-color:var(--linha-forte)}
.btn[aria-busy="true"]::before{content:"";flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
@media (prefers-reduced-motion:no-preference){.btn[aria-busy="true"]::before{animation:gira .7s linear infinite}@keyframes gira{to{transform:rotate(1turn)}}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* avisos em linha: o texto diz o que fazer; a cor não é o único sinal (borda lateral + marca) */
.aviso{display:flex;gap:var(--e3);padding:var(--e3) var(--e4);background:var(--superficie-2);border:1px solid var(--linha);border-left-width:3px;border-radius:var(--raio);font-size:.9375rem}
.aviso::before{content:"";flex:none;width:10px;height:10px;margin-top:.45em;border-radius:2px;background:currentColor}
.aviso p{min-width:0;overflow-wrap:anywhere;color:var(--texto)}
.aviso-erro{border-left-color:var(--erro);color:var(--erro)}
.aviso-ok{border-left-color:var(--verde-ok);color:var(--verde-ok)}

/* conta */
.conta-email{display:grid;gap:2px;overflow-wrap:anywhere}
.rotulo{color:var(--texto-2);font-size:.875rem}
.bloco{display:grid;gap:var(--e4);padding-top:var(--e5);border-top:1px solid var(--linha)}
.bloco-sair{gap:var(--e3)}
.solo{padding-top:var(--e2)}

/* links secundários são só texto */
.rodape{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e1) var(--e5)}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--texto-2);font-size:.9375rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linha-forte)}
.link:hover{color:var(--texto);text-decoration-color:var(--texto)}

/* checklist dos requisitos da senha: círculo vazio até atender, marca verde depois */
.requisitos{display:grid;gap:var(--e1);margin:var(--e2) 0 0;padding:0;list-style:none;font-size:.875rem;color:var(--texto-2)}
.requisitos li{display:flex;align-items:center;gap:var(--e2)}
.requisitos li::before{content:"";flex:none;width:14px;height:14px;box-sizing:border-box;border:1.5px solid var(--linha-forte);border-radius:50%;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.requisitos li[data-ok="true"]{color:var(--texto)}
.requisitos li[data-ok="true"]::before{border-color:var(--verde-ok);background:var(--verde-ok)}
.requisitos li{position:relative}
.requisitos li[data-ok="true"]::after{content:"";position:absolute;left:4.5px;top:calc(50% - 5px);width:4px;height:8px;border:solid var(--fundo);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.9)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* contato: a mesma caixa dos campos, em várias linhas */
.entrada textarea{width:100%;min-height:9rem;padding:var(--e3) var(--e4);background:var(--fundo);color:var(--texto);font:400 1rem/1.5 var(--sans);border:1px solid var(--linha-forte);border-radius:var(--raio);resize:vertical}
.entrada textarea:focus-visible{outline:2px solid var(--texto);outline-offset:2px}