.authx {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Inter, system-ui, sans-serif;
}

/* Lado esquerdo, a arte
 *
 * A onda da Bah!Stream desenhada como linhas de energia, com um cometa
 * surfando por dentro do tubo ate o nucleo. O ciano so aparece onde existe
 * energia, o resto e branco e cinza, igual ao resto do app.
 */

.authx-art {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 90% at 18% 6%, #0e0e11 0%, #09090b 46%, #050506 100%);
    border-right: 1px solid var(--color-border);
}

.bs-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.bs-olho-luz { opacity: 0.9; }

/* O corpo da onda respira devagar, uns oito pixels */
.bs-corpo { animation: bsRespira 9s ease-in-out infinite alternate; }

@keyframes bsRespira {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

/* Contornos da onda, cada camada mais apagada que a anterior */
.bs-linha {
    fill: none;
    stroke: #f7f7f8;
    stroke-linecap: round;
}

.bs-linha.l0 { stroke-width: 2;   stroke-opacity: 0.55; }
.bs-linha.l1 { stroke-width: 1.7; stroke-opacity: 0.34; }
.bs-linha.l2 { stroke-width: 1.5; stroke-opacity: 0.24; }
.bs-linha.l3 { stroke-width: 1.3; stroke-opacity: 0.16; }
.bs-linha.l4 { stroke-width: 1.2; stroke-opacity: 0.11; }
.bs-linha.l5 { stroke-width: 1.1; stroke-opacity: 0.07; }

/* Brilhos escorrendo pela face da onda em direcao ao tubo */
.bs-fluxo {
    fill: none;
    stroke: #f7f7f8;
    stroke-linecap: round;
}

.bs-fluxo.f0 {
    stroke-width: 2.2;
    stroke-opacity: 0.13;
    stroke-dasharray: 3.5 6.5;
    animation: bsFluxoA 3.8s linear infinite;
}

.bs-fluxo.f1 {
    stroke-width: 1.8;
    stroke-opacity: 0.10;
    stroke-dasharray: 3 9.5;
    animation: bsFluxoB 5.2s linear infinite;
}

@keyframes bsFluxoA { to { stroke-dashoffset: -10; } }
@keyframes bsFluxoB { to { stroke-dashoffset: -12.5; } }

/* A linha por onde o cometa passa, sempre visivel de leve */
.bs-rastro {
    fill: none;
    stroke: #f7f7f8;
    stroke-opacity: 0.05;
    stroke-width: 1;
}

/* O cometa: quatro camadas no mesmo caminho, com as cabecas alinhadas.
   Isso e o que da o rastro que nasce branco quente e morre em nevoa ciano. */
.bs-cometa { animation: bsCometaSome 7s linear infinite; }

.bs-brilho,
.bs-cauda { fill: none; stroke-linecap: butt; }
.bs-nucleo,
.bs-faisca { fill: none; stroke-linecap: round; }

.bs-brilho {
    stroke: #0d80bf;
    stroke-opacity: 0.35;
    stroke-width: 10;
    stroke-dasharray: 15 85;
    filter: url(#bsBlur);
    animation: bsCorreBrilho 7s cubic-bezier(0.55, 0.06, 0.35, 0.95) infinite;
}

.bs-cauda {
    stroke: #0d80bf;
    stroke-opacity: 0.55;
    stroke-width: 2.6;
    stroke-dasharray: 11 89;
    animation: bsCorreCauda 7s cubic-bezier(0.55, 0.06, 0.35, 0.95) infinite;
}

.bs-nucleo {
    stroke: #a5f3fc;
    stroke-opacity: 0.95;
    stroke-width: 2;
    stroke-dasharray: 5.5 94.5;
    animation: bsCorreNucleo 7s cubic-bezier(0.55, 0.06, 0.35, 0.95) infinite;
}

.bs-faisca {
    stroke: #ffffff;
    stroke-width: 2.6;
    stroke-dasharray: 1.8 98.2;
    animation: bsCorreFaisca 7s cubic-bezier(0.55, 0.06, 0.35, 0.95) infinite;
}

/* O atraso negativo faz o primeiro quadro ja pegar o surf acontecendo, que e
   a primeira impressao de quem abre a tela. */
.bs-cometa,
.bs-cometa > * { animation-delay: -2.15s; }

@keyframes bsCorreBrilho { 0% { stroke-dashoffset: 32; } 58% { stroke-dashoffset: -55; } 100% { stroke-dashoffset: -55; } }
@keyframes bsCorreCauda  { 0% { stroke-dashoffset: 28; } 58% { stroke-dashoffset: -59; } 100% { stroke-dashoffset: -59; } }
@keyframes bsCorreNucleo { 0% { stroke-dashoffset: 22.5; } 58% { stroke-dashoffset: -64.5; } 100% { stroke-dashoffset: -64.5; } }
@keyframes bsCorreFaisca { 0% { stroke-dashoffset: 18.7; } 58% { stroke-dashoffset: -68.3; } 100% { stroke-dashoffset: -68.3; } }

@keyframes bsCometaSome {
    0% { opacity: 0; }
    4% { opacity: 1; }
    55% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

/* O nucleo de energia no olho da onda */
.bs-olho {
    fill: #0d80bf;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8));
    animation: bsOlhoRespira 4.2s ease-in-out infinite alternate;
}

@keyframes bsOlhoRespira {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* O pulso que o nucleo devolve quando o cometa chega */
.bs-pulso {
    fill: none;
    stroke: #0d80bf;
    stroke-width: 1.25;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: bsPulso 7s ease-out infinite;
    animation-delay: -2.15s;
}

@keyframes bsPulso {
    0%, 54% { opacity: 0; transform: scale(0.35); }
    58% { opacity: 0.4; }
    80% { opacity: 0; transform: scale(2.6); }
    100% { opacity: 0; transform: scale(2.6); }
}

/* Grao de filme, parado. Tira o aspecto de vetor limpo demais. */
.bs-grao {
    opacity: 0.05;
    mix-blend-mode: screen;
}

/* Vinheta, para o painel nao competir com o formulario */
.bs-sombra {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0.18) 22%, rgba(5, 5, 6, 0) 42%),
        radial-gradient(140% 100% at 50% 50%, rgba(5, 5, 6, 0) 55%, rgba(5, 5, 6, 0.5) 100%);
}

.authx-panel {
    display: grid;
    place-items: center;
    padding: var(--space-6);
}

.authx-box {
    width: min(430px, 100%);
    padding: 34px 32px 30px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.authx-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.authx-brand img {
    width: 150px;
    height: auto;
}

.authx-eyebrow {
    margin: 0 0 10px;
    color: var(--color-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.authx-box h1 {
    margin: 0 0 10px;
    font-family: Sora, Inter, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.authx-lead {
    margin: 0 0 22px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6;
}

.authx-note {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    font-size: 13px;
    line-height: 20px;
}

.authx-note .icon {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--color-text);
    font-size: 20px;
    line-height: 20px;
}

.authx-kick {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-brand-ink);
    background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent-core) 52%, var(--accent-deep) 100%);
    border: 1px solid var(--accent-burnt);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 18px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.authx-kick:hover {
    background: linear-gradient(180deg, var(--accent-glint) 0%, var(--accent-bright) 52%, var(--accent-core) 100%);
}

.authx-kick:active {
    transform: translateY(1px);
}

.authx-kick-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #fff;
    background: #09090b;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
}

.authx-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    color: var(--color-soft);
    font-size: 12px;
}

.authx-divider::before,
.authx-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.authx-fields {
    display: grid;
    gap: 12px;
}

.authx-fields label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}

.authx-fields input {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: 0;
}

.authx-fields input:focus {
    border-color: var(--color-surface-3);
}

.authx-terms {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.authx-terms input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--color-text);
}

.authx-box .flash {
    padding: 12px 14px;
    margin-bottom: 18px;
    color: #ffd9d9;
    background: rgba(239, 71, 87, 0.12);
    border: 1px solid rgba(239, 71, 87, 0.34);
    border-radius: var(--radius-md);
    font-size: 13px;
}

.authx-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.authx-submit:hover {
    border-color: var(--color-surface-3);
}

.authx-foot {
    margin: 20px 0 0;
    color: var(--color-muted);
    font-size: 13px;
    text-align: center;
}

.authx-foot a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

/* Com movimento reduzido a cena congela num quadro bonito, com o cometa
   parado dentro do tubo, em vez de virar tela morta. */
@media (prefers-reduced-motion: reduce) {
    .bs-corpo,
    .bs-fluxo,
    .bs-olho,
    .bs-pulso,
    .bs-cometa,
    .bs-cometa > * {
        animation: none;
    }

    .bs-pulso { opacity: 0; }
    .bs-olho { opacity: 0.85; }
    .bs-cometa { opacity: 1; }

    .bs-brilho { stroke-dashoffset: -23; }
    .bs-cauda { stroke-dashoffset: -27; }
    .bs-nucleo { stroke-dashoffset: -32.5; }
    .bs-faisca { stroke-dashoffset: -36.3; }

    .bs-fluxo.f0 { stroke-opacity: 0.09; }
    .bs-fluxo.f1 { stroke-opacity: 0.07; }
}

@media (max-width: 900px) {
    .authx {
        grid-template-columns: 1fr;
    }

    .authx-art {
        min-height: 300px;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .bs-sombra {
        background:
            linear-gradient(180deg, rgba(5, 5, 6, 0.7) 0%, rgba(5, 5, 6, 0.3) 40%, rgba(5, 5, 6, 0) 72%),
            radial-gradient(140% 120% at 50% 50%, rgba(5, 5, 6, 0) 55%, rgba(5, 5, 6, 0.45) 100%);
    }
}

/* O texto de marca sobre a arte. Sem ele o painel fica so desenho solto. */
.bs-conteudo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px 50px;
    pointer-events: none;
}

.bs-marca { display: flex; align-items: center; gap: 12px; }
.bs-marca img { width: 40px; height: 40px; border-radius: 11px; }
.bs-marca span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }

.bs-fala h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.bs-fala h2 em { font-style: normal; color: var(--color-muted); }

.bs-fala p {
    margin: 16px 0 0;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-muted);
}

.bs-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(18, 18, 20, 0.55);
    backdrop-filter: blur(6px);
    font-size: 0.78rem;
    color: var(--color-muted);
}

.bs-selo i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live, #ff4d4d);
    animation: bsSelo 2.6s ease-out infinite;
}

@keyframes bsSelo {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
    100% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
}

@media (max-width: 900px) {
    .bs-conteudo { padding: 24px 26px; }
    .bs-fala p, .bs-selo { display: none; }
    .bs-marca img { width: 34px; height: 34px; }
}

/* ==========================================================================
   Campo de cor do painel de entrada
   Manchas grandes e borradas que se movem devagar. E isto que preenche a tela
   e da o ar caro. Traco fino sobre preto deixava tudo vazio.
   ========================================================================== */

.bs-mesh {
    position: absolute;
    inset: -10%;
    z-index: 0;
    overflow: hidden;
    filter: blur(70px) saturate(125%);
}

.bs-mancha {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

/* Ciano da marca, a mancha principal */
.bs-mancha.m1 {
    width: 62%;
    aspect-ratio: 1;
    left: -6%;
    top: 8%;
    background: radial-gradient(circle at 42% 38%, rgba(34, 211, 238, 0.62), rgba(34, 211, 238, 0.16) 52%, transparent 72%);
    animation: bsMancha1 26s ease-in-out infinite alternate;
}

/* Azul profundo, da fundo e volume */
.bs-mancha.m2 {
    width: 72%;
    aspect-ratio: 1;
    right: -18%;
    top: 26%;
    background: radial-gradient(circle at 55% 45%, rgba(14, 116, 144, 0.7), rgba(14, 116, 144, 0.18) 55%, transparent 74%);
    animation: bsMancha2 34s ease-in-out infinite alternate;
}

/* Verde agua bem fechado, puxa para o fundo do mar */
.bs-mancha.m3 {
    width: 58%;
    aspect-ratio: 1;
    left: 14%;
    bottom: -14%;
    background: radial-gradient(circle at 48% 52%, rgba(22, 78, 99, 0.85), rgba(22, 78, 99, 0.22) 58%, transparent 76%);
    animation: bsMancha3 30s ease-in-out infinite alternate;
}

/* Brilho claro, o ponto de luz que quebra o azul */
.bs-mancha.m4 {
    width: 34%;
    aspect-ratio: 1;
    left: 30%;
    top: 42%;
    background: radial-gradient(circle at 50% 50%, rgba(165, 243, 252, 0.34), rgba(165, 243, 252, 0.08) 50%, transparent 70%);
    animation: bsMancha4 22s ease-in-out infinite alternate;
}

@keyframes bsMancha1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(14%, 10%, 0) scale(1.18); }
}

@keyframes bsMancha2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to { transform: translate3d(-16%, -12%, 0) scale(0.92); }
}

@keyframes bsMancha3 {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to { transform: translate3d(12%, -16%, 0) scale(1.22); }
}

@keyframes bsMancha4 {
    from { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0.7; }
    to { transform: translate3d(-18%, 14%, 0) scale(1.3); opacity: 1; }
}

/* Com o campo de cor atras, a onda vira detalhe e nao protagonista */
.bs-wave { z-index: 1; opacity: 0.55; }
.bs-grao { opacity: 0.08; }

/* A vinheta agora precisa segurar mais, porque o fundo ficou claro */
.bs-sombra {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 5, 6, 0.72) 0%, rgba(5, 5, 6, 0.28) 26%, rgba(5, 5, 6, 0.1) 46%, rgba(5, 5, 6, 0.55) 100%),
        radial-gradient(120% 90% at 50% 50%, rgba(5, 5, 6, 0) 40%, rgba(5, 5, 6, 0.62) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .bs-mancha { animation: none; }
}

/* O lado do formulario tambem ganha profundidade, senao vira um vazio preto
   do lado de um painel cheio de cor. */
.authx-panel {
    position: relative;
    background:
        radial-gradient(90% 70% at 78% 18%, rgba(34, 211, 238, 0.05), transparent 60%),
        radial-gradient(80% 60% at 20% 90%, rgba(14, 116, 144, 0.06), transparent 62%),
        linear-gradient(180deg, #0b0b0e 0%, #09090b 55%, #060608 100%);
}

/* O cartao ganha um leve destaque para nao boiar no fundo */
.authx-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   A luz que segue o mouse no lado do formulario
   Mesma familia de cor do painel da esquerda, para os dois lados conversarem.
   ========================================================================== */

.authx-panel {
    --luz-x: 50%;
    --luz-y: 40%;
}

.authx-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    background:
        radial-gradient(420px circle at var(--luz-x) var(--luz-y), rgba(34, 211, 238, 0.13), transparent 62%),
        radial-gradient(780px circle at var(--luz-x) var(--luz-y), rgba(14, 116, 144, 0.10), transparent 68%);
}

.authx-panel.tem-luz::before { opacity: 1; }

/* O conteudo fica acima da luz */
.authx-panel > * { position: relative; z-index: 1; }

/* O cartao fica opaco de proposito: a luz passa em volta dele, nunca por
   dentro, senao borra os campos e atrapalha a leitura. */
.authx-box {
    position: relative;
    background: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
    .authx-panel::before { display: none; }
}