/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(98.4% 0.006 300) · accent: oklch(44% 0.23 292) · display: Plus Jakarta Sans · body: Plus Jakarta Sans
 * nav: kept (top bar, sidebar from 60rem, bottom bar on phones) · signature: the bill ledger on Bechna · states: loading, empty, error (offline), full
 * axes: light/geometric-sans/chromatic-violet · posture: settled · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, the screens kept their order; the bill and the counter carry the signature in tabular numerals */

/* ---------- tokens ---------- */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;
  --z-raised: 10; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
  --radius-control: 10px; --radius-card: 14px; --radius-pill: 999px; --rule-hair: 1px;
  --shell-top: 60px; --side-w: 248px;

  --color-paper: oklch(98.4% 0.006 300);
  --color-paper-2: oklch(95.6% 0.012 300);
  --color-paper-3: oklch(92% 0.018 300);
  --color-ink: oklch(22% 0.03 300);
  --color-ink-2: oklch(36% 0.03 300);
  --color-muted: oklch(46% 0.03 300);
  --color-rule: oklch(88% 0.016 300);
  --color-rule-2: oklch(80% 0.02 300);
  --color-accent: oklch(44% 0.23 292);
  --color-accent-ink: oklch(99% 0.004 300);
  --color-accent-soft: oklch(93% 0.04 296);
  --color-focus: oklch(52% 0.22 292);
  --color-scrim: oklch(18% 0.03 300 / 0.6);
  --color-success: oklch(48% 0.12 155); --color-success-soft: oklch(94% 0.04 155); --color-success-ink: oklch(36% 0.09 155);
  --color-warn: oklch(62% 0.15 70);     --color-warn-soft: oklch(95% 0.05 85);     --color-warn-ink: oklch(42% 0.1 60);
  --color-error: oklch(52% 0.19 27);    --color-error-soft: oklch(95% 0.03 25);    --color-error-ink: oklch(42% 0.16 27);
  --color-on-status: oklch(99% 0.004 300);
  --color-print: oklch(14% 0.005 300); --color-print-paper: oklch(99.5% 0.005 300); --color-print-rule: oklch(60% 0.005 300);
  /* bank-note faces on the cash counter, so a note is found by its colour */
  --color-note: oklch(91% 0.05 85);  --color-note-edge: oklch(80% 0.07 80);  --color-note-ink: oklch(30% 0.05 70);
  --color-inr: oklch(91% 0.05 140);  --color-inr-edge: oklch(79% 0.08 140); --color-inr-ink: oklch(30% 0.06 140);
  --color-npr: oklch(91% 0.04 20);   --color-npr-edge: oklch(78% 0.07 20);  --color-npr-ink: oklch(32% 0.08 20);
  --color-coin: oklch(95% 0.005 90);  --color-coin-edge: oklch(72% 0.005 90); --color-coin-ink: oklch(25% 0.005 90);

  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-body);
  --show-dark: inline-flex; --show-light: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(17% 0.02 300); --color-paper-2: oklch(20.5% 0.024 300); --color-paper-3: oklch(25% 0.028 300);
    --color-ink: oklch(95% 0.01 300); --color-ink-2: oklch(84% 0.02 300); --color-muted: oklch(72% 0.025 300);
    --color-rule: oklch(30% 0.03 300); --color-rule-2: oklch(38% 0.03 300);
    --color-accent: oklch(74% 0.14 296); --color-accent-ink: oklch(18% 0.04 300); --color-accent-soft: oklch(30% 0.07 296); --color-focus: oklch(78% 0.13 296);
    --color-success: oklch(76% 0.13 160); --color-success-soft: oklch(28% 0.05 160); --color-success-ink: oklch(86% 0.1 160);
    --color-warn: oklch(82% 0.14 85);     --color-warn-soft: oklch(29% 0.05 80);     --color-warn-ink: oklch(88% 0.11 85);
    --color-error: oklch(72% 0.16 25);    --color-error-soft: oklch(28% 0.06 25);    --color-error-ink: oklch(84% 0.09 25);
    --color-on-status: oklch(17% 0.02 300);
    --show-dark: none; --show-light: inline-flex;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper: oklch(17% 0.02 300); --color-paper-2: oklch(20.5% 0.024 300); --color-paper-3: oklch(25% 0.028 300);
  --color-ink: oklch(95% 0.01 300); --color-ink-2: oklch(84% 0.02 300); --color-muted: oklch(72% 0.025 300);
  --color-rule: oklch(30% 0.03 300); --color-rule-2: oklch(38% 0.03 300);
  --color-accent: oklch(74% 0.14 296); --color-accent-ink: oklch(18% 0.04 300); --color-accent-soft: oklch(30% 0.07 296); --color-focus: oklch(78% 0.13 296);
  --color-success: oklch(76% 0.13 160); --color-success-soft: oklch(28% 0.05 160); --color-success-ink: oklch(86% 0.1 160);
  --color-warn: oklch(82% 0.14 85);     --color-warn-soft: oklch(29% 0.05 80);     --color-warn-ink: oklch(88% 0.11 85);
  --color-error: oklch(72% 0.16 25);    --color-error-soft: oklch(28% 0.06 25);    --color-error-ink: oklch(84% 0.09 25);
  --color-on-status: oklch(17% 0.02 300);
  --show-dark: none; --show-light: inline-flex;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-rule-2) var(--color-paper-2); scroll-padding-top: calc(var(--shell-top) + var(--space-md)); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
body.guest { padding-bottom: var(--space-lg); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: var(--space-lg) 0 var(--space-sm); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; min-width: 0; text-wrap: balance; color: var(--color-ink); }
h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); }
h1 small, h2 small { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
p { margin: var(--space-xs) 0; text-wrap: pretty; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.ic { width: 22px; height: 22px; flex: 0 0 auto; }
.pt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); margin: var(--space-md) 0 var(--space-sm); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.pt small { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.red-text { color: var(--color-error) !important; } .green-text { color: var(--color-success) !important; }
.dim { opacity: 0.55; }
.grow { flex: 1; min-width: 0; }
b, strong, .stat b, .total b, .bigqty, .count-sum b, .den .sub, .cprice, .qty, .num { font-variant-numeric: tabular-nums; }

/* ---------- shell: top bar ---------- */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--shell-top); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0 var(--space-md); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.brand { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink); font-weight: 700; font-size: var(--text-md); text-decoration: none; }
.mark { width: 36px; height: 36px; border-radius: var(--radius-control); display: grid; place-items: center; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.mark img { width: 22px; height: 30px; object-fit: contain; display: block; }
.top-right { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.who { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); }
.who-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.who-text b { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.who-text small { font-size: var(--text-xs); color: var(--color-muted); }
.lang, .theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: transparent; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro); }
.lang:hover, .theme-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lang .ic, .theme-btn .ic { width: 16px; height: 16px; }
.theme-btn > span { align-items: center; gap: var(--space-xs); }
.theme-btn .to-dark { display: var(--show-dark); }
.theme-btn .to-light { display: var(--show-light); }
.lang-short { display: none; }
@media (max-width: 30rem) {
  .theme-btn > span > span, .lang-text, .who-text { display: none; }
  .lang-short { display: inline; }
  .theme-btn, .lang { padding: 0 var(--space-xs); }
}
.shopbar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) 0; color: var(--color-muted); font-size: var(--text-sm); }
.shopbar select { width: auto; margin: 0; min-height: 40px; padding: 0 36px 0 var(--space-sm); border-radius: var(--radius-pill); font-weight: 600; }
.wrap { max-width: 860px; margin: 0 auto; padding: var(--space-2xs) var(--space-md) var(--space-xl); }

/* ---------- shell: bottom bar (phones) ---------- */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-nav); display: flex; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs) calc(var(--space-2xs) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
.bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs); min-height: 56px; border-radius: var(--radius-card); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); text-decoration: none; transition: background-color var(--dur-micro), color var(--dur-micro); }
.bottom a.on { color: var(--color-accent); background: var(--color-accent-soft); }
.bottom .ic { width: 22px; height: 22px; }

/* ---------- shell: sidebar (PC) ---------- */
.side { display: none; }
.side-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); padding: var(--space-md) var(--space-sm) var(--space-2xs); }
.side-group { display: flex; flex-direction: column; gap: var(--space-3xs); }
.side a, .side-logout { display: flex; align-items: center; gap: var(--space-sm); min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-control); text-decoration: none; color: var(--color-ink-2); font-weight: 600; font-size: var(--text-sm); background: none; border: 0; width: 100%; cursor: pointer; text-align: left; transition: background-color var(--dur-micro), color var(--dur-micro); }
.side a:hover, .side-logout:hover { background: var(--color-paper-2); color: var(--color-ink); }
.side a.on { background: var(--color-accent-soft); color: var(--color-accent); }
.side form { margin-top: auto; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.side-logout { color: var(--color-muted); }

/* ---------- surfaces ---------- */
.card { color: var(--color-ink); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); margin: var(--space-sm) 0; }
.card.narrow { max-width: 440px; margin: var(--space-lg) auto; padding: var(--space-lg); }
details > summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
details[open] > summary::after { transform: rotate(-135deg); }
summary.btn::after { display: none; }

.flash { display: flex; gap: var(--space-xs); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); margin: var(--space-sm) 0; background: var(--color-success-soft); color: var(--color-success-ink); font-weight: 600; border: var(--rule-hair) solid var(--color-success); }
.flash.err { background: var(--color-error-soft); color: var(--color-error-ink); border-color: var(--color-error); }
.alert { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); margin: var(--space-xs) 0; text-decoration: none; font-weight: 600; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.alert small { display: block; font-weight: 500; color: inherit; }
.alert.yellow { background: var(--color-warn-soft); color: var(--color-warn-ink); border-color: var(--color-warn); }
.alert.red { background: var(--color-error-soft); color: var(--color-error-ink); border-color: var(--color-error); }
.alert.green { background: var(--color-success-soft); color: var(--color-success-ink); border-color: var(--color-success); }
.empty { text-align: center; padding: var(--space-xl) var(--space-md); color: var(--color-muted); background: var(--color-paper); border: var(--rule-hair) dashed var(--color-rule-2); border-radius: var(--radius-card); margin: var(--space-sm) 0; }
.empty .btn { margin: var(--space-sm) auto 0; }
.pill { display: inline-block; font-size: var(--text-xs); font-weight: 600; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); vertical-align: middle; }
.pill.green { background: var(--color-success-soft); color: var(--color-success-ink); }
.back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); }
.back:hover { color: var(--color-accent); }

/* ---------- login / setup ---------- */
.logo-big { width: 88px; height: 88px; margin: 0 auto var(--space-xs); border-radius: 24px; display: grid; place-items: center; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.logo-big img { width: 52px; height: 72px; object-fit: contain; }
.login .pt, .card.narrow .pt { justify-content: center; text-align: center; }

/* ---------- forms ---------- */
label { display: block; margin: var(--space-sm) 0; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); }
input, select, textarea { display: block; width: 100%; font-size: var(--text-md); font-weight: 500; min-height: 44px; padding: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); transition: border-color var(--dur-micro); }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
input::placeholder, textarea::placeholder { color: var(--color-muted); font-weight: 400; }
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--color-accent); margin: 0; display: inline-block; }
input[type=file] { min-height: 0; }
label.inline { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 500; }
fieldset { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); margin: var(--space-sm) 0; padding: var(--space-2xs) var(--space-md) var(--space-xs); }
legend { font-weight: 600; padding: 0 var(--space-xs); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.row { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; margin: var(--space-xs) 0; }
.row input, .row select { width: auto; flex: 1; min-width: 100px; margin: 0; }
.row.between { justify-content: space-between; }
.row .pt { margin-bottom: var(--space-2xs); }

/* ---------- buttons: one filled primary, outlined secondaries ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid transparent; border-radius: var(--radius-control); font-weight: 600; font-size: var(--text-sm); cursor: pointer; text-decoration: none; text-align: center; background: var(--color-accent); color: var(--color-accent-ink); transition: background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro), transform var(--dur-micro); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.btn:active { transform: scale(0.98); }
.btn.big, .btn.huge { display: flex; width: 100%; min-height: 52px; font-size: var(--text-md); margin: var(--space-sm) 0; }
.btn.small { padding: 0 var(--space-sm); }
.btn.red { background: var(--color-paper); color: var(--color-error); border-color: var(--color-error); }
.btn.red:hover { background: var(--color-error-soft); }
.btn.ghost { background: var(--color-paper); color: var(--color-ink-2); border-color: var(--color-rule-2); }
.btn.ghost:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-paper); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
summary.btn { display: inline-flex; }

/* ---------- dashboard figures ---------- */
.hero { display: block; text-align: center; padding: var(--space-lg) var(--space-md); margin: var(--space-sm) 0; border-radius: var(--radius-card); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
.hero b { display: block; font-size: var(--text-lg); margin-top: var(--space-xs); }
.hero b.huge { font-size: var(--text-3xl); font-weight: 700; margin: var(--space-3xs) 0; }
.hero small { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.hero.green { background: var(--color-success-soft); color: var(--color-success-ink); border-color: var(--color-success); }
.hero.green small { color: inherit; }
.hero.red { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
.hero.red small { color: inherit; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0; }
.stat { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); }
.stat span { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b { display: block; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; margin-top: var(--space-3xs); }
.stat.big b { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.stat small { color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); }
.stat.owner { border-color: var(--color-accent); }
a.stat { display: block; text-decoration: none; color: var(--color-ink); transition: border-color var(--dur-micro); }
a.stat:hover { border-color: var(--color-accent); }
.quick-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); margin: var(--space-sm) 0; }
.quick-actions .btn { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0; }
.tile { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); transition: border-color var(--dur-micro); }
.tile:hover { border-color: var(--color-accent); }
.tile span .ic { width: 22px; height: 22px; }
.tile span { width: 40px; height: 40px; border-radius: var(--radius-control); display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); }
.tile small { font-weight: 500; color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- tabs, categories ---------- */
.tabs { display: flex; gap: var(--space-2xs); margin: var(--space-sm) 0; padding: var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-card); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs label { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 40px; margin: 0; padding: 0 var(--space-sm); border-radius: var(--radius-control); text-decoration: none; color: var(--color-ink-2); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro), color var(--dur-micro); }
.tabs a.on, .unit-pick label:has(input:checked) { background: var(--color-paper); color: var(--color-accent); }
.unit-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cats { display: flex; gap: var(--space-xs); overflow-x: auto; padding: var(--space-2xs) 0 var(--space-xs); scrollbar-width: none; scroll-snap-type: x proximity; }
.cats::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.cats a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; scroll-snap-align: start; transition: background-color var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro); }
.cats a.on { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.search input { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); margin: var(--space-xs) 0; }
.key { padding: var(--space-3xs) var(--space-xs); border-radius: 6px; font-weight: 600; background: var(--color-paper-3); color: var(--color-ink-2); }
.key.green { background: var(--color-success-soft); color: var(--color-success-ink); }
.key.yellow { background: var(--color-warn-soft); color: var(--color-warn-ink); }
.key.red { background: var(--color-error-soft); color: var(--color-error-ink); }

/* ---------- product cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-sm); }
.cards.small { grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.pcard { --st: var(--color-success); --st-soft: var(--color-success-soft); --st-ink: var(--color-success-ink);
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: var(--color-ink); padding: 0; text-align: left; cursor: pointer; transition: border-color var(--dur-micro), transform var(--dur-micro); }
.pcard.yellow { --st: var(--color-warn); --st-soft: var(--color-warn-soft); --st-ink: var(--color-warn-ink); }
.pcard.red { --st: var(--color-error); --st-soft: var(--color-error-soft); --st-ink: var(--color-error-ink); }
.pcard:hover { border-color: var(--color-accent); }
.pcard:active, .pcard.pop { transform: scale(0.97); }
.pcard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-paper-3); }
.pcard span { display: block; padding: var(--space-xs) var(--space-sm) var(--space-sm); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.pcard span b { display: block; margin-top: var(--space-3xs); font-weight: 700; font-size: var(--text-md); }
.pcard small { font-size: var(--text-xs); }
.pcard .qty { position: absolute; top: var(--space-xs); left: var(--space-xs); min-width: 32px; padding: var(--space-3xs) var(--space-xs); border-radius: 6px; text-align: center; font-size: var(--text-sm); font-weight: 700; background: var(--st-soft); color: var(--st-ink); border: var(--rule-hair) solid var(--st); }
.pcard:disabled { opacity: 0.55; cursor: not-allowed; }
.padd { position: absolute; right: var(--space-xs); top: var(--space-xs); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: var(--text-lg); line-height: 1; background: var(--color-accent); color: var(--color-accent-ink); }
.fab { position: fixed; right: var(--space-md); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: var(--z-raised); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; font-size: var(--text-xl); }

/* ---------- product detail ---------- */
.detail { position: relative; }
.detail img.big, .detail-photo { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-3); }
.detail h1 { margin-top: var(--space-sm); }
.bigqty { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--color-success); color: var(--color-on-status); border-radius: var(--radius-card); padding: var(--space-xs) var(--space-md); font-size: var(--text-3xl); font-weight: 700; line-height: 1; text-align: center; }
.bigqty small { display: block; font-size: var(--text-xs); font-weight: 600; }
.detail.yellow .bigqty { background: var(--color-warn); }
.detail.red .bigqty { background: var(--color-error); }
.mover { margin: var(--space-sm) 0; }
.more-actions { margin: var(--space-sm) 0; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-xs); margin: var(--space-sm) 0; }
.vchip { --st: var(--color-success); --st-soft: var(--color-success-soft); --st-ink: var(--color-success-ink);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); min-height: 44px; padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-control); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); text-decoration: none; cursor: pointer; transition: border-color var(--dur-micro), background-color var(--dur-micro); }
.vchip.yellow { --st: var(--color-warn); --st-soft: var(--color-warn-soft); --st-ink: var(--color-warn-ink); }
.vchip.red { --st: var(--color-error); --st-soft: var(--color-error-soft); --st-ink: var(--color-error-ink); }
.vchip b { font-size: var(--text-md); }
.vchip span { min-width: 32px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--st-soft); color: var(--st-ink); font-weight: 700; font-size: var(--text-sm); text-align: center; }
.vchip small { color: var(--color-muted); font-size: var(--text-xs); }
.vchip:hover, .vchip.on { border-color: var(--color-accent); background: var(--color-accent-soft); }

/* ---------- steppers, photo pickers ---------- */
.stepper, .cqty { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.stepper button, .cqty button, .den button { width: 48px; height: 48px; border-radius: var(--radius-control); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-xl); font-weight: 600; background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro); }
.stepper button:active, .cqty button:active, .den button:active { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.stepper input { width: 96px; text-align: center; font-size: var(--text-2xl); font-weight: 700; margin: 0; }
.small-stepper { gap: var(--space-xs); }
.small-stepper button { width: 44px; height: 44px; font-size: var(--text-lg); }
.small-stepper input { width: 56px; font-size: var(--text-lg); }
.photo-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 96px; padding: var(--space-md); border: var(--rule-hair) dashed var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink-2); text-align: center; cursor: pointer; transition: border-color var(--dur-micro); }
.photo-pick:hover { border-color: var(--color-accent); }
.photo-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photo-pick img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-control); background: var(--color-paper-3); }
.photo-pick.has-photo { border-style: solid; border-color: var(--color-success); }
.selfie img { border-radius: 50%; }

/* ---------- lists ---------- */
.list { list-style: none; padding: 0; margin: var(--space-sm) 0; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 52px; padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.list li:last-child { border-bottom: 0; }
.list li > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex: 1; min-width: 0; margin: calc(var(--space-xs) * -1) calc(var(--space-md) * -1); padding: var(--space-xs) var(--space-md); min-height: 52px; text-decoration: none; color: inherit; transition: background-color var(--dur-micro); }
.list li > a:hover { background: var(--color-paper-2); }
.list li span { min-width: 0; }
.list li b { white-space: nowrap; }
.list li small { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.list li.sum { font-weight: 700; background: var(--color-paper-2); }
.list li.muted { justify-content: center; }
.list .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-control); vertical-align: middle; margin-right: var(--space-xs); background: var(--color-paper-3); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); font-size: var(--text-md); font-weight: 600; padding: var(--space-sm) 0; }
.total b { font-size: var(--text-2xl); font-weight: 700; margin-left: auto; }
.big-num { font-size: var(--text-3xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- the bill (signature: a ledger in tabular numerals) ---------- */
.pos-layout { display: block; }
.cart { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); margin: var(--space-md) 0; scroll-margin-top: calc(var(--shell-top) + var(--space-md)); }
.cart h2 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.cart-lines { list-style: none; padding: 0; margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.cart-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 88px; gap: var(--space-xs); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) dashed var(--color-rule-2); font-weight: 600; font-size: var(--text-sm); }
.cart-lines li.muted { display: block; text-align: center; padding: var(--space-lg) 0; font-weight: 500; }
.cart-lines li.bad .cprice { border-color: var(--color-error); color: var(--color-error); }
.cart-lines li .cline { grid-column: 1 / -1; justify-self: end; color: var(--color-muted); font-weight: 600; }
.cart-lines .cqty { gap: var(--space-2xs); }
.cart-lines .cqty button { width: 40px; height: 40px; font-size: var(--text-lg); }
.cprice { margin: 0; text-align: right; font-weight: 700; }
.cart .total { border-top: var(--rule-hair) solid var(--color-ink); margin-top: var(--space-xs); }
.due { min-height: 1.5em; font-weight: 600; text-align: right; }
.due.green { color: var(--color-success); }
.due.red { color: var(--color-error); }
.cart details { margin: var(--space-xs) 0; }
.cartbar { position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: var(--z-raised); display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 var(--space-md); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); text-decoration: none; font-weight: 600; }
.cartbar span:last-child { font-size: var(--text-lg); font-weight: 700; }

/* ---------- cash counter ---------- */
.den { display: grid; grid-template-columns: 84px 48px minmax(0, 1fr) 48px 96px; gap: var(--space-xs); align-items: center; padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) dashed var(--color-rule); }
.den.has .face { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.den input { margin: 0; text-align: center; font-size: var(--text-lg); font-weight: 700; }
.den .sub { text-align: right; font-weight: 700; }
.face { display: grid; place-items: center; height: 40px; border-radius: 6px; font-weight: 700; font-size: var(--text-sm); color: var(--color-note-ink); background: var(--color-note); border: var(--rule-hair) solid var(--color-note-edge); }
.note-inr .face { background: var(--color-inr); border-color: var(--color-inr-edge); color: var(--color-inr-ink); }
.note-npr .face { background: var(--color-npr); border-color: var(--color-npr-edge); color: var(--color-npr-ink); }
.face.round { width: 44px; height: 44px; border-radius: 50%; justify-self: center; background: var(--color-coin); border-color: var(--color-coin-edge); color: var(--color-coin-ink); }
.count-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0; }
.count-sum > div { padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.count-sum span { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.count-sum b { display: block; font-size: var(--text-lg); font-weight: 700; }
.count-sum .match { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success-ink); }
.count-sum .short { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error-ink); }
.count-sum .excess { background: var(--color-warn-soft); border-color: var(--color-warn); color: var(--color-warn-ink); }
.count-sum .match span, .count-sum .short span, .count-sum .excess span { color: inherit; }
.quick { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink-2); border-radius: var(--radius-pill); padding: 0 var(--space-md); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro), background-color var(--dur-micro); }
.chip:hover, .chip:active { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.size-chips .chip.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-chips .chip.check:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.size-chips .chip.check:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- attendance ---------- */
.att { display: flex; align-items: center; gap: var(--space-sm); }
.avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--color-paper-3); flex: 0 0 auto; }
.avatar.empty { display: grid; place-items: center; color: var(--color-muted); padding: 0; margin: 0; border: 0; }
.monthnav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: var(--space-sm) 0; }
.monthnav a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); border: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink-2); transition: border-color var(--dur-micro), color var(--dur-micro); }
.monthnav a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs); margin: var(--space-sm) 0; }
.cal i { font-style: normal; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); text-align: center; padding-bottom: var(--space-3xs); }
.cal .d { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.cal .present { background: var(--color-success-soft); color: var(--color-success-ink); border-color: var(--color-success); }
.cal .half { background: var(--color-warn-soft); color: var(--color-warn-ink); border-color: var(--color-warn); }
.cal .absent, .cal .leave { background: var(--color-error-soft); color: var(--color-error-ink); border-color: var(--color-error); }
.cal .off { background: var(--color-paper-3); color: var(--color-muted); }
.cal .future, .cal .none { opacity: 0.55; }
.cal .today { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ---------- reports ---------- */
.report-filter label.inline { margin: 0; }
.report-filter input[type=date] { width: auto; margin: 0; }
.list.bars li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-sm); }
.bar { height: 10px; border-radius: 6px; background: var(--color-paper-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.summary-text { white-space: pre-wrap; font: 500 var(--text-sm)/1.55 var(--font-body); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); margin: var(--space-sm) 0; color: var(--color-ink); }

/* ---------- size-wise stock ---------- */
.table-scroll { overflow-x: auto; margin: var(--space-xs) 0 var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
table.sizes { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
table.sizes th, table.sizes td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; white-space: nowrap; }
table.sizes thead th { font-weight: 600; color: var(--color-muted); }
table.sizes .num { text-align: right; }
table.sizes tbody th, table.sizes tfoot th { position: sticky; left: 0; background: var(--color-paper); font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
table.sizes tbody th a { color: var(--color-ink); text-decoration: none; }
table.sizes td.out { color: var(--color-error-ink); font-weight: 700; background: var(--color-error-soft); }
table.sizes td.none { background: var(--color-paper-2); }
table.sizes tfoot th, table.sizes tfoot td { border-bottom: 0; border-top: var(--rule-hair) solid var(--color-ink); }

/* ---------- purchases, returns ---------- */
.ptable { width: 100%; border-collapse: collapse; margin: var(--space-xs) 0; }
.ptable th { text-align: left; font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; padding: var(--space-2xs) var(--space-2xs) var(--space-xs); white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ptable td { padding: var(--space-2xs); vertical-align: middle; }
.ptable input { margin: 0; width: 100%; min-width: 0; }
.ptable td:nth-child(2) { width: 72px; }
.ptable td:nth-child(3) { width: 96px; }
.ptable td[data-landed] { width: 88px; font-weight: 700; color: var(--color-accent); white-space: nowrap; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ptable td:last-child { width: 48px; }
@media (max-width: 35rem) {
  .ptable thead { display: none; }
  .ptable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .ptable td { width: auto !important; padding: 0; }
  .ptable td:first-child { grid-column: 1 / -1; }
  .ptable td[data-landed] { align-self: center; }
}
.purchase-form h2 small { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
.bill-photo { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); }
.return-line { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); margin: var(--space-xs) 0; }
.return-line .thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-control); }
@media (max-width: 30rem) { .return-line { flex-wrap: wrap; } .return-line .small-stepper { margin-left: auto; } }

/* ---------- QR labels and scanner ---------- */
.label-pick input { width: 84px; margin: 0; text-align: center; font-weight: 700; }
.sheet { display: none; }
.scan-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-md); background: var(--color-scrim); }
.scan-box { width: min(420px, 100%); background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-sm); }
.scan-box #scan-view { border-radius: var(--radius-control); overflow: hidden; }
.scan-box .btn { width: 100%; margin-top: var(--space-xs); }
.sheet-bottom { place-items: end center; padding: 0; animation: fade var(--dur-short) var(--ease-out); }
.sheet-bottom .scan-box { width: min(560px, 100%); border-radius: var(--radius-card) var(--radius-card) 0 0; padding: var(--space-xs) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); animation: up var(--dur-short) var(--ease-out); }
.sheet-bottom .scan-box .variant-grid { max-height: 60vh; overflow: auto; }
.sheet-bottom h2 { margin: var(--space-xs) 0 var(--space-3xs); font-size: var(--text-md); }
.grab { display: block; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--color-rule-2); margin: 0 auto var(--space-xs); }
@keyframes up { from { transform: translateY(32px); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Bechna app (offline) ---------- */
.app-wrap { max-width: 1200px; }
.ol-status { display: flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); margin: var(--space-xs) 0; font-size: var(--text-sm); background: var(--color-success-soft); color: var(--color-success-ink); width: fit-content; max-width: 100%; }
.ol-status.off { background: var(--color-warn-soft); color: var(--color-warn-ink); }
.ol-status b { font-weight: 700; }
.ol-meta { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-sync { display: inline-flex; align-items: center; min-height: 44px; border: 0; border-radius: var(--radius-pill); padding: 0 var(--space-sm); font-weight: 700; background: var(--color-paper); color: inherit; cursor: pointer; }
.ol-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.ol-status.off .ol-dot { background: var(--color-warn); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.ol-tabs { position: sticky; top: var(--shell-top); z-index: var(--z-sticky); margin: 0 0 var(--space-sm); }
.ol-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); width: max-content; max-width: calc(100% - 32px); }
.olapp .row { margin: var(--space-xs) 0 var(--space-sm); }
.olapp .row input[data-search] { margin: 0; border-radius: var(--radius-pill); padding-left: var(--space-md); }
.olapp .row .btn { margin: 0; border-radius: var(--radius-pill); white-space: nowrap; }
.ol-empty .btn { display: inline-flex; }
@media (max-width: 23.75rem) { .olapp .cards.pos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 56.1875rem) { .olapp .cart { margin-bottom: 84px; } }

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

/* ---------- PC / tablet landscape ---------- */
@media (min-width: 56.25rem) {
  body.has-nav { padding: 0 0 0 var(--side-w); }
  .top { padding: 0 var(--space-xl); }
  body.has-nav .top .brand { visibility: hidden; }
  .side { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); padding: var(--space-md) var(--space-sm); background: var(--color-paper); border-right: var(--rule-hair) solid var(--color-rule); overflow-y: auto; z-index: calc(var(--z-sticky-nav) + 1); }
  .side .side-brand { padding: 0 var(--space-xs) var(--space-md); color: var(--color-ink); font-weight: 700; font-size: var(--text-md); }
  .side .side-brand:hover { background: none; }
  .bottom, .cartbar, .fab { display: none !important; }
  .shopbar { padding: var(--space-md) var(--space-xl) 0; }
  .wrap { max-width: 1200px; padding: var(--space-xs) var(--space-xl) var(--space-2xl); }
  .pt { font-size: var(--text-2xl); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); }
  .cards.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
  .card.narrow { margin-top: var(--space-2xl); }
  .form, .counter, .mover { max-width: 680px; }
  .detail { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .detail h1 { margin-top: 0; }
  .split, .count-wrap, .kamai-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-md); max-width: none; }
  .settings-grid > .btn { grid-column: 1 / -1; max-width: 320px; }
  .narrow-actions { max-width: 520px; }
  .pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-lg); align-items: start; }
  .pos-layout .cart { position: sticky; top: calc(var(--shell-top) + 64px); margin-top: 0; max-height: calc(100vh - var(--shell-top) - 88px); overflow: auto; }
  .att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 var(--space-md); }
  .sheet-bottom { place-items: center; padding: var(--space-md); }
  .sheet-bottom .scan-box { border-radius: var(--radius-card); }
}
@media (max-width: 56.1875rem) { .desktop-only { display: none !important; } }
@media (max-width: 26.25rem) {
  .den { grid-template-columns: 72px 44px minmax(0, 1fr) 44px; }
  .den .sub { grid-column: 1 / -1; text-align: right; margin-top: calc(var(--space-2xs) * -1); }
  .den button { width: 44px; height: 44px; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt { font-size: var(--text-lg); }
}

/* ---------- print (QR stickers, bills) ---------- */
@media print {
  @page { size: A4; margin: 8mm; }
  .top, .bottom, .side, .shopbar, .btn, .back, .cartbar, body.has-nav .no-print, .flash { display: none !important; }
  body, body.has-nav { padding: 0; background: var(--color-print-paper); color: var(--color-print); }
  .wrap { max-width: none; padding: 0; }
  .sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .sticker { display: flex; gap: 2.5mm; align-items: center; height: 30mm; padding: 2mm; border: 0.3mm dashed var(--color-print-rule); border-radius: 2mm; break-inside: avoid; color: var(--color-print); }
  .sticker .qr { width: 24mm; height: 24mm; flex: 0 0 24mm; }
  .sticker .qr svg { width: 100%; height: 100%; }
  .sticker .txt { display: flex; flex-direction: column; min-width: 0; font-size: 8pt; line-height: 1.2; }
  .sticker b { font-size: 9pt; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sticker strong { font-size: 12pt; margin-top: 1mm; }
}

/* ---------- budget + dashboard ---------- */
.meter { height: 12px; border-radius: 6px; background: var(--color-paper-3); overflow: hidden; margin: var(--space-sm) 0 var(--space-xs); }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.budget-line { display: block; }
.budget-line summary span { flex: 1; min-width: 0; }
.budget-line summary b { margin-right: var(--space-xs); }
.budget-line form { margin-top: var(--space-xs); }
.today { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); margin: var(--space-sm) 0; }
.today-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.today-main span { color: var(--color-muted); font-weight: 500; }
.today-main b { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.today dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-ink); }
.today dt { font-size: var(--text-sm); color: var(--color-muted); }
.today dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.today dd small { display: block; font-weight: 500; color: var(--color-muted); }
.actions3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-sm) 0; }
.actions3 .btn { margin: 0; }
.attention { margin: var(--space-sm) 0; }
.attention .alert { margin: var(--space-2xs) 0; }
.budget-mini { display: block; text-decoration: none; color: var(--color-ink); }
.budget-mini .row { margin: 0; }
@media (max-width: 26.25rem) { .today dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }