:root {
  --bg: #fbfaf7;
  --fg: #1f2328;
  --muted: #5b636d;
  --accent: #0b6e8a;
  --accent-fg: #ffffff;
  --border: #d6d3cc;
  --alert-bg: #fdecea;
  --alert-fg: #8a1c12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --fg: #e6e8eb;
    --muted: #9aa3ad;
    --accent: #4fb3cf;
    --accent-fg: #0b1215;
    --border: #3a3f46;
    --alert-bg: #3b1d1a;
    --alert-fg: #f4b7ae;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
.container { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .25rem; color: var(--muted); }
input {
  font-size: 1rem; /* iOS のズーム防止 */
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: transparent;
  color: var(--fg);
}
button {
  font-size: 1rem;
  min-height: 3rem;
  padding: .7rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--accent);
  color: var(--accent-fg);
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.alert { background: var(--alert-bg); color: var(--alert-fg); padding: .7rem .8rem; border-radius: .5rem; }