/* ═══════════════════════════════════════════════════════════════
   VAPIMAILER — Login (split starfield/matrix + form)
   Self-contained: no shared theme vars, no CDN — this page has its
   own navy-black/electric-blue palette, independent of the app shell.
   ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{height:100%}
body.login-body{background:#050810;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;margin:0;padding:0}

.login-split{display:flex;width:100vw;height:100vh;position:relative;overflow:hidden}

/* Left starfield/matrix panel — dropped in favour of a single centered card (see #form-side
   below going full width); kept in the DOM (index.html still mounts its canvas/JS untouched)
   but never shown or laid out. */
#visual-side{display:none}

#form-side{width:100%;height:100%;background:linear-gradient(160deg,#070c18,#050810 55%);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:none}
#form-side input,#form-side button,#form-side a{cursor:pointer}
#form-side input[type="text"],#form-side input[type="password"]{cursor:text}
#right-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:50;pointer-events:none}
.form-dots{position:absolute;inset:0;opacity:.25;pointer-events:none;z-index:0;
  background-image:radial-gradient(#1a2740 1px,transparent 1px);background-size:24px 24px}

/* ── Step stage: all steps share one grid cell so switching the active one
   crossfades in place instead of jumping — feels like moving to the next
   page while the split-screen backdrop stays put underneath. ── */
.step-stage{position:relative;z-index:10;display:grid;width:100%;max-width:420px;padding:0 24px}
.step{grid-area:1/1;opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.step.active{opacity:1;transform:scale(1);pointer-events:auto;position:relative;z-index:2}

.card{background:#0b1120;border:1px solid #1c2b4a;border-radius:20px;padding:40px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 60px -30px rgba(47,111,235,.5);display:flex;flex-direction:column;align-items:center}
.card .logo{background:linear-gradient(145deg,#5b9dff,#2f6feb);border-radius:14px;width:56px;height:56px;display:flex;align-items:center;
  justify-content:center;margin-bottom:24px;box-shadow:0 8px 22px -8px rgba(47,111,235,.8)}
.card .logo svg{width:24px;height:24px}
.card .logo svg path,.card .logo svg rect{stroke:#fff}
.card h2{margin:0 0 8px;font-size:28px;font-weight:700;letter-spacing:-.01em;color:#fff}
.card .sub{color:#7c88a8;font-size:13px;margin:0 0 36px;text-align:center;line-height:1.5}
.card .sub b{color:#cfdcf7;font-weight:600}

.field-box{width:100%;background:#060a14;border:1px solid #253a5e;border-radius:12px;padding:4px;
  margin-bottom:14px;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease}
.field-box:focus-within{border-color:#2f6feb;box-shadow:0 0 0 3px rgba(47,111,235,.22)}
.field-box input{width:100%;background:transparent;border:0;padding:14px 16px;text-align:center;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:14px;outline:none}
.field-box input::placeholder{color:#3f4a63}
/* Chrome/Edge paint autofilled inputs with their own background + font metrics, ignoring
   `background:transparent` and our centered text-align — that's the saved-credentials text
   that looked like it was spilling out of the box. The huge inset box-shadow is the standard
   trick to force the field to stay on our dark background instead of the browser's; pairing
   it with -webkit-text-fill-color (color alone doesn't work on autofilled text) and re-asserting
   our own font/size/alignment keeps the filled-in value laid out exactly like a typed one. Also
   set on :focus since Chrome keeps the autofill styling live on the field until it's edited, not
   just on the initial paint. */
.field-box input:-webkit-autofill,
.field-box input:-webkit-autofill:hover,
.field-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #060a14 inset;
  box-shadow:0 0 0 1000px #060a14 inset;
  caret-color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:14px;text-align:center;
  transition:background-color 9999s ease-in-out 0s;
}

.btn-primary{width:100%;background:linear-gradient(135deg,#5b9dff,#2f6feb 65%,#1c3f8f);color:#fff;font-weight:700;border:0;border-radius:12px;
  padding:15px;font-size:13px;cursor:pointer;transition:.15s ease;margin-top:8px;margin-bottom:28px;box-shadow:0 10px 26px -10px rgba(47,111,235,.85)}
.btn-primary:hover{background:linear-gradient(135deg,#8dc0ff,#5b9dff 65%,#2f6feb);box-shadow:0 12px 30px -8px rgba(56,132,255,.95)}
.btn-primary:disabled{opacity:.6;cursor:default}

.back-link{background:none;border:0;color:#5b6b8f;font-size:11px;letter-spacing:.05em;cursor:pointer;
  padding:0;margin:-16px 0 20px;text-decoration:underline}
.back-link:hover{color:#8fa6d6}

.footer-note{color:#4a5878;font-size:10px;text-transform:uppercase;letter-spacing:.08em;text-align:center;margin:0}
.footer-note a{color:#5b9dff;text-decoration:none}
.footer-note a:hover{text-decoration:underline}

.step-err{color:#ff5c5c;font-size:12px;text-align:center;margin:14px 0 0;display:none}
.step-err.show{display:block}