/* === A ENTRADA DA CASA DA ONÇA ======================================================
   16/08/2026: "vamos melhorar a tela de entrada da inuia.temporama.com.br deixando apenas a
   opção de token e já com a interface do fundo de nossa arte ascii minimalista de matemática
   bruta."

   A tela anterior era a do admin do site — cartão branco-sobre-preto, usuário, senha, e o
   token como segunda opção depois de um "ou". Não era feia; era de outra casa. Quem chega
   aqui vem de um convite ou tem um token, e ia parar numa porta de sistema de gestão.

   O DESENHO INTEIRO É: a arte ocupa a tela, e sobre ela há três coisas — o nome, um campo, e
   uma frase para quem não tem token. Nada mais. Uma tela de entrada com muita coisa está
   pedindo uma decisão a quem só quer passar. */

.corpo-entrada {
    margin: 0; min-height: 100dvh; background: var(--bg, #000);
    display: grid; place-items: center;
    overflow: hidden;                       /* a arte é maior que a tela de propósito */
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* A ARTE. Fixa, atrás de tudo, e SEM interação: ela é forma. O verde é o mesmo da casa, e a
   opacidade é baixa o bastante para o campo continuar sendo a coisa mais legível da tela —
   a arte convida, não disputa. */
.entrada-arte {
    position: fixed; inset: 0; margin: 0; z-index: 0;
    pointer-events: none; user-select: none;
    font-family: inherit; font-size: 13px; line-height: 1.15;
    letter-spacing: 0; white-space: pre; overflow: hidden;
    color: var(--green, #30D158); opacity: .2;
}
/* Um véu radial: escuro no meio, transparente nas bordas. É o que faz o campo pousar em cima
   da arte sem precisar de caixa nem de borda — a legibilidade vem da luz, não de uma moldura. */
.entrada-veu {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
        rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.35) 100%);
}

.entrada-miolo {
    position: relative; z-index: 2;
    width: min(92vw, 46ch); text-align: center;
    padding: 0 4vw;
}

/* A marca, com o mesmo corte de INUIA da sala: INU cheio, IA em fio. */
.entrada-marca {
    font-family: var(--font-title, 'Barlow Condensed', sans-serif);
    font-size: clamp(2.6rem, 12vw, 4.4rem); letter-spacing: .16em;
    line-height: 1; margin-bottom: 34px; padding-left: .16em;
}
.entrada-marca b { color: var(--text, #fff); font-weight: 700; }
.entrada-marca span { color: var(--green, #30D158); font-weight: 700; }

.entrada-forma label {
    display: block; text-align: left;
    font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--sec); opacity: .7; margin-bottom: 9px;
}

/* O CAMPO É UMA LINHA, e não uma caixa: o mesmo desenho do campo de perguntar lá dentro.
   Quem entra aqui já está usando a interface que vai usar depois — a entrada não é uma
   antessala de outro produto. */
.entrada-campo {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--panel-border); border-radius: 9px;
    background: rgba(0,0,0,.72);
    padding: 6px 6px 6px 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.entrada-campo:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 22px color-mix(in srgb, var(--green) 22%, transparent);
}
.entrada-campo .sinal { color: var(--green); opacity: .8; }
.entrada-campo input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    font-family: inherit; font-size: .84rem; letter-spacing: .04em; color: var(--text);
    padding: 8px 0;
}
.entrada-campo input::placeholder { color: var(--sec); opacity: .45; letter-spacing: .06em; }

.entrada-botao {
    background: none; border: 1px solid var(--panel-border); border-radius: 7px;
    color: var(--sec); cursor: pointer; padding: 9px 18px;
    font-family: inherit; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.entrada-botao:hover:not(:disabled) { color: #000; background: var(--green); border-color: var(--green); }
.entrada-botao:disabled { opacity: .4; cursor: progress; }

.entrada-erro[hidden] { display: none; }
.entrada-erro {
    margin: 14px 0 0; text-align: left;
    font-size: .66rem; line-height: 1.6; color: var(--red);
}

.entrada-nota {
    margin: 26px 0 0; font-size: .62rem; line-height: 1.75;
    color: var(--sec); opacity: .55;
}

/* No telefone a arte fica mais miúda para caber mais grade — o desenho vive da quantidade de
   células, e uma tela estreita com fonte grande vira quatro riscos. */
@media (max-width: 640px) {
    .entrada-arte { font-size: 10px; }
    .entrada-marca { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .entrada-arte { opacity: .12; } }