/* The card lives inside the public shell now (new_ui/base_auth.html extends
   base_public), so this centres itself in the content column rather than
   owning the viewport: no min-height fighting the shell's own.

   The full-page accent gradient this used to paint is gone. It made sense on
   a standalone document; inside .page-wrapper it was clipped to the content
   column and read as a mysterious lighter rectangle with hard edges. The glow
   moved onto the card itself, where it has something to sit behind. */
.auth-shell {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 0 44px;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--panel-bg); border: 1px solid var(--accent);
  border-radius: 14px; padding: 30px 28px 26px;
  box-shadow: var(--shadow-win), 0 0 0 6px var(--accent-10);
  display: flex; flex-direction: column; gap: 18px;
}
.auth-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
/* Sized larger than the sidebar lockup: the auth card is the first
   thing an unauthenticated visitor sees, so the brand leads it. */
.auth-brand .ld-logo-mark { height: 34px; }
.auth-brand .ld-logo-wordmark { height: 38px; }
.auth-heading { display: flex; flex-direction: column; gap: 6px; }
/* colour/weight/align stated explicitly: the legacy cards.css in this page's
   stylesheet stack has a bare `h1 { color:#444; font-weight:normal;
   text-align:center }`, which otherwise leaves the heading a grey, unbold,
   centred line on a dark card. */
.auth-heading h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); text-align: left; font-family: inherit; }
.auth-heading p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-5); }
.login_wrapper { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: 11px; color: var(--text-4); font-weight: 600; }
.auth-input { background: var(--bg-sunken); border: 1px solid var(--line-input); border-radius: 7px; padding: 10px 12px; font-size: 13px; color: var(--text-2); font-family: inherit; width: 100%; }
.auth-input::placeholder { color: var(--text-6); }
.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.auth-remember { display: flex; align-items: center; gap: 6px; color: var(--text-4); }
.auth-remember input { accent-color: var(--accent); }
.auth-forgot { color: var(--accent); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-submit { padding: 11px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; border: none; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-error { font-size: 11.5px; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 7px; padding: 8px 10px; }
.auth-divider { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-6); text-transform: uppercase; letter-spacing: 0.05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.auth-sso { display: flex; gap: 8px; }
.auth-sso-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 7px; border: 1px solid var(--line-input); background: none; color: var(--text-3); font-size: 12px; font-weight: 600; cursor: not-allowed; opacity: 0.65; }
.auth-footer { text-align: center; font-size: 11px; color: var(--text-5); }
.auth-footer a { color: var(--text-4); }

.notfound-shell {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg-deep); text-align: center;
}
.notfound-card { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.notfound-code { font-family: 'JetBrains Mono', monospace; font-size: 46px; font-weight: 700; color: var(--accent); }
.notfound-title { font-size: 15px; font-weight: 700; margin: 0; }
.notfound-text { font-size: 12.5px; color: var(--text-5); margin: 0; }
.notfound-link { margin-top: 8px; padding: 9px 18px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12px; text-decoration: none; }