:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #16202b;
  background: #f1f4f7;
  font-size: 100%;
  font-weight: 600;
  --brand: #0f5691;
  --confirm: #1668ab;
  --pale: #e7f0f8;
  --line: #d6dde5;
  --red: #b92424;
  --muted: #51606e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
  /* Nothing a finger has to hit is ever smaller than this. The shop owner
     may be seventy and the counter is busy. */
  min-height: 44px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 12px;
  font-weight: 700;
  min-height: 56px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
button:hover {
  background: #eef3f8;
}
button:active {
  transform: translateY(1px);
  background: #dde9f4;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 2px;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 1.75rem;
  letter-spacing: -1px;
}
h2 {
  font-size: 1.5rem;
  letter-spacing: -0.6px;
}
p {
  line-height: 1.5;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.6px;
  font-weight: 700;
}
.header {
  height: 88px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 40px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.625rem;
  letter-spacing: -1.2px;
  font-weight: 800;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--brand);
  color: white;
  border-radius: 11px;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 22px;
  height: 22px;
}
.connection {
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.connection svg {
  width: 16px;
}
.header-right {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}
.header-date {
  font-size: 0.8125rem;
}
.header button {
  min-height: 48px;
  padding: 10px 16px;
  background: transparent;
}
.layout {
  max-width: 1320px;
  width: 100%;
  margin: auto;
  padding: 30px 32px 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  min-height: 0;
}
@media (min-width: 601px) {
  /* ponytail: fixed-height .bill-list + unbounded .layout made the page scroll
     on any screen taller/shorter than the original design. The shell is now
     bound to the viewport and only .bill-list scrolls. */
  .app-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app-shell .page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .app-shell .layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: 100%;
  }
  .left-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .right-column {
    min-height: 0;
    overflow-y: auto;
  }
  .bill-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }
}
.card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  overflow: hidden;
}
.total-panel {
  padding: 26px 28px 20px;
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}
.total-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.total-number {
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1.15;
  margin: 12px 0 7px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.total-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #42525f;
}
.review-btn {
  min-height: 44px;
  font-size: 0.8125rem;
  background: transparent;
  padding: 6px 10px;
}
.bill-list {
  height: 222px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 24px;
}
@media (min-width: 601px) {
  .bill-list {
    height: auto;
    flex: 1;
    min-height: 0;
  }
}
.bill-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
}
.bill-empty svg {
  height: 32px;
  width: 32px;
  color: #5f7b95;
}
.bill-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  border-bottom: 1px solid #e6eaef;
}
.bill-row:last-child {
  border: 0;
}
.line-name {
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}
.line-calc {
  font-size: 0.875rem;
  color: var(--muted);
}
.line-amount {
  font-size: 1.375rem;
  letter-spacing: -0.7px;
}
.remove {
  min-height: 48px;
  padding: 8px;
  font-size: 0.75rem;
  border: 0;
  color: var(--red);
  background: transparent;
}
.remove svg {
  width: 16px;
}
.bill-tools {
  padding: 10px 24px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.bill-tools button {
  min-height: 44px;
  font-size: 0.8125rem;
  padding: 8px 12px;
}
.bill-tools span {
  font-size: 0.75rem;
  color: var(--muted);
}
.clear {
  margin-left: auto;
  color: var(--red);
}
/* Two equal halves: add the line on the left, finish the bill on the
   right. Equal weight, because they are the two things a hand does here. */
.pay-area {
  padding: 16px 24px;
  display: grid;
  /* Minus is a quarter, Paid takes the rest. */
  grid-template-columns: 1fr 3fr;
  gap: 10px;
  align-items: stretch;
}
.pay-area.pay-only,
.pay-area:has(> :only-child) {
  grid-template-columns: 1fr;
}
.minus-btn {
  font-size: 0.9375rem;
  flex-direction: column;
  gap: 2px;
}
.minus-btn.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* The one dark key on the pad: adding a line is the thing you do most.
   Scoped to the keypad so the generic .key colours cannot win on order. */
.keypad .add-key {
  background: #16202b;
  border-color: #16202b;
  color: #fff;
  font-size: 1rem;
  gap: 6px;
}
.keypad .add-key:hover {
  background: #2b333b;
}
.keypad .add-key:disabled {
  background: #fff;
  color: var(--muted);
  border-color: var(--line);
  opacity: 1;
}
.keypad .add-key svg {
  width: 18px;
  height: 18px;
}
.credit-area {
  padding: 0 24px 16px;
}
.credit-area .credit-button {
  width: 100%;
  min-height: 48px;
}
@media (min-width: 601px) {
  .pay-area {
    flex-shrink: 0;
  }
  .total-panel {
    flex-shrink: 0;
  }
}
.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.primary:hover {
  background: #0b4374;
}
.pay-area > button {
  min-height: 80px;
}
.pay {
  justify-content: space-between;
  font-size: 1.5rem;
  padding: 18px 20px;
}
.pay span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pay svg {
  width: 26px;
}
.credit-button {
  background: transparent;
  border-color: #c48a00;
  color: #8a6300;
  flex: 0 0 30%;
  font-size: 0.9375rem;
}
.credit-button:hover {
  background: #fff5d6;
}
.entry-card {
  padding: 22px;
}
.entry-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.entry-top h2 {
  font-size: 1.125rem;
  letter-spacing: -0.4px;
}
.text-button {
  background: transparent;
  border: 0;
  padding: 5px;
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--brand);
}
.entry-display {
  border: 2px solid #b4c3d2;
  background: #f7fafd;
  border-radius: 12px;
  min-height: 90px;
  padding: 10px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.entry-display small {
  font-size: 0.75rem;
  color: var(--muted);
  align-self: flex-start;
}
.entry-value {
  font-size: 2.375rem;
  font-weight: 800;
  letter-spacing: -1.5px;
}
.entry-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.entry-fields button {
  flex: 1;
  min-height: 44px;
  font-size: 0.875rem;
  padding: 8px;
}
.selected {
  background: #e2ecf6 !important;
  border-color: #7ba0c4 !important;
  color: #123f66;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.key {
  min-height: 64px;
  font-size: 1.75rem;
  border-color: #dae0e7;
  background: #f6f8fa;
  box-shadow: 0 2px 0 #e1e6ec;
}
.key.back {
  font-size: 0.8125rem;
}
.key.back svg {
  width: 23px;
}
.add {
  font-size: 1.125rem;
  width: 100%;
  background: #16202b;
  color: white;
  border-color: #16202b;
}
.add:hover {
  background: #2b333b;
}
.field {
  width: 100%;
  border: 1px solid #b1bcc8;
  border-radius: 10px;
  padding: 14px;
  min-height: 56px;
  background: white;
  margin: 8px 0;
}
.name-field {
  margin-top: 0;
}
.today-card {
  padding: 22px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.today-card p {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 4px;
}
.today-number {
  font-size: 1.75rem;
  letter-spacing: -1px;
}
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  width: 180px;
  height: 100%;
  border: 0;
  border-radius: 0;
  position: relative;
  font-size: 1rem;
  color: var(--muted);
  background: white;
}
.nav button.active {
  color: var(--brand);
  background: #eff5fa;
}
.nav button.active:before {
  content: "";
  position: absolute;
  top: 0;
  height: 3px;
  left: 24px;
  right: 24px;
  background: var(--brand);
}
.notice {
  max-width: 1256px;
  margin: 16px auto 0;
  padding: 12px 18px;
  background: #fff5d6;
  border: 1px solid #d5ad4c;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.notice.error {
  background: #fff0ee;
  border-color: #cb6b60;
}
.notice button {
  min-height: 44px;
}
.undo-banner {
  background: #e2ecf6;
  color: #0e3355;
}
.presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.preset {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  text-align: left;
  align-items: flex-start;
  padding: 18px;
  background: #f5f9fc;
}
.preset strong {
  overflow-wrap: anywhere;
  font-size: 2rem;
  letter-spacing: -1px;
}
.preset small {
  font-size: 0.8125rem;
}
.preset-add {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.preset-wrap {
  position: relative;
}
.preset-wrap > .preset {
  width: 100%;
}
.preset-minus {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-height: 48px;
  padding: 7px;
  font-size: 0.75rem;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--brand);
  color: white;
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 0.8125rem;
}
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 110px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}
.segments {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #e6ecf2;
  border-radius: 12px;
}
.segments button {
  border: 0;
  background: transparent;
  min-width: 110px;
}
.segments .active {
  background: white;
  color: var(--brand);
  box-shadow: 0 1px 3px #c6d0da;
}
.stat-hero {
  padding: 32px;
}
.stat-hero .total-number {
  margin: 14px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.stat {
  padding: 24px;
}
.stat strong {
  display: block;
  font-size: 1.75rem;
  margin: 10px 0;
}
.chart-card {
  padding: 26px;
  margin: 20px 0;
}
.chart {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 210px;
  padding-top: 25px;
  margin-top: 24px;
}
.bar-col {
  flex: 1;
  min-width: 0;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bar {
  border-radius: 5px 5px 0 0;
  background: #bcd2e6;
  border: 0;
  padding: 0;
  min-height: 6px;
  width: 100%;
  position: relative;
}
.bar.best {
  background: var(--brand);
}
.bar-label {
  font-size: 0.6875rem;
  margin-top: 10px;
  height: 17px;
  white-space: nowrap;
}
.chart-detail {
  margin-top: 18px;
  padding: 12px;
  background: var(--pale);
  border-radius: 8px;
  min-height: 44px;
}
.insight {
  padding: 20px;
  background: var(--pale);
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
  border-radius: 12px;
  line-height: 1.5;
}
.list-card {
  padding: 24px;
  margin: 20px 0;
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.list-item:last-child {
  border: 0;
}
.list-item strong {
  font-size: 1.25rem;
}
.empty-page {
  padding: 64px 24px;
  text-align: center;
}
/* Direct child only. As a descendant rule this also hit the icon inside
   the button below it, which came out 48px, brand-on-brand and shoved
   off centre by the margin. */
.empty-page > svg {
  width: 48px;
  height: 48px;
  color: var(--brand);
  margin-bottom: 20px;
}
.empty-page .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 200px;
  min-height: 52px;
  padding: 0 28px;
  margin-top: 8px;
}
.empty-page .primary svg {
  width: 20px;
  height: 20px;
  margin: 0;
  color: currentColor;
}
.empty-page p {
  margin: 12px auto;
  max-width: 450px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Named sections behind pills. Only one is on show, so the screen asks one
   question at a time instead of all of them at once. */
.pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* room for the focus ring, which the scroll container was clipping */
  padding: 8px 6px 16px;
  margin: -8px -6px 0;
}
.pills::-webkit-scrollbar {
  display: none;
}
.pill {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.9375rem;
  background: #fff;
  color: var(--muted);
  white-space: nowrap;
}
.pill svg {
  width: 18px;
  height: 18px;
}
.pill.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.settings-panes {
  display: grid;
  gap: 20px;
}
.pane {
  display: none;
}
.pane.on {
  display: block;
}
.settings-card {
  padding: 24px;
}
.settings-card h2 {
  margin-bottom: 20px;
}
.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.setting p {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 5px;
}
.setting select {
  max-width: 160px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: white;
}
.toggle {
  min-width: 76px;
  min-height: 48px;
}
.setting input[type="checkbox"] {
  width: 24px;
  height: 24px;
}
.stack {
  display: grid;
  gap: 12px;
}
.danger {
  color: var(--red);
  border-color: #ce8a83;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #18202870;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal {
  background: white;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 80px #17202840;
}
.modal h2 {
  margin-bottom: 16px;
}
.modal p {
  margin-bottom: 16px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-actions button {
  flex: 1;
  min-height: 60px;
}
.modal label {
  display: block;
  margin-top: 14px;
}
.success-check {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: var(--pale);
  border-radius: 50%;
  color: var(--brand);
  margin: 0 auto 20px;
}
.reviewing .bill-list {
  height: 400px;
}
.review-summary {
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.review-summary > svg {
  width: 40px;
  height: 40px;
  color: var(--brand);
}
.review-summary .primary {
  width: 100%;
}
.hidden {
  display: none !important;
}
.footer-note {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 20px 0;
}
.big {
  font-size: 112.5%;
}
.biggest {
  font-size: 125%;
}
.big button,
.biggest button {
  font-size: 1rem;
}
.big .total-number {
  font-size: 4.875rem;
}
.biggest .total-number {
  font-size: 5.25rem;
}
@media (max-width: 600px) {
  .biggest .bill-list {
    height: 270px;
  }
}
@media (min-width: 1450px) {
  .layout {
    padding-top: 44px;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
  }
  .key {
    min-height: 72px;
  }
  .pay,
  .add {
    min-height: 88px;
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    padding: 24px 20px 100px;
    gap: 20px;
  }
  .header {
    padding: 0 24px;
  }
  .total-number {
    font-size: 4rem;
  }
  .bill-tools {
    padding: 10px 12px;
  }
  .entry-card {
    padding: 16px;
  }
  .header-date {
    display: none;
  }
}
@media (max-width: 600px) {
  :root {
    background: white;
  }
  .header {
    height: 56px;
    padding: 0 14px;
    gap: 10px;
  }
  .brand {
    font-size: 1.3125rem;
    gap: 7px;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .brand-mark svg {
    width: 17px;
    height: 17px;
  }
  .connection {
    font-size: 0.625rem;
    margin-left: auto;
  }
  .connection svg {
    width: 13px;
  }
  .header-right {
    margin-left: auto;
    gap: 6px;
  }
  .header-date {
    display: none;
  }
  .header button {
    min-height: 44px;
    padding: 6px 8px;
    font-size: 0.75rem;
    border: 0;
  }
  .header button svg {
    width: 18px;
  }
  .layout {
    display: flex;
    flex-direction: column;
    padding: 0 0 72px;
    gap: 0;
    /* The height is set from script, measured from whatever actually sits
       above it. Subtracting a fixed 56px here assumed the header was the
       only thing there, so a demo bar or a notice pushed the page into
       scrolling by exactly that banner's height. 440px is the floor if
       script never runs. */
    min-height: 440px;
    overflow: hidden;
  }
  .left-column {
    display: contents;
  }
  .right-column {
    order: 2;
    min-height: 0;
    /* Allowed to shrink and scroll inside itself. On a short phone with a
       banner above, something has to give, and it must never be the page:
       a bill that scrolls under a busy hand is the thing we are avoiding. */
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 12px;
  }
  .bill-card {
    display: contents;
  }
  .total-panel {
    padding: 10px 16px 9px;
    order: 0;
    flex-shrink: 0;
  }
  .total-number {
    font-size: 3.75rem;
    margin: 2px 0;
    letter-spacing: -3px;
  }
  .total-top .eyebrow {
    font-size: 0.6875rem;
  }
  .review-btn {
    font-size: 0.6875rem;
    min-height: 44px;
  }
  .total-details {
    font-size: 0.6875rem;
  }
  .bill-list {
    order: 1;
    min-height: 48px;
    height: auto;
    flex: 1 1 100px;
    padding: 0 16px;
  }
  .bill-row {
    min-height: 55px;
    gap: 7px;
  }
  .line-name {
    font-size: 0.875rem;
    margin: 0;
  }
  .line-calc {
    font-size: 0.75rem;
  }
  .line-amount {
    font-size: 1.25rem;
  }
  .bill-empty {
    font-size: 0.8125rem;
    gap: 4px;
  }
  .bill-empty svg,
  .bill-empty p {
    display: none;
  }
  .remove {
    font-size: 0.6875rem;
    min-height: 48px;
  }
  .bill-tools {
    order: 3;
    padding: 4px 12px;
    flex-shrink: 0;
  }
  .bill-tools button {
    font-size: 0.6875rem;
    min-height: 44px;
    padding: 6px 8px;
  }
  .bill-tools > span {
    display: none;
  }
  .pay-area {
    order: 4;
    padding: 4px 12px 8px;
    flex-shrink: 0;
  }
  /* The phone layout flattens both columns, so every piece needs its own
     place in the order. Without this the credit row floated to the top. */
  .credit-area {
    order: 5;
    padding: 0 12px 8px;
    flex-shrink: 0;
  }
  .pay-area > button {
    min-height: 64px;
  }
  .pay {
    font-size: 1.375rem;
    padding: 12px 18px;
  }
  .add {
    font-size: 1rem;
  }
  .credit-area .credit-button {
    min-height: 44px;
    font-size: 0.875rem;
  }
  .today-card {
    display: none;
  }
  .entry-card {
    border: 0;
    border-radius: 0;
    padding: 8px 0 0;
  }
  .entry-top {
    margin-bottom: 6px;
  }
  .entry-top h2 {
    font-size: 0.8125rem;
  }
  .entry-top button {
    min-height: 44px;
    font-size: 0.6875rem;
  }
  .entry-display {
    min-height: 48px;
    margin-bottom: 6px;
    padding: 4px 12px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
  }
  .entry-display small {
    align-self: auto;
    font-size: 0.6875rem;
  }
  .entry-value {
    font-size: 1.6875rem;
    letter-spacing: -1px;
  }
  .entry-fields {
    margin-bottom: 6px;
    gap: 6px;
  }
  .entry-fields button {
    min-height: 44px;
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .keypad {
    gap: 5px;
  }
  .key {
    min-height: 48px;
    padding: 4px;
    font-size: 1.5625rem;
    border-radius: 8px;
    box-shadow: none;
  }
  .key.back {
    font-size: 0.6875rem;
    gap: 4px;
  }
  .add {
    min-height: 52px;
    margin-top: 6px;
    font-size: 1.1875rem;
    border-radius: 8px;
  }
  .nav {
    height: 64px;
  }
  .nav button {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
  }
  .nav svg {
    width: 22px;
    height: 22px;
  }
  .nav button.active:before {
    left: 12px;
    right: 12px;
  }
  .name-field {
    min-height: 42px;
    padding: 8px;
    margin: 0 0 6px;
    font-size: 0.875rem;
  }
  .notice {
    margin: 6px 10px;
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  .notice button {
    font-size: 0.75rem;
    padding: 6px;
    min-height: 44px;
  }
  .page {
    padding: 24px 16px 90px;
  }
  .page-heading {
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .page-heading h1 {
    font-size: 1.625rem;
  }
  .page-heading > button {
    font-size: 0.75rem;
    padding: 8px;
    min-height: 48px;
  }
  .segments button {
    min-width: 0;
    flex: 1;
    min-height: 52px;
    padding: 10px;
  }
  .segments {
    width: 100%;
    margin: 16px 0;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stat {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stat strong {
    margin: 0;
    font-size: 1.4375rem;
  }
  .stat-hero {
    padding: 22px;
  }
  .stat-hero .total-number {
    font-size: 3.375rem;
  }
  .chart-card {
    padding: 18px;
  }
  .chart {
    gap: 4px;
    height: 180px;
  }
  .bar-label {
    font-size: 0.5625rem;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-card {
    padding: 18px;
  }
  .modal {
    padding: 22px;
  }
  .reviewing .bill-list {
    height: auto;
    min-height: 160px;
    flex: 1;
  }
  .reviewing .right-column {
    flex: 0;
  }
  .review-summary {
    padding: 14px;
    gap: 8px;
    flex-direction: row;
    justify-content: space-between;
  }
  .review-summary > svg,
  .review-summary p {
    display: none;
  }
  .review-summary h2 {
    font-size: 1rem;
  }
  .review-summary .primary {
    width: auto;
    min-height: 48px;
    font-size: 0.8125rem;
  }
  .reviewing .bill-tools {
    padding: 8px 12px;
  }
  .presets {
    max-height: 280px;
    overflow: auto;
    gap: 8px;
  }
  .preset {
    min-height: 102px;
    padding: 12px;
  }
  .preset strong {
    font-size: 1.75rem;
  }
  .big .total-number,
  .biggest .total-number {
    font-size: 4rem;
  }
  .biggest .entry-card .key {
    min-height: 48px;
  }
  .biggest .bill-list {
    height: auto;
  }
  .header .text-button {
    font-size: 0.6875rem;
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  .header {
    height: 48px;
  }
  .layout {
    height: calc(100vh - 48px);
  }
  .total-panel {
    padding: 5px 14px;
  }
  .total-number {
    font-size: 3.25rem;
  }
  .entry-top {
    display: none;
  }
  .entry-card {
    padding-top: 5px;
  }
  .entry-fields {
    margin-bottom: 4px;
  }
  .keypad {
    gap: 4px;
  }
  .entry-display {
    min-height: 40px;
    margin-bottom: 4px;
  }
  .pay {
    min-height: 56px;
  }
  .add {
    min-height: 48px;
  }
  .bill-list {
    min-height: 46px;
  }
  .bill-tools button {
    min-height: 44px;
  }
  .nav {
    height: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
@media (max-width: 600px) {
  .right-column {
    /* Was 0 0 auto, which pinned the keypad at its natural height and
       pushed the Paid button under the tab bar whenever a banner appeared
       above. It may shrink and scroll inside itself; the page may not. */
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .entry-top {
    display: none;
  }
  .entry-card {
    padding-top: 5px;
  }
  .bill-list {
    flex: 1 1 0;
    min-height: 0;
  }
  .total-panel {
    padding: 8px 16px;
  }
  .total-number {
    font-size: 3.5rem;
  }
  .bill-tools {
    padding: 3px 12px;
  }
  .bill-tools button {
    min-height: 44px;
  }
  .notice {
    position: fixed;
    top: 58px;
    left: 4px;
    right: 4px;
    z-index: 40;
    box-shadow: 0 5px 20px #0002;
  }
  .entry-display {
    margin-bottom: 5px;
  }
  .entry-fields {
    margin-bottom: 5px;
  }
  .key.back {
    font-size: 0.625rem;
  }
  .pay {
    min-height: 60px;
  }
  .reviewing .bill-list {
    min-height: 0;
  }
  .header .connection {
    font-size: 0.5625rem;
    gap: 3px;
  }
  .header {
    gap: 6px;
  }
  .header-right {
    gap: 0;
  }
  .biggest .keypad {
    grid-template-columns: repeat(4, 1fr);
  }
  .biggest .key {
    min-height: 56px;
  }
  .biggest .entry-fields button {
    font-size: 0.875rem;
  }
  .biggest .entry-fields {
    min-height: 40px;
  }
  .biggest .key.back {
    font-size: 0.6875rem;
  }
  .biggest .bill-tools {
    overflow-x: auto;
  }
  .biggest .bill-tools button {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .biggest .entry-value {
    font-size: 1.875rem;
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  .keypad {
    grid-template-columns: repeat(4, 1fr);
  }
  .key {
    min-height: 48px;
  }
  .key:nth-child(12) {
    grid-column: 4;
    grid-row: 1;
  }
  .key:nth-child(10) {
    grid-column: 4;
    grid-row: 2;
  }
  .key:nth-child(11) {
    grid-column: 4;
    grid-row: 3;
  }
  .total-number {
    font-size: 3rem;
  }
  .total-panel {
    padding: 4px 14px;
  }
  .total-details {
    font-size: 0.625rem;
  }
  .entry-fields button {
    min-height: 44px;
  }
  .bill-tools button {
    min-height: 44px;
  }
  .biggest .total-number {
    font-size: 3.5rem;
  }
}
@media (max-width: 600px) {
  .reviewing .right-column {
    flex: 0 0 auto;
  }
  .review-summary {
    min-height: 72px;
    border: 0;
  }
  .review-summary .primary {
    font-size: 0.8125rem;
    min-width: 150px;
  }
  .review-summary h2 {
    font-size: 0.875rem;
  }
  .reviewing .bill-tools {
    padding: 4px 12px;
  }
}
@supports not (display: grid) {
  .layout {
    display: flex;
  }
  .left-column {
    flex: 1;
  }
  .right-column {
    width: 380px;
  }
  .keypad {
    display: flex;
    flex-wrap: wrap;
  }
  .key {
    width: 31%;
    margin: 1%;
  }
  .presets {
    display: flex;
    flex-wrap: wrap;
  }
  .preset-wrap,
  .preset-add {
    width: 48%;
    margin: 1%;
  }
  .bill-row {
    display: flex;
  }
  .bill-row > div {
    flex: 1;
  }
  .settings-grid,
  .stats-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .settings-card {
    width: 48%;
    margin: 1%;
  }
  .stat {
    flex: 1;
  }
  @media (max-width: 600px) {
    .right-column {
      width: 100%;
    }
    .left-column {
      display: flex;
      flex-direction: column;
      flex: 0;
    }
    .bill-card {
      display: flex;
      flex-direction: column;
    }
    .bill-list {
      height: 100px;
      flex: initial;
    }
    .layout {
      height: auto;
      padding-bottom: 80px;
    }
    .settings-card {
      width: 100%;
    }
    .pay-area {
      position: sticky;
      bottom: 64px;
      background: white;
      z-index: 10;
    }
    .key {
      width: 23%;
    }
  }
}
@media (max-width: 600px) {
  .notice {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 1;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
    min-height: 48px;
    padding: 6px 12px;
  }
  .undo-banner {
    background: #e2ecf6;
    border-color: #a8c0d9;
  }
  .undo-banner button {
    min-height: 44px;
  }
  .review-summary {
    min-height: 56px;
  }
  .reviewing .right-column {
    padding: 0 12px;
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  .layout:not(.reviewing) .bill-tools {
    display: none;
  }
  .layout:not(.reviewing) .bill-list {
    min-height: 40px;
  }
  .biggest .layout:not(.reviewing) .bill-list {
    min-height: 0;
  }
  .biggest .entry-display {
    min-height: 36px;
  }
  .biggest .entry-fields {
    min-height: 32px;
  }
  .biggest .entry-fields button {
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  .entry-top.presets-heading {
    display: flex;
    padding: 4px 0;
  }
  .presets-heading h2 {
    font-size: 1rem;
  }
  .presets-heading .text-button {
    min-height: 48px;
    font-size: 0.875rem;
  }
}
.preset-minus {
  position: static;
  width: 100%;
  margin-top: 4px;
  min-height: 48px;
  background: #fff;
  border-color: #b0c5db;
}
.preset-wrap > .preset {
  min-height: 110px;
}
.preset-wrap .badge {
  top: 8px;
  right: 8px;
}
.preset-wrap .preset > span:first-child {
  padding-right: 35px;
}
@media (min-width: 601px) and (max-height: 680px) {
  .today-card {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .today-card > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .today-card p {
    display: none;
  }
  .today-number {
    font-size: 1.125rem;
  }
}
@media (min-width: 601px) and (max-height: 560px) {
  .today-card {
    display: none;
  }
}
@media (min-width: 601px) and (max-height: 680px) {
  .total-panel {
    padding: 12px 24px 10px;
  }
  .total-number {
    font-size: 3rem;
    margin: 4px 0;
  }
  .bill-tools {
    padding: 6px 20px;
  }
  .bill-tools button {
    min-height: 44px;
  }
  .pay-area {
    padding: 10px 20px;
  }
  .pay {
    min-height: 60px;
    font-size: 1.25rem;
    padding: 10px 18px;
  }
}
@media (min-width: 601px) and (max-height: 560px) {
  .total-panel {
    padding: 8px 20px;
  }
  .total-number {
    font-size: 2.5rem;
    margin: 2px 0;
  }
}
/* A modern, thin, pill scrollbar for every internal scroller (the bill list,
   the keypad column on short screens, settings/sales pages). Native scroll
   physics and momentum are kept, since only the thumb's paint is styled, not
   the scrolling itself, this stays reliable and accessible. Appears only
   where content actually overflows, exactly like the browser default. */
.bill-list,
.right-column,
.presets,
.page {
  scrollbar-width: thin;
  scrollbar-color: #93abc4 transparent;
}
.bill-list::-webkit-scrollbar,
.right-column::-webkit-scrollbar,
.presets::-webkit-scrollbar,
.page::-webkit-scrollbar {
  width: 7px;
}
.bill-list::-webkit-scrollbar-track,
.right-column::-webkit-scrollbar-track,
.presets::-webkit-scrollbar-track,
.page::-webkit-scrollbar-track {
  background: transparent;
}
.bill-list::-webkit-scrollbar-thumb,
.right-column::-webkit-scrollbar-thumb,
.presets::-webkit-scrollbar-thumb,
.page::-webkit-scrollbar-thumb {
  background: #93abc4;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.bill-list::-webkit-scrollbar-thumb:hover,
.right-column::-webkit-scrollbar-thumb:hover,
.presets::-webkit-scrollbar-thumb:hover,
.page::-webkit-scrollbar-thumb:hover {
  background: #6d8aa8;
  background-clip: padding-box;
}
@media (max-width: 600px) {
  /* Touch scrolling already shows the system's own overlay scrollbar; a
     second painted one on a narrow phone column is just clutter. */
  .bill-list,
  .right-column,
  .presets,
  .page {
    scrollbar-width: none;
  }
  .bill-list::-webkit-scrollbar,
  .right-column::-webkit-scrollbar,
  .presets::-webkit-scrollbar,
  .page::-webkit-scrollbar {
    display: none;
  }
}
/* Standalone "Review bill" screen: replaces the two-column sale layout
   entirely while reviewing, so nothing but the item list and a floating
   total competes for attention. Back button returns to the normal sale
   screen (same "review" action that opened this one, toggled off). */
.review-screen {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.review-topbar {
  padding: 20px 24px 4px;
  flex-shrink: 0;
}
.review-topbar .text-button {
  padding-left: 4px;
}
.review-topbar .text-button span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.review-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.review-floating {
  flex-shrink: 0;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  background: white;
  display: flex;
  align-items: center;
  gap: 16px;
}
.review-overview {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-overview .eyebrow {
  color: var(--muted);
}
.review-overview .total-number {
  font-size: 2rem;
  margin: 0;
  letter-spacing: -1.5px;
}
.review-overview > span:last-child {
  font-size: 0.8125rem;
  color: var(--muted);
}
.review-floating .pay {
  flex: 0 0 auto;
  min-width: 140px;
  justify-content: center;
}
@media (min-width: 601px) {
  .app-shell .review-screen {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}
@media (max-width: 600px) {
  .review-screen {
    height: calc(100svh - 56px);
    height: calc(100vh - 56px);
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  .review-screen {
    height: calc(100svh - 48px);
    height: calc(100vh - 48px);
  }
}
.edit-line {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.edit-line:first-of-type {
  border-top: none;
}
.edit-line-nums {
  display: flex;
  gap: 10px;
}
.edit-line-nums label {
  flex: 1;
}
.zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.zoom-btn {
  min-height: 44px;
  min-width: 40px;
  padding: 0;
  border: 0;
  background: white;
  font-size: 1.25rem;
  font-weight: 800;
  border-radius: 999px;
}
.zoom-btn:hover {
  background: #dde9f4;
}
.zoom-label {
  font-weight: 800;
  color: var(--muted);
  padding: 0 6px;
  font-size: 1rem;
  user-select: none;
}
@media (max-width: 600px) {
  .header-date {
    display: none;
  }
  .zoom-btn {
    min-height: 44px;
    min-width: 36px;
  }
  .zoom {
    padding: 3px;
  }
}
.brand-accent {
  color: var(--brand);
}
.usage-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.usage-row-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 6px;
}
.usage-bar {
  height: 8px;
  background: var(--pale);
  border-radius: 99px;
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 99px;
}
.usage-bar-fill.full {
  background: var(--red);
}
.scan-view {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0e1319;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
}
.scan-view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-frame {
  position: absolute;
  inset: 18% 14%;
  border: 3px solid #ffffffcc;
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax #0006;
}
.share-qr {
  width: min(240px, 60vw);
  margin: 4px auto 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.share-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.share-total {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px !important;
}
.share-total strong {
  font-size: 1.75rem;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.share-total span {
  color: var(--muted);
  font-size: 0.875rem;
}
.share-hint {
  text-align: center;
  font-size: 0.8125rem;
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.share-actions button:last-child {
  grid-column: 1 / -1;
}
.scan-item {
  width: 100%;
  min-height: 64px;
  font-size: 1.125rem;
  margin-bottom: 14px;
}
.stock-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.stock-actions button {
  flex: 1;
  min-width: 160px;
}
.stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 14px 20px;
  min-height: 64px;
}
.stock-row:first-child {
  border-top: 0;
}
.stock-row small {
  display: block;
  font-weight: 600;
  font-size: 0.75rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.stock-price {
  font-variant-numeric: tabular-nums;
}
.stock-count {
  font-size: 0.8125rem;
  color: var(--muted);
  min-width: 84px;
  text-align: right;
}
.stock-count.low {
  color: var(--red);
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* A fixed three columns squeezed "Parle-G 100g" into one word per line on
   a narrow right-hand column. Cards now claim the width they need and the
   row count follows the space available. */
.cafe-menu .presets {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.cafe-menu .preset-wrap > .preset {
  min-height: 84px;
}
.cafe-menu .preset strong {
  font-size: 1.25rem;
}

.list-card.stock-list {
  padding: 0;
}
.header-plain {
  justify-content: center;
  border-bottom: 0;
}
.welcome {
  min-height: calc(100dvh - 88px);
  display: grid;
  place-items: center;
  padding: 24px 20px 48px;
}
.w-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px;
}
.w-title {
  font-size: 1.875rem;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.w-lede {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 22px;
}
.w-actions {
  display: grid;
  gap: 10px;
}
.w-cta {
  width: 100%;
  min-height: 60px;
  font-size: 1.0625rem;
}
.w-modes {
  display: grid;
  gap: 10px;
}
.w-mode {
  display: block;
  text-align: left;
  padding: 16px 18px;
  min-height: 0;
  border-radius: 14px;
}
.w-mode strong {
  display: block;
  font-size: 1.0625rem;
  margin-bottom: 3px;
}
.w-mode span {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}
.w-mode.picked {
  border-color: var(--brand);
  background: var(--pale);
}
.w-kinds {
  display: flex;
  gap: 8px;
  margin: 16px 0 4px;
}
.w-kinds .chip {
  flex: 1;
}
.w-note {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 10px;
  text-align: center;
}
.w-problem {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecec;
  color: #b92424;
  font-size: 0.875rem;
}
.w-back {
  margin-top: 16px;
}
.w-foot {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}
.bc-field {
  margin-top: 14px;
}
.bc-label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.bc-empty {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.bc-preview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  display: block;
}
/* The rendered code fills the width so it can be read, and scanned, straight
   off the screen without printing anything first. */
/* The bars stretch to the width they are given; the code underneath is real
   text, so it stays sharp at any size. */
/* The code is shown at its natural size and centred. It is never stretched
   to fill the card: uneven scaling merges neighbouring bars into one black
   block. If it is wider than the space, the card scrolls sideways. */
.bc-bars {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  display: flex;
  justify-content: center;
}
.bc-bars svg {
  display: block;
  flex: none;
}
.bc-code {
  display: block;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  margin-top: 6px;
  color: #16202b;
  word-break: break-all;
}
.bc-clash {
  color: var(--red);
  font-size: 0.8125rem;
  margin-top: 8px;
}
/* Four actions across only while they genuinely fit. Below that they fall
   into two rows rather than squeezing into each other. */
.bc-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.bc-actions button {
  min-width: 0;
  min-height: 46px;
  font-size: 0.8125rem;
  padding: 8px 4px;
  gap: 4px;
  white-space: nowrap;
}
.bc-actions button svg {
  width: 17px;
  height: 17px;
}
.label-sheet {
  text-align: center;
  padding: 6px;
}

.label-sheet .bc-code {
  font-size: 11px;
  margin-top: 3px;
}
.label-sheet strong {
  display: block;
  font-size: 13px;
}
.label-sheet span {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}
.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.table-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 16px;
}
.table-card strong {
  font-size: 1.125rem;
}
.table-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.table-card span {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.table-card.busy {
  border-color: var(--brand);
  background: var(--pale);
}
.table-card.state-ready {
  border-color: var(--gold, #c48a00);
  background: #fff8e6;
}
.table-card.state-ready small {
  color: #8a6300;
}
/* Back, then the name, then the state: three fixed columns, so the name
   sits in the same place on every table however long the state reads. */
.order-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.order-top h1 {
  font-size: 1.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.order-back {
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.order-back svg {
  margin: 0;
}
.order-state {
  text-align: right;
  font-size: 0.8125rem;
}
.order-lines {
  padding: 4px 0;
  margin-bottom: 14px;
}
.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
/* Name across the top, then the unit maths and the amount facing each
   other, so a long name wraps inside its own cell instead of squeezing
   the controls off the row. */
.order-what {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
}
.order-what > strong:first-child {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.order-line small {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.qty-step {
  display: flex;
  align-items: center;
  gap: 2px;
}
.qty-now {
  min-width: 1.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.order-line .step {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.order-line .step svg {
  margin: 0;
}
.order-line .step:active {
  background: #eaf0f6;
}
.order-line .step.danger {
  color: #b3261e;
  border-color: #f0d4d1;
}
.order-line .step.danger:active {
  background: #fdecea;
}
.order-line.sent {
  background: #f4f8fc;
}
.order-sum {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 1.0625rem;
}
.order-empty {
  margin-bottom: 14px;
}
.order-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.order-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 72px;
  padding: 12px 14px;
  text-align: left;
}
.order-item span {
  font-size: 0.9375rem;
}
.order-item strong {
  font-size: 1.0625rem;
}
/* One row, three equal columns, parked directly above the tab bar. Icon
   over label matches the tab bar underneath it, so the two read as one
   family rather than two unrelated control strips. */
.order-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: sticky;
  bottom: 88px;
  margin-top: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.order-actions .act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 4px;
  font-size: 0.8125rem;
  line-height: 1.15;
  text-align: center;
  border-radius: 12px;
}
.order-actions .act svg {
  margin: 0;
  width: 22px;
  height: 22px;
}
.order-actions .act.outline {
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--brand);
}
.order-actions .act.danger {
  background: #fff;
  border: 1px solid var(--line);
  color: #b3261e;
}
.order-actions .act[disabled] {
  opacity: 0.38;
  pointer-events: none;
}

.key-word {
  font-size: 0.9375rem;
  gap: 6px;
}
.key-word svg {
  width: 18px;
  height: 18px;
}
.biggest .key-word {
  font-size: 1.0625rem;
}
/* At the narrowest phones the date has already gone; tighten what is left so
   the header never runs past the edge. */
@media (max-width: 360px) {
  .header {
    padding: 0 10px;
    gap: 6px;
  }
  .brand {
    font-size: 1.125rem;
    gap: 6px;
  }
  .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }
  .brand-mark svg {
    width: 15px;
    height: 15px;
  }
  .zoom {
    padding: 2px;
  }
  .zoom-btn {
    min-height: 44px;
    min-width: 32px;
    font-size: 1.0625rem;
  }
  .zoom-label {
    padding: 0 3px;
    font-size: 0.875rem;
  }
  .header button {
    padding: 6px 6px;
  }
  .header .text-button,
  .header-right > button {
    font-size: 0.75rem;
  }
}
.kot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
}
.kot {
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 16px;
  background: #fff;
  padding: 14px 16px;
}
.kot header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.kot header strong {
  font-size: 1.1875rem;
}
.kot-time {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A cook glances at this from across the kitchen, so waiting turns the whole
   ticket a colour rather than hiding in small print. */
.kot.late {
  border-left-color: #c48a00;
  background: #fffdf5;
}
.kot.late .kot-time {
  color: #8a6300;
  font-weight: 800;
}
.kot.very-late {
  border-left-color: var(--red);
  background: #fff7f7;
}
.kot.very-late .kot-time {
  color: var(--red);
  font-weight: 800;
}
.kot-ready {
  border-left-color: #b45309;
  background: #f5faff;
}
.kot-items {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.kot-items li {
  font-size: 1.0625rem;
  line-height: 1.35;
}
.kot-items b {
  display: inline-block;
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}
.kot-cancel {
  background: #fdecec;
  border: 1px solid #f0b4b4;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 4px;
}
.kot-cancel strong {
  color: var(--red);
  font-size: 0.875rem;
}
.kot-cancel span {
  font-size: 0.9375rem;
  text-decoration: line-through;
}
.kot-seen {
  margin-top: 6px;
  min-height: 44px;
  font-size: 0.8125rem;
}
.kot-done-note {
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 12px;
}
.kot-btn {
  width: 100%;
  min-height: 54px;
}
.bc-kind {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}
.bc-kind {
  padding: 0 6px;
}

.notice {
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.notice-out {
  opacity: 0;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .notice {
    transition: none;
  }
}

.order-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: inherit;
  overflow-wrap: anywhere;
}
.order-name svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.35;
  margin: 0;
}
.order-note {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8a5a00;
  background: #fff6e0;
  border-radius: 6px;
  padding: 2px 7px;
  justify-self: start;
  margin: 2px 0;
  overflow-wrap: anywhere;
}
.note-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.note-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 44px;
}
.note-chip:active {
  background: #eaf0f6;
}
.modal-sub {
  color: var(--muted);
  margin-bottom: 14px;
}
.modal-warn {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: #8a5a00;
}
.kot-note {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #8a5a00;
  margin-top: 2px;
}
.kot-change {
  background: #fff6e0;
  border: 1px solid #f0dcae;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: grid;
  gap: 4px;
}
.kot-change strong {
  color: #8a5a00;
}

/* A disabled black slab reads as broken. Waiting for a price looks like an
   empty field, not a dead button. */
.pay-area > button:disabled {
  background: #fff;
  color: var(--muted);
  border-color: var(--line);
  opacity: 1;
}
.pay-area > button:disabled svg {
  opacity: 0.5;
}

/* The asterisk people already recognise, not an invented badge. */
.req {
  color: #b3261e;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  margin-left: 2px;
}
.field-error {
  color: #b3261e;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 6px;
}
.field[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fff7f7;
}

/* ------------------------------------------------ what sells, and what to check */
.mix-card,
.check-card {
  padding: 22px 24px;
  margin-bottom: 16px;
}
.mix-body {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.donut {
  width: 140px;
  height: 140px;
  flex: none;
}
.donut .slice {
  fill: none;
  stroke-width: 22;
}
.slice-0 {
  stroke: #0f5691;
}
.slice-1 {
  stroke: #2a90d8;
}
.slice-2 {
  stroke: #7cb6e4;
}
.slice-3 {
  stroke: #b07400;
}
.slice-4 {
  stroke: #e0a93a;
}
.slice-other {
  stroke: #c6d0da;
}
.mix-legend {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mix-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: block;
}
.dot-0 {
  background: #0f5691;
}
.dot-1 {
  background: #2a90d8;
}
.dot-2 {
  background: #7cb6e4;
}
.dot-3 {
  background: #b07400;
}
.dot-4 {
  background: #e0a93a;
}
.dot-other {
  background: #c6d0da;
}
.mix-name {
  overflow-wrap: anywhere;
}
.mix-share {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mix-legend strong {
  font-variant-numeric: tabular-nums;
}
.mix-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}
.mix-note strong {
  color: var(--ink);
}
.check-card {
  border-color: #f0dcae;
  background: #fffdf7;
}
.check-row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid #f0dcae;
  margin-top: 14px;
}
.check-row > div strong {
  font-size: 1.125rem;
}
.check-row small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 2px;
}
.check-row ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.875rem;
  color: #7a5100;
}
.check-row button {
  justify-self: start;
}

.plan-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  width: 100%;
  text-align: left;
  padding: 16px;
  margin-bottom: 10px;
  min-height: 72px;
  align-items: center;
}
.plan-option:hover {
  border-color: var(--brand);
}
.plan-option.busy {
  opacity: 0.6;
}
.plan-name {
  font-weight: 700;
  font-size: 1.0625rem;
}
.plan-desc {
  grid-column: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.plan-cost {
  grid-row: 1 / span 2;
  grid-column: 2;
  text-align: right;
  display: grid;
  gap: 2px;
}
.plan-cost strong {
  font-size: 1.25rem;
}
.plan-cost small {
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: 600;
}
.upgrade-call {
  margin-top: 12px;
  font-size: 1.25rem;
  font-weight: 700;
}
.upgrade-call a {
  color: var(--brand);
}

/* --------------------------------------------------- invoices from Saofal */
.invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.invoice-row:first-child {
  border-top: 0;
}
.invoice-row small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.invoice-amount {
  font-variant-numeric: tabular-nums;
}
.doc-sheet {
  background: #fff;
  color: #16202b;
  font-size: 0.875rem;
  line-height: 1.5;
}
.doc-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink, #16202b);
}
.doc-head h1 {
  font-size: 1.5rem;
  margin: 0;
}
.doc-no {
  color: var(--muted);
  font-weight: 700;
}
.doc-supplier {
  text-align: right;
  font-size: 0.8125rem;
  max-width: 280px;
}
.doc-supplier p {
  color: var(--muted);
  margin-top: 4px;
}
.doc-parties {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.doc-parties span {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.doc-parties p {
  color: var(--muted);
  font-size: 0.8125rem;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
}
.doc-table th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.doc-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.doc-table small {
  color: var(--muted);
}
.doc-total td {
  font-weight: 800;
  font-size: 1.0625rem;
  border-top: 2px solid var(--ink, #16202b);
}
.doc-words {
  margin-top: 12px;
  font-weight: 700;
}
.doc-warn {
  margin-top: 12px;
  color: #8a5a00;
  font-weight: 600;
}
.doc-foot {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}
@media print {
  /* Scoped to an invoice print. Unscoped, "body *" hid everything on every
     print, so receipts and label sheets both came out of the printer blank. */
  body.printing-invoice * {
    visibility: hidden;
  }
  body.printing-invoice #invoice-doc,
  body.printing-invoice #invoice-doc * {
    visibility: visible;
  }
  body.printing-invoice #invoice-doc {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 24px;
    width: 100%;
  }
}

/* ------------------------------------------------------- stickers and labels */
.lb-choices {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.lb-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.lb-choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--pale);
}
.lb-choice input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex: none;
}
.lb-choice small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 2px;
}
.lb-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 16px;
}
.lb-toggles label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.lb-toggles input {
  width: 20px;
  height: 20px;
}
.lb-items {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}
.lb-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.lb-item small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.lb-count {
  text-align: center;
}
.lb-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.lb-preview {
  margin-top: 16px;
  overflow-x: auto;
  background: #eef1f5;
  padding: 10px;
  border-radius: 12px;
}
.lb-page {
  display: grid;
  background: #fff;
  align-content: start;
  margin: 0 auto 10px;
  box-shadow: 0 1px 4px rgba(22, 32, 43, 0.15);
}
.lb-page-a4 {
  width: 210mm;
  min-height: 297mm;
}
.lb-page-roll {
  width: auto;
  min-height: 0;
  padding: 0 !important;
}
/* Grid, not flex: a flex column shrinks its children to fit and that is
   what crushed the barcode down to a smudge no scanner could read. */
.lb {
  display: grid;
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: center;
  gap: 0.6mm;
  overflow: hidden;
  text-align: center;
  padding: 1mm 1.5mm;
  box-sizing: border-box;
  color: #000;
}
.lb-name {
  font-size: 2.6mm;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
}
.lb-price {
  font-size: 3.4mm;
  font-weight: 800;
  line-height: 1;
}
.lb-art {
  display: block;
  max-width: 100%;
}
.lb-art svg {
  display: block;
  width: 100%;
  height: auto;
}
.lb-qr svg {
  width: 100%;
  height: 100%;
}
.lb-tight {
  font-size: 2mm;
  font-weight: 700;
  color: #b3261e;
}
.lb-warn {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff6e0;
  border: 1px solid #f0dcae;
  color: #7a5100;
  font-size: 0.875rem;
  font-weight: 600;
}
@media print {
  body.printing-labels > *:not(#app),
  body.printing-labels .header,
  body.printing-labels .nav,
  body.printing-labels .page-heading,
  body.printing-labels form#label-form,
  body.printing-labels .lb-bar,
  body.printing-labels .settings-card h2,
  body.printing-labels .settings-card > .muted {
    display: none !important;
  }
  body.printing-labels .lb-preview {
    background: none;
    padding: 0;
    overflow: visible;
  }
  body.printing-labels .lb-page {
    box-shadow: none;
    margin: 0;
    break-after: page;
  }
  body.printing-labels .lb-page:last-child {
    break-after: auto;
  }
  @page {
    margin: 0;
  }
}

/* ------------------------------------------------------------- demo mode */
/* Sales chrome, not selling space. It must not push the keypad off a
   phone, so it stays on one compact line. */
.demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #2b333b;
  color: #fff;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  min-height: 44px;
}
.demo-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-bar span {
  flex: 1;
  min-width: 180px;
}
.demo-bar button {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.demo-bar button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.demo-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.demo-picker {
  display: block;
}
.demo-picker p {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 4px;
}

.receipt-preview {
  position: relative;
  margin-top: 18px;
  padding: 18px 14px 14px;
  background: #eef1f5;
  border-radius: 14px;
  display: flex;
  justify-content: center;
}
.receipt-preview .receipt {
  background: #fff;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(22, 32, 43, 0.14);
  width: 100%;
  max-width: 300px;
}
.preview-tag {
  position: absolute;
  top: 6px;
  left: 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.r-words {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------- room to work on a big screen */
/* A cafe counter or a grocery desk has a monitor, not a phone. Settings and
   the stock list read as one narrow ribbon down the middle otherwise, which
   wastes the screen and makes every list longer than it needs to be. */
@media (min-width: 1000px) {
  .pane .setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
  }
  .settings-card {
    padding: 28px 32px;
  }
  .receipt-preview {
    justify-content: flex-start;
    padding-left: 32px;
  }
  .stock-row {
    padding-inline: 28px;
  }
  .lb-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .lb-bar {
    max-width: 460px;
  }
  .kot-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .proof-grid {
    gap: 24px;
  }
}
@media (min-width: 1280px) {
  /* Two real columns. CSS multi-column was wrong here: it fragments a grid
     row, which turned "Show a mode" into one word per line. */
  .settings-panes .pane {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
    align-content: start;
  }
  .settings-panes .pane > h2,
  .settings-panes .pane > .receipt-preview,
  .settings-panes .pane > .footer-note,
  .settings-panes .pane > .demo-picker {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------- screen guidance */
.guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 12px 16px;
  background: var(--pale);
  border: 1px solid #c6d8ea;
  border-radius: 14px;
}
.guide p {
  font-size: 0.875rem;
  color: #1d3d57;
  line-height: 1.45;
}
.guide-icon {
  display: grid;
  place-items: center;
  color: var(--brand);
}
.guide-icon svg {
  width: 20px;
  height: 20px;
}
.guide-ok {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  background: #fff;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .guide {
    margin: 12px 12px 0;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
  }
  .guide-ok {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.locked-field {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f4f6f9;
}
.locked-field strong {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}
.locked-field span {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ------------------------------------------------------- cafe bill review */
.cafe-bill .card {
  margin-bottom: 16px;
}
.cb-lines {
  padding: 4px 0;
}
.cb-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.cb-line:last-child {
  border-bottom: 0;
}
.cb-line small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 2px;
}
.cb-line > strong:last-child {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.cb-adjust {
  padding: 20px 18px;
}
.cb-adjust h2 {
  font-size: 1rem;
}
.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cb-total {
  padding: 16px 18px;
}
.cb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.cb-row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cb-grand {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 1.125rem;
  color: var(--ink);
  font-weight: 700;
}
.cb-grand strong {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}
.cb-qr {
  padding: 20px 18px;
  text-align: center;
}
.cb-qr h2 {
  font-size: 1.0625rem;
}
.cb-qr-art {
  width: 180px;
  margin: 16px auto;
}
.cb-qr-art svg {
  width: 100%;
  height: auto;
}
.cb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: sticky;
  bottom: 88px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.cb-actions button {
  min-height: 60px;
}
.cb-credit {
  margin-top: 10px;
}
.cb-credit button {
  width: 100%;
}
@media (min-width: 900px) {
  .cb-actions {
    position: static;
    max-width: 520px;
    margin-left: auto;
  }
}

.w-optional {
  display: flex;
  align-items: center;
  gap: 8px;
}
.w-optional span {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.w-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
}

.hw-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hw-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hw-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}
/* The marker is itself a grid item, so the text has to be told to stay in
   the second column or it wraps into the 20px dot. */
.hw-list li::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 2px;
}
.hw-list strong,
.hw-list span {
  grid-column: 2;
}
.hw-yes::before {
  background: var(--brand);
}
.hw-no::before {
  background: #b3261e;
}
.hw-list strong {
  display: block;
}
.hw-list span {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ------------------------------------------------- section and staff split */
.break-card {
  padding: 22px 24px;
  margin-bottom: 16px;
}
.break-row {
  margin-top: 16px;
}
.break-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 0.9375rem;
}
.break-top strong {
  overflow-wrap: anywhere;
}
.break-top span {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  flex: none;
}
.break-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--pale);
  margin: 7px 0 5px;
  overflow: hidden;
}
.break-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}
.break-row small {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* A super admin cannot sell, and the button should say so without turning
   into a three line paragraph on a phone. */
.pay-blocked {
  font-size: 1rem;
  justify-content: center;
}
.pay-blocked span {
  white-space: nowrap;
}

/* --------------------------------------------------- per screen help sheet */
.help-btn {
  min-width: 44px;
  padding: 10px;
  background: transparent;
}
.help-btn svg {
  margin: 0;
}
.help-what {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.help-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}
.help-list {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.help-when {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}