/* themes/dark/login.css */

.auth{min-height:100vh;display:grid;grid-template-columns: 1.15fr 1fr;}
@media (max-width: 980px){
  .auth{grid-template-columns: 1fr;}
  .auth__hero{display:none;}
}

/* HERO */
.auth__hero{
  position:relative;
  padding: 56px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  width:max-content;
  padding: 10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-weight:800;
  letter-spacing:.2px;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(124,92,255,.12);
}
.hero__title{margin: 18px 0 6px;font-size: 54px;letter-spacing:.4px;line-height:1}
.hero__subtitle{margin:0;max-width:520px;color:var(--muted);font-size:15px;line-height:1.6}
.hero__stats{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.stat{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  min-width: 150px;
}
.stat__num{font-weight:900;letter-spacing:.2px}
.stat__txt{margin-top:6px;color:var(--muted);font-size:12.5px}

.hero__grid{
  position:absolute; inset:-40px -40px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 35% 50%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
  opacity:.35;
  pointer-events:none;
}
.hero__orb{
  position:absolute; border-radius:999px;
  filter: blur(40px);
  opacity:.65;
  pointer-events:none;
  animation: float 9s ease-in-out infinite;
}
.hero__orb--a{
  width: 360px; height: 360px;
  left: -80px; top: 15%;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.95), rgba(124,92,255,.0) 60%);
}
.hero__orb--b{
  width: 320px; height: 320px;
  right: -110px; bottom: 10%;
  background: radial-gradient(circle at 30% 30%, rgba(49,216,255,.85), rgba(49,216,255,0) 60%);
  animation-delay: -2.4s;
}

/* PANEL */
.auth__panel{display:flex;align-items:center;justify-content:center;padding: 28px 16px;}
.panel{
  width:100%;
  max-width: 460px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__head{
  padding: 22px 22px 14px;
  display:flex; gap:14px; align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.panel__mark{width:42px;height:42px;position:relative;flex:0 0 auto}
.mark__ring{
  position:absolute; inset:0; border-radius:999px;
  background: conic-gradient(from 180deg, rgba(124,92,255,.9), rgba(49,216,255,.8), rgba(124,92,255,.9));
  box-shadow: 0 0 0 6px rgba(124,92,255,.12);
}
.mark__core{
  position:absolute; inset:9px; border-radius:999px;
  background: rgba(10,14,38,.9);
  border:1px solid rgba(255,255,255,.12);
}

.panel__title{margin:0;font-size:22px;letter-spacing:.2px}
.panel__desc{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}

.theme{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.theme__btn{
  text-decoration:none;
  font-size:12px;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition:.16s ease;
}
.theme__btn:hover{color:var(--text); background: rgba(255,255,255,.08)}
.theme__btn.is-active{
  color: rgba(255,255,255,.95);
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 0 0 4px rgba(124,92,255,.16);
}

.form{padding: 16px 22px 22px}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  backdrop-filter: blur(14px);
}
.modal.active{display:flex}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(124,92,255,.25), transparent 60%),
    rgba(0,0,0,.78);
}

.modal__card{
  position:relative;
  width:100%;
  max-width:460px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    0 40px 120px rgba(0,0,0,.75),
    0 0 0 1px rgba(124,92,255,.28) inset;
  padding: 30px 30px 26px;
  animation: modalFadeUp .45s cubic-bezier(.2,.9,.2,1);
}

.modal__title{
  margin:0;
  font-size:24px;
  font-weight:900;
  letter-spacing:.35px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.modal__desc{
  margin:12px 0 18px;
  color: var(--muted);
  font-size:14.5px;
  line-height:1.65;
}

.modal__field label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin-bottom:8px;
}

.modal__field .input{
  padding:14px 16px;
  border-radius:16px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);
}

.modal__field .input:focus{
  box-shadow: 0 0 0 4px rgba(124,92,255,.25);
}

.modal__actions{
  display:flex;
  gap:14px;
  margin-top:22px;
}

.modal__actions .btn{margin-top:0}

.modal__fine{
  margin-top:16px;
  font-size:12px;
  color: rgba(255,255,255,.55);
}