:root { --auth-ink: #0b1930; --auth-muted: #65758b; --auth-blue: #0866ff; --auth-line: #dbe4ef; }
* { box-sizing: border-box; }
.auth-body { margin: 0; min-height: 100vh; color: var(--auth-ink); background: #f5f8fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.08fr) minmax(420px, .92fr); }
.auth-showcase { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; padding: 38px clamp(38px, 5vw, 78px); color: white; background: radial-gradient(circle at 80% 18%, rgba(48,190,255,.18), transparent 30%), radial-gradient(circle at 12% 85%, rgba(24,210,168,.14), transparent 28%), linear-gradient(145deg, #061329, #0a2856 65%, #0756b8); }
.auth-showcase::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.auth-showcase-glow { position: absolute; border: 1px solid rgba(126,190,255,.17); border-radius: 50%; }
.glow-one { width: 430px; height: 430px; right: -170px; top: 120px; box-shadow: 0 0 80px rgba(8,102,255,.08) inset; }
.glow-two { width: 250px; height: 250px; left: -100px; bottom: 80px; }
.auth-showcase-header, .auth-showcase-footer, .auth-story, .auth-demo { position: relative; z-index: 2; }
.auth-showcase-header { display: flex; align-items: center; justify-content: space-between; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 22px; font-weight: 850; letter-spacing: -.7px; }
.auth-brand > span:last-child > span { color: #76b8ff; }
.auth-brand .brand-mark { width: 35px; height: 35px; }
.auth-docs-link { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #c5d9f3; font-size: 12px; font-weight: 750; }
.auth-docs-link:hover { color: white; border-color: rgba(255,255,255,.32); }
.auth-story { max-width: 680px; margin: auto 0 40px; }
.auth-kicker { margin: 0 0 13px; color: #54ddbd; font-size: 11px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.auth-story h1 { margin: 0; font-size: clamp(48px, 5.4vw, 78px); line-height: .98; letter-spacing: -4px; }
.auth-story h1 span { color: #79baff; }
.auth-story > p:not(.auth-kicker) { max-width: 620px; margin: 24px 0; color: #b8c9de; font-size: 17px; line-height: 1.7; }
.auth-capabilities { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-capabilities span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #cedced; background: rgba(255,255,255,.055); font-size: 11px; font-weight: 650; }
.auth-capabilities b { color: #59dfbf; }
.auth-demo { max-width: 650px; margin-bottom: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(3,14,35,.42); box-shadow: 0 24px 60px rgba(0,8,25,.22); backdrop-filter: blur(14px); }
.auth-demo-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,.09); color: #91a8c5; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.live-pill { display: flex; align-items: center; gap: 5px; color: #65dfc2; }.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #47d3b1; box-shadow: 0 0 0 4px rgba(71,211,177,.12); }
.auth-demo-message { display: grid; grid-template-columns: 38px 1fr 26px; gap: 12px; align-items: start; padding: 18px; }
.auth-demo-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, #0866ff, #43a0ff); font-weight: 900; }
.auth-demo-message strong { font-size: 11px; letter-spacing: .09em; }.auth-demo-message p { margin: 5px 0 0; color: #c1d0e2; font-size: 12px; line-height: 1.55; }
.delivery-check { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #4bd7b6; background: rgba(75,215,182,.12); font-size: 12px; font-weight: 900; }
.auth-demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.08); }
.auth-demo-stats span { padding: 12px 18px; border-right: 1px solid rgba(255,255,255,.08); }.auth-demo-stats span:last-child { border: 0; }
.auth-demo-stats small, .auth-demo-stats strong { display: block; }.auth-demo-stats small { color: #7e94b0; font-size: 9px; text-transform: uppercase; }.auth-demo-stats strong { margin-top: 2px; color: #e0e9f5; font-size: 12px; }.auth-demo-stats .delivered-text { color: #58dabb; }
.auth-showcase-footer { display: flex; align-items: center; gap: 10px; margin-top: 30px; color: #7890af; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }.auth-showcase-footer span { width: 3px; height: 3px; border-radius: 50%; background: #607b9c; }

.auth-panel { min-height: 100vh; display: flex; flex-direction: column; padding: 30px clamp(28px, 5vw, 74px); background: radial-gradient(circle at 85% 5%, rgba(8,102,255,.07), transparent 24%), #f8fafc; }
.auth-mobile-header { display: none; align-items: center; justify-content: space-between; }.auth-mobile-header .auth-brand { color: var(--auth-ink); }.auth-mobile-header .auth-brand > span:last-child > span { color: var(--auth-blue); }
.auth-home-link { color: #5c6c82; font-size: 12px; font-weight: 750; }
.auth-panel-inner { width: min(440px, 100%); margin: auto; padding: 50px 0; }
.auth-form-heading { margin-bottom: 33px; }.auth-form-heading .auth-kicker { color: var(--auth-blue); }.auth-form-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 43px); line-height: 1.08; letter-spacing: -1.8px; }.auth-form-heading > p:not(.auth-kicker) { margin: 12px 0 0; color: var(--auth-muted); font-size: 14px; line-height: 1.6; }.auth-form-heading strong { color: #31435e; }
.auth-alert { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 23px; padding: 12px 14px; border: 1px solid #f3c7cc; border-radius: 11px; color: #9d3743; background: #fff1f2; font-size: 12px; }.auth-alert p { margin: 1px 0 0; overflow-wrap: anywhere; }.auth-alert-icon { display: grid; flex: 0 0 23px; width: 23px; height: 23px; place-items: center; border-radius: 7px; color: white; background: #d34c5b; font-weight: 900; }
.auth-alert-success { color: #14745f; border-color: #b9e7db; background: #ecfaf6; }.auth-alert-success .auth-alert-icon { background: #10a47f; }.auth-alert-info { color: #255b9d; border-color: #c5dcfa; background: #eef5ff; }.auth-alert-info .auth-alert-icon { background: #307edc; }
.auth-form { display: grid; gap: 20px; }
.auth-field label { display: block; margin-bottom: 7px; color: #30415a; font-size: 12px; font-weight: 800; }.auth-label-row { display: flex; align-items: center; justify-content: space-between; }.auth-label-row a { margin-bottom: 7px; color: var(--auth-blue); font-size: 11px; font-weight: 750; }
.auth-input-wrap { position: relative; }.auth-input-wrap input { width: 100%; height: 49px; padding: 0 58px 0 44px; border: 1px solid #ccd8e5; border-radius: 11px; outline: none; color: var(--auth-ink); background: white; font-size: 14px; transition: .18s ease; }.auth-input-wrap input::placeholder { color: #a0aabb; }.auth-input-wrap input:focus { border-color: var(--auth-blue); box-shadow: 0 0 0 4px rgba(8,102,255,.09); }
.auth-input-icon { position: absolute; z-index: 1; inset: 0 auto 0 14px; display: flex; align-items: center; color: #728298; }.auth-input-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-reveal { position: absolute; inset: 0 4px 0 auto; width: 46px; display: grid; place-items: center; border: 0; color: #68788e; background: transparent; cursor: pointer; }.password-reveal:hover, .password-reveal:focus-visible { color: var(--auth-blue); outline: none; }
.eye-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.eye-closed { display: none; }.password-reveal[aria-pressed="true"] .eye-open { display: none; }.password-reveal[aria-pressed="true"] .eye-closed { display: block; }
.auth-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 5px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg, #075de6, #087cf1); box-shadow: 0 12px 28px rgba(8,102,255,.22); cursor: pointer; font-size: 13px; font-weight: 850; transition: .2s ease; }.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(8,102,255,.29); }.auth-submit:disabled { cursor: wait; opacity: .72; transform: none; }.submit-arrow { font-size: 18px; }.auth-submit.is-loading .submit-arrow { animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.password-guidance { display: flex; gap: 7px; margin: -5px 0 0; color: #78879b; font-size: 10px; }.password-guidance span { color: #0ca17c; font-weight: 900; }
.auth-register-prompt { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 27px; padding: 13px; border: 1px solid var(--auth-line); border-radius: 10px; color: #6a798d; background: white; font-size: 11px; }.auth-register-prompt a { color: var(--auth-blue); font-weight: 850; }.compact-prompt { justify-content: flex-start; background: transparent; border: 0; padding-inline: 0; }
.auth-help-links { display: flex; justify-content: space-between; gap: 15px; margin-top: 22px; }.auth-help-links a { color: #758399; font-size: 10px; font-weight: 700; }.auth-help-links a:hover { color: var(--auth-blue); }
.auth-panel-footer { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid #e1e8f0; color: #8995a6; font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.auth-legal-links { display: inline-flex; align-items: center; gap: 7px; }.auth-legal-links a:hover { color: var(--auth-blue); }.auth-legal-links i { width: 3px; height: 3px; border-radius: 50%; background: #aeb8c5; }

@media (max-width: 980px) { .auth-shell { grid-template-columns: 1fr; }.auth-showcase { display: none; }.auth-panel { padding: 24px clamp(20px, 7vw, 70px); }.auth-mobile-header { display: flex; }.auth-panel-inner { padding: 55px 0; } }
@media (max-width: 520px) { .auth-panel { padding: 19px 18px; }.auth-panel-inner { padding: 42px 0 32px; }.auth-form-heading h2 { font-size: 34px; }.auth-panel-footer { flex-direction: column; align-items: center; gap: 5px; }.auth-help-links { flex-direction: column; align-items: center; }.auth-register-prompt { flex-direction: column; }.auth-input-wrap input { font-size: 16px; } }