:root { --bg:#f6f5f1; --card:#fff; --ink:#1d1d1b; --muted:#6b6b66; --line:#e4e2db; --accent:#1f6f5f; --accent-ink:#fff; --costco:#c8102e; --superstore:#d9a300; --done:#9a9a94; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141414; --card:#1e1e1e; --ink:#f0efe9; --muted:#9c9c96; --line:#2c2c2c; --done:#6a6a66; } }
:root[data-theme="dark"] { --bg:#141414; --card:#1e1e1e; --ink:#f0efe9; --muted:#9c9c96; --line:#2c2c2c; --done:#6a6a66; }
* { box-sizing:border-box } html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.4 -apple-system,system-ui,Segoe UI,Roboto,sans-serif; -webkit-tap-highlight-color:transparent }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,select { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100% }
.wrap { max-width:640px; margin:0 auto; padding:0 14px calc(90px + env(safe-area-inset-bottom)) }
header { position:sticky; top:0; z-index:5; background:var(--bg); padding:calc(10px + env(safe-area-inset-top)) 0 8px; border-bottom:1px solid var(--line) }
header h1 { margin:0; font-size:1.05rem; display:flex; justify-content:space-between; align-items:baseline; gap:8px }
header h1 small { color:var(--muted); font-weight:500; font-size:.85rem }
.status { font-size:.85rem; color:var(--muted); margin-top:2px }
.status.warn { color:#b5541c }
nav.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); z-index:5 }
nav.tabs button { flex:1; padding:12px 4px 10px; font-size:.78rem; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px }
nav.tabs button .n { font-size:1.05rem; font-weight:700; color:var(--ink) } nav.tabs button.on { color:var(--accent) } nav.tabs button.on .n { color:var(--accent) }
h2.zone { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 6px 4px }
ul.items { list-style:none; margin:0; padding:0; background:var(--card); border-radius:14px; overflow:hidden; border:1px solid var(--line) }
li.item { display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; border-bottom:1px solid var(--line); min-height:52px } li.item:last-child { border-bottom:0 }
li.item .box { width:24px; height:24px; border-radius:8px; border:2px solid var(--muted); flex:none; display:grid; place-items:center; color:var(--accent-ink) }
li.item.done .box { background:var(--accent); border-color:var(--accent) } li.item .box svg { display:none } li.item.done .box svg { display:block }
li.item .txt { flex:1; min-width:0 } li.item.done .txt { color:var(--done); text-decoration:line-through }
li.item .qty { color:var(--muted); font-size:.9rem } li.item .qty s { opacity:.6; margin-left:6px }
li.item .move { flex:none; font-size:.68rem; font-weight:600; padding:5px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap }
li.item .move:active { background:var(--line) }
.empty { text-align:center; color:var(--muted); padding:40px 10px }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:14px } .card h3 { margin:0 0 10px; font-size:.95rem }
.row { display:flex; gap:8px; align-items:center; margin-top:8px } .row > * { flex:1 } .row .sm { flex:0 0 auto }
.btn { background:var(--accent); color:var(--accent-ink); border-radius:10px; padding:10px 14px; font-weight:600; text-align:center } .btn.ghost { background:none; border:1px solid var(--line); color:var(--ink) } .btn.danger { background:#b5541c }
.pill { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--muted) } .pill.costco { color:#fff; background:var(--costco) } .pill.superstore { color:#111; background:var(--superstore) }
.login { max-width:340px; margin:25vh auto 0; text-align:center } .login input { text-align:center; font-size:1.6rem; letter-spacing:.3em }
.err { color:#b5541c; font-size:.9rem; margin-top:8px }
p.hint { color:var(--muted); font-size:.85rem; margin:8px 4px 0 }
.progress { height:4px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden } .progress i { display:block; height:100%; background:var(--accent); transition:width .2s }

li.item .more { flex:none; width:32px; height:36px; margin-left:-6px; border-radius:10px; font-size:1.2rem; color:var(--muted); line-height:1 } li.item.open .more, li.item .more:active { background:var(--line); color:var(--ink) }
li.menu { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px 12px 50px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--accent) 7%, var(--card)) }
li.menu label { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); flex:1 1 100% } li.menu select { flex:1; padding:8px 10px }
li.menu .btn.sm { flex:1 1 auto; padding:8px 10px; font-size:.85rem }
h2.zone.done-head { color:var(--done) } ul.done-list { opacity:.7 }
.row.seg .btn.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }