:root {
  --ink: #17200f;
  --ink-2: #4a5742;
  --ink-3: #78856f;
  --line: #dde3d6;
  --surface: #ffffff;
  --page: #f4f6f0;
  --brand: #386a20;
  --brand-hover: #2f5b1a;
  --brand-soft: #e6f2da;
  --accent: var(--brand);
  --ok: #1f7a34;
  --ok-soft: #e3f3e5;
  --no: #b9281c;
  --no-soft: #fcebe9;
  --warn: #a35400;
  --warn-soft: #fff2de;
  --info: #1c5aa6;
  --info-soft: #e6effb;
  --radius: 16px;
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(56, 106, 32, .35); outline-offset: 2px; }

.mark { width: 36px; height: 36px; flex: none; display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: #c7d0bf; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(23, 32, 15, .05); }

.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field input, .field select {
  min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); font-weight: 400;
  border-radius: 12px; background: var(--surface); color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(56, 106, 32, .15);
}

.dot { width: 10px; height: 10px; border-radius: 50%; background: #4f9330; flex: none; box-shadow: 0 0 0 3px rgba(79, 147, 48, .18); }
.dot.bad { background: var(--no); box-shadow: 0 0 0 3px rgba(185, 40, 28, .18); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-3); font-size: 13px; white-space: nowrap; background: #f8faf5; }
tbody tr:hover td { background: #f8faf5; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { white-space: normal; min-width: 76px; }
tr.total td { font-weight: 700; border-bottom: none; }
tr.voided td { color: var(--ink-3); text-decoration: line-through; }
tr.voided td.keep { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}