:root {
  --bg: oklch(0.16 0.028 28);
  --ink: oklch(0.93 0.015 85);
  --mute: oklch(0.72 0.03 70);
  --amber: oklch(0.78 0.13 75);
  --line: oklch(0.32 0.04 28);
  --panel: oklch(0.20 0.03 28);
  --danger: oklch(0.72 0.16 25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif;
}
a { color: var(--amber); text-decoration: none; }
h1, h2 { font-family: "Noto Serif SC", serif; font-weight: 700; }
input, select, textarea, button {
  font: inherit;
  color: var(--ink);
  background: oklch(0.22 0.03 28);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}
button {
  background: var(--amber);
  color: oklch(0.18 0.03 28);
  font-weight: 600;
  cursor: pointer;
  border: 0;
}
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.err { color: var(--danger); font-size: 0.9rem; }
.ok { color: var(--amber); }
.mute { color: var(--mute); }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
}