.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .9fr) minmax(520px, 1.1fr); }
body[data-auth-page="login"] .auth-page, body[data-auth-page="register"] .auth-page { grid-template-columns: minmax(0, 1fr); }
.auth-brand-panel { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 34px clamp(32px, 5vw, 72px); border-right: 1px solid var(--border); overflow: hidden; background: linear-gradient(180deg, #0b1022, #080b18); }
.auth-brand-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 18%, rgba(76,141,255,.16), transparent 22rem), radial-gradient(circle at 84% 76%, rgba(255,45,141,.14), transparent 25rem); pointer-events: none; }
.auth-brand-panel::after { content: ""; position: absolute; width: 680px; height: 680px; left: -260px; bottom: -330px; border-radius: 50%; background: conic-gradient(from 180deg, var(--against-blue), var(--against-blue) 50%, var(--for-pink) 50%, var(--for-pink)); opacity: .24; filter: blur(1px); }
.auth-brand-copy { position: relative; z-index: 1; max-width: 500px; margin-block: auto; padding: 70px 0; }
.auth-brand-copy .eyebrow { margin-bottom: 20px; }
.auth-brand-copy h1 { font-size: clamp(2.45rem, 5vw, 4.55rem); }
.auth-brand-copy p { max-width: 420px; margin-top: 18px; font-size: 1rem; }
.auth-brand-footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-secondary); font-size: .8rem; }
.auth-brand-footer a:hover { color: #fff; }

.auth-form-panel { position: relative; isolation: isolate; min-height: 100vh; display: grid; place-items: center; padding: 50px 28px; overflow: hidden; background: radial-gradient(circle at 14% 16%, rgba(23,107,255,.24), transparent 30rem), radial-gradient(circle at 86% 84%, rgba(255,45,141,.2), transparent 31rem), linear-gradient(135deg, #060916 0%, #0d1430 52%, #090b19 100%); }
.auth-form-panel::before, .auth-form-panel::after { content: ""; position: absolute; z-index: 0; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; pointer-events: none; }
.auth-form-panel::before { width: min(66vw, 720px); aspect-ratio: 1; top: -40%; right: -19%; box-shadow: inset 0 0 80px rgba(23,107,255,.08); }
.auth-form-panel::after { width: min(52vw, 560px); aspect-ratio: 1; bottom: -36%; left: -16%; box-shadow: inset 0 0 70px rgba(255,45,141,.08); }
.auth-form-panel > .confirmation-card { position: relative; z-index: 1; }
.auth-card { position: relative; z-index: 1; width: min(100%, 480px); padding: clamp(24px, 4vw, 34px); border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(180deg, rgba(16,22,42,.92), rgba(11,15,30,.95)); box-shadow: 0 28px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.025) inset; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 24px; color: var(--text-secondary); font-size: .86rem; font-weight: 800; transition: color 160ms ease, transform 160ms ease; }
.auth-back:hover { color: var(--text-primary); transform: translateX(-2px); }
.auth-back:focus-visible { outline: 2px solid var(--against-blue-light); outline-offset: 5px; border-radius: 4px; }
.auth-back span { font-size: 1.1rem; line-height: 1; }
.auth-card h2 { margin-top: 14px; font-size: clamp(1.8rem, 3.4vw, 2.45rem); }
.auth-card > p { margin-top: 12px; }
.auth-card .form-stack { margin-top: 24px; gap: 14px; }
.auth-card .field { gap: 6px; }
.auth-card .input { min-height: 48px; }
.auth-switch { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .92rem; text-align: center; }
.backend-setup { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.backend-setup-form { display: grid; gap: 16px; padding: 18px; border: 1px solid rgba(76,141,255,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(23,107,255,.08), rgba(255,45,141,.045)); }
.backend-setup-copy h3 { margin-top: 8px; font-size: 1.25rem; }
.backend-setup-copy p:not(.eyebrow) { margin-top: 8px; font-size: .88rem; }
.compact-textarea { min-height: 82px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .78rem; }
.oauth-area { margin-top: 26px; }
.oauth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.oauth-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-primary); font: inherit; font-size: .9rem; font-weight: 850; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease; }
.oauth-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.075); }
.oauth-button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.oauth-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.oauth-icon.apple { color: #fff; }
.oauth-mark { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #fff; color: #080b18; font-size: .78rem; font-weight: 950; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.oauth-mark.apple { background: #0a0d17; color: #fff; border: 1px solid rgba(255,255,255,.18); }
.oauth-note { margin-top: 12px; color: var(--text-secondary); font-size: .8rem; }
.password-meta { display: flex; justify-content: flex-end; margin-top: -5px; }
.password-meta .text-button { color: var(--text-primary); }
.availability { min-height: 0; color: var(--text-secondary); font-size: .76rem; }
.availability.available { color: var(--success); }
.availability.unavailable { color: var(--danger); }
.confirmation-card { padding: 34px; border-radius: 28px; }
.confirmation-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(87,214,161,.32); border-radius: 50%; background: rgba(87,214,161,.08); color: var(--success); font-size: 1.5rem; }
.confirmation-card h2 { margin: 22px 0 12px; }
.resend-confirmation { display: grid; gap: 10px; margin-top: 16px; }
.confirmation-card .resend-confirmation + .button { margin-top: 12px; }
.callback-card { text-align: center; }
.callback-card .loading-mark { margin: 0 auto 22px; }
.recovery-form { margin-top: 24px; text-align: left; }
.recovery-form[hidden] { display: none; }
#recovery-open-app { margin-top: 16px; }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: auto; padding: 20px 22px; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-brand-copy, .auth-brand-footer { display: none; }
  .auth-form-panel { min-height: calc(100vh - 77px); padding: 38px 18px 58px; place-items: start center; }
  body[data-auth-page="login"] .auth-form-panel, body[data-auth-page="register"] .auth-form-panel { min-height: 100svh; }
  .oauth-buttons { grid-template-columns: 1fr; }
}