:root {
  --ink: #13221f;
  --muted: #5b6b67;
  --evergreen: #1e4a41;
  --evergreen-2: #2a6357;
  --evergreen-deep: #10302a;
  --brass: #b08a3e;
  --brass-soft: #f1e6cc;
  --mist: #eef3f1;
  --paper: #ffffff;
  --line: #d5dfdb;
  --ok: #2e7d4f;
  --ok-soft: #e3f2e8;
  --warn: #9a6512;
  --warn-soft: #fbefd9;
  --bad: #b23a2e;
  --bad-soft: #f8e3e0;
  --radius-lg: 18px;
  --radius: 10px;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--mist);
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.hidden { display: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius); padding: 12px 18px; font-weight: 600;
  background: var(--evergreen); color: #fff; min-height: 46px;
}
.btn:hover { background: var(--evergreen-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: var(--paper); color: var(--evergreen); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.secondary:hover { box-shadow: inset 0 0 0 1.5px var(--evergreen); }
.btn.danger { background: var(--paper); color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad-soft); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 15px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 11px 12px; background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--evergreen); outline: none; }
.msg { border-radius: var(--radius); padding: 12px 14px; font-weight: 500; }
.msg.bad { background: var(--bad-soft); color: var(--bad); }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }