:root {
  --bg: #f5f6f8; --fg: #1b1f24; --muted: #5f6b7a; --card: #ffffff; --border: #d5dae1;
  --primary: #1f6feb; --primary-fg: #ffffff; --danger: #c62828; --danger-fg: #ffffff;
  --toast: #1b1f24; --toast-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a; --fg: #e8eaed; --muted: #9aa5b4; --card: #1c2128; --border: #353c46;
    --primary: #4c8dff; --primary-fg: #0b1220; --danger: #ef5350; --danger-fg: #1a0505;
    --toast: #e8eaed; --toast-fg: #12151a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; overflow-x: hidden;
}
.page { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 0; }
a { color: var(--primary); }
.btn, button, input, select, textarea { font: inherit; min-height: 48px; }
input, select, textarea {
  width: 100%; padding: 8px 12px; color: var(--fg); background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
}
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--fg); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-danger { background: var(--danger); color: var(--danger-fg); border-color: var(--danger); }
@media (max-width: 600px) { .btn, button { width: 100%; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.875rem; background: var(--border); color: var(--fg); }
.muted { color: var(--muted); margin: 0; }
.error { color: var(--danger); margin: 0; min-height: 1.5em; }
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 10px;
  background: var(--toast); color: var(--toast-fg); text-align: center; z-index: 100;
}