/* Login and registration only: keep the account dashboard theme independent. */
body:has(.auth-shell) { background: radial-gradient(ellipse at 14% 36%, #14222c 0, transparent 48%), #0d1015; }
.auth-shell { width: min(1080px, calc(100% - 64px)); margin: 64px auto; gap: 88px; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; }
.auth-intro { padding: 0; }
.auth-intro .eyebrow { color: #76dccb; letter-spacing: .18em; font-size: 11px; }
.auth-intro h1 { font-size: clamp(36px, 4vw, 56px); max-width: 12ch; margin: 18px 0; }
.auth-intro > div > p:not(.eyebrow) { max-width: 38ch; font-size: 16px; color: #a5afbf; }
.auth-steps { margin-top: 38px; gap: 0; }
.auth-steps > div { padding: 18px 0; border-color: #ffffff0e; }
.auth-steps span { border: 1px solid #76dccb30; background: #76dccb08; color: #76dccb; border-radius: 10px; }
.auth-steps strong { font-size: 14px; font-weight: 600; }
.auth-steps small { color: #8e9bab; font-size: 12px; }
.auth-card { background: linear-gradient(155deg, #1b222c, #151a22); border: 1px solid #ffffff12; border-radius: 20px; padding: 28px; box-shadow: 0 24px 80px #0004; }
.auth-tabs { border: 1px solid #ffffff0b; border-radius: 10px; padding: 4px; margin-bottom: 24px; }
.auth-tabs a { border-radius: 7px; font-size: 13px; font-weight: 600; min-height: 36px; }
.auth-tabs a.is-active { background: #303b4b; box-shadow: 0 2px 8px #0003; }
.provider-sign-in { display: grid; gap: 10px; }
.provider-sign-in > .button, .roblox-link-help > summary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; border-radius: 10px; font-size: 13px; font-weight: 600; background: #ffffff03; border-color: #ffffff20; }
.provider-sign-in > .button:hover, .roblox-link-help > summary:hover { background: #ffffff09; border-color: #ffffff40; }
.provider-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.roblox-link-help > summary { justify-content: flex-start; padding: 12px 16px; cursor: pointer; list-style: none; }
.roblox-link-help > summary::-webkit-details-marker { display: none; }
.roblox-link-help > summary::after { content: '+'; margin-left: auto; font-size: 20px; color: #8e9bab; }
.roblox-link-help[open] > summary::after { content: '−'; }
.roblox-link-help p, .roblox-link-help ol { color: #a5afbf; font-size: 12px; line-height: 1.7; padding-inline: 8px; }
.roblox-link-help ol { padding-left: 28px; }
.provider-sign-in .field-note { margin: 0; font-size: 11px; line-height: 1.65; color: #8e9bab; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #8e9bab; font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #ffffff10; }
.auth-card form { gap: 14px; }
.auth-card label { font-size: 12px; font-weight: 500; color: #c3ccda; gap: 7px; }
.auth-card input { min-height: 46px; background: #0e141d; border: 1px solid #ffffff18; border-radius: 9px; padding: 12px 14px; font-size: 13px; font-weight: 400; }
.auth-card input::placeholder { color: #637085; opacity: 1; }
.auth-card input:focus { border-color: #76dccb; }
.auth-card button[type='submit'] { min-height: 46px; background: #83e5d1; border-color: #83e5d1; color: #10241f; border-radius: 9px; font-size: 13px; }
.auth-card button[type='submit']:hover { background: #a7efdf; }
.auth-card a[href='/forgot-password'] { min-height: 24px; border: 0; background: none; color: #a5afbf; font-size: 12px; }
.auth-card .auth-switch { margin: 0; font-size: 12px; color: #8e9bab; text-align: center; }
.auth-card .auth-switch a { color: #83e5d1; }
.auth-card .recovery-warning { margin: 0; padding: 0; background: none; border: 0; color: #9eacbf; font-size: 11px; line-height: 1.6; }
.auth-card .referral-options { font-size: 12px; color: #a5afbf; }
.referral-options summary { cursor: pointer; padding: 4px 0; }
.referral-options label { margin-top: 12px; }
.referral-options .referral-notice { font-size: 11px; margin-top: 8px; }
.auth-card .message:empty { display: none; }
.account-footer { text-align: center; max-width: 600px; margin: 32px auto; padding: 0 24px; font-size: 11px; line-height: 1.7; color: #6f7c8e; }
@media(max-width: 900px) { .auth-shell { gap: 40px; grid-template-columns: minmax(0, 1fr) 400px; width: calc(100% - 40px); } }
@media(max-width: 760px) { .auth-shell { width: min(440px, calc(100% - 32px)); margin: 32px auto; grid-template-columns: minmax(0, 1fr); gap: 24px; } .auth-intro h1 { max-width: none; font-size: 32px; margin: 10px 0; } .auth-intro > div > p:not(.eyebrow) { font-size: 14px; } .auth-card { padding: 24px; } .auth-steps { display: none; } }
@media(max-width: 380px) { .auth-card { padding: 18px; } }
.account-header .nav { width: min(1080px, calc(100% - 32px)); }
.account-header .links a { background: #ffffff04; color: #c3ccda; border-color: #ffffff18; border-radius: 9px; font-size: 13px; font-weight: 600; }
.account-header .links a[href*='/pricing'] { background: #83e5d1; color: #10241f; border-color: #83e5d1; }
.auth-card :focus-visible { outline: 2px solid #83e5d1; outline-offset: 3px; }
@media(max-width:760px) { .account-header .nav { flex-wrap: nowrap; gap: 8px; } .account-header .links { gap: 5px; } .account-header .links a { padding: 0 9px; font-size: 12px; } .account-header .brand img { width: 32px; height: 32px; } .account-header .brand { gap: 6px; } .account-header .brand strong { font-size: 14px; } }