:root {
  --ink:#1b2b33; --mute:#5b6a70; --bench:#edf0ed; --paper:#ffffff; --line:#d5dbd7; --field:#f6f8f6;
  --koa:#f2b705; --teal:#17564f; --teal-ink:#ffffff; --red:#b0302a; --red-bg:#f8e6e4;
  --amber:#8a5200; --amber-bg:#fbefd5; --olive:#6b6200; --olive-bg:#f3f0cf; --ok-bg:#e1efea;
  --serif: Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r: 8px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#e4ebe8; --mute:#9aabb0; --bench:#12191c; --paper:#1a2429; --line:#2d3b41; --field:#223037;
    --teal:#4fb3a3; --teal-ink:#0e1a1d; --red:#f08278; --red-bg:#3a1f1d; --amber:#f0b45a; --amber-bg:#3a2d16;
    --olive:#d6cb55; --olive-bg:#33300f; --ok-bg:#173029; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bench); color:var(--ink); font:15px/1.5 var(--sans); }
h1,h2,h3 { font-family:var(--serif); margin:0; line-height:1.2; }
h1 { font-size:28px; } h2 { font-size:20px; } h3 { font-size:16px; }
a { color:var(--teal); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--koa); outline-offset:2px; }
.mute { color:var(--mute); } .small { font-size:13px; } .right { text-align:right; } .nowrap { white-space:nowrap; }
.num { font-variant-numeric:tabular-nums; }

/* shell */
.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.rail { background:var(--ink); color:#eef2f0; padding:18px 12px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px; }
@media (prefers-color-scheme: dark) { .rail { background:#0c1215; } }
.brand { display:flex; gap:10px; align-items:center; padding:0 6px; text-decoration:none; color:inherit; }
.brand img { width:36px; height:36px; }
.brand b { font:700 17px/1.1 var(--serif); display:block; }
.brand span { font-size:12px; opacity:.7; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { color:#d9e2df; text-decoration:none; padding:9px 12px; border-radius:var(--r); border-left:4px solid transparent; }
.nav a:hover { background:#ffffff14; }
.nav a.on { background:#ffffff1c; border-left-color:var(--koa); color:#fff; font-weight:600; }
.rail .foot { margin-top:auto; font-size:13px; padding:0 6px; opacity:.85; }
.rail .foot button { background:none; border:0; color:inherit; text-decoration:underline; padding:0; cursor:pointer; }
main { padding:26px clamp(14px,3vw,36px) 60px; max-width:1180px; width:100%; }
@media (max-width:820px) {
  .app { display:block; }
  .rail { position:static; height:auto; flex-direction:column; gap:6px; padding:10px 10px 6px; }
  .brand img { width:30px; height:30px; }
  .nav { flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:6px; scrollbar-width:none; }
  .nav a { white-space:nowrap; border-left:0; border-bottom:3px solid transparent; border-radius:6px 6px 0 0; padding:8px 12px; }
  .nav a.on { border-bottom-color:var(--koa); }
  .rail .foot { display:none; }
  main { padding-top:18px; }
}

/* page chrome */
.page-head { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; border-bottom:3px solid var(--koa); }
.page-head .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.bar input[type=search], .bar select { min-width:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); padding:8px 14px; border-radius:var(--r); cursor:pointer; text-decoration:none; font-weight:600; line-height:1.2; min-height:40px; }
.btn:hover { background:#8884; }
.btn.primary { background:var(--teal); border-color:var(--teal); color:var(--teal-ink); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { border-color:var(--red); color:var(--red); }
.btn.sm { padding:4px 10px; min-height:32px; font-size:13px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.pill { border:1.5px solid var(--line); background:var(--paper); border-radius:99px; padding:5px 12px; cursor:pointer; font-size:14px; }
.pill.on { border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* forms */
label { display:block; font-weight:600; font-size:13px; margin-bottom:4px; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], input[type=time], select, textarea {
  width:100%; padding:9px 10px; background:var(--field); border:1.5px solid var(--line); border-radius:var(--r); min-height:40px; }
textarea { min-height:84px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--teal); }
.grid { display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.grid .span2 { grid-column:span 2; } .grid .full { grid-column:1/-1; }
@media (max-width:520px) { .grid .span2 { grid-column:1/-1; } }
.row { display:flex; gap:8px; align-items:flex-end; } .row > * { flex:1; } .row > .btn { flex:none; }
.hint { font-size:12.5px; color:var(--mute); margin-top:4px; }
fieldset { border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px 14px; margin:0 0 16px; background:var(--paper); }
legend { font:700 15px var(--serif); padding:0 6px; }
.check { display:flex; align-items:center; gap:8px; font-weight:500; font-size:14px; margin:0; }
.check input { width:18px; height:18px; }
.seg { display:inline-flex; border:1.5px solid var(--ink); border-radius:var(--r); overflow:hidden; }
.seg label { margin:0; padding:7px 14px; cursor:pointer; font-weight:600; }
.seg input { position:absolute; opacity:0; }
.seg input:checked + span { background:var(--ink); color:var(--paper); }
.seg span { display:block; margin:-7px -14px; padding:7px 14px; }

/* cards & tables */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.cols { display:grid; gap:16px; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } }
table.t { width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.t th { text-align:left; font-size:13px; color:var(--mute); font-weight:600; padding:9px 12px; border-bottom:2px solid var(--ink); background:var(--paper); }
.t td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.t tbody tr:last-child td { border-bottom:0; }
.t tbody tr.click { cursor:pointer; } .t tbody tr.click:hover { background:var(--field); }
.t td .sub { color:var(--mute); font-size:13px; }
@media (max-width:700px) {
  .t, .t tbody, .t tr, .t td { display:block; width:100%; }
  .t thead { display:none; }
  .t tr { padding:10px 12px; border-bottom:1px solid var(--line); }
  .t td { border:0; padding:2px 0; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  .t td[data-l]::before { content:attr(data-l); color:var(--mute); font-size:13px; text-align:left; flex:none; }
  .t td.lead { display:block; text-align:left; font-size:16px; }
  .t td.lead::before { content:none; }
  .t td.noshow { display:none; }
}
.empty { text-align:center; padding:36px 16px; color:var(--mute); background:var(--paper); border:1.5px dashed var(--line); border-radius:var(--r); }
.empty b { display:block; font:700 18px var(--serif); color:var(--ink); margin-bottom:4px; }

/* expiry stamp: the one signature element, a use-by sticker */
.stamp { display:inline-flex; flex-direction:column; align-items:flex-start; border:2px solid currentColor; border-radius:4px; padding:1px 8px 2px; line-height:1.25; font-variant-numeric:tabular-nums; color:var(--teal); background:transparent; }
.stamp b { font-weight:700; letter-spacing:.2px; }
.stamp i { font-style:normal; font-size:12px; font-weight:600; }
.stamp.exp { color:var(--red); background:var(--red-bg); }
.stamp.d7 { color:var(--amber); background:var(--amber-bg); }
.stamp.d14 { color:var(--olive); background:var(--olive-bg); }
.stamp.d30 { color:var(--teal); background:var(--ok-bg); }
.stamp.none { color:var(--mute); border-style:dashed; font-weight:500; }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:1px 8px; border-radius:99px; background:var(--field); border:1.5px solid var(--line); }
.badge.issued { border-color:var(--teal); color:var(--teal); } .badge.paid { background:var(--teal); color:var(--teal-ink); border-color:var(--teal); }
.badge.overdue { border-color:var(--red); color:var(--red); background:var(--red-bg); } .badge.void { text-decoration:line-through; color:var(--mute); }
.badge.draft { border-style:dashed; }

/* home */
.use-first { list-style:none; margin:0; padding:0; }
.use-first li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.use-first li:last-child { border-bottom:0; }
.ledger { display:grid; grid-template-columns:1fr auto; gap:9px 12px; margin:0; }
.ledger dt { color:var(--mute); } .ledger dd { margin:0; text-align:right; font:700 17px var(--serif); font-variant-numeric:tabular-nums; }
.ledger dd.bad { color:var(--red); }

/* modal */
.overlay { position:fixed; inset:0; background:#0a1114b8; display:flex; align-items:flex-start; justify-content:center; padding:max(12px,env(safe-area-inset-top)) 12px 12px; overflow-y:auto; z-index:50; }
.modal { background:var(--bench); border-radius:12px; width:100%; max-width:640px; margin:auto 0; box-shadow:0 18px 50px #0007; animation:pop .14s ease-out; }
.modal.wide { max-width:860px; }
@keyframes pop { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .modal { animation:none; } }
.modal > header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:3px solid var(--koa); }
.modal > .body { padding:16px 18px; }
.modal > footer { padding:12px 18px 16px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; border-top:1px solid var(--line); }
.modal > footer .grp { display:flex; flex-wrap:wrap; gap:8px; }
.x { background:none; border:0; font-size:26px; line-height:1; cursor:pointer; padding:0 6px; }

/* scanner */
.scan video { width:100%; max-height:44vh; background:#000; border-radius:var(--r); object-fit:cover; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { border:1.5px solid var(--teal); color:var(--teal); background:transparent; border-radius:99px; padding:3px 11px; cursor:pointer; font-weight:600; font-size:13px; }
.chip:hover { background:var(--ok-bg); }
details.raw { margin-top:6px; font-size:12px; color:var(--mute); } details.raw pre { white-space:pre-wrap; margin:4px 0 0; max-height:140px; overflow:auto; }

/* batch plan */
.plan { border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.plan > div { padding:10px 12px; border-bottom:1px solid var(--line); } .plan > div:last-child { border-bottom:0; }
.plan .alloc { font-size:13px; color:var(--mute); padding-left:12px; border-left:3px solid var(--koa); margin-top:4px; }
.plan .short { color:var(--red); font-weight:700; }

/* invoice editor */
.lines { width:100%; border-collapse:collapse; }
.lines th { font-size:12.5px; color:var(--mute); text-align:left; padding:4px 6px; }
.lines td { padding:4px 4px; vertical-align:middle; }
.lines .amt { text-align:right; white-space:nowrap; padding-right:8px; font-variant-numeric:tabular-nums; }
@media (max-width:700px) { .lines thead { display:none; } .lines, .lines tbody, .lines tr, .lines td { display:block; } .lines tr { border:1px solid var(--line); border-radius:var(--r); padding:8px; margin-bottom:8px; background:var(--paper); } .lines .amt { padding:4px 0; } }
.totals { margin-left:auto; width:min(320px,100%); } .totals div { display:flex; justify-content:space-between; padding:3px 0; font-variant-numeric:tabular-nums; }
.totals .grand { border-top:2px solid var(--ink); margin-top:4px; padding-top:8px; font:700 19px var(--serif); }

/* toast + login */
#toasts { position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:99; display:flex; flex-direction:column; gap:8px; width:min(420px,calc(100% - 24px)); }
.toast { background:var(--ink); color:var(--bench); padding:11px 14px; border-radius:var(--r); box-shadow:0 6px 24px #0005; font-weight:500; }
.toast.err { background:var(--red); color:#fff; }
.login { min-height:100vh; display:grid; place-items:center; padding:16px; }
.login form { width:min(380px,100%); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:26px; border-top:6px solid var(--koa); display:grid; gap:14px; }
.login .brand { padding:0; color:var(--ink); }
.login .brand img { width:44px; height:44px; }
@media print { .rail, #toasts { display:none; } }

/* recipe ingredient rows */
.ing { display:grid; grid-template-columns:minmax(0,1fr) 92px 84px 36px; gap:6px; margin-bottom:6px; }
.ing button { background:none; border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:18px; color:var(--mute); }
@media (max-width:520px) { .ing { grid-template-columns:1fr 1fr 36px; } .ing input:first-child { grid-column:1/-1; } }
.method { white-space:pre-wrap; }