.auth-page { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100dvh; background: #ffffff; }
.auth-story { position: relative; display: flex; flex-direction: column; padding: 36px 48px; border-right: 1px solid #d7ddea; overflow: hidden; background: radial-gradient(ellipse at 45% 66%, #ebf0f765 0, transparent 58%), #ffffff; }
.auth-story::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#7891c426 .7px, transparent .7px); background-size: 23px 23px; pointer-events: none; mask-image: linear-gradient(transparent, #0008 50%, transparent); }
.auth-brand { display: flex; align-items: center; gap: 12px; width: fit-content; color: #1c326e; text-decoration: none; position: relative; z-index: 1; }
.auth-brand > span:last-child { font-size: 25px; font-weight: 650; letter-spacing: -1px; }.auth-brand small { display: block; font-size: 8px; color: #3e5a8e; letter-spacing: 2.8px; font-weight: 450; margin-top: 5px; }
.auth-story-content { margin: auto 0; padding: 67px 0 24px; position: relative; z-index: 1; max-width: 540px; }
.auth-eyebrow { font-size: 9px; font-weight: 550; letter-spacing: 1.8px; color: #3d598f; }
.auth-story h2 { font-size: clamp(42px,4.3vw,66px); font-weight: 500; letter-spacing: -2.6px; line-height: 1.12; margin: 22px 0; }.auth-story h2 span { color: #2948a3; }
.auth-story-content > p { font-size: 13px; line-height: 1.9; color: #445b88; max-width: 335px; }
.auth-visual { height: 325px; position: relative; max-width: 460px; margin: 15px auto 0; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid #d5ddec29; border-radius: 50%; }.orbit-outer { width: 320px; height: 320px; border-style: dashed; }.orbit-middle { width: 245px; height: 245px; border-color: #d5ddeb39; }.orbit-inner { width: 165px; height: 165px; border-color: #d5ddec48; background: #ebeff726; }
.auth-core { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 27px; transform: rotate(-9deg); background: linear-gradient(145deg,#eceff6,#ebeff6); border: 1px solid #d6deeb; box-shadow: 0 0 65px #6f99ed22; }.auth-core .icon { width: 40px; height: 40px; color: #1c346e; stroke-width: 1.3; transform: rotate(9deg); }
.orbit-label { position: absolute; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid #d7deea; background: #f4f6fb; color: #1c376e; border-radius: 10px; box-shadow: 0 15px 30px #0002; font-size: 11px; }.orbit-label .icon { color: #294ea3; width: 18px; height: 18px; }.orbit-label small { display: block; font-size: 7px; letter-spacing: 1.5px; color: #486698; margin-top: 6px; }.orbit-label-left { left: 0; top: 56px; transform: rotate(-5deg); }.orbit-label-right { right: 0; bottom: 52px; transform: rotate(5deg); }
.orbit-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e8edfa; box-shadow: 0 0 14px #8aadff; }.orbit-dot-one { top: 29px; right: 104px; }.orbit-dot-two { bottom: 45px; left: 116px; background: #ebf7f7; }
.auth-story-footer { display: flex; align-items: center; gap: 7px; font-size: 9px; color: #435d89; position: relative; z-index: 1; padding-top: 15px; }.auth-story-footer .icon { width: 13px; height: 13px; }.auth-story-footer > span:last-child { margin-left: auto; letter-spacing: 1.3px; font-size: 7px; color: #4e6792; }
.auth-main { display: flex; flex-direction: column; min-height: 100dvh; padding: 42px 48px 25px; }
.auth-panel { width: 100%; max-width: 390px; margin: auto; padding: 40px 0; }.auth-panel-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #d6ddeb; color: #294da3; background: #f4f6fb; margin-bottom: 27px; }.auth-panel-icon .icon { width: 21px; height: 21px; }
.auth-panel h1 { font-size: clamp(28px,2.55vw,36px); font-weight: 500; line-height: 1.23; letter-spacing: -1.05px; margin: 14px 0 12px; }.auth-panel h1 span { color: #294aa3; }
.auth-description { color: #465c86; font-size: 13px; line-height: 1.8; margin-bottom: 33px; }
.auth-form { margin-top: 30px; }.auth-field { margin-bottom: 24px; }.auth-field label { font-size: 11px; color: #335699; font-weight: 500; display: block; margin-bottom: 10px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }.auth-label-row a { color: #294da3; font-size: 10px; text-decoration: none; }.auth-label-row a:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; display: flex; align-items: center; background: #ffffff; border: 1px solid #d7ddea; border-radius: 8px; min-height: 49px; }.auth-input-wrap:focus-within { border-color: #d5dbec; box-shadow: 0 0 0 3px #6d91ef13; }.auth-input-wrap > .icon { margin-left: 14px; width: 17px; height: 17px; color: #4f6791; }.auth-input-wrap input { background: transparent; border: 0; color: #1c346e; font-size: 12px; min-width: 0; width: 100%; height: 48px; padding: 0 14px; outline: none; }.auth-input-wrap input:focus-visible { outline: none; }.auth-input-wrap input::placeholder { color: #56688b; }.auth-input-wrap:has(.input-validation-error) { border-color: #ecd5d9; }
.password-toggle { font-size: 9px; background: none; border: 0; color: #31549b; padding: 10px 13px 10px 0; cursor: pointer; }.password-toggle:hover { color: #1c376e; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 15px 18px; border: 1px solid #d5dbec; border-radius: 8px; background: #e8edfa; color: #345eac; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 49px; margin-top: 6px; }.auth-submit:hover { background: #e8ecfa; border-color: #d5dbec; }.auth-submit .icon { width: 17px; height: 17px; }
.auth-security-note { border-top: 1px solid #d7ddea; margin-top: 31px; padding-top: 21px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #4a6596; font-size: 10px; }.auth-security-note .icon { color: #2953a3; width: 14px; height: 14px; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; color: #54688c; }.auth-footer > span { color: #56688a; }
.auth-mobile-brand { display: none; }.auth-back { color: #2a52a2; text-decoration: none; font-size: 11px; display: flex; align-items: center; gap: 8px; margin-bottom: 32px; width: fit-content; }.auth-back .icon { width: 15px; height: 15px; transform: rotate(180deg); }.auth-back:hover { color: white; }
.auth-validation.validation-summary-valid { display: none; }.auth-validation.validation-summary-errors { background: #f9f6f8; border: 1px solid #e8d9e1; color: #a3294a; padding: 12px 15px; font-size: 12px; line-height: 1.6; border-radius: 8px; margin-bottom: 22px; }.auth-validation ul { list-style: none; margin: 0; padding: 0; }.auth-field-error { display: block; color: #a32947; font-size: 11px; line-height: 1.6; margin-top: 7px; }.auth-field-error.field-validation-valid { display: none; }
.auth-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; color: #329a69; background: #f5faf8; border: 1px solid #d8e8e0; border-radius: 8px; font-size: 12px; line-height: 1.7; margin-bottom: 22px; }.auth-notice .icon { width: 17px; height: 17px; margin-top: 2px; }
.auth-recovery-success { border: 1px solid #d6deeb; background: #f4f6fb; border-radius: 11px; padding: 23px; margin-bottom: 23px; }.recovery-check { display: grid; place-items: center; width: 33px; height: 33px; background: #edf5f4; border: 1px solid #d9e8e4; color: #389475; border-radius: 50%; margin-bottom: 15px; }.auth-recovery-success h2 { font-size: 16px; font-weight: 550; margin-bottom: 11px; }.auth-recovery-success p { font-size: 12px; line-height: 1.9; color: #345998; }.recovery-expiry { display: flex; align-items: center; gap: 6px; margin-top: 15px; font-size: 10px; color: #2953a3; }.recovery-expiry .icon { width: 13px; height: 13px; }.auth-retry { text-align: center; margin-top: 23px; font-size: 11px; color: #445e88; }.auth-retry a { color: #294ba3; text-decoration: none; margin-left: 4px; }
@media (max-width: 1050px) { .auth-story { padding: 32px; }.auth-main { padding: 36px 32px 25px; }.auth-story h2 { font-size: 49px; }.auth-visual { height: 290px; }.orbit-outer { width: 275px; height: 275px; }.orbit-middle { width: 210px; height: 210px; }.orbit-inner { width: 145px; height: 145px; }.orbit-label { padding: 12px; font-size: 10px; }.orbit-label-left { left: -3px; top: 42px; }.orbit-label-right { right: -3px; bottom: 36px; }.auth-story-footer > span:last-child { display: none; } }
@media (max-width: 760px) { .auth-page { display: block; }.auth-story { display: none; }.auth-main { padding: 27px 26px 24px; }.auth-mobile-brand { display: flex; align-items: center; gap: 10px; width: fit-content; }.auth-mobile-brand .brand-icon { width: 31px; height: 31px; border-radius: 8px; font-size: 20px; font-weight: 600; }.auth-mobile-brand > span:last-child { color: #1c376e; font-size: 22px; font-weight: 600; letter-spacing: -.8px; }.auth-mobile-brand small { font-size: 8px; margin-left: 7px; font-weight: 400; letter-spacing: 2px; color: #455b87; }.auth-panel { max-width: 410px; padding: 48px 0; }.auth-panel h1 { font-size: 33px; letter-spacing: -.9px; }.auth-description { font-size: 12px; }.auth-footer { font-size: 8px; }.auth-panel-icon { margin-bottom: 25px; }.auth-back { margin-bottom: 28px; } }
@media (max-height: 780px) and (min-width: 761px) { .auth-story-content { padding: 40px 0 10px; }.auth-story h2 { font-size: 50px; }.auth-visual { height: 250px; }.orbit-outer { width: 250px; height: 250px; }.orbit-middle { width: 205px; height: 205px; }.auth-panel { padding: 25px 0; } }

/* A bright, quiet entry point for the light workspace. */
.auth-page, .auth-main { background: #fff; }
.auth-story { background: radial-gradient(ellipse at 45% 66%, #dce8ff 0, transparent 65%), #f0f5ff; border-color: #e0e8f5; }
.auth-story h2, .auth-brand, .auth-mobile-brand > span:last-child { color: var(--text-primary); }
.auth-story h2 span, .auth-panel h1 span { color: var(--primary); }
.auth-core { background: linear-gradient(145deg,#f8fbff,#dce7ff); border-color: #becff5; box-shadow: 0 15px 50px #456bdf18; }
.auth-core .icon { color: var(--primary); }
.orbit-label { background: #ffffffed; border-color: #dbe4f4; box-shadow: 0 12px 30px #456bdf0d; }
.auth-input-wrap { background: #fff; border-color: #d5deeb; }
.auth-input-wrap input { color: var(--text-primary); }
.auth-submit { background: var(--primary); border-color: var(--primary); color: #fff; }
.auth-submit:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.auth-back:hover { color: var(--primary); }
.password-toggle:hover { color: var(--primary); }