:root{
  --blue:#4A6FE3; --blue-2:#6A8BFF; --purple:#7E5DD7; --purple-2:#9B7BEE; --pink:#C77BD7;
  --grad:linear-gradient(135deg,#4A6FE3 0%,#7E5DD7 100%);
  --bg:#FBFBFD; --bg-2:#F4F3F9; --bg-3:#EFEDF8;
  --ink:#1B1B2E; --ink-soft:#383852; --mute:#6F6F88; --mute-2:#9694AE;
  --line:#E3E1ED; --line-soft:#EEEAF5;
  --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}

.auth{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100dvh; width:100%; }
@media (max-width:900px){ .auth{ grid-template-columns:1fr; } }

/* Shortcode embed: break out of the theme's content container to the screen edges. */
.auth.iv-embed{ position:relative; left:50%; right:50%; width:100vw; max-width:100vw; margin-left:-50vw; margin-right:-50vw; margin-top:0; }

.brand-panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, #5A78E8 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 90% 90%, #8E63DD 0%, transparent 55%),
    linear-gradient(150deg,#3E5BC9 0%,#6A4FC7 50%,#8B5FCF 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  padding:56px 56px 48px;
}
.brand-panel .stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.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(214,205,255,.6) 22%, rgba(150,123,238,.35) 50%, rgba(80,60,160,.15) 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:34px; height:34px; border-radius:50%; flex-shrink:0; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.bp-top .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.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{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 40px; background:var(--bg); }
.form-card{ width:100%; max-width:404px; }
.fc-head{ text-align:left; margin-bottom:32px; }
.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 color-mix(in oklab, var(--blue) 18%, transparent); }
.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; }

.iv-alert{ margin-bottom:20px; padding:12px 14px; border-radius:11px; font-size:13.5px; line-height:1.45; border:1px solid; }
.iv-alert.err{ background:#FDECEE; border-color:#F4C4CC; color:#B23645; }
.iv-alert.ok{ background:#E9F7EF; border-color:#BFE6CE; color:#1F7A45; }

.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:#fff; 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:var(--bg-2); transform:translateY(-1px); box-shadow:0 8px 20px rgba(126,93,215,.10); }
.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); }

.field{ margin-bottom:18px; 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:#fff; font-size:14.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s, background .2s; }
.field.row2 input{ padding-left:16px; }
.field input::placeholder{ color:var(--mute-2); }
.field input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 4px color-mix(in oklab, var(--purple) 14%, transparent); background:#fff; }
.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{ 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; }

.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 color-mix(in oklab, var(--purple) 16%, transparent); }
.forgot{ font-size:13.5px; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.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(126,93,215,.30); transition:transform .18s, box-shadow .25s, filter .2s; }
.submit:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(126,93,215,.42); }
.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{ 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-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; }

/* honeypot — visually hidden, off-screen */
.iv-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

.signup-only{ display:none; }
/* higher specificity than .field.row2{display:grid} so the name row hides in login mode */
.field.row2.signup-only{ display:none; }
body[data-mode="signup"] .signup-only{ display:block; }
body[data-mode="signup"] .field.row2.signup-only{ display:grid; }
body[data-mode="signup"] .login-only{ display:none; }

.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{ position:absolute; top:28px; right:36px; 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; }

@media (max-width:900px){
  .auth{ display:flex; flex-direction:column; min-height:100dvh; position:relative; }
  .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:54px; height:54px; }
  .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{ 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{ 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; }
  .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; }
}
@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; }
}

/* ===========================================================
   Hardening — keep the design intact if a theme tries to
   restyle inputs/buttons (only matters for the shortcode embed).
   =========================================================== */
.auth .field input{ width:100% !important; height:50px !important; padding:0 16px 0 44px !important; border:1px solid var(--line) !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important; line-height:normal !important; }
.auth .field.row2 input{ padding-left:16px !important; }
.auth .field input:focus{ border-color:var(--purple) !important; box-shadow:0 0 0 4px color-mix(in oklab, var(--purple) 14%, transparent) !important; }
.auth .lead-ic{ left:15px !important; top:auto !important; }
.auth .submit{ background:var(--grad) !important; color:#fff !important; border:0 !important; width:100% !important; height:52px !important; }
.auth .submit:hover{ color:#fff !important; }
.auth .social-btn{ background:#fff !important; }
.auth .pw-toggle{ background:none; }