:root{
  --blue:#2EA8FF; --blue-2:#56D8FF; --purple:#0F73FF; --purple-2:#2EA8FF; --pink:#56D8FF;
  --grad:linear-gradient(135deg,#0F73FF 0%,#2EA8FF 50%,#56D8FF 100%);

  --bg:#05070B; --bg-2:#0A1220; --bg-3:#101B2D;
  --ink:#F5F7FA; --ink-soft:#A7B5C8; --mute:#70839E; --mute-2:#5C6E88;
  --line:#253B5C; --line-soft:rgba(255,255,255,.08);

  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
img,svg{display:block;max-width:100%}
input{font-family:inherit}

/* Invisible spam trap. Keep it in the DOM for bots, never in the UI. */
.iv-hp{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-9999px) !important;
}
.iv-hp input{position:absolute !important;inset:0 !important;}

/* ============== shell ============== */
.auth{
  display:grid; grid-template-columns:minmax(390px,1.05fr) minmax(420px,.95fr);
  min-height:100svh; width:100%;
}
.auth.iv-embed{
  width:100vw; margin-inline:calc(50% - 50vw);
}
@media (max-width:900px){ .auth{ grid-template-columns:1fr; } }

/* ============== brand panel ============== */
.brand-panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, #2EA8FF 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 90% 90%, #0F73FF 0%, transparent 55%),
    linear-gradient(150deg,#0B1A33 0%,#0E2547 50%,#123061 100%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:100svh;
  padding:clamp(40px,4vw,58px) clamp(34px,4vw,58px) clamp(36px,3.5vw,50px);
}

/* particle canvas inside panel */
.brand-panel .stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* big morphing orb */
.brand-panel .orb-big{
  position:absolute; z-index:0; pointer-events:none;
  width:min(56%,460px); aspect-ratio:1; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0%, rgba(205,230,255,.6) 22%, rgba(86,216,255,.35) 50%, rgba(15,60,140,.18) 78%, transparent 90%);
  filter:blur(2px);
  animation:orbFloat 14s ease-in-out infinite;
}
.brand-panel .orb-ring{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; left:50%; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
}
.brand-panel .orb-ring.r1{ width:min(64%,520px); aspect-ratio:1; animation:spin 50s linear infinite; }
.brand-panel .orb-ring.r2{ width:min(78%,640px); aspect-ratio:1; border-color:rgba(255,255,255,.12); animation:spin 80s linear infinite reverse; }
.brand-panel .orb-ring .pip{ position:absolute; top:-3px; left:50%; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; transform:translateX(-50%); }
.brand-panel .orb-ring.r2 .pip{ background:rgba(255,255,255,.7); box-shadow:0 0 8px rgba(255,255,255,.6); }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes orbFloat{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-54%) scale(1.05); }
}

.bp-top{ position:relative; z-index:2; display:flex; align-items:center; gap:11px; }
.bp-top .logo{
  width:42px; height:42px; flex-shrink:0;
  object-fit:contain; display:block; border-radius:50%; padding:5px;
  background:radial-gradient(circle at 35% 30%, #ffffff, #DCEBFB 78%);
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.25);
}
.bp-top .name{ font-family:var(--sans); font-weight:500; font-size:18px; letter-spacing:.01em; }

.bp-mid{ position:relative; z-index:2; margin-top:auto; }
.bp-mid .quote{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.4vw,46px); line-height:1.12; letter-spacing:-.015em;
  max-width:16ch;
}
.bp-mid .quote i{ font-style:italic; color:#EBE3FF; }
.bp-mid .sub{
  margin-top:22px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.82);
  max-width:42ch;
}

.bp-bottom{ position:relative; z-index:2; margin-top:40px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.bp-bottom .chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:7px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
}

/* ============== form panel ============== */
.form-panel{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100svh;
  padding:clamp(46px,5vw,72px) clamp(30px,4vw,58px);
  background:var(--bg);
}

.form-card{ width:100%; max-width:420px; }
.fc-head{ text-align:left; margin-bottom:28px; }
.fc-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); display:inline-flex; align-items:center; gap:9px;
}
.fc-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--grad);
  box-shadow:0 0 0 3px rgba(46,168,255,.18);
}
.fc-title{
  margin-top:16px;
  font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,46px);
  line-height:1.04; letter-spacing:-.02em; color:var(--ink);
}
.fc-title i{ font-style:italic; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fc-desc{ margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--mute); }
.fc-desc a{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }

/* social */
.social-row{ display:flex; gap:12px; margin-bottom:24px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  height:48px; border:1px solid var(--line); border-radius:12px; background:var(--bg-3);
  font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.social-btn:hover{ border-color:var(--purple-2); background:rgba(46,168,255,.07); transform:translateY(-1px); box-shadow:0 8px 20px rgba(46,168,255,.14); }
.social-btn svg{ width:18px; height:18px; }

.divider{ display:flex; align-items:center; gap:16px; margin:24px 0; }
.divider .ln{ flex:1; height:1px; background:var(--line); }
.divider span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); }

/* fields */
.field{ margin-bottom:16px; position:relative; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label{
  display:block; font-size:12.5px; font-weight:500; letter-spacing:.01em;
  color:var(--ink-soft); margin-bottom:8px;
}
.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap .lead-ic{
  position:absolute; left:15px; width:18px; height:18px; color:var(--mute-2);
  pointer-events:none; transition:color .2s;
}
.field input{
  width:100%; height:50px;
  padding:0 16px 0 44px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-2);
  font-size:14.5px; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field.row2 input{ padding-left:16px; }
/* keep the password dots clear of the show/hide eye button on the right
   (plain id selector — :has() can be stripped by CSS optimizers) */
#password{ padding-right:48px; }
.field input::placeholder{ color:var(--mute-2); }
.field input:focus{
  outline:none; border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(15,115,255,.2);
  background:var(--bg-2);
}
.field input:focus + .lead-ic, .input-wrap:focus-within .lead-ic{ color:var(--purple); }
.pw-toggle{
  position:absolute; right:12px; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--mute-2);
  transition:color .2s, background .2s;
}
.pw-toggle:hover{ color:var(--ink); background:var(--bg-2); }
.pw-toggle svg{ width:18px; height:18px; }
.pw-toggle .ic-off{ display:none; }
.pw-toggle.show .ic-on{ display:none; }
.pw-toggle.show .ic-off{ display:block; }

/* strength meter (signup only) */
.strength{ margin-top:10px; display:none; }
.strength.on{ display:block; }
.strength .bars{ display:flex; gap:5px; }
.strength .bars i{ flex:1; height:4px; border-radius:3px; background:var(--line); transition:background .3s; }
.strength .lbl{ margin-top:7px; font-size:11.5px; color:var(--mute); font-family:var(--mono); letter-spacing:.04em; }

/* options row */
.opt-row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 24px; }
.checkbox{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13.5px; color:var(--ink-soft); }
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox .box{
  width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
}
.checkbox .box svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.5); transition:all .2s; }
.checkbox input:checked + .box{ background:var(--grad); border-color:transparent; }
.checkbox input:checked + .box svg{ opacity:1; transform:scale(1); }
.checkbox input:focus-visible + .box{ box-shadow:0 0 0 4px rgba(15,115,255,.16); }
.forgot{ font-size:13.5px; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* submit */
.submit{
  width:100%; height:52px; border-radius:12px;
  background:var(--grad); color:#fff; font-size:15px; font-weight:600; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 10px 26px rgba(46,168,255,.32);
  transition:transform .18s, box-shadow .25s, filter .2s;
}
.submit:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(46,168,255,.45); }
.submit:active{ transform:translateY(0); }
.submit .arrow{ width:15px; height:15px; position:relative; }
.submit .arrow::before{ content:""; position:absolute; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; width:9px; height:9px; left:2px; top:3px; transform:rotate(45deg); transition:transform .2s; }
.submit:hover .arrow::before{ transform:rotate(45deg) translate(2px,-2px); }

/* terms (signup) */
.terms{ display:none; margin:2px 0 22px; font-size:12.5px; line-height:1.5; color:var(--mute); }
.terms.on{ display:block; }
.terms a{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }

/* switch footer */
.switch-foot{ margin-top:28px; text-align:center; font-size:14px; color:var(--mute); }
.switch-foot button{ font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* mode visibility — keyed off BOTH the body (standalone page) and the .auth
   wrapper (shortcode embed, where the server can't set a body attribute) so
   signup renders correctly even before/without JS. */
.signup-only{ display:none; }
.field.row2.signup-only{ display:none; }
body[data-mode="signup"] .signup-only,
.auth[data-iv-mode="signup"] .signup-only{ display:block; }
body[data-mode="signup"] .field.row2.signup-only,
.auth[data-iv-mode="signup"] .field.row2.signup-only{ display:grid; }
body[data-mode="signup"] .login-only,
.auth[data-iv-mode="signup"] .login-only{ display:none; }
/* JS toggle back to login inside an embed: body may still say signup */
.auth[data-iv-mode="login"] .signup-only{ display:none !important; }
.auth[data-iv-mode="login"] .login-only{ display:flex; }

/* fade swap */
.fc-head, .social-row, .form-fields, .switch-foot{ animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* back link */
.back-link{
  position:absolute; top:28px; right:74px; z-index:3;
  font-size:13px; color:var(--mute); display:inline-flex; align-items:center; gap:7px;
  transition:color .2s;
}
.back-link:hover{ color:var(--ink); }
.back-link svg{ width:14px; height:14px; }

/* ============================================================
   MOBILE  (placed last so it overrides base rules cleanly)
============================================================ */
@media (max-width:900px){
  .auth{ display:flex; flex-direction:column; min-height:100dvh; position:relative; }

  /* brand panel -> compact centered header */
  .brand-panel{
    flex:0 0 auto; min-height:auto;
    padding:64px 28px 58px;
    align-items:center; justify-content:center; text-align:center;
  }
  .bp-top{ flex-direction:column; gap:13px; }
  .bp-top .logo{ width:60px; height:60px; }
  .bp-top .name{ font-size:23px; }
  .bp-mid{ margin-top:18px; }
  .bp-mid .quote{ font-size:clamp(26px,7vw,34px); max-width:22ch; margin:0 auto; }
  .bp-mid .sub{ display:none; }
  .bp-bottom{ display:none; }

  /* form panel -> bottom sheet sliding up over the header */
  .form-panel{
    position:static;
    flex:1 1 auto;
    border-radius:30px 30px 0 0;
    margin-top:-32px;
    padding:38px 30px 46px;
    box-shadow:0 -12px 44px rgba(40,30,90,.16);
  }
  .form-panel::before{
    content:""; display:block; width:44px; height:5px; border-radius:999px;
    background:var(--line); margin:-12px auto 26px;
  }
  .form-card{ max-width:440px; }

  /* back link -> floating glass button over the header (anchored to .auth) */
  .back-link{
    position:absolute; top:20px; left:20px; right:auto; z-index:6;
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32);
    color:#fff; justify-content:center; gap:0;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    font-size:0; transition:background .2s, transform .15s;
  }
  .back-link svg{ width:18px; height:18px; }
  .back-link:hover{ color:#fff; background:rgba(255,255,255,.26); }
  .back-link:active{ transform:scale(.93); }
}

@media (max-width:520px){
  .brand-panel{ padding:60px 22px 54px; }
  .bp-mid{ margin-top:14px; }
  .form-panel{ padding:32px 22px 40px; }
  .form-card{ max-width:none; }
  /* 16px+ inputs stop iOS Safari from zooming on focus */
  .field input{ font-size:16px; height:52px; }
  .field label{ font-size:13px; }
  .social-btn{ height:50px; font-size:15px; }
  .social-row{ gap:10px; }
  .submit{ height:54px; }
  .fc-head{ margin-bottom:26px; }
}

/* ===================== LIGHT THEME ===================== */
html[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#F1F5FA; --bg-3:#FFFFFF;
  --ink:#0C1B2E; --ink-soft:#3D4E63; --mute:#6B7C93; --mute-2:#93A2B5;
  --line:#DCE5F0; --line-soft:rgba(12,40,80,.1);
}
/* (Theme toggle removed from the login/register screens.) */

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .fc-head, .social-row, .form-fields, .switch-foot{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ===================== ALERTS, POPUP, TOAST =====================
   The inline .iv-alert is the no-JavaScript fallback only: with JS on,
   auth.js removes it and opens the modal instead. It previously had no
   styles at all, which is why a server-rendered error appeared as bare
   text jammed against the first label. */
.iv-alert{
  margin:0 0 18px; padding:12px 14px; border-radius:12px;
  font-size:13.5px; line-height:1.5; border:1px solid transparent;
}
.iv-alert.err{ background:rgba(224,85,107,.12); border-color:rgba(224,85,107,.35); color:#FF8A9B; }
.iv-alert.ok{ background:rgba(63,185,132,.12); border-color:rgba(63,185,132,.35); color:#5FD3A3; }
html[data-theme="light"] .iv-alert.err{ background:#FFF1F3; border-color:#F5C2CB; color:#B3243C; }
html[data-theme="light"] .iv-alert.ok{ background:#EEF9F4; border-color:#B6E4CE; color:#1B7A55; }

/* ---- modal ---- */
.iv-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.iv-modal[hidden]{ display:none; }
.iv-modal-back{
  position:absolute; inset:0; background:rgba(3,7,14,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.iv-modal.is-open .iv-modal-back{ opacity:1; }
.iv-modal-card{
  position:relative; width:100%; max-width:428px; padding:30px 28px 24px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  text-align:center; outline:none;
  opacity:0; transform:translateY(12px) scale(.97);
  transition:opacity .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"] .iv-modal-card{ background:#FFFFFF; box-shadow:0 30px 80px rgba(12,40,80,.18); }
.iv-modal.is-open .iv-modal-card{ opacity:1; transform:translateY(0) scale(1); }

.iv-modal-icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.iv-modal-icon svg{ width:26px; height:26px; }
.iv-modal-card[data-tone="err"] .iv-modal-icon{ background:rgba(224,85,107,.14); color:#E0556B; }
.iv-modal-card[data-tone="ok"] .iv-modal-icon{ background:rgba(63,185,132,.14); color:#3FB984; }

.iv-modal-title{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
.iv-modal-msg{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

.iv-modal-actions{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.iv-modal-btn{
  display:flex; align-items:center; justify-content:center; height:46px;
  border-radius:12px; font-size:14.5px; font-weight:500; text-align:center;
  border:1px solid var(--line); color:var(--ink-soft); background:transparent;
  transition:border-color .2s, color .2s, background .2s, transform .15s;
}
.iv-modal-btn:hover{ color:var(--ink); border-color:var(--purple-2); transform:translateY(-1px); }
.iv-modal-btn.primary{
  background:var(--grad); border-color:transparent; color:#fff; font-weight:600;
  box-shadow:0 10px 24px rgba(46,168,255,.28);
}
.iv-modal-btn.primary:hover{ color:#fff; }
.iv-modal-x{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; border-radius:9px;
  color:var(--mute); transition:color .2s, background .2s;
}
.iv-modal-x:hover{ color:var(--ink); background:var(--line-soft); }
.iv-modal-x svg{ width:16px; height:16px; }

/* ---- toast (notices, never errors) ---- */
.iv-toast{
  position:fixed; top:18px; left:50%; z-index:210;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  font-size:14px; box-shadow:0 16px 40px rgba(0,0,0,.35);
  transform:translate(-50%,-18px); opacity:0;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"] .iv-toast{ background:#FFFFFF; box-shadow:0 16px 40px rgba(12,40,80,.16); }
.iv-toast.is-in{ opacity:1; transform:translate(-50%,0); }
.iv-toast svg{ width:19px; height:19px; color:#3FB984; flex:none; }

/* ---- Google button (now a link, so it needs its own box) ---- */
.social-btn.google{ text-decoration:none; background:var(--bg-3); }
.social-btn.google svg{ width:19px; height:19px; }
html[data-theme="light"] .social-btn.google{ background:#FFFFFF; }

/* ---- submitting ---- */
.form-fields.is-busy{ pointer-events:none; }
.form-fields.is-busy .submit{ opacity:.72; cursor:progress; }

@media (max-width:520px){
  .iv-modal-card{ padding:26px 20px 20px; border-radius:18px; }
  .iv-modal-title{ font-size:18px; }
}