/* Login, setup and account pages. */
:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --line: #dde2ea;
  --text: #172033;
  --muted: #5f6b80;
  --primary: #2459d6;
  --primary-text: #ffffff;
  --danger: #c2333f;
  --ok: #1f8a4c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #131c2f;
    --line: #2a3650;
    --text: #e8edf6;
    --muted: #97a3ba;
    --primary: #5b8cff;
    --primary-text: #0b1220;
    --danger: #ff6b76;
    --ok: #4ade80;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.panel {
  width: min(24rem, 100%);
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

h1 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.sub { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.95rem; }
.sub.foot { margin: 1.2rem 0 0; }

form { display: flex; flex-direction: column; gap: 0.9rem; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

input {
  font: inherit;
  color: var(--text);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  background: var(--primary);
  color: var(--primary-text);
}

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

button:disabled { opacity: 0.6; cursor: default; }

.error { margin: 0; color: var(--danger); font-weight: 600; }
.ok { margin: 0; color: var(--ok); font-weight: 600; }
.notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--primary);
  font-size: 0.95rem;
}

.links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: 0.95rem; }
.links a { color: var(--primary); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }