/* Operate surfaces: shared neutral palette, one clear action, native form semantics. */
.login-screen {
  --login-text: #ececec;
  --login-muted: #b0b0b0;
  --login-field: #202020;
  --login-line: #666;
  --login-focus: #8ab9ff;
  --login-check: #82b4ff;
  --login-error: #ffb4ae;
  --login-error-bg: #352423;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  color: var(--login-text);
  background: var(--bg);
  overscroll-behavior: contain;
}
/* The page palette already follows the selected theme; form tokens must follow it too. */
html[data-gpth-theme="light"] .login-screen {
  --login-text: var(--text);
  --login-muted: var(--muted);
  --login-field: #fff;
  --login-line: #808080;
  --login-focus: #2864b0;
  --login-check: #2864b0;
  --login-error: #b42318;
  --login-error-bg: #fff0ee;
}
.login-card {
  width: min(100%, 424px);
  padding: 36px;
  border: 1px solid #414141;
  border-radius: 16px;
  background: var(--surface);
}
.login-card h1 { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.login-card .login-intro { margin: 8px 0 0; color: var(--login-muted); font-size: 15px; line-height: 1.6; }
.login-fields { display: grid; gap: 20px; }
.login-card .form-field { display: grid; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.login-card .form-field input { width: 100%; min-width: 0; height: 48px; padding: 11px 12px; border: 1px solid var(--login-line); border-radius: 8px; background: var(--login-field); color: var(--login-text); font-size: 16px; line-height: 24px; caret-color: var(--login-focus); }
.login-card input::placeholder { color: var(--login-muted); opacity: 1; }
.login-card :focus-visible { outline: 2px solid var(--login-focus); outline-offset: 3px; }
.login-card input::selection { background: #315e95; color: white; }
.login-password { display: flex; align-items: center; border: 1px solid var(--login-line); border-radius: 8px; background: var(--login-field); }
.login-card .login-password input { flex: 1; width: 0; border: 0; background: transparent; }
.login-password:focus-within { outline: 2px solid var(--login-focus); outline-offset: 3px; }
.login-password input:focus-visible { outline: none; }
.login-password button { flex: none; min-height: 44px; margin: 0 3px; padding: 8px; border-radius: 6px; color: var(--login-muted); background: transparent; font-size: 13px; cursor: pointer; }
.login-password button:hover { color: var(--login-text); background: var(--surface-hover); }
.login-card .trust-device-choice { min-height: 44px; margin: 18px 0 0; gap: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.login-card .trust-device-choice input { accent-color: var(--login-check); }
.login-card small { display: block; color: var(--login-muted); font-size: 13px; line-height: 1.6; font-weight: 400; }
#loginTrustHint { margin: 0 0 24px 28px; }
#loginError { margin: 0 0 16px; padding: 12px; border-radius: 8px; color: var(--login-error); background: var(--login-error-bg); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#loginSubmit { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 8px; background: #2864b0; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 160ms ease-out; }
#loginSubmit:hover { background: #3274c4; }
#loginSubmit:disabled { opacity: .65; cursor: wait; }
.login-card .login-footnote { margin: 20px 0 0; color: var(--login-muted); font-size: 13px; line-height: 1.6; text-align: center; }
@media (max-width: 480px) { .login-card { padding: 28px 22px; } }
@media (max-height: 640px) { .login-screen { place-items: start center; } }
@media (prefers-reduced-motion: reduce) { #loginSubmit { transition: none; } }
@media (forced-colors: active) { .login-card, .login-password, #loginSubmit { border: 1px solid ButtonText; } }

.login-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.login-brand img { flex: none; width: 56px; height: 56px; }
@media (max-width: 380px) { .login-brand { gap: 12px; } .login-card h1 { font-size: 21px; } .login-brand img { width: 48px; height: 48px; } }