/* ============================================================================
   Backoffice login — clean SaaS. Uses the design tokens defined in site.css.
   ========================================================================== */
body.login-page {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 50% -12%, var(--sn-accent-weak) 0%, transparent 55%),
    var(--sn-surface-2);
}
body.login-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--sn-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--sn-border) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .55;
  -webkit-mask-image: radial-gradient(72% 55% at 50% 28%, #000, transparent);
  mask-image: radial-gradient(72% 55% at 50% 28%, #000, transparent);
}
body.login-page main {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: 100vh; padding: 24px 16px;
}
body.login-page main > .container { max-width: 400px; width: 100%; }

.login-box { width: 100%; max-width: 380px; margin: 0 auto; }

.card-login {
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-r-lg);
  box-shadow: var(--sn-shadow-lg);
  background: var(--sn-surface);
  overflow: hidden;
}
.card-login .card-header {
  background: var(--sn-surface);
  border-bottom: 0;
  padding: 26px 28px 2px;
  display: flex; align-items: center; gap: 11px;
}
.sn-login-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--sn-accent), #7C93F2);
  display: grid; place-items: center; color: #fff; box-shadow: var(--sn-shadow-sm);
}
.sn-login-brand b { display: block; font-weight: 640; font-size: 1rem; letter-spacing: -.01em; color: var(--sn-text); line-height: 1.15; }
.sn-login-brand span { font-size: .72rem; color: var(--sn-faint); letter-spacing: .02em; }

.card-login .card-body { padding: 18px 28px 28px; }
.card-login h1 { font-size: 1.35rem; font-weight: 660; margin: 6px 0 2px; letter-spacing: -.02em; }
.card-login .card-body > p { color: var(--sn-muted); font-size: .875rem; margin-bottom: 20px; }

.card-login .form-control { padding: .6rem .8rem; }
.card-login .form-group { margin-bottom: 1rem; }
.card-login .form-check { margin-bottom: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.card-login .form-check-input { margin-top: 0; }
.card-login .form-check-label { color: var(--sn-muted); font-size: .875rem; }

.btn-login { width: 100%; padding: .6rem; font-weight: 560; font-size: .95rem; }

.card-login .card-body > div[style] a { color: var(--sn-accent); font-weight: 540; text-decoration: none; }
.card-login .card-body > div[style] a:hover { text-decoration: underline; }

.login-footer {
  text-align: center; color: var(--sn-faint); font-size: .78rem;
  margin-top: 18px; position: relative; z-index: 1;
}

/* demo-login hint list */
.card-login .alert-info code { background: var(--sn-surface-2); border: 1px solid var(--sn-border); padding: 0 4px; border-radius: 4px; color: var(--sn-accent); }

@media (max-width: 420px) {
  .card-login .card-header, .card-login .card-body { padding-left: 20px; padding-right: 20px; }
}