/* ---------- Buttons, inputs ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 7px 13px; font-weight: 500; font-size: 13px; line-height: 1.25;
  box-shadow: var(--shadow); white-space: nowrap; min-height: 34px;
}
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-outline { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--ink-2); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; min-height: 28px; }
.input, .select, textarea.input {
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px; min-height: 36px; width: 100%;
}
.input:focus, .select:focus, .btn:focus-visible, .stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.field { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
label.field .hint { font-weight: 400; color: var(--muted); }