/* Login, cadastro e convite: lado escuro com a promessa, formulário claro e curto. */
.auth-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 100vh; }
.auth-side { position: relative; background: var(--ink); color: #fff; padding: 36px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden; isolation: isolate; }
.auth-side::before { content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%; right: -260px; top: -300px; background: radial-gradient(circle, rgba(255,91,46,.45) 0%, rgba(255,91,46,0) 68%); filter: blur(40px); z-index: -1; }
.auth-side::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 40% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 40% 30%, #000 20%, transparent 75%); }
.auth-side .brand { padding: 0; }
.auth-side .brand-logo { height: 32px; }
.auth-side-body { max-width: 520px; }
.auth-side .kicker { color: #ffd6c9; }
.kicker-light { color: var(--orange); }
.auth-headline { font: 800 clamp(34px, 3.6vw, 46px)/1.04 var(--font-display); letter-spacing: -.04em; max-width: 520px; margin: 0 0 26px; }
.auth-headline mark { background: var(--orange); color: var(--ink); padding: 0 .1em; border-radius: 10px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; color: #d9d6ce; font-size: 15px; }
.auth-points .icon { color: var(--orange); }
.auth-points li { display: flex; gap: 10px; align-items: center; }
.auth-side-foot { margin: 0; color: #8d909a; font-size: 13px; }
.auth-next { max-width: 520px; color: #d9d6ce; }
.auth-next-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.auth-next-title .icon, .auth-next-key .icon { color: var(--orange); flex-shrink: 0; }
.auth-next-steps { list-style: none; counter-reset: next; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-next-steps li { counter-increment: next; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; }
.auth-next-steps li::before { content: counter(next); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.auth-next-steps strong { color: #fff; font-weight: 600; }
.auth-next-steps span { font-size: 14px; }
.auth-next-key { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); font-size: 14px; background: rgba(255,255,255,.04); }
.auth-next-key strong { color: #fff; }
.auth-next-mobile { display: none; }

.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-form { width: 100%; max-width: 440px; }
.auth-form h1 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; margin-bottom: 4px; }
.auth-sub { margin-bottom: 20px; }
.auth-mobile-brand { display: none; margin-bottom: 22px; }
.auth-mobile-brand img { height: 28px; }
.auth-form .input { padding: 11px 13px; font-size: 15px; }
.auth-form .btn-block { margin-top: 4px; }
.auth-alt { text-align: center; margin-top: 18px; color: var(--muted); }
.auth-alt a { color: var(--ink); font-weight: 600; }
.auth-remember { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; color: var(--ink-2); font-size: 14px; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--orange); }

.test-logins { margin-top: 28px; padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.test-logins h2 { font-size: 15px; font-weight: 700; margin: 0; }
.test-logins ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.test-logins li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.test-login-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-login-info code { font: 12px var(--font-mono); color: var(--muted); background: none; padding: 0; overflow-wrap: anywhere; }
.test-login-role { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--orange-soft); color: var(--ink); font-size: 12px; font-weight: 600; }

.signup-offer { background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 20px; }
.signup-offer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.signup-offer-head strong { font-size: 16px; }
.signup-offer-tag { font: 600 12px/1 var(--font); background: var(--ink); color: #fff; border-radius: 999px; padding: 5px 10px; }
.signup-offer-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.signup-offer-list li { display: flex; gap: 8px; align-items: flex-start; }
.signup-offer-list .icon { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.signup-offer p { margin: 0; }
.signup-offer a { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .auth-mobile-brand { display: block; }
    .auth-main { padding: 28px 20px 40px; align-items: start; }
    /* sem o painel lateral, o resumo dos 10 minutos vem junto do formulário */
    .auth-next-mobile { display: block; margin-top: 24px; padding: 18px; background: var(--ink); border-radius: var(--radius-lg); }
}