/* ═══════════════════════════════════════════════════════════════
   SIMPLI WEB — EDUCATION PORTAL · Auth screens
   Login / Signup / Forgot / Reset / Verify
   Dark aurora stage, glass card, drifting tech icons.
   Everything heavy is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ind:#6366f1;--vio:#8b5cf6;--pink:#d946ef;--gold:#f59e0b;
  --ink:#0b1020;--ink2:#111a35;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --txt:#e2e8f0;--dim:#94a3b8;--dim2:#64748b;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#d946ef);
  --ok:#34d399;--bad:#fb7185;--warn:#fbbf24;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--ink);color:var(--txt);min-height:100vh;line-height:1.6;
  display:flex;align-items:center;justify-content:center;padding:26px 18px;
  overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;
}
a{color:#a5b4fc;text-decoration:none}
a:hover{color:#c7d2fe}

/* ── Stage: aurora blobs + grid + noise ───────────────────────── */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.blob.b1{width:46vw;height:46vw;min-width:380px;min-height:380px;background:#4f46e5;top:-14%;left:-10%;animation:drift1 26s ease-in-out infinite}
.blob.b2{width:40vw;height:40vw;min-width:320px;min-height:320px;background:#a21caf;bottom:-16%;right:-8%;animation:drift2 32s ease-in-out infinite}
.blob.b3{width:30vw;height:30vw;min-width:260px;min-height:260px;background:#0ea5e9;top:42%;left:52%;opacity:.32;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(9vw,7vh) scale(1.12)}66%{transform:translate(-4vw,11vh) scale(.94)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-11vw,-8vh) scale(1.16)}70%{transform:translate(5vw,-4vh) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-62%,-38%) scale(1.22)}}

.grid-fx{position:absolute;inset:-40% -10% -10%;
  background-image:linear-gradient(rgba(148,163,184,.13) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.13) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(560px) rotateX(58deg);
  transform-origin:50% 0;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 62%);
  animation:gridRun 22s linear infinite}
@keyframes gridRun{to{background-position:0 52px,52px 0}}

.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 32%,rgba(5,8,20,.72) 100%)}

/* ── Drifting tech icons ──────────────────────────────────────── */
.floaters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fl{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,.055);border:1px solid var(--line);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);font-size:22px;opacity:0;
  box-shadow:0 10px 34px rgba(79,70,229,.28);animation:floatUp linear infinite}
@keyframes floatUp{
  0%{transform:translateY(18vh) rotate(-10deg) scale(.85);opacity:0}
  12%{opacity:.85}
  88%{opacity:.7}
  100%{transform:translateY(-108vh) rotate(12deg) scale(1.05);opacity:0}}

/* ── Layout ───────────────────────────────────────────────────── */
.auth-wrap{position:relative;z-index:2;width:min(1060px,100%);
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  border-radius:28px;overflow:hidden;
  background:rgba(15,22,45,.62);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line2);
  box-shadow:0 40px 110px rgba(2,6,23,.7),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:cardIn .8s cubic-bezier(.16,1,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* Rotating conic light around the card edge */
.auth-wrap::before{content:'';position:absolute;inset:-2px;border-radius:30px;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(99,102,241,.85) 40deg,rgba(217,70,239,.85) 90deg,transparent 150deg,transparent 360deg);
  animation:edgeSpin 7s linear infinite;opacity:.55}
@keyframes edgeSpin{to{transform:rotate(360deg)}}

/* ── Left: the pitch ──────────────────────────────────────────── */
.auth-aside{padding:44px 42px;position:relative;
  background:linear-gradient(155deg,rgba(99,102,241,.20),rgba(217,70,239,.10) 55%,transparent);
  border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.brand-row .logo-mark{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad);position:relative;overflow:hidden;flex-shrink:0;box-shadow:0 8px 24px rgba(99,102,241,.5)}
.brand-row .logo-mark svg{width:100%;height:100%;display:block}
.brand-row .logo-mark.has-img{background:none;box-shadow:none}
.brand-row .logo-mark.has-img img{width:100%;height:100%;object-fit:contain}
.brand-row .logo-mark::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  transform:translateX(-120%);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}
.brand-row b{display:block;font-size:1.06rem;color:#fff;font-weight:800;letter-spacing:-.2px}
.brand-row small{display:block;font-size:.76rem;color:#a5b4fc;letter-spacing:.4px}

.aside-eyebrow{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:.71rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:#fcd34d;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.28);
  padding:6px 13px;border-radius:99px;margin-bottom:16px}
.aside-eyebrow i{width:6px;height:6px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 0 rgba(251,191,36,.65);animation:blip 2s infinite}
@keyframes blip{70%{box-shadow:0 0 0 9px rgba(251,191,36,0)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}

.auth-aside h1{font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.2;font-weight:800;color:#fff;letter-spacing:-.6px;margin-bottom:12px}
.auth-aside h1 span{background:linear-gradient(120deg,#fbbf24,#f472b6 60%,#a5b4fc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.auth-aside .lede{color:#cbd5e1;font-size:.96rem;margin-bottom:26px;max-width:42ch}

.perks{list-style:none;display:grid;gap:12px;margin-bottom:auto}
.perks li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:#e2e8f0;
  opacity:0;animation:perkIn .6s cubic-bezier(.16,1,.3,1) forwards}
.perks li:nth-child(1){animation-delay:.25s}
.perks li:nth-child(2){animation-delay:.35s}
.perks li:nth-child(3){animation-delay:.45s}
.perks li:nth-child(4){animation-delay:.55s}
@keyframes perkIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.perks .pi{flex-shrink:0;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;
  background:rgba(255,255,255,.08);border:1px solid var(--line2);
  box-shadow:0 6px 18px rgba(79,70,229,.3)}
.perks strong{display:block;color:#fff;font-weight:700;font-size:.93rem}
.perks small{color:var(--dim);font-size:.81rem;line-height:1.5}

.aside-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;gap:20px;flex-wrap:wrap}
.aside-foot div{font-size:.78rem;color:var(--dim)}
.aside-foot b{display:block;font-size:1.15rem;color:#fff;font-weight:800;
  background:linear-gradient(120deg,#a5b4fc,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Right: the form ──────────────────────────────────────────── */
.auth-main{padding:44px 42px;display:flex;flex-direction:column;justify-content:center;position:relative}
.auth-main h2{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.4px;margin-bottom:5px}
.auth-main .sub{color:var(--dim);font-size:.9rem;margin-bottom:24px}

.field{margin-bottom:15px;position:relative}
.field label{display:block;font-size:.79rem;font-weight:600;color:#cbd5e1;margin-bottom:6px;letter-spacing:.2px}
.field label .req{color:#f472b6}
.inp{position:relative;display:flex;align-items:center}
.inp .ico{position:absolute;left:14px;font-size:15px;opacity:.55;pointer-events:none;transition:.22s}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px 13px 42px;border-radius:13px;font-size:.94rem;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);color:#fff;
  transition:border-color .22s,box-shadow .22s,background .22s;outline:none}
.field textarea{padding-left:15px;resize:vertical;min-height:88px}
.field input::placeholder{color:#64748b}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ind);background:rgba(99,102,241,.10);
  box-shadow:0 0 0 4px rgba(99,102,241,.18),0 8px 26px rgba(79,70,229,.22)}
.field input:focus ~ .ico{opacity:1;transform:scale(1.1)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 60px #16203d inset;caret-color:#fff}
.field .peek{position:absolute;right:8px;background:none;border:0;color:var(--dim);cursor:pointer;
  font-size:.74rem;font-weight:700;padding:8px 10px;border-radius:9px;letter-spacing:.4px}
.field .peek:hover{color:#c7d2fe;background:rgba(255,255,255,.07)}
.field .hint{font-size:.76rem;color:var(--dim2);margin-top:5px}

/* Password strength meter */
.pw-meter{height:4px;border-radius:99px;background:rgba(255,255,255,.10);margin-top:8px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .3s,background .3s}
.pw-note{font-size:.75rem;margin-top:5px;color:var(--dim2)}

.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px;flex-wrap:wrap}
.checkline{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#cbd5e1;cursor:pointer;user-select:none}
.checkline input{width:16px;height:16px;accent-color:var(--ind);cursor:pointer;flex-shrink:0}

.btn-auth{position:relative;width:100%;padding:14px 22px;border:0;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:700;color:#fff;letter-spacing:.2px;
  background:var(--grad);background-size:200% 100%;overflow:hidden;
  box-shadow:0 12px 34px rgba(99,102,241,.42);transition:transform .18s,box-shadow .18s,background-position .5s}
.btn-auth:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 44px rgba(139,92,246,.5)}
.btn-auth:active{transform:translateY(0)}
.btn-auth:disabled{opacity:.62;cursor:not-allowed;transform:none}
.btn-auth::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);
  transform:translateX(-120%);animation:btnShine 3.6s ease-in-out infinite}
@keyframes btnShine{0%{transform:translateX(-120%)}30%,100%{transform:translateX(130%)}}
.btn-auth.loading{pointer-events:none;opacity:.75}

.btn-ghost-auth{display:block;width:100%;text-align:center;padding:12px 20px;border-radius:13px;
  border:1px solid var(--line2);color:#cbd5e1;font-weight:600;font-size:.9rem;background:rgba(255,255,255,.04);transition:.2s}
.btn-ghost-auth:hover{background:rgba(255,255,255,.09);color:#fff;border-color:var(--ind)}

.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--dim2);font-size:.78rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

.switch-line{text-align:center;font-size:.88rem;color:var(--dim);margin-top:20px}
.switch-line a{font-weight:700}

/* ── Alerts ───────────────────────────────────────────────────── */
.alert{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:13px;
  font-size:.87rem;line-height:1.55;margin-bottom:18px;animation:alertIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes alertIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.alert .ai{font-size:16px;flex-shrink:0;line-height:1.3}
.alert-error{background:rgba(244,63,94,.13);border:1px solid rgba(244,63,94,.35);color:#fecdd3}
.alert-ok{background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.35);color:#a7f3d0}
.alert-info{background:rgba(99,102,241,.13);border:1px solid rgba(99,102,241,.35);color:#c7d2fe}
.alert-warn{background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.35);color:#fde68a}
.alert b{color:#fff}
.alert a{text-decoration:underline}

.trust-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.trust-row span{font-size:.75rem;color:var(--dim2);display:flex;align-items:center;gap:5px}

.back-site{position:fixed;top:20px;left:22px;z-index:5;font-size:.83rem;color:#cbd5e1;
  background:rgba(255,255,255,.07);border:1px solid var(--line);padding:8px 15px;border-radius:99px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s}
.back-site:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateX(-2px)}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:900px){
  .auth-wrap{grid-template-columns:1fr;max-width:520px}
  .auth-aside{display:none}
  .auth-main{padding:36px 28px}
  .back-site{position:static;display:inline-flex;margin-bottom:16px}
  body{flex-direction:column;padding-top:22px}
  .mobile-brand{display:flex!important}
}
.mobile-brand{display:none;align-items:center;gap:11px;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.mobile-brand .logo-mark{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad);overflow:hidden;flex-shrink:0}
.mobile-brand .logo-mark svg{width:100%;height:100%}
.mobile-brand .logo-mark.has-img{background:none}
.mobile-brand .logo-mark.has-img img{width:100%;height:100%;object-fit:contain}
.mobile-brand b{display:block;color:#fff;font-size:.98rem}
.mobile-brand small{color:#a5b4fc;font-size:.74rem}

@media (max-width:480px){
  .auth-main{padding:30px 22px}
  .row-2{grid-template-columns:1fr}
  body{padding:16px 12px}
}

/* ── Reduced motion: keep the look, drop the movement ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .floaters{display:none}
  .perks li{opacity:1}
}