@font-face {
  font-family: Inter;
  src: url("../../assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --shadow-panel: 0 2px 8px rgba(32, 32, 38, .04), 0 12px 28px rgba(32, 32, 38, .035);
  --focus-ring: #F9D96B;
  --focus-ring-on-light: #47262D;
  --focus-offset: 2px;
  --focus-dark: 0 0 0 3px rgba(249, 217, 107, .88);
  --focus-light: 0 0 0 3px rgba(71, 38, 45, .42);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --canvas: var(--color-canvas);
  --panel: var(--color-surface);
  --soft: var(--color-surface-subtle);
  --red: var(--color-danger);
  --red-soft: var(--color-danger-bg);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-bg);
  --blue: var(--color-info);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  color: var(--color-text);
  background: var(--color-surface);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 6px var(--focus-ring-on-light);
}
:focus:not(:focus-visible) { outline-color: transparent; }
.topbar :focus-visible, .login-brand-panel :focus-visible, .startup-screen :focus-visible {
  outline-color: var(--focus-ring);
  box-shadow: 0 0 0 6px rgba(250, 244, 232, .85);
}
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--color-brand); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
h2 { margin-bottom: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
h3 { margin-bottom: 8px; font-size: 16px; }
small { font-size: 12px; }
kbd {
  display: inline-grid;
  min-width: 26px;
  min-height: 24px;
  place-items: center;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font: 600 11px/1 Inter, sans-serif;
}
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; stroke: currentColor; }
.hidden { display: none !important; }

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  grid-template-rows: var(--header-height) minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.topbar {
  z-index: 20;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: var(--header-height);
  color: var(--color-canvas);
  background: var(--color-brand);
}
.brand-zone {
  display: grid;
  width: 150px;
  height: 77px;
  place-items: center;
  justify-self: center;
}
.brand-zone picture { display: block; width: 100px; height: auto; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.workspace-context { min-width: 0; padding: 0 24px; }
.workspace-title { overflow: hidden; color: var(--color-canvas); font-size: 20px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.workspace-subtitle { margin-top: 3px; color: rgba(250, 244, 232, .76); font-size: 12px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; padding: 0 18px 0 12px; }
.header-statuses { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scanner-badge, .header-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--color-canvas);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.scanner-badge { padding: 0 10px; border: 1px solid rgba(250, 244, 232, .24); border-radius: var(--radius-pill); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9BD1AF; box-shadow: 0 0 0 3px rgba(155, 209, 175, .16); }
.scanner-badge.paused .status-dot { background: var(--color-action); box-shadow: none; }
.service-statuses { display: grid; gap: 2px; min-width: 142px; }
.header-status { min-height: 20px; gap: 6px; color: rgba(250, 244, 232, .82); font-size: 11px; }
.header-status .ui-icon { width: 14px; height: 14px; }
.header-status[data-state="offline"], .header-status[data-state="error"] { color: #FFD2D5; }
.header-status[data-state="reconnecting"], .header-status[data-state="syncing"] { color: #FFE7A0; }
.nav-disclosure { display: none; }
.staff-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 48px;
  max-width: 220px;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1px solid rgba(250, 244, 232, .32);
  border-radius: var(--radius-control);
  color: var(--color-canvas);
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
  font-weight: 650;
}
.staff-pill:hover { background: rgba(255, 255, 255, .13); }
.staff-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-pill .ui-icon { width: 18px; height: 18px; }

.side-rail {
  z-index: 18;
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border-right: 1px solid var(--color-border);
  background: var(--color-canvas);
  scrollbar-gutter: auto;
}
.main-nav { display: grid; align-content: start; gap: 4px; }
.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.nav-btn:hover { color: var(--color-text); background: rgba(241, 229, 231, .72); }
.nav-btn.active { color: var(--color-brand); background: #EBD9DC; font-weight: 700; }
.nav-btn.active .ui-icon { color: #000; }
.nav-btn > .ui-icon { width: 20px; height: 20px; }
.nav-short-label { display: none; }
.nav-suppliers { margin-top: 8px; }
.nav-suppliers::after { position: absolute; top: -6px; right: 12px; left: 12px; height: 1px; background: var(--color-border); content: ""; }

main { display: flex; flex-direction: column; grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; overscroll-behavior: contain; }
.view { display: none; }
.view.active { display: block; flex: 1 1 auto; min-height: 0; overflow: auto; }
.page-view { width: 100%; max-width: 1800px; min-height: 100%; margin: 0 auto; padding: 24px; }
.page-heading, .panel-heading, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-heading { margin-bottom: 16px; }
.panel-heading { margin-bottom: 14px; }
.eyebrow { margin-bottom: 4px; color: var(--color-brand); font-size: 11px; font-weight: 750; letter-spacing: .095em; text-transform: uppercase; }
.help { margin: 5px 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.centre { text-align: center; }
.panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex: 1; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 650;
  line-height: 1.2;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.button .ui-icon { width: 18px; height: 18px; }
.button.primary { color: #fff; background: var(--color-brand); }
.button.primary:hover { background: var(--color-brand-hover); }
.button.secondary { border-color: var(--color-control-border); color: var(--color-text); background: var(--color-surface); }
.button.secondary:hover { background: var(--color-surface-subtle); }
.button.quiet { border-color: transparent; color: var(--color-text-muted); background: transparent; }
.button.quiet:hover { color: var(--color-text); background: var(--color-surface-subtle); }
.button.danger-outline { border-color: #D9A8AE; color: var(--color-danger); background: #fff; }
.button.danger-outline:hover { background: var(--color-danger-bg); }
.button.danger-solid { color: #fff; background: var(--color-danger); }
.button.danger-solid:hover { background: #941A28; }
.button.warning { color: #352600; background: var(--color-action); }
.button.warning:hover { background: var(--color-action-hover); }
.button.full { width: 100%; }
.button.compact { min-height: 44px; padding: 7px 10px; }
.mini-button, .icon-button, .qty-control button, .remove-line, .ticket-mode-switch button, .quick-cash button {
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.mini-button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--color-control-border);
  border-radius: 10px;
  color: var(--color-text);
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}
.mini-button:hover { background: var(--color-surface-subtle); }
.icon-button { display: inline-grid; width: 44px; min-width: 44px; height: 44px; place-items: center; border: 1px solid transparent; border-radius: 11px; color: var(--color-text-muted); background: var(--color-surface-subtle); }
.icon-button:hover { color: var(--color-text); background: #E9DFD7; }
.icon-button .ui-icon { width: 20px; height: 20px; }

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 16px;
  height: 100%;
  min-height: 0;
  padding: 24px;
}
.catalog-panel, .basket-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.scanner-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 4px 10px 4px 14px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.scanner-field:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(71, 38, 45, .12); }
.scanner-field input { min-width: 0; min-height: 44px; padding: 5px 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; font-size: 16px; }
.scanner-field input:focus-visible { outline-color: transparent; box-shadow: none; }
.scanner-field kbd { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-surface-subtle); }
.scan-icon { display: inline-flex; color: var(--color-brand); }
.scan-icon .ui-icon { width: 22px; height: 22px; }
.search-hint { padding: 8px 2px 10px; color: var(--color-text-muted); font-size: 12px; }
.product-grid { display: grid; flex: 1; min-height: 0; overflow: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; gap: 10px; padding: 2px; }
.product-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  min-height: 144px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.product-tile:hover { border-color: #B8A8AA; background: #FFFEFC; transform: translateY(-1px); }
.product-name { display: block; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.product-meta { display: block; margin-top: 5px; color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.product-price { align-self: flex-end; margin-top: auto; color: var(--color-brand); font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.stock-low { color: var(--color-warning); font-weight: 700; }
.promo-note { display: block; margin-top: 5px; color: var(--color-success); font-size: 12px; font-weight: 650; }
.empty-state { grid-column: 1 / -1; padding: 36px 16px; border: 1px dashed var(--color-control-border); border-radius: 14px; color: var(--color-text-muted); background: var(--color-surface-subtle); text-align: center; }
.empty-state.compact { padding: 14px; }

.basket-heading { align-items: flex-start; }
.basket-heading .inline-actions { justify-content: flex-end; max-width: 62%; }
.basket-heading .button { min-height: 44px; padding: 7px 10px; }
.count-badge { display: inline-grid; min-width: 29px; height: 29px; place-items: center; padding: 0 8px; border-radius: var(--radius-pill); color: var(--color-brand); background: var(--color-selected); font-size: 14px; font-variant-numeric: tabular-nums; vertical-align: 3px; }
.status-chip { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.status-chip.good { color: var(--color-success); background: var(--color-success-bg); }
.status-chip.warn { color: var(--color-warning); background: var(--color-warning-bg); }
.status-chip.bad { color: var(--color-danger); background: var(--color-danger-bg); }
.status-chip.neutral { color: var(--color-text-muted); background: var(--color-surface-subtle); }
.basket-columns, .basket-line { display: grid; grid-template-columns: minmax(0, 1fr) 116px 80px; gap: 10px; align-items: center; }
.basket-columns { padding: 8px 10px; border-radius: 10px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.basket-columns span:nth-child(2), .basket-columns span:nth-child(3) { text-align: center; }
.basket { flex: 1 1 auto; min-height: 48px; overflow: auto; overscroll-behavior: contain; }
.basket .empty-state { margin-top: 10px; }
.basket-line { min-height: 72px; padding: 10px 8px; border-bottom: 1px solid #E9E2DE; }
.basket-line.age-line { background: #FFFAEC; }
.line-name { display: flex; align-items: center; gap: 7px; font-weight: 650; overflow-wrap: anywhere; }
.age-tag { display: inline-flex; padding: 3px 6px; border-radius: 6px; color: #fff; background: var(--color-warning); font-size: 10px; font-weight: 750; }
.qty-control { display: grid; grid-template-columns: 44px minmax(24px, 1fr) 44px; align-items: center; gap: 4px; }
.qty-control button, .remove-line { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; border: 1px solid var(--color-control-border); border-radius: 10px; color: var(--color-text); background: #fff; }
.qty-control button:hover { background: var(--color-surface-subtle); }
.qty-control button .ui-icon, .remove-line .ui-icon { width: 18px; height: 18px; }
.qty-control strong { text-align: center; font-variant-numeric: tabular-nums; }
.line-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.line-total small { display: block; margin-top: 3px; color: var(--color-success); font-weight: 600; }
.remove-line { min-height: 44px; margin: 5px 0 0 auto; color: var(--color-danger); }
.age-warning { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 10px 12px; border: 1px solid #D8B864; border-radius: 12px; color: #503A00; background: var(--color-warning-bg); }
.age-warning span { color: #66531F; font-size: 12px; }
.basket-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 0; }
.basket-tools .button { min-height: 44px; padding: 7px 10px; font-size: 12px; }
.basket-tools .quiet { justify-self: stretch; }
.totals-card { display: grid; gap: 6px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-subtle); font-variant-numeric: tabular-nums; }
.totals-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saving-row { color: var(--color-success); }
.grand-total { margin-top: 3px; padding-top: 7px; border-top: 1px solid #BFB2B1; color: var(--color-text); font-size: 36px; font-weight: 750; line-height: 1.1; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 10px; }
.pay-button.credit { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-surface); }
.order-type-field { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; }
.order-type-field select { min-height: 28px; height: 28px; padding: 0 6px; font-size: 13px; }
.pay-button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  justify-items: start;
  gap: 2px 10px;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--color-brand);
  border-radius: 14px;
  text-align: left;
}
.pay-button .ui-icon { grid-row: 1 / span 2; width: 25px; height: 25px; }
.pay-button span { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 750; }
.pay-button kbd { font-size: 10px; }
.pay-button small { grid-column: 2; color: inherit; font-size: 11px; opacity: .82; }
.pay-button.cash { border-color: var(--color-action); color: var(--color-text); background: var(--color-action); }
.pay-button.cash:hover { background: var(--color-action-hover); }
.pay-button.card { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-surface); }
.pay-button.card:hover { background: var(--color-selected); }

.toolbar-panel { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.search-box { display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-width: 180px; }
.search-box input { min-width: 0; }
.search-icon { display: inline-flex; color: var(--color-text-muted); }
.toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--color-text); font-weight: 550; }
.toggle input { flex: 0 0 auto; }
.table-panel { overflow: hidden; padding: 0; }
.data-table { overflow: auto; overscroll-behavior: contain; }
.table-row { display: grid; grid-template-columns: minmax(230px, 1.5fr) 130px 100px 100px 120px 200px; gap: 10px; align-items: center; min-width: 980px; min-height: 56px; padding: 9px 14px; border-bottom: 1px solid #E9E2DE; }
.table-row.header { position: sticky; z-index: 2; top: 0; min-height: 44px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.table-row.inactive, .category-row.inactive { opacity: .62; }
.row-actions, .card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.subsection-heading { margin-top: 28px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.entity-card { padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-panel); }
.entity-card-top { display: flex; justify-content: space-between; gap: 10px; }
.entity-card h3 { font-size: 17px; }
.entity-card p { margin: 7px 0; color: var(--color-text-muted); font-size: 13px; }
.entity-card .card-actions { justify-content: flex-start; margin-top: 12px; }

.sales-list { display: grid; gap: 10px; }
.sale-card { display: grid; grid-template-columns: 170px minmax(0, 1fr) 160px auto; gap: 16px; align-items: center; padding: 15px 17px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.sale-number { font-weight: 700; }
.sale-date { margin-top: 4px; color: var(--color-text-muted); font-size: 12px; }
.sale-summary { color: #51484A; }
.sale-amount { text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 750; }
.sale-amount small { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 11px; }
.sale-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.date-range { display: flex; align-items: flex-end; gap: 8px; }
.date-range label { color: var(--color-text-muted); font-size: 11px; font-weight: 650; }
.date-range input { display: block; min-height: 44px; margin-top: 4px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.metric-card { padding: 15px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.metric-card span { display: block; color: var(--color-text-muted); font-size: 12px; }
.metric-card strong { display: block; margin-top: 6px; color: var(--color-text); font-size: 23px; font-variant-numeric: tabular-nums; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.compact-list { display: grid; gap: 0; }
.compact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #E9E2DE; }
.compact-row:last-child { border-bottom: 0; }
.compact-row small { display: block; margin-top: 3px; color: var(--color-text-muted); }
.z-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; border-color: #C8B272; background: #FFFAE9; }
.z-panel p { margin: 7px 0 0; color: var(--color-text-muted); }
.z-actions { display: flex; align-items: flex-end; gap: 8px; }
.z-actions label { color: var(--color-text-muted); font-size: 12px; }
.z-actions input { display: block; width: 180px; margin-top: 4px; }
.audit-list { max-height: 360px; overflow: auto; }
.two-panel-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.category-tree, .card-stack { display: grid; gap: 7px; }
.category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 11px; }
.category-row.subcategory { margin-left: 28px; background: var(--color-surface-subtle); }
.category-row small { display: block; margin-top: 3px; color: var(--color-text-muted); }
.age-rule-card { padding: 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); }
.age-rule-card p { margin: 5px 0; color: var(--color-text-muted); font-size: 12px; }
.price-compare-results { max-width: 100%; margin-top: 12px; overflow: auto; }
.price-table { min-width: 980px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; }
.price-row { display: grid; grid-template-columns: 150px 90px 100px 80px 100px 90px 90px 100px 120px; gap: 8px; align-items: center; min-height: 50px; padding: 7px 9px; border-bottom: 1px solid var(--color-border); font-size: 12px; }
.price-row.header { min-height: 40px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-weight: 700; text-transform: uppercase; }
.price-row.best-cost { box-shadow: inset 4px 0 var(--color-success); }
.price-row.latest { background: var(--color-info-bg); }
.price-row.expired { color: var(--color-text-muted); text-decoration-color: var(--color-danger); }
.price-choice-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--color-surface-subtle); }
.compact-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.import-preview { max-height: 480px; overflow: auto; }
.import-row { display: grid; grid-template-columns: 48px 80px minmax(180px, 1fr) 120px 110px 110px 140px; gap: 8px; align-items: center; min-width: 900px; min-height: 50px; padding: 7px 9px; border-bottom: 1px solid var(--color-border); font-size: 12px; }
.import-row.flagged { background: #FFFAE9; }
.candidate-list { display: grid; gap: 7px; margin: 10px 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); }
.candidate-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; text-align: left; }
.pricing-rule-list { display: grid; gap: 7px; margin-bottom: 12px; }
.pricing-rule-row { display: grid; grid-template-columns: minmax(150px, 1fr) 100px 1.2fr; gap: 8px; align-items: center; }
.pricing-rule-row input { width: 100%; }
.price-review-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) 120px repeat(3, 100px) minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--color-border); }
.price-review-row small { display: block; }
.product-review-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.review-image { width: 116px; height: 116px; object-fit: contain; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.review-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.review-section h3 { margin: 0 0 8px; }
.recommendation-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin-top: 14px; padding: 14px; border: 1px solid #C8B272; border-radius: 12px; background: #FFFAE9; }
.recommendation-card strong { color: var(--color-text); font-size: 26px; }
.recommendation-card div { grid-column: 1 / -1; color: var(--color-text-muted); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.settings-grid > .panel { min-width: 0; }
.phone-scanner-panel { grid-column: 1 / -1; }
.mobile-pos-entry-panel { border-color: #BBA9AC; }
.legacy-phone-scanner-panel { border-style: dashed; }
.advanced-label { display: inline-block; margin-left: 7px; padding: 3px 7px; border-radius: var(--radius-pill); color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.phone-scanner-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.phone-scanner-qr-wrap { display: grid; gap: 9px; justify-items: center; }
.phone-scanner-qr { width: min(100%, 300px); aspect-ratio: 1; border: 8px solid #fff; border-radius: 14px; background: #fff; image-rendering: pixelated; }
.phone-scanner-qr-wrap .path-box { width: 100%; text-align: center; user-select: all; }
.compact-field { max-width: 240px; margin-top: 13px; }
.phone-setup-steps { margin: 14px 0; padding-left: 22px; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }
.connected-heading { margin-top: 18px; }
.connected-heading h3 { margin: 0; }
.phone-device-list { display: grid; gap: 7px; }
.phone-device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); }
.phone-device strong, .phone-device span, .phone-device small { display: block; }
.phone-device span, .phone-device small { margin-top: 3px; color: var(--color-text-muted); font-size: 12px; }
.phone-device small { font-size: 10px; }
.hosted-mobile-qr { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 16px; margin: 14px 0; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-subtle); }
.hosted-mobile-qr-image { display: grid; place-items: center; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.hosted-mobile-qr-image img { display: block; width: 180px; height: 180px; image-rendering: auto; }
.hosted-mobile-qr-copy { min-width: 0; }
.hosted-mobile-qr-copy > strong { font-size: 18px; }
.hosted-mobile-qr-copy p, .hosted-mobile-qr-copy small { display: block; margin: 5px 0 10px; color: var(--color-text-muted); }
.hosted-mobile-qr-copy code { display: block; overflow-wrap: anywhere; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; font-size: 12px; user-select: all; }
.hosted-mobile-qr-copy .button { margin-top: 10px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.path-box { padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.info-banner { padding: 11px 12px; border: 1px solid #B9C8D9; border-radius: 11px; color: #214B70; background: var(--color-info-bg); font-size: 13px; }
.save-bar { position: sticky; z-index: 4; bottom: 0; display: flex; justify-content: flex-end; margin: 0 -24px -24px; padding: 12px 24px; border-top: 1px solid var(--color-border); background: rgba(250, 244, 232, .97); }

.ticket-workspace { display: grid; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); gap: 14px; align-items: start; }
.ticket-controls, .ticket-preview-panel { min-width: 0; }
.ticket-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 18px; padding: 4px; border-radius: 13px; background: var(--color-surface-subtle); }
.ticket-mode-switch button { min-height: 48px; border: 1px solid transparent; border-radius: 10px; color: var(--color-text-muted); background: transparent; font-weight: 650; }
.ticket-mode-switch button:hover { background: #fff; }
.ticket-mode-switch button.active { border-color: var(--color-brand); color: #fff; background: var(--color-brand); }
.ticket-search-form { grid-template-columns: auto minmax(0, 1fr) auto; }
.ticket-search-form .button { min-height: 44px; }
.ticket-search-results { display: grid; gap: 6px; max-height: 230px; margin-top: 10px; overflow: auto; }
.ticket-product-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 11px; color: var(--color-text); background: #fff; text-align: left; }
.ticket-product-choice:hover, .ticket-product-choice.selected { border-color: var(--color-brand); background: var(--color-selected); }
.ticket-product-choice span, .ticket-product-choice small { display: block; }
.ticket-product-choice small { margin-top: 3px; color: var(--color-text-muted); }
.ticket-product-choice > strong { color: var(--color-brand); font-size: 18px; }
.ticket-selected { display: grid; gap: 3px; margin-top: 14px; padding: 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-selected); }
.ticket-selected > span { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ticket-selected > strong { font-size: 18px; }
.ticket-selected > small { color: var(--color-text-muted); }
.ticket-fields { margin-top: 14px; }
.ticket-fields input[readonly] { color: var(--color-text-muted); background: var(--color-surface-subtle); }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ticket-actions .primary { min-width: 150px; }
.ticket-preview-frame { padding: 18px; border: 1px solid var(--color-border); border-radius: 13px; background: #E7DED4; }
#ticketPreview { display: block; width: 100%; height: auto; aspect-ratio: 576 / 300; background: #fff; image-rendering: pixelated; }
.ticket-preview-note { display: flex; justify-content: space-between; gap: 12px; padding: 11px 4px 0; color: var(--color-text-muted); font-size: 12px; }
.ticket-preview-note strong { color: var(--color-text); }
.phone-ticket-queue-panel { margin-top: 14px; }
.phone-ticket-queue { display: grid; gap: 7px; }
.phone-ticket-row { display: grid; grid-template-columns: 28px minmax(210px, 1.3fr) 130px 90px minmax(170px, .8fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 11px; background: #fff; }
.phone-ticket-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-brand); }
.phone-ticket-row strong, .phone-ticket-row small { display: block; }
.phone-ticket-row small { margin-top: 3px; color: var(--color-text-muted); }
.phone-ticket-price { color: var(--color-brand); font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 700; }
.phone-ticket-actions { display: flex; justify-content: flex-end; gap: 5px; }

.field { display: block; min-width: 0; margin-bottom: 12px; }
.field > span { display: block; margin-bottom: 6px; color: var(--color-text); font-size: 13px; font-weight: 600; }
.field small { color: var(--color-text-muted); font-weight: 450; }
.field-toggle { margin-top: 20px; }
.two-col, .three-col { display: grid; gap: 12px; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
textarea { min-height: 112px; resize: vertical; }
.form-error { min-height: 24px; color: var(--color-danger); font-size: 13px; line-height: 1.45; }

dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(71, 38, 45, .16);
  border-radius: var(--radius-dialog);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(32, 32, 38, .24);
}
dialog::backdrop { background: rgba(32, 25, 27, .55); }
dialog:has(.wide-dialog) { width: min(800px, calc(100vw - 32px)); }
.dialog-card { max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; }
.wide-dialog { width: 100%; }
.dialog-heading { margin-bottom: 20px; }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.dialog-actions:not(:has(.grow)) { justify-content: flex-end; }
.locked-dialog { width: min(560px, calc(100vw - 32px)); }
.pin-change-card { width: min(560px, calc(100vw - 32px)); }
.age-dialog-card { text-align: center; }
.age-icon { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 13px; border: 6px solid var(--color-danger); border-radius: 50%; color: var(--color-danger); font-size: 27px; font-weight: 750; }
.age-check-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 16px 0; text-align: left; }
.age-check-details > div { padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-subtle); }
.age-check-details span { display: block; color: var(--color-text-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; }
.age-check-details strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.age-check-details .dob-cutoff { grid-column: 1 / -1; border-color: #D8B864; color: #503A00; background: var(--color-warning-bg); text-align: center; }
.age-check-details .dob-cutoff strong { font-size: 25px; }
.age-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; }
.confirm-toggle { justify-content: center; margin: 18px 0; padding: 12px; border-radius: 10px; background: var(--color-warning-bg); }
.payment-dialog .payment-total { margin-bottom: 18px; }
.payment-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); }
.payment-total strong { font-size: 37px; font-variant-numeric: tabular-nums; }
.quick-cash { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.quick-cash button { min-height: 48px; border: 1px solid var(--color-control-border); border-radius: 10px; background: #fff; font-weight: 650; }
.quick-cash button:hover { background: var(--color-surface-subtle); }
.change-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 13px; border-radius: 11px; color: #fff; background: var(--color-brand); }
.change-preview strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.terminal-total { margin: 16px 0; padding: 20px; border-radius: 14px; color: var(--color-text); background: var(--color-surface-subtle); font-size: 44px; font-variant-numeric: tabular-nums; font-weight: 750; text-align: center; }
.cash-action, .card-action { color: var(--color-text); }
.refund-lines { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 11px; }
.refund-line { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--color-border); }
.refund-line:last-child { border-bottom: 0; }
.refund-line input { min-height: 44px; }
.refund-preview-total { margin: -4px 0 14px; padding: 12px; border-radius: 10px; background: var(--color-surface-subtle); font-weight: 700; text-align: right; }
.z-result { display: grid; gap: 8px; }
.z-result div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 22px; min-width: 280px; max-width: min(720px, calc(100vw - 30px)); padding: 12px 16px; transform: translate(-50%, 20px); border-radius: 12px; color: #fff; background: var(--color-brand); box-shadow: 0 10px 30px rgba(32, 32, 38, .22); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal), transform var(--duration-normal); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: var(--color-danger); }
.toast.warning { color: #352600; background: var(--color-action); }

#loginDialog[open] {
  display: block;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#loginDialog::backdrop { background: var(--color-canvas); }
#loginDialog { background: var(--color-canvas); }
.login-layout { display: grid; grid-template-columns: minmax(498px, 42%) minmax(0, 1fr); width: 100%; min-height: 100dvh; margin: 0; }
.login-brand-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; min-width: 0; padding: 24px; color: #fff; background: var(--color-brand); }
.login-brand-logo-region { display: grid; width: min(450px, 100%); min-height: 229px; place-items: center; }
.login-brand-logo { display: block; width: min(300px, 100%); height: auto; object-fit: contain; }
.login-brand-copy { width: min(450px, 100%); }
.login-brand-copy > span { color: var(--color-action); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.login-brand-copy h2 { margin: 13px 0; color: #fff; font-size: clamp(26px, 3vw, 42px); line-height: 1.12; }
.login-brand-copy p { max-width: 360px; margin: 0; color: rgba(250, 244, 232, .78); font-size: 15px; }
.login-form-panel { display: grid; min-width: 0; place-items: center; padding: 40px; background: var(--color-canvas); }
.login-form-content { width: min(400px, 100%); }
.login-section-label { margin-bottom: 8px; }
.login-form-content h1 { font-size: 30px; }
.login-intro { margin: 8px 0 24px; color: var(--color-text-muted); }
.login-field { margin-bottom: 14px; }
.login-field input, .login-field select { min-height: var(--control-height-large); font-size: 16px; }
.login-field input { letter-spacing: .16em; }
.login-field input[type="password"] { height: 64px; padding: 0 18px; border: 1.5px solid rgba(71, 38, 45, .28); border-radius: 16px; color: var(--color-brand); background: #fff; font-size: 30px; font-weight: 700; letter-spacing: .5em; text-align: center; }
.login-field input[type="password"]::placeholder { font-size: 15px; font-weight: 500; letter-spacing: .02em; }
/* PIN keypad: same visual language as the on-screen number pad */
.login-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 16px; padding: 12px; border: 1px solid rgba(71, 38, 45, .12); border-radius: 22px; background: linear-gradient(180deg, #F7F0E4 0%, #EEE3D3 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; touch-action: manipulation; }
.login-keypad button { display: grid; height: clamp(54px, 8.6dvh, 74px); min-height: 0; place-items: center; border: 0; border-radius: 16px; color: var(--color-text); background: #fff; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: 0 1px 0 rgba(71, 38, 45, .24), 0 3px 8px rgba(32, 20, 24, .06); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 70ms ease, transform 70ms ease, box-shadow 70ms ease; }
@media (hover: hover) { .login-keypad button:hover { background: #FFFDF8; } }
.login-keypad button:active, .login-keypad button.down { color: var(--color-text); background: var(--color-action); box-shadow: none; transform: translateY(1px) scale(.97); }
.login-keypad button[data-keypad="clear"], .login-keypad button[data-keypad="backspace"] { color: var(--color-brand); background: #EADDD7; font-size: 17px; font-weight: 750; }
.login-keypad button[data-keypad="clear"]:active, .login-keypad button[data-keypad="clear"].down, .login-keypad button[data-keypad="backspace"]:active, .login-keypad button[data-keypad="backspace"].down { color: #FAF4E8; background: var(--color-brand-hover); }
.login-keypad .ui-icon { width: 28px; height: 28px; }
.login-submit { width: 100%; min-height: 60px; border-radius: 16px; color: var(--color-text) !important; background: var(--color-action) !important; font-size: 16px; font-weight: 750; }
.login-submit:hover:not(:disabled) { background: var(--color-action-hover) !important; }
.login-submit:active:not(:disabled) { background: var(--color-action-pressed) !important; }
.login-help { margin-top: 18px; font-size: 12px; }

@media (min-width: 1440px) {
  .basket-panel { width: 520px; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --rail-width: 184px; --basket-width: 480px; }
  .topbar { grid-template-columns: var(--rail-width) minmax(0, 1fr) auto; }
  .brand-zone { width: 150px; }
  .workspace-context { padding: 0 16px; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 480px; padding: 16px; }
  .basket-panel { width: 480px; }
  .page-view { padding: 16px; }
}

@media (min-width: 980px) and (max-width: 1279px) {
  :root { --rail-width: 80px; --basket-width: 456px; }
  .topbar { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .brand-zone { width: 48px; height: 48px; }
  .brand-zone picture, .brand-logo { width: 32px; height: 32px; }
  .workspace-context { padding: 0 14px; }
  .top-actions { gap: 8px; padding-right: 12px; }
  .header-statuses { gap: 6px; }
  .service-statuses { min-width: 120px; }
  .scanner-badge { min-height: 38px; padding: 0 8px; }
  .staff-pill { max-width: 156px; padding: 0 9px; }
  .side-rail { padding: 10px 8px; }
  .main-nav { gap: 4px; }
  .nav-btn { flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 6px 2px; text-align: center; }
  .nav-btn > .ui-icon { width: 20px; height: 20px; }
  .nav-label { display: none; }
  .nav-short-label { display: block; max-width: 100%; overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 456px; gap: 12px; padding: 12px; }
  .basket-panel { width: 456px; }
  .page-view { padding: 16px 12px; }
  .basket-columns, .basket-line { grid-template-columns: minmax(0, 1fr) 108px 72px; gap: 8px; }
  .qty-control { grid-template-columns: 44px minmax(16px, 1fr) 44px; gap: 2px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .phone-ticket-row { grid-template-columns: 28px minmax(170px, 1fr) 100px 76px auto; }
  .phone-ticket-created { display: none; }
  .ticket-workspace { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 1099px) {
  #loginDialog[open] { overflow-y: auto; }
  .login-layout { display: block; min-height: 100dvh; }
  .login-brand-panel { min-height: 112px; padding: 20px 16px; }
  .login-brand-logo-region { width: 180px; min-height: 92px; }
  .login-brand-logo { width: 120px; }
  .login-brand-copy { display: none; }
  .login-form-panel { min-height: calc(100dvh - 112px); align-items: start; padding: 24px 16px; }
  .login-form-content { width: min(400px, 100%); }
}

@media (max-width: 979px) {
  :root { --header-height: 112px; }
  .app-shell { display: block; height: 100dvh; overflow: hidden; }
  .topbar { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: 68px 44px; min-height: var(--header-height); padding: 0 12px; }
  .brand-zone { grid-row: 1; grid-column: 1; width: 40px; height: 48px; }
  .brand-zone picture, .brand-logo { width: 32px; height: 32px; }
  .workspace-context { grid-row: 1; grid-column: 2; padding: 0 8px; }
  .workspace-title { font-size: 18px; }
  .workspace-subtitle { display: none; }
  .top-actions { grid-row: 1; grid-column: 3; gap: 8px; padding: 0; }
  .header-statuses { position: absolute; top: 68px; right: 12px; left: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(2, 18px); align-items: center; justify-content: center; gap: 1px 12px; min-width: 0; }
  .scanner-badge { grid-row: 1 / 3; grid-column: 1; min-height: 36px; }
  .service-statuses { display: contents; }
  .header-status { min-height: 18px; font-size: 10px; }
  #headerPrinterStatus { grid-row: 1; grid-column: 2; }
  #headerSyncStatus { grid-row: 2; grid-column: 2; }
  .nav-disclosure { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(250, 244, 232, .32); border-radius: 11px; color: #fff; background: transparent; }
  .nav-disclosure .ui-icon { width: 22px; height: 22px; }
  .staff-pill { width: auto; min-width: 44px; max-width: 148px; padding: 0 9px; }
  .staff-pill span { display: block; }
  .staff-pill .ui-icon { width: 20px; height: 20px; }
  .side-rail { position: fixed; z-index: 19; top: var(--header-height); bottom: 0; left: 0; width: min(280px, calc(100vw - 56px)); overflow: hidden; transform: translateX(-105%); border-right: 1px solid var(--color-border); box-shadow: 12px 0 30px rgba(32, 32, 38, .16); transition: transform var(--duration-normal); }
  .side-rail.is-open { transform: translateX(0); }
  .main-nav { gap: 4px; }
  .nav-btn { min-height: 48px; }
  .nav-label { display: inline; }
  .nav-short-label { display: none; }
  main { height: calc(100dvh - var(--header-height)); overflow: auto; }
  .view.active { min-height: 100%; }
  .checkout-layout { display: flex; flex-direction: column; height: auto; min-height: 100%; padding: 12px; }
  .catalog-panel { min-height: 390px; }
  .basket-panel { min-height: 600px; }
  .basket { min-height: 180px; }
  .page-view { padding: 16px; }
  .settings-grid, .report-grid, .phone-scanner-layout, .ticket-workspace { grid-template-columns: 1fr; }
  .phone-ticket-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .phone-ticket-price, .phone-ticket-copies { text-align: right; }
  .phone-ticket-created, .phone-ticket-actions { grid-column: 2 / -1; }
  .two-panel-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sale-card { grid-template-columns: minmax(0, 1fr) auto; }
  .sale-summary, .sale-actions { grid-column: 1 / -1; }
  .sale-amount { text-align: left; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .toolbar-panel { flex-wrap: wrap; }
  .search-box { flex-basis: 100%; }
  .date-range { flex-wrap: wrap; }
  .save-bar { margin: 0 -16px -16px; padding: 10px 16px; }
}

@media (max-width: 700px) {
  .panel { padding: 13px; border-radius: 15px; }
  .checkout-layout { padding: 8px; }
  .panel-heading, .page-heading { align-items: flex-start; }
  .panel-heading { flex-wrap: wrap; }
  .page-heading { flex-direction: column; }
  .page-heading > .inline-actions { width: 100%; }
  .checkout-layout .panel-heading { flex-wrap: nowrap; }
  .basket-heading { display: block; }
  .basket-heading .inline-actions { justify-content: flex-start; max-width: none; margin-top: 10px; }
  .basket-columns, .basket-line { grid-template-columns: minmax(0, 1fr) 112px 68px; gap: 4px; }
  .qty-control { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 2px; }
  .qty-control button, .remove-line { min-width: 44px; min-height: 44px; }
  .remove-line { grid-column: 3; }
  .basket-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basket-tools .button { font-size: 11px; }
  .pay-button { min-height: 72px; padding: 8px; }
  .pay-button span { font-size: 14px; }
  .grand-total { font-size: 32px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .product-tile { min-height: 112px; padding: 11px; }
  .metric-grid, .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: 1fr; }
  .z-panel, .z-actions { align-items: stretch; flex-direction: column; }
  .z-actions input { width: 100%; }
  .phone-scanner-layout { gap: 12px; }
  .hosted-mobile-qr { grid-template-columns: 1fr; }
  .hosted-mobile-qr-image { justify-self: start; }
  .sale-card { gap: 8px; padding: 12px; }
  .date-range > label { flex: 1 1 140px; }
  .dialog-actions { justify-content: flex-end; }
  .dialog-actions .grow { display: none; }
  .age-actions { grid-template-columns: 1fr; }
  .quick-cash { grid-template-columns: repeat(3, 1fr); }
  .ticket-preview-frame { padding: 9px; }
  .ticket-preview-note { flex-wrap: wrap; }
  .price-review-row, .pricing-rule-row { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .topbar { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 0 8px; }
  .brand-zone { width: 40px; }
  .brand-zone picture, .brand-logo { width: 32px; height: 32px; }
  .workspace-context { padding: 0 4px; }
  .workspace-title { font-size: 16px; }
  .top-actions { gap: 5px; }
  .nav-disclosure, .staff-pill { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  .staff-pill { max-width: 42px; padding: 0; }
  .staff-pill span { display: none; }
  .page-view { padding: 12px; }
  .checkout-layout { padding: 6px; }
  .checkout-layout .panel-heading { display: block; }
  .checkout-layout .panel-heading > .button { margin-top: 10px; }
  .basket-heading .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basket-columns, .basket-line { grid-template-columns: minmax(0, 1fr) 112px 58px; gap: 4px; }
  .qty-control { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 2px; }
  .qty-control button, .remove-line { min-width: 44px; }
  .product-grid { grid-template-columns: 1fr; }
  .pay-grid { gap: 7px; }
  .pay-button .ui-icon { width: 20px; height: 20px; }
  .pay-button span { gap: 4px; font-size: 12px; }
  .pay-button kbd { min-width: 22px; min-height: 20px; padding: 2px 4px; }
  .metric-grid, .compact-metrics { grid-template-columns: 1fr; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .dialog-card { padding: 18px; }
}

@media (max-height: 800px) {
  .login-form-panel { padding-top: 24px; padding-bottom: 24px; }
  .login-intro { display: none; }
  .login-help { margin-top: 10px; }
  .login-field input[type="password"] { height: 56px; font-size: 26px; }
  .login-keypad button { height: clamp(52px, 8dvh, 66px); }
  .login-keypad { padding: 10px; gap: 8px; }
}

@media (max-width: 1099px) and (max-height: 800px) {
  .login-brand-panel { padding: 10px 16px; }
  .login-form-panel { padding: 16px; }
  .login-form-content h1 { font-size: 26px; }
  .login-section-label { margin-bottom: 4px; }
  .login-intro { display: none; }
  .login-field { margin-bottom: 8px; }
  .login-field input, .login-field select { min-height: 48px; }
  .login-keypad { gap: 6px; margin-bottom: 10px; }
  .login-field input[type="password"] { height: 50px; }
  .login-submit { min-height: 52px; }
  .login-help { margin-top: 10px; }
}

@media (max-height: 760px) and (min-width: 980px) {
  .nav-btn { min-height: 60px; }
  .checkout-layout { height: 100%; min-height: 0; padding: 12px; }
  .basket-panel, .catalog-panel { min-height: 0; padding: 12px; }
  .basket-panel .panel-heading { margin-bottom: 8px; }
  .basket { min-height: 48px; }
  .basket-tools { gap: 6px; padding: 8px 0; }
  .basket-tools .button { min-height: 44px; }
  .pay-button { min-height: 72px; }
  .grand-total { font-size: 32px; }
}

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

/* Shared interaction states and persistent operational feedback. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.operation-notice { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-height: 128px; overflow: auto; padding: 12px 20px; border-bottom: 1px solid #D8B864; color: #503A00; background: var(--color-warning-bg); }
.operation-notice p { margin: 0; font-size: 13px; line-height: 1.45; }
.operation-notice .inline-actions { flex-shrink: 0; }
button, .product-tile { touch-action: manipulation; }
button:active:not(:disabled) { filter: brightness(.96); }
.product-tile:focus-visible, .data-table:focus-visible { outline-offset: -4px; }
.dialog-heading { padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.dialog-heading h2 { overflow-wrap: anywhere; }
.dialog-actions { padding-top: 16px; border-top: 1px solid var(--color-border); }
.data-table:focus-visible { outline: 3px solid var(--color-brand); outline-offset: -3px; }
* { scrollbar-width: thin; scrollbar-color: #B5A6A8 transparent; }
.toast { left: calc(var(--rail-width) + 24px); min-width: 0; max-width: min(460px, calc(100vw - var(--rail-width) - var(--basket-width) - 72px)); transform: translateY(20px); text-align: left; }
.toast.show { transform: translateY(0); }
@media (min-width: 980px) {
  #checkoutView.active { overflow: hidden; }
  .catalog-panel > .panel-heading, .catalog-panel > .scanner-field, .catalog-panel > .search-hint,
  .basket-panel > :not(.basket) { flex-shrink: 0; }
}
@media (max-width: 979px) {
  .toast { left: 12px; max-width: calc(100vw - 24px); }
  .operation-notice { flex-direction: column; align-items: start; padding: 10px 12px; }
  .brand-zone { width: 48px; min-width: 48px; }
  .topbar { grid-template-columns: 48px minmax(0, 1fr) auto; }
}

/* Readable header branding; original identity paths and colours are preserved. */
.brand-zone { width: 208px; height: 80px; }
.brand-zone picture { width: 180px; height: auto; }
.brand-logo { width: 100%; height: auto; }
.nav-btn > .ui-icon { color: #000; }
@media (min-width: 980px) and (max-width: 1439px) {
  .topbar { grid-template-columns: 184px minmax(0, 1fr) auto; }
  .brand-zone { width: 184px; height: 80px; }
  .brand-zone picture, .brand-logo { width: 160px; height: auto; }
}
@media (max-width: 979px) {
  .topbar { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .brand-zone { width: 64px; min-width: 64px; height: 64px; }
  .brand-zone picture, .brand-logo { width: 48px; height: 48px; }
}
.startup-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; color: var(--color-canvas); background: var(--color-brand); isolation: isolate; }
.startup-halo { position: absolute; width: min(76vw, 740px); aspect-ratio: 1; border: 1px solid rgba(249, 217, 107, .12); border-radius: 50%; animation: startup-halo 3s ease-in-out infinite; }
.startup-halo::before, .startup-halo::after { position: absolute; inset: 12%; border: 1px solid rgba(250, 244, 232, .06); border-radius: 50%; content: ""; }
.startup-halo::after { inset: 24%; }
.startup-content { position: relative; display: flex; flex-direction: column; align-items: center; width: min(520px, calc(100vw - 64px)); text-align: center; animation: startup-enter 700ms cubic-bezier(.2,.8,.2,1) both; }
.startup-logo { display: block; width: min(380px, 100%); height: auto; object-fit: contain; }
.startup-rule { width: 32px; height: 2px; margin: 38px 0 26px; background: var(--color-action); }
.startup-content h1 { color: var(--color-canvas); font-size: clamp(26px, 3vw, 36px); font-weight: 550; letter-spacing: -.035em; }
.startup-content p { margin: 12px 0 28px; color: rgba(250, 244, 232, .78); font-size: 14px; }
.startup-progress { width: 144px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(250, 244, 232, .15); }
.startup-progress span { display: block; width: 48px; height: 100%; border-radius: inherit; background: var(--color-action); animation: startup-progress 1.4s ease-in-out infinite; }
.startup-content .button { margin-top: 20px; }
.startup-footer { position: absolute; bottom: 36px; color: rgba(250, 244, 232, .64); font-size: 10px; font-weight: 650; letter-spacing: .18em; }
.startup-footer span { margin: 0 10px; color: var(--color-action); }
.startup-screen.leaving { animation: startup-exit 260ms ease both; pointer-events: none; }
#loginDialog.startup-reveal { animation: sign-in-reveal 260ms ease both; }
@keyframes sign-in-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes startup-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes startup-exit { to { opacity: 0; transform: scale(1.015); } }
@keyframes startup-progress { 0% { transform: translateX(-48px); } 100% { transform: translateX(192px); } }
@keyframes startup-halo { 50% { transform: scale(1.04); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .startup-screen, .startup-content, .startup-halo, .startup-progress span { animation: none; }
  .startup-progress span { width: 100%; }
}

/* Store workspace refresh: clear hierarchy, touch-sized controls and flat records. */
.startup-screen { background: radial-gradient(ellipse at 50% 38%, #663A43 0, #47262D 58%, #351B23 100%); }
.startup-content { width: min(760px, calc(100vw - 80px)); }
.startup-logo { width: min(640px, 100%); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .12)); }
.startup-rule { width: 48px; margin: 48px 0 28px; }
.startup-halo { width: min(90vw, 1000px); }
.login-brand-panel { position: relative; gap: 52px; padding: 40px; overflow: hidden; background: radial-gradient(ellipse at 50% 25%, #663A43, #47262D 68%); }
.login-brand-logo-region { width: 100%; min-height: 180px; }
.login-brand-logo { width: min(480px, 100%); }
.login-brand-copy { max-width: 410px; }
.login-brand-copy h2 { font-weight: 550; letter-spacing: -.04em; }
.scanner-badge { min-height: 32px; padding: 0; border: 0; border-radius: 0; font-weight: 500; }
.status-dot { width: 7px; height: 7px; box-shadow: none; }
.workspace-subtitle { letter-spacing: .015em; }
.workspace-context { border-left: 1px solid rgba(250, 244, 232, .16); }
.staff-pill { border-color: rgba(250, 244, 232, .18); border-radius: 8px; }
.side-rail { padding: 12px 10px 24px; background: #FFFDFA; }
.main-nav { gap: 5px; }
.nav-section-label { padding: 18px 12px 9px; color: #796D70; font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.nav-btn { min-height: 52px; gap: 12px; padding: 8px 10px; border-radius: 9px; color: #54494D; font-size: 13px; font-weight: 550; }
.nav-btn > .ui-icon { flex-shrink: 0; width: 22px; height: 22px; padding: 1px; stroke-width: 1.65; }
.nav-btn:hover { background: #F4F0EA; }
.nav-btn.active { color: #47262D; background: #EBD9DC; }
.nav-btn.active:hover { color: #47262D; background: #E2CBD0; }
.nav-suppliers { margin-top: 0; }
.nav-suppliers::after { display: none; }
.checkout-categories { display: flex; flex-shrink: 0; gap: 8px; overflow: auto; max-height: 126px; padding: 4px 2px 12px; flex-wrap: wrap; scrollbar-width: thin; }
.category-filter { flex-shrink: 0; min-height: 48px; max-width: 100%; padding: 10px 16px; border: 1px solid #D7CDCA; border-radius: 8px; background: #FFFDFA; color: #514247; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.category-filter:hover { background: #F5EEE6; border-color: #A28D91; }
.category-filter[aria-pressed="true"] { color: #FAF4E8; border-color: #47262D; background: #47262D; }
.catalog-result-count { flex-shrink: 0; margin: 0 2px 10px; color: var(--color-text-muted); font-size: 11px; }
.page-heading h1 { font-weight: 600; letter-spacing: -.04em; }
.page-view { background: #FFFDFA; }
.page-view > .panel, .page-view .two-panel-grid > .panel, .report-grid > .panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.page-view > .toolbar-panel { padding: 0 0 16px; margin-bottom: 0; border-bottom: 1px solid var(--color-border); }
.page-view > .table-panel { padding: 0; }
.page-view .subsection-heading { margin-top: 28px; }
.page-heading > .inline-actions { justify-content: flex-end; }
.product-tools { padding: 0 0 20px; }
.product-tools .button { min-height: 44px; font-size: 12px; }
.workspace-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.workspace-table caption { text-align: left; }
.workspace-table th { padding: 13px 16px; background: #F7F3ED; color: #796D70; font-size: 11px; font-weight: 600; white-space: nowrap; }
.workspace-table td { padding: 17px 16px; border-bottom: 1px solid #EAE3DC; vertical-align: middle; overflow-wrap: anywhere; }
.workspace-table tbody tr:hover { background: #FBF7F1; }
.workspace-table td small { display: block; margin-top: 6px; color: var(--color-text-muted); font-size: 11px; line-height: 1.5; }
.workspace-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.workspace-table .numeric strong { font-size: 16px; font-weight: 650; }
.product-record-table { min-width: 880px; }
.product-record-table td:first-child { width: 34%; min-width: 220px; }
.product-record-table td:nth-child(2) { min-width: 120px; }
.product-record-table td:nth-child(3) { min-width: 80px; white-space: nowrap; }
.product-record-table td:nth-child(4) { min-width: 90px; white-space: nowrap; }
.product-record-table td:nth-child(5) { min-width: 150px; }
.product-record-table td:last-child { min-width: 190px; }
.product-record-table .row-actions { flex-wrap: nowrap; }
.product-record-table .inactive { opacity: .65; }
.workspace-table td.sale-summary { min-width: 200px; max-width: 380px; line-height: 1.5; }
.mini-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 7px; white-space: nowrap; }
.sales-list, .supplier-directory { display: block; overflow-x: auto; border-bottom: 1px solid var(--color-border); }
.sale-actions { min-width: 152px; flex-wrap: nowrap; }
.table-row { min-width: 880px; grid-template-columns: minmax(200px, 1.5fr) 130px 90px 90px 120px 150px; min-height: 72px; padding: 12px 16px; }
.table-row.header { min-height: 46px; background: #F7F3ED; }
.table-row:not(.header):hover { background: #FBF7F1; }
#promotionList { display: block; }
#promotionList .entity-card { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
#promotionList .entity-card p, #promotionList .card-actions { margin: 0; }
.ticket-workspace { gap: 32px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.ticket-workspace > .panel { padding: 12px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.ticket-preview-panel { border-left: 1px solid var(--color-border) !important; padding-left: 28px !important; }
.ticket-preview-frame { border: 0; border-radius: 8px; background: #F0EBE3; padding: 24px 12px; }
.ticket-preview-frame canvas { box-shadow: 0 8px 20px rgba(45, 30, 32, .1); }
.ticket-selected { border-radius: 0; border: 0; border-left: 3px solid var(--color-brand); }
.ticket-mode-switch { border-radius: 8px; }
.report-context { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 0 0 24px; color: var(--color-text-muted); font-size: 12px; }
.report-context strong { margin-left: 8px; color: var(--color-text); }
#reportMetrics { gap: 16px; margin-bottom: 18px; }
#reportMetrics .metric-card { padding: 22px; border: 1px solid #E5DCD5; border-radius: 10px; box-shadow: none; background: #fff; }
#reportMetrics .metric-card:first-child { border-top: 3px solid var(--color-brand); padding-top: 20px; }
#reportMetrics .metric-card strong { margin: 12px 0 8px; font-size: clamp(24px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.04em; }
#reportMetrics .metric-card small { color: var(--color-text-muted); font-size: 11px; }
.report-trend-section { padding: 18px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sales-trend svg { display: block; width: 100%; max-height: 190px; }
.chart-label { fill: #796D70; font-size: 10px; font-family: inherit; }
.chart-baseline { stroke: #CDC3BE; stroke-width: 1; }
.trend-bar { fill: #653C47; }
.trend-bar:hover { fill: #966373; }
.trend-negative { fill: #B42332; }
.chart-data { margin-top: 16px; font-size: 12px; color: var(--color-text-muted); }
.chart-data summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.chart-data table { margin-top: 8px; }
.report-grid { gap: 0 32px; }
.report-grid > .panel { padding: 28px 0; border-bottom: 1px solid var(--color-border); }
.ranked-product { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; }
.ranked-product strong { font-size: 12px; font-weight: 550; }
.ranked-product > span { color: var(--color-text-muted); font-size: 12px; }
.ranked-product meter { display: block; width: 100%; height: 6px; margin-top: 8px; border: 0; }
.ranked-product meter::-webkit-meter-bar { border: 0; border-radius: 3px; background: #EFE8E1; }
.ranked-product meter::-webkit-meter-optimum-value { border-radius: 3px; background: #A27380; }
.payment-mix { width: 100%; height: 20px; margin: 12px 0; }
.mix-track { fill: #B8A08D; }
.mix-empty { fill: #EDE7DF; }
.mix-cash { fill: #653C47; }
.supplier-directory { margin-bottom: 32px; }
#suppliersView > .subsection-heading { padding: 24px 0; border-top: 1px solid var(--color-border); }
.category-tree { gap: 0; }
.category-group { padding: 8px 0 18px; border-bottom: 1px solid var(--color-border); }
.category-row { min-height: 64px; padding: 8px 0; border: 0; border-radius: 0; }
.category-row.subcategory { margin: 0 0 0 14px; padding-left: 22px; border-left: 1px solid #D6CBC7; background: transparent; }
.category-row.subcategory strong { font-weight: 500; }
.age-rule-card { padding: 18px 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.age-rule-card p { line-height: 1.7; margin: 10px 0; }
.settings-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--color-border); margin: 0 0 28px; }
.settings-tabs [role="tab"] { flex-shrink: 0; min-height: 56px; padding: 8px 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--color-text-muted); background: transparent; font-size: 13px; font-weight: 550; }
.settings-tabs [aria-selected="true"] { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: 700; }
.settings-grid { display: block; }
.settings-group { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
.settings-group[hidden] { display: none; }
.settings-group > .panel { padding: 0 0 28px; margin-bottom: 28px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; background: transparent; }
#settingsGroup-store, #settingsGroup-data { max-width: 720px; }
.save-bar { position: sticky; bottom: 0; margin: 0; padding: 16px 0; background: #FFFDFA; border-top: 1px solid var(--color-border); }
.page-view .empty-state { border: 0; border-radius: 0; background: transparent; }
.settings-tabs { position: sticky; z-index: 3; top: 0; background: #FFFDFA; }

/* One continuous header line at every size; status details remain accessible. */
.topbar { grid-template-rows: 80px; }
.workspace-context { padding: 0 18px; }
.workspace-title { font-size: 17px; font-weight: 600; }
.top-actions { gap: 18px; }
.header-statuses, .service-statuses { display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-statuses { position: static; }
.scanner-badge, .header-status { min-height: 24px; font-size: 12px; font-weight: 500; }
.header-status .ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
.staff-pill { max-width: 188px; min-height: 44px; background: transparent; border-color: rgba(250, 244, 232, .22); font-weight: 500; }
@media (min-width: 980px) and (max-width: 1279px) {
  .workspace-context { padding: 0 12px; }
  .workspace-title { font-size: 15px; }
  .top-actions, .header-statuses, .service-statuses { gap: 10px; }
  .staff-pill { max-width: 130px; }
  .scanner-badge, .header-status { font-size: 11px; }
}
@media (max-width: 979px) {
  :root { --header-height: 64px; }
  .topbar { min-height: 64px; grid-template-rows: 64px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .brand-zone { width: 48px; min-width: 48px; height: 64px; }
  .brand-zone picture, .brand-logo { width: 40px; height: 40px; }
  .top-actions { gap: 10px; padding: 0; }
  .header-statuses, .service-statuses { display: flex; gap: 10px; }
  .scanner-badge { grid-row: auto; min-height: 24px; }
  .header-status { min-height: 24px; }
  .header-status > span, #scannerBadgeLabel { display: none; }
  .staff-pill { max-width: 130px; }
}
@media (max-width: 600px) {
  .staff-pill { width: 44px; min-width: 44px; padding: 0; }
  .staff-pill span { display: none; }
  .top-actions { gap: 6px; }
  .header-statuses, .service-statuses { gap: 6px; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  .nav-section-label { display: none; }
  .side-rail { padding: 12px 6px; }
  .nav-btn { flex-direction: column; min-height: 60px; gap: 5px; padding: 6px 2px; }
  .nav-suppliers { margin-top: 14px; }
  .category-filter { padding: 9px 12px; }
  .checkout-categories { flex-wrap: nowrap; max-height: none; }
}
@media (min-width: 980px) {
  .login-layout { display: grid; grid-template-columns: minmax(360px, 48%) minmax(0, 1fr); }
  .login-brand-panel { min-height: 100dvh; }
  .login-brand-copy { display: block; }
  .login-brand-logo-region { width: 100%; min-height: 180px; }
  .login-brand-logo { width: min(480px, 100%); }
  .login-form-panel { min-height: 100dvh; align-items: center; padding: 24px 32px; }
  .login-form-content { width: min(380px, 100%); }
}
@media (max-width: 979px) {
  .login-brand-panel { padding: 24px; min-height: 140px; }
  .login-brand-logo-region { width: min(360px, 100%); min-height: 80px; }
  .login-brand-logo { width: min(320px, 100%); }
  .ticket-preview-panel { border-left: 0 !important; padding-left: 0 !important; }
  .workspace-table { min-width: 760px; }
  #promotionList .entity-card { grid-template-columns: 1fr 1fr; }
  .checkout-categories { max-height: 126px; }
  .nav-section-label { display: block; }
}

/* Per-sale receipt choice */
.receipt-choice { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.receipt-choice span { font-weight: 650; margin-right: 4px; }
.receipt-choice button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font-weight: 650; }
.receipt-choice button.active { background: var(--color-brand); color: #FAF4E8; border-color: var(--color-brand); }
/* Age check: one row per restricted product */
.age-check-list { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.age-check-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); }
.age-check-row span { font-size: 13px; }
/* Variant families */
.family-tile { border-style: dashed; }
.family-variant-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: #fff; }
.family-variant-row small { display: block; color: var(--color-text-muted); }
/* ==========================================================================
   On-screen keyboard (Malvern Retail Systems)
   Warm shell tray, white keys, oxblood function keys, butter primary action.
   Four rows, capped at 35% of the screen height on every till size. Keys
   respond instantly with a pressed state and a preview bubble. There is one
   keyboard in one place: number fields open it on its own ?123 layer. The
   page shrinks above it and dialogs glide up.
   ========================================================================== */
:root {
  --osk-max: 35dvh;
  --osk-key: clamp(40px, calc((var(--osk-max) - 46px) / 4), 64px);
  --osk-tray: linear-gradient(180deg, #F7F0E4 0%, #EEE3D3 100%);
  --osk-fn: #EADDD7;
  --osk-fn-text: var(--color-brand);
  --osk-ease: cubic-bezier(.2, .9, .25, 1);
}
#onscreenKeyboard {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--color-text);
  background: transparent;
  pointer-events: none;
}
#onscreenKeyboard.hidden { display: none !important; }
#onscreenKeyboard.dock-bottom { left: 0; right: 0; bottom: 0; width: 100%; }
.osk-sheet {
  position: relative;
  max-height: var(--osk-max);
  pointer-events: auto;
  padding: 8px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(71, 38, 45, .16);
  border-radius: 20px 20px 0 0;
  background: var(--osk-tray);
  box-shadow: 0 -16px 40px rgba(32, 20, 24, .16), 0 1px 0 rgba(255, 255, 255, .7) inset;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.entering.dock-bottom .osk-sheet { animation: osk-rise 240ms var(--osk-ease); }
.nudge .osk-sheet { animation: osk-shake 260ms ease; }
@keyframes osk-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes osk-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Keys */
.osk-grid { max-width: 1180px; margin: 0 auto; }
.osk-text-grid { display: grid; gap: 7px; }
.osk-row { display: grid; grid-template-columns: repeat(23, minmax(0, 1fr)); column-gap: 7px; }
.osk-row > .s1 { grid-column: span 1; } .osk-row > .s2 { grid-column: span 2; } .osk-row > .s3 { grid-column: span 3; }
.osk-row > .s4 { grid-column: span 4; } .osk-row > .s5 { grid-column: span 5; } .osk-row > .s9 { grid-column: span 9; }
.osk-key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: var(--osk-key);
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--color-text);
  background: #fff;
  box-shadow: 0 1px 0 rgba(71, 38, 45, .24), 0 3px 8px rgba(32, 20, 24, .06);
  font-size: clamp(18px, calc(var(--osk-key) * .38), 23px);
  font-weight: 550;
  line-height: 1;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 70ms ease, transform 70ms ease, box-shadow 70ms ease;
}
.osk-key svg { width: 24px; height: 24px; pointer-events: none; }
.osk-key > span { pointer-events: none; }
.osk-key.fn { color: var(--osk-fn-text); background: var(--osk-fn); }
.osk-key.word { font-size: 15px; font-weight: 750; letter-spacing: .01em; }
.osk-key.hide-key { color: #FAF4E8; background: var(--color-brand); }
.osk-key.on { color: #FAF4E8; background: var(--color-brand); }
.osk-key.lock::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 18px; height: 3px; border-radius: 2px; background: var(--color-action); transform: translateX(-50%); }
.osk-key.enter { color: var(--color-text); background: var(--color-action); font-size: 16px; font-weight: 750; box-shadow: 0 1px 0 rgba(128, 90, 0, .45), 0 3px 8px rgba(32, 20, 24, .08); }
.osk-key.enter svg { width: 21px; height: 21px; }
.osk-space-label { color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.osk-key.down { color: var(--color-text); background: var(--color-action); box-shadow: none; transform: translateY(1px) scale(.97); }
.osk-key.fn.down, .osk-key.hide-key.down { color: #FAF4E8; background: var(--color-brand-hover); }
.osk-key.enter.down { background: var(--color-action-pressed); }
.osk-text .osk-key.char.down::before {
  content: attr(data-preview);
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 8px);
  left: 50%;
  display: grid;
  min-width: 56px;
  height: 60px;
  padding: 0 12px;
  place-items: center;
  border-radius: 14px;
  color: #FAF4E8;
  background: var(--color-brand);
  box-shadow: 0 12px 28px rgba(32, 20, 24, .3);
  font-size: 30px;
  font-weight: 650;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Make room: the page shrinks above a docked keyboard; dialogs move clear */
body.osk-bottom .app-shell { height: calc(100dvh - var(--osk-h, 0px)); }
body.osk-bottom .toast { bottom: calc(var(--osk-h, 0px) + 16px); }
dialog[open] { transition: bottom 220ms var(--osk-ease), right 220ms var(--osk-ease), max-height 220ms var(--osk-ease); }
body.osk-bottom dialog[open]:has(> #onscreenKeyboard) { bottom: var(--osk-h, 0px); max-height: calc(100dvh - var(--osk-h, 0px) - 16px); }
body.osk-bottom dialog[open]:has(> #onscreenKeyboard) > .dialog-card { max-height: calc(100dvh - var(--osk-h, 0px) - 16px); }
dialog .dialog-card { scroll-padding-block: 24px; }

@media (max-width: 760px) {
  .osk-key { border-radius: 9px; }
  .osk-row { column-gap: 4px; }
  .osk-key.word { font-size: 13px; }
  .osk-text .osk-key.char.down::before { min-width: 46px; height: 52px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .onscreen-keyboard .osk-sheet { animation: none !important; }
  dialog[open] { transition: none; }
  .osk-key { transition: none; }
}

/* ==========================================================================
   Fit-to-screen pages: no scrolling lists on the till
   ========================================================================== */
.view.page-view.fit-view.active { display: flex; flex-direction: column; overflow: hidden; }
.fit-view > * { flex: 0 0 auto; }
.fit-view > .fit-fill { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.fit-view > .fit-fill > .panel-heading, .fit-view > .fit-fill > .search-box, .fit-view .fit-fill > .panel > .panel-heading { flex: 0 0 auto; }
.fit-view > .two-panel-grid.fit-fill, .fit-view > .report-grid.fit-fill { display: grid; grid-auto-rows: minmax(0, 1fr); }
.fit-view .two-panel-grid > .panel, .fit-view .report-grid > .panel { display: flex; flex-direction: column; min-height: 0; }
.fit-view [data-segment].segment-off { display: none !important; }
.fit-view .subsection-heading { margin-top: 0; }
.fit-view .subsection-heading.page-heading { margin-bottom: 12px; }
#suppliersView > .subsection-heading { padding: 0; border-top: 0; }
.supplier-directory { margin-bottom: 0; }
.fit-list { flex: 1 1 auto; min-height: 0; overflow: hidden !important; overscroll-behavior: none; }
.fit-list > [hidden], .fit-list > table > tbody > tr[hidden] { display: none !important; }
.fp-turn-next { animation: fp-in-next 200ms cubic-bezier(.2, .9, .25, 1); }
.fp-turn-prev { animation: fp-in-prev 200ms cubic-bezier(.2, .9, .25, 1); }
@keyframes fp-in-next { from { opacity: .3; transform: translateX(24px); } }
@keyframes fp-in-prev { from { opacity: .3; transform: translateX(-24px); } }
.fit-pager { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 0 0; }
.fit-pager.hidden { display: none !important; }
.fp-btn { display: grid; width: 96px; height: 52px; place-items: center; border: 1px solid rgba(71, 38, 45, .2); border-radius: 14px; color: var(--color-brand); background: #fff; box-shadow: 0 1px 0 rgba(71, 38, 45, .18); touch-action: manipulation; }
.fp-btn svg { width: 26px; height: 26px; }
.fp-btn:active:not(:disabled) { color: var(--color-text); background: var(--color-action); border-color: var(--color-action); transform: translateY(1px); }
.fp-btn:disabled { opacity: .35; }
.fp-status { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.fp-dots { display: flex; gap: 6px; }
.fp-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(71, 38, 45, .2); transition: width 160ms ease, background-color 160ms ease; }
.fp-dots i.on { width: 20px; background: var(--color-brand); }
.fit-pager.compact { min-height: 0; padding: 0 0 6px; justify-content: flex-end; }
.fit-pager.compact .fp-btn { width: 52px; height: 40px; border-radius: 12px; }
.fit-pager.compact .fp-btn svg { width: 22px; height: 22px; }
.fit-pager.compact .fp-status { flex-direction: row; }
.fit-pager.compact .fp-text { display: none; }
.checkout-categories.fit-list { flex: 0 0 auto; max-height: 112px; flex-wrap: wrap; }

/* Section switcher inside a page */
.view-segments { display: inline-flex; flex: 0 0 auto; align-self: flex-start; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: #F1E9DF; }
.view-segments button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; color: var(--color-text-muted); background: transparent; font-size: 14px; font-weight: 700; white-space: nowrap; touch-action: manipulation; }
.view-segments button[aria-selected="true"] { color: #FAF4E8; background: var(--color-brand); box-shadow: 0 2px 6px rgba(71, 38, 45, .25); }
.fit-list { align-content: start; }
.product-tile { min-height: 112px; }
.checkout-categories.fit-list { max-height: 56px; padding-bottom: 4px; }
.checkout-categories.fit-list:has(+ .fit-pager:not(.hidden)) { padding-right: 128px; }
.checkout-categories.fit-list + .fit-pager.compact { align-self: flex-end; height: 48px; margin: -52px 0 4px; padding: 0; }
.report-trend-section.fit-fill { padding-bottom: 8px; border-bottom: 0; }
.report-trend-section.fit-fill > .sales-trend { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.report-trend-section.fit-fill .sales-trend svg { flex: 1 1 auto; min-height: 0; height: 100%; max-height: none; }
.report-trend-section.fit-fill .chart-data { flex: 0 0 auto; margin-top: 6px; }
.sales-trend:has(.chart-data[open]) svg { display: none; }
.chart-data[open] table { display: block; }
.chart-data[open] tbody { display: grid; grid-auto-flow: column; grid-template-rows: repeat(8, auto); column-gap: 24px; }
.chart-data[open] thead { display: none; }
.chart-data[open] tr { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #EAE3DC; }
.chart-data[open] th, .chart-data[open] td { padding: 8px 4px; border: 0; }
@media (max-height: 820px) {
  .search-hint { display: none; }
  .product-tile { min-height: 100px; padding: 12px; }
  .page-view { padding: 16px 20px; }
  .page-heading { margin-bottom: 10px; }
  .view-segments { margin-bottom: 10px; }
  .product-tools { padding-bottom: 12px; }
  .workspace-table td { padding: 12px 14px; }
}
/* Price tickets fit one screen */
.fit-view > .ticket-workspace.fit-fill { display: grid; align-items: stretch; }
.ticket-workspace.fit-fill > .panel { display: flex; flex-direction: column; min-height: 0; }
.ticket-controls #ticketExistingMode { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ticket-controls #ticketExistingMode.hidden { display: none; }
.ticket-controls .ticket-search-results { max-height: none; overflow: hidden; }
.ticket-controls .ticket-actions { margin-top: auto; padding-top: 12px; }
.ticket-controls .help { margin: 6px 0 0; }
.ticket-preview-panel .ticket-preview-frame { flex: 0 1 auto; min-height: 0; }
.ticket-preview-frame canvas { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
#ticketsView .page-heading .help { display: none; }
.phone-ticket-queue-panel.fit-fill > .phone-ticket-queue { flex: 1 1 auto; min-height: 0; }
@media (max-height: 820px) {
  .ticket-mode-switch { margin-bottom: 10px; }
  .ticket-mode-switch button { min-height: 44px; }
  .ticket-controls .panel-heading .help { display: none; }
  .ticket-fields { margin-top: 8px; }
  .ticket-controls > .help { display: none; }
}

/* ==========================================================================
   Header (Malvern Retail Systems, 2026)
   ========================================================================== */
.topbar { position: relative; background: linear-gradient(100deg, #391C23 0%, #47262D 40%, #502B34 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 28px rgba(32, 20, 24, .14); }
.topbar::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, rgba(249, 217, 107, 0) 0%, rgba(249, 217, 107, .9) 18%, rgba(249, 217, 107, .55) 62%, rgba(249, 217, 107, 0) 100%); pointer-events: none; }
.brand-zone { border-right: 1px solid rgba(250, 244, 232, .1); }
.workspace-context { display: flex; align-items: center; gap: 16px; min-width: 0; }
.workspace-title { flex: 0 1 auto; color: #FAF4E8; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.header-clock { display: inline-flex; flex: none; align-items: baseline; gap: 8px; height: 34px; padding: 0 14px; align-items: center; border-radius: 999px; color: #FAF4E8; background: rgba(250, 244, 232, .07); font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-clock-time { font-size: 15px; font-weight: 750; letter-spacing: .01em; }
.header-clock-date { color: rgba(250, 244, 232, .66); font-size: 12px; font-weight: 600; }
.header-statuses { gap: 0; height: 46px; padding: 0 4px; border: 1px solid rgba(250, 244, 232, .14); border-radius: 999px; background: rgba(0, 0, 0, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset; }
.header-statuses .scanner-badge { min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; font-size: 12px; font-weight: 650; }
.service-statuses { display: flex; gap: 0; min-width: 0; }
.header-status { min-height: 44px; padding: 0 14px; gap: 8px; border-left: 1px solid rgba(250, 244, 232, .12); color: #FAF4E8; font-size: 12px; font-weight: 650; }
.header-status .ui-icon { display: none; }
.header-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(250, 244, 232, .45); }
.header-status[data-state="connected"]::before, .header-status[data-state="synced"]::before, .header-status[data-state="online"]::before, .header-status[data-state="ready"]::before { background: #9BD1AF; box-shadow: 0 0 0 3px rgba(155, 209, 175, .18); }
.header-status[data-state="reconnecting"]::before, .header-status[data-state="syncing"]::before, .header-status[data-state="checking"]::before, .header-status[data-state="pending"]::before { background: var(--color-action); box-shadow: 0 0 0 3px rgba(249, 217, 107, .18); animation: status-pulse 1.4s ease-in-out infinite; }
.header-status[data-state="offline"]::before, .header-status[data-state="error"]::before, .header-status[data-state="failed"]::before { background: #FF8A93; box-shadow: 0 0 0 3px rgba(255, 138, 147, .2); }
.header-status[data-state="offline"], .header-status[data-state="error"], .header-status[data-state="reconnecting"], .header-status[data-state="syncing"] { color: #FAF4E8; }
@keyframes status-pulse { 50% { opacity: .45; } }
.staff-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 250px; height: 50px; min-height: 50px; padding: 0 14px 0 5px; border: 1px solid rgba(250, 244, 232, .18); border-radius: 999px; color: #FAF4E8; background: rgba(250, 244, 232, .06); font-weight: 650; transition: background-color 120ms ease; }
.staff-pill:active { background: rgba(250, 244, 232, .14); }
.staff-avatar { display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--color-brand); background: var(--color-action); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.staff-avatar:empty { display: none; }
#currentStaffLabel { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.staff-pill .ui-icon { flex: none; width: 18px; height: 18px; opacity: .8; }
@media (max-width: 1279px) { .header-clock-date { display: none; } .staff-pill { max-width: 200px; } }
@media (max-width: 1099px) { .header-clock { display: none; } .header-statuses .scanner-badge, .header-status { padding: 0 10px; } }
@media (max-width: 979px) { .staff-pill .staff-avatar { display: grid; } .staff-pill .staff-avatar:empty { display: none; } }

/* ==========================================================================
   Sign-in brand panel
   ========================================================================== */
.login-brand-panel { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: clamp(28px, 5.5vh, 60px) clamp(32px, 4vw, 64px); overflow: hidden; color: #FAF4E8; background: radial-gradient(120% 90% at 0% 0%, #6E3E49 0%, #47262D 50%, #2C151B 100%); isolation: isolate; }
.login-brand-panel::after { content: ""; position: absolute; z-index: -1; top: 8%; right: -14%; width: 72%; aspect-ratio: 1; background: url("../../assets/brand/symbol-retail.svg") no-repeat center / contain; filter: brightness(0) invert(1); opacity: .045; pointer-events: none; }
.login-brand-glow { position: absolute; z-index: -1; right: -20%; bottom: -26%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(249, 217, 107, .2) 0%, rgba(249, 217, 107, 0) 62%); pointer-events: none; }
.login-brand-logo-region { display: block; width: auto; min-height: 0; }
.login-brand-logo { width: clamp(360px, 30vw, 440px); max-width: 100%; height: auto; }
.login-brand-clock { margin-top: auto; }
.login-clock-time { color: #FAF4E8; font-size: clamp(72px, 9vw, 124px); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: .95; }
.login-clock-date { margin-top: 12px; color: rgba(250, 244, 232, .72); font-size: clamp(16px, 1.5vw, 20px); font-weight: 550; }
.login-brand-store { display: grid; gap: 14px; margin-top: clamp(24px, 4vh, 40px); }
#loginStoreName { color: var(--color-action); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.login-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.login-status li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid rgba(250, 244, 232, .16); border-radius: 999px; background: rgba(0, 0, 0, .16); color: rgba(250, 244, 232, .9); font-size: 13px; font-weight: 650; }
.login-status i { width: 8px; height: 8px; border-radius: 50%; background: rgba(250, 244, 232, .45); }
.login-status [data-state="connected"] i, .login-status [data-state="synced"] i, .login-status [data-state="online"] i { background: #9BD1AF; box-shadow: 0 0 0 3px rgba(155, 209, 175, .18); }
.login-status [data-state="reconnecting"] i, .login-status [data-state="syncing"] i, .login-status [data-state="checking"] i { background: var(--color-action); animation: status-pulse 1.4s ease-in-out infinite; }
.login-status [data-state="offline"] i, .login-status [data-state="error"] i { background: #FF8A93; }
.login-brand-foot { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 24px; color: rgba(250, 244, 232, .5); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-height: 760px) { .login-clock-time { font-size: clamp(60px, 8vw, 92px); } .login-brand-store { margin-top: 20px; } }
@media (max-width: 979px) { .login-brand-clock, .login-brand-store, .login-brand-foot, .login-brand-panel::after { display: none; } .login-brand-panel { align-items: center; justify-content: center; } }

/* ==========================================================================
   Splash
   ========================================================================== */
.startup-screen { background: radial-gradient(ellipse at 50% 40%, #5E333D 0, #47262D 55%, #2A141A 100%); }
.startup-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.startup-aurora span { position: absolute; width: 62vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); animation: startup-aurora 16s ease-in-out infinite alternate; }
.startup-aurora span:nth-child(1) { top: -28vmax; left: -18vmax; background: #7B4250; opacity: .5; }
.startup-aurora span:nth-child(2) { right: -24vmax; bottom: -30vmax; background: #F9D96B; opacity: .1; animation-delay: -6s; }
.startup-aurora span:nth-child(3) { bottom: -36vmax; left: 22%; background: #5A2B36; opacity: .55; animation-delay: -11s; }
@keyframes startup-aurora { to { transform: translate3d(7vmax, -5vmax, 0) scale(1.12); } }
.startup-halo { opacity: .7; }
.startup-logo { width: min(600px, 100%); height: auto; overflow: visible; filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .18)); }
.splash-mark { transform-box: fill-box; transform-origin: 50% 100%; animation: splash-mark 800ms cubic-bezier(.2, .9, .25, 1) both; }
.splash-dot { transform-box: fill-box; transform-origin: center; animation: splash-dot 900ms cubic-bezier(.3, 1.4, .5, 1) 380ms both; }
.splash-words { animation: splash-words 800ms cubic-bezier(.2, .9, .25, 1) 220ms both; }
@keyframes splash-mark { from { opacity: 0; transform: translateY(18px) scaleY(.86); } }
@keyframes splash-dot { 0% { opacity: 0; transform: translateY(-60px) scale(.6); } 60% { opacity: 1; transform: translateY(4px) scale(1.06); } 100% { transform: none; } }
@keyframes splash-words { from { opacity: 0; transform: translateX(-14px); } }
.startup-content { animation: none; }
.startup-content h1 { animation: startup-enter 700ms cubic-bezier(.2, .8, .2, 1) 450ms both; }
.startup-content p { min-height: 1.45em; margin: 12px 0 22px; animation: startup-enter 700ms cubic-bezier(.2, .8, .2, 1) 520ms both; }
.startup-steps { display: flex; gap: 22px; margin: 0 0 18px; padding: 0; list-style: none; color: rgba(250, 244, 232, .45); font-size: 12px; font-weight: 650; letter-spacing: .04em; animation: startup-enter 700ms cubic-bezier(.2, .8, .2, 1) 600ms both; }
.startup-steps li { display: inline-flex; align-items: center; gap: 8px; transition: color 240ms ease; }
.startup-steps li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color 240ms ease, border-color 240ms ease; }
.startup-steps li.active { color: #FAF4E8; }
.startup-steps li.active::before { border-color: var(--color-action); animation: status-pulse 1.1s ease-in-out infinite; }
.startup-steps li.done { color: rgba(250, 244, 232, .8); }
.startup-steps li.done::before { border-color: #9BD1AF; background: #9BD1AF; }
.startup-progress { width: 260px; height: 4px; }
.startup-progress span { width: 12%; animation: none; transform: none; transition: width 500ms cubic-bezier(.2, .9, .25, 1); background: linear-gradient(90deg, #F9D96B, #FFE9A3); box-shadow: 0 0 12px rgba(249, 217, 107, .5); }
.startup-screen[data-step="records"] .startup-progress span { width: 34%; }
.startup-screen[data-step="hardware"] .startup-progress span { width: 72%; }
.startup-screen[data-step="staff"] .startup-progress span { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .startup-aurora span, .splash-mark, .splash-dot, .splash-words, .startup-content h1, .startup-content p, .startup-steps, .startup-steps li::before { animation: none !important; }
  .header-status::before, .login-status i { animation: none !important; }
}

/* ==========================================================================
   Settings: one panel set per tab, laid out to fit the screen
   ========================================================================== */
.settings-group:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; gap: 8px 40px; }
.settings-group > .panel { margin: 0; padding-top: 0; }
.settings-tabs { flex-wrap: wrap; gap: 4px 22px; margin-bottom: 18px; }
.settings-tabs [role="tab"] { min-height: 48px; font-size: 14px; }
.toggle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 18px; margin: 6px 0; }
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; width: 100%; min-height: var(--control-height); padding: 4px; border-radius: 14px; background: #F1E9DF; }
.segmented label { position: relative; display: grid; place-items: center; border-radius: 11px; color: var(--color-text-muted); font-weight: 700; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { color: #FAF4E8; background: var(--color-brand); box-shadow: 0 2px 6px rgba(71, 38, 45, .25); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.printer-queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.printer-queue-row .button { min-height: var(--control-height); margin-bottom: 14px; }
.printer-connection-fields .help { margin-top: -4px; }
.till-preset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.till-preset > div { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; }
.till-preset dt { color: var(--color-brand); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.till-preset dd { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
@media (max-height: 820px) {
  .settings-tabs { margin-bottom: 12px; }
  .settings-group .field { margin-bottom: 8px; }
  .settings-group .info-banner { padding: 8px 12px; }
}
#loginStoreName:empty { display: none; }
.settings-group .compact-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.settings-group .compact-list > div span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.settings-group:not([hidden]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
#settingsGroup-pricing:not([hidden]) { display: block; }
#settingsGroup-pricing > .panel { column-count: 2; column-gap: 40px; }
#settingsGroup-pricing > .panel > * { break-inside: avoid; }
#settingsGroup-pricing > .panel > .panel-heading:first-child { column-span: all; }
#settingsGroup-pricing textarea { min-height: 96px; }
@media (max-width: 860px) { #settingsGroup-pricing > .panel { column-count: 1; } }
.settings-grid, .settings-group { max-width: none !important; width: 100%; }

/* ==========================================================================
   Management workspaces (Reports, Suppliers, Categories, Settings), 2026
   White cards on the shell canvas, one table style, explicit status, and
   numbers that carry their own context. Scoped to .mgmt-view so Checkout,
   Products, Tickets, Sales and Staff are unchanged.
   ========================================================================== */
:root {
  --mg-border: #E6DDD5;
  --mg-row: #F0E9E2;
  --mg-head: #FAF6F0;
  --mg-shadow: 0 1px 2px rgba(45, 25, 30, .04), 0 6px 18px rgba(45, 25, 30, .035);
  --mg-radius: 16px;
  --mg-pad: 20px;
}
.page-view.mgmt-view { padding: 22px 28px 20px; background: var(--color-canvas); }
.mgmt-view .page-heading { align-items: flex-end; margin-bottom: 16px; }
.mgmt-view .page-heading h1 { font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
.page-intro { margin: 5px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
.mgmt-view .page-heading > .inline-actions { gap: 10px; }
.mgmt-view .muted { color: var(--color-text-muted); }
.mgmt-view .nowrap { white-space: nowrap; }

/* Cards */
.page-view.mgmt-view .mgmt-card,
.page-view.mgmt-view .report-grid > .mgmt-card,
.page-view.mgmt-view .two-panel-grid > .mgmt-card {
  padding: 18px var(--mg-pad);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius);
  background: var(--color-surface);
  box-shadow: var(--mg-shadow);
}
.page-view.mgmt-view .list-card { padding: 18px 0 0; overflow: hidden; }
.page-view.mgmt-view .list-card > .panel-heading { padding: 0 var(--mg-pad); }
.page-view.mgmt-view .list-card > .fit-pager { padding: 8px var(--mg-pad) 12px; border-top: 1px solid var(--mg-row); }
.page-view.mgmt-view .table-card { padding: 0; }
.mgmt-view .mgmt-card > .panel-heading { align-items: flex-start; margin-bottom: 14px; }
.mgmt-view .mgmt-card h2 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.mgmt-view .mgmt-card .panel-heading .help { margin: 3px 0 0; font-size: 12px; }
.card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--color-brand); background: #F4ECE6; }
.card-icon .ui-icon { width: 19px; height: 19px; }

/* Toolbar: section switcher plus period presets on one row */
.view-toolbar { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.view-toolbar > .view-segments { margin: 0; }
.mgmt-view .view-segments button { display: inline-flex; align-items: center; gap: 8px; }
.mgmt-view .view-segments .ui-icon { width: 17px; height: 17px; }
.period-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.period-presets button { min-height: 44px; padding: 0 16px; border: 1px solid var(--mg-border); border-radius: var(--radius-pill); color: var(--color-text); background: var(--color-surface); font-size: 13px; font-weight: 600; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.period-presets button:hover { border-color: #C9B9B5; background: #FBF7F2; }
.period-presets button[aria-pressed="true"] { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-selected); box-shadow: inset 0 0 0 1px var(--color-brand); }
.mgmt-view .date-range { align-items: flex-end; gap: 8px; }
.mgmt-view .date-range label { display: grid; gap: 4px; color: var(--color-text-muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.mgmt-view .date-range input { width: 164px; min-height: 44px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.mgmt-view .date-range .button { min-height: 44px; }

/* KPI cards: value, change versus the previous equal period, note */
#reportsView #reportMetrics { gap: 14px; margin-bottom: 14px; }
#reportsView #reportMetrics .metric-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--mg-border); border-radius: var(--mg-radius); background: var(--color-surface); box-shadow: var(--mg-shadow); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#reportsView .metric-label { color: var(--color-text-muted); font-size: 13px; font-weight: 600; }
#reportsView .metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--color-brand); background: #F4ECE6; }
.metric-icon .ui-icon { width: 18px; height: 18px; }
#reportsView #reportMetrics .metric-card strong { margin: 2px 0 0; color: var(--color-text); font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.1; }
.metric-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#reportsView .metric-foot small { color: var(--color-text-muted); font-size: 12px; }
#reportsView .metric-note { color: var(--color-text-muted); font-size: 11px; }
#reportsView .delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#reportsView .delta span { display: inline; color: inherit; font-size: inherit; }
.delta .ui-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.delta-good { color: var(--color-success); background: var(--color-success-bg); }
.delta-bad { color: var(--color-danger); background: var(--color-danger-bg); }
.delta-flat { color: var(--color-text-muted); background: var(--color-surface-subtle); }
#reportsView #reportMetrics .metric-primary { border-color: var(--color-brand); color: #FAF4E8; background: radial-gradient(120% 140% at 100% 0%, #64323E 0%, #47262D 55%, #3A1D24 100%); }
#reportsView #reportMetrics .metric-primary strong { color: #FFFFFF; }
#reportsView .metric-primary .metric-label, #reportsView .metric-primary .metric-foot small, #reportsView .metric-primary .metric-note { color: rgba(250, 244, 232, .78); }
#reportsView .metric-primary .metric-icon { color: #3A1D24; background: var(--color-action); }
.metric-primary .delta-good { color: #0F3F27; background: #B9E4C8; }
.metric-primary .delta-bad { color: #5C0F18; background: #FFC9CE; }
.metric-primary .delta-flat { color: #FAF4E8; background: rgba(250, 244, 232, .14); }

/* Secondary figures */
.stat-strip { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 14px; overflow: hidden; border: 1px solid var(--mg-border); border-radius: 14px; background: var(--color-surface); }
#reportsView #reportContext.stat-strip { display: grid; padding: 0; font-size: inherit; }
.stat-strip .stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 18px; border-left: 1px solid var(--mg-row); }
.stat-strip .stat:first-child { border-left: 0; }
.stat-strip .stat span { overflow: hidden; color: var(--color-text-muted); font-size: 12px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.stat-strip .stat strong { margin: 0; overflow: hidden; color: var(--color-text); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }

/* Trend chart, drawn at the plot's pixel size */
.page-view.mgmt-view .report-trend-section { padding: 16px var(--mg-pad) 10px; border: 1px solid var(--mg-border); }
.report-trend-section > .panel-heading { margin-bottom: 6px; }
.trend-plot { position: relative; flex: 1 1 auto; min-height: 150px; }
.trend-plot > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; }
.sales-trend:has(.chart-data[open]) .trend-plot { display: none; }
.mgmt-view .chart-grid { stroke: #EEE6DE; stroke-width: 1; }
.mgmt-view .chart-baseline { stroke: #BCB0AB; stroke-width: 1; }
.mgmt-view .chart-label { fill: #786B6E; font-family: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.mgmt-view .trend-bar { fill: #9C6B78; transition: fill var(--duration-fast); }
.mgmt-view .trend-bar.trend-peak { fill: var(--color-brand); }
.mgmt-view .trend-bar:hover { fill: #B98896; }
.mgmt-view .trend-negative { fill: var(--color-danger); }
.chart-peak { fill: var(--color-brand); font-family: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-empty { fill: var(--color-text-muted); font-family: inherit; font-size: 13px; font-weight: 600; }
.mgmt-view .chart-data summary { min-height: 40px; color: var(--color-brand); font-weight: 650; }

/* Products & payments */
.page-view.mgmt-view .report-grid { gap: 14px; margin: 0; }
.mgmt-view .report-grid > .panel > .compact-list { flex: 1 1 auto; min-height: 0; }
.mgmt-view .ranked-product { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mg-row); }
.mgmt-view .ranked-product:last-child { border-bottom: 0; }
.mgmt-view .rank-number { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: var(--color-brand); background: #F4ECE6; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mgmt-view .ranked-product:first-child .rank-number { color: #3A1D24; background: var(--color-action); }
.ranked-main { min-width: 0; }
.ranked-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mgmt-view .ranked-top strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ranked-value { flex: none; color: var(--color-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mgmt-view .ranked-qty { min-width: 54px; color: var(--color-text); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.mgmt-view .ranked-product meter { height: 6px; margin-top: 7px; }
.mgmt-view .ranked-product meter::-webkit-meter-optimum-value { background: #9C6B78; }
.payment-mix-track { height: 14px; margin: 4px 0 16px; overflow: hidden; border-radius: 7px; }
.mgmt-view .payment-mix { display: block; width: 100%; height: 100%; margin: 0; }
.mgmt-view .mix-track { fill: #D9C2B0; }
.mgmt-view .mix-cash { fill: var(--color-brand); }
.payment-legend { display: grid; gap: 0; }
.legend-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mg-row); }
.legend-item strong { display: block; font-size: 14px; }
.legend-item small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; }
.legend-swatch.cash { background: var(--color-brand); }
.legend-swatch.card { background: #D9C2B0; }
.legend-value { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
#paymentBreakdown > .help { margin-top: 10px; }
.stock-row, .refund-row { display: grid; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mg-row); }
.stock-row { grid-template-columns: minmax(0, 1fr) auto; }
.refund-row { grid-template-columns: minmax(0, 1fr) auto 84px; }
.stock-row:last-child, .refund-row:last-child { border-bottom: 0; }
.stock-row strong, .refund-row strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stock-row small, .refund-row small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }
.refund-amount { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }

/* End of day */
.eod-layout { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.4fr); align-items: stretch; gap: 14px; }
.eod-layout:has(> .z-panel.hidden) { grid-template-columns: minmax(0, 1fr); }
.eod-layout > .panel { display: flex; flex-direction: column; min-height: 0; }
.page-view.mgmt-view .z-panel { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 16px; margin: 0; overflow: auto; border-top: 4px solid var(--color-action); }
.z-copy h2 { margin-top: 2px; }
.z-steps { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: zstep; }
.z-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; counter-increment: zstep; }
.z-steps li::before { display: grid; grid-row: span 2; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #3A1D24; background: #FBEFC4; content: counter(zstep); font-size: 13px; font-weight: 750; }
.z-steps strong { font-size: 14px; }
.z-steps span { color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.mgmt-view .z-actions { display: grid; align-items: stretch; gap: 8px; padding-top: 16px; border-top: 1px solid var(--mg-row); }
.mgmt-view .z-actions label { color: var(--color-text); font-size: 13px; font-weight: 600; }
.money-input { display: flex; align-items: center; min-height: var(--control-height); padding-left: 14px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); }
.money-input:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(71, 38, 45, .14); }
.money-input > span { color: var(--color-text-muted); font-weight: 650; }
.money-input input { min-width: 0; border: 0; border-radius: 0; background: transparent; font-variant-numeric: tabular-nums; }
.money-input input:focus-visible { outline-color: transparent; box-shadow: none; }
.mgmt-view .z-actions .money-input { min-height: 60px; }
.mgmt-view .z-actions .money-input > span { font-size: 22px; }
.mgmt-view .z-actions input { display: block; width: 100%; min-height: 58px; margin: 0; padding-left: 8px; font-size: 26px; font-weight: 650; }
.mgmt-view #closeDayBtn { min-height: var(--control-height-large); font-size: 16px; }
.z-history > .compact-list { flex: 1 1 auto; min-height: 0; }

/* One table style */
.mgmt-view .workspace-table th { padding: 11px 16px; border-bottom: 1px solid var(--mg-border); color: #74686B; background: var(--mg-head); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.mgmt-view .workspace-table td { padding: 12px 16px; border-bottom: 1px solid var(--mg-row); }
.mgmt-view .workspace-table tbody tr:last-child td { border-bottom: 0; }
.mgmt-view .workspace-table td small { margin-top: 3px; font-size: 12px; line-height: 1.4; }
.mgmt-view .workspace-table th.numeric { text-align: right; }
.mgmt-view .list-card .workspace-table th:first-child, .mgmt-view .list-card .workspace-table td:first-child { padding-left: var(--mg-pad); }
.mgmt-view .list-card .workspace-table th:last-child, .mgmt-view .list-card .workspace-table td:last-child { padding-right: var(--mg-pad); }
.mgmt-view .workspace-table tr.inactive td { color: var(--color-text-muted); }
.mgmt-view .row-end { text-align: right; }
.mgmt-view .compact-list { align-content: start; }
.mgmt-view .audit-list { max-height: none; }
.audit-details { max-width: 460px; color: var(--color-text-muted); }
.action-chip { display: inline-flex; padding: 3px 9px; border-radius: 8px; color: var(--color-text); background: var(--color-surface-subtle); font-size: 12px; font-weight: 600; white-space: nowrap; }
.avatar { display: inline-grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--color-brand); background: #F1E5E7; font-size: 13px; font-weight: 750; letter-spacing: .02em; }
.avatar.small { width: 28px; height: 28px; font-size: 11px; }
.person-cell, .entity-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entity-cell { gap: 12px; }
.entity-cell strong { font-size: 14px; }
.contact-cell span, .mgmt-view .contact-cell small { display: flex; align-items: center; gap: 7px; }
.contact-cell .ui-icon { flex: none; width: 14px; height: 14px; color: var(--color-text-muted); }
.status-chip.dot { gap: 6px; }
.status-chip.dot::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.status-chip.info { color: var(--color-info); background: var(--color-info-bg); }
.mgmt-view .empty-state { display: grid; gap: 4px; place-content: center; padding: 28px 18px; border: 1px dashed #E0D5CD; border-radius: 12px; color: var(--color-text-muted); background: #FDFBF8; font-size: 13px; text-align: center; }
.mgmt-view .empty-state strong { color: var(--color-text); font-size: 14px; }
.mgmt-view .list-card .empty-state { margin: 0 var(--mg-pad) var(--mg-pad); }

/* Suppliers */
.supplier-segment { gap: 14px; }
.supplier-segment > #supplierSummary { margin: 0; }
.page-view.mgmt-view .table-card { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.mgmt-view .table-card > .supplier-directory { flex: 1 1 auto; min-height: 0; margin: 0; border-bottom: 0; }
.mgmt-view .table-card > .supplier-directory > .empty-state { margin: var(--mg-pad); }
.supplier-table td:nth-child(2) { min-width: 200px; }
#suppliersView > .mgmt-card.subsection-heading { padding: 18px var(--mg-pad); }
#suppliersView > .mgmt-card.list-card { padding: 18px 0 0; }
.compare-search { flex: 0 0 auto; }
.compare-search input { min-height: 56px; font-size: 16px; }
.compare-search .search-icon { color: var(--color-brand); }
.mgmt-view .price-compare-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; margin-top: 14px; }
.mgmt-view .price-compare-results > :not(.candidate-card) { grid-column: 1 / -1; }
.mgmt-view .candidate-card { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 64px; margin: 0; padding: 12px 14px; border-radius: 12px; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.mgmt-view .candidate-card:hover { border-color: var(--color-brand); background: #FFFCF8; }
.mgmt-view .candidate-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgmt-view .candidate-card .product-meta { margin-top: 3px; }
.candidate-price { color: var(--color-brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.candidate-card .ui-icon { width: 18px; height: 18px; color: var(--color-text-muted); }
.compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--mg-head); }
.compare-product strong { display: block; font-size: 17px; }
.compare-product small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }
.compare-product b { color: var(--color-text); }
.mgmt-view .price-choice-bar { flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; background: transparent; }
.price-choice-bar > span { margin-right: 4px; color: var(--color-text-muted); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.price-compare-table tr.best-cost td { background: #F2F8F4; }
.price-compare-table tr.best-cost td:first-child { box-shadow: inset 3px 0 var(--color-success); }
.price-compare-table tr.expired td { color: var(--color-text-muted); }
.offer-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mgmt-view #supplierImportSummary { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mgmt-view #supplierImportSummary .metric-card { padding: 10px 12px; border-color: var(--mg-border); border-radius: 12px; }
.mgmt-view #supplierImportSummary .metric-card strong { margin-top: 2px; font-size: 20px; }

/* Categories and age rules */
.page-view.mgmt-view .two-panel-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.mgmt-view .category-tree { gap: 10px; align-content: start; }
.mgmt-view .category-group { padding: 14px; border: 1px solid var(--mg-border); border-radius: 14px; background: #FFFDFA; }
.mgmt-view .category-group.inactive { background: #FAF7F3; border-style: dashed; }
.mgmt-view .category-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 0; padding: 0; border: 0; }
.mgmt-view .category-row.inactive { opacity: 1; }
.category-swatch { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--color-brand); background: #F2E4E7; font-size: 18px; font-weight: 750; }
.category-group.inactive .category-swatch { color: var(--color-text-muted); background: var(--color-surface-subtle); }
.category-main { min-width: 0; }
.category-main > strong { display: block; overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.category-group.inactive .category-main > strong { color: var(--color-text-muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 9px; border-radius: var(--radius-pill); color: var(--color-text); background: var(--color-surface-subtle); font-size: 12px; font-weight: 600; }
.pill .ui-icon { width: 13px; height: 13px; }
.pill-id { color: var(--color-warning); background: var(--color-warning-bg); }
.pill-muted { border: 1px dashed #D7CBC4; color: var(--color-text-muted); background: transparent; }
.subcategory-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 56px; }
.subcategory-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--mg-border); border-radius: var(--radius-pill); color: var(--color-text); background: var(--color-surface); font-size: 13px; font-weight: 600; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.subcategory-chip:hover { border-color: var(--color-brand); background: var(--color-selected); }
.subcategory-chip.inactive { border-style: dashed; color: var(--color-text-muted); }
.chip-count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 11px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.subcategory-chip .ui-icon { width: 14px; height: 14px; color: var(--color-text-muted); }
.mgmt-view .card-stack { gap: 10px; align-content: start; }
.mgmt-view .age-rule-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px; border: 1px solid var(--mg-border); border-radius: 14px; background: #FFFDFA; }
.mgmt-view .age-rule-card.inactive { border-style: dashed; background: #FAF7F3; }
.age-badge { display: grid; align-content: center; width: 64px; height: 64px; place-items: center; border-radius: 14px; color: #FAF4E8; background: var(--color-brand); text-align: center; }
.age-badge b { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.age-badge small { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .07em; opacity: .82; text-transform: uppercase; }
.age-badge.fixed { color: var(--color-brand); background: #F2E4E7; }
.age-badge.fixed b { font-size: 18px; }
.age-rule-card.inactive .age-badge { color: var(--color-text-muted); background: var(--color-surface-subtle); }
.age-rule-body { min-width: 0; }
.age-rule-body .entity-card-top { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.age-rule-body .entity-card-top strong { font-size: 15px; }
.mgmt-view .age-rule-card p { margin: 5px 0 0; color: var(--color-text); font-size: 13px; line-height: 1.45; }
.mgmt-view .age-rule-card p.age-rule-meta { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 12px; }
.age-rule-meta .ui-icon { flex: none; width: 14px; height: 14px; }

/* Settings: section list on the left, cards on the right */
#settingsView.view.active { display: flex; flex-direction: column; overflow: hidden; }
#settingsView > .page-heading { flex: 0 0 auto; }
.settings-layout { display: grid; flex: 1 1 auto; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; min-height: 0; }
#settingsView .settings-tabs { position: static; display: flex; flex-direction: column; flex-wrap: nowrap; align-self: start; gap: 4px; max-height: 100%; margin: 0; padding: 8px; overflow: auto; border: 1px solid var(--mg-border); border-radius: var(--mg-radius); background: var(--color-surface); box-shadow: var(--mg-shadow); }
#settingsView .settings-tabs [role="tab"] { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 12px; color: var(--color-text); background: transparent; font-size: 14px; font-weight: 600; text-align: left; transition: background-color var(--duration-fast); }
#settingsView .settings-tabs [role="tab"]:hover { background: #F8F2EB; }
#settingsView .settings-tabs [role="tab"] > .ui-icon { flex: none; width: 20px; height: 20px; color: var(--color-text-muted); }
#settingsView .settings-tabs [aria-selected="true"] { color: var(--color-brand); background: var(--color-selected); }
#settingsView .settings-tabs [aria-selected="true"]::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-brand); content: ""; }
#settingsView .settings-tabs [aria-selected="true"] > .ui-icon { color: var(--color-brand); }
.settings-tab-text { display: flex; flex-direction: column; min-width: 0; }
.settings-tab-label { font-weight: 650; line-height: 1.3; }
.settings-tab-hint { overflow: hidden; color: var(--color-text-muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#settingsView .settings-grid { min-height: 0; padding: 0 6px 18px 0; overflow: auto; overscroll-behavior: contain; }
#settingsView .settings-group:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
#settingsView #settingsGroup-hardware:not([hidden]), #settingsView #settingsGroup-mobile:not([hidden]), #settingsView #settingsGroup-phone:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
#settingsView .settings-group > .panel { margin: 0; padding: 18px var(--mg-pad); column-count: auto; border: 1px solid var(--mg-border); border-radius: var(--mg-radius); background: var(--color-surface); box-shadow: var(--mg-shadow); }
#settingsView .settings-group > .legacy-phone-scanner-panel { border-style: dashed; }
#settingsView .settings-group .panel-heading { align-items: flex-start; margin-bottom: 14px; }
#settingsView .settings-group .panel-heading h2 { font-size: 17px; font-weight: 650; }
#settingsView .settings-group .panel-heading .help { margin: 3px 0 0; }
#settingsView .settings-group .field > span { font-size: 13px; }
#settingsView .settings-group .field small { display: block; margin-top: 2px; font-weight: 500; }
#settingsView .info-banner { border-radius: 12px; }
#settingsView .path-box { padding: 12px 14px; border-radius: 12px; font-size: 12px; line-height: 1.7; white-space: pre-line; }
.toggle-list { display: grid; gap: 0; margin: 2px 0 6px; }
.pricing-rule-head { display: grid; grid-template-columns: minmax(150px, 1fr) 100px 1.2fr; gap: 8px; padding: 0 0 6px; border-bottom: 1px solid var(--mg-border); color: #74686B; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
#settingsView .pricing-rule-list { gap: 0; margin-bottom: 14px; }
#settingsView .pricing-rule-row { padding: 6px 0; border-bottom: 1px solid var(--mg-row); }
#settingsView .pricing-rule-row input { min-height: 44px; }
#settingsView .receipt-preview-panel { background: #F7F1E9; }
.receipt-paper { display: flex; flex-direction: column; gap: 3px; width: min(300px, 100%); margin: 4px auto 6px; padding: 22px 20px 30px; border: 1px solid #E6DED6; color: #2B2528; background: #FFFFFF; box-shadow: 0 12px 28px rgba(45, 25, 30, .09); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; text-align: center; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.receipt-paper > strong { overflow-wrap: anywhere; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.receipt-paper > span { min-height: 1.4em; overflow-wrap: anywhere; color: #5A5054; }
.receipt-rule { margin: 8px 0; border-top: 1px dashed #B8ADA8; }
.receipt-line { display: flex; justify-content: space-between; gap: 12px; }
.receipt-total { font-weight: 700; }
.receipt-paper > em { overflow-wrap: anywhere; color: #5A5054; font-style: normal; }
#settingsView .settings-group > .danger-zone { border-color: #EBC5CA; background: #FFFBFB; }
#settingsView .danger-zone h2 { color: var(--color-danger); }
#settingsView .save-bar { position: static; display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 16px; margin: 12px -28px -20px; padding: 12px 28px; border-top: 1px solid var(--mg-border); background: rgba(255, 253, 250, .97); }
.save-state { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 13px; font-weight: 600; }
.save-state::before { width: 8px; height: 8px; border-radius: 50%; background: #BDB2AE; content: ""; }
.save-state.dirty { color: var(--color-warning); }
.save-state.dirty::before { background: #E0A800; box-shadow: 0 0 0 3px rgba(224, 168, 0, .18); }

/* Short tills */
@media (max-height: 820px) {
  .page-view.mgmt-view { padding: 16px 20px 14px; }
  .mgmt-view .page-heading { margin-bottom: 12px; }
  .mgmt-view .page-heading h1 { font-size: 24px; }
  .view-toolbar { margin-bottom: 12px; }
  #reportsView #reportMetrics { gap: 10px; margin-bottom: 10px; }
  #reportsView #reportMetrics .metric-card { gap: 4px; padding: 12px 14px; }
  #reportsView .metric-note { display: none; }
  .stat-strip { margin-bottom: 10px; }
  .stat-strip .stat { padding: 8px 14px; }
  .stat-strip .stat strong { font-size: 16px; }
  .page-view.mgmt-view .mgmt-card { padding-top: 14px; padding-bottom: 14px; }
  .page-view.mgmt-view .list-card { padding-bottom: 0; }
  .z-steps { gap: 8px; margin-top: 10px; }
  #settingsView .save-bar { margin: 10px -20px -14px; padding: 10px 20px; }
  #settingsView .settings-tabs [role="tab"] { min-height: 52px; }
}

/* Compact desktop (980–1279px) */
@media (min-width: 980px) and (max-width: 1279px) {
  .page-view.mgmt-view { padding-right: 20px; padding-left: 20px; }
  .mgmt-view .date-range input { width: 148px; }
  .settings-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 14px; }
  .settings-tab-hint { display: none; }
  #settingsView .settings-tabs [role="tab"] { min-height: 52px; }
  #settingsView .settings-group:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  #settingsView .save-bar { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }
  .eod-layout { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.2fr); }
  .mgmt-view .price-compare-results { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .supplier-table td:nth-child(2) { min-width: 0; }
  .stat-strip .stat { padding-right: 12px; padding-left: 14px; }
}

/* Phone and narrow windows */
@media (max-width: 979px) {
  .page-view.mgmt-view { padding: 16px; }
  .view-toolbar { align-items: stretch; }
  .view-toolbar > .view-segments { max-width: 100%; overflow-x: auto; }
  #reportsView #reportMetrics, .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip .stat:nth-child(3) { border-left: 0; }
  .stat-strip .stat:nth-child(n + 3) { border-top: 1px solid var(--mg-row); }
  .eod-layout, .page-view.mgmt-view .two-panel-grid, .page-view.mgmt-view .report-grid { grid-template-columns: minmax(0, 1fr); }
  .mgmt-view .price-compare-results { grid-template-columns: minmax(0, 1fr); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  #settingsView .settings-tabs { flex-direction: row; max-height: none; overflow-x: auto; padding: 6px; }
  #settingsView .settings-tabs [role="tab"] { flex: none; min-height: 48px; }
  #settingsView .settings-tabs [aria-selected="true"]::before { top: auto; right: 12px; bottom: 0; left: 12px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .settings-tab-hint { display: none; }
  #settingsView .settings-group:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  #settingsView .save-bar { margin: 10px -16px -16px; padding: 10px 16px; }
  .subcategory-chips { margin-left: 0; }
}
@media (max-width: 700px) {
  .mgmt-view .date-range { width: 100%; }
  .mgmt-view .date-range input { width: 100%; }
  .mgmt-view .age-rule-card { grid-template-columns: 52px minmax(0, 1fr); }
  .mgmt-view .age-rule-card > .mini-button { grid-column: 2; justify-self: start; }
  .age-badge { width: 52px; height: 52px; }
  .refund-row { grid-template-columns: minmax(0, 1fr) auto; }
  .refund-row .status-chip { display: none; }
}
@media (max-width: 420px) {
  #reportsView #reportMetrics, .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .stat-strip .stat { border-left: 0; border-top: 1px solid var(--mg-row); }
  .stat-strip .stat:first-child { border-top: 0; }
}

/* Refinements after the first visual pass */
.fit-view > .eod-layout.fit-fill { display: grid; grid-auto-rows: minmax(0, 1fr); }
.mgmt-view .panel-heading > .status-chip, .mgmt-view .workspace-table .status-chip { flex: none; white-space: nowrap; }
#settingsView .settings-group .info-banner { margin-bottom: 14px; }
#settingsView #settingsGroup-pricing:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
#settingsGroup-pricing .toggle-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 24px; }
#settingsGroup-pricing .pricing-rule-head, #settingsView #settingsGroup-pricing .pricing-rule-row { grid-template-columns: minmax(160px, 1.2fr) 140px minmax(220px, 2fr); gap: 12px; }
.hosted-mobile-qr:has(.hosted-mobile-qr-image > img.hidden) { grid-template-columns: minmax(0, 1fr); }
.hosted-mobile-qr-image:has(> img.hidden) { display: none; }
#settingsView .hosted-mobile-qr-copy p { font-size: 13px; }
.mgmt-view .supplier-table td { overflow-wrap: break-word; }
.mgmt-view .entity-cell small { overflow-wrap: normal; }
@media (max-width: 1279px) {
  #reportsView .metric-foot small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .supplier-table th:nth-child(4), .supplier-table td:nth-child(4) { display: none; }
  .mgmt-view .age-rule-card { grid-template-columns: 56px minmax(0, 1fr); }
  .mgmt-view .age-rule-card > .mini-button { grid-column: 2; justify-self: start; }
  .age-badge { width: 56px; height: 56px; }
  .page-view.mgmt-view .two-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .period-presets button { padding: 0 13px; }
}
@media (max-height: 820px) {
  .report-trend-section > .panel-heading .help { display: none; }
  .report-trend-section > .panel-heading { margin-bottom: 0; }
  .trend-plot { min-height: 110px; }
  .mgmt-view .chart-data summary { min-height: 36px; }
}
.mgmt-view .workspace-table td { overflow-wrap: break-word; }
.mgmt-view .workspace-table td.numeric, .z-table td:first-child, .z-table td:nth-child(2) { white-space: nowrap; }
.eod-layout > .z-panel { align-self: start; max-height: 100%; }
.page-view.mgmt-view .z-panel { justify-content: flex-start; }
.mgmt-view .mgmt-card .fit-pager { min-height: 52px; padding-top: 6px; }
.mgmt-view .mgmt-card .fp-btn { width: 72px; height: 46px; border-radius: 12px; }
@media (min-width: 1280px) {
  .page-view.mgmt-view .report-grid.fit-fill { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .report-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .report-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .report-grid > :nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
  .report-grid > :nth-child(4) { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1279px) {
  .z-table th:nth-child(3), .z-table td:nth-child(3) { display: none; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  .mgmt-view .view-toolbar { flex-wrap: nowrap; }
  .mgmt-view .view-segments button { padding: 0 12px; font-size: 13px; }
  .mgmt-view .view-segments .ui-icon { display: none; }
  .period-presets { flex-wrap: nowrap; gap: 4px; }
  .period-presets button { padding: 0 11px; font-size: 13px; white-space: nowrap; }
}
@media (max-height: 820px) {
  .mgmt-view .report-grid .panel-heading .help { display: none; }
  .mgmt-view .report-grid .card-icon { width: 30px; height: 30px; border-radius: 9px; }
  .mgmt-view .report-grid .mgmt-card > .panel-heading { margin-bottom: 8px; }
  .legend-item { padding: 7px 0; }
  .payment-mix-track { margin-bottom: 8px; }
  #paymentBreakdown > .help { margin-top: 6px; }
  .mgmt-view .mgmt-card .fit-pager { min-height: 46px; padding-top: 4px; }
  .mgmt-view .mgmt-card .fp-btn { width: 64px; height: 44px; }
  .mgmt-view .mgmt-card .fp-text { display: none; }
}
.offer-flags { display: inline-flex; margin: 0 0 0 8px; vertical-align: 1px; }
.offer-flags .status-chip { min-height: 22px; padding: 2px 8px; font-size: 10px; }
@media (max-height: 820px) {
  #suppliersView .mgmt-card > .panel-heading .help { display: none; }
  #suppliersView .mgmt-card > .panel-heading { margin-bottom: 10px; }
  .compare-search input { min-height: 48px; }
  .mgmt-view .price-compare-results { margin-top: 10px; }
  .compare-head { padding: 10px 12px; }
}

/* ==========================================================================
   Price Tickets (2026): choose → price & copies → check & print
   ========================================================================== */
#ticketsView .page-heading .help { display: block; }
#ticketsView .page-heading > .inline-actions { align-items: center; }
.segment-count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; margin-left: 2px; padding: 0 6px; border-radius: 11px; color: var(--color-text-muted); background: rgba(71, 38, 45, .08); font-size: 11px; font-variant-numeric: tabular-nums; }
.segment-count.has-items { color: #3A1D24; background: var(--color-action); }
.view-segments button[aria-selected="true"] .segment-count { color: #3A1D24; background: var(--color-action); }
#ticketsView .ticket-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; padding: 0; border-top: 0; }
#ticketsView .ticket-workspace > .panel { display: flex; flex-direction: column; min-height: 0; padding: 18px var(--mg-pad); border: 1px solid var(--mg-border); border-radius: var(--mg-radius); background: var(--color-surface); box-shadow: var(--mg-shadow); }
#ticketsView .ticket-preview-panel { border-left: 1px solid var(--mg-border) !important; padding-left: var(--mg-pad) !important; }
.ticket-step { display: flex; flex-direction: column; min-height: 0; }
.ticket-controls > .ticket-step:first-child { flex: 1 1 auto; }
.ticket-price-step { flex: 0 0 auto; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mg-row); }
.ticket-preview-step { flex: 1 1 auto; }
.step-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.step-heading h2 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.step-heading .help { margin: 2px 0 0; font-size: 12px; }
.step-number { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #3A1D24; background: var(--color-action); font-size: 14px; font-weight: 800; }
#ticketsView .ticket-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 14px; background: #F1E9DF; }
#ticketsView .ticket-mode-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 11px; color: var(--color-text-muted); background: transparent; font-size: 14px; font-weight: 700; opacity: 1; }
#ticketsView .ticket-mode-switch button:hover { color: var(--color-text); background: rgba(255, 255, 255, .6); }
#ticketsView .ticket-mode-switch button.active { color: #FAF4E8; background: var(--color-brand); box-shadow: 0 2px 6px rgba(71, 38, 45, .25); }
#ticketsView .ticket-mode-switch .ui-icon { width: 18px; height: 18px; }
#ticketsView #ticketExistingMode { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
#ticketsView #ticketExistingMode.hidden { display: none; }
#ticketsView .ticket-search-form { min-height: 56px; }
#ticketsView .ticket-search-form input { font-size: 16px; }
#ticketsView .ticket-selected { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid #BFD9C8; border-left: 1px solid #BFD9C8; border-radius: 12px; background: var(--color-success-bg); }
#ticketsView .ticket-selected.hidden { display: none; }
.ticket-selected-check { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; background: var(--color-success); }
.ticket-selected-check .ui-icon { width: 20px; height: 20px; stroke-width: 2.6; }
#ticketsView .ticket-selected span:not(.ticket-selected-check) { display: block; color: var(--color-success); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#ticketsView .ticket-selected strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
#ticketsView .ticket-selected small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
#ticketsView .ticket-search-results { flex: 1 1 auto; gap: 6px; min-height: 0; max-height: none; margin-top: 10px; }
#ticketsView .ticket-product-choice { position: relative; min-height: 56px; padding: 8px 12px; border-radius: 12px; }
#ticketsView .ticket-product-choice.selected { border-color: var(--color-success); background: #F2F8F4; box-shadow: inset 3px 0 var(--color-success); }
#ticketsView .ticket-product-choice > span strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ticketsView .ticket-product-choice > strong { color: var(--color-brand); font-size: 17px; font-variant-numeric: tabular-nums; }
.ticket-fields { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(150px, 1fr); align-items: end; gap: 10px; margin: 0; }
#ticketsView .ticket-fields .field { margin-bottom: 0; }
#ticketsView .ticket-fields .field > span:first-child, .ticket-copies-field > label { display: block; margin-bottom: 6px; color: var(--color-text); font-size: 13px; font-weight: 600; }
#ticketsView .ticket-fields input[readonly] { color: var(--color-text-muted); background: var(--color-surface-subtle); font-variant-numeric: tabular-nums; }
.field > .money-input { display: flex; margin-bottom: 0; font-size: inherit; font-weight: inherit; }
#ticketsView .ticket-price-field .money-input { min-height: var(--control-height); border-color: var(--color-brand); }
#ticketsView .ticket-price-field .money-input input { min-height: 46px; font-size: 18px; font-weight: 700; }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: stretch; min-height: var(--control-height); overflow: hidden; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); }
.stepper:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(71, 38, 45, .14); }
.stepper-btn { display: grid; place-items: center; border: 0; color: var(--color-brand); background: var(--color-surface-subtle); }
.stepper-btn:hover { background: #EBE1D7; }
.stepper-btn .ui-icon { width: 18px; height: 18px; stroke-width: 2.4; }
.stepper input { min-width: 0; min-height: 46px; padding: 0 4px; border: 0; border-radius: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.stepper input:focus-visible { outline-color: transparent; box-shadow: none; }
#ticketsView .ticket-preview-frame { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 120px; padding: 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #EFE7DD 0%, #E6DCD0 100%); box-shadow: inset 0 -10px 0 #D8CBBC; }
#ticketsView .ticket-preview-frame canvas { width: auto; max-width: 100%; height: auto; max-height: 100%; aspect-ratio: 576 / 300; border-radius: 3px; box-shadow: 0 10px 24px rgba(45, 30, 32, .14); }
#ticketsView .ticket-preview-note { flex: 0 0 auto; padding: 8px 2px 0; font-size: 12px; }
#ticketsView .ticket-actions { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; }
#ticketsView .ticket-actions:has(> #printAddAnotherBtn:not(.hidden)) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
#ticketsView .ticket-actions > #saveManualProductBtn { grid-column: 1 / -1; min-height: 44px; }
#ticketsView .ticket-print-btn { min-height: 60px; color: var(--color-text); background: var(--color-action); font-size: 17px; font-weight: 750; }
#ticketsView .ticket-print-btn:hover:not(:disabled) { background: var(--color-action-hover); }
#ticketsView .ticket-print-btn:disabled { color: var(--color-text-muted); background: var(--color-surface-subtle); opacity: 1; }
#ticketsView #printAddAnotherBtn { min-height: 60px; }
.ticket-print-summary { flex: 0 0 auto; margin: 8px 0 0; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.ticket-print-summary.ready { color: var(--color-success); font-weight: 650; }
/* Phone queue */
#ticketsView .phone-ticket-queue-panel { margin: 0; }
#ticketsView .phone-ticket-queue { gap: 0; }
#ticketsView .phone-ticket-row { grid-template-columns: 28px minmax(200px, 1.4fr) 100px 90px minmax(160px, .9fr) auto; min-height: 64px; padding: 10px var(--mg-pad); border: 0; border-bottom: 1px solid var(--mg-row); border-radius: 0; background: transparent; }
#ticketsView .phone-ticket-row:hover { background: #FBF7F1; }
#ticketsView .phone-ticket-row:has(input:checked) { background: var(--color-selected); }
#ticketsView .phone-ticket-copies { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
#ticketsView .phone-ticket-queue > .empty-state { margin: 0 var(--mg-pad) var(--mg-pad); }
@media (max-height: 820px) {
  #ticketsView .page-heading .help, #ticketsView .ticket-controls .step-heading .help, #ticketsView .ticket-preview-step .step-heading .help { display: none; }
  .step-heading { margin-bottom: 8px; }
  .ticket-price-step { margin-top: 10px; padding-top: 10px; }
  #ticketsView .ticket-preview-frame { padding: 12px; }
  #ticketsView .ticket-print-btn, #ticketsView #printAddAnotherBtn { min-height: 54px; }
}
@media (max-width: 1279px) {
  .ticket-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ticket-copies-field { grid-column: 1 / -1; }
  #ticketsView .phone-ticket-row { grid-template-columns: 28px minmax(170px, 1fr) 90px 80px auto; }
}
@media (max-width: 979px) {
  #ticketsView .ticket-workspace { grid-template-columns: minmax(0, 1fr); }
}
#ticketsView .ticket-selected-check { color: #fff; }
#ticketsView .ticket-selected { grid-template-columns: 32px minmax(0, 1fr); padding: 8px 12px; }
#ticketsView .ticket-selected-check { width: 32px; height: 32px; }
#ticketsView .ticket-selected strong { font-size: 15px; }
#ticketsView .ticket-search-results:empty { display: none; }
#ticketsView .ticket-search-results:empty + .fit-pager { display: none !important; }
.ticket-fields { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
@media (max-width: 1279px) {
  .ticket-fields { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .ticket-copies-field { grid-column: auto; }
  .stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
}
@media (max-height: 820px) {
  #ticketsView .ticket-price-step .step-heading .help { display: none; }
  #ticketsView .ticket-product-choice { min-height: 48px; padding: 6px 12px; }
}
/* While a new search is showing results, the list (with its highlighted selection) replaces the selected card. */
#ticketsView #ticketExistingMode.searching .ticket-selected { display: none; }
#ticketsView .ticket-product-choice.selected > span strong::before { content: "✓ "; color: var(--color-success); }

/* ==========================================================================
   Basket (2026): lifecycle top-right, lines on one row, one tools strip,
   one total, tender at the bottom. Destructive actions sit far from Pay.
   ========================================================================== */
.basket-panel .basket-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.basket-panel .basket-title { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 2px 10px; min-width: 0; }
.basket-panel .basket-title .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.basket-panel .basket-title h1 { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; }
.basket-panel .basket-title .status-chip { justify-self: start; }
.basket-lifecycle { display: flex; flex: none; gap: 6px; }
.basket-lifecycle .button { min-height: 44px; padding: 7px 12px; font-size: 13px; }
.basket-lifecycle .button .ui-icon { width: 17px; height: 17px; }
.basket-panel .basket-columns, .basket-panel .basket-line { grid-template-columns: minmax(0, 1fr) 128px 78px 44px; gap: 8px; }
.basket-panel .basket-columns { padding: 7px 10px; }
.basket-panel .basket-columns span:nth-child(3) { text-align: right; }
.basket-panel .basket-line { min-height: 62px; padding: 8px 4px 8px 10px; }
.basket-panel .line-info { min-width: 0; }
.basket-panel .line-name { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.3; }
.basket-panel .line-name-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.basket-panel .line-name .age-tag { flex: none; margin-top: 1px; }
.basket-panel .product-meta { margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.basket-panel .qty-control { grid-template-columns: 44px minmax(28px, 1fr) 44px; gap: 2px; }
.basket-panel .qty-control button { min-width: 44px; min-height: 44px; border-radius: 12px; }
.basket-panel .qty-control strong { font-size: 16px; }
.basket-panel .line-total { font-size: 16px; }
.basket-panel .remove-line { display: grid; width: 44px; min-width: 44px; min-height: 44px; margin: 0; place-items: center; border: 1px solid transparent; border-radius: 12px; color: var(--color-danger); background: transparent; }
.basket-panel .remove-line:hover { border-color: #EBC5CA; background: var(--color-danger-bg); }
.basket-panel .basket .empty-state.basket-empty { display: grid; gap: 4px; place-items: center; margin-top: 8px; padding: 28px 16px; }
.basket-empty .ui-icon { width: 30px; height: 30px; margin-bottom: 4px; color: var(--color-brand); }
.basket-empty strong { color: var(--color-text); font-size: 15px; }
.basket-panel .basket-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.tool-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 60px; padding: 6px 4px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text); background: var(--color-surface); font-size: 12px; font-weight: 650; line-height: 1.15; text-align: center; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.tool-tile:hover { border-color: #C9B9B5; background: #FBF7F2; }
.tool-tile:active:not(:disabled) { border-color: var(--color-brand); background: var(--color-selected); }
.tool-tile .ui-icon { width: 21px; height: 21px; color: var(--color-brand); }
.tool-tile > span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-count { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 9px; color: var(--color-brand); background: var(--color-selected); font-size: 11px; font-variant-numeric: tabular-nums; }
.basket-panel .totals-card { gap: 4px; padding: 10px 14px; border-radius: 14px; }
.basket-panel .totals-card > div:not(.grand-total) { font-size: 13px; }
.basket-panel .grand-total { align-items: baseline; margin-top: 2px; padding-top: 6px; font-size: 18px; font-weight: 700; }
.basket-panel .grand-total strong { font-size: 36px; font-weight: 750; letter-spacing: -.02em; }
.basket-panel .pay-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 10px; margin-top: 10px; }
.basket-panel .pay-button { min-width: 0; min-height: 76px; padding: 10px 12px; }
.basket-panel .pay-button > span { font-size: 17px; white-space: nowrap; }
.basket-panel .pay-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-panel .pay-button.credit { grid-template-columns: auto minmax(0, 1fr); border-color: var(--color-border); color: var(--color-brand); background: var(--color-surface-subtle); }
.basket-panel .pay-button.credit:hover { border-color: var(--color-brand); background: var(--color-selected); }
.basket-panel .pay-button.credit > span { font-size: 15px; }
.basket-panel .pay-button.credit .ui-icon { width: 21px; height: 21px; }
@media (max-width: 1439px) {
  .basket-panel .basket-columns, .basket-panel .basket-line { grid-template-columns: minmax(0, 1fr) 124px 72px 44px; gap: 6px; }
  .basket-panel .pay-button small { display: none; }
  .basket-panel .pay-button { grid-template-rows: auto; min-height: 68px; }
  .basket-panel .pay-button > span { font-size: 16px; }
  .basket-panel .pay-button.credit > span { font-size: 14px; white-space: normal; }
}
@media (max-height: 820px) and (min-width: 980px) {
  .basket-panel .basket-title .eyebrow { display: none; }
  .basket-panel .basket-heading { margin-bottom: 8px; }
  .basket-panel .basket-tools { padding: 8px 0; }
  .tool-tile { min-height: 54px; }
  .basket-panel .grand-total strong { font-size: 32px; }
  .basket-panel .pay-button { min-height: 64px; }
}
@media (max-width: 700px) {
  .basket-panel .basket-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .basket-panel .basket-columns, .basket-panel .basket-line { grid-template-columns: minmax(0, 1fr) 112px 64px 44px; gap: 4px; }
  .basket-panel .pay-grid { grid-template-columns: 1fr 1fr; }
  .basket-panel .pay-button.credit { grid-column: 1 / -1; min-height: 52px; }
}
.basket-panel .basket-title { grid-template-columns: auto; }
.basket-panel .basket-title .status-chip { white-space: nowrap; }
.tool-tile { min-height: 64px; }
.tool-tile > span { white-space: normal; text-wrap: balance; }
.basket-panel .pay-button.credit small { display: none; }
.basket-panel .pay-button.credit { align-content: center; }
@media (max-height: 820px) and (min-width: 980px) { .tool-tile { min-height: 58px; } }
.basket-panel .basket-line { min-height: 58px; padding: 6px 4px 6px 10px; }
.basket-panel .line-name { line-height: 1.25; }
.basket-panel .product-meta { margin-top: 2px; line-height: 1.3; }

/* All destinations fit the till height. Flex rows shrink together rather than
   scrolling the navigation or hiding the final customer workflows. */
.side-rail { overflow: hidden; padding: 8px; scrollbar-gutter: auto; }
.main-nav { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 2px; overflow: hidden; }
.main-nav .nav-section-label { flex: 0 0 18px; height: 18px; padding: 2px 8px; font-size: 9px; line-height: 14px; }
.main-nav .nav-btn { flex: 1 1 0; flex-direction: row; justify-content: flex-start; min-height: 0; max-height: 52px; padding: 4px 8px; gap: 8px; font-size: 12px; line-height: 1.15; text-align: left; }
.main-nav .nav-btn > .ui-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.main-nav .nav-label { display: inline; min-width: 0; }
.main-nav .nav-short-label { display: none; }
.main-nav .nav-suppliers { margin-top: 0; }
.main-nav .nav-suppliers::after { top: -1px; }
@media (min-width: 980px) and (max-width: 1279px) { :root { --rail-width: 156px; } }
@media (min-width: 980px) and (max-width: 1279px) {
  #reportsView .view-toolbar { flex-wrap: wrap; gap: 6px; }
  #reportsView .period-presets { flex-wrap: wrap; margin-left: 0; }
}

/* Trading rules settings (generated from settings-schema.js) */
.extended-settings { display: grid; gap: 16px; }
.extended-settings-group { border: 1px solid var(--color-control-border); border-radius: 12px; padding: 12px 16px; display: grid; gap: 10px; }
.extended-settings-group legend { font-weight: 700; padding: 0 6px; }
.extended-settings [hidden] { display: none !important; }

/* Permission matrix (Staff) */
.permissions-panel { margin-top: 16px; }
.permission-matrix td { text-align: center; }
.permission-matrix input[type="checkbox"] { width: 22px; height: 22px; }
.ask-dialog { max-width: 420px; }
.ask-form { display: grid; gap: 12px; }

/* Age verification v2 */
.challenge-25 { margin: 8px 0; font-size: 1.05rem; }
.age-dob-entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin: 8px 0; }
.age-dob-entry .form-error { grid-column: 1 / -1; }
.product-more { margin-top: 12px; border: 1px solid var(--color-control-border); border-radius: 12px; padding: 8px 12px; }
.product-more summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* Post-P3 till usability: title and lifecycle actions keep separate space. */
.basket-panel .basket-title { flex: 0 0 auto; }
.basket-lifecycle { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.basket-lifecycle .button { flex: 0 1 auto; }
.pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .toast, body.osk-bottom .toast { top: calc(var(--header-height, 70px) + 8px); bottom: auto; left: 50%; max-width: min(600px, calc(100vw - 32px)); transform: translate(-50%, -12px); text-align: center; }
body .toast.show { transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.dialog-status { padding: 12px; background: var(--color-surface); color: var(--color-danger); }

@media (min-width: 701px) {
  .basket-panel .pay-grid { display: flex; gap: 6px; }
  .basket-panel .pay-button { flex: 1 1 0; min-width: 0; padding: 7px; gap: 4px; min-height: 64px; }
  .basket-panel .pay-button span { font-size: 13px; white-space: normal; }
  .basket-panel .pay-button .ui-icon { width: 18px; height: 18px; }
  .basket-panel .pay-button kbd, .basket-panel .pay-button small { display: none; }
  .basket-panel .pay-button.credit { display: flex; align-items: center; justify-content: center; }
}

.basket-panel .basket-lifecycle .button { padding-inline: 8px; }