:root{--bg:#F6F5F0;--ink:#14161F;--ink-2:#3A3D4C;--ink-3:#61647A;--card:#fff;--line:#E4E2D9;--line-2:#CFCCC0;--acc:#E36A2E;--acc-ink:#B3480F;--acc-50:#FDEEE4;--ok:#1E8A5A;--ok-50:#E3F5EC;--bad:#C2382C;--bad-50:#FCE9E6;--warn:#B07A00;--warn-50:#FFF4D6;--r:14px;--f-ui:'Instrument Sans',system-ui,sans-serif;--f-d:'Bricolage Grotesque',var(--f-ui);--f-m:'DM Mono',ui-monospace,monospace}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--f-ui);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
.boot{font:700 28px var(--f-d);text-align:center;margin-top:40vh}
.top{position:sticky;top:0;z-index:5;background:var(--ink);color:#fff;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;display:flex;align-items:center;gap:10px}
.top h1{font:700 22px var(--f-d);margin:0;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .brand{font:600 11px var(--f-m);text-transform:uppercase;letter-spacing:.12em;color:#F2A65A}
.top .ib{color:#fff}
main{max-width:640px;margin:0 auto;padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:6;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font:500 11px var(--f-ui);color:var(--ink-3);text-decoration:none}
nav.tabs a.on{color:var(--ink)}nav.tabs a.on .ic{color:var(--acc)}
nav.tabs a.scan .ic{background:var(--ink);color:#fff;border-radius:10px;padding:4px;width:30px;height:30px;margin-top:-4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card h2,.sec{font:700 18px var(--f-d);margin:0 0 6px;letter-spacing:-.01em}
.sec{font:600 12px var(--f-m);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:18px 2px 8px;display:flex;align-items:center;gap:8px}
.sec span{flex:1}
.mut{color:var(--ink-3)}.small{font-size:13px}.mono{font-family:var(--f-m)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 16px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;min-height:46px}
.btn.acc{background:var(--acc)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}.btn.danger{background:var(--bad)}.btn.soft{background:var(--acc-50);color:var(--acc-ink)}
.btn.block{display:flex;width:100%}.btn.big{min-height:64px;font-size:20px;border-radius:16px}.btn:disabled{opacity:.45}
.btn.sm{min-height:36px;padding:7px 12px;font-size:14px;border-radius:10px}
.row{display:flex;gap:10px;align-items:center}.row>*{min-width:0}.grow{flex:1}.wrap{flex-wrap:wrap}
.ib{border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer;display:inline-flex;color:var(--ink)}
.prog{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin:10px 0 4px}.prog i{display:block;height:100%;background:var(--acc);border-radius:6px}
.big-n{font:700 34px var(--f-d);letter-spacing:-.03em}
.list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;background:none;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0}
.li:first-child{border-top:0}.li .t{flex:1;min-width:0}.li .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.li .s{font-size:13px;color:var(--ink-3);display:block}
.li .q{font:500 15px var(--f-m);text-align:right;white-space:nowrap}
.li.done .n{color:var(--ink-3)}.li.arch{opacity:.55}
.tag{display:inline-block;font:500 11px var(--f-m);text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:var(--line);color:var(--ink-2);vertical-align:middle}
.tag.acc{background:var(--acc-50);color:var(--acc-ink)}.tag.ok{background:var(--ok-50);color:var(--ok)}.tag.bad{background:var(--bad-50);color:var(--bad)}.tag.warn{background:var(--warn-50);color:var(--warn)}
.up{color:var(--ok)}.down{color:var(--bad)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:7px 13px;font-size:14px;cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
label.f{display:block;margin-bottom:12px}label.f>span{display:block;font:500 12px var(--f-m);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:5px}
input.i,select.i,textarea.i{width:100%;padding:12px;border:1px solid var(--line-2);border-radius:11px;background:#fff;min-height:46px}
textarea.i{min-height:140px;font:13px/1.4 var(--f-m)}
.search{position:relative;margin-bottom:10px}.search .ic{position:absolute;left:12px;top:13px;color:var(--ink-3)}.search input{padding-left:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty{text-align:center;padding:26px 16px}.empty .art{width:72px;height:72px;margin:0 auto 10px;border-radius:20px;background:var(--acc-50);color:var(--acc);display:flex;align-items:center;justify-content:center}
.empty h2{font:700 22px var(--f-d);margin:0 0 6px}
.err{color:var(--bad)}.okm{color:var(--ok)}
.bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--bad)}
/* modal as bottom sheet */
.modal-back{position:fixed;inset:0;background:rgba(14,16,32,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.modal-h{display:flex;align-items:center;padding:14px 14px 4px 18px;position:sticky;top:0;background:var(--bg);z-index:1}.modal-h h2{flex:1;font:700 20px var(--f-d);margin:0}
.modal-b{padding:6px 18px 12px}.modal-f{display:flex;gap:10px;padding:10px 18px 18px;justify-content:flex-end}.modal-f .btn{flex:1}
@media(min-width:700px){.modal-back{align-items:center}.modal{border-radius:20px}}
/* count card */
.ic-head{display:flex;gap:10px;align-items:flex-start}.ic-head .n{font:700 24px var(--f-d);letter-spacing:-.02em;line-height:1.15}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.facts div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.facts b{display:block;font:600 18px var(--f-m)}.facts span{font:500 11px var(--f-m);text-transform:uppercase;color:var(--ink-3);letter-spacing:.05em}
.stepper{display:grid;grid-template-columns:64px 1fr 64px;gap:8px;align-items:stretch}
.stepper button{border:0;border-radius:14px;background:#fff;border:1px solid var(--line-2);font-size:28px;cursor:pointer}
.stepper input{text-align:center;font:600 34px var(--f-m);border:2px solid var(--ink);border-radius:14px;padding:8px;width:100%;background:#fff}
.unit{text-align:center;font:500 13px var(--f-m);color:var(--ink-3);margin:4px 0 8px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.pad button{min-height:52px;border:0;border-radius:12px;background:#fff;border:1px solid var(--line);font:600 22px var(--f-m);cursor:pointer}
.pad button:active,.stepper button:active{background:var(--acc-50)}
/* scanner */
.cam{position:relative;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:3/4;max-height:56vh;width:100%;display:flex;align-items:center;justify-content:center;color:#fff}
.cam video{width:100%;height:100%;object-fit:cover}
.cam .frame{position:absolute;left:12%;right:12%;top:34%;bottom:34%;border:3px solid #F2A65A;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cam .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:14px;text-shadow:0 1px 3px #000}
.cam .start{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:20px;text-align:center}
#toasts{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:40;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;transition:opacity .3s}.toast.err{background:var(--bad)}.toast.out{opacity:0}
.login{max-width:400px;margin:0 auto;padding:12vh 22px}.login h1{font:800 44px var(--f-d);letter-spacing:-.04em;margin:0}.login .sub{color:var(--ink-3);margin:0 0 22px}
.av{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;background:hsl(var(--hue) 70% 88%);color:hsl(var(--hue) 50% 28%);flex:none}
.ic{flex:none}
/* ---- Sticks'n'Sushi brand layer ---- */
:root{--bg:#E7E3D4;--ink:#282828;--ink-2:#3F3E3B;--ink-3:#61605C;--card:#F7F5EE;--line:#D9D5C7;--line-2:#CECCBF;--acc:#B70E0C;--acc-ink:#A80000;--acc-50:#F2DCD6;--ok:#55613A;--ok-50:#E2E6D2;--bad:#A80000;--bad-50:#F2DCD6;--warn:#7A5A10;--warn-50:#EFE3C4;--r:10px;--f-ui:'Barlow',Arial,sans-serif;--f-d:'Bodoni Moda',Didot,Georgia,serif;--f-m:'Barlow Condensed','Barlow',Arial,sans-serif}
.top{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line-2);padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:8px}
.top .ib{color:var(--ink)}
.top .mark{width:44px;height:auto;flex:none}
.top .brand{color:var(--ink-3);letter-spacing:.18em;font-size:11px}
.top h1{font:600 22px var(--f-d);letter-spacing:0}
.btn{border-radius:25px;text-transform:uppercase;letter-spacing:1px;font:600 14px var(--f-ui);background:var(--ink)}
.btn.big{border-radius:30px;font-size:17px;letter-spacing:1.5px}.btn.sm{border-radius:20px;font-size:12px}
.btn.acc{background:var(--acc)}.btn.ghost{border-color:var(--ink);color:var(--ink)}
.card,.list{background:var(--card);border-color:var(--line)}.li{border-color:var(--line)}
.card h2,.empty h2,.ic-head .n,.modal-h h2{font-family:var(--f-d);font-weight:600;letter-spacing:0}
.big-n{font-family:var(--f-d);font-weight:600;letter-spacing:-.01em}
.sec,label.f>span,.facts span,.tag{font-family:var(--f-m);letter-spacing:.12em}
.chip{border-radius:25px;background:var(--card);border-color:var(--ink-3)}.chip.on{background:var(--ink);border-color:var(--ink)}
input.i,select.i,textarea.i,.stepper input,.stepper button,.pad button,.facts div{background:#FBFAF6;border-color:var(--line-2)}
.stepper input{border-color:var(--ink);font-family:var(--f-ui);font-weight:600}
.pad button{font-family:var(--f-ui)}
nav.tabs{background:var(--card);border-top-color:var(--line-2)}nav.tabs a{font-family:var(--f-m);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
nav.tabs a.scan .ic{background:var(--acc);border-radius:50%}
.modal{background:var(--bg)}.modal-h{background:var(--bg)}
.prog i{background:var(--acc)}
.empty .art{border-radius:50%}
.login{text-align:center}.login form,.login .sub+form{text-align:left}
.login .logo{width:120px;height:auto;margin:0 auto 14px;display:block}
.login h1{font:600 40px var(--f-d);letter-spacing:0}.login .sub{font:600 13px var(--f-m);text-transform:uppercase;letter-spacing:.24em;color:var(--ink-3);margin:6px 0 30px}
.toast{background:var(--ink)}