/* ==========================================================================
   VoiceEdu.uz — ro'yxatdan o'tish va kirish sahifalari
   ========================================================================== */

.authpage{ background:var(--bg-soft); }

.auth{
  display:grid; grid-template-columns:minmax(22rem,.9fr) 1.1fr;
  min-height:100vh; min-height:100dvh;
}

/* ---------- Chap panel ---------- */
.auth-side{
  position:relative; overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  padding:clamp(2rem,4vw,3.2rem);
  background:linear-gradient(150deg,var(--brand-700) 0%,var(--brand) 55%,#7c6cf5 100%);
}
.auth-side::before,
.auth-side::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.auth-side::before{
  width:26rem; height:26rem; right:-9rem; top:-8rem;
  background:radial-gradient(circle, rgba(249,115,98,.45), transparent 65%);
}
.auth-side::after{
  width:22rem; height:22rem; left:-8rem; bottom:-9rem;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 3rem rgba(255,255,255,.04), 0 0 0 6rem rgba(255,255,255,.03);
}
.auth-side > *{ position:relative; z-index:1; }
.auth-side .logo-mark{ background:rgba(255,255,255,.16); box-shadow:none; border:1px solid rgba(255,255,255,.28); }

.auth-side-body{ max-width:26rem; }
.auth-side h2{ color:#fff; font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:.5em; }
.auth-side-body > p{ color:#dcdcfb; font-size:1.02rem; }

.auth-points{ display:grid; gap:.8rem; margin-top:1.8rem; }
.auth-points li{ display:flex; align-items:center; gap:.8rem; font-weight:600; font-size:.97rem; }
.auth-points li > span{
  flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
}
.auth-points svg{ width:19px; height:19px; }
.auth-side-foot{ margin:0; font-size:.85rem; color:#c3c3f3; }

/* ---------- O'ng qism ---------- */
.auth-main{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(1.4rem,3vw,2.4rem) 1.25rem;
}
.auth-top{
  width:100%; max-width:28rem; display:flex; align-items:center; justify-content:flex-end;
  gap:1rem; margin-bottom:1.2rem;
}
.auth-mobile-logo{ display:none; margin-right:auto; }
.auth-back{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:700; color:var(--muted);
  padding:.4rem .8rem; border-radius:999px; transition:color .2s, background .2s;
}
.auth-back svg{ width:17px; height:17px; }
.auth-back:hover{ color:var(--brand); background:var(--brand-soft); }

.auth-card{
  width:100%; max-width:28rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(1.6rem,3.4vw,2.4rem);
}
.auth-ico{
  width:54px; height:54px; border-radius:17px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--brand-soft); color:var(--brand); border:1px solid #e0e3fb;
}
.auth-ico svg{ width:26px; height:26px; }
.auth-card h1{ font-size:clamp(1.6rem,3vw,2rem); margin:0 0 .25em; }
.auth-sub{ color:var(--muted); margin-bottom:1.6rem; font-size:.97rem; }

/* ---------- Maydonlar ---------- */
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:.45rem; }

.input-group{
  display:flex; align-items:stretch; min-height:3.3rem;
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  transition:border-color .2s, box-shadow .2s;
}
.input-group:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.14); }

.input-prefix{
  display:inline-flex; align-items:center; gap:.45rem; flex:none;
  padding:0 .35rem 0 .95rem; color:var(--muted); font-weight:700; font-size:.98rem;
}
.input-prefix svg{ width:19px; height:19px; }

.input-group input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:1.02rem; font-weight:600; color:var(--ink);
  padding:0 .9rem 0 .45rem; letter-spacing:.01em;
}
.input-group input::placeholder{ color:#a3adbf; font-weight:500; }
.input-group input:focus-visible{ outline:none; }

.input-eye{
  flex:none; width:3rem; border:0; background:transparent; color:var(--muted); cursor:pointer;
  display:grid; place-items:center; border-radius:0 12px 12px 0; transition:color .2s;
}
.input-eye:hover{ color:var(--brand); }
.input-eye svg{ width:20px; height:20px; }
.input-eye .eye-off{ display:none; }
.input-eye[aria-pressed="true"] .eye-on{ display:none; }
.input-eye[aria-pressed="true"] .eye-off{ display:block; }

.field-error{ margin:.35rem 0 0; min-height:0; font-size:.85rem; font-weight:700; color:#dc2626; }
.field-error:empty{ display:none; }
.field.invalid .input-group{ border-color:#f87171; }
.field.invalid .input-group:focus-within{ box-shadow:0 0 0 4px rgba(248,113,113,.18); }

/* ---------- Umumiy xabar ---------- */
.form-alert{
  margin:.2rem 0 1rem; padding:.75rem 1rem; border-radius:12px;
  font-size:.92rem; font-weight:700; border:1px solid;
}
.form-alert.err{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.form-alert.warn{ background:#fffbeb; border-color:#fde68a; color:#b45309; }
.form-alert.ok{ background:var(--mint-soft); border-color:#a7f3d0; color:#047857; }

/* ---------- Yuborish tugmasi ---------- */
.btn-block{ width:100%; margin-top:.4rem; }
.btn .spinner{
  display:none; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;
}
.btn.loading .spinner{ display:inline-block; }
.btn.loading{ opacity:.85; cursor:progress; transform:none; }
.btn:disabled{ cursor:not-allowed; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.auth-switch{ margin:1.4rem 0 0; text-align:center; font-size:.95rem; color:var(--muted); }
.auth-switch a{ color:var(--brand); font-weight:800; }
.auth-switch a:hover{ text-decoration:underline; }

/* ---------- Kichik ekran ---------- */
@media (max-width:900px){
  .auth{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
  .auth-mobile-logo{ display:inline-flex; }
  .auth-main{ justify-content:flex-start; padding-top:1.4rem; }
}