/* Auth surfaces: branded split on desktop, compact logo header on mobile. */
.auth-split { display:grid; grid-template-columns:1fr 1.1fr; min-height:100vh; }
.auth-brand {
    position:relative; color:#fff; padding:48px; display:flex; flex-direction:column;
    justify-content:flex-start; overflow:hidden;
    background-color:#181B2C; background-size:cover; background-position:center;
    /* per-page background-image is set inline by fragments/auth :: brand(img, …) */
}
/* dark overlay + gradient tints on top of the per-page photo (matches the v2 auth-left) */
.auth-brand::before { content:''; position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(circle at 80% 10%, rgba(138,92,245,.32), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(15,184,166,.22), transparent 45%),
        linear-gradient(160deg, rgba(24,27,44,.90), rgba(24,27,44,.84)); }
.auth-brand > * { position:relative; z-index:1; }
.auth-brand .a-top { flex:none; }
/* Hero (headline + sub + stats) vertically centred between the top logo and the footer,
   matching the design's auth-left layout. */
.auth-brand .a-hero { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.auth-brand .a-logo { display:flex; align-items:center; gap:10px; font:700 19px var(--font-display); }
/* Badge is an inline translucent pill beside the logo (v2 auth-left), not a separate line. */
.auth-brand .a-badge { font:500 10.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
    color:#A8ACC4; background:rgba(255,255,255,.10); padding:3px 9px; border-radius:5px; }
.auth-brand .a-hero { max-width:460px; }
.auth-brand h1 { color:#fff; font:700 32px/1.15 var(--font-display); letter-spacing:-.03em; margin:0 0 14px; }
.auth-brand p.sub { color:#B6BAD0; font-size:15.5px; line-height:1.6; max-width:420px; }
.auth-stats { display:flex; gap:14px; margin-top:28px; }
.auth-stat { flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; }
.auth-stat .v { font:700 24px var(--font-display); }
.auth-stat .l { font-size:12.5px; color:#A8ACC4; }
.auth-brand .a-foot { flex:none; font-size:12.5px; color:#7C809C; }

.auth-panel { display:flex; align-items:center; justify-content:center; padding:32px; background:var(--bg); }
.auth-form { width:100%; max-width:420px; }
.auth-form h2 { font:700 28px var(--font-display); margin:0 0 6px; }
.auth-m-head { display:none; }

.code-inputs { display:flex; gap:8px; }
.code-inputs input {
    width:52px; height:58px; text-align:center; font:600 22px var(--font-mono);
    border:1px solid var(--line); border-radius:10px; background:var(--surface);
}
.code-inputs input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(62,99,221,.18); outline:none; }
.rule { display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--text-3); margin-top:6px; }
.rule.ok { color:var(--ok); }
.recovery-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.recovery-grid code { background:var(--surface-2); padding:8px 10px; border-radius:8px; font:600 13px var(--font-mono); }

@media (max-width:860px) {
    .auth-split { grid-template-columns:1fr; }
    .auth-brand { display:none; }
    .auth-panel { align-items:flex-start; padding:32px 22px 44px; }
    .auth-m-head { display:flex; align-items:center; gap:10px; margin-bottom:20px; font:700 18px var(--font-display); }
}