:root{ color-scheme:dark; }
.auth-body{ min-height:100vh; background:radial-gradient(circle at 8% 10%,rgba(124,77,255,.22),transparent 27%),radial-gradient(circle at 92% 88%,rgba(255,77,157,.15),transparent 28%),#07060f; }
.auth-shell{ position:relative; min-height:100vh; width:min(100% - 44px,1160px); margin:auto; padding:34px 0 48px; }
.auth-shell::before{ content:""; position:absolute; width:440px; height:440px; left:30%; top:26%; border-radius:50%; background:rgba(134,80,255,.12); filter:blur(100px); pointer-events:none; }
.auth-brand{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.045em; }
.auth-brand img{ width:36px; height:36px; filter:drop-shadow(0 5px 17px rgba(124,77,255,.55)); }
.auth-brand > span > span{ color:var(--muted); font-weight:600; }
.auth-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .8fr; align-items:center; gap:clamp(48px,9vw,150px); min-height:calc(100vh - 120px); }
.auth-intro{ max-width:570px; padding:50px 0; }
.auth-kicker,.auth-overline{ display:flex; align-items:center; gap:9px; color:#d4caff; font:500 11px var(--body); letter-spacing:.18em; text-transform:uppercase; }
.auth-kicker i{ width:8px; height:8px; border-radius:50%; background:var(--magenta); box-shadow:0 0 0 5px rgba(255,77,157,.1); }
.auth-intro h1{ margin-top:22px; font-size:clamp(48px,5.4vw,76px); line-height:.94; }
.auth-intro h1 em{ font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:#d59cff; }
.auth-intro > p{ max-width:470px; margin-top:22px; color:var(--muted); font-size:17px; line-height:1.7; }
.auth-perks{ display:grid; gap:13px; margin-top:30px; color:#dcd7ed; font-size:14px; }
.auth-perks li{ display:flex; align-items:center; gap:10px; }
.auth-perks span{ display:grid; width:19px; height:19px; place-items:center; border-radius:50%; background:rgba(139,92,246,.18); color:#c8b0ff; font-size:12px; }
.auth-preview{ position:relative; overflow:hidden; width:min(100%,475px); height:180px; margin-top:44px; padding:18px; border:1px solid rgba(188,165,255,.22); border-radius:22px; background:linear-gradient(135deg,rgba(30,20,58,.88),rgba(15,12,28,.9)); box-shadow:0 24px 70px -28px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.1); }
.preview-top{ display:flex; gap:5px; }.preview-top span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); }.preview-top span:nth-child(2){background:rgba(194,158,255,.65)}
.preview-copy{ position:relative; z-index:1; display:grid; gap:7px; width:235px; margin-top:30px; }.preview-copy b{ font:700 21px/1.1 var(--display); letter-spacing:-.04em; }.preview-copy small{ color:#bdb4d8; font-size:11px; }
.preview-bars{ position:absolute; left:18px; bottom:19px; display:flex; align-items:end; gap:5px; height:24px; }.preview-bars i{ width:20px; height:10px; border-radius:3px; background:linear-gradient(#a678ff,#6f43df); }.preview-bars i:nth-child(2){height:17px}.preview-bars i:nth-child(3){height:13px}.preview-bars i:nth-child(4){height:23px;background:linear-gradient(#ef70c0,#a54bf4)}.preview-bars i:nth-child(5){height:19px}
.preview-orb{ position:absolute; right:-20px; top:-55px; width:230px; height:230px; border-radius:45% 55% 60% 40%; background:radial-gradient(circle at 35% 35%,#f7b2dc 0 3%,#b464ff 20%,#6939d3 50%,transparent 71%); transform:rotate(28deg); filter:drop-shadow(-15px 25px 42px rgba(204,60,180,.35)); }
.auth-card{ position:relative; overflow:hidden; padding:36px; border:1px solid rgba(255,255,255,.13); border-radius:26px; background:rgba(17,14,33,.78); box-shadow:0 28px 80px -34px #000, inset 0 1px rgba(255,255,255,.09); backdrop-filter:blur(18px); }
.auth-card::after{ content:""; position:absolute; width:200px; height:200px; top:-120px; right:-80px; border-radius:50%; background:rgba(143,91,255,.16); filter:blur(25px); }
.auth-card-head,.trial-form,.auth-terms,.auth-switch,.auth-success{ position:relative; z-index:1; }.auth-card h2{ margin-top:7px; font-size:31px; }.auth-card-head > p:last-child{ margin-top:6px; color:var(--muted); font-size:14px; }
.trial-form{ display:grid; gap:16px; margin-top:28px; }.trial-form label{ display:grid; gap:7px; color:#ddd7ee; font-size:13px; font-weight:500; }.trial-form input{ width:100%; border:1px solid rgba(188,165,255,.18); border-radius:11px; padding:13px 14px; background:rgba(4,3,10,.45); color:var(--paper); font:14px var(--body); outline:0; transition:border-color .2s,box-shadow .2s; }.trial-form input::placeholder{ color:#766f90; }.trial-form input:focus{ border-color:#a778ff; box-shadow:0 0 0 4px rgba(139,92,246,.14); }.auth-submit{ width:100%; margin-top:4px; padding:14px 20px; font-size:15px; }.auth-submit span{ font-size:18px; }.auth-terms,.auth-switch{ margin-top:18px; color:var(--muted); text-align:center; font-size:11.5px; }.auth-terms a,.auth-switch a{ color:#d5bcff; text-decoration:underline; text-underline-offset:3px; }.auth-switch{ margin-top:16px; font-size:13px; }.auth-success{ margin-top:20px; padding:14px; border:1px solid rgba(126,245,184,.25); border-radius:12px; background:rgba(68,208,139,.1); color:#b9ffd8; font-size:13px; }
/* ── entrance animation ─────────────────────────────────────
   Pure CSS so the auth pages stay independent of app.js.       */
@keyframes authRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes authCard{ from{ opacity:0; transform:translateY(26px) scale(.975); } to{ opacity:1; transform:none; } }
@keyframes authSheen{ 0%{ background-position:-180% 0; } 55%,100%{ background-position:180% 0; } }
@keyframes authBeat{ 0%,100%{ box-shadow:0 0 0 5px rgba(255,77,157,.10); } 50%{ box-shadow:0 0 0 9px rgba(255,77,157,0); } }

.auth-brand,
.auth-kicker,
.auth-intro h1,
.auth-intro > p,
.auth-perks li,
.auth-preview,
.auth-card{ animation:authRise .82s cubic-bezier(.22,1,.36,1) both; }

.auth-brand      { animation-delay:.05s; }
.auth-kicker     { animation-delay:.16s; }
.auth-intro h1   { animation-delay:.24s; }
.auth-intro > p  { animation-delay:.36s; }
.auth-perks li:nth-child(1){ animation-delay:.46s; }
.auth-perks li:nth-child(2){ animation-delay:.54s; }
.auth-perks li:nth-child(3){ animation-delay:.62s; }
.auth-preview    { animation-delay:.70s; }
.auth-card       { animation:authCard .9s cubic-bezier(.22,1,.36,1) .30s both; }

/* the serif line picks up a slow light sweep once it has landed */
.auth-intro h1 em{
  background:linear-gradient(100deg,#d59cff 0 38%,#ffffff 50%,#d59cff 62% 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:authSheen 5.5s ease-in-out 1.3s infinite;
}

/* form rows follow the card in */
.trial-form label,
.auth-terms,
.auth-switch{ animation:authRise .7s cubic-bezier(.22,1,.36,1) both; }
.trial-form label:nth-of-type(1){ animation-delay:.52s; }
.trial-form label:nth-of-type(2){ animation-delay:.60s; }
.trial-form label:nth-of-type(3){ animation-delay:.68s; }
.auth-submit{ animation:authRise .7s cubic-bezier(.22,1,.36,1) .76s both; }
.auth-terms { animation-delay:.84s; }
.auth-switch{ animation-delay:.90s; }

/* the kicker dot keeps a soft heartbeat */
.auth-kicker i{ animation:authBeat 2.6s ease-out 1.2s infinite; }

@media (prefers-reduced-motion:reduce){
  .auth-brand,.auth-kicker,.auth-intro h1,.auth-intro > p,.auth-perks li,
  .auth-preview,.auth-card,.trial-form label,.auth-submit,.auth-terms,
  .auth-switch,.auth-kicker i{ animation:none; opacity:1; transform:none; }
  .auth-intro h1 em{ animation:none; background:none; -webkit-text-fill-color:#d59cff; color:#d59cff; }
}

/* ── compact legal footer ───────────────────────────────── */
.auth-foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 18px; margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#8d84ad; font:400 12px/1.6 var(--body);
  animation:authRise .8s cubic-bezier(.22,1,.36,1) .95s both;
}
.auth-foot nav{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.auth-foot a{ color:#b0a6cd; transition:color .18s; }
.auth-foot a:hover{ color:#d5bcff; text-decoration:underline; text-underline-offset:3px; }
.auth-foot span[aria-hidden]{ color:#4b4467; }
@media(max-width:560px){ .auth-foot{ justify-content:center; text-align:center; } }
@media (prefers-reduced-motion:reduce){ .auth-foot{ animation:none; } }

/* password field + show/hide eye */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input{ padding-right:46px; }
.pw-toggle{ position:absolute; top:50%; right:6px; display:grid; width:34px; height:34px; place-items:center; transform:translateY(-50%); border:0; border-radius:9px; background:transparent; color:#8d84ad; cursor:pointer; transition:color .18s,background .18s; }
.pw-toggle:hover{ color:#d5bcff; background:rgba(139,92,246,.12); }
.pw-toggle:focus-visible{ outline:2px solid #a778ff; outline-offset:1px; }
.pw-toggle .eye-off{ display:none; }
.pw-toggle[aria-pressed="true"] .eye-on{ display:none; }
.pw-toggle[aria-pressed="true"] .eye-off{ display:block; }
.pw-toggle[aria-pressed="true"]{ color:#c8b0ff; }

/* inline validation */
.field-error{ display:none; color:#ff9db6; font-size:12px; font-weight:400; }
.trial-form label.invalid input{ border-color:rgba(255,110,150,.55); }
.trial-form label.invalid .field-error{ display:block; }

/* password strength meter */
.pw-meter{ display:flex; gap:4px; margin-top:2px; }
.pw-meter i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.1); transition:background .25s; }
.pw-meter[data-score="1"] i:nth-child(-n+1){ background:#ff6e96; }
.pw-meter[data-score="2"] i:nth-child(-n+2){ background:#ffb454; }
.pw-meter[data-score="3"] i:nth-child(-n+3){ background:#7ad7a0; }
.pw-meter[data-score="4"] i{ background:#44d08b; }
.pw-hint{ color:#8d84ad; font-size:11.5px; font-weight:400; }

@media(max-width:780px){ .auth-shell{ width:min(100% - 32px,560px); padding:24px 0 36px; }.auth-grid{ grid-template-columns:1fr; gap:20px; min-height:0; }.auth-intro{ padding:42px 0 0; }.auth-intro h1{ font-size:50px; }.auth-preview{ display:none; }.auth-card{ padding:27px 22px; }.auth-intro > p{ font-size:15px; }.auth-perks{ margin-top:24px; } }