.auth-wrap {
    min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
    background: var(--bg);
}
.auth-aside {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 120% at 15% 10%, #4B40D8 0%, #372FA6 42%, #211C63 100%);
    padding: 54px 58px; display: flex; flex-direction: column;
}
.auth-aside::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 82% 22%, rgba(255,255,255,.10), transparent 42%), radial-gradient(circle at 12% 88%, rgba(91,80,224,.5), transparent 46%);
}
.auth-aside::after {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px; mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark { background: rgba(255,255,255,.14); box-shadow: none; backdrop-filter: blur(6px); }
.auth-brand .brand-name { color: #fff; font-size: 18px; }
.auth-brand .brand-name b { color: #C9C3FF; }
.auth-aside-body { margin-top: auto; margin-bottom: auto; max-width: 440px; }
.auth-aside-body h1 { color: #fff; font-size: 33px; line-height: 1.18; letter-spacing: -.025em; font-weight: 700; }
.auth-aside-body p { color: rgba(233,231,255,.82); font-size: 15px; margin-top: 16px; line-height: 1.6; }
.auth-points { margin-top: 34px; display: flex; flex-direction: column; gap: 15px; }
.auth-point { display: flex; align-items: center; gap: 13px; font-size: 14px; color: rgba(240,239,255,.92); }
.auth-point .pt-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-point .pt-ic .icon { width: 18px; height: 18px; }
.auth-aside-foot { margin-top: auto; font-size: 12.5px; color: rgba(216,213,245,.6); }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-card { width: 100%; max-width: 388px; }
.auth-mobilebrand { display: none; align-items: center; gap: 11px; justify-content: center; margin-bottom: 28px; }
.auth-head { margin-bottom: 26px; }
.auth-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 5px 12px; border-radius: 99px; margin-bottom: 16px; }
.auth-badge .icon { width: 14px; height: 14px; }
.auth-head h2 { font-size: 25px; letter-spacing: -.025em; }
.auth-head p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.auth-forgot { text-align: right; margin-top: -8px; margin-bottom: 16px; }
.auth-forgot a { font-size: 12.5px; font-weight: 550; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 13px; color: var(--muted); }
.auth-alt a { font-weight: 600; }
.auth-sep { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--faint); font-size: 12px; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-note { font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 14px; display: flex; gap: 9px; margin-top: 20px; }
.auth-note .icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; margin-top: 1px; }

.form-alert { display: none; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 18px; }
.form-alert.show { display: flex; }
.form-alert .icon { width: 17px; height: 17px; flex-shrink: 0; }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-alert.err { background: var(--danger-soft); color: var(--danger); }
.form-alert.ok { background: var(--success-soft); color: var(--success); }

@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-mobilebrand { display: flex; }
}