:root { --bg:#f4f7f6; --card:#fff; --ink:#14201e; --muted:#667873; --line:#e1e9e6; --soft:#edf3f1; --accent:#0d9488; --accent-ink:#fff;
  --ok:#0f9d6b; --ok-bg:#e0f5ec; --warn:#a96a00; --warn-bg:#fdf0cf; --bad:#d33b3b; --bad-bg:#fde6e6; --shadow:0 1px 2px rgba(10,30,25,.06),0 6px 22px rgba(10,30,25,.07); --r:14px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1514; --card:#18211f; --ink:#e9f1ee; --muted:#93a8a2; --line:#27332f; --soft:#212c29; --accent:#2dd4bf; --accent-ink:#06201c;
  --ok:#3ddc97; --ok-bg:#12312a; --warn:#f5c04a; --warn-bg:#3a2f12; --bad:#ff7b7b; --bad-bg:#3b1a1d; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px rgba(0,0,0,.3); } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } [hidden], [x-cloak] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
.wrap { max-width:640px; margin:0 auto; padding:0 16px; }
header.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; padding-top:env(safe-area-inset-top); }
header.top .wrap { display:flex; align-items:center; gap:4px; height:56px; }
h1 { margin:0 auto 0 0; font-size:21px; letter-spacing:-.02em; } h2 { margin:0; font-size:17px; }
.sub { color:var(--muted); font-weight:500; font-size:13px; margin-left:6px; }
button { font:inherit; color:inherit; }
.icon { appearance:none; border:0; background:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; color:var(--ink); font-size:18px; }
.icon:hover { background:var(--soft); } .icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon.more svg { fill:currentColor; stroke:none; width:22px; } .icon.more { color:var(--muted); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.btn { appearance:none; border:1px solid var(--line); background:var(--card); font-weight:650; min-height:48px; padding:0 20px; border-radius:var(--r); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn:disabled { opacity:.45; cursor:default; }
.btn.danger { color:var(--bad); } .btn.wide { width:100%; } .btn.small { min-height:34px; padding:0 12px; font-size:14px; }

.banner { margin:12px 0 0; padding:10px 14px; border-radius:12px; background:var(--warn-bg); color:var(--warn); font-size:14px; font-weight:550; } .banner.err { background:var(--bad-bg); color:var(--bad); }

.addwrap { position:relative; margin-top:14px; z-index:3; }
.addbar { display:flex; gap:8px; }
input[type=text], input[type=number], input[type=search] { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 14px; min-height:48px; min-width:0; width:100%; }
.addbar input { flex:1; box-shadow:var(--shadow); border-color:transparent; }
.suggest { position:absolute; left:0; right:0; top:54px; list-style:none; margin:0; padding:6px; background:var(--card); border-radius:var(--r); box-shadow:0 10px 36px rgba(0,0,0,.2); border:1px solid var(--line); max-height:55vh; overflow:auto; }
.suggest button { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; background:none; min-height:48px; padding:0 12px; border-radius:10px; cursor:pointer; font-weight:550; }
.suggest button:hover:not(:disabled) { background:var(--soft); } .suggest button:disabled { opacity:.5; } .suggest small { color:var(--muted); font-weight:500; }
.suggest .new { color:var(--accent); font-weight:650; }

.empty { text-align:center; color:var(--muted); padding:48px 12px; } .empty small { font-size:14px; }
.group h2 { font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:22px 4px 8px; }
.group.red h2 { color:var(--bad); } .group.yellow h2 { color:var(--warn); }
.rows { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.row { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); display:flex; align-items:center; gap:4px; padding:4px 4px 4px 0; border-left:5px solid transparent; }
.row.red { border-left-color:var(--bad); } .row.yellow { border-left-color:var(--warn); } .row.green { border-left-color:var(--ok); }
.tap { flex:1; min-width:0; display:flex; align-items:center; gap:14px; padding:8px 4px 8px 12px; min-height:56px; cursor:pointer; }
.check { appearance:none; flex:none; width:30px; height:30px; margin:0; border:2px solid var(--line); border-radius:9px; background:var(--card); cursor:pointer; display:grid; place-content:center; }
.check:checked { background:var(--accent); border-color:var(--accent); }
.check:checked::after { content:""; width:8px; height:15px; border:solid var(--accent-ink); border-width:0 3px 3px 0; transform:rotate(45deg) translate(-1px,-1px); }
.what { display:grid; min-width:0; gap:2px; } .nm { font-weight:650; overflow-wrap:anywhere; }
.meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .meta:empty { display:none; } .cat { color:var(--muted); font-size:13px; }
.row.done .nm { text-decoration:line-through; color:var(--muted); } .row.done { box-shadow:none; background:var(--soft); }
.badge { font-size:12px; font-weight:700; padding:1px 9px; border-radius:999px; background:var(--soft); color:var(--muted); white-space:nowrap; }
.badge.red { background:var(--bad-bg); color:var(--bad); } .badge.yellow { background:var(--warn-bg); color:var(--warn); } .badge.green { background:var(--ok-bg); color:var(--ok); }
.qty { display:flex; align-items:center; gap:2px; font-weight:650; font-size:14px; flex:none; }
.qty button { appearance:none; border:0; background:var(--soft); width:36px; height:36px; border-radius:10px; font-size:18px; cursor:pointer; line-height:1; }
.qty span { min-width:34px; text-align:center; }

.dock { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--line); padding:10px 0 calc(10px + env(safe-area-inset-bottom)); z-index:6; }
.dock .wrap { display:flex; gap:10px; } .dock .btn { flex:1; } .dock .btn.primary { flex:1.4; }
.count { background:var(--accent); color:var(--accent-ink); border-radius:999px; font-size:12px; padding:0 8px; min-width:22px; text-align:center; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(90px + env(safe-area-inset-bottom)); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-weight:600; z-index:30; max-width:90vw; }

/* sheets */
dialog.sheet { border:0; padding:0; background:var(--card); color:var(--ink); width:100%; max-width:560px; margin:auto auto 0; border-radius:22px 22px 0 0; max-height:92dvh; overflow:auto; box-shadow:0 -10px 50px rgba(0,0,0,.3); }
dialog.sheet.tall { min-height:60dvh; } dialog.sheet::backdrop { background:rgba(10,20,18,.5); }
dialog.sheet[open] { animation:up .22s ease-out; } @keyframes up { from { transform:translateY(40px); opacity:0; } }
dialog.sheet > header, dialog.sheet form > header { display:flex; align-items:center; gap:8px; padding:14px 8px 4px 20px; position:sticky; top:0; background:var(--card); z-index:1; }
dialog.sheet h2 { margin-right:auto; font-size:19px; } .steps { color:var(--muted); font-size:13px; }
dialog.sheet form, dialog.sheet > p, dialog.sheet > ol, dialog.sheet > ul, dialog.sheet > input { margin-left:20px; margin-right:20px; }
dialog.sheet form { margin:0; padding:0 20px 20px; } dialog.sheet form > header { margin:0 -20px; }
.hint { color:var(--muted); font-size:14px; margin:6px 0 12px; }
.field { display:grid; gap:5px; font-size:13px; font-weight:600; color:var(--muted); margin:12px 0 0; } .field input { font-weight:500; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; } .actions .btn.primary { flex:1; }
.error { color:var(--bad); font-weight:600; margin:12px 0 0; }
.stockline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); margin:6px 0 0; }
.switch { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; margin-top:18px; padding:12px 14px; border-radius:var(--r); background:var(--soft); cursor:pointer; }
.switch input { grid-row:span 2; width:22px; height:22px; accent-color:var(--accent); } .switch span { font-weight:650; } .switch small { color:var(--muted); }
.thresholds { border:0; padding:0; margin:0; } .thresholds .yellow input { border-color:var(--warn); } .thresholds .red input { border-color:var(--bad); }
.search { margin-top:8px !important; width:calc(100% - 40px) !important; }

.quick, .items, .audit, .prices { list-style:none; padding:0; margin-top:8px; margin-bottom:20px; display:grid; gap:6px; }
.quick button, .items button { width:100%; display:flex; align-items:center; gap:12px; border:0; background:var(--soft); border-radius:var(--r); min-height:56px; padding:6px 14px; cursor:pointer; text-align:left; }
.quick .what, .items .what { flex:1; } .quick small, .items small { color:var(--muted); }
.rank { width:28px; height:28px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:13px; }
.times { color:var(--muted); font-size:13px; font-weight:650; } .plus { color:var(--accent); font-size:22px; font-weight:700; }
.stk { color:var(--muted); font-size:14px; }
.line { display:flex; align-items:center; gap:12px; background:var(--soft); border-radius:var(--r); min-height:56px; padding:6px 14px; } .line .what { flex:1; }
.audit label { display:flex; align-items:center; gap:14px; background:var(--soft); border-radius:var(--r); min-height:56px; padding:6px 14px; cursor:pointer; }
.prices li { display:flex; align-items:center; gap:8px; } .prices .nm { flex:1; font-weight:550; } .prices input { width:104px; text-align:right; } .cur { color:var(--muted); width:14px; }
.sum { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:17px; margin:0 0 4px; } .diff { color:var(--warn); font-size:13px; font-weight:600; }
.photo { display:grid; place-items:center; min-height:150px; border:2px dashed var(--line); border-radius:var(--r); cursor:pointer; color:var(--muted); font-weight:600; overflow:hidden; margin-bottom:4px; }
.photo input { display:none; } .photo img { width:100%; max-height:260px; object-fit:contain; background:var(--soft); }
.doneview { padding:36px 24px 28px; text-align:center; display:grid; gap:8px; } .doneview p { margin:0; color:var(--muted); } .doneview .big { width:72px; height:72px; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-size:38px; display:grid; place-items:center; margin:0 auto 6px; } .doneview .btn { margin-top:14px; }
@media (min-width:700px) { dialog.sheet { margin:auto; border-radius:22px; } body { padding-bottom:110px; } }
.where { flex-basis:100%; display:flex; gap:8px; margin-top:6px; } .where select, .where input { min-height:40px; font-size:14px; width:auto; flex:1; min-width:0; }
.prices li { flex-wrap:wrap; }