:root {
  --bg: #f6f4ef; --surface: #ffffff; --ink: #1c1b19; --muted: #6b675f;
  --line: #e4e0d6; --accent: #2f5d50; --accent-ink: #ffffff; --accent-soft: #e3eee9;
  --danger: #b3412f; --warn: #a8741a; --ok: #2f6b3f; --radius: 14px;
  --shadow: 0 1px 2px rgba(28,27,25,.06), 0 8px 24px rgba(28,27,25,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f; --surface: #1d1c17; --ink: #f0ede4; --muted: #9b968a;
    --line: #2e2c25; --accent: #7fc2ad; --accent-ink: #0f1a16; --accent-soft: #1f2e29;
    --danger: #e07a66; --warn: #d9a441; --ok: #7fc28f; --shadow: 0 8px 24px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: ui-serif, Georgia, "Times New Roman", serif; letter-spacing: -.01em; margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn {
  display: inline-block; color: var(--ink); text-decoration: none; font-size: 1rem; line-height: inherit;
  border: 1px solid var(--line); background: var(--surface); padding: .55rem 1rem;
  border-radius: 10px; cursor: pointer; transition: transform .08s, background .15s;
}
.btn:hover { background: var(--accent-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.field {
  width: 100%; padding: .7rem .85rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }