/* Sign-in page. Self-contained: the gate serves this without a session, so it
   cannot rely on the chat app's stylesheet. */

:root {
  --bg: #0f1115;
  --bg-elev: #1c2027;
  --bg-hover: #232830;
  --line: #2a2f38;
  --line-soft: #22262e;
  --fg: #e9edf3;
  --fg-dim: #9aa4b2;
  --fg-mute: #6b7482;
  --accent: #4f7cff;
  --accent-hover: #6b91ff;
  --accent-ink: #fff;
  --danger: #e5534b;
  --success: #2ea043;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --dur: 160ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 6px 24px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff; --bg-elev: #fff; --bg-hover: #eef0f4; --line: #dfe3ea;
    --line-soft: #eaeef4; --fg: #14181f; --fg-dim: #5a6472; --fg-mute: #8a94a3;
    --shadow: 0 6px 24px rgba(16,24,40,.10);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.login-page {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent),
    var(--bg);
}

.login-card {
  width: 100%; max-width: 404px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 32px 30px;
}
.logo { display: grid; place-items: center; margin-bottom: 18px; }
.logo svg { width: 48px; height: 48px; color: var(--accent); }
h1 { margin: 0 0 6px; font-size: 21px; font-weight: 640; text-align: center; }
.sub { margin: 0 0 24px; text-align: center; color: var(--fg-dim); font-size: 13.5px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.field input {
  width: 100%; padding: 9px 12px; font: inherit; color: inherit;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus { border-color: var(--accent); outline: none; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--fg-mute);
  font: inherit; font-size: 11.5px; padding: 5px 9px; border-radius: 6px; cursor: pointer;
}
.pw-toggle:hover { color: var(--fg); background: var(--bg-hover); }

.notice {
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: 13px; margin-bottom: 16px; line-height: 1.45;
}
.notice.err { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid var(--danger); }
.notice.ok  { background: color-mix(in srgb, var(--success) 14%, transparent); border: 1px solid var(--success); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 15px; font: inherit; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn:hover:not([disabled]) { background: var(--accent-hover); }
.btn[disabled] { opacity: .65; cursor: not-allowed; }

.login-foot {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--fg-mute); line-height: 1.6;
}

.spinner {
  width: 14px; height: 14px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}