:root {
  color-scheme: light;
  --bg: #f8fafc;
  --fg: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #3b6cf6;
  --brand-600: #2f57d1;
  --emerald: #047857;
  --emerald-bg: #ecfdf5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 24px; padding: 12px 24px; }
.brand { font-weight: 600; color: var(--fg); text-decoration: none; }
.nav { display: flex; gap: 16px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--fg); }
.signout { margin-left: auto; }

.main { padding: 32px 24px; }
.footer { border-top: 1px solid var(--line); background: #fff; padding: 12px 24px; color: var(--muted); font-size: 12px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.card.center { max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; }
.card h1 { margin-top: 0; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary:hover { background: var(--brand-600); }
.btn-secondary {
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.form { margin-top: 16px; }