:root {
  --paper: #f7f4ec;
  --card: #ffffff;
  --ink: #16241d;
  --muted: #5b6a62;
  --line: #e2ddd0;
  --brand: #1f5c46;
  --brand-ink: #ffffff;
  --accent: #e0a526;
  --warn: #b4491f;
  --pulse: #e8650a;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: Fraunces, Georgia, serif; letter-spacing: -0.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }
.link { text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--brand); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: 0 1.25rem; border-radius: 10px; font-weight: 600; transition: transform .15s, background-color .15s, box-shadow .15s; cursor: pointer; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: #17493a; }
.btn-ghost { border: 1px solid var(--line); background: var(--card); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-accent { background: var(--accent); color: #2a1f00; }
.btn-accent:hover { background: #efb83d; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.field { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0 .85rem; background: #fff; }

.meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .3s; }
.meter.full > i { background: var(--warn); }

.drop { border: 2px dashed var(--line); border-radius: 14px; transition: border-color .15s, background-color .15s; }
.drop.over { border-color: var(--brand); background: #eef5f0; }

.modal-back { position: fixed; inset: 0; background: rgba(22, 36, 29, .55); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal-back.open { display: flex; }

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

.pulse { color: var(--pulse); }