/* Authentication screen: high-contrast, mobile-first sign-in surface. */
body:not(.logged-in) {
  --auth-ink: #172033;
  --auth-muted: #65718a;
  --auth-border: #dce3ef;
  --auth-surface: #ffffff;
  --auth-field: #f7f9fc;
  --auth-accent: #4f46e5;
  --auth-accent-hover: #4338ca;
  --auth-ring: rgba(79, 70, 229, .2);
  min-height: 100svh;
  background: #eef2ff;
}

body:not(.logged-in) .bg-orb { display: none; }
body:not(.logged-in) .auth-wrapper {
  min-height: 100svh;
  padding: 56px 20px 28px;
  background:
    radial-gradient(ellipse at 12% 4%, rgba(199, 210, 254, .72), transparent 38%),
    radial-gradient(ellipse at 92% 96%, rgba(221, 214, 254, .6), transparent 35%),
    #f5f7ff;
}
body:not(.logged-in) .auth-container { max-width: 440px; }
body:not(.logged-in) .auth-brand {
  margin: 0 0 24px;
  color: var(--auth-ink);
  text-shadow: none;
}
body:not(.logged-in) .auth-brand-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #6366f1, #4338ca);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .24);
  animation: none;
}
body:not(.logged-in) .auth-brand h1 {
  margin: 0 0 4px;
  color: var(--auth-ink);
  font-size: 1.55rem;
  font-weight: 760;
  letter-spacing: -.035em;
  text-shadow: none;
}
body:not(.logged-in) .auth-brand p {
  color: var(--auth-muted);
  font-size: .92rem;
  font-weight: 450;
  opacity: 1;
}
body:not(.logged-in) .auth-card {
  padding: 28px;
  overflow: visible;
  border: 1px solid rgba(220, 227, 239, .9);
  border-radius: 22px;
  background: var(--auth-surface);
  box-shadow: 0 20px 55px rgba(31, 41, 78, .09), 0 2px 8px rgba(31, 41, 78, .035);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not(.logged-in) .auth-card::before { display: none; }
body:not(.logged-in) .auth-tabs {
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 0;
  border-radius: 13px;
  background: #f0f2f8;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not(.logged-in) .auth-tab {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #65718a;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 650;
  line-height: 1.2;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
body:not(.logged-in) .auth-tab.active {
  background: #fff;
  color: #3730a3;
  box-shadow: 0 1px 4px rgba(23, 32, 51, .12);
}
body:not(.logged-in) .auth-tab:not(.active):hover {
  background: rgba(255, 255, 255, .65);
  color: var(--auth-ink);
}
body:not(.logged-in) .auth-methods,
body:not(.logged-in) .register-methods {
  gap: 8px;
  margin-bottom: 18px;
}
body:not(.logged-in) .auth-method,
body:not(.logged-in) .register-method {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--auth-border);
  border-radius: 11px;
  background: #fff;
  color: #536078;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
body:not(.logged-in) .auth-method.active,
body:not(.logged-in) .register-method.active {
  border-color: #a5b4fc;
  background: #eef2ff;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .08);
}
body:not(.logged-in) .auth-method:hover,
body:not(.logged-in) .register-method:hover { border-color: #a5b4fc; }
body:not(.logged-in) .auth-card label {
  margin-bottom: 7px;
  color: #344057;
  font-size: .88rem;
  font-weight: 650;
  text-shadow: none;
}
body:not(.logged-in) .auth-card .input-icon-wrap > i {
  color: #8792a8;
}
body:not(.logged-in) .auth-card .input-icon-wrap:focus-within > i { color: var(--auth-accent); }
body:not(.logged-in) .auth-card .form-input,
body:not(.logged-in) .auth-card input.form-input {
  min-height: 50px;
  margin: 0 0 16px;
  padding: 12px 14px 12px 44px;
  border: 1px solid var(--auth-border);
  border-radius: 11px;
  background: var(--auth-field);
  color: var(--auth-ink);
  font-size: 16px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body:not(.logged-in) .auth-card input.form-input::placeholder { color: #8b95a8; opacity: 1; }
body:not(.logged-in) .auth-card input.form-input:-webkit-autofill,
body:not(.logged-in) .auth-card input.form-input:-webkit-autofill:hover,
body:not(.logged-in) .auth-card input.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field) inset;
  caret-color: var(--auth-ink);
}
body:not(.logged-in) .auth-card .form-input:focus,
body:not(.logged-in) .auth-card input.form-input:focus {
  border-color: #818cf8;
  background: #fff;
  color: var(--auth-ink);
  box-shadow: 0 0 0 4px var(--auth-ring);
}
body:not(.logged-in) .auth-card .btn-primary {
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
  font-size: .98rem;
  box-shadow: 0 8px 18px rgba(79, 70, 229, .22);
}
body:not(.logged-in) .auth-card .btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #4338ca, #3730a3);
  box-shadow: 0 10px 22px rgba(79, 70, 229, .28);
}
body:not(.logged-in) .auth-card .btn-primary:focus-visible,
body:not(.logged-in) .auth-card button:focus-visible,
body:not(.logged-in) .theme-toggle:focus-visible {
  outline: 3px solid rgba(79, 70, 229, .4);
  outline-offset: 3px;
}
body:not(.logged-in) .auth-card .btn {
  min-height: 46px;
  margin: 0 0 16px;
  padding: 10px 13px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #3730a3;
  box-shadow: none;
  font-size: .82rem;
}
body:not(.logged-in) .auth-footer {
  margin-top: 18px;
  color: #7b8498;
  font-size: .78rem;
  text-shadow: none;
}
body:not(.logged-in) .theme-toggle {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid #dce3ef;
  background: rgba(255, 255, 255, .88);
  color: #4b556b;
  box-shadow: 0 4px 14px rgba(31, 41, 78, .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not(.logged-in) #authMsg:empty { display: none; }
body:not(.logged-in) #authMsg .msg-box {
  margin: 0 0 16px;
  border-radius: 11px;
  background: #fef2f2;
  color: #b42318;
  border: 1px solid #fecaca;
  text-shadow: none;
}
body:not(.logged-in) #authMsg .msg-success {
  background: #ecfdf3;
  color: #067647;
  border-color: #abefc6;
}
body:not(.logged-in) .auth-switch {
  margin: 16px 0 0;
  color: var(--auth-muted);
  text-align: center;
  font-size: .82rem;
  line-height: 1.5;
}
body:not(.logged-in) .auth-switch button {
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--auth-accent);
  font: inherit;
  font-weight: 650;
  font-size: .82rem;
  cursor: pointer;
}
body:not(.logged-in) .auth-switch button:hover { text-decoration: underline; }
@media (max-width: 520px) {
  body:not(.logged-in) .auth-wrapper { padding: 64px 16px 22px; align-items: flex-start; }
  body:not(.logged-in) .auth-container { margin: auto 0; }
  body:not(.logged-in) .auth-brand { margin-bottom: 18px; }
  body:not(.logged-in) .auth-brand-icon { width: 52px; height: 52px; border-radius: 16px; }
  body:not(.logged-in) .auth-brand h1 { font-size: 1.35rem; }
  body:not(.logged-in) .auth-card { padding: 22px 18px; border-radius: 18px; }
  body:not(.logged-in) .auth-tabs { margin-bottom: 18px; }
  body:not(.logged-in) .auth-method,
  body:not(.logged-in) .register-method { min-height: 48px; padding-inline: 8px; font-size: .79rem; }
  body:not(.logged-in) .theme-toggle { top: 12px; right: 12px; }
}
@media (max-width: 360px) {
  body:not(.logged-in) .auth-wrapper { padding-inline: 12px; }
  body:not(.logged-in) .auth-card { padding-inline: 14px; }
  body:not(.logged-in) .auth-method,
  body:not(.logged-in) .register-method { font-size: .74rem; }
}

body[data-theme="dark"]:not(.logged-in) {
  --auth-ink: #eef2ff;
  --auth-muted: #aab5ce;
  --auth-border: #39445c;
  --auth-surface: #171e2e;
  --auth-field: #111827;
  --auth-accent: #a5b4fc;
  --auth-accent-hover: #c7d2fe;
  --auth-ring: rgba(129, 140, 248, .24);
  background: #0f1421;
}
body[data-theme="dark"]:not(.logged-in) .auth-wrapper {
  background:
    radial-gradient(ellipse at 12% 4%, rgba(49, 46, 129, .38), transparent 38%),
    radial-gradient(ellipse at 92% 96%, rgba(76, 29, 149, .24), transparent 35%),
    #0f1421;
}
body[data-theme="dark"]:not(.logged-in) .auth-card {
  border-color: #2b3549;
  background: var(--auth-surface);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .14);
}
body[data-theme="dark"]:not(.logged-in) .auth-brand,
body[data-theme="dark"]:not(.logged-in) .auth-brand h1 { color: var(--auth-ink); }
body[data-theme="dark"]:not(.logged-in) .auth-brand p,
body[data-theme="dark"]:not(.logged-in) .auth-footer { color: var(--auth-muted); }
body[data-theme="dark"]:not(.logged-in) .auth-tabs { background: #111827; }
body[data-theme="dark"]:not(.logged-in) .auth-tab { color: #aab5ce; }
body[data-theme="dark"]:not(.logged-in) .auth-tab.active {
  background: #263149;
  color: #e0e7ff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
body[data-theme="dark"]:not(.logged-in) .auth-method,
body[data-theme="dark"]:not(.logged-in) .register-method {
  border-color: #39445c;
  background: #1d2638;
  color: #c2cbe0;
}
body[data-theme="dark"]:not(.logged-in) .auth-method.active,
body[data-theme="dark"]:not(.logged-in) .register-method.active {
  border-color: #6979c8;
  background: #282f52;
  color: #e0e7ff;
}
body[data-theme="dark"]:not(.logged-in) .auth-card label { color: #dbe3f5; }
body[data-theme="dark"]:not(.logged-in) .auth-card .input-icon-wrap > i { color: #8f9bb3; }
body[data-theme="dark"]:not(.logged-in) .auth-card .input-icon-wrap:focus-within > i { color: #a5b4fc; }
body[data-theme="dark"]:not(.logged-in) .auth-card .form-input,
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input {
  border-color: #39445c;
  background: #111827 !important;
  color: #f3f4f6;
  -webkit-text-fill-color: #f3f4f6;
}
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input::placeholder { color: #8792a8; }
body[data-theme="dark"]:not(.logged-in) .auth-card .form-input:focus,
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input:focus {
  border-color: #818cf8;
  background: #151d2d !important;
  color: #f3f4f6;
  -webkit-text-fill-color: #f3f4f6;
}
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input:-webkit-autofill,
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input:-webkit-autofill:hover,
body[data-theme="dark"]:not(.logged-in) .auth-card input.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f3f4f6;
  -webkit-box-shadow: 0 0 0 1000px #111827 inset;
  caret-color: #f3f4f6;
}
body[data-theme="dark"]:not(.logged-in) .auth-card .btn { background: #282f52; color: #dbe3ff; border-color: #48558b; }
body[data-theme="dark"]:not(.logged-in) .theme-toggle {
  border-color: #39445c;
  background: #1d2638;
  color: #e0e7ff;
}
body[data-theme="dark"]:not(.logged-in) #authMsg .msg-box { background: #3b2027; color: #fecaca; border-color: #71323f; }
body[data-theme="dark"]:not(.logged-in) #authMsg .msg-success { background: #15352a; color: #a7f3d0; border-color: #24634c; }

@media (prefers-reduced-motion: reduce) {
  body:not(.logged-in) *, body:not(.logged-in) *::before, body:not(.logged-in) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}