.auth-page {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 0;
}
.auth-panel {
    position: relative;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    min-height: 100dvh;
    padding: 28px clamp(32px, 3vw, 64px) 28px max(32px, calc(50vw - 560px));
    background: #6334c3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.auth-panel::before, .auth-panel::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 110%;
    height: 75%;
    right: -55%;
    bottom: -20%;
    transform: rotate(38deg);
    background: #6d3ed0;
}
.auth-panel::after { right: -75%; bottom: -5%; background: #7547d7; }
.auth-panel-brand { font-size: 18px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; align-self: flex-start; }
.auth-panel-copy { padding: 80px 0; max-width: 520px; }
.auth-panel-heading { font-size: clamp(36px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; margin-bottom: 28px; }
.auth-panel-copy > p:not(.auth-panel-heading) { font-size: 17px; line-height: 1.6; max-width: 340px; color: #eee6ff; }
.auth-panel-copy .auth-panel-note { margin-top: 32px; font-size: 14px; }
.auth-panel-rule { width: 48px; height: 2px; background: #d3bfff; }
.auth-page .login-card { width: min(480px, calc(100% - 96px)); margin: auto 0 auto clamp(32px, 4.2vw, 86px); justify-self: start; padding: 48px 0; border: 0; border-radius: 0; background: none; }
.auth-page .auth-brand { display: none; }
.auth-page .login-heading { font-size: 28px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 30px; }
.auth-page .login-fields { gap: 8px; margin-bottom: 22px; }
.auth-field-label { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 8px; }
.auth-page .login-fields input { width: 100%; min-height: 46px; padding: 11px 13px; background: #16141b; border-color: #3b3548; }
.auth-page .login-fields input:focus { border-color: var(--accent-strong); }
.auth-page .login-fields input::placeholder { color: var(--text-faint); }
.auth-page .login-fields > div > input { margin-top: 8px; }
.auth-page .login-btn, .auth-page .btn-twitch { min-height: 46px; transition: background 120ms ease, border-color 120ms ease; }
.auth-page .btn-twitch { background: transparent; border-color: #705590; color: var(--text); font-weight: 500; }
.auth-page .btn-twitch:hover { background: var(--accent-soft); border-color: var(--accent-strong); }
.auth-page .btn-twitch svg { width: 19px; height: 19px; color: #d7c2ff; }
.auth-page .login-divider { text-transform: none; letter-spacing: 0; margin: 24px 0 16px; }
.auth-page .auth-check { line-height: 1.6; margin-bottom: 24px; }
.auth-page .auth-check input[type="checkbox"] { margin-top: 2px; }
.auth-page .login-footer { margin-top: 24px; }
.auth-page .auth-legal { margin-top: 32px; }
.auth-page .brand-mark { display: none; }
@media (max-width: 800px) {
    .auth-page { grid-template-columns: 1fr; min-height: 100dvh; align-content: start; }
    .auth-panel { min-height: 0; padding: 24px; }
    .auth-panel-copy { padding: 36px 0 8px; max-width: 500px; }
    .auth-panel-heading { font-size: 34px; margin-bottom: 14px; }
    .auth-panel-heading br { display: none; }
    .auth-panel-copy > p:not(.auth-panel-heading) { font-size: 14px; max-width: none; }
    .auth-panel-copy .auth-panel-note { margin-top: 12px; }
    .auth-panel-rule { display: none; }
    .auth-page .login-card { width: min(100%, 480px); margin: auto 0; padding: 36px 24px 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after { transition: none; }
}