:root {
  --bg: #f7f8f5;
  --fg: #1c2b1e;
  --accent: #2f7d4f;
  --card: #ffffff;
  --border: #dbe3dc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14201a;
    --fg: #e8f0e9;
    --accent: #6fcf97;
    --card: #1c2b22;
    --border: #2c3d31;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
header, footer { padding: 1.2rem 1.5rem; text-align: center; }
header h1 { margin: 0 0 0.25rem; color: var(--accent); }
.tagline { margin: 0; opacity: 0.8; }
main { max-width: 640px; margin: 0 auto; padding: 0 1rem 2rem; }
section#auth-panel, .tab {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
}
form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
input, select, button {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 1rem;
}
button { background: var(--accent); color: white; border: none; cursor: pointer; }
button:hover { opacity: 0.9; }
.optin { font-size: 0.85rem; display: flex; gap: 0.5rem; align-items: flex-start; }
nav { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
nav button { flex: 1; background: var(--border); color: var(--fg); }
nav button.active { background: var(--accent); color: white; }
.note { opacity: 0.75; font-size: 0.9rem; }
footer { opacity: 0.6; font-size: 0.85rem; }