/* ===== أنماط خاصة بصفحة تسجيل الدخول ===== */
html, body {margin:0; padding:0;}
body {
  display:flex; justify-content:center; align-items:center;
  position:relative; overflow:hidden;
  background: radial-gradient(circle at 50% 30%, var(--brand-bg-alt), var(--brand-bg) 75%);
}
body.light-mode {background: radial-gradient(circle at 50% 30%, #eef1f5, var(--brand-bg-light) 75%);}

#particles-js {position:absolute; inset:0; z-index:0;}

.login-card {
  width:400px; max-width:92vw; z-index:1; padding:2.25rem;
}
.login-card .brand {
  text-align:center; font-size:1.4rem; font-weight:800; margin-bottom:1.5rem; color: var(--brand-text);
}
.login-card .brand span {color: var(--brand-accent);}
body.light-mode .login-card .brand {color: var(--brand-text-light);}

.login-card h3 {text-align:center; margin-bottom:1.5rem; font-size:1.15rem; font-weight:600; color: var(--brand-text-muted);}
body.light-mode .login-card h3 {color: var(--brand-text-light-muted);}

.login-card .form-control {
  background: rgba(255,255,255,.04); border-color: var(--brand-border); color: var(--brand-text);
}
.login-card .form-control:focus {
  background: rgba(255,255,255,.06); border-color: var(--brand-accent); color: var(--brand-text);
  box-shadow: 0 0 0 .2rem rgba(198,154,78,.2);
}
body.light-mode .login-card .form-control {background:#fff; border-color: var(--brand-border-light); color: var(--brand-text-light);}

#theme-toggle {
  position:absolute; top:20px; inset-inline-end:20px;
  background:none; border:none; font-size:1.4rem; cursor:pointer; color: var(--brand-accent);
  z-index:2;
}