.auth-page { min-height: 100vh; overflow-x: clip; background: radial-gradient(circle at 50% 22%, rgba(103, 57, 218, .28), transparent 31%), radial-gradient(circle at 84% 70%, rgba(48, 94, 215, .14), transparent 26%), linear-gradient(180deg, #020615, #07091d 70%, #071127); }.auth-page-content { width: min(500px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 72px; }.auth-card { margin-top: 34px; padding: 31px; overflow: hidden; position: relative; border: 1px solid rgba(117, 101, 196, .33); border-radius: 20px; background: linear-gradient(145deg, rgba(20, 26, 57, .97), rgba(7, 13, 34, .98)); box-shadow: 0 30px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.045); }.auth-card::before { content: ""; width: 250px; height: 250px; position: absolute; right: -120px; top: -125px; border-radius: 50%; background: rgba(116, 65, 231, .16); filter: blur(2px); }.auth-card-heading { position: relative; display: flex; align-items: center; gap: 14px; }.auth-card-heading > span { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: #c29cff; border: 1px solid rgba(157, 111, 246, .4); border-radius: 13px; background: rgba(104, 59, 201, .18); font-size: 21px; }.auth-card-heading p { margin: 0 0 3px; color: #a782ef; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }.auth-card-heading h1 { margin: 0; font-size: 29px; letter-spacing: -.7px; }.auth-intro { margin: 20px 0 25px; color: #939bb3; font-size: 13px; line-height: 1.6; }
.auth-form { display: grid; gap: 16px; }.auth-form label, .account-panel label { display: grid; gap: 7px; }.auth-form label > span, .account-panel label > span { color: #b8bed2; font-size: 11px; font-weight: 650; }.auth-form input, .account-panel input { width: 100%; height: 45px; padding: 0 13px; color: #f3f5ff; border: 1px solid #34405f; border-radius: 9px; outline: 0; background: #081126; font-size: 12px; }.auth-form input::placeholder { color: #687188; }.auth-form input:focus, .account-panel input:focus { border-color: #8e6af0; box-shadow: 0 0 0 3px rgba(132, 94, 229, .12); }.auth-password-field { position: relative; }.auth-password-field input { padding-right: 58px; }.auth-password-field button { height: 31px; padding: 0 9px; position: absolute; right: 7px; top: 7px; color: #a995dd; border: 0; border-radius: 6px; background: rgba(96, 68, 172, .13); font-size: 9px; cursor: pointer; }.auth-strength { margin-top: -6px; }.auth-strength > div { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(102, 113, 154, .2); }.auth-strength > div span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ee5c78, #f2bf4b, #61d79a); transition: width .2s ease; }.auth-strength p { margin: 6px 0 0; color: #737d93; font-size: 9px; line-height: 1.5; }.auth-submit, .account-panel > button { height: 44px; color: white; border: 0; border-radius: 9px; background: linear-gradient(135deg, #8250ed, #5069e7); box-shadow: 0 10px 25px rgba(83, 72, 211, .24); font-size: 12px; font-weight: 750; cursor: pointer; }.auth-submit:disabled, .account-panel > button:disabled { opacity: .52; cursor: wait; }.auth-status { min-height: 18px; margin: 13px 0 0; color: #a891eb; font-size: 10px; text-align: center; }.auth-status.error { color: #ff8498; }.auth-switch { margin: 17px 0 0; color: #8790a6; font-size: 11px; text-align: center; }.auth-switch a { color: #ae8df6; font-weight: 700; }.auth-security-note { margin-top: 24px; padding: 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(98, 114, 159, .18); border-radius: 9px; background: rgba(6, 14, 32, .58); }.auth-security-note > span { color: #8d73e9; }.auth-security-note p { margin: 0; color: #778198; font-size: 9px; line-height: 1.55; }.auth-security-note strong { display: block; margin-bottom: 2px; color: #afb5c7; font-size: 10px; }
.auth-resend { width: 100%; height: 40px; color: #c8b7f6; border: 1px solid rgba(147, 111, 232, .36); border-radius: 9px; background: rgba(91, 59, 175, .12); font-size: 10px; font-weight: 750; cursor: pointer; }.auth-resend:disabled { opacity: .55; cursor: wait; }.verification-card { text-align: center; }.verification-icon { width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center; color: #d2c1ff; border: 1px solid rgba(156, 116, 241, .42); border-radius: 18px; background: rgba(104, 59, 201, .18); font-size: 26px; font-weight: 800; }.verification-card > p { margin: 0 0 7px; color: #a782ef; font-size: 9px; font-weight: 800; letter-spacing: .12em; }.verification-card > h1 { margin: 0; font-size: 28px; }.verification-card > span { margin: 17px auto 0; display: block; color: #919ab0; font-size: 12px; line-height: 1.6; }.verification-action { margin-top: 25px; display: flex; align-items: center; justify-content: center; }.verification-verified .verification-icon { color: #8ce2b5; border-color: rgba(82, 205, 142, .38); background: rgba(44, 159, 101, .12); }
.auth-forgot-link { width: fit-content; margin-top: -8px; justify-self: end; color: #ae8df6; font-size: 10px; font-weight: 700; }.auth-recovery-help { margin: 7px 0 0; color: #778198; font-size: 10px; line-height: 1.55; text-align: center; }