/* Sign-in / new-password screen (main app and admin panel). Self-contained: does not rely on app.css or admin.css. */
#authScreen {
  --a-bg: #0e1116; --a-card: #161b22; --a-text: #e6eaf0; --a-muted: #9aa4b2; --a-border: #2a323d; --a-accent: #f2a93b; --a-accent-2: #e8962a;
  --a-focus: rgba(242,169,59,.22); --a-err: #ff8466; --a-err-bg: #33170f; --a-warn: #f0b252; --a-warn-bg: #2d2212;
  --a-input: #0e1116; --a-ink: #0e1116; --a-grid: rgba(255,255,255,.025); --a-glow: rgba(242,169,59,.10); --a-glow-2: rgba(45,212,191,.08);
  --a-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background-color: var(--a-bg);
  background-image: linear-gradient(var(--a-grid) 1px, transparent 1px), linear-gradient(90deg, var(--a-grid) 1px, transparent 1px),
    radial-gradient(900px 500px at 20% 10%, var(--a-glow), transparent 60%), radial-gradient(800px 500px at 85% 90%, var(--a-glow-2), transparent 55%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--a-text);
  -webkit-font-smoothing: antialiased;
}
/* Light theme (js/theme.js). */
:root[data-theme="light"] #authScreen {
  --a-bg: #eef1f5; --a-card: #ffffff; --a-text: #1b2330; --a-muted: #5b6676; --a-border: #d5dbe3; --a-accent: #e39a2c; --a-accent-2: #c97a0a;
  --a-focus: rgba(201,122,10,.18); --a-err: #b42318; --a-err-bg: #fdecea; --a-warn: #9a6200; --a-warn-bg: #fff4dc;
  --a-input: #f7f9fb; --a-grid: rgba(16,24,40,.045); --a-glow: rgba(242,169,59,.16); --a-glow-2: rgba(45,212,191,.10);
  --a-shadow: 0 30px 60px -24px rgba(16,24,40,.28), 0 0 0 1px rgba(16,24,40,.04);
  color-scheme: light;
}
#authScreen * { box-sizing: border-box; }
#authScreen .auth-card {
  width: 400px; max-width: 100%; background: var(--a-card); border-radius: 12px; padding: 30px 30px 24px; border: 1px solid var(--a-border);
  box-shadow: var(--a-shadow); display: flex; flex-direction: column; gap: 14px;
  animation: authIn .25s ease-out;
}
@keyframes authIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
#authScreen .auth-logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #f2a93b, #c27a12); display: grid; place-items: center; color: var(--a-ink); margin-bottom: 4px; }
#authScreen .auth-logo svg { width: 26px; height: 26px; }
#authScreen .auth-title { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
#authScreen .auth-sub { color: var(--a-muted); margin-top: -8px; margin-bottom: 4px; }
#authScreen label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--a-muted); }
#authScreen input {
  font: inherit; font-size: 14.5px; color: var(--a-text); background: var(--a-input); padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--a-border); outline: none; transition: border-color .12s, box-shadow .12s; width: 100%;
}
#authScreen input:focus { border-color: var(--a-accent); box-shadow: 0 0 0 4px var(--a-focus); }
#authScreen input:disabled { opacity: .6; }
#authScreen .auth-pw { position: relative; }
#authScreen .auth-pw input { padding-right: 44px; }
#authScreen .auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--a-muted); padding: 6px; border-radius: 7px; cursor: pointer; display: grid; }
#authScreen .auth-eye:hover { color: var(--a-text); }
#authScreen .auth-eye svg { width: 18px; height: 18px; }
#authScreen button[type=submit] {
  font: inherit; font-size: 14.5px; font-weight: 650; color: var(--a-ink); border: 0; border-radius: 10px; padding: 12px; cursor: pointer; margin-top: 4px;
  background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); box-shadow: 0 8px 20px -8px var(--a-accent); transition: filter .12s, transform .05s;
}
#authScreen button[type=submit]:hover { filter: brightness(1.08); }
#authScreen button[type=submit]:active { transform: translateY(1px); }
#authScreen button[type=submit]:disabled { opacity: .6; cursor: default; }
#authScreen .auth-msg { font-size: 13px; white-space: pre-wrap; }
#authScreen .auth-msg:empty { display: none; }
#authScreen .auth-msg.error { color: var(--a-err); background: var(--a-err-bg); padding: 10px 12px; border-radius: 10px; }
#authScreen .auth-msg.warn { color: var(--a-warn); background: var(--a-warn-bg); padding: 10px 12px; border-radius: 10px; }
#authScreen .auth-note { color: var(--a-muted); font-size: 12px; display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid var(--a-border); padding-top: 14px; margin-top: 2px; }
#authScreen .auth-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
#authScreen .auth-rules { color: var(--a-muted); font-size: 12px; margin-top: -6px; }
#authScreen .auth-lang { display: flex; gap: 4px; align-self: flex-end; margin: -14px -14px -18px 0; }
#authScreen .auth-lang button { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; color: var(--a-muted); background: transparent; border: 1px solid var(--a-border); border-radius: 6px; padding: 5px 7px; cursor: pointer; }
#authScreen .auth-lang button:hover { color: var(--a-text); }
#authScreen .auth-theme { display: grid; place-items: center; margin-left: 6px; padding: 4px 6px !important; }
#authScreen .auth-theme svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#authScreen .auth-theme .moon, :root[data-theme="light"] #authScreen .auth-theme .sun { display: none; }
:root[data-theme="light"] #authScreen .auth-theme .moon { display: block; }
#authScreen .auth-lang button.active { color: var(--a-ink); background: var(--a-accent); border-color: var(--a-accent); }