/* Sydney Tools Store App — brand theme.
   Brand: red #cb0000, near-black ink, white surfaces, Montserrat (the same
   palette + typeface as sydneytools.com.au). Light, retail-clean look. */

/* Montserrat, self-hosted (one variable woff2, latin subset) so the app never
   depends on Google Fonts being reachable from the shop's network. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("assets/fonts/montserrat.woff2") format("woff2");
}

:root {
  --red: #cb0000;
  --red-dark: #a50000;
  --red-grad: linear-gradient(135deg, #e21b1b 0%, #cb0000 55%, #a80303 100%);
  --red-sh: 0 8px 20px rgba(203,0,0,.26);
  /* Motion curves (Emil Kowalski's design-eng skill): built-in easings feel limp;
     these give UI motion its punch. --out for enter/press, --io for on-screen
     movement, --drawer is the iOS bottom-sheet curve. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* One documented corner-radius scale (Taste skill 4.4 shape-lock) so shapes
     read as designed, not ad-hoc. xs=thumbnails, sm=inputs/small controls,
     md=buttons/rows/banners, lg=cards, xl=sheets & modals, full=pills. */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  --ink: #16181c;
  --body: #3c4148;
  --hint: #868e98;
  --line: #ece7e6;
  --bg: #f6f3f2;          /* warm off-white so red meets a harmonious ground */
  --card: #ffffff;
  --ok: #1f9d55;
  --amber: #b4740a; --amber-soft: #fbeed7;
  --green: #0f9d58; --green-soft: #e8f6ee;
  /* The app is a light design on white surfaces. Pin the colour scheme so a
     phone in DARK MODE (esp. iOS / Telegram) doesn't recolour form controls —
     that's what was turning typed search text white-on-white. */
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Force readable dark text + caret in every input, regardless of the device's
   dark-mode user-agent styling (iOS overrides `color` with -webkit-text-fill-color). */
input, textarea, select {
  color: var(--ink); -webkit-text-fill-color: var(--ink); caret-color: var(--red); opacity: 1;
}
input::placeholder, textarea::placeholder { -webkit-text-fill-color: var(--hint); }
html { height: 100%; background: var(--bg); overscroll-behavior: none; }
body {
  min-height: 100%;  /* grow with content so the bottom padding really clears the nav */
  background: var(--bg); color: var(--ink);
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.45;
  /* stop an overscroll at the top/bottom from dragging the Telegram page behind us */
  overscroll-behavior: none;
  padding-bottom: calc(76px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
/* Lock the page behind a full-screen overlay without MOVING anything. Pinning
   with position:fixed drops the sticky header and exposes a jumbled,
   half-scrolled grid behind the sheet, so we just freeze overflow in place. */
html.noscroll, body.noscroll { overflow: hidden; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  /* A clean, rich red. The blend into the canvas is done by ::after below the
     header (a long, soft fade) rather than a hard colour stop inside the box —
     so it never looks cut short. */
  background: linear-gradient(178deg, #e21d1d 0%, #cf0505 52%, #c40000 100%);
  /* grows to clear the notch + Telegram's fullscreen Close/menu buttons */
  padding: calc(12px + max(var(--tg-top, 0px), env(safe-area-inset-top, 0px))) 14px 18px;
}
/* Feather the red down into the page: a soft red wash that fades to nothing a
   good ~46px below the header so the transition reads as a gradient, not a seam.
   Sits above the page content (pointer-events:none) so taps pass straight through. */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 46px;
  background: linear-gradient(180deg,
    rgba(199,0,0,.22) 0%, rgba(199,0,0,.10) 40%, rgba(199,0,0,.03) 72%, rgba(199,0,0,0) 100%);
  pointer-events: none;
}
/* live status pill — sits at the right of the header, logo to the left */
.statuspill {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: var(--r-lg); padding: 5px 11px 5px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .2px; max-width: 58vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.statuspill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.statuspill.ok   { background: rgba(255,255,255,.16); color: #fff; }
.statuspill.ok::before   { background: #46d17f; box-shadow: 0 0 0 2px rgba(70,209,127,.35); }
.statuspill.warn { background: #fff3d6; color: #8a5a00; }
.statuspill.warn::before { background: #e8920a; }
.statuspill.bad  { background: #fff; color: var(--red); }
.statuspill.bad::before  { background: var(--red); }

.brand { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 20px; margin-bottom: 13px; }
.logo { height: 13px; display: block; }
.searchbar { display: flex; align-items: center; gap: 8px; position: relative; }
.mag { position: absolute; left: 13px; color: var(--hint); pointer-events: none; }
#q {
  flex: 1; border: none; border-radius: var(--r-md); padding: 12px 12px 12px 40px;
  background: #fff; color: var(--ink); font-size: 15px; font-family: inherit;
  outline: none; box-shadow: 0 6px 18px rgba(120,0,0,.16);
  /* The blinking cursor: make it the brand red so it's visible on the white
     field (the default caret was white-on-white). */
  caret-color: var(--red);
}
#q::placeholder { color: var(--hint); }
.scan {
  width: 46px; height: 46px; border: none; border-radius: var(--r-md);
  background: #fff; color: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(120,0,0,.16); flex: 0 0 auto;
}
.scan:active { transform: scale(.94); }

/* ---------- main / grid ---------- */
main { padding: 12px; }
.note { color: var(--hint); text-align: center; padding: 30px 18px; font-weight: 500; }
/* A scan the scanner couldn't place: what to do next, then the small print. */
.teach-note { padding: 26px 20px; line-height: 1.45; }
.teach-note p { margin: 0 0 10px; }
.teach-note b { color: var(--text, inherit); }
.teach-note .hint { font-size: 12.5px; opacity: .8; margin-top: 14px; }
h4.section {
  margin: 4px 2px 10px; font-size: 11.5px; color: var(--hint);
  text-transform: uppercase; letter-spacing: .9px; font-weight: 800;
}
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: linear-gradient(180deg, #fff, #fdfcfc); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 8px 20px rgba(20,24,31,.05);
  display: flex; flex-direction: column; transition: transform .13s var(--ease-out), box-shadow .2s var(--ease-out);
}
.card:active { transform: scale(.99); }
.card .ph {
  aspect-ratio: 1; background: #fff; display: flex; align-items: center;
  justify-content: center; position: relative; cursor: pointer;
}
.card .ph img { width: 88%; height: 88%; object-fit: contain; }
.card .ph .noimg { font-size: 36px; }
.clr {
  position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 3px 7px; border-radius: 6px;
}
.card .body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; cursor: pointer; }
.card .name {
  font-size: 12px; font-weight: 600; color: var(--body); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.card .price { font-weight: 800; font-size: 16.5px; color: var(--ink); }
.card .was { color: var(--hint); text-decoration: line-through; font-weight: 500; font-size: 12px; margin-left: 6px; }
.card .model { color: var(--hint); font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }

/* card cart controls */
.card .cartrow { padding: 0 10px 11px; }
.addbtn {
  width: 100%; border: none; border-radius: var(--r-sm); padding: 10px 0;
  background: var(--red-grad); color: #fff; font-weight: 800; font-size: 12.5px;
  letter-spacing: .3px; transition: transform .12s var(--ease-out), filter .15s ease;
}
.addbtn:active { transform: scale(.97); filter: brightness(.93); }
.qtyrow {
  display: flex; align-items: center; justify-content: space-between;
  background: #fdf0f0; border: 1.5px solid var(--red); border-radius: var(--r-sm); overflow: hidden;
}
.qtyrow button {
  width: 42px; padding: 7px 0; border: none; background: none;
  color: var(--red); font-size: 19px; font-weight: 800;
}
.qtyrow b { color: var(--red); font-size: 14px; }

.sentinel { text-align: center; color: var(--hint); font-size: 12px; font-weight: 700; padding: 16px 12px 22px; }

/* one-tap reprint button on a product photo (recent grid) */
.reprintbtn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(17,19,24,.62); color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.reprintbtn:active { background: rgba(17,19,24,.85); }
.reprintbtn:disabled { opacity: .6; }

/* price-change / reprint queue rows (Bank tab) */
.pclist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pcrow {
  background: linear-gradient(180deg, #fff, #fdfcfc); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; gap: 11px; padding: 10px; align-items: center;
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 6px 16px rgba(20,24,31,.04);
}
.pcrow img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: var(--r-xs); flex: 0 0 auto; }
.pcrow .noimg { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.pcrow .mid { flex: 1; min-width: 0; }
.pcrow .name { font-size: 11.5px; font-weight: 600; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcrow .pcprice { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.pcrow .pcprice s { color: var(--hint); font-weight: 500; }
.pcrow .pcprice b { color: var(--red); }
.pcrow .pcprice .model { color: var(--hint); font-weight: 600; font-size: 10px; margin-left: 4px; }
.pcrow .rp { flex: 0 0 auto; }

/* type-ahead suggestions */
.suglist { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 6px 16px rgba(20,24,31,.04); }
.sug {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: none; border-bottom: 1px solid var(--line);
  color: var(--ink); padding: 14px 13px; font-size: 14px; font-weight: 600;
}
.sug:last-child { border-bottom: none; }
.sug:active { background: #fdf0f0; }
.sug-i { width: 17px; height: 17px; color: var(--hint); flex: 0 0 auto; }
.sug span { flex: 1; min-width: 0; }

/* ---------- browse ---------- */
.catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat {
  background: linear-gradient(180deg, #fff, #fdfcfc); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-md); padding: 16px 14px; font-size: 13px; font-weight: 700; text-align: left;
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 6px 16px rgba(20,24,31,.045);
}
.cat:active { border-color: var(--red); }
.crumb { color: var(--red); background: none; border: none; font-size: 13.5px; font-weight: 700; padding: 6px 0 10px; }
.sublist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sub {
  background: linear-gradient(180deg, #fff, #fdfcfc); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-md);
  padding: 14px 13px; text-align: left; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(20,24,31,.04);
}
.sub em { color: var(--hint); font-style: normal; font-weight: 700; font-size: 11px; }
.quickchips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.quickchips::-webkit-scrollbar { display: none; }
.qchip {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--body);
}

/* ---------- cart ---------- */
.cartlist { display: flex; flex-direction: column; gap: 8px; }
.cline {
  background: linear-gradient(180deg, #fff, #fdfcfc); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; gap: 11px; padding: 11px; align-items: center;
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 6px 16px rgba(20,24,31,.04);
}
.cline img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: var(--r-xs); flex: 0 0 auto; }
.cline .noimg { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.cline .mid { flex: 1; min-width: 0; }
.cline .name { font-size: 11.5px; font-weight: 600; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cline .price { font-weight: 800; font-size: 13.5px; }
.cline .qtyrow { width: 116px; flex: 0 0 auto; }
.cline .rm { border: none; background: none; color: var(--hint); font-size: 16px; padding: 4px 6px; }
.cart-summary {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 2px 10px; font-weight: 700; font-size: 13px; color: var(--body);
}
.btn.wide { width: 100%; font-size: 15.5px; }
.cart-clear { display: block; margin: 12px auto 0; background: none; border: none; color: var(--hint); font-size: 12.5px; font-weight: 600; text-decoration: underline; }

/* ---------- navigation: floating bar + More ---------- */
.navbar {
  position: fixed; z-index: 20; left: 10px; right: 10px;
  bottom: calc(8px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  display: flex; gap: 2px; padding: 5px;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid rgba(20,24,31,.07); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(20,24,31,.16), 0 2px 6px rgba(20,24,31,.06);
  max-width: 560px; margin: 0 auto;
}
.nb {
  flex: 1 1 0; min-width: 0; position: relative; border: none; background: none; color: #8d94a0;
  height: 52px; border-radius: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.nb:active { transform: scale(.94); }
.nb svg { width: 22px; height: 22px; flex: none; }
.nb span { font-size: 10px; font-weight: 800; letter-spacing: .1px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb.active { color: var(--red); background: #fdeeee; }
.nb.open { color: var(--ink); background: #f0f1f3; }
.nb .badge { top: 3px; right: calc(50% - 22px); }
.ndot { position: absolute; top: 9px; right: calc(50% - 15px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff; }

.more {
  position: fixed; inset: 0; z-index: 19; background: rgba(9,11,15,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-end;
  animation: fadein .18s ease-out;
}
.more-card {
  width: 100%; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 26px 26px 0 0;
  padding: 8px 16px calc(92px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  animation: rise .26s var(--ease-drawer); box-shadow: 0 -10px 30px rgba(0,0,0,.12);
}
.more-h { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px 14px; }
.more-h b { font-size: 17px; color: var(--ink); }
.more-h .linkbtn { color: var(--red); font-weight: 800; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 480px) { .mgrid { grid-template-columns: repeat(4, 1fr); } }
.mt {
  position: relative; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 6px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0;
  transition: transform .12s, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.mt:active { transform: scale(.96); }
.mti { position: relative; width: 44px; height: 44px; border-radius: 14px; background: #fdeeee; color: var(--red);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mti svg { width: 24px; height: 24px; }
.mti .badge { top: -6px; right: -10px; }
.mt b { font-size: 12.5px; color: var(--ink); line-height: 1.2; }
.mt small { font-size: 10.5px; color: var(--hint); font-weight: 600; line-height: 1.25; }
.mt.editing { border-style: dashed; }
.mt.pinned { border: 2px solid var(--red); background: #fffafa; }
.mtpin { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 2px 6px;
  border-radius: 8px; background: #f0f1f3; color: var(--body); }
.mt.pinned .mtpin { background: var(--red); color: #fff; }
.badge {
  position: absolute; top: 3px; right: 22%; background: var(--red); color: #fff;
  border-radius: var(--r-sm); font-size: 10px; font-style: normal; padding: 1px 5.5px; font-weight: 800;
  border: 2px solid #fff;
}

/* ---------- buttons ---------- */
.btn {
  border: none; border-radius: var(--r-md); background: var(--red-grad); color: #fff;
  font-size: 15px; font-weight: 800; padding: 14px 16px; letter-spacing: .2px;
  transition: transform .12s var(--ease-out), filter .15s ease;
}
.btn:active { transform: scale(.975); filter: brightness(.94); }
.btn:disabled { opacity: .5; }
.btn.small { font-size: 12.5px; padding: 9px 15px; border-radius: var(--r-sm); }
.btn.ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.btn.ghost:active { background: #fdf0f0; filter: none; }

/* ---------- inline icons (replacing emoji in controls) ---------- */
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.16em; }
/* controls that carry an icon + label sit as a centred flex row */
.btn, .addbtn, .mtool, .chipbtn, .linkbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.linkbtn { gap: 5px; }
/* image placeholder: a muted product-box glyph sized by the container's font-size */
.noimg { color: #ccc5c3; display: inline-flex; align-items: center; justify-content: center; }
.noimg .ic { width: 1em; height: 1em; vertical-align: 0; }
/* close buttons + row remove: a real X, sized to the button */
.sheet-close .ic, .scan-top button .ic, .cline .rm .ic { width: 1em; height: 1em; vertical-align: 0; }
.reprintbtn .ic { width: 15px; height: 15px; }
/* small status chips */
.pchip .ic, .mmpill .ic { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(9,11,15,.74);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  touch-action: none;                 /* a drag on the dimmed area moves nothing */
  display: flex; align-items: flex-end;
}
.sheet-card {
  background: #fff; width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto; position: relative;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;                /* card scrolls internally; never chains out */
  display: flex; flex-direction: column; gap: 10px;
  animation: rise .26s var(--ease-drawer);
}
@keyframes rise { from { transform: translateY(40px); opacity: .6; } }
.grab { width: 46px; height: 5px; border-radius: 3px; background: #cfd4dc; align-self: center; margin: 3px 0 1px; }
.sheet-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  background: rgba(17,19,24,.62); color: #fff;
  border: none; border-radius: 50%; width: 38px; height: 38px;
  font-size: 17px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28); cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sheet-close:active { background: rgba(17,19,24,.85); }
.sheet-card { gap: 14px; }
.sheet-hero { position: relative; align-self: stretch; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130% 120% at 50% 0%, #ffffff 0%, #faf7f6 60%, var(--bg) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 16px; }
.sheet-hero img { width: 56vw; max-width: 240px; max-height: 200px; object-fit: contain; display: block; }
#shName { font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; }
.sheet-model { color: var(--hint); font-size: 11.5px; font-weight: 700; letter-spacing: .4px; margin-top: -10px; }

/* price panel — groups price, edit, and the live-check banners tidily */
.pricepanel { background: var(--bg); border-radius: var(--r-md); padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.pricepanel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-price { font-size: 26px; font-weight: 900; line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sheet-price .was { color: var(--hint); text-decoration: line-through; font-size: 15px; font-weight: 500; }
.sheet-price .tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--red); align-self: center; }
.ploading { font-size: 14px; font-weight: 700; color: var(--hint); display: inline-flex; align-items: center; gap: 9px; }
.ploading::before {
  content: ""; width: 16px; height: 16px; border: 2.5px solid var(--line);
  border-top-color: var(--red); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pedit {
  flex: 0 0 auto;
  border: 1.5px solid var(--line); background: #fff; color: var(--body);
  border-radius: var(--r-sm); padding: 8px 14px; font-size: 12.5px; font-weight: 700;
}
.pedit.on { border-color: var(--red); color: var(--red); }
.priceform { display: flex; gap: 6px; }
.priceform input {
  flex: 1; min-width: 56px; background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 9px 10px; font-size: 14px; font-family: inherit;
}

/* full-width banner — website cross-check / expiry, always tidy */
.banner {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: 12px; font-weight: 700; line-height: 1.3;
}
.banner .btxt { flex: 1; min-width: 0; }
.banner .btxt b { font-weight: 800; }
.banner.ok { background: #eef9f1; border-color: #cfead9; color: #167a41; }
.banner.warn { background: #fff6e6; border-color: #f2d9a6; color: #98620a; }
.banner .usebtn {
  flex: 0 0 auto;
  border: 1.5px solid currentColor; background: rgba(255,255,255,.6); color: inherit;
  border-radius: var(--r-xs); padding: 5px 11px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}

/* stacked field — small label above a left-aligned control */
.field { display: flex; flex-direction: column; gap: 9px; }
.flabel { color: var(--hint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.stepper {
  display: inline-flex; align-self: flex-start; align-items: center;
  background: var(--bg); border-radius: var(--r-sm); padding: 3px 4px;
}
.stepper button { width: 54px; height: 40px; border: none; background: none; color: var(--red); font-size: 24px; font-weight: 800; }
.stepper b { min-width: 44px; text-align: center; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--body);
  border-radius: var(--r-lg); padding: 8px 14px; font-size: 12.5px; font-weight: 700;
}
.chip.sel { background: var(--red-grad); border-color: var(--red); color: #fff; box-shadow: var(--red-sh); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 4px; }
.sheet-actions .btn { padding: 16px 14px; border-radius: var(--r-md); font-size: 15.5px; }
.sheet-actions .btn.ghost { background: #fff5f5; border-color: #f2c9c9; }
.sheet-actions .btn.ghost:active { background: #fdeaea; }
/* the secondary full-width actions (preview / merch ticket) sit as calm tiles */
.btn.ghost.small.wide { background: var(--bg); border-color: var(--line); color: var(--body);
  border-width: 1px; font-weight: 700; padding: 12px 14px; border-radius: var(--r-md); }
.btn.ghost.small.wide:active { background: #efeae9; }
.sheet-status { text-align: center; color: var(--hint); font-size: 12.5px; min-height: 2px; font-weight: 600; }
/* ---------- label preview ---------- */
.preview {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(9,11,15,.74);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.preview-card {
  background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 420px;
  max-height: 88vh; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); position: relative;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.preview-head .sheet-close { position: static; width: 34px; height: 34px; }
.preview-summary { display: flex; flex-direction: column; gap: 7px; }
.preview-summary .prow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; }
.preview-summary .prow span:first-child { color: var(--hint); font-weight: 700; }
.preview-summary .prow.big span:last-child { font-size: 18px; font-weight: 900; }
.preview-summary .drop { color: var(--red); }
.preview-doc {
  flex: 1; min-height: 220px; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.preview-doc iframe, .preview-doc embed { width: 100%; height: 100%; border: none; }
.preview-doc .pvmsg { color: var(--hint); font-size: 12.5px; font-weight: 600; text-align: center; padding: 20px; }
.preview-doc.loading .pvmsg::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px;
  border: 2.5px solid var(--line); border-top-color: var(--red); border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ---------- scanner ---------- */
.scanner { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
.scan-top { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 14px 16px; font-weight: 700; }
.scan-top button { background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; }
#scanView { flex: 1; position: relative; overflow: hidden; background: #000; }
#scanVideo { width: 100%; height: 100%; object-fit: cover; }
.scan-box {
  position: absolute; left: 8%; right: 8%; top: 33%; height: 26%;
  border: 3px solid #fff; border-radius: var(--r-md);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); pointer-events: none; overflow: hidden;
}
.scan-laser {
  position: absolute; left: 6%; right: 6%; height: 2.5px; top: 50%;
  background: var(--red); box-shadow: 0 0 8px 1px var(--red);
  animation: laser 1.6s ease-in-out infinite;
}
@keyframes laser { 0%,100% { top: 14%; } 50% { top: 86%; } }
/* Hold to scan: the laser only sweeps (and the box only goes red) while the
   Scan button is held. */
.scanner:not(.holding) .scan-laser { opacity: 0; animation-play-state: paused; }
.scanner.holding .scan-box { border-color: var(--red); }
.mscan-frame.idle .mscan-laser { opacity: 0; animation-play-state: paused; }
.scan-hold { all: unset; box-sizing: border-box; width: 100%; height: 64px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: linear-gradient(180deg, #e3191c, #b30000); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(203,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .12s; }
.scan-hold .ic { width: 26px; height: 26px; }
.scan-hold.on { transform: scale(.97); filter: brightness(1.12);
  box-shadow: 0 0 0 5px rgba(227,25,28,.28), 0 3px 10px rgba(203,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.scan-hold:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mscan + .scan-hold { margin: 10px 0 2px; }
.scan-hint {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  color: #fff; font-size: 13px; font-weight: 700; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); padding: 0 20px;
}
.scan-foot { display: flex; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: #000; }
.scan-foot input { flex: 1; background: #1c1c1e; border: none; color: #fff; -webkit-text-fill-color: #fff; caret-color: #fff; border-radius: var(--r-sm); padding: 11px 12px; font-family: inherit; }

/* ---------- batch print overlay ---------- */
.batch { position: fixed; inset: 0; z-index: 60; background: rgba(12,14,18,.6); display: flex; align-items: center; justify-content: center; padding: 22px; }
.batch-card {
  background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 380px;
  padding: 20px 18px; display: flex; flex-direction: column; gap: 12px;
  max-height: 76vh;
}
.batch-card h3 { font-size: 16px; font-weight: 800; }
.bar { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
#batchBar { height: 100%; width: 0%; background: var(--red); border-radius: 4px; transition: width .25s; }
.batch-now { color: var(--hint); font-size: 12.5px; font-weight: 600; min-height: 17px; }
#batchLog { list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#batchLog li { font-size: 12px; font-weight: 600; color: var(--body); }

/* ---------- toast / locked / skeleton ---------- */
.toast {
  position: fixed; bottom: 82px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 11px 16px;
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 26px rgba(0,0,0,.3);
  max-width: 88vw; text-align: center;
}
.toast.ok { box-shadow: inset 3px 0 0 var(--ok), 0 8px 26px rgba(0,0,0,.3); }
.toast.err { box-shadow: inset 3px 0 0 var(--red), 0 8px 26px rgba(0,0,0,.3); }
/* connection-lost banner — pinned above everything so it's always visible */
.netbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #4a2a00; color: #ffd9a6;
  padding: calc(8px + max(var(--tg-top, 0px), env(safe-area-inset-top, 0px))) 14px 8px;
  font-size: 12.5px; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.netbar button {
  background: #ffd9a6; color: #4a2a00; border: none; border-radius: var(--r-xs);
  padding: 5px 12px; font-size: 12px; font-weight: 800;
}
.locked { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.locked-card { text-align: center; padding: 24px; }
.locked-emoji { font-size: 44px; margin-bottom: 10px; }
.locked-card p { color: var(--hint); margin-top: 6px; }
.locked-card { max-width: 340px; }
.locked-id { margin: 14px auto; font-weight: 800; color: var(--ink); background: #fff;
  border: 1.5px solid var(--red); border-radius: var(--r-sm); padding: 10px 14px; display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
.locked-sub { font-size: 12.5px; }
.skel { position: relative; overflow: hidden; background: #e9ebef; border-radius: var(--r-md); aspect-ratio: .78; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
/* explicit "working" state above the shimmer cards, so a slow search reads as
   loading rather than empty/broken */
.loadhead {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 2px 13px; font-size: 14px; font-weight: 700; color: var(--body);
  animation: fadein .2s var(--ease-out) both;
}
.spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--red);
  animation: spin .7s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* home: a section heading with a link on the right */
.hsec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hsec .section { margin-bottom: 8px; }
.hsec .linkbtn { font-size: 13px; font-weight: 700; color: var(--red); background: none; border: none; padding: 4px 2px; }

/* recently-searched: one row that swipes, never a ragged wrap */
#recentSearch { margin-bottom: 6px; }
.rsrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 12px;
  scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.rsrow::-webkit-scrollbar { display: none; }
.rschip {
  flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; height: 38px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 0 14px 0 11px; font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,24,31,.05);
}
.rschip.code span { text-transform: uppercase; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.rschip svg { width: 15px; height: 15px; color: var(--hint); flex: none; }

/* browse: an even grid of category tiles, each with its own icon */
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.btile {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 6px 16px rgba(20,24,31,.04); transition: transform .12s ease;
}
.btile:active { transform: scale(.98); border-color: var(--red); }
.bico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fdeeee; color: var(--red);
  display: grid; place-items: center; }
.bico svg { width: 21px; height: 21px; }
.bname { font-size: 13px; font-weight: 700; line-height: 1.2; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* search-results list header with the multi-select toggle */
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listhead .section { margin-bottom: 8px; }
.linkbtn { background: none; border: none; color: var(--red); font-size: 12.5px; font-weight: 800; padding: 4px 2px; white-space: nowrap; }

/* multi-select: picked cards + a floating action bar */
.selecting .card { cursor: pointer; }
.selecting .card .cartrow { display: none; }        /* one selection affordance at a time */
.card.picked { outline: 3px solid var(--red); outline-offset: -3px; }
.selecting .card .ph::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; z-index: 3;
  border-radius: 50%; border: 2px solid #cfd4dc; background: rgba(255,255,255,.92);
}
.card.picked .ph::after {
  content: "✓"; border-color: var(--red); background: var(--red); color: #fff;
  font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.selbar {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(72px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 9px 10px 9px 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
}
.selbar #selCancel { background: none; border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 8px 6px; }
.selbar #selCount { font-weight: 800; font-size: 13px; flex: 1; text-align: center; }
.selbar .btn.small:disabled { opacity: .45; }

/* cancelable print window — the "undo" grace period before paper is committed */
.undobar {
  position: fixed; left: 12px; right: 12px; z-index: 72;
  bottom: calc(80px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 12px 12px 12px 16px;
  box-shadow: 0 8px 26px rgba(0,0,0,.34); overflow: hidden;
}
.undobar #undoText { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.undobar #undoCancel {
  flex: 0 0 auto; background: #fff; color: var(--ink); border: none;
  border-radius: var(--r-sm); padding: 8px 15px; font-size: 13px; font-weight: 800;
}
.undobar::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--red); transform-origin: left; animation: undocount var(--undo-ms, 2400ms) linear forwards;
}
@keyframes undocount { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------- Merchandising ---------------- */
.mcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0 12px; }
.mback {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; color: var(--red); border: 1.5px solid var(--red);
  border-radius: 999px; font-size: 13px; font-weight: 800; padding: 5px 13px 5px 10px;
  margin-right: 6px;
}
.mback:active { background: #fdf0f0; }
/* Breadcrumb trail: muted grey path (tappable) with one bold current crumb, so
   the red Back button is the single strong affordance — not a wall of red links. */
.mcrumb-i { background: none; border: none; color: var(--body); font-size: 13px; font-weight: 600; padding: 2px 0; }
.mcrumb-i.cur { color: var(--ink); font-weight: 800; }
.mcrumb .msep { color: var(--hint); font-size: 12px; }
.mtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 2px 12px; }
.chipbtn {
  background: #fff; color: var(--red); border: 1.5px solid var(--red);
  border-radius: 999px; font-size: 12px; font-weight: 800; padding: 6px 13px;
}
.chipbtn:active { background: #fdf0f0; }
.chipbtn.on { background: var(--red); color: #fff; }
/* Shelf-order toolbar: understated, hierarchical actions instead of three loud
   red pills. Select-all reads as the primary action, Clear is neutral, and the
   below-min filter carries an amber warning tint (filled when active). Labels
   never wrap. The selection count drops to its own quiet line beneath. */
.mtool {
  background: #fff; color: var(--body); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 8px 15px;
  white-space: nowrap; transition: transform .12s ease, background .15s ease;
}
.mtool:active { transform: scale(.95); }
.mtool.primary { color: var(--red); background: #fff5f5; border-color: #f0cccc; }
.mtool.primary:active { background: #fdeaea; }
.mtool.filter { color: var(--amber); background: var(--amber-soft); border-color: #eed7a6; margin-left: auto; }
.mtool.filter.on { color: #fff; background: var(--amber); border-color: var(--amber); }
.mcount { flex-basis: 100%; color: var(--hint); font-size: 12px; font-weight: 700; margin: 1px 2px 0; }
.merchlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 96px; align-items: start; }
.mvhead, .mfhead { grid-column: 1 / -1; }
.mvhead { font-size: 12px; font-weight: 900; color: #fff; background: var(--ink); justify-self: start;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .6px; margin: 8px 0 0; }
.mfhead { font-size: 10.5px; font-weight: 800; color: var(--hint); letter-spacing: 1px;
  padding: 2px 2px 0; margin-top: 2px; }
.mrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px;
}
.mrow.on { border-color: var(--red); box-shadow: 0 0 0 1.5px var(--red); }
.mchk input { width: 20px; height: 20px; accent-color: var(--red); }
.mrank { color: var(--hint); font-size: 11px; font-weight: 800; width: 16px; text-align: center; flex: 0 0 auto; }
.mph { width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r-xs); overflow: hidden; }
.mph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mph .noimg { font-size: 22px; }
.mbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mname { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mmodel { color: var(--hint); font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.mlvl { color: var(--red); font-weight: 800; }
.mrow.shelf { border-left: 3px solid var(--red); }
/* Green = on a min/max, red = not on one (LOW amber, below, still wins). */
.mrow.mm-on  { border-left: 3px solid #1a8f3c; background: #f3fbf5; }
.mrow.mm-off { border-left: 3px solid var(--red); background: #fff5f5; }
.mmpill { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 1px 6px;
  border-radius: 999px; margin-left: 4px; vertical-align: middle; letter-spacing: .2px; }
.mmpill.on   { color: #0f7a32; background: #dcf5e4; }
.mmpill.off  { color: #b40000; background: #ffe0e0; }
.mmpill.warn { color: #8a5a00; background: #ffeec2; }
.minv { display: block; font-size: 10.5px; font-weight: 700; color: var(--hint); margin-top: 1px; }
.minv.low { color: var(--red); }
.mrow.low { border-left: 3px solid #e8a800; background: #fffaf0; }
/* Product-sheet live-stock panel (BEA on-hand, min/max, retail, cost) — styled
   as tab cells like the ticket's MODEL/GP band: uppercase label over a bold value. */
.shinv { margin: 10px 0 2px; }
.shinv-head { font-size: 11px; font-weight: 800; color: var(--hint); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shinv-cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sic { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 9px 10px;
  text-align: center; background: var(--card); }
.sic small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--hint); text-transform: uppercase; margin-bottom: 3px; }
.sic b { display: block; font-size: 20px; font-weight: 900; color: var(--red); letter-spacing: .3px; }
.sic.low { border-color: #e8a800; background: #fffaf0; }
.sic.low b { color: #c47a00; }
/* other-branch stock (network-wide) */
.shbranch { margin-top: 12px; }
.shbranch-head { font-size: 11px; font-weight: 800; color: var(--hint);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
.shbranch-list { display: flex; flex-wrap: wrap; gap: 7px; }
.bchip { display: inline-flex; align-items: center; gap: 2px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 11px;
  font-size: 12px; font-weight: 600; color: var(--body); }
.bchip b { color: var(--ink); font-weight: 800; }
.mcopies { display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  background: #fdf0f0; border: 1.5px solid var(--red); border-radius: var(--r-sm); overflow: hidden; }
.mcopies button { background: none; border: none; color: var(--red); font-size: 18px; font-weight: 800; width: 30px; height: 34px; }
.mcopies b { color: var(--red); font-size: 13px; min-width: 16px; text-align: center; }
.merchbar {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(72px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
}
.merchbar .btn { box-shadow: 0 8px 26px rgba(203,0,0,.34); }
.mbrands .cat { font-weight: 800; }
.msearch { display: flex; gap: 8px; margin: 0 2px 14px; }
.msearch input {
  flex: 1; min-width: 0; font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px;
}
.msearch input:focus { outline: none; border-color: var(--red); }
.msearch .chipbtn { flex: 0 0 auto; padding: 0 16px; }
.strow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); margin: 6px 2px; background: var(--card); }
.strow .sid { font-weight: 800; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.strow em { color: var(--hint); font-style: normal; font-size: 11.5px; font-weight: 700; }
.strow .strm { color: var(--red); font-weight: 800; }
.diagout { white-space: pre-wrap; word-break: break-word; font-size: 11px; line-height: 1.4;
  background: #0f1115; color: #d6e2ff; border-radius: var(--r-sm); padding: 12px; margin: 12px 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }

/* inline merch scanner (camera lives in the page, not a full-screen takeover) */
.mscan { position: relative; width: 100%; aspect-ratio: 16/10; background: #000; border-radius: var(--r-md); overflow: hidden; }
.mscan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mscan-frame { position: absolute; inset: 18% 12%; border: 2.5px solid rgba(255,255,255,.9); border-radius: var(--r-sm);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); }
.mscan-hint { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 9px 8px 4px; min-height: 20px; }
.mscan-actions { display: flex; gap: 8px; align-items: center; margin: 2px 2px 6px; }
.mscan-actions #mscanInput { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); text-transform: uppercase; }
.mscan-actions #mscanInput::placeholder { color: var(--hint); text-transform: none; }
.mscan-actions .btn.small { flex: 0 0 auto; }

/* ---------------- Merch product cards (image-forward grid) ---------------- */
.pcard {
  background: linear-gradient(180deg,#fff,#fdfcfc); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 8px 20px rgba(20,24,31,.05);
  transition: transform .13s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pcard:active { transform: scale(.985); }
/* Selected ring: an OUTER ring (not inset). An inset ring is painted over by the
   white image panel at the top of the card, so the top looked thin and the
   bottom thick — an outer ring sits outside the border box and is uniform. */
.pcard.on { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 10px 22px rgba(203,0,0,.16); }
.pcard .pimg {
  position: relative; aspect-ratio: 1.1; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pcard .pimg img { width: 82%; height: 82%; object-fit: contain; }
.pcard .pimg .noimg { font-size: 34px; opacity: .5; }
.pchip {
  position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
.pchip.on  { background: var(--green-grad, linear-gradient(135deg,#19b268,#0f9350)); color: #fff; }
.pchip.off { background: rgba(255,255,255,.92); color: var(--hint); }
.pfab {
  position: absolute; bottom: 10px; right: 10px; width: 37px; height: 37px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red); color: var(--red);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 2px 8px rgba(20,24,31,.14); transition: transform .13s var(--ease-out), background .2s, color .2s;
}
.pfab svg { width: 19px; height: 19px; }
.pfab:active { transform: scale(.94); }
.pcard.on .pfab { background: var(--red); color: #fff; }
.pcbody { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pcname {
  font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}
.pcmodel { color: var(--hint); font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.pcstock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hint);
  margin-top: 5px; white-space: nowrap; }
.pcstock .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.pcstock b { color: var(--ink); font-weight: 800; }
.pcstock.low .sdot { background: var(--amber); }
.pclow { margin-left: auto; background: var(--amber-soft); color: var(--amber); font-weight: 800;
  font-size: 10px; padding: 3px 8px; border-radius: 999px; }
.pccopies { display: flex; align-items: center; gap: 2px; margin-top: 9px;
  background: #fdf0f0; border: 1.5px solid var(--red); border-radius: var(--r-sm); overflow: hidden; align-self: stretch; }
.pccopies button { flex: 1; background: none; border: none; color: var(--red); font-size: 18px; font-weight: 800; height: 34px; }
.pccopies b { color: var(--red); font-size: 13px; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------- Search-by-brand modal ---------------- */
.brandbtn {
  width: 100%; background: linear-gradient(180deg,#fff,#fdfcfc); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 1px 3px rgba(20,24,31,.05);
  padding: 14px 15px; display: flex; align-items: center; gap: 13px; text-align: left; margin-bottom: 16px;
  transition: transform .12s ease;
}
.brandbtn:active { transform: scale(.99); }
.brandbtn .bb-ic { width: 44px; height: 44px; border-radius: var(--r-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: #fdf0f0; color: var(--red); }
.brandbtn .bb-ic svg { width: 22px; height: 22px; }
.brandbtn .bb-tx { flex: 1; min-width: 0; }
.brandbtn .bb-tx b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.brandbtn .bb-tx small { font-size: 12px; color: var(--hint); font-weight: 600; }
.brandbtn .bb-chev { width: 18px; height: 18px; color: var(--hint); flex: 0 0 auto; }

.bmodal { position: fixed; inset: 0; z-index: 48; background: rgba(9,11,15,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; }
.bmodal-card { background: #fff; width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; flex-direction: column;
  max-height: 82vh; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); animation: rise .24s ease-out; }
.bmodal-head h3 { font-size: 19px; font-weight: 900; margin: 6px 2px 12px; }
.bmodal-search { display: flex; align-items: center; gap: 10px; background: var(--bg);
  border-radius: 999px; padding: 12px 15px; }
.bmodal-search svg { width: 18px; height: 18px; color: var(--hint); flex: 0 0 auto; }
.bmodal-search input { flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); }
.bmodal-list { overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; display: flex; flex-direction: column; }
.brow { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: none; border: none; padding: 11px 6px; border-bottom: 1px solid var(--line); }
.brow:last-child { border-bottom: none; }
.brow:active { background: #fdf0f0; }
.brow .bmono { width: 42px; height: 42px; border-radius: var(--r-sm); flex: 0 0 auto; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 15px; letter-spacing: .3px; }
.brow .binfo { flex: 1; min-width: 0; }
.brow .binfo { display: flex; flex-direction: column; gap: 1px; }
.brow .bname { font-size: 15px; font-weight: 700; color: var(--ink); }
.brow .bsub { font-size: 11.5px; font-weight: 600; color: var(--hint); }
.brow .bchev { width: 17px; height: 17px; color: var(--hint); flex: 0 0 auto; }

/* global press feedback on the common tappables */
.cat, .sub, .qchip, .chipbtn, .rschip, .chip, .mback, .sug, .cline, .pcrow, .strow { transition: transform .12s ease; }
.cat:active, .sub:active, .qchip:active, .chipbtn:active, .rschip:active, .chip:active, .sug:active, .strow:active { transform: scale(.985); }

/* ---------------- page / view transitions ---------------- */
/* Every time the main view re-renders (tab switch or drill-down) it gets a brief
   rise+fade so navigation feels like moving between pages, not a hard swap. */
@keyframes viewenter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main.view-enter { animation: viewenter .30s var(--ease-out); }
/* staggered entrance for the cards/rows inside a freshly rendered list */
@keyframes cardpop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
main.view-enter .grid > *,
main.view-enter .merchlist > *,
main.view-enter .catgrid > *,
main.view-enter .bgrid > *,
main.view-enter .sublist > *,
main.view-enter .cartlist > *,
main.view-enter .pclist > * {
  animation: cardpop .30s var(--ease-out) both;
}
main.view-enter .grid > *:nth-child(2),
main.view-enter .merchlist > *:nth-child(2) { animation-delay: .03s; }
main.view-enter .grid > *:nth-child(3),
main.view-enter .merchlist > *:nth-child(3) { animation-delay: .06s; }
main.view-enter .grid > *:nth-child(4),
main.view-enter .merchlist > *:nth-child(4) { animation-delay: .09s; }
main.view-enter .grid > *:nth-child(n+5),
main.view-enter .merchlist > *:nth-child(n+5) { animation-delay: .12s; }

/* respect reduced-motion: kill the decorative animation + sheet slide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------- Stock Take (SOH import) ---------------- */
.soh { padding: 4px 2px 96px; }
.soh-title { font-size: 17px; font-weight: 800; margin: 6px 2px 4px; color: var(--ink); }
.soh-drop {
  display: block; border: 2px dashed #d9d2d0; border-radius: var(--r-lg);
  padding: 30px 16px; text-align: center; cursor: pointer; background: linear-gradient(180deg,#fff,#fdfcfc);
  transition: border-color .15s, background .15s;
  box-shadow: 0 1px 2px rgba(20,24,31,.04);
}
.soh-drop.over { border-color: var(--red); background: rgba(203,0,0,.05); }
.soh-drop-in { display: flex; flex-direction: column; gap: 3px; align-items: center; color: var(--body); font-weight: 700; }
.soh-ico { font-size: 26px; line-height: 1; }
.soh-drop-in span { color: var(--hint); font-size: 12px; font-weight: 500; }
.soh-bar { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 10px; font-size: 13px; font-weight: 700; color: var(--body); }
.soh-list { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
.soh-row {
  display: grid; grid-template-columns: 20px 66px 1fr auto 48px; align-items: center;
  gap: 10px; padding: 8px; border-radius: var(--r-sm); font-size: 12.5px;
}
.soh-row:nth-child(odd) { background: var(--bg); }
.soh-ck { width: 17px; height: 17px; accent-color: var(--red); margin: 0; cursor: pointer; }
.soh-gp { font-weight: 800; color: var(--red); }
.soh-name { color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soh-name em { color: var(--hint); font-style: normal; font-weight: 600; }
.soh-mm { color: var(--red); font-weight: 800; font-size: 10.5px; white-space: nowrap; }
.soh-soh { color: var(--hint); font-weight: 700; white-space: nowrap; font-size: 11.5px; }
.soh-lvl { background: #fdf0f0; border: 1px solid var(--red); color: var(--ink);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 12px; line-height: 1.4; margin: 14px 2px 4px; }
.soh-lvl.warn { background: var(--bg); border-color: var(--line); color: var(--body); }
.soh-copies {
  width: 48px; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 5px 2px; background: #fff;
  font-family: inherit; -moz-appearance: textfield;
}
.soh-copies:focus { outline: none; border-color: var(--red); }

/* Merch: backend/build/BEA-freshness stamp, filter-chip row, off-range modal */
.mstamp { display: block; margin: -6px 2px 14px; color: var(--hint); font-size: 11.5px; letter-spacing: .2px; }
.mchips { flex-wrap: wrap; row-gap: 6px; margin-top: -4px; }
.omodal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.omodal-head h3 { margin: 0; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omodal-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.omodal-actions .x { all: unset; cursor: pointer; font-size: 16px; line-height: 1; color: var(--hint); padding: 6px 9px; border-radius: 9px; }
.omodal-actions .x:hover { background: var(--line); color: var(--ink); }
#omodalList { padding-bottom: 90px; }   /* room for the fixed print bar */

/* Merch scanner v2 — a wide barcode band (matches MERCH_BOX in app.js), a sweep
   line so it reads as "live", and a confirm card that pauses scanning. */
.mscan-frame { inset: auto; left: 8%; right: 8%; top: 30%; height: 40%; overflow: hidden;
  transition: border-color .2s var(--ease-out); }
.mscan-laser { position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 10px rgba(255,59,48,.85), 0 0 2px #fff;
  animation: mlaser 1.5s ease-in-out infinite alternate; }
@keyframes mlaser { from { transform: translateY(-38px); } to { transform: translateY(38px); } }
.mscan-frame.paused { border-color: var(--good); }
.mscan-frame.paused .mscan-laser { animation-play-state: paused; opacity: .35; }
.mscan-confirm { margin: 8px 2px 2px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 10px; box-shadow: 0 10px 26px rgba(20,24,31,.10);
  animation: viewenter .22s var(--ease-out) both; }
.mscc { display: flex; gap: 10px; align-items: center; }
.mscc-img { width: 58px; height: 58px; flex: none; border-radius: var(--r-sm); background: #fff;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mscc-img img { width: 88%; height: 88%; object-fit: contain; }
.mscc-img .noimg { font-size: 24px; opacity: .5; }
.mscc-body { min-width: 0; flex: 1; }
.mscc-name { font-weight: 800; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.mscc-meta { font-size: 12px; color: var(--body); margin-top: 3px; }
.mscc-actions { display: flex; gap: 8px; margin-top: 10px; }
.mscc-actions .btn { flex: 1; }
.mscc-actions .btn.ghost { flex: 0 0 auto; }

/* ---- Merch brand screen: the three range scopes as radio cards ---- */
.scopes { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.scope { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px;
  cursor: pointer; transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out), transform .13s var(--ease-out); }
.scope:active { transform: scale(.99); }
.scope .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hint); flex: none; position: relative;
  transition: border-color .2s var(--ease-out); }
.scope .sb { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.scope .st { font-weight: 850; font-size: 14.5px; color: var(--ink); letter-spacing: -.1px; }
.scope .sd { font-size: 12px; color: var(--body); margin-top: 2px; line-height: 1.35; }
.scope .sc { flex: none; font-weight: 900; font-size: 17px; color: var(--ink); min-width: 28px; text-align: right; }
.scope.on { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 8px 20px rgba(203,0,0,.10); }
.scope.on .radio { border-color: var(--red); }
.scope.on .radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--red); }
.scope.on .sc { color: var(--red); }

/* ---- List filters: segmented controls + a warning toggle, one scrolling row ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 2px 0 12px; max-width: 100%; }
/* A brand with many platforms (12V…80V) makes this wider than the phone. Scroll
   it inside its own pill rather than pushing the whole page sideways, which put
   the last voltage out of reach. */
.seg { display: inline-flex; flex: 0 1 auto; max-width: 100%; background: #ebe7e6; border-radius: var(--r-full);
  padding: 3px; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 0 0 auto; }
.seg button { all: unset; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--body);
  padding: 7px 13px; border-radius: var(--r-full); white-space: nowrap; line-height: 1;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.seg button.on { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.fchip { all: unset; cursor: pointer; flex: none; font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1;
  padding: 9px 13px; border-radius: var(--r-full); border: 1.5px solid var(--line); color: var(--body);
  display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; background: var(--card);
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out); }
.fchip .ic { width: 14px; height: 14px; }
.fchip.on { background: rgba(255,176,46,.16); border-color: #e2a223; color: #7a4f00; }
.listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.listhead .section { min-width: 0; }

/* Bank tab: destructive clear sits under Print all, visually quieter */
.bankclear { margin-top: 8px; }

/* ================= RST stock checks ================= */
/* Product sheet: the RST panel is a prominent action when nothing is open, and
   turns into the status card when there is one. */
.rstpanel { display: flex; flex-direction: column; gap: 8px; }
.rstbtn {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(180deg, #fff8ea, #fdf1d8); border: 1.5px solid #f0cf8a;
  color: #7a4d00; border-radius: var(--r-md); padding: 12px 14px;
  transition: transform .13s var(--ease-out), box-shadow .2s var(--ease-out);
  box-shadow: 0 1px 2px rgba(122,77,0,.06), 0 6px 16px rgba(180,116,10,.10);
}
.rstbtn:active { transform: scale(.985); }
.rstbtn .rb-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rstbtn .rb-ic svg { width: 20px; height: 20px; }
.rstbtn .rb-tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rstbtn .rb-tx b { font-size: 14.5px; font-weight: 800; color: #5c3a00; }
.rstbtn .rb-tx small { font-size: 11.5px; font-weight: 600; color: #9a6a12; }
.rstbtn .rb-chev { width: 18px; height: 18px; color: #b58a3a; flex: 0 0 auto; }
.rst-last { font-size: 11.5px; font-weight: 600; color: var(--hint); padding: 0 4px; display: flex; gap: 6px; align-items: center; }
.rst-last b { color: var(--body); }
.rst-last .rl-dot { width: 5px; height: 5px; border-radius: 50%; background: #cfd4dc; }

/* Status card (open RST) */
.rstcard {
  border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  border: 1.5px solid; animation: rstin .28s var(--ease-out) both;
}
@keyframes rstin { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.rstcard.pending  { background: #fff8ea; border-color: #f0cf8a; }
.rstcard.mismatch { background: #fff0f0; border-color: #f2b3b3; }
.rstcard.done     { background: #eef8f1; border-color: #bfe3cb; }
.rstcard .rc-head { display: flex; align-items: center; gap: 8px; }
.rstcard .rc-head b { font-size: 14px; font-weight: 800; color: var(--ink); flex: 1; }
.rstcard .rc-nums { display: flex; gap: 8px; }
.rstcard .rc-num { flex: 1; background: rgba(255,255,255,.75); border-radius: var(--r-sm); padding: 7px 10px;
  display: flex; flex-direction: column; gap: 1px; }
.rstcard .rc-num small { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--hint); }
.rstcard .rc-num b { font-size: 18px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.rstcard .rc-num.counted b { color: var(--amber); }
.rstcard.mismatch .rc-num.bea b { color: var(--red); }
.rstcard .rc-meta { font-size: 11.5px; font-weight: 600; color: var(--body); }
.rstcard .rc-meta b { color: var(--ink); }
.rstcard .rc-comment { font-size: 12.5px; color: var(--body); background: rgba(255,255,255,.7);
  border-left: 3px solid #e2c48a; padding: 6px 10px; border-radius: 0 var(--r-xs) var(--r-xs) 0; font-style: italic; }
.rstcard.mismatch .rc-comment { border-left-color: #e79a9a; }
.rstcard .rc-actions { display: flex; gap: 8px; }
.rstcard .rc-actions .btn { flex: 1; }
.rstpill { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.rstpill .ic { width: 11px; height: 11px; }
.rstpill.pending  { background: #ffe8b8; color: #7a4d00; }
.rstpill.mismatch { background: #ffd6d6; color: #a10000; }
.rstpill.done     { background: #d5f1de; color: #0f6b2e; }
.rstpill.closed   { background: #e5e8ec; color: #4b5563; }

/* Live-stock cell when an RST count stands in for BEA's number */
.sic.rst-over b { color: var(--amber); }
.sic .sic-sub { font-size: 10px; font-weight: 700; color: var(--hint); margin-top: 1px; }

/* Cards: the RST chip + the circular RST button opposite the tick */
.pchip.rst { background: linear-gradient(135deg, #e8a11c, #c77b05); color: #fff;
  animation: chippop .32s var(--ease-out) both; }
.pcard .pchip.rst { top: 40px; left: 10px; }      /* stacked under the min/max chip */
.pchip.rst.mismatch { background: linear-gradient(135deg, #ee3b3b, #b40000); }
.pchip.rst.done { background: linear-gradient(135deg, #2bb673, #0f8a48); }
@keyframes chippop { from { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.card .ph .pchip.rst { top: 8px; right: 8px; left: auto; }
.prst {
  position: absolute; bottom: 10px; left: 10px; width: 37px; height: 37px; border-radius: 50%;
  background: #fff; border: 2px solid #e2c48a; color: #a86e08;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 2px 8px rgba(20,24,31,.14); transition: transform .13s var(--ease-out), background .2s, color .2s, border-color .2s;
}
.prst svg { width: 18px; height: 18px; }
.prst:active { transform: scale(.94); }
.pcard.rst .prst { background: var(--amber); border-color: var(--amber); color: #fff; }
.pcard.rst-mismatch .prst { background: var(--red); border-color: var(--red); color: #fff; }
.pcstock .pcrst { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--amber);
  background: var(--amber-soft); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.pcstock .pcrst s { color: #a86e08; font-weight: 800; }

/* The modal: a bottom sheet with the same drawer curve as the product sheet */
.rmodal { position: fixed; inset: 0; z-index: 58; background: rgba(9,11,15,.62);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: flex-end;
  animation: fadein .18s var(--ease-out) both; }
.rmodal-card { background: #fff; width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; position: relative;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; animation: rise .28s var(--ease-drawer) both;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rmodal.closing { animation: fadeout .18s var(--ease-out) both; }
.rmodal.closing .rmodal-card { animation: sink .2s var(--ease-io) both; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes sink { to { transform: translateY(40px); opacity: .4; } }
.rm-head { display: flex; flex-direction: column; gap: 3px; padding-right: 44px; }
.rm-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--amber); }
.rm-kicker .ic { width: 14px; height: 14px; }
.rm-head h3 { font-size: 17px; font-weight: 800; line-height: 1.25; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-last { font-size: 12px; font-weight: 600; color: var(--body); background: var(--bg); border-radius: var(--r-sm);
  padding: 8px 11px; display: flex; align-items: center; gap: 8px; }
.rm-last .ic { width: 15px; height: 15px; color: var(--hint); flex: 0 0 auto; }
.rm-last b { color: var(--ink); }
.rm-last.open { background: #fff8ea; color: #5c3a00; }
.rm-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.rm-grid .sic { min-height: 74px; }
.rm-bea b { font-size: 26px; }
.rm-stepper { display: flex; align-items: center; gap: 2px; margin-top: 2px;
  background: #fff; border: 1.5px solid var(--amber); border-radius: var(--r-sm); overflow: hidden; }
.rm-stepper button { width: 42px; height: 40px; border: none; background: none; color: var(--amber); font-size: 20px; font-weight: 800; }
.rm-stepper button:active { background: var(--amber-soft); }
.rm-stepper input { flex: 1; min-width: 0; width: 100%; border: none; outline: none; text-align: center; font-family: inherit;
  font-size: 22px; font-weight: 900; color: var(--amber); background: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.rm-stepper input::-webkit-outer-spin-button, .rm-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rm-diff { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--hint); padding: 0 2px; transition: color .2s; }
.rm-diff.short { color: var(--red); }
.rm-diff.over { color: var(--amber); }
.rm-diff.same { color: var(--ok); }
.rmodal .flabel em { font-style: normal; font-weight: 700; color: var(--red); font-size: 10px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.rm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-quick .chip { font-size: 12px; padding: 7px 12px; }
.rmodal textarea {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 11px 12px; font-size: 14px; font-family: inherit; line-height: 1.4; resize: none;
  transition: border-color .15s, box-shadow .15s;
}
.rmodal textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(180,116,10,.14); }
.rm-submit { position: relative; overflow: hidden; }
.rm-submit.busy .rm-submit-txt { opacity: .6; }
.rm-submit.ok { background: linear-gradient(135deg, #2bb673, #0f8a48) !important; }
.rm-submit.ok .rm-submit-txt { animation: chippop .3s var(--ease-out) both; }
.rm-submit .spin { position: absolute; right: 16px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* Stock tab: outstanding RSTs */
.rstsec { padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rstsec-head { display: flex; align-items: center; gap: 8px; }
.rstsec-head h2 { font-size: 17px; font-weight: 800; margin: 6px 2px 0; color: var(--ink); flex: 1; }
.rstsec-head .rscount { font-size: 12px; font-weight: 800; background: var(--amber); color: #fff; border-radius: 999px; padding: 3px 9px; }
.rstsec-head .rscount.zero { background: #e5e8ec; color: var(--hint); }
.rstsec-head .chipbtn { margin-top: 6px; }
.rstsec-empty { background: var(--green-soft); color: #0f6b2e; border-radius: var(--r-md); padding: 14px 16px; font-weight: 700;
  font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.rstsec-empty .ic { width: 20px; height: 20px; }
.rstsec-note { font-size: 11.5px; font-weight: 600; color: var(--hint); padding: 0 2px; }
.rstlist { display: flex; flex-direction: column; gap: 10px; }
.rstrow {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px; border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(20,24,31,.05), 0 8px 20px rgba(20,24,31,.05);
  transition: transform .13s var(--ease-out), opacity .28s var(--ease-io), max-height .32s var(--ease-io), margin .32s var(--ease-io), padding .32s var(--ease-io);
  max-height: 400px; overflow: hidden; animation: rstin .3s var(--ease-out) both;
}
.rstrow.pending  { border-left-color: var(--amber); }
.rstrow.mismatch { border-left-color: var(--red); background: linear-gradient(180deg,#fff,#fff7f7); }
.rstrow.done     { border-left-color: var(--green); opacity: .92; }
.rstrow.leaving  { opacity: 0; transform: translateX(24px); max-height: 0; margin-top: -10px; padding-top: 0; padding-bottom: 0; border-width: 0; }
.rstrow .rr-top { display: flex; align-items: flex-start; gap: 10px; }
.rstrow .rr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rstrow .rr-name b { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rstrow .rr-name small { font-size: 11px; font-weight: 700; color: var(--hint); letter-spacing: .2px; }
.rstrow .rr-nums { display: flex; gap: 6px; }
.rstrow .rr-num { background: var(--bg); border-radius: var(--r-xs); padding: 5px 9px; display: flex; flex-direction: column; min-width: 58px; }
.rstrow .rr-num small { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--hint); }
.rstrow .rr-num b { font-size: 16px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.rstrow .rr-num.counted b { color: var(--amber); }
.rstrow .rr-num.bad b { color: var(--red); }
.rstrow .rr-num.ok b { color: var(--ok); }
.rstrow .rr-meta { font-size: 11.5px; font-weight: 600; color: var(--body); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.rstrow .rr-meta b { color: var(--ink); }
.rstrow .rr-comment { font-size: 12.5px; color: var(--body); background: var(--bg); border-left: 3px solid #e2c48a;
  padding: 6px 10px; border-radius: 0 var(--r-xs) var(--r-xs) 0; font-style: italic; }
.rstrow.mismatch .rr-comment { border-left-color: #e79a9a; }
.rstrow .rr-flag { font-size: 12px; font-weight: 700; color: var(--red); background: #fff0f0; border-radius: var(--r-xs); padding: 6px 10px;
  display: flex; align-items: center; gap: 6px; }
.rstrow .rr-flag .ic { width: 14px; height: 14px; }
.rstrow .rr-warn { font-size: 11.5px; font-weight: 700; color: var(--amber); display: flex; align-items: center; gap: 6px; }
.rstrow .rr-warn .linkbtn { color: var(--red); font-size: 11.5px; }
.rstrow .rr-actions { display: flex; gap: 8px; align-items: center; }
.rstrow .rr-actions .btn { flex: 1; }
.rstrow .rr-actions .btn.done { background: linear-gradient(135deg, #2bb673, #0f8a48); }
.rstrow .rr-actions .iconbtn { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; color: var(--hint);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rstrow .rr-actions .iconbtn svg { width: 17px; height: 17px; }
.rstrow .rr-actions .iconbtn:active { background: var(--bg); }
.rstrow.done .rr-actions { display: none; }
.rstdone-list { display: flex; flex-direction: column; gap: 6px; }
.rstdone { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--body); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.rstdone:last-child { border-bottom: none; }
.rstdone b { color: var(--ink); }
.rstdone .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tab badge for outstanding RSTs (reuses the bank badge look) */
#stockBadge.rst { background: var(--amber); }

/* Stock tab: the Google Sheet connection (owner only) */
.sheetcard { border-radius: var(--r-md); padding: 11px 13px; display: flex; flex-direction: column; gap: 7px;
  border: 1.5px solid; font-size: 12.5px; animation: rstin .28s var(--ease-out) both; }
.sheetcard.on  { background: var(--green-soft); border-color: #bfe3cb; color: #0f6b2e; }
.sheetcard.off { background: #fff8ea; border-color: #f0cf8a; color: #7a4d00; }
.sheetcard.bad { background: #fff0f0; border-color: #f2b3b3; color: #a10000; }
.sheetcard .sc-top { display: flex; align-items: center; gap: 7px; }
.sheetcard .sc-top b { font-size: 13.5px; font-weight: 800; flex: 1; }
.sheetcard .sc-top .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.sheetcard .sc-src { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: rgba(255,255,255,.75); padding: 2px 7px; border-radius: 999px; }
.sheetcard p { margin: 0; font-weight: 600; line-height: 1.4; word-break: break-word; }
.sheetcard code { font-size: 11.5px; background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: 5px; }
.sheetcard .sc-actions { display: flex; gap: 8px; }
.sheetcard .sc-actions .btn { flex: 1; }
.sc-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--body); line-height: 1.45; }
.sc-steps b { color: var(--ink); font-weight: 800; }
.sc-steps code { font-size: 11.5px; background: var(--bg); padding: 1px 5px; border-radius: 5px; }
#scUrl { width: 100%; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 12px; font-size: 13px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
#scUrl:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(180,116,10,.14); }

/* Merch tag style picker (93x107 shelf tag vs the original folded A7) */
.stylepick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.stylehead { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 800;
  color: var(--hint); text-transform: uppercase; letter-spacing: .5px; }
.stylehead small { font-size: 11.5px; font-weight: 600; color: var(--body); text-transform: none;
  letter-spacing: 0; }
.stylepick .seg { align-self: flex-start; max-width: 100%; }
.stylepick .seg button { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.mbstyle { display: block; font-size: 10.5px; font-weight: 700; opacity: .75; margin-top: 2px; letter-spacing: .2px; }
#merchPrint { flex-direction: column; gap: 0; line-height: 1.15; }

/* RST sheet card: the read-back line */
.sheetcard .sc-reads{margin:6px 0 0;font-size:12px;color:var(--hint);display:flex;gap:6px;align-items:flex-start;line-height:1.35}
.sheetcard .sc-reads svg{width:14px;height:14px;flex:none;margin-top:1px}
.sheetcard .sc-reads.off{color:var(--warn,#b45309)}
.sheetcard .sc-err{color:var(--danger,#c0392b)}
/* ================= Sale tags (Merch → Sale tags) =================
   The preview mirrors the printed tag's face below the fold (78.7 x 104.6 mm,
   so 3:4) using the SAME brand colour and logo the renderer embeds — it's a
   preview, not a lookalike. Everything scales off the card width, so it reads
   the same on a small phone as on a big one. */
.stpreview { display: flex; justify-content: center; padding: 2px 0 18px; }
.stcard {
  --stred: #C92A28;
  width: min(232px, 62vw); aspect-ratio: 78.7 / 104.6; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.4%; padding: 6% 8% 9%; color: #fff; overflow: hidden; position: relative;
  background:
    radial-gradient(40% 27% at 73% 21%, rgba(255,255,255,.20), rgba(255,255,255,0) 70%),
    radial-gradient(155% 80% at 50% -14%, rgba(255,255,255,.34), rgba(255,255,255,0) 48%),
    radial-gradient(132% 132% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%),
    var(--stred);
  box-shadow: 0 10px 26px rgba(20,24,31,.22), inset 0 0 0 1px rgba(0,0,0,.12);
}
.stcard .stlogo { width: 55%; display: flex; align-items: center; justify-content: center; }
.stcard .stlogo img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.stcard .stlogo b { font-size: 15px; font-weight: 900; letter-spacing: .5px; }
/* Sizes are the printed tag's own proportions: the 18 mm figure, 13.5 mm SALE
   and 3.2 mm date line measured against the 71 mm printable body, then against
   this card's 84% content box. The offer box keeps the artwork's light-to-dark
   gradient ring (padding-box over border-box), in em so it tracks the figure. */
.stcard .stoff {
  display: flex; flex-direction: column; align-items: center; line-height: .86;
  border-radius: .15em; padding: .17em .28em .11em; border: .055em solid transparent;
  background:
    linear-gradient(180deg, #242428, #0E0E10) padding-box,
    linear-gradient(157deg, #fff 0%, #ffd7d7 9%, var(--stred) 36%, #5e100f 100%) border-box;
  box-shadow: 0 .06em .1em rgba(0,0,0,.38), inset 0 .02em .02em rgba(255,255,255,.10);
  font-size: 21cqw;
}
.stcard .stoff span { color: #FFD200; font-weight: 800; font-size: 1em; letter-spacing: -.02em; }
.stcard .stsale { font-weight: 800; font-size: 16cqw; letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.stcard .stdates { font-weight: 800; font-size: 3.8cqw; letter-spacing: .06em; text-align: center;
  text-shadow: 0 1px 1.5px rgba(0,0,0,.45); }
/* cqw above needs the card to be the query container; fall back to px sizes on
   browsers without container queries so the preview never collapses. */
.stcard { container-type: inline-size; }
@supports not (container-type: inline-size) {
  .stcard .stoff { font-size: 44px; }
  .stcard .stsale { font-size: 34px; }
  .stcard .stdates { font-size: 8px; }
}

.stgroup { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 18px; }
.stlabel { font-size: 12px; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em; }
.stlabel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sthint { font-size: 11.5px; font-weight: 600; color: var(--hint); }
.stinput {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; min-width: 0;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), opacity .18s var(--ease-out);
}
.stinput.wide { width: 100%; }
.stinput:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(203,0,0,.12); }
.stinput:disabled { opacity: .45; }
.strow2 { display: flex; align-items: center; gap: 8px; }
.strow2 .stinput { width: 92px; }
.stsuffix { font-size: 13px; font-weight: 700; color: var(--body); }

/* Dates on/off. A real switch, so "remove the dates" is one tap and obvious
   at a glance rather than hidden behind clearing the field. */
.stsw { all: unset; cursor: pointer; width: 46px; height: 27px; border-radius: var(--r-full);
  background: #d8d3d2; position: relative; flex: 0 0 auto;
  transition: background .2s var(--ease-out); }
.stsw span { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .22s var(--ease-drawer); }
.stsw.on { background: var(--red); }
.stsw.on span { transform: translateX(19px); }
.stsw:active span { width: 24px; }

.stqty { display: flex; align-items: center; gap: 10px; }
.stqty button { all: unset; cursor: pointer; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--card); color: var(--red);
  font-size: 19px; font-weight: 800; text-align: center; line-height: 40px; flex: 0 0 auto;
  transition: transform .12s var(--ease-out), background .15s ease; }
.stqty button:active { transform: scale(.94); background: #fdf0f0; }
.stqty input { font: inherit; font-size: 16px; font-weight: 800; color: var(--ink); text-align: center;
  width: 74px; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 6px; }
.stqty input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(203,0,0,.12); }
.stqty small { font-size: 12px; font-weight: 700; color: var(--hint); }

/* Generic confirm sheet (two-pass card printing asks to reload the tray). */
.cfm-body { white-space: pre-line; color: var(--body); font-size: 14px; font-weight: 600;
  line-height: 1.5; padding: 2px 2px 16px; }
.cfm-btns { display: flex; gap: 10px; }
.cfm-btns .btn { flex: 1; }

/* Cards: a second pass the user put off, offered again rather than lost. */
.cardpend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--amber-soft); border: 1.5px solid #e9d4a8; border-radius: var(--r-md);
  padding: 10px 12px; margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #7a4f00; }
.cardpend span { flex: 1; min-width: 140px; }

/* Data Merch Label runs (Stock Take -> background print job) */
.dsjob { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.dsjob.running { border-color: var(--red); }
.dsj-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; }
.dsj-h b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dsj-h span { flex: none; font-size: 12.5px; font-weight: 800; color: var(--red); }
.dsjob.paused .dsj-h span { color: #b26b00; }
.dsjob.done .dsj-h span { color: #1f8a3b; }
.dsj-bar { height: 6px; background: #eee; border-radius: 3px; margin: 8px 0 6px; overflow: hidden; }
.dsj-bar i { display: block; height: 100%; background: var(--red); transition: width .4s; }
.dsjob.done .dsj-bar i { background: #1f8a3b; }
.dsj-sub { font-size: 12px; font-weight: 700; color: var(--body); }
.dsj-reason { font-size: 12.5px; color: var(--ink); background: #fff7e6; border-radius: 8px; padding: 7px 9px; margin-top: 8px; line-height: 1.35; }
.dsj-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dsq { all: unset; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 5px; background: #e6e6e6;
  font-size: 10px; font-weight: 800; color: #555; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dsq.done, .dsq.skipped { background: #1f8a3b; color: #fff; }
.dsq.printing { background: var(--red); color: #fff; animation: dsPulse 1s ease-in-out infinite alternate; }
.dsq.held { background: #2f6fd0; color: #fff; }
.dsq.unsure { background: #f0a400; color: #fff; }
.dsq.failed { background: #111; color: #fff; }
@keyframes dsPulse { from { opacity: 1; } to { opacity: .45; } }
.dsj-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 10.5px; color: var(--body); margin-top: 8px; }
.dsj-key span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dsj-key em { flex-basis: 100%; font-style: normal; }
.dsj-key .dsq { min-width: 10px; width: 10px; height: 10px; border-radius: 3px; padding: 0; cursor: default; }
.dsj-act { display: flex; align-items: center; gap: 14px; margin-top: 10px; }

/* History: every print by everyone + website price moves */
.histlink { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 2px 0 16px; }
.histlink svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.histlink span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.histlink b { font-size: 14px; color: var(--ink); }
.histlink small { font-size: 12px; color: var(--body); font-weight: 600; }
.histlink em { font-style: normal; font-size: 22px; color: var(--hint); }
.histseg { margin: 4px 0 12px; }
.histq { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font: inherit; font-size: 14px; background: #fff; margin-bottom: 10px; }
.histusers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.histusers .chip small { opacity: .6; font-weight: 700; margin-left: 2px; }
.histlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.histday { margin: 10px 2px 4px; }
.hrow { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.hrow .mid { flex: 1; min-width: 0; }
.hrow .name { font-size: 13px; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.hrow .hsub { font-size: 11.5px; color: var(--hint); font-weight: 700; margin-top: 2px; }
.hrow .hmeta { font-size: 11.5px; color: var(--body); margin-top: 3px; }
.hprice { flex: none; text-align: right; font-size: 14px; font-weight: 800; color: var(--ink); display: flex;
  flex-direction: column; align-items: flex-end; gap: 1px; }
.hprice s { font-size: 11px; color: var(--hint); font-weight: 600; }
.hprice.down { color: #1f8a3b; }
.hprice.up { color: var(--red); }
.hreprint { display: inline-block; background: var(--red); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 10.5px; margin-left: 4px; }
.shh { background: var(--bg); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.shh div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 0; }
.shh div + div { border-top: 1px solid var(--line); }
.shh span { color: var(--body); }
.shh b { color: var(--ink); text-align: right; }
.shh s { color: var(--hint); font-weight: 500; }

/* product page: take a photo for a product the website has none for */
.sheet-hero { position: relative; }
.shphoto { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  background: rgba(17,19,24,.72); color: #fff; border-radius: 999px; padding: 7px 12px 7px 9px; font: inherit; font-size: 12px; font-weight: 800;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.shphoto svg { width: 16px; height: 16px; }
.shphoto.has { padding: 7px 9px; }
.shphoto.has span { display: none; }
.shphoto:disabled { opacity: .6; }

/* needs attention */
.attn-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.attn-tabs .chip b { margin-left: 4px; }
.attn-row { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; width: 100%; margin-bottom: 6px; }
.attn-row .name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.attn-row small { display: block; font-size: 11.5px; color: var(--hint); font-weight: 700; margin-top: 2px; }
.attn-row em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--red); white-space: nowrap; }

/* run check (pre-flight) */
.dsopt { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; }
.dsopt input { width: 18px; height: 18px; accent-color: var(--red); }
.dsprob { margin-top: 10px; }
.dsprob summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--red); padding: 4px 0 8px; }

/* scanner modes + the running strip in auto modes */
.scanseg { background: rgba(255,255,255,.14); }
.scanseg button { color: rgba(255,255,255,.75); font-size: 12px; padding: 7px 11px; }
.scanseg button.on { background: #fff; color: var(--ink); }
.scan-strip { position: absolute; left: 10px; right: 10px; bottom: 44px; background: rgba(255,255,255,.96); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 13px; color: var(--ink); }
.scan-strip .ss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; }
.scan-strip .ss-h small { color: var(--hint); font-weight: 700; font-size: 11px; white-space: nowrap; }
.scan-strip .ss-last { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.scan-strip .ss-last .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.scan-strip .ss-last .q { font-weight: 800; white-space: nowrap; }
.scan-strip .ss-last .q.ok { color: #1f8a3b; } .scan-strip .ss-last .q.bad { color: var(--red); }
.scan-strip .ss-undo { all: unset; cursor: pointer; color: var(--red); font-weight: 800; font-size: 12px; padding: 4px 6px; }
.scan-strip .ss-list { margin-top: 6px; font-size: 11.5px; color: var(--body); display: flex; flex-direction: column; gap: 2px; }
.scan-strip .ss-list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-strip .ss-warn { color: var(--red); font-weight: 700; margin-top: 4px; }
.scan-strip.flash { animation: ssflash .35s ease-out; }
@keyframes ssflash { from { box-shadow: 0 0 0 4px var(--red), 0 8px 24px rgba(0,0,0,.35); } }

/* stocktake page */
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; }
.st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.st-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.st-stat b { display: block; font-size: 20px; color: var(--ink); }
.st-stat span { font-size: 10.5px; color: var(--hint); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.st-stat.bad b { color: var(--red); }
.st-row { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; }
.st-row .mid { flex: 1; min-width: 0; }
.st-row .name { font-size: 13px; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-row .sub2 { font-size: 11px; color: var(--hint); font-weight: 700; margin-top: 2px; }
.st-row .cnt { all: unset; cursor: pointer; text-align: right; min-width: 64px; }
.st-row .cnt b { display: block; font-size: 17px; color: var(--ink); }
.st-row .cnt small { font-size: 10.5px; font-weight: 800; }
.st-row .cnt small.ok { color: #1f8a3b; } .st-row .cnt small.bad { color: var(--red); } .st-row .cnt small.na { color: var(--hint); }

/* stats bars */
.bars { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; }
.bar-row span:first-child { color: var(--body); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row i { display: block; height: 10px; border-radius: 5px; background: var(--red); min-width: 2px; }
.bar-row b { text-align: right; color: var(--ink); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 6px 0 2px; }
.spark i { flex: 1; background: var(--red); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.spark-x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--hint); font-weight: 700; margin-bottom: 12px; }

/* =====================================================================
   Polish pass — one feel across every screen
   ===================================================================== */
:root {
  /* Hint text was #868e98 on the warm off-white: ~3:1, hard to read under
     shop lighting. This keeps the quiet look at ~4.6:1. */
  --hint: #6c737d;
  --dur-press: 140ms; --dur-fast: 180ms; --dur-med: 240ms;
  --sh-1: 0 1px 2px rgba(20,24,31,.05), 0 4px 12px rgba(20,24,31,.05);
  --sh-2: 0 2px 6px rgba(20,24,31,.06), 0 10px 26px rgba(20,24,31,.08);
}

/* Every pressable thing answers the finger the same way. */
.hrow, .attn-row, .histlink, .st-row .cnt, .dsq, .dsjob .btn, .shphoto, .mt, .chip, .seg button {
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.hrow:active, .attn-row:active, .histlink:active { transform: scale(.985); background: #fffafa; }
.st-row .cnt:active, .dsq:active, .shphoto:active { transform: scale(.94); }
.seg button:active { transform: scale(.96); }

/* Product photos fade in when they arrive instead of popping in. Scoped to
   html.imgfade, which the script sets only once its load watcher is running,
   so a photo can never be left invisible. */
.imgfade .card .ph img, .imgfade .pcrow img, .imgfade .cline img, .imgfade .pcard img, .imgfade .rp-strip img {
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.imgfade img.ld { opacity: 1 !important; }

/* A busy button keeps its size and shows a spinner, not a ⏳ emoji. */
.bspin { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .6s linear infinite; opacity: .9; }

/* Toasts slide up from the nav and leave faster than they came. */
.toast {
  display: block; bottom: calc(86px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  opacity: 0; pointer-events: none; transform: translate(-50%, 10px) scale(.98);
  transition: opacity .16s ease, transform .16s var(--ease-out);
  border-radius: var(--r-md); padding: 12px 16px; line-height: 1.35;
  width: max-content; max-width: min(88vw, 440px);
}
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .22s ease, transform .26s var(--ease-out); }

/* More: tiles arrive in a quick cascade; the sheet sinks away on close. */
.more:not(.hidden):not(.closing) .mt { animation: cardpop .26s var(--ease-out) both; }
.more .mgrid .mt:nth-child(2) { animation-delay: .02s; } .more .mgrid .mt:nth-child(3) { animation-delay: .04s; }
.more .mgrid .mt:nth-child(4) { animation-delay: .06s; } .more .mgrid .mt:nth-child(n+5) { animation-delay: .08s; }
@keyframes sinkdown { to { transform: translateY(42%); opacity: 0; } }
@keyframes fadeaway { to { opacity: 0; } }
.more.closing { animation: fadeaway .17s ease forwards; }
.more.closing .more-card { animation: sinkdown .17s var(--ease-out) forwards; }

/* The newer lists join the page-turn cascade. */
main.view-enter .histlist > *, main.view-enter #stkBody .st-row, main.view-enter #attnBody .attn-row,
main.view-enter .dsjob, main.view-enter .histlink { animation: cardpop .32s var(--ease-out) both; }
main.view-enter .histlist > *:nth-child(2), main.view-enter #stkBody .st-row:nth-of-type(2) { animation-delay: .03s; }
main.view-enter .histlist > *:nth-child(3), main.view-enter #stkBody .st-row:nth-of-type(3) { animation-delay: .06s; }
main.view-enter .histlist > *:nth-child(n+4), main.view-enter #stkBody .st-row:nth-of-type(n+4) { animation-delay: .09s; }

/* Tag-style choices: three equal buttons that wrap their label instead of
   truncating it to "93×107 shelf t…". */
.stylepick .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; border-radius: var(--r-md); }
.stylepick .seg button { white-space: normal; line-height: 1.2; text-align: center; padding: 9px 6px; border-radius: 11px;
  overflow: visible; text-overflow: clip; display: flex; align-items: center; justify-content: center; }


/* ---- product page ---- */
/* Preview + Merch tag side by side: two calm tiles instead of two full rows. */
.sheet-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-tools .btn { margin: 0 !important; font-size: 13px; padding: 12px 10px; white-space: nowrap; }
/* Add to cart / Print stay in reach however far the page scrolls. */
.sheet-actions {
  position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 6;
  margin: 2px -16px calc(-18px - env(safe-area-inset-bottom));
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 14px);
  border-radius: 0;
}
.sheet-actions::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line); }
/* The price a customer reads, and how much they save. */
.sheet-price { font-size: 30px; letter-spacing: -.5px; }
.sheet-price .save { font-size: 11.5px; font-weight: 800; color: #fff; background: #1f8a3b; border-radius: 999px;
  padding: 3px 9px; align-self: center; letter-spacing: .2px; }
.sheet-model { letter-spacing: .3px; }
/* Live stock: one compact row, not a wall of tiles. */
.shinv-cells { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.sic { padding: 8px 6px; border-width: 1px; }
.sic b { font-size: 17px; color: var(--ink); }
.sic.low b { color: #c47a00; }
.sic small { font-size: 8.5px; letter-spacing: .8px; }
.shbranch-head { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.bchip { padding: 5px 9px; font-size: 11.5px; }
/* The hero: a touch more room for the photo. */
.sheet-hero img { max-height: 220px; }


/* ---- cart ---- */
.cart-head { display: flex; align-items: center; gap: 10px; margin: 4px 2px 10px; }
.cart-count { flex: 1; font-size: 12px; font-weight: 700; color: var(--body); }
.cart-clear2 { color: var(--hint); font-weight: 700; font-size: 12.5px; }
.cwrap { position: relative; border-radius: var(--r-md); background: #fbe9e9; overflow: hidden; }
.cwrap-rm { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--red); font-weight: 800;
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; opacity: .55; transition: opacity .15s ease; }
.cwrap-rm svg { width: 16px; height: 16px; }
.cwrap.armed { background: var(--red); }
.cwrap.armed .cwrap-rm { color: #fff; opacity: 1; }
.cline { touch-action: pan-y; position: relative; cursor: pointer; }
.cline .name { font-size: 12px; color: var(--ink); }
.fmtgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fmt { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 10px 4px; display: flex; flex-direction: column; gap: 2px;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.fmt:active { transform: scale(.96); }
.fmt b { font-size: 13px; color: var(--ink); }
.fmt small { font-size: 10.5px; color: var(--hint); font-weight: 700; }
.fmt.on { border-color: var(--red); background: #fff5f5; box-shadow: inset 0 0 0 1px var(--red); }
.fmt.on b { color: var(--red); }
/* The Print button stays above the nav however long the cart gets. */
.cartbar { position: sticky; bottom: calc(80px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px))); z-index: 5;
  margin-top: 14px; padding-top: 8px; }
.cartbar .btn { box-shadow: 0 10px 28px rgba(203,0,0,.32); padding: 16px; font-size: 16px; }

/* ---- empty states: an icon, a line, and the next thing to do ---- */
.empty { text-align: center; padding: 48px 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--body); }
.empty-ico { width: 64px; height: 64px; border-radius: 22px; background: #fdeeee; color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.empty-ico svg { width: 30px; height: 30px; }
.empty b { font-size: 16px; color: var(--ink); }
.empty p { font-size: 13px; line-height: 1.45; max-width: 300px; }


/* ---- scanner ---- */
/* Corner brackets instead of a full box: the eye reads the target, not a frame. */
#scanView .scan-box {
  border: none; border-radius: 18px;
  --c: rgba(255,255,255,.95); --l: 34px; --w: 4px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
  transition: --c .2s ease;
}
#scanView .scan-box.hit { animation: scanhit .42s var(--ease-out); }
#scanView .scan-box.miss { animation: scanmiss .42s var(--ease-out); }
@keyframes scanhit { 0% { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), inset 0 0 0 3px #2fd36b; background-color: rgba(47,211,107,.18); }
  100% { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), inset 0 0 0 0 transparent; background-color: transparent; } }
@keyframes scanmiss { 0%, 60% { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), inset 0 0 0 3px #ff4d4d; } 100% { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); } }
.scan-tools { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.stool { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease; }
.stool:active { transform: scale(.92); }
.stool .ic { width: 22px; height: 22px; }
.stool.on { background: #fff; color: var(--ink); }
.stool .sx { display: none; } .stool.off .sx { display: inline; } .stool.off .sw { display: none; }
.stool.off { color: rgba(255,255,255,.6); }
.scan-strip:not(.hidden) { animation: stripin .26s var(--ease-out) both; }
@keyframes stripin { from { transform: translateY(14px); opacity: 0; } }
.scan-blocked { position: absolute; inset: 0; z-index: 4; background: #0d0f12; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px 30px 60px; gap: 10px; }
.scan-blocked .sb-ico { width: 64px; height: 64px; border-radius: 22px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.scan-blocked .sb-ico svg { width: 30px; height: 30px; }
.scan-blocked b { font-size: 17px; }
.scan-blocked p { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.78); max-width: 320px; }
.scan-blocked .sb-hint { color: rgba(255,255,255,.55); font-size: 12.5px; margin-top: 4px; }


/* ---- home ---- */
.hello { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin: 4px 2px 12px; }
.htiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.htile { all: unset; box-sizing: border-box; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; box-shadow: var(--sh-1);
  transition: transform var(--dur-press) var(--ease-out); }
.htile:active { transform: scale(.95); }
.htile svg { width: 26px; height: 26px; color: var(--red); margin-bottom: 4px; }
.htile b { font-size: 12px; color: var(--ink); line-height: 1.15; }
.htile small { font-size: 10px; color: var(--hint); font-weight: 700; line-height: 1.2; }
.htile.primary { background: var(--red-grad); border-color: transparent; box-shadow: var(--red-sh); }
.htile.primary svg, .htile.primary b { color: #fff; }
.htile.primary small { color: rgba(255,255,255,.82); }
.hrun { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; background: #fff; border: 1.5px solid var(--red);
  border-radius: 16px; padding: 11px 14px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.hrun.paused { border-color: #e8a800; }
.hrun-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; }
.hrun-h b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hrun-h span { flex: none; font-size: 11.5px; font-weight: 800; color: var(--red); }
.hrun.paused .hrun-h span { color: #b26b00; }
.hrun .dsj-bar { margin: 8px 0 0; }
/* Recently printed: a horizontal strip of compact cards. */
.hstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -12px; padding: 2px 12px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hstrip::-webkit-scrollbar { display: none; }
.hstrip > .card { scroll-snap-align: start; }
.hstrip .cartrow { display: none; }
.quickchips.wrap { flex-wrap: wrap; overflow: visible; }
.hstrip { grid-auto-columns: 40%; }
.hstrip .card .ph { aspect-ratio: 1.15; }
.hstrip .card .body { padding: 7px 9px 9px; }
.hstrip .card .name { font-size: 11px; -webkit-line-clamp: 2; }
.hstrip .card .price { font-size: 14px; }
.hstrip .card .model { display: none; }
.hstrip .reprintbtn { transform: scale(.88); transform-origin: top right; }


/* ---- product cards: on sale, and what's on the shelf ---- */
.clr.save { background: #1f8a3b; }
.schip { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .2px; padding: 3px 8px;
  border-radius: 999px; background: rgba(255,255,255,.94); color: #1f7a3b; border: 1px solid #cfead9; }
.schip.low { color: #9a5f00; border-color: #f2d9a6; background: #fffaf0; }
.schip.out { color: var(--red); border-color: #f2c9c9; background: #fff5f5; }
.hstrip .schip { display: none; }


/* ---- long lists: day headers stick under the header ---- */
.histday { position: sticky; top: calc(var(--top-h, 120px) - 2px); z-index: 4; background: var(--bg);
  margin: 6px -12px 4px; padding: 8px 14px 6px; }
/* ---- pull to refresh ---- */
.ptr { position: fixed; left: 50%; top: calc(var(--top-h, 120px) - 30px); z-index: 19; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-2); opacity: 0; transform: translate(-50%, 0); pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.ptr-ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--red); }
.ptr.ready .ptr-ring { border-color: var(--red); border-top-color: var(--line); }
.ptr.busy .ptr-ring { animation: spin .6s linear infinite; border-color: var(--line); border-top-color: var(--red); }

.soh-ico { width: 52px; height: 52px; border-radius: 18px; background: #fdeeee; color: var(--red); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 0; }
.soh-ico svg { width: 26px; height: 26px; }

@media (max-width: 380px) {
  .sheet-actions .btn { font-size: 14px; padding: 14px 8px; white-space: nowrap; }
  .htile small { display: none; }
}

/* ---- what's new (one time, after a big update) ---- */
.wnew { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 10px; margin-bottom: 14px; box-shadow: var(--sh-1); position: relative; }
.wnew h5 { font-size: 14px; color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.wnew h5 span { font-size: 10px; font-weight: 800; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 8px; letter-spacing: .4px; }
.wnew ul { list-style: none; display: flex; flex-direction: column; }
.wnew li button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--body); line-height: 1.35; }
.wnew li:first-child button { border-top: none; }
.wnew li b { color: var(--ink); }
.wnew li svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 1px; }
.wnew .wx { position: absolute; top: 10px; right: 10px; border: none; background: var(--bg); color: var(--hint); width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.wnew .wx svg { width: 14px; height: 14px; }

/* NFC tags */
.sheet-tools .nfcbtn { grid-column: 1 / -1; }
.nfcov { position: fixed; inset: 0; z-index: 80; background: rgba(18, 20, 24, .45); display: flex; align-items: flex-end; justify-content: center; animation: nfcFade .18s var(--ease-out); }
.nfcpanel { background: var(--card); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.18); animation: nfcUp .26s var(--ease-drawer); max-height: 86vh; overflow: auto; }
.nfcpanel h3 { font-size: 18px; margin: 0 0 8px; color: var(--ink); }
.nfcpanel p { margin: 0 0 10px; line-height: 1.45; color: var(--body); font-size: 14px; }
.nfcpanel .btn.wide { margin-top: 6px; }
.nfcpanel .linkbtn { display: block; margin: 12px auto 0; }
.nfcrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nfcrow span { min-width: 0; display: flex; flex-direction: column; }
.nfcrow b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.nfcrow small { color: var(--hint); font-size: 12px; font-weight: 600; }
.nfcrow code { font-size: 11.5px; overflow-wrap: anywhere; }
.nfcin { display: flex; gap: 8px; margin: 10px 0 4px; }
.nfcin input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 16px; }
.nfcwave { position: relative; width: 64px; height: 64px; margin: 4px auto 12px; }
.nfcwave span { position: absolute; inset: 0; border: 3px solid var(--red); border-radius: 50%; opacity: 0; animation: nfcPulse 1.8s var(--ease-out) infinite; }
.nfcwave span:nth-child(2) { animation-delay: .6s; } .nfcwave span:nth-child(3) { animation-delay: 1.2s; }
@keyframes nfcPulse { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
@keyframes nfcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nfcUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nfcwave span, .nfcpanel, .nfcov { animation: none; } .nfcwave span { opacity: .5; } }

/* ---------- loading placeholders shaped like the content ---------- */
.skwrap { animation: skIn .22s .12s var(--ease-out) both; }   /* a quick load never flashes one */
@keyframes skIn { from { opacity: 0; } to { opacity: 1; } }
.sk i { display: block; height: 11px; border-radius: 6px; background: #eceef1; position: relative; overflow: hidden; }
.sk i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.3s ease-in-out infinite; }
.sk i.sm { height: 9px; } .sk i.big { height: 15px; }
.sk .w35 { width: 35%; } .sk .w40 { width: 40%; } .sk .w45 { width: 45%; } .sk .w50 { width: 50%; } .sk .w55 { width: 55%; }
.sk .w60 { width: 60%; } .sk .w70 { width: 70%; } .sk .w80 { width: 80%; } .sk .w85 { width: 85%; } .sk .w90 { width: 90%; } .sk .w95 { width: 95%; }
.sk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 0 12px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(20,24,31,.04); }
.sk-card i { margin: 0 12px; }
.sk-card i.sk-img { margin: 0 0 4px; height: auto; aspect-ratio: 1; border-radius: 0; background: #f1f2f4; }
.sk-card i.big { margin-top: 4px; }
.sk-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 12px; margin-bottom: 6px; }
.sk-row > span { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-row i.sk-end { width: 46px; height: 13px; flex: none; }
.sk-tile { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); }
.sk-tile i.sk-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; background: #f6e9e9; }
.sk-tile i:not(.sk-ico) { flex: 0 0 auto; }
.sk-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 9px; }
.sk-panel i.sk-btn { width: 130px; height: 34px; border-radius: 11px; margin-top: 4px; background: #f3e4e4; }
.sk-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; display: flex;
  flex-direction: column; align-items: center; gap: 8px; }
.sk-chips { display: flex; gap: 8px; margin: 2px 0 12px; }
.sk-chips i.sk-chip { width: 92px; height: 34px; border-radius: 999px; }
.sk-text { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 14px; }
.hstrip > .sk-card { scroll-snap-align: start; }

/* ---------- data arriving: fade up in place, items one after another ---------- */
.rv { animation: rvIn .36s var(--ease-out) both; animation-delay: calc(var(--rv, 0) * 40ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip, .cartlist, .st-stats) { animation: none; }
.rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip, .cartlist, .st-stats) > *,
.rv > :is(.grid, .bgrid, .merchlist, .sublist, .hstrip) > * { animation: rvIn .36s var(--ease-out) both; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(2), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(2) { animation-delay: .04s; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(3), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(3) { animation-delay: .08s; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(4), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(4) { animation-delay: .12s; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(5), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(5) { animation-delay: .16s; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(6), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(6) { animation-delay: .2s; }
.rv :is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(n+7), .rv:is(.grid, .bgrid, .merchlist, .sublist, .histlist, .hstrip) > :nth-child(n+7) { animation-delay: .24s; }

/* ---------- page changes: slide the way you're going ---------- */
body { overflow-x: clip; }
main.view-enter.dir-fwd { animation: pgFwd .34s var(--ease-out); }
main.view-enter.dir-back { animation: pgBack .34s var(--ease-out); }
@keyframes pgFwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes pgBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* ---------- nav bar: one highlight that glides between tabs ---------- */
.navbar { position: fixed; }
.nbpill { position: absolute; left: 0; top: 5px; height: 52px; border-radius: 17px; background: #fdeeee; z-index: 0;
  pointer-events: none; opacity: 0;
  transition: transform .38s var(--ease-drawer), width .38s var(--ease-drawer), background-color .2s ease, opacity .2s ease; }
.nbpill.open { background: #f0f1f3; }
.nb { z-index: 1; }
.nb.active, .nb.open { background: transparent; }
.nb svg { transition: transform .3s var(--ease-out); }
.nb.active svg { transform: translateY(-1px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv *, .skwrap, main.view-enter, .nbpill, .nb svg { animation: none !important; transition: none !important; }
  .sk i::after { animation: none; }
}

/* The More sheet never reaches up under the header: on a tall phone (and in
   Telegram's full screen) 82% of the screen ran past it and hid the title. */
.more-card { max-height: min(82vh, calc(100vh - var(--top-h, 140px) - 14px)); }
@supports (height: 100dvh) { .more-card { max-height: min(82dvh, calc(100dvh - var(--top-h, 140px) - 14px)); } }
.more { z-index: 21; }          /* above the header (and its fade), dimming it like a native sheet */
.navbar { z-index: 22; }        /* ...with the bar still on top, so More closes it again */
.more-card .grab { margin: 3px auto 1px; }

/* shelf location on the product page */
.shloc-b { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; margin: 10px 0 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.shloc-b svg { width: 20px; height: 20px; color: var(--red); flex: none; }
.shloc-b span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shloc-b b { font-size: 15px; color: var(--ink); letter-spacing: .02em; }
.shloc-b.none b { color: var(--body); font-size: 14px; }
.shloc-b small { font-size: 11.5px; color: var(--hint); font-weight: 700; }
.shloc-b em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--red); }
.ss-bay { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.8); margin-left: auto; }
.ss-bay input { width: 70px; border: 0; border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 13px; text-transform: uppercase; }
/* compare */
.cmpwrap { overflow-x: auto; margin: 0 -12px; padding: 0 12px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 8px 0; table-layout: fixed; min-width: 300px; }
.cmp td { vertical-align: top; background: #fff; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 10px; font-size: 13px; color: var(--ink); }
.cmp th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--hint); padding: 10px 2px 4px; }
.cmp-h td { border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding-top: 10px; position: relative; }
.cmp tr:last-child td { border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-bottom: 10px; }
.cmp-h img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; }
.cmp-h b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.25; }
.cmp-h small { display: block; color: var(--hint); font-weight: 700; font-size: 11.5px; margin-top: 3px; }
.cmp-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #f2f3f5; color: var(--body); display: grid; place-items: center; }
.cmp-x svg { width: 14px; height: 14px; }
.cmp-big { font-size: 17px; font-weight: 800; }
.cmp ul { margin: 0; padding-left: 16px; } .cmp li { margin: 2px 0; font-size: 12.5px; }
.cmp-ans { background: #f7f8fa; border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 8px; }

/* ---------- scanner, rebuilt for one thumb ----------
   The camera fills the screen; the top is left to Telegram's own buttons
   (Back, ⋯) in full screen. Everything you tap sits in one dock at the
   bottom: the mode, the code box, and a big Close with the torch and sound
   beside it. The frame sits in the middle of what's left. */
.scanner { display: flex; flex-direction: column; background: #000; }
#scanView { flex: 1; position: relative; overflow: hidden; min-height: 0; }
#scanVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#scanView .scan-box { left: 9%; right: 9%; height: min(26%, 180px);
  top: calc((100% + max(var(--tg-top, 0px), env(safe-area-inset-top, 0px))) / 2 - min(13%, 90px)); }
.scan-hint { top: calc((100% + max(var(--tg-top, 0px), env(safe-area-inset-top, 0px))) / 2 - min(13%, 90px) - 40px); bottom: auto;
  font-size: 14px; }
.scan-strip { bottom: 34px; }
.scan-dock { flex: none; background: linear-gradient(180deg, rgba(14,15,18,.96), #0b0c0e); border-radius: 24px 24px 0 0;
  margin-top: -22px; position: relative; z-index: 5; padding: 14px 14px calc(12px + max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
.scan-dock .scanseg { display: flex; width: 100%; background: rgba(255,255,255,.08); border-radius: 14px; padding: 4px; gap: 4px; }
.scan-dock .scanseg button { flex: 1; height: 42px; border: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,.72);
  font: inherit; font-size: 14px; font-weight: 800; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.scan-dock .scanseg button.on { background: #fff; color: var(--ink); }
.scan-dock .scan-foot { padding: 0; background: none; }
.scan-dock .scan-foot input { height: 46px; border-radius: 13px; background: rgba(255,255,255,.1); font-size: 16px; }
.scan-dock .scan-foot .btn { height: 46px; min-width: 64px; border-radius: 13px; }
.scan-row { display: flex; gap: 10px; align-items: stretch; }
.scan-close { flex: 1; height: 52px; border: 0; border-radius: 15px; background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 800;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease; -webkit-tap-highlight-color: transparent; }
.scan-close:active { transform: scale(.97); background: rgba(255,255,255,.2); }
.scan-close .ic { width: 20px; height: 20px; }
.scan-row .stool { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.12); flex: none; }
.scan-row .stool.on { background: #fff; color: var(--ink); }
.scan-row .stool.hidden { display: none; }
.scan-top, .scan-tools { display: none !important; }
@media (max-height: 640px) { .scan-dock { gap: 8px; padding-top: 10px; } .scan-dock .scanseg button { height: 38px; } .scan-hold { height: 54px; }
  .scan-close, .scan-row .stool { height: 46px; } .scan-row .stool { width: 46px; } }
.scan-dock .scanseg button { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; white-space: nowrap; }
.scan-strip .ss-bay { color: var(--hint); }
.scan-strip .ss-bay input { background: #f2f3f5; color: var(--ink); }
.scan-strip .ss-bay input::placeholder { text-transform: none; color: #9aa0a8; }

/* tile figures stay inside their tile (fitText shrinks them; this is the backstop) */
.sic, .st-stat { min-width: 0; overflow: hidden; }
.sic b, .st-stat b, .cmp-big { white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.sic b { display: block; }

/* Canopy sign wording check */
.sg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; margin: 2px 0 10px; }
.sg-facts span { border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.sg-facts b { font-size: 18px; color: var(--ink); }
.sg-facts small { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--hint); }
.sg-feats { margin: 0; padding-left: 18px; font-size: 14px; font-weight: 600; color: var(--body); display: grid; gap: 4px; }
.sg-raw { margin-top: 12px; font-size: 13px; color: var(--body); }
.sg-raw summary { font-weight: 800; cursor: pointer; padding: 6px 2px; }
.sg-raw ul { padding-left: 18px; margin: 4px 0 10px; }
.sg-raw p { margin: 4px 0 10px; line-height: 1.45; }
.sg-trace { padding-left: 18px; margin: 4px 0 10px; font-size: 12.5px; line-height: 1.4; }
.sg-trace li { margin-bottom: 3px; }