/* Sign-in / new-password screen (main app and admin panel). Self-contained: does not rely on app.css or admin.css. */
#authScreen {
  --a-bg: #0f1226; --a-card: #ffffff; --a-text: #171b26; --a-muted: #667085; --a-border: #d3d8e4; --a-accent: #4f46e5; --a-accent-2: #6366f1;
  --a-focus: rgba(79,70,229,.18); --a-err: #c4320a; --a-err-bg: #fff0eb; --a-warn: #8a5300; --a-warn-bg: #fff4e0;
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: radial-gradient(1200px 600px at 15% 10%, #3b3fd8 0%, transparent 60%), radial-gradient(900px 500px at 90% 90%, #0ea5e9 0%, transparent 55%), var(--a-bg);
  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;
}
@media (prefers-color-scheme: dark) {
  #authScreen { --a-card: #151a24; --a-text: #e8eaf1; --a-muted: #9aa3b5; --a-border: #323a4c; --a-accent: #7c7ff5; --a-accent-2: #8f92ff;
    --a-focus: rgba(124,127,245,.25); --a-err: #ff8466; --a-err-bg: #33170f; --a-warn: #f0b252; --a-warn-bg: #2d2212; }
}
#authScreen * { box-sizing: border-box; }
#authScreen .auth-card {
  width: 400px; max-width: 100%; background: var(--a-card); border-radius: 18px; padding: 32px 32px 26px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); 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, #6366f1, #22d3ee); display: grid; place-items: center; color: #fff; 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: transparent; 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: #fff; 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; }