:root{
  --bg1:#0b1220;
  --bg2:#111a2e;
  --card:#0f1a2f99;
  --stroke:#ffffff22;
  --text:#e9eefc;
  --muted:#b8c3e6;
  --accent:#6ea8fe;
}

body{
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, #1e2b52 0%, transparent 60%),
              radial-gradient(900px 500px at 80% 20%, #2a1e52 0%, transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}

.muted{ color: var(--muted); }
.subtle{ color: rgba(233,238,252,.55); }
.hint{ color: rgba(233,238,252,.70); }

.auth-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 32px 0;
  position: relative;
  isolation: isolate;
}

.glass{
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px;
  overflow: hidden;
}

.enter{ animation: enter .75s cubic-bezier(.2,.85,.2,1) both; }
@keyframes enter{
  from { opacity:0; transform: translateY(16px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.blob{
  position:absolute;
  width: 420px; height: 420px;
  filter: blur(40px);
  opacity: .35;
  border-radius: 50%;
  animation: float 10s ease-in-out infinite;
  pointer-events: none;
}
.blob-1{ left:-120px; top:80px; background:#4f9dff; }
.blob-2{ right:-140px; top:160px; background:#a66bff; animation-delay: 1.2s; }
.blob-3{ left:25%; bottom:-180px; background:#22c55e; animation-delay: 2.2s; opacity:.22; }

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-14px) scale(1.04); }
}

.brand-panel{
  padding: 34px 34px 28px;
  height: 100%;
  background:
    radial-gradient(600px 340px at 40% 20%, rgba(110,168,254,.35), transparent 60%),
    radial-gradient(520px 320px at 70% 60%, rgba(166,107,255,.28), transparent 60%);
}

.brand-logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(110,168,254,.9), rgba(166,107,255,.85));
  box-shadow: 0 12px 28px rgba(110,168,254,.22);
}

.brand-footnote{ left: 46px; bottom: 54px; }

.login-panel{ padding: 34px; background: rgba(0,0,0,.10); }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: .9rem;
}

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--text);
}
.form-control::placeholder{ color: rgba(233,238,252,.55); }
.form-control:focus{
  border-color: rgba(110,168,254,.8);
  box-shadow: 0 0 0 .25rem rgba(110,168,254,.2);
  background: rgba(255,255,255,.07);
  color: var(--text);
}

.icon-addon{
  background: transparent;
  border: 0;
  color: var(--muted);
  padding-right: 0;
}

.btn-accent{
  background: linear-gradient(135deg, rgba(110,168,254,1), rgba(166,107,255,1));
  border: 0;
}
.btn-accent:hover{ filter: brightness(1.05); }

.btn-outline-soft{ border-color: rgba(255,255,255,.2) !important; }

.link-muted{ color: var(--muted); }
.link-muted:hover{ color: var(--text); }

.divider{
  display:flex; align-items:center; gap:12px;
  color: rgba(233,238,252,.6);
  font-size: .9rem;
}
.divider::before, .divider::after{
  content:"";
  height: 1px; flex:1;
  background: rgba(255,255,255,.16);
}

.spark{
  position:absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(110,168,254,.9);
  box-shadow: 0 0 18px rgba(110,168,254,.6);
  opacity: 0;
  animation: spark 2.8s ease-in-out infinite;
  pointer-events:none;
}
.spark-a{ left:66px; top:140px; animation-delay:.2s; }
.spark-b{
  left:210px; top:220px; animation-delay:1.2s;
  background:rgba(166,107,255,.9);
  box-shadow:0 0 18px rgba(166,107,255,.55);
}
.spark-c{
  left:300px; top:160px; animation-delay:2.1s;
  background:rgba(34,197,94,.9);
  box-shadow:0 0 18px rgba(34,197,94,.5);
}

@keyframes spark{
  0%{ transform: translateY(0) scale(.6); opacity: 0; }
  20%{ opacity: .9; }
  60%{ opacity: .2; }
  100%{ transform: translateY(-26px) scale(1.1); opacity: 0; }
}

@media (max-width: 575.98px){
  .login-panel{ padding: 24px; }
}