/* شبکهٔ Canvas زیر کارت و کنترل‌های ورود رسم می‌شود. */
.login-page { --login-bg: #070f1c; background: var(--login-bg); }
html[data-color-theme=dark] .login-page { --login-bg: #050a13; }
.login-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding: 88px 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 75% 30%, #122540, var(--login-bg) 65%);
}
.login-layout > canvas { pointer-events: none; }
.login-card, .login-theme { z-index: 1; }
.login-card {
  position: relative;
  inline-size: 100%;
  max-inline-size: 432px;
  padding: 38px 40px 28px;
  border: 1px solid #ffffffb3;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 40px 90px -18px #030e24b3, 0 12px 28px -8px #030e2459, inset 0 1px 0 #fff;
}
.login-header { text-align: center; margin-block-end: 30px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-brand .brand-mark {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 16px;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 65%, transparent);
}
.login-brand strong { max-inline-size: 100%; font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.login-header h1 { margin-block-start: 7px; font-size: var(--heading-size); font-weight: 650; }
.login-form .field-block { margin-block-end: 20px; }
.login-form .form-control { min-block-size: 50px; border-radius: 10px; background-color: var(--surface-soft)!important; }
.login-form .form-label { margin-block-end: 9px; }
.login-submit { inline-size: 100%; min-block-size: 50px; justify-content: space-between; border-radius: 10px; margin-block-start: 6px; padding: 12px 17px; }
.login-help { margin-block-start: 24px; padding-block-start: 20px; border-block-start: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 2; text-align: center; }
.login-theme {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid #c5dcff3d;
  border-radius: 12px;
  color: #d7e6fc;
  background: #ffffff08;
}
.login-theme:hover { color: #fff; background: #ffffff14; }
.login-theme:focus-visible { outline-color: #b7d5ff; }
html[data-color-theme=dark] .login-card {
  border-color: #536d9059;
  box-shadow: 0 40px 90px -18px #020914e6, 0 12px 28px -8px #02091499, inset 0 1px 0 #ffffff0a;
}
@media (max-width: 600px) {
  .login-layout { padding: 76px 20px; }
  .login-card { padding: 30px 26px 24px; border-radius: 21px; }
  .login-theme { inset-block-start: 18px; inset-inline-end: 20px; }
}
.password-field { position: relative; }
.password-field .form-control { padding-inline-end: 4.6rem; }
.password-toggle { position: absolute; inset-block: 0; inset-inline-end: 6px; margin-block: 6px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--brand); font-weight: 600; font-size: .9em; }
.password-toggle:hover { background: var(--tint); }
html[data-color-theme=dark] .password-toggle { color: #a7c8ff; }