.auth-body { min-width:320px; margin:0; color:#1c2541; background:#fafbff; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(380px,46%) minmax(0,1fr); }
.auth-story { position:relative; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(145deg,#f0edff 0%,#eae8ff 48%,#f4f3ff 100%); border-right:1px solid #e7e3fc; padding:36px 48px 28px; }
.auth-story:after { content:""; position:absolute; width:550px; height:550px; bottom:-320px; left:-240px; border:1px solid #d4cef5; border-radius:50%; box-shadow:0 0 0 65px #ffffff16,0 0 0 130px #ffffff20; }
.auth-brand { display:inline-flex; align-items:center; gap:11px; color:#252043; font-size:22px; font-weight:800; letter-spacing:-.7px; z-index:1; }
.auth-brand:hover { text-decoration:none; }.auth-brand span { color:#6050e9; display:flex; }
.auth-story-content { position:relative; z-index:1; margin:auto 0; padding:65px 0 15px; }
.auth-eyebrow { display:inline-block; color:#8c7cbd; font-size:12px; letter-spacing:2px; margin-bottom:22px; }
.auth-story h1 { font-size:clamp(38px,4.1vw,62px); font-weight:750; letter-spacing:-2px; line-height:1.35; color:#352861; margin:0 0 24px; }
.auth-story p { font-size:14px; line-height:2; color:#9384b1; margin:0; }
.auth-story-footer { font-size:11px; color:#a59abd; z-index:1; padding-top:22px; }
.auth-art { position:relative; width:260px; height:220px; margin:38px 0 0 38px; }
.auth-art-orbit { position:absolute; width:220px; height:220px; border:1px solid #d7cff1; border-radius:50%; left:12px; top:0; box-shadow:0 0 0 22px #e4dffb55; }
.auth-art-card { position:absolute; width:206px; height:140px; top:36px; left:26px; border:1px solid #ffffffc0; background:linear-gradient(135deg,#ffffffd9,#ffffff70); box-shadow:0 20px 35px #725eb827; border-radius:17px; transform:rotate(-9deg); padding:22px; backdrop-filter:blur(5px); }
.auth-art-card>span { display:flex; width:39px; height:39px; border-radius:11px; align-items:center; justify-content:center; color:#7260d2; background:#e8e1fc; margin-bottom:12px; }
.auth-art-card i { height:4px; width:57px; position:absolute; background:#d8cfee; border-radius:3px; top:34px; left:78px; }.auth-art-card i+i { width:92px; top:48px; background:#e8e2f3; }
.auth-art-card b { color:#a095b7; font-weight:500; font-size:11px; letter-spacing:1px; }
.auth-art-dot { position:absolute; border-radius:50%; box-shadow:0 6px 15px #6555ae24; }.dot-one { width:20px; height:20px; left:0; top:57px; background:#c1b1f4; }.dot-two { width:11px; height:11px; top:164px; left:249px; background:#d6c8ff; }
.auth-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:50px 38px 27px; position:relative; }
.auth-form-wrap { width:100%; max-width:360px; margin:auto 0; padding:20px 0 45px; }
.auth-panel-mark { display:grid; place-items:center; width:51px; height:51px; color:#6a58e7; background:#f0edff; border:1px solid #e7e2fb; border-radius:14px; margin-bottom:27px; }
.auth-panel h2 { font-size:28px; letter-spacing:-1px; margin:0 0 9px; line-height:1.4; font-weight:750; color:#202b46; }
.auth-intro { margin:0 0 31px; color:#9aa1b3; font-size:12px; }
.auth-form { display:grid; gap:19px; }
.auth-field { display:block; }.auth-field>span { color:#626d84; font-size:12px; font-weight:600; display:block; margin-bottom:9px; }.auth-field .input { height:46px; padding:12px 14px; font-size:13px; border-color:#e0e4ef; background:#fff; border-radius:7px; }.auth-field .input::placeholder { color:#b0b6c6; }.auth-field small { color:#a4abbd; font-size:11px; line-height:1.8; display:block; margin-top:7px; }
.auth-submit { width:100%; height:46px; margin-top:7px; justify-content:space-between; font-size:13px; background:#5748ea; border-radius:7px; }
.auth-submit span { font-size:19px; font-weight:400; }
.auth-assistance { font-size:11px; line-height:1.9; color:#a5adbe; margin:21px 0 0; }
.auth-client-link { display:inline-flex; align-items:center; gap:7px; margin-top:26px; font-size:12px; color:#8d82b4; }
.auth-footer { color:#b4bac9; font-size:10px; text-align:center; }
.auth-status { color:#8e85a8; background:#f4f1fc; border:1px solid #e9e4f7; border-radius:7px; padding:11px 13px; font-size:11px; line-height:1.8; margin-bottom:21px; }.auth-status-ready { color:#3d906b; background:#f0f9f4; border-color:#dceee4; }.auth-status-error,.auth-error { background:#fff5f5; border:1px solid #f4d5d8; color:#bf626c; }.auth-error { font-size:12px; padding:11px 13px; border-radius:7px; line-height:1.8; }.auth-error[hidden],.auth-form[hidden],.auth-status[hidden] { display:none; }
.setup-form-wrap { max-width:390px; padding:15px 0 25px; }.setup-form-wrap .auth-intro { margin-bottom:20px; }.setup-form-wrap .auth-panel-mark { margin-bottom:20px; }.setup-form-wrap .auth-form { gap:15px; }
@media(min-width:1600px) { .auth-story { padding:42px 70px 32px; }.auth-story-content { padding-left:15px; }.auth-panel { padding-left:50px;padding-right:50px; }.auth-form-wrap { max-width:400px; } }
@media(max-width:950px) { .auth-layout { grid-template-columns:minmax(320px,43%) minmax(0,1fr); }.auth-story { padding:30px 31px; }.auth-story h1 { font-size:42px; }.auth-story p { font-size:12px; }.auth-art { margin-left:2px; transform:scale(.88); transform-origin:left center; }.auth-panel { padding:35px 30px 25px; } }
@media(max-width:720px) { .auth-layout { display:block; min-height:100dvh; }.auth-story { border:0; padding:22px 23px 25px; }.auth-brand { font-size:20px; }.auth-story-content { padding:0; margin:27px 0 0; }.auth-eyebrow { font-size:10px; letter-spacing:1px; margin-bottom:8px; }.auth-story h1 { font-size:26px; letter-spacing:-.5px; margin-bottom:6px; }.auth-story h1 br { display:none; }.auth-story p { font-size:11px;line-height:1.9; }.auth-story p br { display:none; }.auth-art,.auth-story-footer { display:none; }.auth-panel { min-height:calc(100dvh - 213px); padding:32px 26px 19px; }.auth-form-wrap { padding:0 0 32px; margin:0 auto auto; max-width:400px; }.auth-panel-mark { display:none; }.auth-panel h2 { font-size:24px; }.auth-intro { font-size:11px; margin-bottom:25px; }.auth-form { gap:17px; }.auth-field .input { height:45px; font-size:12px; }.auth-assistance { font-size:10px; }.auth-footer { font-size:9px; }.setup-form-wrap { padding-bottom:24px; } }