:root {
  --bg: #0a0a0c;
  --card: #16161d;
  --border: #2a2a35;
  --fg: #f5f5f7;
  --dim: #8a8a93;
  --accent: #4ade80;
  --danger: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

body {
  padding: 16px 16px 64px;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

scoreboard-preview { width: 100%; }

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-card h1 { font-size: 1.2rem; font-weight: 700; }
.login-card .hint { color: var(--dim); font-size: 0.9rem; }
.login-card .error {
  color: var(--danger);
  font-size: 0.9rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-card label {
  font-size: 0.85rem;
  color: var(--dim);
}

.login-card input[type="password"] {
  background: #0a0a0c;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.login-card input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
}

.login-card button {
  margin-top: 8px;
  background: var(--accent);
  color: #0a0a0c;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}