.auth-page { min-height: 100vh; display: grid; background: #f4f6f1; color: var(--ink); }
.auth-page-shell { width: min(100%, 1180px); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 34px clamp(22px, 6vw, 82px); gap: clamp(45px, 9vw, 120px); }
.auth-page-brand { position: absolute; top: 30px; left: clamp(22px, 6vw, 82px); }.auth-page-brand .brand-mark { width: 31px; height: 31px; }
.auth-copy { max-width: 455px; }.auth-copy h1 { margin: 25px 0 17px; font-size: clamp(43px, 5.7vw, 72px); line-height: .98; letter-spacing: -.09em; }.auth-copy h1 span { color: #8fa94b; }.auth-copy p { max-width: 380px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }.auth-back { display: inline-flex; margin-top: 30px; color: var(--muted); font-size: 11px; font-weight: 800; }.auth-back:hover { color: var(--ink); }
.auth-form-card { width: min(100%, 430px); justify-self: end; padding: 34px; border: 1px solid #dce4dc; border-radius: 10px; background: #fbfcf9; box-shadow: 0 22px 70px rgba(33, 49, 38, .08); }.auth-form-card h2 { margin: 16px 0 8px; font-size: 29px; letter-spacing: -.08em; }.auth-form-card > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }.auth-form-card .button { min-height: 48px; margin-top: 7px; }.auth-form-switch { margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 10px; }.auth-form-switch a { color: var(--ink); font-weight: 800; }.auth-form-switch a:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; }.auth-input-wrap input { padding-right: 42px; }.password-toggle { position: absolute; right: 8px; bottom: 7px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: transparent; color: #839088; }.password-toggle:hover { background: #eff3ed; color: var(--ink); }.password-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.password-toggle .eye-off { display: none; }.password-toggle.is-visible .eye-on { display: none; }.password-toggle.is-visible .eye-off { display: block; }
.login-page { background: #f4f6f1; }.login-page .auth-form-card { border-top: 4px solid var(--lime); }.login-visual { position: relative; min-height: 315px; margin-top: 39px; padding: 27px; border-radius: 11px; background: var(--dark); color: #f3f8ef; overflow: hidden; }.login-visual::before, .login-visual::after { content: ""; position: absolute; border: 1px solid rgba(200,239,101,.3); border-radius: 50%; }.login-visual::before { width: 370px; height: 370px; right: -130px; top: -190px; }.login-visual::after { width: 260px; height: 260px; right: 55px; bottom: -188px; }.login-visual h3 { position: relative; z-index: 1; max-width: 235px; margin: 0; font-size: 25px; line-height: 1.03; letter-spacing: -.08em; }.login-visual p { position: relative; z-index: 1; max-width: 215px; margin-top: 12px; color: #aeb9b0; font-size: 10px; }.login-visual-mark { position: absolute; z-index: 1; right: 42px; bottom: 29px; color: var(--lime); font-size: 57px; }.login-dots { position: absolute; right: 27px; top: 30px; display: flex; gap: 5px; }.login-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }.login-dots i:nth-child(2) { opacity: .65; }.login-dots i:nth-child(3) { opacity: .3; }
.register-page { background: #e6eddc; }.register-page .auth-page-shell { grid-template-columns: .82fr 1.18fr; }.register-page .auth-copy { align-self: center; }.register-page .auth-copy h1 { max-width: 410px; }.register-page .auth-copy h1 span { color: var(--orange); }.register-poster { position: relative; min-height: 430px; margin-top: 35px; padding: 28px; border-radius: 180px 12px 180px 12px; background: var(--orange); overflow: hidden; }.register-poster::before, .register-poster::after { content: ""; position: absolute; border: 1px solid rgba(24,32,28,.25); border-radius: 50%; }.register-poster::before { width: 420px; height: 420px; right: -150px; top: -210px; }.register-poster::after { width: 510px; height: 510px; left: -260px; bottom: -315px; }.register-poster-label { position: relative; z-index: 1; font: 500 9px var(--mono); letter-spacing: .12em; }.register-poster h3 { position: relative; z-index: 1; margin: 66px 0 0 8px; font-size: clamp(43px, 5vw, 68px); line-height: .88; letter-spacing: -.1em; }.register-poster h3 span { color: #ffeadd; }.register-poster-mark { position: absolute; z-index: 1; right: 32px; bottom: 34px; color: #ffeadd; font-size: 43px; }
.register-page .auth-form-card { max-height: 92vh; overflow: auto; border-top: 4px solid var(--orange); }.register-page .auth-form-card h2 { margin-top: 12px; }.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }.auth-form-grid .full-span { grid-column: 1 / -1; }.country-select { position: relative; }.country-select select { appearance: none; padding-right: 32px; }.country-select::after { content: "⌄"; position: absolute; right: 13px; bottom: 11px; pointer-events: none; color: #7f8b83; font-size: 14px; }.auth-note { display: flex; gap: 7px; margin: 13px 0 0; color: #859189; font-size: 9px; line-height: 1.5; }.auth-note span { color: var(--orange); font-size: 13px; }
.referral-preview { display: flex !important; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 9px; border: 1px solid #d8e6bd; border-radius: 5px; background: #f0f6e5; color: #72834d !important; font: 500 9px var(--display) !important; letter-spacing: 0 !important; text-transform: none !important; }.referral-preview > span { display: inline; margin: 0; color: inherit !important; font: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }.referral-preview i { display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; background: var(--lime); color: var(--dark); font-size: 10px; font-style: normal; }.referral-preview strong { color: var(--ink); font-size: 10px; }.referral-preview.is-invalid { border-color: #f0c8bb; background: #fff2ed; color: #a55f49 !important; }.referral-preview.is-invalid i { background: #f2c1af; color: #9f5d47; }
.success-modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(21,29,24,.58); opacity: 0; pointer-events: none; transition: opacity .25s ease; }.success-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }.success-modal { width: min(100%, 420px); padding: 31px; border-radius: 11px; background: #f8fbf5; box-shadow: 0 25px 80px rgba(0,0,0,.24); transform: translateY(12px) scale(.98); transition: transform .25s ease; }.success-modal-backdrop.is-open .success-modal { transform: translateY(0) scale(1); }.success-check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px 14px 14px 3px; background: var(--lime); color: var(--dark); font-size: 22px; }.success-modal h2 { margin: 18px 0 8px; font-size: 31px; letter-spacing: -.09em; }.success-modal > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }.success-details { display: grid; gap: 9px; margin: 0 0 22px; padding: 15px; border-radius: 7px; background: #eaf1df; }.success-detail { display: flex; justify-content: space-between; gap: 15px; align-items: center; }.success-detail span { color: #7c8a73; font: 500 9px var(--mono); text-transform: uppercase; }.success-detail strong { max-width: 210px; overflow: hidden; color: var(--ink); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.success-password { display: flex; align-items: center; gap: 5px; }.success-password strong { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }.success-password button { width: 23px; height: 23px; padding: 0; background: transparent; color: #72806f; }.success-modal .button { width: 100%; }.success-modal .small-note { margin: 12px 0 0; color: #96a29a; font-size: 9px; text-align: center; }
@media (max-width: 850px) { .auth-page-shell, .register-page .auth-page-shell { grid-template-columns: 1fr; max-width: 560px; gap: 27px; padding-top: 88px; padding-bottom: 40px; }.auth-page-brand { top: 25px; }.auth-copy { max-width: 500px; }.auth-copy h1 { margin-top: 17px; font-size: 48px; }.login-visual, .register-poster { min-height: 190px; margin-top: 23px; border-radius: 9px; }.login-visual h3 { max-width: 270px; }.login-visual-mark { right: 60px; bottom: 26px; }.register-poster h3 { margin-top: 35px; }.auth-form-card { justify-self: stretch; }.register-page .auth-form-card { max-height: none; } }
@media (max-width: 520px) { .auth-page-shell { padding: 82px 20px 27px; }.auth-form-card { padding: 25px 20px; }.auth-form-grid { grid-template-columns: 1fr; }.auth-form-grid .full-span { grid-column: auto; }.auth-copy h1 { font-size: 41px; }.auth-copy p { font-size: 12px; }.login-visual { min-height: 160px; padding: 22px; }.login-visual h3 { font-size: 21px; }.register-poster { min-height: 185px; padding: 22px; }.register-poster h3 { margin-top: 28px; font-size: 49px; }.success-modal { padding: 25px 20px; }.success-detail strong { max-width: 165px; } }