:root { --border: #d8dbe0; --bg: #ffffff; --bg-alt: #f5f6f8; --text: #1c1e21; --accent: #2563eb; --error: #d93025; }
@media (prefers-color-scheme: dark) {
  :root { --border: #33363b; --bg: #1b1c1e; --bg-alt: #232427; --text: #e7e7e8; --accent: #6ea8ff; --error: #ff8a80; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg-alt); color: var(--text);
}
#login-form {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
h1 { margin: 0 0 4px; font-size: 20px; text-align: center; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; opacity: .85; }
input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
button {
  padding: 10px; border: none; border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px;
}
button:hover { opacity: .92; }
#login-error { color: var(--error); font-size: 13px; }
.hidden { display: none !important; }