:root {
  --bg: #f6f4ef; --card: #fff; --ink: #1d1d1b; --muted: #55524b; --line: #c9c5ba;
  --accent: #0b5cad; --accent-ink: #fff; --ok: #14663a; --warn: #8a4b00; --err: #a31515;
  --up: #a31515; --down: #14663a; --tap: 48px;
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); padding-bottom: env(safe-area-inset-bottom); }
main, .notice, .topbar { max-width: 40rem; margin-inline: auto; }
main { padding: 0 1rem 3rem; }
h1 { font-size: 1.4rem; margin: 0; flex: 1; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: .75rem 0 .25rem; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.tabs { display: flex; gap: .5rem; }
.tab, .chip, .btn, .link-button, .check { font: inherit; cursor: pointer; min-height: var(--tap); }
.tab, .chip { padding: 0 1rem; border: 2px solid var(--accent); background: var(--card); color: var(--accent); border-radius: 999px; font-weight: 600; }
.tab[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.link-button { background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 0 .5rem; }
.btn { padding: .5rem 1.1rem; border-radius: .6rem; border: 2px solid var(--accent); background: var(--card); color: var(--accent); font-weight: 600; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-danger { border-color: var(--err); color: var(--err); }
.btn-wide { width: 100%; margin-top: 1.5rem; }
.btn-small { min-width: var(--tap); padding: .25rem .8rem; }
.btn-icon { width: var(--tap); padding: 0; font-size: 1.3rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
input, select { font: inherit; width: 100%; min-height: var(--tap); padding: .4rem .7rem; border: 2px solid var(--muted); border-radius: .6rem; background: #fff; color: var(--ink); }
label { display: block; font-weight: 600; margin: .6rem 0 .2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; margin: 1rem 0; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.stack { margin-top: 1rem; }
.notice { padding: .75rem 1rem; margin-block: .25rem; border-radius: .6rem; font-weight: 600; background: #e8eef7; color: #0a2f57; }
.notice[hidden] { display: none; }
.notice-ok { background: #e2f1e8; color: #0d4a29; } .notice-warn { background: #fdf0d9; color: #6b3a00; } .notice-error { background: #fbe3e3; color: #7d1010; }
.progress { margin: 1rem 0 .5rem; } progress { display: block; width: 100%; height: .8rem; margin-top: .3rem; }
.add-form { display: grid; grid-template-columns: 1fr 4.5rem; gap: .5rem; margin: .75rem 0; }
.add-form .btn { grid-column: 1 / -1; }
.filters { display: flex; gap: .5rem; margin: .75rem 0; }
.group-title { margin-top: 1.25rem; padding-bottom: .25rem; border-bottom: 2px solid var(--line); }
.count { color: var(--muted); font-weight: 400; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.item-main { flex: 1; min-width: 10rem; }
.item-name { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.qty { font-weight: 400; color: var(--muted); }
.is-done .item-name { text-decoration: line-through; color: var(--muted); }
.check { width: 52px; height: 52px; flex: none; border: 3px solid var(--accent); border-radius: .6rem; background: #fff; color: var(--accent-ink); font-size: 1.8rem; line-height: 1; }
.is-done .check { background: var(--ok); border-color: var(--ok); }
.note { color: var(--muted); font-size: .95rem; white-space: pre-line; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: #1d1d1b; color: #fff; font-size: .85rem; font-weight: 600; margin-left: .35rem; }
.meta .badge { margin-left: 0; }
.badge-quiet { background: #e4e0d5; color: #2b2a27; }
.price { font-size: .95rem; margin-top: .2rem; color: var(--muted); }
.price-up .price-change { color: var(--up); } .price-down .price-change { color: var(--down); }
.item-actions { display: flex; gap: .5rem; width: 100%; justify-content: flex-end; }
.edit-form { width: 100%; }
.dups { display: grid; gap: .5rem; } .dup { border: 2px solid var(--line); border-radius: .6rem; padding: .5rem .75rem; }
.duplicate { border: 3px solid var(--warn); }
.empty { color: var(--muted); padding: 1rem 0; }
.warning { color: var(--err); font-weight: 600; }
.token-box { border: 3px solid var(--err); }
.token-box input { font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.user, .job, .key, .cat { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.keys, .jobs, .cats { list-style: none; margin: 0; padding: 0; }
.key, .job, .cat { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cats { counter-reset: c; } .cat > span:first-child::before { counter-increment: c; content: counter(c) ". "; color: var(--muted); }
@media (min-width: 40rem) { .item-actions { width: auto; } }