.auth-body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(99,102,241,.35), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(6,182,212,.28), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(16,185,129,.16), transparent 34%),
    #070b14;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  position: relative;
}
.auth-bg span { position: fixed; display:block; border-radius:999px; filter: blur(2px); opacity:.55; animation: floatOrb 12s ease-in-out infinite; }
.auth-bg span:nth-child(1){ width:180px;height:180px;left:7%;top:14%;background:rgba(99,102,241,.26); }
.auth-bg span:nth-child(2){ width:120px;height:120px;right:12%;top:18%;background:rgba(6,182,212,.24);animation-delay:-3s; }
.auth-bg span:nth-child(3){ width:150px;height:150px;left:18%;bottom:12%;background:rgba(16,185,129,.18);animation-delay:-6s; }
.auth-bg span:nth-child(4){ width:90px;height:90px;right:22%;bottom:16%;background:rgba(245,158,11,.16);animation-delay:-9s; }
.auth-shell { width:min(1120px,100%); display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center; position:relative; z-index:1; }
.auth-shell.reverse { grid-template-columns:.92fr 1.08fr; }
.auth-hero { min-height:650px; border:1px solid rgba(255,255,255,.14); border-radius:32px; padding:42px; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(15,23,42,.72),rgba(15,23,42,.32)); backdrop-filter:blur(24px); box-shadow:0 30px 90px rgba(0,0,0,.28); }
.auth-hero:before { content:""; position:absolute; inset:-2px; background:linear-gradient(120deg,transparent,rgba(99,102,241,.18),transparent); transform:translateX(-100%); animation: shimmer 5s infinite; }
.auth-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.auth-logo,.auth-icon { display:inline-grid; place-items:center; color:#fff; background:linear-gradient(135deg,#6366f1,#06b6d4); box-shadow:0 18px 40px rgba(37,99,235,.32); }
.auth-logo { width:54px; height:54px; border-radius:18px; font-size:25px; }
.auth-brand strong { display:block; color:#fff; font-size:1.05rem; }
.auth-brand small { color:#cbd5e1; }
.auth-hero h1 { max-width:650px; margin:92px 0 18px; font-size:clamp(2.2rem,5vw,4.8rem); line-height:.98; letter-spacing:-.06em; color:#fff; position:relative; z-index:1; }
.auth-hero p { max-width:560px; color:#cbd5e1; font-size:1.05rem; line-height:1.7; position:relative; z-index:1; }
.auth-stats,.feature-stack { display:flex; gap:14px; margin-top:32px; position:relative; z-index:1; flex-wrap:wrap; }
.auth-stats div,.feature-stack div { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:18px; padding:16px 18px; min-width:130px; backdrop-filter:blur(16px); }
.auth-stats b { display:block; font-size:1.55rem; color:#fff; }.auth-stats span,.feature-stack div { color:#dbeafe; font-size:.88rem; }.feature-stack i { color:#72BC8F; margin-right:8px; }
.auth-panel { position:relative; padding:34px; border-radius:30px; border:1px solid rgba(255,255,255,.18); background:rgba(15,23,42,.86); backdrop-filter:blur(24px); box-shadow:0 28px 80px rgba(0,0,0,.38); overflow:hidden; }
.panel-glow { position:absolute; inset:auto -80px -120px auto; width:260px; height:260px; border-radius:50%; background:rgba(99,102,241,.18); filter:blur(24px); }
.auth-icon { width:66px; height:66px; border-radius:22px; margin-bottom:14px; font-size:30px; animation:pulseIcon 2.8s ease-in-out infinite; }
.auth-panel h2 { color:#fff; font-weight:800; letter-spacing:-.03em; margin:0; }.auth-panel p { color:#cbd5e1; margin:8px 0 0; }
.auth-alert { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:14px; margin-bottom:18px; font-size:.92rem; }.auth-alert.danger{ background:rgba(229,100,88,.14); color:#fecaca; border:1px solid rgba(229,100,88,.25); }.auth-alert.success{ background:rgba(70,161,113,.14); color:#bbf7d0; border:1px solid rgba(70,161,113,.25); }
.auth-form label { color:#f8fafc!important; font-size:.76rem!important; letter-spacing:.08em!important; margin:16px 0 8px!important; }
.auth-form a,.auth-switch a { color:#7dd3fc; text-decoration:none; font-weight:800; }
.auth-input { height:54px; display:flex; align-items:center; gap:12px; padding:0 14px; border-radius:16px; background:rgba(2,6,23,.52); border:1px solid rgba(255,255,255,.16); transition:.22s ease; }
.auth-input:focus-within { border-color:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.16); transform:translateY(-1px); }
.auth-input i { color:#93c5fd; font-size:18px; }.auth-input input { flex:1; border:0; outline:0; background:transparent; color:#fff; min-width:0; }.auth-input input::placeholder { color:#94a3b8; }.auth-input button { border:0; background:transparent; color:#cbd5e1; min-width:36px; }
.auth-submit { width:100%; height:56px; border:0; border-radius:18px; margin-top:24px; color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,#6366f1,#2563eb 55%,#06b6d4); box-shadow:0 18px 34px rgba(37,99,235,.35); transition:.22s ease; position:relative; overflow:hidden; }
.auth-submit:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:translateX(-120%); }.auth-submit:hover { transform:translateY(-2px); box-shadow:0 22px 42px rgba(37,99,235,.45); }.auth-submit:hover:before { animation:buttonShine .9s ease; }.auth-submit span,.auth-submit i{ position:relative; }
.auth-switch { text-align:center; color:#cbd5e1; margin-top:22px; }.demo-chip { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; padding:13px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#cbd5e1; }.demo-chip code{ color:#7dd3fc; }
.orbit-card { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:18px; color:#fff; background:rgba(15,23,42,.78); border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 45px rgba(0,0,0,.25); backdrop-filter:blur(18px); animation: drift 6s ease-in-out infinite; }.orbit-card i{ color:#7dd3fc; }.card-one{ right:42px; top:130px; }.card-two{ left:42px; bottom:150px; animation-delay:-2s; }.card-three{ right:64px; bottom:70px; animation-delay:-4s; }
.password-meter { height:7px; background:rgba(255,255,255,.08); border-radius:999px; margin-top:10px; overflow:hidden; }.password-meter span { display:block; height:100%; width:0; transition:.25s ease; border-radius:999px; }
.reveal-up{ animation:revealUp .75s ease both; }.reveal-scale{ animation:revealScale .75s ease both; }.delay-1{ animation-delay:.12s; }.delay-2{ animation-delay:.24s; }.delay-3{ animation-delay:.36s; }
@keyframes revealUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none} } @keyframes revealScale{ from{opacity:0; transform:scale(.96) translateY(18px)} to{opacity:1; transform:none} } @keyframes floatOrb{ 50%{ transform:translate3d(18px,-24px,0) scale(1.08)} } @keyframes drift{ 50%{ transform:translateY(-14px)} } @keyframes shimmer{ 50%,100%{ transform:translateX(100%)} } @keyframes buttonShine{ to{ transform:translateX(120%)} } @keyframes pulseIcon{ 50%{ transform:scale(1.06); box-shadow:0 22px 48px rgba(6,182,212,.34)} }
@media (max-width: 980px){ .auth-shell,.auth-shell.reverse{ grid-template-columns:1fr; } .auth-hero{ min-height:auto; padding:30px; } .auth-hero h1{ margin-top:54px; } .orbit-card{ display:none; } }
@media (max-width: 560px){ .auth-body{ padding:16px; display:block; } .auth-shell{ gap:16px; } .auth-hero{ border-radius:24px; padding:24px; } .auth-panel{ border-radius:24px; padding:22px; } .auth-stats{ display:grid; grid-template-columns:1fr; } .auth-stats div{ min-width:0; } .auth-hero h1{ font-size:2.15rem; } .demo-chip{ flex-direction:column; } }
@media (prefers-reduced-motion: reduce){ *,*:before,*:after{ animation:none!important; transition:none!important; } }