:root{
  --bg:#020814;
  --card:#0b1529;
  --card-2:#111f3a;
  --line:rgba(146,169,214,.2);
  --text:#f7fbff;
  --muted:#9ba8c3;
  --blue:#3d7bff;
  --cyan:#49e2c5;
  --red:#ff5574;
  --shadow:0 24px 60px -18px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.3);
  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(90deg, rgba(31,94,183,.14), transparent 28%, rgba(73,226,197,.08)),
    linear-gradient(180deg,#020713 0%,#020915 46%,#030b17 100%);
  -webkit-font-smoothing:antialiased;
}

.auth-language-toggle{
  position:fixed;
  top:22px;
  right:22px;
  z-index:5;
  min-width:52px;
  height:42px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  background:rgba(15,28,54,.86);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  cursor:pointer;
  font-weight:850;
}
.auth-language-toggle:hover{
  border-color:rgba(83,143,255,.58);
  background:rgba(25,44,82,.92);
}

.auth-wrap{
  min-height:100vh;
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,430px);
  gap:28px;
  align-items:center;
  padding:32px 18px;
}

.auth-hero{
  min-height:620px;
  position:relative;
  overflow:hidden;
  padding:38px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 74% 34%, rgba(61,123,255,.22), transparent 26%),
    linear-gradient(135deg, rgba(18,42,89,.78), rgba(7,16,34,.96));
  box-shadow:var(--shadow);
}
.auth-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(83,140,255,.55) 0 1px, transparent 1.4px);
  background-size:64px 64px;
  opacity:.28;
}
.brand,.auth-hero h1,.auth-hero p,.visual{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:14px;font-size:22px;font-weight:850}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  display:grid;place-items:center;
  color:#05101f;
  background:linear-gradient(135deg,#46b5ff,#55e4ca);
  box-shadow:0 12px 28px rgba(54,140,255,.32);
}
.auth-hero h1{
  max-width:560px;
  margin:92px 0 18px;
  font-size:46px;
  line-height:1.04;
  letter-spacing:0;
}
.auth-hero p{
  max-width:500px;
  margin:0;
  color:#c6d0e4;
  font-size:17px;
  line-height:1.65;
}
.visual{
  height:250px;
  display:grid;
  place-items:center;
  margin-top:52px;
}
.orb{
  width:130px;height:130px;border-radius:50%;
  display:grid;place-items:center;
  color:#dff5ff;
  font-weight:900;
  font-size:34px;
  background:radial-gradient(circle at 38% 30%, rgba(122,223,255,.94), rgba(45,95,255,.82) 42%, rgba(33,55,180,.72) 72%);
  border:2px solid rgba(103,202,255,.74);
  box-shadow:inset 0 0 22px rgba(255,255,255,.28),0 0 44px rgba(42,126,255,.48);
}
.platform{
  position:absolute;
  bottom:36px;
  width:270px;height:64px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(72,181,255,.28), transparent 54%),linear-gradient(180deg, rgba(48,101,211,.56), rgba(11,27,65,.72));
  border:1px solid rgba(76,163,255,.45);
  box-shadow:0 0 26px rgba(44,145,255,.55), inset 0 0 20px rgba(64,170,255,.28);
}

.card{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  background:linear-gradient(145deg, rgba(15,28,54,.96), rgba(8,17,34,.98));
  box-shadow:var(--shadow);
}
.card h1{
  margin:0;
  font-size:30px;
  line-height:1.1;
  font-weight:900;
}
.sub{
  margin:10px 0 22px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
a{color:#65a1ff;text-decoration:none}
a:hover{text-decoration:underline}
.form{display:grid;gap:11px}
.lbl{font-size:13px;color:#c9d3e8;font-weight:650}
.inp{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 14px;
  outline:0;
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.inp:focus{
  border-color:rgba(83,143,255,.7);
  box-shadow:0 0 0 4px rgba(61,123,255,.14);
}
.btn{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:800;
}
.btn.primary{
  margin-top:8px;
  color:#fff;
  background:linear-gradient(135deg,#477cff,#28a6ff);
  border-color:rgba(95,154,255,.56);
  box-shadow:0 14px 30px rgba(39,104,255,.28);
}
.btn.ghost{
  color:#7fb0ff;
  background:rgba(255,255,255,.035);
}
.linkbtn{display:grid;place-items:center}
.check{
  display:flex;align-items:center;gap:10px;
  color:var(--muted);
  font-size:14px;
  margin:4px 0;
}
.link{justify-self:center;font-size:14px;margin-top:4px}
.fine{
  margin:8px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.hr{height:1px;background:var(--line);margin:10px 0}
.hidden{display:none}
.error{
  min-height:18px;
  margin:4px 0 0;
  color:var(--red);
  font-size:13px;
  text-align:center;
}
.icon{display:grid;place-items:center;margin-bottom:14px}
.icon-box{
  width:58px;height:58px;border-radius:14px;
  display:grid;place-items:center;
  color:#78b9ff;
  background:rgba(61,123,255,.14);
  border:1px solid var(--line);
  font-size:28px;
}

@media (max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-hero{min-height:auto;padding:26px}
  .auth-hero h1{margin-top:48px;font-size:36px}
  .visual{height:170px;margin-top:28px}
  .orb{width:104px;height:104px;font-size:28px}
  .platform{width:220px;bottom:20px}
}

@media (max-width:520px){
  .auth-language-toggle{top:12px;right:12px}
  .auth-wrap{padding:18px 12px}
  .auth-hero{display:none}
  .card{padding:22px}
}

/* ===== Animations ===== */

/* Slowly drifting aurora behind everything */
body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 22% 28%, rgba(61,123,255,.20), transparent),
    radial-gradient(closest-side at 80% 22%, rgba(73,226,197,.16), transparent),
    radial-gradient(closest-side at 68% 82%, rgba(101,161,255,.16), transparent);
  filter:blur(8px);
  animation:auth-aurora 20s ease-in-out infinite;
}

/* Entrance */
.auth-hero{animation:auth-rise-left .75s cubic-bezier(.22,.61,.36,1) both}
.card.view:not(.hidden){animation:auth-fade .55s ease both}
.card.view:not(.hidden) > *{animation:auth-rise .5s cubic-bezier(.22,.61,.36,1) both}
.card.view:not(.hidden) > *:nth-child(1){animation-delay:.12s}
.card.view:not(.hidden) > *:nth-child(2){animation-delay:.18s}
.card.view:not(.hidden) > *:nth-child(3){animation-delay:.24s}
.card.view:not(.hidden) > *:nth-child(4){animation-delay:.3s}
.auth-hero h1{animation:auth-rise .8s ease .15s both}
.auth-hero p{animation:auth-rise .8s ease .28s both}

/* Brand mark gentle bob + sheen */
.brand-mark{animation:brand-bob 4.5s ease-in-out infinite}

/* Floating, glowing AI orb */
.visual{position:relative}
.orb{position:relative;animation:auth-float 4.6s ease-in-out infinite}
.orb::after{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,200,255,.5), transparent 68%);
  z-index:-1;
  pointer-events:none;
  animation:auth-pulse 3.2s ease-in-out infinite;
}
.orb-ring{
  position:absolute;
  top:50%;left:50%;
  width:188px;height:188px;
  margin:-94px 0 0 -94px;
  border-radius:50%;
  border:2px dashed rgba(120,200,255,.4);
  animation:auth-spin 16s linear infinite;
  pointer-events:none;
}
.platform{animation:auth-pulse 3.8s ease-in-out infinite}

/* Floating sparks around the orb */
.spark{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle, #d6efff, rgba(90,170,255,.25));
  box-shadow:0 0 12px rgba(120,200,255,.9);
  opacity:.7;
  pointer-events:none;
}
.spark.s1{top:18%;left:24%;animation:spark-float 5s ease-in-out infinite}
.spark.s2{top:30%;right:22%;animation:spark-float 6.2s ease-in-out infinite .6s}
.spark.s3{bottom:30%;left:18%;animation:spark-float 5.6s ease-in-out infinite 1.1s}
.spark.s4{bottom:24%;right:26%;animation:spark-float 6.8s ease-in-out infinite .3s}
.spark.s5{top:48%;left:50%;animation:spark-float 4.6s ease-in-out infinite 1.6s}

/* Buttons: hover lift + periodic shine sweep on the primary CTA */
.btn{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{position:relative;overflow:hidden}
.btn.primary:hover{box-shadow:0 18px 38px rgba(39,104,255,.46)}
.btn.primary::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-60%;
  width:42%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  pointer-events:none;
  animation:shine 5s ease-in-out infinite;
}

/* Inputs: smooth focus */
.inp{transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}

/* Language toggle */
.auth-language-toggle{transition:transform .16s ease, border-color .16s ease, background .16s ease}
.auth-language-toggle:hover{transform:translateY(-2px)}

@keyframes auth-aurora{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%,-2%) scale(1.06)}
}
@keyframes auth-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes auth-pulse{
  0%,100%{opacity:.65;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.2)}
}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@keyframes spark-float{
  0%,100%{transform:translateY(0) scale(1);opacity:.4}
  50%{transform:translateY(-20px) scale(1.35);opacity:1}
}
@keyframes auth-rise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes auth-rise-left{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:none}
}
@keyframes auth-fade{from{opacity:0}to{opacity:1}}
@keyframes brand-bob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-3px) rotate(6deg)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}