:root{
  --primary:#2563eb;
  --primary-700:#1d4ed8;
  --ink:#0f172a;
  --muted:#64748b;
  --ring:#dbeafe;
  --border:#e5e7eb;
  --bg:#ffffff;
  --bg-alt:#f7faff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}

.auth-body{background:
  radial-gradient(120% 100% at -10% -10%, rgba(59,130,246,.12), transparent 55%),
  radial-gradient(120% 100% at 110% 0%, rgba(99,102,241,.12), transparent 45%),
  var(--bg)}

/* layout */
.auth{max-width:1080px; margin:0 auto; padding:20px 16px; display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:stretch}
.side{
  position:relative; border:1px solid var(--ring); border-radius:20px; padding:24px;
  background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 20px 44px rgba(2,6,23,.08);
  overflow:hidden; min-height:440px; animation:fade .3s ease;
}
.side .brand{display:inline-flex; align-items:center; gap:8px; font-weight:900; color:#111827; text-decoration:none}
.side .brand i{color:var(--primary)}
.side h1{font-size:32px; margin:12px 0}
.bullets{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; color:#1f2937}
.bullets i{color:var(--primary)}
.blobs::before,.blobs::after{
  content:""; position:absolute; filter:blur(28px); opacity:.7; border-radius:999px; z-index:-1;
}
.blobs::before{width:220px;height:220px;background:radial-gradient(circle,#93c5fd,#2563eb); right:-60px; top:-50px; animation:blob 10s ease-in-out infinite}
.blobs::after{width:180px;height:180px;background:radial-gradient(circle,#a78bfa,#60a5fa); left:-50px; bottom:-60px; animation:blob 11s ease-in-out infinite reverse}

.panel{
  border:1px solid var(--ring); border-radius:20px; padding:22px; background:#fff;
  box-shadow:0 20px 44px rgba(2,6,23,.08); animation:rise .28s ease;
}
.panel-head h2{margin:2px 0 2px; font-size:26px}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}

.field{margin-top:12px}
.field label{display:block; font-weight:700; margin-bottom:6px}
.control{
  display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:12px;
  border:1px solid var(--border); background:#fff; height:48px; position:relative
}
.control:focus-within{border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.control i{color:#64748b}
.control input{
  width:100%; height:100%; border:none; outline:none; background:transparent; font-size:15px;
}
.eye{
  border:none; background:transparent; cursor:pointer; color:#475569; padding:6px; border-radius:10px;
}
.err{color:#b91c1c; display:block; min-height:16px; margin-top:4px}

/* check + small UI */
.check{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.check input{accent-color:var(--primary); width:16px; height:16px}

.row-between{display:flex; align-items:center; justify-content:space-between; margin-top:8px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 16px;
  border-radius:12px; border:1px solid transparent; font-weight:800; cursor:pointer; transition:.2s ease
}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-700)); color:#fff; box-shadow:0 16px 28px rgba(37,99,235,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:#fff; color:var(--primary); border:1px solid var(--ring)}
.btn.block{width:100%}
.or{display:flex; align-items:center; gap:8px; margin:12px 0}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--border)}
.or span{font-weight:800; color:#64748b}

/* strength */
.strength{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.strength .bar{flex:1; height:8px; background:#f1f5f9; border-radius:999px; overflow:hidden; border:1px solid #e2e8f0}
.strength .bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e); transition:width .25s ease}
.strength .hint{color:#475569}
.reqs{display:flex; gap:12px; padding-left:0; list-style:none; color:#475569; margin:6px 0 0}
.reqs i{vertical-align:-2px}

/* animations */
@keyframes blob{50%{transform:translate(10px,-6px) scale(1.05)}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* responsive */
@media (max-width:920px){ .auth{grid-template-columns:1fr} .side{min-height:auto} }
@media (max-width:520px){
  .panel{padding:16px} .control{height:46px} .btn{height:46px}
}