/* ---------- brand tokens ---------- */
:root{
  --brand: #7C57E6;            /* primary purple */
  --brand-600:#6c48e3;
  --brand-500:#7c57e6;
  --brand-400:#9a7af0;
  --text-on-dark:#EAEAF2;
  --muted:#A9A9BC;
  --card-bg: rgba(22, 20, 31, 0.55);  /* glass */
  --card-border: rgba(255,255,255,0.08);
  --input-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.12);
  --input-focus: rgba(124,87,230,.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- page shell ---------- */
body.auth{
  min-height:100vh;
  color: var(--text-on-dark);
  background:
     radial-gradient(1200px 800px at 10% -10%, rgba(124,87,230,.25), transparent 60%),
     radial-gradient(900px 600px at 110% 0%, rgba(113,0,255,.18), transparent 55%),
     linear-gradient(180deg, #0E0D14 0%, #0B0A12 100%);
}

.auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 40px 16px;
  gap: 18px;
}

.brand img{ filter: drop-shadow(0 4px 14px rgba(124,87,230,.55)); }

.auth-card{
  width: clamp(320px, 92vw, 960px);
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.auth-footer{
  color: var(--muted);
  margin-top: 14px;
}

/* ---------- headings ---------- */
.auth-title{
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing:.2px;
  margin-bottom: 14px;
}

.section-title{
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

/* ---------- grid & spacing ---------- */
.auth-grid{ margin-top: 14px; }
@media (max-width: 991.98px){
  .auth-card{ padding: 22px !important; }
}

/* ---------- inputs ---------- */
.form-floating>.form-control{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-on-dark);
}
.form-floating>.form-control:focus{
  border-color: var(--input-focus);
  box-shadow: 0 0 0 .25rem rgba(124,87,230,.15);
}
.form-floating>label{
  color: #cfcfe6;
}
.form-control::placeholder{ color:#bfbfcd; opacity:.4; }

/* validation */
.text-danger.small{ margin-top:.25rem; }

/* checkbox */
.form-check-input{
  background-color: transparent;
  border: 1px solid var(--input-border);
}
.form-check-input:checked{
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-label{ color: var(--text-on-dark); }

/* ---------- primary buttons ---------- */
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 124,87,230;
  font-weight:600;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(124,87,230,.28);
}
.btn-brand:focus{
  box-shadow: 0 0 0 .25rem rgba(124,87,230,.25);
}

/* ---------- social buttons ---------- */
.social-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.social-btn{
  width:100%;
  border-radius: 12px;
  padding:.8rem 1rem;
  font-weight:600;
  background: transparent;
  color: var(--text-on-dark);
  border:1px solid var(--input-border);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.social-btn:hover{ transform: translateY(-1px); border-color: var(--brand-400); box-shadow: 0 10px 18px rgba(124,87,230,.18); }
.btn-outline-brand{ border-color: var(--input-border); }
.btn-google{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.18);
}
.btn-microsoft{
  background: linear-gradient(180deg, rgba(124,87,230,.20), rgba(124,87,230,.05));
  border-color: rgba(124,87,230,.35);
}

/* ---------- links ---------- */
a.link-light{
  color: #dcdcf1;
}
a.link-light:hover{
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- alerts (consistent with glass) ---------- */
.alert{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,210,0,.08);
  color: #ffe28b;
}