/* ── RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f0f6ff;color:#0f1a2e;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;overflow:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:2px}

/* ── LAYOUT ───────────────────────────────────────────────── */
.auth-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  max-width:1060px;
  min-height:620px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(37,99,235,.22),0 0 0 1px rgba(37,99,235,.08);
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ── LEFT PANEL ───────────────────────────────────────────── */
.panel-left{
  background:linear-gradient(145deg,#1e40af 0%,#2563eb 40%,#3b82f6 80%,#1d4ed8 100%);
  position:relative;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* animated mesh */
.panel-left::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 20%,rgba(255,255,255,.12) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 80%,rgba(96,165,250,.2) 0%,transparent 50%);
  pointer-events:none;
}
.panel-left::after{
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.04);
  top:-100px;right:-100px;
  pointer-events:none;
}
/* grid dots */
.grid-bg{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}

.brand{position:relative;z-index:1;margin-bottom:40px}
.brand-logo{
  font-family:'Sora',sans-serif;
  font-size:26px;font-weight:800;
  color:#fff;letter-spacing:-.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.brand-logo span{font-weight:300;opacity:.85}
.brand-tag{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:9px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;
  margin-left:2px;vertical-align:middle;
}
.panel-headline{
  position:relative;z-index:1;
  font-family:'Sora',sans-serif;
  font-size:32px;font-weight:800;
  color:#fff;line-height:1.15;
  letter-spacing:-.5px;margin-bottom:12px;
}
.panel-headline em{
  color:#93c5fd;font-style:normal;
  display:block;
}
.panel-sub{
  position:relative;z-index:1;
  color:rgba(255,255,255,.7);
  font-size:14px;line-height:1.7;
  max-width:300px;margin-bottom:36px;
}

/* stats row */
.stats-row{
  position:relative;z-index:1;
  display:flex;gap:20px;margin-bottom:36px;
}
.stat-box{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:12px 16px;
  backdrop-filter:blur(8px);flex:1;
  transition:transform .2s;
}
.stat-box:hover{transform:translateY(-2px)}
.stat-val{
  font-family:'Sora',sans-serif;
  font-size:18px;font-weight:500;color:#fff;
  display:block;line-height:1;
}
.stat-lbl{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.8px;margin-top:3px}

/* testimonial card */
.tcard{
  position:relative;z-index:1;margin-top:auto;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:18px 20px;
  backdrop-filter:blur(12px);
  animation:floatCard 4s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.tcard-stars{color:#fbbf24;font-size:13px;letter-spacing:1px;margin-bottom:8px}
.tcard-text{
  font-size:12px;color:rgba(255,255,255,.85);
  line-height:1.6;font-style:italic;margin-bottom:12px;
}
.tcard-user{display:flex;align-items:center;gap:8px}
.tcard-av{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.tcard-name{font-size:11px;font-weight:600;color:#fff}
.tcard-role{font-size:10px;color:rgba(255,255,255,.5)}

/* floating badge */
.float-badge{
  position:absolute;z-index:2;
  background:#fff;border-radius:12px;
  padding:8px 12px;
  box-shadow:0 8px 32px rgba(37,99,235,.25);
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;color:#0f1a2e;
  animation:floatBadge 3s ease-in-out infinite;
  white-space:nowrap;
}
.float-badge.b1{top:80px;right:20px;animation-delay:0s}
.float-badge.b2{top:170px;right:-10px;animation-delay:1.2s}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fbico{font-size:16px}
.fbtxt small{display:block;font-size:9px;font-weight:400;color:#64748b}

/* ── RIGHT PANEL ──────────────────────────────────────────── */
.panel-right{
  background:#fff;
  padding:44px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.panel-right::before{
  content:'';position:absolute;
  top:0;bottom:0;left:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(37,99,235,.15) 30%,rgba(37,99,235,.15) 70%,transparent);
}

/* tabs */
.auth-tabs{
  display:flex;background:#f0f6ff;
  border-radius:100px;padding:4px;
  margin-bottom:28px;
  border:1px solid rgba(37,99,235,.1);
}
.atab{
  flex:1;padding:9px;border-radius:100px;
  font-size:13px;font-weight:600;text-align:center;
  cursor:pointer;transition:all .25s;
  color:#64748b;border:none;background:none;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.atab.on{
  background:#fff;color:#2563eb;
  box-shadow:0 2px 12px rgba(37,99,235,.12),0 0 0 1px rgba(37,99,235,.08);
}

/* form wrapper with slide anim */
.forms-wrap{position:relative;overflow:hidden}
.form-panel{transition:all .35s cubic-bezier(.4,0,.2,1)}
.form-panel.hidden{display:none}

/* heading */
.form-heading{margin-bottom:22px}
.form-heading h2{
  font-family:'Sora',sans-serif;
  font-size:22px;font-weight:700;
  color:#0f1a2e;letter-spacing:-.3px;
  margin-bottom:4px;
}
.form-heading p{font-size:13px;color:#64748b}
.form-heading p a{color:#2563eb;font-weight:500}

/* social */
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.soc-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:10px;
  border:1.5px solid #e2e8f0;background:#fff;
  font-size:12px;font-weight:600;color:#0f1a2e;
  cursor:pointer;transition:all .2s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.soc-btn:hover{border-color:#93c5fd;background:#eff6ff}
.soc-ico{font-size:16px}

/* divider */
.divider{
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:#94a3b8;margin-bottom:18px;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#e2e8f0}

/* form fields */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrp{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.fgrp.full{grid-column:1/-1}
.fgrp label{
  font-size:11px;font-weight:600;
  color:#374151;letter-spacing:.2px;
}
.finput-wrap{position:relative}
.finput{
  width:100%;background:#f8fafd;
  border:1.5px solid #e2e8f0;
  color:#0f1a2e;padding:11px 14px;
  border-radius:10px;font-size:13px;
  outline:none;transition:all .2s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.finput:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.finput.err{border-color:#ef4444;background:#fff5f5}
.finput.ok{border-color:#16a34a;background:#f0fdf4}
.finput::placeholder{color:#94a3b8}
.finput-ico{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  color:#94a3b8;cursor:pointer;
  font-size:15px;transition:color .2s;
  background:none;border:none;padding:0;
}
.finput-ico:hover{color:#2563eb}
.field-err{font-size:11px;color:#ef4444;margin-top:3px;display:none;animation:errShake .3s ease}
@keyframes errShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field-hint{font-size:10px;color:#94a3b8;margin-top:3px}

/* password strength */
.pwd-strength{margin-top:8px}
.pwd-bars{display:flex;gap:4px;margin-bottom:4px}
.pwd-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;transition:background .3s}
.pwd-bar.s1{background:#ef4444}
.pwd-bar.s2{background:#f97316}
.pwd-bar.s3{background:#eab308}
.pwd-bar.s4{background:#16a34a}
.pwd-label{font-size:10px;font-weight:600;transition:color .3s}
.pwd-label.s1{color:#ef4444}
.pwd-label.s2{color:#f97316}
.pwd-label.s3{color:#eab308}
.pwd-label.s4{color:#16a34a}

/* checklist (register) */
.req-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:6px}
.req{font-size:10px;color:#94a3b8;display:flex;align-items:center;gap:4px;transition:color .2s}
.req.ok{color:#16a34a}
.req::before{content:'○';font-size:9px;transition:.2s}
.req.ok::before{content:'✓'}

/* terms */
.terms-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px}
.terms-row input{accent-color:#2563eb;margin-top:2px;flex-shrink:0}
.terms-row label{font-size:11px;color:#64748b;line-height:1.5;cursor:pointer}
.terms-row a{color:#2563eb;font-weight:500}

/* remember / forgot */
.meta-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.meta-row label{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;cursor:pointer}
.meta-row input{accent-color:#2563eb}
.forgot{font-size:12px;color:#2563eb;font-weight:500;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.forgot:hover{text-decoration:underline}

/* submit */
.btn-submit{
  width:100%;background:#2563eb;color:#fff;
  padding:13px;border-radius:100px;
  font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;border:none;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:.2px;
  position:relative;overflow:hidden;
}
.btn-submit::after{
  content:'';position:absolute;
  inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  pointer-events:none;
}
.btn-submit:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,.3)}
.btn-submit:active{transform:translateY(0)}
.btn-submit.loading{pointer-events:none;opacity:.8}
.spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:none;
}
.btn-submit.loading .spinner{display:block}
.btn-submit.loading .btn-txt{display:none}
.btn-submit svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.5;transition:.2s}

/* back to store */
.back-link{
  text-align:center;margin-top:18px;
  font-size:12px;color:#94a3b8;
}
.back-link a{color:#2563eb;font-weight:600}
.back-link a:hover{text-decoration:underline}

/* toast */
.toast-wrap{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  background:#0f1a2e;color:#fff;
  padding:11px 20px;border-radius:100px;
  font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-12px);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;white-space:nowrap;
  box-shadow:0 8px 32px rgba(15,26,46,.25);
}
.toast.on{opacity:1;transform:translateY(0)}
.toast-ico{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;flex-shrink:0;font-weight:700;
}
.toast-ico.ok{background:#16a34a}
.toast-ico.err{background:#ef4444}

/* forgot password mini form */
.forgot-panel{display:none}
.forgot-panel.on{display:block}
.back-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:#64748b;cursor:pointer;
  margin-bottom:18px;background:none;border:none;
  font-family:inherit;padding:0;transition:color .2s;
}
.back-btn:hover{color:#2563eb}
.back-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* responsive */
@media(max-width:700px){
  .auth-shell{grid-template-columns:1fr}
  .panel-left{display:none}
  .panel-right{padding:32px 28px}
  body{padding:0;align-items:stretch}
  .auth-shell{border-radius:0;min-height:100vh;box-shadow:none}
}