:root {
  --green: #2e7d32;
  --border: #d8d8d8;
  --muted: #666;
  --bg-soft: #f6f8f6;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0 auto;
  max-width: 860px;
  padding: 16px;
  color: #222;
}
header h1 { margin: 4px 0; font-size: 1.6rem; }
.tagline { color: var(--muted); margin: 0 0 12px; }

#tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#tabs button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.95rem;
  cursor: pointer;
}
#tabs button.active { background: var(--green); border-color: var(--green); color: #fff; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.toolbar input[type="search"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}
button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.95rem;
  cursor: pointer;
}
button:hover { background: var(--bg-soft); }
button.subtle { margin-top: 10px; color: var(--muted); }
button.danger { color: #b3261e; border-color: #e3b3b0; }

.card-list { display: grid; gap: 8px; }
.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
}
.card:hover { background: var(--bg-soft); }
.card .row { display: flex; align-items: baseline; gap: 8px; }
.card .name { font-weight: 600; }
.card .meta { color: var(--muted); font-size: 0.88rem; }
.card .note { color: #444; font-size: 0.92rem; margin-top: 4px; white-space: pre-wrap; }
.card.done .name { text-decoration: line-through; color: var(--muted); }

.badge {
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.on-hand { background: #e6f4ea; border-color: #a8dab5; }
.badge.low { background: #fef7e0; border-color: #f2d38a; }
.badge.out { background: #fce8e6; border-color: #f0b3ae; }

.category-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 0 2px;
}
.empty { color: var(--muted); padding: 18px 4px; }

dialog { border: 1px solid var(--border); border-radius: 12px; max-width: 520px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0,0,0,0.35); }
#editor-form label { display: block; font-size: 0.9rem; margin: 10px 0 4px; color: #333; }
#editor-form input[type="text"], #editor-form select, #editor-form textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
#editor-form textarea { min-height: 90px; }
.editor-actions { display: flex; gap: 8px; margin-top: 16px; }
.editor-actions .spacer { flex: 1; }
#editor-save { background: var(--green); border-color: var(--green); color: #fff; }

.status { color: var(--muted); font-size: 0.85rem; min-height: 1.2em; }
.check { width: 20px; height: 20px; flex: none; align-self: center; }