/* ==========================================================
   Fish Market Bev — design tokens
   Dark is the default ("liquor room"). Light ("beer cave") comes
   from the phone's setting or the Settings sheet override.
   ========================================================== */
:root{
  color-scheme: dark;
  --bg:#0F0D0B;
  --surface:#1A1613;
  --surface-2:#241F1A;
  --surface-3:#2F2821;
  --raised:#3A3129;
  --ink:#F5EFE4;
  --ink-dim:#BFB4A2;
  --ink-faint:#978C7B;
  --line:rgba(255,236,210,.08);
  --line-strong:rgba(255,236,210,.13);
  --accent:#D6A052;
  --accent-ink:#1A1206;
  --accent-soft:rgba(214,160,82,.13);
  --accent-line:rgba(214,160,82,.42);
  --good:#8DB374; --good-soft:rgba(141,179,116,.15);
  --warn:#E0AE4C; --warn-soft:rgba(224,174,76,.15);
  --bad:#E57A60;  --bad-soft:rgba(229,122,96,.15);
  --card-shadow: 0 0 0 transparent;
  --float-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --tab-bg: rgba(22,19,16,.84);
  --dock-bg: rgba(36,31,26,.88);
  --scrim: rgba(5,4,3,.62);
  --toast-bg:#F5EFE4; --toast-ink:#1B1612; --toast-act:#9C6519;

  /* The top bar is dark in both themes: iOS draws white status-bar
     text over it (apple-mobile-web-app-status-bar-style: black-translucent). */
  --bar-bg: rgba(15,13,11,.86);
  --bar-ink:#F5EFE4;
  --bar-dim:#AEA392;
  --bar-accent:#D6A052;
  --bar-line: rgba(255,236,210,.09);

  --radius:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: calc(var(--safe-top) + 80px);
  --tabbar-h: calc(var(--safe-bottom) + 56px);
  --ease-out: cubic-bezier(.22,.9,.28,1);
  --ease-spring: cubic-bezier(.34,1.45,.64,1);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cat-whitewine:#D8C27A;
  --cat-redwine:#A63A4C;
  --cat-bubbles:#E8D69C;
  --cat-beer:#D38B2A;
  --cat-vodka:#9DA6B0;
  --cat-gin:#7FAA9B;
  --cat-rum:#B5743C;
  --cat-tequila:#B9B56B;
  --cat-whiskey:#BC6D30;
  --cat-scotch:#9A5832;
  --cat-cordials:#9060A0;
  --cat-mocktails:#5F9C7A;
  --cat-sodas:#5E8FAA;
  --cat-juices:#E2953D;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#F4F0E8; --surface:#FFFFFF; --surface-2:#F0EBE2; --surface-3:#E5DDD0; --raised:#FFFFFF;
    --ink:#1B1612; --ink-dim:#564D42; --ink-faint:#766C5F;
    --line:rgba(52,36,16,.08); --line-strong:rgba(52,36,16,.14);
    --accent:#9A6317; --accent-ink:#FFFFFF; --accent-soft:rgba(154,99,23,.10); --accent-line:rgba(154,99,23,.45);
    --good:#3D7631; --good-soft:rgba(61,118,49,.11);
    --warn:#946604; --warn-soft:rgba(180,130,20,.14);
    --bad:#B23E27; --bad-soft:rgba(178,62,39,.10);
    --card-shadow: 0 1px 2px rgba(40,28,12,.05), 0 4px 14px rgba(40,28,12,.05);
    --float-shadow: 0 12px 30px rgba(40,28,12,.18), 0 2px 6px rgba(40,28,12,.08);
    --tab-bg: rgba(250,247,242,.88);
    --dock-bg: rgba(255,255,255,.9);
    --scrim: rgba(24,16,8,.38);
    --toast-bg:#221C17; --toast-ink:#F5EFE4; --toast-act:#E3B465;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F4F0E8; --surface:#FFFFFF; --surface-2:#F0EBE2; --surface-3:#E5DDD0; --raised:#FFFFFF;
  --ink:#1B1612; --ink-dim:#564D42; --ink-faint:#766C5F;
  --line:rgba(52,36,16,.08); --line-strong:rgba(52,36,16,.14);
  --accent:#9A6317; --accent-ink:#FFFFFF; --accent-soft:rgba(154,99,23,.10); --accent-line:rgba(154,99,23,.45);
  --good:#3D7631; --good-soft:rgba(61,118,49,.11);
  --warn:#946604; --warn-soft:rgba(180,130,20,.14);
  --bad:#B23E27; --bad-soft:rgba(178,62,39,.10);
  --card-shadow: 0 1px 2px rgba(40,28,12,.05), 0 4px 14px rgba(40,28,12,.05);
  --float-shadow: 0 12px 30px rgba(40,28,12,.18), 0 2px 6px rgba(40,28,12,.08);
  --tab-bg: rgba(250,247,242,.88);
  --dock-bg: rgba(255,255,255,.9);
  --scrim: rgba(24,16,8,.38);
  --toast-bg:#221C17; --toast-ink:#F5EFE4; --toast-act:#E3B465;
}

/* ============ base ============ */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.4 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em; }
button, input, select, textarea{ font-family:inherit; color:inherit; }
button{ cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }

.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.ic{ width:22px; height:22px; flex-shrink:0; display:block; }
.hint{ font-size:13.5px; line-height:1.5; color:var(--ink-faint); margin:14px 4px; }
.hint.center{ text-align:center; }
.haptic{ display:none; }

/* ============ top bar ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:var(--topbar-h);
  padding:calc(var(--safe-top) + 6px) 16px 10px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  background:var(--bar-bg);
  -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px);
  border-bottom:.5px solid var(--bar-line);
  color:var(--bar-ink);
}
.topbar > *{ width:100%; max-width:608px; margin:0 auto; }
.tb-row{ display:flex; align-items:center; justify-content:space-between; height:34px; }
.brand{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bar-dim); }
.brand-mark{ width:8px; height:8px; border-radius:50%; background:var(--bar-accent); box-shadow:0 0 0 3px rgba(214,160,82,.2); }
.tb-back{
  display:flex; align-items:center; gap:1px; height:34px; margin-left:-10px; padding:0 10px 0 2px;
  background:none; border:0; border-radius:10px; color:var(--bar-accent);
  font-size:16px; font-weight:500; transition:opacity .15s;
}
.tb-back .ic{ width:24px; height:24px; stroke-width:2.2; }
.tb-back:active{ opacity:.45; }
.tb-icon{
  position:relative; width:34px; height:34px; border-radius:50%; border:0;
  display:grid; place-items:center; background:rgba(255,236,210,.08); color:var(--bar-ink);
  transition:transform .15s var(--ease-out), background-color .15s;
}
.tb-icon .ic{ width:19px; height:19px; }
.tb-icon:active{ transform:scale(.9); background:rgba(255,236,210,.16); }
.tb-icon.nag::after{
  content:""; position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%;
  background:var(--warn); box-shadow:0 0 0 2px #15120F;
}
.topbar-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:34px; }
.topbar-sub .t-main{
  font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.015em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.topbar-sub .t-aux{ font-family:var(--font-mono); font-size:12px; color:var(--bar-dim); white-space:nowrap; flex-shrink:0; }

/* ============ page ============ */
#app, .ghost{
  padding:calc(var(--topbar-h) + 14px) 16px calc(var(--tabbar-h) + 104px);
  max-width:640px; margin:0 auto;
}
#app{ position:relative; z-index:6; min-height:100vh; min-height:100dvh; background:var(--bg); transition:opacity .25s ease; }
body.booting #app{ opacity:0; }
#app.sliding-in{ box-shadow:-10px 0 30px rgba(0,0,0,.28); }

/* screen transitions: a frozen copy of the old screen slides out */
.ghost-wrap{
  position:fixed; inset:0; z-index:5; overflow:hidden; pointer-events:none;
  background:var(--bg); box-shadow:-10px 0 30px rgba(0,0,0,.28);
}
.ghost{ background:var(--bg); min-height:100%; }

/* ============ tab bar ============ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:var(--tabbar-h);
  display:flex; justify-content:center;
  padding:5px 4px var(--safe-bottom);
  background:var(--tab-bg);
  -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px);
  border-top:.5px solid var(--line-strong);
  transition:transform .25s var(--ease-out);
}
.tab{
  position:relative; flex:1; max-width:128px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 0 0; background:none; border:0;
  color:var(--ink-faint); font-size:10.5px; font-weight:600; letter-spacing:.01em;
}
.tab-ic{ position:relative; display:grid; place-items:center; width:30px; height:28px; transition:transform .16s var(--ease-out); }
.tab-ic .ic{ width:25px; height:25px; }
.tab:active .tab-ic{ transform:scale(.84); }
.tab.active{ color:var(--accent); }
.tab.active .tab-ic .ic{ stroke-width:2.1; }
.badge{
  position:absolute; top:-3px; left:calc(50% + 5px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--surface-3); color:var(--ink);
  font:700 11px/18px var(--font-num); text-align:center; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--bg);
}
.badge.hot{ background:var(--accent); color:var(--accent-ink); }
.badge:empty{ display:none; }
.badge.pop, .pop{ animation:pop .32s var(--ease-spring); }

/* ============ dock (floating actions above the tab bar) ============ */
.dock{
  position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + 10px); z-index:25;
  padding:0 12px; pointer-events:none; transition:transform .25s var(--ease-out), opacity .2s;
}
.dock > *{ pointer-events:auto; }
.dock:empty{ display:none; }
.walk-actions{
  max-width:616px; margin:0 auto; display:flex; gap:8px; padding:7px;
  border-radius:21px; background:var(--dock-bg);
  -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px);
  box-shadow:var(--float-shadow), inset 0 0 0 .5px var(--line-strong);
}
.walk-actions .btn{ min-height:50px; border-radius:15px; }
.walk-actions #backHome{ flex:0 0 auto; width:auto; padding:0 16px 0 10px; gap:2px; }
.walk-actions .is-zero{ opacity:.45; }
.fab{
  position:fixed; right:18px; bottom:calc(var(--tabbar-h) + 16px); z-index:25;
  width:58px; height:58px; border-radius:19px; border:0;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--float-shadow);
  transition:transform .16s var(--ease-out);
}
.fab .ic{ width:26px; height:26px; stroke-width:2.2; }
.fab:active{ transform:scale(.9); }

/* keyboard up: get the bars out of the way */
body.kb .tabbar{ transform:translateY(110%); }
body.kb .dock{ opacity:0; pointer-events:none; }
body.kb .dock > *{ pointer-events:none; }

/* ============ generic components ============ */
.section-label{
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); margin:28px 4px 10px;
}
.section-label:first-child{ margin-top:4px; }

.card{
  background:var(--surface); border-radius:var(--radius);
  box-shadow:inset 0 0 0 .5px var(--line-strong), var(--card-shadow);
  padding:14px; margin-bottom:12px;
}
.list-card{ padding:0; overflow:hidden; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:50px; padding:0 18px;
  border:0; border-radius:14px;
  background:var(--surface-2); color:var(--ink);
  box-shadow:inset 0 0 0 .5px var(--line-strong);
  font:600 16px/1.2 var(--font-ui); letter-spacing:-.005em;
  transition:transform .12s var(--ease-out), filter .15s, background-color .2s, color .2s;
}
.btn .ic{ width:19px; height:19px; }
.btn:active{ transform:scale(.97); filter:brightness(.9); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.btn-ghost{ background:transparent; box-shadow:none; color:var(--ink-dim); }
.btn-sm{ width:auto; min-height:40px; padding:0 14px; font-size:14px; border-radius:11px; }
.btn-danger{ color:var(--bad); }
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ width:auto; flex:1; }
.btn-row .btn-icon{ flex:0 0 52px; width:52px; padding:0; }

.chip{
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:12px;
  background:var(--surface-2); color:var(--ink-dim);
  font-size:12px; font-weight:600; white-space:nowrap;
}
.chip .ic{ width:13px; height:13px; stroke-width:2.4; }
.chip.good{ background:var(--good-soft); color:var(--good); }
.chip.warn{ background:var(--warn-soft); color:var(--warn); }
.chip.bad{ background:var(--bad-soft); color:var(--bad); }
.chip.accent{ background:var(--accent-soft); color:var(--accent); }

.pill{
  display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:12px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.pill-pending{ background:var(--warn-soft); color:var(--warn); }
.pill-good{ background:var(--good-soft); color:var(--good); }
.pill-bad{ background:var(--bad-soft); color:var(--bad); }

.tag-warn{
  display:inline-block; padding:0 6px; border-radius:6px;
  background:var(--warn-soft); color:var(--warn); font-weight:600; line-height:1.55;
}

.avatar{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--av, #6b5a45); color:#FFF8EE;
  font:700 14px var(--font-ui); letter-spacing:.02em;
}

.empty{ text-align:center; padding:56px 24px 28px; color:var(--ink-faint); }
.empty-ic{
  width:68px; height:68px; margin:0 auto 18px; border-radius:22px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--accent);
  box-shadow:inset 0 0 0 .5px var(--line-strong), var(--card-shadow);
}
.empty-ic .ic{ width:32px; height:32px; stroke-width:1.6; }
.empty h3{ color:var(--ink); font-size:22px; margin-bottom:8px; }
.empty p{ font-size:15px; line-height:1.5; max-width:300px; margin:0 auto 22px; color:var(--ink-dim); }
.empty .btn{ max-width:260px; }
.empty.small{ padding:28px 16px; }
.empty.small p{ margin:0 auto; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--ink-dim); margin:0 2px 6px; }
.field input, .field select{
  width:100%; height:48px; padding:0 14px;
  border:1px solid transparent; border-radius:12px;
  background:var(--surface-2); color:var(--ink);
  font:16px var(--font-ui);
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, background-color .15s;
}
.field select, .pill-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8072' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); background-color:var(--surface); }

.search{ position:relative; }
.search > .ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-faint); pointer-events:none; }
.search input{
  width:100%; height:42px; padding:0 40px 0 38px;
  border:0; border-radius:12px; background:var(--surface-2); color:var(--ink);
  font:16px var(--font-ui); -webkit-appearance:none; appearance:none;
}
.search input::placeholder{ color:var(--ink-faint); }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.search input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--accent-line); }
.search .clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%;
  display:grid; place-items:center; background:transparent; color:var(--ink-faint);
}
.search .clear .ic{ width:17px; height:17px; }

/* ============ order home ============ */
.today{ display:flex; flex-direction:column; gap:12px; padding:16px; }
.today-date{ display:flex; align-items:baseline; gap:8px; }
.today-date b{ font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.today-date span{ color:var(--ink-faint); font-size:14px; }
.today-line{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:0; background:none; border:0; text-align:left;
  font-size:14.5px; line-height:1.35; color:var(--ink-dim);
}
.today-line .ic{ width:19px; height:19px; color:var(--accent); }
.today-line b{ color:var(--ink); font-weight:600; }
.today-line .end{ margin-left:auto; width:17px; height:17px; color:var(--ink-faint); }
.today-line.go{ padding:10px 12px; margin:-2px 0; border-radius:12px; background:var(--accent-soft); color:var(--ink); }
.today-line.go:active{ filter:brightness(.92); }
.today-line.bad{ background:var(--bad-soft); }
.today-line.bad .ic:first-child{ color:var(--bad); }

.draft-card{ display:flex; flex-direction:column; gap:10px; padding:14px; }
.draft-card .dc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 2px; }
.draft-card .dc-title{ font-weight:600; }
.draft-card .dc-meta{ font-size:13px; color:var(--ink-faint); }
.draft-card .btn-row .btn-ghost{ flex:0 0 auto; }

.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:116px; padding:14px 14px 13px;
  border:0; border-radius:var(--radius);
  background:var(--surface); color:var(--ink); text-align:left;
  box-shadow:inset 0 0 0 .5px var(--line-strong), var(--card-shadow);
  transition:transform .16s var(--ease-out);
}
.cat-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 95% at 0% 0%, var(--cat-color), transparent 62%);
  opacity:.16;
}
.cat-card::after{
  content:""; position:absolute; left:14px; top:0; width:26px; height:3px; border-radius:0 0 3px 3px;
  background:var(--cat-color);
}
.cat-card:active{ transform:scale(.965); }
.cat-card > span{ position:relative; }
.cat-card .cname{ display:block; font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.18; letter-spacing:-.01em; margin-top:4px; }
.cat-card .cloc{ display:block; font-size:12px; color:var(--ink-faint); margin-top:3px; }
.cat-card .cmeta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; }
.cat-card .ccount{ font-size:23px; font-weight:700; color:var(--ink-faint); line-height:1; }
.cat-card .ctot{ font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); }
.cat-card .cbar{
  position:absolute !important; left:0; bottom:0; height:3px; width:var(--p, 0%);
  background:var(--accent); border-radius:0 3px 0 0; transition:width .4s var(--ease-out);
}
.cat-card.entered{ box-shadow:inset 0 0 0 1px var(--accent-line), var(--card-shadow); }
.cat-card.entered .ccount{ color:var(--accent); }

.stagger > *{ animation:rise .5s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 22ms); }

/* ============ walkthrough ============ */
.walk-tools, .items-tools{
  position:sticky; top:var(--topbar-h); z-index:8;
  margin:-14px -16px 10px; padding:10px 16px 12px;
  background:linear-gradient(var(--bg) 80%, rgba(0,0,0,0));
  display:flex; flex-direction:column; gap:10px;
}
.prog{ display:flex; align-items:center; gap:10px; padding:0 2px; }
.progress-track{ flex:1; height:4px; border-radius:2px; background:var(--line-strong); overflow:hidden; }
.progress-fill{ height:100%; border-radius:2px; background:var(--accent); transition:width .4s var(--ease-out); }
.prog-n{ font-size:13px; font-weight:700; color:var(--ink-dim); min-width:40px; text-align:right; }

.item-row{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:13px 12px 13px 16px; border-bottom:.5px solid var(--line-strong);
  transition:background-color .25s;
}
.item-row:last-child{ border-bottom:0; }
.item-row::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0;
  background:var(--accent); transform:scaleY(0); transition:transform .25s var(--ease-out);
}
.item-row.has-qty{ background:var(--accent-soft); }
.item-row.has-qty::before{ transform:scaleY(1); }
.item-main{ flex:1; min-width:0; }
.item-name{ font-size:16px; font-weight:600; line-height:1.25; letter-spacing:-.01em; margin-bottom:4px; }
.item-sub{ font:12px/1.5 var(--font-mono); color:var(--ink-faint); }
.item-sub .src{ color:var(--ink-dim); font-weight:600; }
.nw, .tag-warn{ white-space:nowrap; }
.item-last{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:12.5px; font-weight:600; color:var(--accent); }
.item-last .ic{ width:13px; height:13px; stroke-width:2.2; }

.qty-col{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.stepper{
  display:flex; align-items:stretch; height:46px; border-radius:14px; overflow:hidden;
  background:var(--surface-2); box-shadow:inset 0 0 0 .5px var(--line-strong);
  transition:box-shadow .2s, background-color .2s;
}
.stepper button{
  width:44px; border:0; background:transparent; color:var(--ink);
  display:grid; place-items:center; transition:background-color .12s;
}
.stepper button .ic{ width:20px; height:20px; stroke-width:2.3; transition:transform .12s var(--ease-out); }
.stepper button[data-step="1"]{ width:50px; color:var(--accent); }
.stepper button:active{ background:var(--surface-3); }
.stepper button:active .ic{ transform:scale(.8); }
.item-row:not(.has-qty) [data-step="-1"]{ color:var(--ink-faint); }
.stepper .sval{
  width:40px; padding:0; border:0; border-radius:0; background:transparent;
  text-align:center; color:var(--ink-faint);
  font:700 19px var(--font-num); font-variant-numeric:tabular-nums;
  -webkit-appearance:none; appearance:none;
}
.stepper .sval:focus{ outline:none; background:var(--accent-soft); color:var(--ink); }
.item-row.has-qty .stepper{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent-line); }
.item-row.has-qty .sval{ color:var(--ink); }
.sval.bump{ animation:bump .26s var(--ease-spring); }
.unit-tag{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

.next-shelf{
  display:flex; align-items:center; gap:14px; width:100%; margin-top:16px; padding:16px;
  border:0; border-radius:var(--radius); background:var(--surface); color:var(--ink); text-align:left;
  box-shadow:inset 0 0 0 .5px var(--line-strong), var(--card-shadow);
  transition:transform .14s var(--ease-out);
}
.next-shelf:active{ transform:scale(.98); }
.next-shelf .ns-dot{ width:12px; height:40px; border-radius:6px; background:var(--cat-color); flex-shrink:0; }
.next-shelf .ns-txt{ display:flex; flex-direction:column; min-width:0; }
.next-shelf .ns-over{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.next-shelf .ns-name{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-top:2px; }
.next-shelf .ns-meta{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.next-shelf .ns-go{ margin-left:auto; width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.next-shelf .ns-go .ic{ width:20px; height:20px; stroke-width:2.2; }
.shelf-end{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin-top:22px; color:var(--ink-dim); font-size:14px; }
.shelf-end .ic{ color:var(--good); width:26px; height:26px; }
.shelf-end .btn{ max-width:240px; }

/* ============ review ============ */
.review-head{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin-bottom:14px; border-radius:var(--radius);
  background:var(--accent-soft); color:var(--ink-dim); font-size:14px; line-height:1.45;
}
.review-head .ic{ color:var(--accent); margin-top:1px; width:20px; height:20px; }
.review-head b{ color:var(--ink); }
.dist-group{ padding:16px; margin-bottom:14px; transition:box-shadow .3s; }
.dist-group.is-texted{ box-shadow:inset 0 0 0 1px var(--good-soft), var(--card-shadow); }
.dist-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.dh-main{ flex:1; min-width:0; }
.dname{ font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.2; }
.dphone{ font:12px/1.4 var(--font-mono); color:var(--ink-faint); margin-top:2px; }
.dphone .due{ font-family:var(--font-ui); font-weight:600; }
.dphone .due.accent{ color:var(--accent); }
.dphone .due.bad{ color:var(--bad); }
.lines > .order-line:last-child{ border-bottom:0; }
.order-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:.5px solid var(--line-strong); font-size:15px;
}
.order-line .qty{ font:600 14px var(--font-num); font-variant-numeric:tabular-nums; color:var(--ink-dim); white-space:nowrap; }
.send-note{ text-align:center; font-size:13px; color:var(--ink-faint); margin:18px 0 10px; }

/* ============ arrivals ============ */
.arrival-order{ padding:16px; margin-bottom:14px; }
.arrival-order.due-now{ box-shadow:inset 0 0 0 1px var(--accent-line), var(--card-shadow); }
.arrival-item{ padding:12px 0; border-bottom:.5px solid var(--line-strong); }
.arrival-item:last-of-type{ border-bottom:0; }
.ai-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px; }
.ai-name{ font-weight:600; font-size:15px; }
.ai-qty{ font:600 13px var(--font-num); color:var(--ink-faint); white-space:nowrap; }
.status-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; padding:3px; border-radius:12px; background:var(--surface-2); }
.status-btn{
  height:36px; padding:0 2px; border:0; border-radius:9px;
  background:transparent; color:var(--ink-faint);
  font-size:12px; font-weight:600; white-space:nowrap;
  transition:background-color .18s, color .18s, transform .12s var(--ease-out), box-shadow .18s;
}
.status-btn:active{ transform:scale(.94); }
.status-btn[class*="sel-"]{ background:var(--raised); box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 0 0 1px currentColor; }
.status-btn.sel-arrived{ color:var(--good); }
.status-btn.sel-not_arrived, .status-btn.sel-out_of_stock{ color:var(--bad); }
.status-btn.sel-delayed{ color:var(--warn); }

/* ============ history ============ */
.hist-card{ padding:0; overflow:hidden; }
.hist-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:14px 14px 14px 16px; border:0; background:none; text-align:left;
  transition:background-color .15s;
}
.hist-head:active{ background:var(--surface-2); }
.hh-left{ display:flex; flex-direction:column; min-width:0; }
.hh-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.chev{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-faint); transition:transform .28s var(--ease-out); }
.chev .ic{ width:15px; height:15px; stroke-width:2.4; }
.chev.open{ transform:rotate(90deg); }
.hist-body{ padding:2px 16px 16px; border-top:.5px solid var(--line-strong); }
.hist-body.opening{ animation:unfold .32s var(--ease-out); }
.hist-flag{ display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; background:var(--bad-soft); color:var(--bad); font-size:11px; font-weight:600; line-height:1.6; }

/* ============ lists (distributors / items) ============ */
.list-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border:0; border-bottom:.5px solid var(--line-strong);
  background:none; text-align:left; font:inherit;
  transition:background-color .15s;
}
.list-row:last-child{ border-bottom:0; }
button.list-row:active{ background:var(--surface-2); }
.lr-main{ display:block; flex:1; min-width:0; }
.lr-title{ display:block; font-size:15.5px; font-weight:600; line-height:1.3; }
.lr-title .tag-warn{ font-size:11px; margin-left:4px; vertical-align:1px; }
.lr-sub{ display:block; font-size:12.5px; line-height:1.4; color:var(--ink-faint); margin-top:2px; }
.lr-chev{ width:17px; height:17px; color:var(--ink-faint); opacity:.7; }
.lr-actions{ display:flex; gap:8px; flex-shrink:0; }
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:0;
  display:grid; place-items:center; background:var(--surface-2); color:var(--ink-dim);
  transition:transform .12s var(--ease-out), background-color .15s;
}
.icon-btn .ic{ width:19px; height:19px; }
.icon-btn:active{ transform:scale(.9); background:var(--surface-3); }
.sched-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.sched-chips{ align-items:center; }
.sched-chips .chip{ height:22px; font:600 11.5px var(--font-mono); }
.chip-note{ font-size:12px; color:var(--ink-faint); margin-left:3px; }

.filter-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
.filter-row::-webkit-scrollbar{ display:none; }
.pill-select{
  flex:1 0 auto; min-width:148px; max-width:220px; height:36px; padding:0 30px 0 14px;
  border:0; border-radius:18px; background-color:var(--surface-2); color:var(--ink);
  font:500 14px var(--font-ui); -webkit-appearance:none; appearance:none;
  background-position:right 11px center;
}
.pill-select.on{ background-color:var(--accent-soft); color:var(--accent); font-weight:600; }
.chip-toggle{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border:0; border-radius:18px; background:var(--warn-soft); color:var(--warn);
  font:600 13.5px var(--font-ui); white-space:nowrap;
}
.chip-toggle .ic{ width:15px; height:15px; stroke-width:2.2; }
.chip-toggle.on{ background:var(--warn); color:var(--bg); }

.cc-row{ gap:10px; }
.cc-in{
  width:56px; height:42px; flex-shrink:0; border:0; border-radius:11px;
  background:var(--surface-2); color:var(--ink); text-align:center;
  font:700 17px var(--font-num); -webkit-appearance:none; appearance:none;
}
.cc-in:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--accent); }
.cc-field{ display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.cc-field small{ font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.cc-row .btn-sm{ flex-shrink:0; }
.cc-row.done{ animation:rowout .3s var(--ease-out) forwards; }

/* ============ sheets ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--scrim); opacity:0; transition:opacity .3s ease;
}
.modal-overlay.open{ opacity:1; }
.modal{
  position:relative; width:100%; max-width:640px;
  max-height:90vh; max-height:90dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 18px calc(22px + var(--safe-bottom));
  border-radius:24px 24px 0 0; background:var(--surface);
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
  transform:translateY(100%); transition:transform .4s var(--ease-out);
}
.modal-overlay.open .modal{ transform:translateY(0); }
.grabber{ width:38px; height:5px; border-radius:3px; background:var(--line-strong); margin:0 auto 14px; }
.modal h2{ font-size:23px; margin:4px 2px 18px; }
.modal .btn + .btn{ margin-top:8px; }
.modal .btn-row .btn{ margin-top:0; }
.modal-hint{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:14px; border-radius:12px; background:var(--warn-soft); color:var(--ink-dim); font-size:13.5px; line-height:1.45; }
.modal-hint .ic{ width:18px; height:18px; color:var(--warn); margin-top:1px; }

.set-group{ margin-bottom:24px; }
.set-label{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 4px 8px; }
.set-note{ font-size:13px; line-height:1.45; color:var(--ink-faint); margin:8px 4px 0; }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; padding:3px; border-radius:12px; background:var(--surface-2); }
.seg button{ height:38px; border:0; border-radius:9px; background:none; color:var(--ink-dim); font:600 14px var(--font-ui); transition:background-color .2s, color .2s, box-shadow .2s; }
.seg button.on{ background:var(--raised); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:12px; background:var(--surface-2); cursor:pointer; }
.switch-row b{ display:block; font-weight:600; }
.switch-row small{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; line-height:1.35; }
.switch{ position:relative; width:51px; height:31px; flex-shrink:0; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch span{ position:absolute; inset:0; border-radius:16px; background:var(--line-strong); transition:background-color .2s; pointer-events:none; }
.switch span::after{ content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .28s var(--ease-out); }
.switch input:checked + span{ background:var(--good); }
.switch input:checked + span::after{ transform:translateX(20px); }
.backup-card{ display:flex; gap:12px; align-items:flex-start; padding:14px; margin-bottom:10px; border-radius:12px; background:var(--surface-2); }
.backup-card .ic{ color:var(--good); margin-top:1px; }
.backup-card.stale .ic{ color:var(--warn); }
.backup-card b{ display:block; font-weight:600; }
.backup-card small{ display:block; font-size:12.5px; line-height:1.45; color:var(--ink-faint); margin-top:3px; }
.set-foot{ text-align:center; font-size:12.5px; color:var(--ink-faint); margin:4px 0 10px; }

/* confirm action sheet */
.ask-overlay{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 10px calc(10px + var(--safe-bottom));
  background:var(--scrim); opacity:0; transition:opacity .22s ease;
}
.ask-overlay.open{ opacity:1; }
.ask{ width:100%; max-width:420px; transform:translateY(110%); transition:transform .34s var(--ease-out); }
.ask-overlay.open .ask{ transform:none; }
.ask-card{ overflow:hidden; border-radius:16px; background:var(--surface); text-align:center; }
.ask-title{ padding:16px 18px 4px; font-size:15px; font-weight:600; }
.ask-body{ padding:0 18px 16px; font-size:13.5px; line-height:1.45; color:var(--ink-dim); border-bottom:.5px solid var(--line-strong); }
.ask-btn, .ask-cancel{ width:100%; height:56px; border:0; background:var(--surface); font:600 18px var(--font-ui); }
.ask-btn{ color:var(--accent); }
.ask-btn.danger{ color:var(--bad); }
.ask-btn:active, .ask-cancel:active{ background:var(--surface-2); }
.ask-cancel{ margin-top:8px; border-radius:16px; color:var(--ink); }

/* ============ toast ============ */
.toast{
  position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + 12px); z-index:60;
  max-width:480px; min-height:48px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px;
  border-radius:14px; background:var(--toast-bg); color:var(--toast-ink);
  font-size:14.5px; font-weight:500; box-shadow:var(--float-shadow);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .22s ease, transform .34s var(--ease-out), bottom .25s var(--ease-out);
}
.toast.show{ opacity:1; transform:none; pointer-events:auto; }
.toast .t-msg{ flex:1; }
.toast .t-act{ margin:-8px -4px -8px 0; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--toast-act); font:700 14.5px var(--font-ui); }
body.has-dock .toast{ bottom:calc(var(--tabbar-h) + 84px); }

/* ============ motion ============ */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } }
@keyframes bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
@keyframes pop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
@keyframes unfold{ from{ opacity:0; transform:translateY(-6px); } }
@keyframes rowout{ to{ opacity:0; transform:translateX(24px); } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (min-width:520px){
  .cat-grid{ grid-template-columns:1fr 1fr 1fr; }
}