body.auth-modal-open { overflow: hidden; }
.auth-access { position: fixed; inset: 0; z-index: 1800; display: none; align-items: center; justify-content: center; padding: 24px; background: #030614bd; backdrop-filter: blur(12px); color: #edf2ff; }
.auth-access.is-open { display: flex; }
.auth-access-dialog { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); width: min(910px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; border: 1px solid #5b51766e; background: #10182a; border-radius: 26px; box-shadow: 0 30px 110px #000a, 0 0 0 7px #afa0e307; animation: auth-enter .22s ease-out; }
.auth-access-close { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3b4560; background: #1c2739; color: #b9c4da; cursor: pointer; transition: background .15s, color .15s; }.auth-access-close:hover { background: #3a314e; color: #fff; }
.auth-access-story { min-width: 0; min-height: 590px; padding: 32px 34px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: radial-gradient(ellipse at 0 70%, #77509d40, transparent 75%), radial-gradient(ellipse at 100% 0, #715faa2b, transparent 65%), #1a2036; border-right: 1px solid #3c3853; overflow: hidden; }
.auth-access-brand { display: flex; align-items: center; gap: 11px; color: #f3efff; text-decoration: none; font: 800 .85rem 'Manrope', sans-serif; letter-spacing: .13em; }.auth-access-brand > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #b294ef, #7456c1); color: #fff; box-shadow: 0 5px 20px #9b6fe329; }
.auth-access-eyebrow { display: flex; align-items: center; gap: 7px; font-size: .59rem; color: #bdade5; font-weight: 700; }.auth-access-eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #b6a0df; box-shadow: 0 0 12px #9b75e2; }
.auth-access-story h2 { font: 800 clamp(1.8rem, 3.4vw, 2.7rem)/1.14 'Manrope', sans-serif; letter-spacing: -.055em; margin: 18px 0 15px; }.auth-access-story h2 em { font-style: normal; color: #c0a4f4; }.auth-access-story p { max-width: 255px; color: #b2b9d2; font-size: .77rem; line-height: 1.75; }
.auth-community-art { position: relative; height: 176px; margin-top: 12px; }.auth-art-orbit { position: absolute; top: 28px; left: 50%; transform: translateX(-50%) rotate(-18deg); width: 200px; height: 116px; border-radius: 50%; border: 1px solid #bba2e342; box-shadow: 0 0 0 20px #a48bc009, 0 0 0 40px #a48bc005; }.auth-art-center { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 66px; height: 66px; border-radius: 21px; background: linear-gradient(135deg, #8d6cbc, #52407d); border: 1px solid #b49bda; color: #ede1ff; font-size: 1.55rem; box-shadow: 0 8px 30px #0003; }
.auth-art-tag { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid #6a547d; border-radius: 12px; background: #372b4b; font: 700 .64rem 'Manrope', sans-serif; color: #e0cfed; box-shadow: 0 8px 20px #0002; }.auth-art-tag i { color: #cfaaee; }.auth-art-tag.anime { top: 28px; left: 0; transform: rotate(-8deg); }.auth-art-tag.gaming { top: 51px; right: 0; transform: rotate(7deg); background: #263950; border-color: #455c7c; color: #cadbf2; }.auth-art-tag.gaming i { color: #9dbfe8; }.auth-art-tag.friends { bottom: 12px; left: 28%; transform: rotate(-4deg); background: #233c3e; border-color: #426165; color: #c0e2d9; }.auth-art-tag.friends i { color: #a0d4c2; }
.auth-story-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid #b9a2dc26; padding-top: 18px; color: #d0c6df; font-size: .69rem; }.auth-story-footer > i { color: #baa3de; background: #af8ccd18; border: 1px solid #b79ada38; padding: 10px; border-radius: 9px; }.auth-story-footer small { display: block; color: #9ea5bf; font-size: .59rem; margin-top: 4px; }
.auth-access-main { min-width: 0; padding: 43px 36px 28px; align-self: center; }.auth-access-mini-brand { font-size: .59rem; font-weight: 800; letter-spacing: .12em; color: #c1aae9; }.auth-access-mini-brand > span { color: #8595b2; letter-spacing: .06em; }
.auth-access-head h2 { font: 800 1.6rem/1.25 'Manrope', sans-serif; letter-spacing: -.045em; margin: 16px 0 11px; max-width: 290px; }.auth-access-head p { color: #9daecb; font-size: .85rem; line-height: 1.7; max-width: 300px; }
.auth-access-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 11px; border: 1px solid #30394f; background: #0b1221; margin: 24px 0 22px; }.auth-access-tabs button { border: 0; cursor: pointer; min-height: 42px; border-radius: 8px; background: transparent; color: #94a4bf; font: 700 .8rem 'Manrope', sans-serif; transition: background .15s, color .15s; }.auth-access-tabs button[aria-selected="true"] { color: #e7d9fc; background: #342941; box-shadow: 0 2px 6px #0003; }.auth-access-tabs button:hover { color: #f1e6ff; }
.auth-access [hidden] { display: none !important; }.auth-access-form { display: grid; gap: 16px; }.auth-access-field { min-width: 0; }.auth-access-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 8px; color: #cdd7e9; }.auth-access-field input { width: 100%; min-height: 48px; border: 1px solid #36425a; border-radius: 10px; background: #0b1323; color: #edf2ff; padding: 12px 14px; font: 500 .875rem 'Manrope', sans-serif; transition: border-color .15s, box-shadow .15s; }.auth-access-field input::placeholder { color: #7e90ae; }.auth-access-field input:hover { border-color: #5b5577; }.auth-access-field input:focus { outline: none; border-color: #b094ec; box-shadow: 0 0 0 3px #b094ec17; }.auth-access-field small { display: block; margin-top: 5px; font-size: .6rem; color: #9faeca; }
.auth-access-password { position: relative; }.auth-access-password input { padding-right: 50px; }.auth-access-password button { position: absolute; right: 3px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; color: #a6b5d0; cursor: pointer; }.auth-access-password button:hover { color: #d1b9f4; }
.auth-access-submit { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; border: 1px solid #b08cea; border-radius: 10px; background: linear-gradient(100deg, #8660c3, #6e4cb6); color: #fff; font: 800 .75rem 'Manrope', sans-serif; cursor: pointer; margin-top: 4px; box-shadow: 0 5px 20px #8c61d426; transition: background .15s, box-shadow .15s; }.auth-access-submit:hover { background: linear-gradient(100deg, #8762c4, #7959c3); box-shadow: 0 7px 24px #8c61d43b; }.auth-access-submit:disabled { opacity: .65; cursor: wait; }.auth-access-status { font-size: .7rem; color: #a4b2cc; }.auth-access-status:empty { display: none; }
.auth-access-alert { display: flex; gap: 10px; align-items: start; padding: 12px; border: 1px solid; border-radius: 10px; font-size: .72rem; margin-bottom: 18px; overflow-wrap: anywhere; }.auth-access-alert i { margin-top: 4px; }.auth-access-alert.error { color: #ffd0d7; background: #432331; border-color: #7e3e57; }.auth-access-alert.success { color: #b1ebcb; background: #173a2d; border-color: #337653; }
.auth-access-assurance { display: flex; justify-content: center; align-items: center; gap: 7px; color: #af9fcd; font-size: .6rem; border-top: 1px solid #2b324a; margin-top: 22px; padding-top: 18px; }.auth-access-assurance i { color: #ba99e3; }.auth-access-legal { color: #8e9fba; text-align: center; font-size: .59rem; line-height: 1.8; margin-top: 13px; }.auth-access-legal a { color: #c6b3e5; text-underline-offset: 2px; }.auth-access :focus-visible { outline: 3px solid #c1a5ff; outline-offset: 3px; }
@keyframes auth-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 719px) { .auth-access { padding: 12px; }.auth-access-dialog { width: min(460px, 100%); grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 24px); border-radius: 20px; }.auth-access-story { min-height: auto; padding: 19px 22px; border-right: 0; border-bottom: 1px solid #403751; }.auth-access-story > :not(.auth-access-brand) { display: none; }.auth-access-brand { font-size: .67rem; }.auth-access-brand > span { width: 28px; height: 28px; border-radius: 8px; }.auth-access-main { padding: 23px 23px 25px; }.auth-access-mini-brand { display: none; }.auth-access-head h2 { font-size: 1.6rem; margin-top: 0; max-width: none; }.auth-access-tabs { margin: 20px 0; }.auth-access-close { top: 15px; right: 16px; }.auth-access-assurance { font-size: .65rem; }.auth-access-field input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .auth-access-dialog { animation: none; }.auth-access * { transition: none !important; } }