/* Login can sit over bright Selam Sky independently of saved app appearance.
   Own its reading material so theme, custom-tone and Classic tokens cannot
   invert the auth surface. Repeating .login-page outranks later lazy CSS. */
:root[data-theme] .login-page.login-page {
  color-scheme: dark;
  color: #f7fbff;
  --login-surface: rgba(8, 13, 36, 0.94);
  --login-control: rgba(236, 248, 255, 0.08);
  --login-control-hover: rgba(236, 248, 255, 0.13);
  --login-border: #7891ab;
  --login-border-soft: rgba(190, 232, 255, 0.24);
  --login-ink: #f7fbff;
  --login-secondary: #d4e3ef;
  --login-muted: #b6c8d8;
  --login-accent: #67e8f9;
  --text-primary: var(--login-ink);
  --text-secondary: var(--login-secondary);
  --text-muted: var(--login-muted);
  --accent-cyan: var(--login-accent);
  --accent-rose: #fda4af;
  --accent-neon: #86efac;
  --divider: var(--login-border-soft);
}

:root[data-theme] .login-page.login-page .login-card {
  --login-card-fill: var(--login-surface);
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.09), transparent 42%),
    var(--login-card-fill);
  border-color: var(--login-border);
  color: var(--login-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 60px -18px rgba(0, 0, 0, 0.62);
}

:root[data-theme] .login-page.login-page .login-launch-panel {
  background: linear-gradient(135deg, rgba(10, 22, 48, 0.96), rgba(8, 13, 36, 0.97));
  border-color: rgba(103, 232, 249, 0.5);
  color: var(--login-ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

:root[data-theme] .login-page.login-page :is(.login-title, .login-launch-panel h2, .auth-verify-email, .login-proof-grid span) {
  color: var(--login-ink);
}

:root[data-theme] .login-page.login-page :is(.login-sub, .login-toggle, .login-divider, .auth-verify-note, .auth-field-label, .auth-hint, .auth-reveal-btn) {
  color: var(--login-muted);
}

:root[data-theme] .login-page.login-page :is(.login-launch-panel > p, .login-launch-note, .login-launch-links a, .auth-verify-steps li, .auth-done) {
  color: var(--login-secondary);
}

:root[data-theme] .login-page.login-page :is(.login-launch-kicker, .login-link, .auth-ghost-btn, .auth-verify-mark) {
  color: var(--login-accent);
}

:root[data-theme] .login-page.login-page .login-input {
  background: var(--login-control);
  border-color: var(--login-border);
  color: var(--login-ink);
  -webkit-text-fill-color: var(--login-ink);
  caret-color: var(--login-accent);
}

:root[data-theme] .login-page.login-page .login-input::placeholder {
  color: var(--login-muted);
  opacity: 1;
}

:root[data-theme] .login-page.login-page .login-input:is(:hover, :focus) {
  background: var(--login-control-hover);
  border-color: var(--login-accent);
}

:root[data-theme] .login-page.login-page .login-input:is(:autofill, :-webkit-autofill) {
  -webkit-box-shadow: 0 0 0 1000px #17263b inset;
  box-shadow: 0 0 0 1000px #17263b inset;
  -webkit-text-fill-color: var(--login-ink);
  caret-color: var(--login-accent);
}

:root[data-theme] .login-page.login-page :is(.login-input, .login-btn, .google-btn, .login-link, .auth-ghost-btn, .auth-reveal-btn, .login-offline-btn):focus-visible {
  outline: 3px solid var(--login-accent);
  outline-offset: 3px;
}

:root[data-theme] .login-page.login-page .google-btn {
  background: var(--login-control);
  border-color: var(--login-border);
  color: var(--login-ink);
}

:root[data-theme] .login-page.login-page .google-btn:hover:not(:disabled) {
  background: var(--login-control-hover);
  border-color: var(--login-accent);
}

:root[data-theme] .login-page.login-page .login-divider::before {
  background: var(--login-border-soft);
}

:root[data-theme] .login-page.login-page .login-divider span {
  background: #080d24;
}

:root[data-theme] .login-page.login-page :is(.auth-verify-steps, .login-proof-grid span, .login-launch-note) {
  background: rgba(103, 232, 249, 0.07);
  border-color: var(--login-border);
}

:root[data-theme] .login-page.login-page .login-launch-links a {
  border-color: var(--login-border);
}

:root[data-theme] .login-page.login-page :is(.login-launch-links a:first-child, .auth-ghost-btn) {
  background: rgba(103, 232, 249, 0.11);
  border-color: var(--login-accent);
  color: var(--login-accent);
}

:root[data-theme] .login-page.login-page .login-error {
  color: #fda4af;
  background: rgba(253, 164, 175, 0.11);
  border-color: rgba(253, 164, 175, 0.55);
}

:root[data-theme] .login-page.login-page .login-success {
  color: #86efac;
  background: rgba(134, 239, 172, 0.1);
  border-color: rgba(134, 239, 172, 0.5);
}

:root[data-theme] .login-page.login-page :is(.login-btn, .google-btn, .auth-ghost-btn):disabled {
  opacity: 0.72;
}

/* These controls sit outside the backed panels, directly over moving sky. */
:root[data-theme] .login-page.login-page .login-offline-btn {
  background: rgba(8, 13, 36, 0.92);
  border-color: var(--login-border);
  color: var(--login-secondary);
}

:root[data-theme] .login-page.login-page .login-tagline {
  animation: loginContrastTaglineFade 1s ease 0.8s forwards;
  background: rgba(8, 13, 36, 0.9);
  border: 1px solid var(--login-border);
  border-radius: 999px;
  color: var(--login-ink);
  opacity: 0;
  padding: 6px 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

@keyframes loginContrastTaglineFade { to { opacity: 0.94; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .login-page.login-page .login-tagline {
    animation: none;
    opacity: 0.94;
  }
}