:root {--navy:#102a57;--navy-dark:#0d2144;--blue:#3574dd;--ink:#111b2d;--muted:#657186;--line:#dfe5ed}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {min-width:320px;margin:0;background:#fff;color:var(--ink);font-family:Onest,system-ui,sans-serif}
button,input {font:inherit}
button {cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #6ba1fb;outline-offset:3px}
::selection {background:#98bcfa;color:var(--navy)}
.skip-link {position:absolute;top:-100px;left:18px;z-index:10;padding:12px 16px;background:#fff;color:var(--navy)}
.skip-link:focus {top:18px}
.auth-layout {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:12px;min-height:100svh;padding:12px}
.auth-hero {position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100svh - 24px);overflow:hidden;border-radius:28px;background:radial-gradient(circle at 80% 55%,#2b5fac 0,#173c7b 37%,#102a57 76%);color:#fff}
.auth-hero:before {content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(90deg,transparent,#000)}
.auth-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 40px}
.brand {display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-.05em}
.brand-mark {display:grid;place-items:center;width:31px;height:31px;border:2px solid currentColor;border-radius:50%;font-size:19px;font-weight:600;line-height:1;letter-spacing:-.09em}
.brand-dot {color:#8cbbff}
.auth-header nav {display:flex;gap:28px;font-size:13px;font-weight:500}
.auth-header nav a {color:#dbe9ff;text-decoration:none}.auth-header nav a:hover {color:#fff}
.auth-hero-content {position:relative;z-index:1;max-width:680px;margin:65px 6% 0}
.eyebrow,.form-kicker {display:inline-flex;align-items:center;gap:11px;margin:0;color:#bfd6ff;font-size:12px;font-weight:600;letter-spacing:.14em}
.eyebrow:before,.form-kicker:before {content:"";width:18px;height:2px;background:currentColor}
.auth-hero h1 {margin:25px 0 23px;font-size:clamp(54px,5.8vw,98px);font-weight:600;line-height:.95;letter-spacing:-.075em}
.auth-hero h1 em {color:#92bcff;font-style:normal}
.auth-hero-content>p:last-child {max-width:540px;margin:0;color:#d7e6fb;font-size:clamp(16px,1.25vw,20px);line-height:1.55}
.auth-art {position:relative;display:grid;place-items:center;flex:1;min-height:255px;margin:0 7%;perspective:900px}
.auth-orbit {position:absolute;width:min(32vw,310px);aspect-ratio:1;border:1px solid #ffffff3a;border-radius:50%;box-shadow:0 0 0 58px #ffffff07,0 0 0 116px #ffffff04}
.auth-device {position:relative;width:150px;height:215px;padding:7px;border:2px solid #53647a;border-radius:21px;background:#111a2f;box-shadow:20px 28px 35px #061b3d9c;transform:rotate(8deg)}
.auth-device:before {content:"";position:absolute;top:3px;left:50%;width:4px;height:4px;border-radius:50%;background:#67788c}
.auth-screen {display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:12px;background:#f8f9f7;color:var(--ink)}
.auth-screen>span {padding:10px 9px;background:#e2e9f3;color:var(--navy);font-size:6px;font-weight:700;letter-spacing:.14em}
.auth-screen-visual {display:flex;align-items:end;gap:6px;flex:1;padding:20px 18px 10px;background:linear-gradient(140deg,#cadbf2,#6a9bd7)}
.auth-screen-visual i {display:block;flex:1;height:48%;border-radius:6px 6px 2px 2px;background:#f5f8fd}.auth-screen-visual i:nth-child(2) {height:78%;background:#a8c8f4}.auth-screen-visual i:nth-child(3) {height:61%;background:#3974c9}
.auth-screen strong {padding:11px 9px 2px;font-size:18px;line-height:1;letter-spacing:-.06em}
.auth-screen small {margin:auto 9px 0;padding:5px 0 8px;border-top:1px solid #d7ded7;color:var(--navy);font-size:5px;font-weight:700;letter-spacing:.1em}
.auth-chip {position:absolute;z-index:1;padding:10px 12px;border-radius:9px;background:#fff;color:var(--navy);box-shadow:0 12px 22px #061b3d66;font-size:9px;font-weight:700;letter-spacing:.1em}
.auth-chip.one {left:23%;top:18%;transform:rotate(-6deg)}.auth-chip.two {right:17%;bottom:17%;transform:rotate(5deg)}
.auth-hero-bottom {display:flex;justify-content:space-between;gap:15px;padding:0 40px 30px;color:#c7daf7;font-size:10px;letter-spacing:.13em}

.auth-side {display:flex;flex-direction:column;min-width:0;padding:28px clamp(26px,5vw,90px) 25px}
.side-top,.side-bottom {display:flex;justify-content:space-between;gap:18px;color:#8895a8;font-size:11px;letter-spacing:.08em}
.side-top a {color:var(--navy);font-weight:600;text-decoration:none;letter-spacing:0}.side-top a:hover {text-decoration:underline}
.auth-card {width:min(100%,500px);margin:auto;}
.form-kicker {color:var(--blue)}
.auth-card h2 {margin:17px 0 15px;font-size:clamp(42px,4vw,68px);font-weight:600;line-height:.98;letter-spacing:-.065em}
.auth-muted {max-width:470px;margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.next-note {margin-top:9px}
.auth-card form {display:grid;gap:18px;margin-top:34px}
.field {display:grid;gap:8px}
.field label {color:#34435a;font-size:13px;font-weight:600}
.field input {width:100%;min-height:54px;padding:0 17px;border:1px solid #cfdae8;border-radius:13px;background:#f9fbfd;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus {border-color:var(--blue);box-shadow:0 0 0 3px #3574dd20}
.primary-button {display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:55px;margin-top:8px;padding:0 19px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;transition:background .2s,transform .2s}
.primary-button:hover {background:var(--blue);transform:translateY(-2px)}
.primary-button span {font-size:20px;line-height:1}
.auth-switch {display:flex;flex-direction:column;gap:6px;margin-top:29px;padding-top:25px;border-top:1px solid var(--line);font-size:13px}
.auth-switch span {color:var(--muted)}
.auth-switch a {color:var(--blue);font-weight:600;text-decoration:none}.auth-switch a:hover {text-decoration:underline}
.form-error {display:block;margin:12px 0 0;color:#ae3843;font-size:12px;line-height:1.4}
.field .form-error {margin:0}
.form-error ul {margin:0;padding-left:18px}
.side-bottom {padding-top:30px}

@media(max-width:1050px) {
  .auth-layout {grid-template-columns:1fr 1fr}
  .auth-side {padding:25px 30px}
  .auth-hero-content {margin-top:55px}
  .auth-hero h1 {font-size:clamp(50px,6vw,74px)}
  .auth-chip.one {left:12%}.auth-chip.two {right:10%}
}
@media(max-width:760px) {
  .auth-layout {display:block;padding:7px}
  .auth-hero {min-height:0;border-radius:20px}
  .auth-header {padding:22px 24px}
  .auth-header nav {gap:16px;font-size:12px}
  .auth-hero-content {margin:35px 24px 0}
  .auth-hero h1 {margin:20px 0;font-size:clamp(48px,10vw,72px)}
  .auth-hero-content>p:last-child {font-size:15px}
  .auth-art {min-height:160px;margin:0 24px}
  .auth-orbit {width:190px;box-shadow:0 0 0 38px #ffffff07,0 0 0 76px #ffffff04}
  .auth-device {width:89px;height:127px;padding:4px;border-radius:14px}
  .auth-screen {border-radius:7px}.auth-screen>span {padding:6px;font-size:4px}
  .auth-screen-visual {padding:8px 10px 5px}.auth-screen strong {padding:6px;font-size:10px}.auth-screen small {margin:2px 6px 0;padding:3px 0 5px;font-size:3px}
  .auth-chip {padding:7px;font-size:6px}.auth-chip.one {left:18%;top:15%}.auth-chip.two {right:16%;bottom:14%}
  .auth-hero-bottom {padding:6px 24px 24px;font-size:8px}
  .auth-side {padding:24px 22px 16px}
  .auth-card {margin:65px auto 80px}
  .auth-card h2 {font-size:clamp(42px,9vw,64px)}
  .side-bottom {padding-top:20px;border-top:1px solid var(--line)}
}
@media(max-width:390px) {.auth-header nav {gap:10px}.auth-hero-bottom span:last-child {display:none}.auth-chip.one {left:5%}.auth-chip.two {right:5%}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}.primary-button,.field input {transition:none}}