/* ==========================================================================
   A entrada — o login (e a página de quem é convidado)
   --------------------------------------------------------------------------
   Um cartão só, com um círculo saindo do alto (o W do site, ou quem entrou
   por este aparelho — ver auth/_topo), o título, os campos e o botão.
   No alto da página, o caminho de volta e o tema.

   Tamanhos pensados para o dedo: campos e botão com 52px de altura e o
   mesmo arredondado (14px) — botão em pílula ao lado de campo quase reto
   parece de outra tela. Texto dos campos com 16px (abaixo disso o iPhone
   dá zoom), links com 44px de área de toque.

   Esta folha é só daqui. Ela não carrega o app.css e não chama nada de
   fora: a fonte é a nossa, em public/fonts, e os ícones são desenhos no
   próprio HTML. As cores são as do site, na mesma chave de tema.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #f4f6fa;
    --card: #ffffff;
    --card-2: #f1f4f9;
    --borda: #dfe4ee;
    --borda-h: #cdd5e4;
    --t1: #131720;
    --t2: #4a5468;
    --t3: #7b8699;
    --accent: #2563eb;
    --btn: #2563eb;
    --perigo: #b42318;
    --ok: #067647;
    --aviso: #b45309;
    --certo: #16a34a;
    --brilho: rgba(37, 99, 235, .12);
    --sombra: 0 14px 34px rgba(16, 24, 40, .10);
    --raio: 14px;
    /* campo com folga para o dedo; o botão um pouco mais baixo — ele não
       precisa gritar, é a única ação do cartão */
    --alto: 50px;
    --alto-btn: 46px;
    --tema-trilho: #e7ecf4;
    --tema-borda: rgba(15, 23, 42, .10);
    --tema-bola: #ffffff;
    --tema-bola-borda: rgba(15, 23, 42, .06);
    --tema-icone: #2563eb;
    --tema-estrela: rgba(37, 99, 235, .6);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="dark"] {
    --bg: #121214;
    --card: #191a1e;
    --card-2: #1f2127;
    --borda: #2a2c33;
    --borda-h: #3a3d46;
    --t1: #f3f4f6;
    --t2: #a8afbd;
    --t3: #79808e;
    --accent: #5b9cf6;
    --btn: #2563eb;
    /* tons 500 no escuro, como o painel (02/10/2026: eram os 300, pastel) */
    --perigo: #ef4444;
    --ok: #10b981;
    --aviso: #fbbf24;
    --certo: #22c55e;
    --brilho: rgba(91, 156, 246, .14);
    --sombra: 0 18px 40px rgba(0, 0, 0, .5);
    --tema-trilho: #0c0c0e;
    --tema-borda: rgba(255, 255, 255, .12);
    --tema-bola: #2b2b32;
    --tema-bola-borda: rgba(255, 255, 255, .08);
    --tema-icone: #5b9cf6;
    --tema-estrela: #5b9cf6;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
    margin: 0;
    min-height: 100svh;
    display: grid;
    place-items: center;
    /* em cima, o lugar da barra (voltar e tema) */
    /* e dos lados, a câmera do iPhone deitado (01/10/2026) */
    padding: calc(76px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--bg);
    color: var(--t1);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* o brilho azul da capa, atrás do cartão */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(640px 440px at 50% 22%, var(--brilho), transparent 70%);
    pointer-events: none;
}

.entrada {
    position: relative;
    width: min(384px, 100%);
    /* um pouco acima do meio: o olho procura o cartão no terço de cima */
    margin-bottom: 6vh;
}

/* ---- a barra do alto: o caminho de volta e o tema ---- */

.entrada-topo {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
}

.entrada-topo__voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px 0 8px;
    margin-left: -8px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--t2);
    text-decoration: none;
    transition: color .2s var(--ease), background .2s var(--ease);
}

/* Hover só onde há um ponteiro que paira (01/10/2026, o mesmo do painel).
   No celular o :hover fica GRUDADO no que se tocou (o cartão levantado, o
   botão aceso). Todo :hover de enfeite mora num @media (hover: hover), no
   mesmo lugar de antes; o computador não muda. */
@media (hover: hover) { .entrada-topo__voltar:hover { color: var(--t1); background: color-mix(in srgb, var(--card) 70%, transparent); } }
.entrada-topo__voltar .icone { width: 16px; height: 16px; transition: translate .2s var(--ease); }
@media (hover: hover) { .entrada-topo__voltar:hover .icone { translate: -3px 0; } }

/* O interruptor de tema — o mesmo do portfólio e do painel: a bola é sol no
   claro e vira lua com estrelas no escuro; a troca nasce num círculo que
   sai dela (entrada.js). */
.tema {
    --mola: cubic-bezier(.34, 1.4, .64, 1);
    position: relative;
    flex-shrink: 0;
    width: 68px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--tema-borda);
    background: var(--tema-trilho);
    cursor: pointer;
    overflow: hidden;
    view-transition-name: tema-interruptor;
    transition: background .45s var(--ease), border-color .45s var(--ease);
}

@media (hover: hover) { .tema:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } }
.tema:focus-visible { border-radius: 999px; }

.tema__bola {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tema-bola);
    color: var(--tema-icone);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--tema-bola-borda);
    transition: translate .55s var(--mola), scale .2s var(--ease), background .45s var(--ease), color .45s var(--ease);
}

[data-theme="dark"] .tema__bola { translate: 30px 0; }
.tema:active .tema__bola { scale: .88; }
.tema__bola svg { width: 17px; height: 17px; overflow: visible; }

.tema__astro,
.tema__raios {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform .55s var(--mola), opacity .3s var(--ease);
}

.tema__sombra { transition: transform .55s var(--ease); }
.tema__astro { transform: scale(.7); }
.tema__sombra { transform: translate(10px, -10px); }
[data-theme="dark"] .tema__astro { transform: scale(1.12); }
[data-theme="dark"] .tema__sombra { transform: translate(0, 0); }
[data-theme="dark"] .tema__raios { transform: rotate(-90deg) scale(.4); opacity: 0; }

.tema__estrela {
    position: absolute;
    fill: var(--tema-estrela);
    opacity: 0;
    scale: 0;
    rotate: -90deg;
    transition: opacity .3s var(--ease), scale .45s var(--mola), rotate .45s var(--ease);
}

.tema__estrela:nth-child(1) { left: 8px; top: 6px; width: 8px; height: 8px; }
.tema__estrela:nth-child(2) { left: 21px; top: 12px; width: 5px; height: 5px; }
.tema__estrela:nth-child(3) { left: 11px; top: 22px; width: 6px; height: 6px; }
[data-theme="dark"] .tema__estrela { opacity: 1; scale: 1; rotate: 0deg; }
[data-theme="dark"] .tema__estrela:nth-child(1) { transition-delay: .2s; }
[data-theme="dark"] .tema__estrela:nth-child(2) { transition-delay: .3s; }
[data-theme="dark"] .tema__estrela:nth-child(3) { transition-delay: .4s; }

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(tema-interruptor) { display: none; }
::view-transition-new(tema-interruptor) { animation: none; }

/* ---- o cartão ---- */

.cartao {
    position: relative;
    width: 100%;
    margin-top: 46px;            /* o lugar do círculo, que sai por cima */
    padding: 64px 28px 20px;
    /* coluna flex, e não grade: numa grade a margem negativa não desconta o
       `gap`, e o que está fechado (o recado, o e-mail do aparelho conhecido)
       ainda ocupava 20px cada */
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 22px;
    /* sólido de propósito: meio transparente, o brilho do fundo desenhava um
       arco atravessando o cartão; e desfoque atrás custa caro no celular velho */
    background: var(--card);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
}

@media (max-width: 420px) {
    .cartao { padding: 62px 20px 16px; }
}

/* ---- o alto: o círculo, o título, quem é ---- */

.topo { display: grid; justify-items: center; gap: 6px; text-align: center; }

.avatar {
    position: absolute;
    top: -46px;
    left: 50%;
    translate: -50% 0;
    width: 92px;
    height: 92px;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .35);
}

/* O anel azul do círculo. Mora numa camada própria para poder se DESENHAR
   na chegada (a volta cresce de 0 a 100%) e virar verde no acerto. */
@property --volta {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

.avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(150deg, #5b9cf6, #2563eb);
    -webkit-mask: conic-gradient(#000 var(--volta), transparent 0);
    mask: conic-gradient(#000 var(--volta), transparent 0);
    transition: background .3s var(--ease);
}

.avatar > * { position: relative; }
.avatar > .avatar__anel, .avatar > .avatar__ok { position: absolute; }

.avatar__dentro {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--card);
    background: var(--btn);
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.avatar__dentro--foto { background: #dbe6fb; }
.avatar__dentro--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* as iniciais de quem é convidado, cada pessoa num tom (--tom vem do nome) */
.avatar__dentro--iniciais { background: hsl(var(--tom, 217) 62% 46%); font-size: 28px; }

/* nas páginas de erro (errors/pagina), o código no lugar do W */
.avatar__dentro--codigo { font-size: 25px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.acoes { display: grid; gap: 10px; }

.titulo { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.apoio { margin: 2px 0 0; max-width: 34ch; font-size: 14.5px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }

.saudacao { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--t2); }
.saudacao[hidden] { display: none; }

.saudacao__trocar {
    padding: 10px 4px;
    margin: -10px -4px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

@media (hover: hover) { .saudacao__trocar:hover { text-decoration: underline; } }

/* ---- os campos ---- */

.campo { display: grid; gap: 8px; }
.campo label { font-size: 14px; font-weight: 600; color: var(--t1); transition: color .2s var(--ease); }

/* o foco acende o rótulo e o ícone do campo, junto com a borda */
.campo:focus-within label { color: var(--accent); }
.caixa .icone { transition: color .2s var(--ease); }
.caixa:focus-within > .icone { color: var(--accent); }

.caixa {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--alto);
    padding: 0 6px 0 14px;
    border-radius: var(--raio);
    border: 1px solid var(--borda-h);
    background: var(--card);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.caixa:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* a senha que não conferiu fica marcada até a pessoa digitar de novo —
   inclusive com o cursor nela, que é para onde o erro manda */
.caixa--erro { border-color: color-mix(in srgb, var(--perigo) 70%, var(--borda-h)); }
.caixa--erro:focus-within {
    border-color: var(--perigo);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--perigo) 18%, transparent);
}

.caixa .icone { width: 18px; height: 18px; flex-shrink: 0; color: var(--t3); }

.caixa input {
    flex: 1;
    /* largura 0 e o resto da caixa pelo flex: sem isso o campo traz a largura
       natural dele (uns 20 caracteres) e empurra o cartão para fora da tela
       num celular de 320px */
    width: 0;
    min-width: 0;
    height: 100%;
    padding-right: 8px;
    border: 0;
    background: none;
    color: var(--t1);
    font: inherit;
    /* 16px e não menos: abaixo disso o Safari do iPhone dá zoom na página
       inteira quando o campo recebe o toque */
    font-size: 16px;
}

.caixa input:focus { outline: none; }
.caixa input::placeholder { color: var(--t3); }

/* O que o navegador preenche sozinho (e-mail e senha salvos) fica com as
   cores do cartão, e não com o fundo amarelo/azul claro dele — que no tema
   escuro era um remendo branco no meio do cartão. O fundo dele não se pode
   trocar: cobre-se com uma sombra por dentro, da cor do cartão. A animação
   vazia é o jeito de o script saber que o navegador preencheu (entrada.js)
   e acender a caixa por um instante. */
@keyframes entrada-preencheu { from { opacity: 1; } to { opacity: 1; } }

.caixa input:-webkit-autofill,
.caixa input:-webkit-autofill:hover,
.caixa input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--t1);
    caret-color: var(--t1);
    -webkit-box-shadow: 0 0 0 100px var(--card) inset;
    box-shadow: 0 0 0 100px var(--card) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
    animation: entrada-preencheu 1ms;
}

@keyframes entrada-acende {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

.caixa.preenchida { animation: entrada-acende .8s var(--ease); }

/* o olho de mostrar a senha: 40px de toque dentro da caixa */
.olho {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--t3);
    cursor: pointer;
}

@media (hover: hover) { .olho:hover { color: var(--t1); background: var(--card-2); } }
.olho .icone { width: 18px; height: 18px; overflow: visible; }

/* O olho diz o estado (auth/_olho): senha escondida, olho FECHADO — a
   pálpebra e os cílios; ao tocar, ele abre: os cílios recolhem, a pálpebra
   sobe (o contorno cresce na vertical com uma mola) e a pupila aparece por
   último. Fechar é o caminho de volta, mais rápido. A senha, no campo, some
   e volta já trocada (a classe `trocando`, posta pelo entrada.js). */
.olho__aberto,
.olho__fechado,
.olho__pupila,
.olho__cilios { transform-box: fill-box; transform-origin: 50% 50%; }

.olho__aberto {
    opacity: 0;
    transform: scaleY(.15);
    transition: transform .18s var(--ease), opacity .12s var(--ease);
}

.olho__pupila { transform: scale(0); transition: transform .2s var(--ease); }
.olho__fechado { transition: opacity .15s var(--ease) .06s; }
.olho__cilios { transform-origin: 50% 0; transition: transform .2s var(--ease) .06s, opacity .15s var(--ease) .06s; }

.olho.mostrando { color: var(--accent); }
/* o desenho herda a cor do botão (a regra dos ícones da caixa pintava de cinza) */
.caixa .olho .icone { color: inherit; }
.olho.mostrando .olho__aberto {
    opacity: 1;
    transform: scaleY(1);
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1) .06s, opacity .15s var(--ease) .06s;
}
.olho.mostrando .olho__pupila { transform: scale(1); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1) .22s; }
.olho.mostrando .olho__fechado { opacity: 0; transition: opacity .12s var(--ease); }
.olho.mostrando .olho__cilios { transform: scaleY(0); opacity: 0; transition: transform .14s var(--ease), opacity .12s var(--ease); }

.caixa input { transition: opacity .18s var(--ease), filter .18s var(--ease), letter-spacing .18s var(--ease); }
.caixa input.trocando { opacity: 0; filter: blur(4px); letter-spacing: .08em; transition-duration: .1s; }


/* ---- os botões e os links ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--alto-btn);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .25s var(--ease), scale .12s var(--ease);
}

.btn--primario { background: var(--btn); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .24); }

/* O Entrar do login: do tamanho do texto, no meio, e não uma faixa de
   ponta a ponta — é a única ação do cartão, não precisa gritar. Cresce
   sozinho para "Tente de novo em 14 s". */
.btn--compacto {
    align-self: center;
    width: auto;
    min-width: 148px;
    height: 42px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 14.5px;
}
@media (hover: hover) { .btn--primario:hover { filter: brightness(1.08); } }
.btn--primario:active { scale: .985; }
.btn--secundario { background: transparent; border-color: var(--borda-h); color: var(--t1); }
@media (hover: hover) { .btn--secundario:hover { border-color: var(--accent); color: var(--accent); } }
.btn .icone { width: 17px; height: 17px; }

/* O fim do botão: a flecha, que dá lugar a um giro enquanto a senha é
   conferida — o texto diz "Entrando…" e o botão não aceita outro toque. */
.btn__fim { position: relative; display: grid; place-items: center; width: 17px; height: 17px; }
.btn__fim > * { grid-area: 1 / 1; }
.btn__flecha { transition: opacity .15s var(--ease), translate .2s var(--ease); }
@media (hover: hover) { .btn:hover .btn__flecha { translate: 2px 0; } }

.btn__giro {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    opacity: 0;
    transition: opacity .15s var(--ease);
}

@keyframes entrada-roda { to { rotate: 360deg; } }

.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn__flecha { opacity: 0; }
.btn[aria-busy="true"] .btn__giro { opacity: 1; animation: entrada-roda .7s linear infinite; }
.btn[data-pronto] .btn__flecha { opacity: 1; }

/* ---- a página do convidado: o que já foi liberado ---- */

.liberado {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--card-2);
}

.liberado__titulo { margin: 0; font-size: 14px; font-weight: 700; color: var(--t1); }
.liberado ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.liberado li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; font-weight: 600; }
.liberado li span:last-child { font-weight: 500; color: var(--t2); text-align: right; }
.liberado__nota { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--t2); }

/* ---- recados: erro, aviso e sucesso ---- */

.faixa {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: var(--card-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--t2);
}

.faixa .icone { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
/* O estado vai para o contorno, na cor, sobre o cartão: tinta clara é
   pastel em qualquer dose (a régua do dono; 02/10/2026, como o painel). */
.faixa--perigo { background: var(--card); border: 1.5px solid var(--perigo); color: var(--perigo); }
.faixa--perigo .icone { color: var(--perigo); }
.faixa--ok { background: var(--card); border: 1.5px solid var(--ok); color: var(--ok); }
.faixa--ok .icone { color: var(--ok); }

/* ==========================================================================
   O movimento da entrada
   --------------------------------------------------------------------------
   Cada movimento diz uma coisa, e nenhum passa de meio segundo:

     chegar    o brilho acende, o cartão sobe, o círculo cai no lugar com
               um quique leve e o anel dele se desenha em volta; o resto
               entra em fila (--i dá a ordem) e a barra do alto desce;
     preencher o que o navegador preenche acende a caixa por um instante;
     olhar     o olho fechado abre (e fecha) para mostrar a senha;
     o tema    a troca nasce num círculo que sai da bola do interruptor;
     conferir  o anel do círculo gira enquanto o servidor confere a senha;
     errar     o cartão treme (o "não" de cabeça), a frase abre no lugar;
     acertar   o anel fecha com um ✓ verde e o cartão sobe e some — só
               então a tela troca;
     trocar    "Não é você?": o círculo gira e volta com o W, o campo do
               e-mail abre.

   Com "reduzir movimento" ligado no aparelho, nada disso roda: as coisas
   só aparecem.
   ========================================================================== */

@keyframes entrada-brilho { from { opacity: 0; } }
@keyframes entrada-subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes entrada-circulo { from { opacity: 0; transform: translateY(-12px) scale(.7); } }
@keyframes entrada-surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes entrada-anel { from { --volta: 0%; } }
@keyframes entrada-desce { from { opacity: 0; transform: translateY(-8px); } }

/* Só na chegada: terminada, o script põe `chegou` no <html> e a animação
   sai de cena — presa no fim, ela travaria as transições de depois (o
   e-mail abrindo, o cartão saindo). */
html:not(.chegou) body::before { animation: entrada-brilho .9s var(--ease) both; }
html:not(.chegou) .cartao { animation: entrada-subir .5s cubic-bezier(.16, 1, .3, 1) .05s both; }
/* `transform` e não `translate`: o círculo já usa `translate` para centrar */
html:not(.chegou) .avatar { animation: entrada-circulo .6s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
html:not(.chegou) .surge { animation: entrada-surgir .4s var(--ease) both; animation-delay: calc(.28s + var(--i, 0) * 55ms); }
html:not(.chegou) .avatar::before { animation: entrada-anel .75s cubic-bezier(.65, 0, .35, 1) .38s both; }
html:not(.chegou) .entrada-topo { animation: entrada-desce .45s var(--ease) .5s both; }

/* ---- o anel que gira enquanto confere, e o ✓ ---- */

.avatar__anel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 58%, rgba(255, 255, 255, .95));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    opacity: 0;
    transition: opacity .2s var(--ease);
    pointer-events: none;
}

@keyframes entrada-gira { to { rotate: 360deg; } }

.entrando .avatar__anel { opacity: 1; animation: entrada-gira .85s linear infinite; }

.avatar__ok {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid var(--card);
    background: var(--certo);
    color: #fff;
    transform: scale(0);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.avatar__ok svg { width: 16px; height: 16px; }
.entrou .avatar__ok { transform: scale(1); }
.entrou .avatar::before { background: linear-gradient(150deg, #4ade80, var(--certo)); }

.saindo {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
}

/* verde mais fechado no botão: o texto branco precisa de contraste (o
   --certo do ✓ é claro demais para letra em cima, sobretudo no escuro) */
.btn[data-pronto] { background: #15803d; box-shadow: 0 4px 14px rgba(21, 128, 61, .3); }

/* ---- errar ---- */

@keyframes entrada-treme {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-9px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

html .cartao.treme { animation: entrada-treme .45s var(--ease); }

/* O que abre e fecha sem pular: a linha da grade vai de 0 à altura do
   conteúdo. A margem negativa devolve o espaço do `gap` do cartão quando
   está fechado. */
.dobra {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .32s var(--ease), opacity .25s var(--ease), margin-top .32s var(--ease);
}

.dobra > * { min-height: 0; overflow: hidden; }

.recado:not(.aberto) {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -20px;
}

.recado { display: grid; transition: grid-template-rows .32s var(--ease), opacity .25s var(--ease), margin-top .32s var(--ease); }
.recado.aberto { grid-template-rows: 1fr; }
.recado > * { min-height: 0; overflow: hidden; }

/* ---- aparelho conhecido: só a senha ---- */

/* O e-mail da conta guardada aparece embaixo do "Olá"; o campo fecha. */
.saudacao__email { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--t3); overflow-wrap: anywhere; }
.saudacao__email:empty { display: none; }

[data-conta="conhecida"] .dobra--email {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -20px;
}

@keyframes entrada-vira {
    50% { transform: scaleX(0); }
}

html .avatar.vira { animation: entrada-vira .4s var(--ease); }

/* ---- Caps Lock ---- */

.caps {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -8px;
    transition: grid-template-rows .2s var(--ease), margin-top .2s var(--ease);
}

.caps > span {
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aviso);
}

.caps .icone { width: 15px; height: 15px; }
.caps.aberto { grid-template-rows: 1fr; margin-top: 0; }

/* ---- o foco do teclado, sempre visível ---- */

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.caixa input:focus-visible { outline: none; }   /* quem mostra o foco é a caixa */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .btn[aria-busy="true"] .btn__giro { animation: none; }

    html:not(.chegou) body::before, html:not(.chegou) .cartao, html:not(.chegou) .avatar,
    html:not(.chegou) .avatar::before, html:not(.chegou) .surge, html:not(.chegou) .entrada-topo,
    html .avatar.vira, html .cartao.treme, .caixa.preenchida { animation: none; }

    /* o anel ainda diz "conferindo", parado e aceso */
    .entrando .avatar__anel { animation: none; }
}

/* ==========================================================================
   A régua dos controles do painel também na entrada e nas páginas de erro
   (30/09/2026, revisão do front). É a do dono: botão de 40 px no celular e
   36 no computador, largura pelo conteúdo e nunca o cartão inteiro; campo
   de 44 e 40. Antes eram campo de 50, botão de 46 esticado de ponta a ponta
   nas páginas de erro, e o Entrar com 42.
   Este bloco vem por último: apagá-lo devolve o tamanho antigo.
   ========================================================================== */
:root { --alto: 44px; --alto-btn: 40px; }

.btn { width: auto; min-width: 148px; }
.btn--compacto { height: var(--alto-btn); }
/* sem brilho embaixo do botão, como no painel desde 25/09 — nem no verde do
   "entrou", que ganhava desta regra por especificidade; e sem o halo azul em
   volta do círculo (02/10/2026: brilho colorido em volta de um círculo é o
   "orbe brilhante" que o dono recusou na home) */
.btn--primario,
.btn[data-pronto] { box-shadow: none; }
.avatar { box-shadow: none; }

/* As duas saídas da página de erro, lado a lado e no meio; num celular
   estreito uma desce para baixo da outra, sem esticar. */
.acoes { display: flex; flex-wrap: wrap; justify-content: center; }

@media (min-width: 1024px) {
    :root { --alto: 40px; --alto-btn: 36px; }
    /* o olho mora dentro do campo de 40 */
    .olho { width: 32px; height: 32px; }
}

/* A saudação de quem já entrou (30/09/2026, revisão do front, G1): o e-mail
   com --t3 tinha contraste 3,68 e 4,38; o "trocar" tinha 36 px de alvo no
   celular. O recuo cresce e a margem negativa o devolve: nada muda de lugar. */
.saudacao__email { color: var(--t2); }
.saudacao__trocar { padding: 12px 4px; margin: -12px -4px; }
@media (min-width: 1024px) { .saudacao__trocar { padding: 10px 4px; margin: -10px -4px; } }

/* O Safari 15 (o iPhone 6s, o 7 e o SE de 1ª geração param nele) não tem
   color-mix(). Uma cor antes dela não serve de reserva: com var() dentro, a
   declaração vale na leitura e só falha no cálculo, e a propriedade cai no
   inicial (fundo transparente, borda sumida). As reservas moram aqui, e só
   quem não tem color-mix() lê este bloco (02/10/2026). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .caixa--erro { border-color: var(--perigo); }
}