/* 成都味道 · Вкус Чэнду — shared foundation (tokens, base, components) */
.product-options-dialog {
  --modifier-surface: #fff; --modifier-choice: #f5f5f6; --modifier-hover: #ececee;
  --modifier-text: #25272b; --modifier-muted: #686c72; --modifier-line: #e8e9eb;
  --modifier-accent: var(--brand-600); --modifier-selected-bg: var(--brand-50);
  --modifier-xs: .25rem; --modifier-sm: .5rem; --modifier-md: .75rem;
  --modifier-lg: 1rem; --modifier-xl: 1.5rem; --modifier-inset: 1.5rem;
  --modifier-body-size: .875rem; --modifier-note-size: .75rem;
  --modifier-group-size: 1rem; --modifier-title-size: 1.25rem; --modifier-price-size: 1.375rem;
  --modifier-motion: 150ms; --modifier-radius: var(--radius);
  color: var(--modifier-text); background: var(--modifier-surface);
}
[data-theme="dark"] .product-options-dialog {
  --modifier-surface: #1b1d20; --modifier-choice: #292c30; --modifier-hover: #34373c;
  --modifier-text: #f2f3f5; --modifier-muted: #b3b7bf; --modifier-line: #3b3e44;
  --modifier-accent: #ffb0a8; --modifier-selected-bg: #402b2b;
}
.dialog.product-options-dialog { width: min(calc(100vw - 24px), 42rem); max-height: min(88dvh, 840px); margin: auto; border: 0; border-radius: var(--modifier-radius); background: var(--modifier-surface); color: var(--modifier-text); }
.product-options-dialog .dialog-head { padding: var(--modifier-md) var(--modifier-md) var(--modifier-md) var(--modifier-inset); background: var(--modifier-surface); border: 0; align-items: flex-start; }
.product-options-dialog .dialog-head h2 { align-self: center; font-size: var(--modifier-title-size); line-height: 1.4; text-wrap: initial; }
.product-options-dialog .dialog-head .close { flex: none; color: var(--modifier-muted); }
.product-options-dialog .modifier-group { display: block; min-width: 0; padding: 0; border: 0; }
.modifier-group legend { width: 100%; font-size: var(--modifier-group-size); font-weight: 600; line-height: 1.5; color: var(--modifier-text); }
.modifier-rule { display: inline-block; margin-inline-start: var(--modifier-sm); font-size: var(--modifier-note-size); font-weight: 400; color: var(--modifier-muted); }
.modifier-options { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--modifier-sm); margin-top: var(--modifier-md); }
.modifier-option { display: flex; align-items: stretch; min-width: 0; max-width: 100%; border: 1px solid transparent; border-radius: var(--modifier-radius); background: var(--modifier-choice); transition: background-color var(--modifier-motion) var(--ease), border-color var(--modifier-motion) var(--ease); }
.modifier-label { position: relative; display: flex; align-items: center; gap: var(--modifier-sm); min-height: 44px; min-width: 0; flex: 1; padding: var(--modifier-sm) var(--modifier-md); cursor: pointer; font-size: var(--modifier-body-size); line-height: 1.5; }
.modifier-label input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: inherit; }
.modifier-option-copy { display: grid; gap: var(--modifier-xs); overflow-wrap: anywhere; min-width: 0; }
.modifier-option-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--modifier-xs) var(--modifier-sm); min-width: 0; }
.modifier-option-copy strong { font-weight: 500; }
.modifier-option-copy small { color: var(--modifier-muted); font-size: var(--modifier-note-size); }
.modifier-price { padding-inline-start: var(--modifier-sm); border-inline-start: 1px solid var(--modifier-line); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--modifier-accent); white-space: nowrap; }
.modifier-selected { flex: none; width: 14px; height: 14px; color: var(--modifier-accent); visibility: hidden; }
.modifier-selected .icon { width: 14px; height: 14px; }
.modifier-option:has(.modifier-label input:checked) { background: var(--modifier-selected-bg); border-color: var(--modifier-accent); }
.modifier-option:has(.modifier-label input:checked) .modifier-option-copy strong { color: var(--modifier-accent); font-weight: 600; }
.modifier-option:has(.modifier-label input:checked) .modifier-selected { visibility: visible; }
.modifier-option:has(.modifier-label input:focus-visible) { outline: 2px solid var(--modifier-accent); outline-offset: 2px; }
.modifier-option:has(.modifier-label input:disabled) .modifier-label { cursor: not-allowed; color: var(--modifier-muted); }
.modifier-option:has(.modifier-label input:disabled):not(:has(input:checked)) .modifier-price { color: var(--modifier-muted); }
.modifier-option.is-unavailable .modifier-option-copy strong { text-decoration: line-through; }
.modifier-option.has-quantity { flex: 0 1 auto; }
.modifier-quantity { display: flex; align-self: center; flex: none; padding-inline-end: var(--modifier-sm); }
.product-options-dialog .stepper { background: var(--modifier-surface); border-color: var(--modifier-line); }
.product-options-dialog .stepper button { color: var(--modifier-text); }
.product-options-dialog .stepper button:hover:not(:disabled) { background: var(--modifier-hover); }
.product-options-dialog .stepper input { background: var(--modifier-surface); color: var(--modifier-text); border-color: var(--modifier-line); font-size: var(--modifier-body-size); }
.modifier-quantity .stepper input { width: 44px; }
@media (hover: hover) { .modifier-option:has(.modifier-label input:enabled):hover { background: var(--modifier-hover); } .modifier-option:has(.modifier-label input:checked):hover { background: var(--modifier-selected-bg); border-color: var(--brand-700); } }
.modifier-error, .modifier-invalid { color: var(--danger-600, #A51D2D); overflow-wrap: anywhere; }
.product-options-dialog .modifier-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; }
.dialog-body:has(> .modifier-sheet) { display: flex; overflow: hidden; padding: 0; }
.modifier-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--modifier-lg); min-height: 0; padding: var(--modifier-sm) var(--modifier-inset) var(--modifier-xl); display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--modifier-xl); }
.modifier-product-info { display: grid; gap: var(--modifier-md); min-width: 0; }
.modifier-sheet .detail-hero { width: 100%; margin: 0; aspect-ratio: 16 / 9; max-height: 220px; overflow: hidden; border-radius: var(--modifier-radius); }
.modifier-sheet .detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.modifier-sheet .detail-head { display: grid; gap: var(--modifier-xs); align-content: center; min-width: 0; }
.modifier-sheet .detail-head .alt { font-size: var(--modifier-body-size); color: var(--modifier-muted); overflow-wrap: anywhere; }
.modifier-sheet .detail-head .price { font-size: var(--modifier-group-size); color: var(--modifier-text); }
.modifier-sheet.has-choices .modifier-product-info { grid-template-columns: 64px minmax(0, 1fr); gap: var(--modifier-lg); }
.modifier-sheet.has-choices .detail-hero { aspect-ratio: 1; }
.modifier-sheet .detail-description { margin: 0; color: var(--modifier-muted); font-size: var(--modifier-body-size); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.modifier-sheet-foot { flex: none; padding: var(--modifier-md) var(--modifier-inset) calc(var(--modifier-lg) + env(safe-area-inset-bottom)); background: var(--modifier-surface); border-top: 1px solid var(--modifier-line); }
.modifier-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--modifier-sm); padding-block-end: var(--modifier-md); font-size: var(--modifier-body-size); line-height: 1.5; }
.modifier-summary > span:first-child { color: var(--modifier-muted); }
.modifier-summary [data-selection-summary] { max-height: 4.5em; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.modifier-sheet-foot .modifier-error { font-size: var(--modifier-body-size); margin-block-end: var(--modifier-sm); }
.modifier-sheet-foot .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--modifier-md); }
.modifier-sheet-foot .foot-total { min-width: 0; display: grid; gap: var(--modifier-xs); margin-right: auto; overflow-wrap: anywhere; }
.modifier-sheet-foot .foot-total small { font-size: var(--modifier-note-size); color: var(--modifier-muted); }
.modifier-sheet-foot .foot-total strong { font-size: var(--modifier-price-size); font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--modifier-accent); }
.modifier-sheet-foot .button { min-height: 48px; max-width: 100%; padding-inline: var(--modifier-lg); font-size: var(--modifier-body-size); }
.modifier-sheet .qty-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--modifier-md); align-items: center; }
.modifier-sheet .field { min-width: 0; }
.modifier-sheet .field > :is(span, label) { font-size: var(--modifier-body-size); color: var(--modifier-text); }
.modifier-sheet textarea { background: var(--modifier-choice); color: var(--modifier-text); border-color: transparent; font-size: var(--modifier-body-size); }
.modifier-sheet .item-remark-input { height: 44px; min-height: 44px; padding: 10px 12px; line-height: 22px; resize: none; }
.modifier-sheet .item-remark-input::placeholder { color: var(--modifier-muted); opacity: 1; }
.modifier-sheet .item-remark-input:focus,
.modifier-sheet .item-remark-input:not(:placeholder-shown) { height: 88px; min-height: 88px; }
.modifier-details { display: grid; gap: 3px; white-space: normal; overflow-wrap: anywhere; }
.modifier-editor {
  --edit-bg: #fff; --edit-soft: var(--paper-100); --edit-line: var(--line-200);
  --edit-text: var(--ink-900); --edit-muted: var(--ink-600); --edit-accent: var(--brand-600);
  --edit-danger: var(--danger-600); --edit-focus: var(--brand-600);
  display: grid; gap: 16px; min-width: 0; color: var(--edit-text); font-size: .875rem;
}
/* Only the dialog body scrolls; focusing a low field must not scroll away its header. */
.dialog:has([data-modifier-editor]) { overflow: clip; }
[data-theme="dark"] .modifier-editor { --edit-bg: #1b1d20; --edit-soft: #292c30; --edit-line: #454950; --edit-text: #f2f3f5; --edit-muted: #b3b7bf; --edit-accent: #ffb0a8; --edit-danger: #ffaaa2; --edit-focus: #ffb0a8; background: var(--edit-bg); }
.modifier-editor :is(h2, h3, h4, p) { margin: 0; }
.modifier-editor h2 { font-size: 1.125rem; }
.modifier-editor-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; }
.modifier-editor-heading > div { flex: 1 1 260px; min-width: 0; }
.modifier-editor-heading p, .modifier-editor-help { color: var(--edit-muted); font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
.modifier-editor-heading p { margin-top: 4px; }
.modifier-copy-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px; background: var(--edit-soft); border-radius: var(--radius); }
.modifier-copy-row > label { flex: 1 1 240px; }
.modifier-editor :is(input:not([type=checkbox]), select) { min-width: 0; min-height: 44px; color: var(--edit-text); background-color: var(--edit-bg); border-color: var(--edit-line); font-size: .875rem; }
.modifier-editor .modifier-edit-field { display: grid; gap: 6px; align-content: start; min-width: 0; font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.modifier-editor .modifier-edit-field > span { font-weight: 500; }
.modifier-editor :is(.button, .text-button) { min-height: 44px; font-size: .875rem; }
.modifier-editor :is(.button.secondary, .icon-button) { color: var(--edit-text); background-color: var(--edit-bg); border-color: var(--edit-line); }
.modifier-editor .text-button { color: var(--edit-accent); }
.modifier-group-list-head, .modifier-add-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.modifier-group-list-head > div { display: flex; flex-wrap: wrap; gap: 12px; }
.modifier-group-list-head > span, .modifier-add-row > span { color: var(--edit-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.modifier-editor-group { border-top: 1px solid var(--edit-line); min-width: 0; }
.modifier-editor-group:last-child { border-bottom: 1px solid var(--edit-line); }
.modifier-group-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-block: 8px; }
.modifier-group-heading h3 { min-width: 0; }
.modifier-group-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-radius: var(--radius); background: transparent; color: var(--edit-text); text-align: left; font-size: 1rem; }
.modifier-group-index { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: var(--edit-soft); border-radius: 6px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.modifier-group-copy { display: grid; gap: 4px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.modifier-group-copy > span { font-weight: 600; }
.modifier-group-copy small { font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--edit-muted); }
.modifier-group-toggle > .icon { flex: none; transition: transform 150ms var(--ease); }
.modifier-group-toggle[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.modifier-row-actions { display: flex; flex: none; gap: 4px; }
.modifier-editor .icon-button { width: 44px; height: 44px; }
.modifier-group-body { display: grid; gap: 16px; padding-block: 8px 20px; }
.modifier-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.modifier-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modifier-group-enabled { grid-column: 1 / -1; }
.modifier-options-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.modifier-options-heading h4 { font-size: .875rem; font-weight: 600; }
.modifier-options-heading > span { color: var(--edit-muted); font-size: .8125rem; }
.modifier-editor-option { min-width: 0; padding-block: 12px; border-top: 1px solid var(--edit-line); }
.modifier-option-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.modifier-option-heading > strong { font-size: .8125rem; color: var(--edit-muted); }
.modifier-option-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .75fr); gap: 12px; }
.modifier-option-fields:has([data-quantity-field]:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) repeat(2, minmax(0, .75fr)); }
.modifier-option-fields > div { min-width: 0; }
.modifier-option-flags { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 4px; }
.modifier-editor .switch-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .8125rem; cursor: pointer; }
.modifier-editor .switch-label input { width: 20px; height: 20px; flex: none; accent-color: var(--edit-accent); }
.modifier-editor .modifier-editor-error { color: var(--edit-danger); font-size: .8125rem; overflow-wrap: anywhere; }
.modifier-editor [aria-invalid="true"] { border-color: var(--edit-danger); }
.modifier-editor :focus-visible { outline: 2px solid var(--edit-focus); outline-offset: 2px; }
.modifier-editor :disabled { cursor: not-allowed; opacity: .55; }
@media (hover: hover) { .modifier-editor :is(.icon-button, .button.secondary, .modifier-group-toggle):hover:not(:disabled) { background-color: var(--edit-soft); } }
@media (max-width: 600px) {
  .modifier-option-fields, .modifier-option-fields:has([data-quantity-field]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modifier-group-heading { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .modifier-group-heading > .modifier-row-actions { justify-content: end; }
  .modifier-editor-fields > :is(.modifier-limits, .modifier-required) { grid-column: 1 / -1; }
  .modifier-editor-fields > .modifier-edit-field:has(select) { grid-column: 1 / -1; }
  .modifier-editor :is(input:not([type=checkbox]), select) { font-size: 1rem; }
}
@media (max-width: 767px) {
  .product-options-dialog { --modifier-inset: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .product-options-dialog .modifier-option, .modifier-group-toggle > .icon { transition-duration: .01ms; } }
.i-arrow-up { --i: url(/assets/icons/arrow-up.svg); }
.i-arrow-down { --i: url(/assets/icons/arrow-down.svg); }

:root {
  --brand-600: #B53A32; --brand-700: #8D2C27; --brand-50: #FBEDEA; --brand-100: #F4D6D1;
  --paper-50: #FFFDF9; --paper-100: #F7F2EB; --paper-200: #EFE7DC;
  --ink-900: #29211C; --ink-700: #4A3F38; --ink-600: #72675F; --ink-400: #A3978E;
  --line-200: #E6D9CE; --line-300: #D6C6B8;
  --success-600: #2D7D6E; --success-50: #E6F2EF;
  --warning-600: #8A5700; --warning-50: #FBF0DA; --warning-border: #E5C27E;
  --danger-600: #B6202D; --danger-50: #FBE9EA;
  --info-600: #2F6F9F; --info-50: #E8F1F8;
  --indigo-600: #4B4FA8; --indigo-50: #ECECF8;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-sheet: 12px;
  --shadow-1: 0 1px 2px rgb(41 33 28 / 6%);
  --shadow-2: 0 8px 24px rgb(41 33 28 / 12%);
  --shadow-3: 0 18px 48px rgb(41 33 28 / 20%);
  --focus: 0 0 0 3px rgb(181 58 50 / 28%);
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Bounded fluid sizing keeps small screens readable and respects browser text zoom. */
  --text-2xs: clamp(.6875rem, .67rem + .06vw, .75rem);
  --text-xs: clamp(.75rem, .72rem + .1vw, .875rem);
  --text-sm: clamp(.8125rem, .77rem + .16vw, .9375rem);
  --text-base: clamp(.875rem, .84rem + .18vw, 1rem);
  --text-lg: clamp(1rem, .93rem + .3vw, 1.25rem);
  --text-xl: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  --text-title: clamp(1.375rem, 1.125rem + 1vw, 2rem);
  --space-page: clamp(1rem, .6rem + 1.5vw, 2rem);
  --space-card: clamp(.75rem, .6rem + .5vw, 1.125rem);
  --space-gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  --control-min: max(44px, 2.75rem);
  color-scheme: light;
}
/* Payment V3 uses the shared form, dialog, status and surface tokens. */
.payment-v3 { display: grid; gap: 16px; min-width: 0; }
.payment-v3 h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line-200); border-radius: var(--radius); background: var(--paper-100); }
.v3-facts > div { min-width: 0; }
.v3-facts dt { font-size: var(--text-xs); color: var(--ink-600); overflow-wrap: anywhere; }
.v3-facts dd { margin-top: 4px; font-weight: 600; overflow-wrap: anywhere; }
.v3-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-records { display: grid; gap: 10px; }
.v3-record { min-width: 0; padding: 14px; border: 1px solid var(--line-200); border-radius: var(--radius); background: var(--paper-50); overflow-wrap: anywhere; }
.v3-record p, .v3-record .v3-badges { margin-top: 8px; }
.v3-record h3 { font-size: var(--text-lg); }
.v3-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-due { display: grid; gap: 6px; padding: 14px; border-left: 3px solid var(--brand-600); background: var(--paper-100); }
.v3-due strong { font-size: var(--text-xl); }
.v3-due small { color: var(--ink-600); }
.v3-evidence { white-space: pre-wrap; }
.v3-sandbox { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--warning-border); border-radius: var(--radius); background: var(--warning-50); }
.v3-mode-group { margin: 12px 0; }
.v3-mode-group .choice { min-width: 0; }
.v3-mode-group .choice-text { overflow-wrap: anywhere; }
[data-v3-settings] > form > fieldset { min-width: 0; }
[data-v3-ledger] { margin-top: 24px; display: grid; gap: 14px; }
@media (max-width: 600px) { .v3-capabilities { grid-template-columns: 1fr; } .v3-facts { gap: 10px; padding: 10px; } .payment-v3 .status-actions > .button { flex: 1 1 100%; } }
/* Tone helpers: every tone exposes --tone (text/border) and --tone-bg (surface) */
.tone-amber, .tone-warning { --tone: var(--warning-600); --tone-bg: var(--warning-50); --tone-line: var(--warning-border); }
.tone-teal { --tone: var(--success-600); --tone-bg: var(--success-50); --tone-line: #A9D2C8; }
.tone-indigo { --tone: var(--indigo-600); --tone-bg: var(--indigo-50); --tone-line: #C3C4EA; }
.tone-blue, .tone-info { --tone: var(--info-600); --tone-bg: var(--info-50); --tone-line: #B6D2E8; }
.tone-green, .tone-success { --tone: #1F6B4F; --tone-bg: #E3F1EA; --tone-line: #A6D1BD; }
.tone-red, .tone-danger { --tone: var(--danger-600); --tone-bg: var(--danger-50); --tone-line: #EDB8BD; }
.tone-neutral { --tone: var(--ink-700); --tone-bg: var(--paper-100); --tone-line: var(--line-200); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
html:has(dialog:modal) { overflow: hidden; }
body { margin: 0; min-width: 0; background: var(--paper-50); color: var(--ink-900); font: 400 var(--text-base)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; text-wrap: balance; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-700); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
::selection { background: var(--brand-100); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 0; transform: translateY(-110%); max-width: calc(100% - 24px); z-index: 100; padding: 10px 14px; border-radius: var(--radius); background: var(--ink-900); color: #fff; text-decoration: none; }
.skip-link:focus { top: 12px; transform: none; color: #fff; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--ink-600); }
.small { font-size: var(--text-sm); }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--ink-600); text-transform: uppercase; }

/* Icons: CSS-mask of same-origin lucide SVGs, tinted with currentColor (CSP-safe) */
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
@media (forced-colors: active) { .icon { background: CanvasText; forced-color-adjust: none; } button .icon, a .icon { background: ButtonText; } }
.i-utensils { --i: url(/assets/icons/utensils.svg); } .i-receipt-text { --i: url(/assets/icons/receipt-text.svg); } .i-user-round { --i: url(/assets/icons/user-round.svg); }
.i-user { --i: url(/assets/icons/user.svg); } .i-languages { --i: url(/assets/icons/languages.svg); } .i-flame { --i: url(/assets/icons/flame.svg); }
.i-search { --i: url(/assets/icons/search.svg); } .i-x { --i: url(/assets/icons/x.svg); } .i-plus { --i: url(/assets/icons/plus.svg); } .i-minus { --i: url(/assets/icons/minus.svg); } .i-send { --i: url(/assets/icons/send.svg); }
.i-shopping-bag { --i: url(/assets/icons/shopping-bag.svg); } .i-arrow-right { --i: url(/assets/icons/arrow-right.svg); } .i-arrow-left { --i: url(/assets/icons/arrow-left.svg); }
.i-chevron-right { --i: url(/assets/icons/chevron-right.svg); } .i-chevron-left { --i: url(/assets/icons/chevron-left.svg); }
.i-chevron-up { --i: url(/assets/icons/chevron-up.svg); } .i-chevron-down { --i: url(/assets/icons/chevron-down.svg); }
.i-printer { --i: url(/assets/icons/printer.svg); } .i-refresh-cw { --i: url(/assets/icons/refresh-cw.svg); } .i-volume-2 { --i: url(/assets/icons/volume-2.svg); }
.i-volume-x { --i: url(/assets/icons/volume-x.svg); } .i-truck { --i: url(/assets/icons/truck.svg); } .i-chart-no-axes-combined { --i: url(/assets/icons/chart-no-axes-combined.svg); }
.i-chart-column { --i: url(/assets/icons/chart-column.svg); } .i-log-out { --i: url(/assets/icons/log-out.svg); } .i-log-in { --i: url(/assets/icons/log-in.svg); }
.i-external-link { --i: url(/assets/icons/external-link.svg); } .i-clipboard-check { --i: url(/assets/icons/clipboard-check.svg); } .i-clipboard-list { --i: url(/assets/icons/clipboard-list.svg); }
.i-pencil { --i: url(/assets/icons/pencil.svg); } .i-trash-2 { --i: url(/assets/icons/trash-2.svg); } .i-map-pin { --i: url(/assets/icons/map-pin.svg); } .i-map { --i: url(/assets/icons/map.svg); }
.i-smartphone { --i: url(/assets/icons/smartphone.svg); } .i-shield-check { --i: url(/assets/icons/shield-check.svg); } .i-arrow-up-right { --i: url(/assets/icons/arrow-up-right.svg); }
.i-bell { --i: url(/assets/icons/bell.svg); } .i-bell-ring { --i: url(/assets/icons/bell-ring.svg); } .i-wifi { --i: url(/assets/icons/wifi.svg); } .i-wifi-off { --i: url(/assets/icons/wifi-off.svg); }
.i-store { --i: url(/assets/icons/store.svg); } .i-menu { --i: url(/assets/icons/menu.svg); } .i-panel-left { --i: url(/assets/icons/panel-left.svg); }
.i-circle-alert { --i: url(/assets/icons/circle-alert.svg); } .i-triangle-alert { --i: url(/assets/icons/triangle-alert.svg); } .i-clock { --i: url(/assets/icons/clock.svg); }
.i-check { --i: url(/assets/icons/check.svg); } .i-circle-check { --i: url(/assets/icons/circle-check.svg); } .i-bike { --i: url(/assets/icons/bike.svg); } .i-package { --i: url(/assets/icons/package.svg); }
.i-sticky-note { --i: url(/assets/icons/sticky-note.svg); } .i-message-square-text { --i: url(/assets/icons/message-square-text.svg); } .i-image-up { --i: url(/assets/icons/image-up.svg); }
.i-upload { --i: url(/assets/icons/upload.svg); } .i-lock { --i: url(/assets/icons/lock.svg); } .i-info { --i: url(/assets/icons/info.svg); } .i-house { --i: url(/assets/icons/house.svg); }
.i-list-filter { --i: url(/assets/icons/list-filter.svg); } .i-layout-grid { --i: url(/assets/icons/layout-grid.svg); } .i-rows-3 { --i: url(/assets/icons/rows-3.svg); } .i-hash { --i: url(/assets/icons/hash.svg); }
.i-armchair { --i: url(/assets/icons/armchair.svg); } .i-soup { --i: url(/assets/icons/soup.svg); } .i-ban { --i: url(/assets/icons/ban.svg); } .i-circle-x { --i: url(/assets/icons/circle-x.svg); }
.i-timer { --i: url(/assets/icons/timer.svg); } .i-loader-circle { --i: url(/assets/icons/loader-circle.svg); } .i-salad { --i: url(/assets/icons/salad.svg); } .i-eye { --i: url(/assets/icons/eye.svg); }
.i-eye-off { --i: url(/assets/icons/eye-off.svg); } .i-phone { --i: url(/assets/icons/phone.svg); } .i-chef-hat { --i: url(/assets/icons/chef-hat.svg); } .i-history { --i: url(/assets/icons/history.svg); }
.i-file-text { --i: url(/assets/icons/file-text.svg); } .i-rotate-ccw { --i: url(/assets/icons/rotate-ccw.svg); } .i-square-pen { --i: url(/assets/icons/square-pen.svg); }
.i-settings { --i: url(/assets/icons/settings.svg); } .i-package-check { --i: url(/assets/icons/package-check.svg); } .i-circle-dot { --i: url(/assets/icons/circle-dot.svg); }
.i-credit-card { --i: url(/assets/icons/credit-card.svg); } .i-clock-3 { --i: url(/assets/icons/clock-3.svg); }
.i-qr-code { --i: url(/assets/icons/qr-code.svg); }

/* Buttons */
.button, button.primary, button.secondary, button.ghost, button.danger { --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-line: var(--line-300);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--btn-line); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--text-base); line-height: 1.2; text-decoration: none; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-block: .4em; transition: background-color .15s, border-color .15s, color .15s; }
.button:hover, button.secondary:hover { background: var(--paper-100); color: var(--ink-900); }
.button.primary, button.primary { --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-line: var(--brand-600); }
.button.primary:hover, button.primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.button.ghost, button.ghost { --btn-bg: transparent; --btn-line: transparent; color: var(--ink-700); }
.button.ghost:hover, button.ghost:hover { background: var(--paper-100); }
.button.danger, button.danger { --btn-fg: var(--danger-600); --btn-line: #E7AEB4; }
.button.danger:hover, button.danger:hover { background: var(--danger-50); }
.button.danger.solid, button.danger.solid { --btn-bg: var(--danger-600); --btn-fg: #fff; --btn-line: var(--danger-600); }
button.danger.solid:hover { background: #971A25; color: #fff; }
.button.block, button.block { width: 100%; }
.button.lg, button.lg { min-height: 52px; font-size: var(--text-lg); padding: 0 20px; }
.button.sm, button.sm { min-height: max(36px, 2.25rem); padding: .4em 12px; font-size: var(--text-base); }
@media (pointer: coarse), (max-width: 767px) { .button.sm, button.sm { min-height: var(--control-min); } }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
button[aria-busy="true"] { cursor: progress; opacity: 1; position: relative; color: transparent !important; }
button[aria-busy="true"] > * { visibility: hidden; }
button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--btn-fg, var(--ink-900)); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-700); }
.icon-button:hover { background: var(--paper-100); color: var(--ink-900); }
.icon-button.outlined { border-color: var(--line-300); background: #fff; }
.icon-button[aria-pressed="true"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Fields */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.field > label, .field-label, fieldset > legend { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-base); font-weight: 600; color: var(--ink-900); }
.field .optional { font-weight: 400; color: var(--ink-600); margin-left: 4px; }
.hint { font-size: var(--text-sm); color: var(--ink-600); }
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range]), select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-300); border-radius: var(--radius); background: #fff; color: var(--ink-900); font-size: var(--text-base); line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--brand-600); box-shadow: var(--focus); }
:where(input, select, textarea):disabled { background: var(--paper-100); color: var(--ink-600); cursor: not-allowed; }
textarea { min-height: 88px; resize: vertical; }
select { appearance: none; padding-right: 40px; background: #fff url(/assets/icons/chevron-down.svg) right 12px center / 18px no-repeat; }
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input[type=file] { width: 100%; min-height: 44px; padding: 8px; border: 1px dashed var(--line-300); border-radius: var(--radius); background: #fff; font-size: var(--text-base); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--brand-600); }
[aria-invalid="true"] { border-color: var(--danger-600) !important; }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); font-weight: 600; color: var(--danger-600); }
.field-error .icon { margin-top: 2px; width: 16px; height: 16px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.form-grid { display: grid; gap: var(--space-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.form-grid > .wide, .form-grid > fieldset { grid-column: 1 / -1; }
.form-stack { display: grid; gap: var(--space-gap); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }
.form-actions.split { justify-content: space-between; }
@media (max-width: 767px) {
  :where(input:not([type=checkbox], [type=radio], [type=file]), select, textarea) { font-size: var(--text-lg); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-actions > button, .form-actions > .button { flex: 1 1 auto; }
}
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--text-base); }
.check input { margin-top: 1px; }
/* Switch: a real checkbox with role="switch" */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; }
.switch-row .switch-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.switch-row .switch-text strong { font-size: var(--text-base); }
input.switch { appearance: none; position: relative; width: 48px; height: 28px; flex: none; margin: 0; border-radius: 999px; background: var(--line-300); cursor: pointer; transition: background-color .15s; }
input.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
input.switch:checked { background: var(--success-600); }
input.switch:checked::before { transform: translateX(20px); }
input.switch:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
input.switch:disabled { opacity: .55; cursor: not-allowed; }
@media (forced-colors: active) { input.switch { appearance: auto; width: 20px; height: 20px; } input.switch::before { display: none; } }
/* Segmented control (radio group or aria-pressed buttons) */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-300); border-radius: var(--radius); background: var(--paper-100); max-width: 100%; }
.segmented > label, .segmented > button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-700); font-weight: 600; font-size: var(--text-base); cursor: pointer; white-space: nowrap; flex: 1 1 auto; }
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented > label:has(input:checked), .segmented > button[aria-pressed="true"] { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-300); }
.segmented > label:has(input:focus-visible) { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.segmented.block { display: flex; width: 100%; }
.v3-receipt-methods.segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 8px; }
.v3-receipt-methods.segmented > label { min-height: 44px; padding: 8px; white-space: normal; }
.v3-receipt-methods.segmented input { position: static; width: 18px; height: 18px; opacity: 1; }
@media (max-width: 480px) { .v3-receipt-methods.segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (pointer: coarse) { .segmented > label, .segmented > button { min-height: 44px; } }
/* Chips (filters / presets) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; overscroll-behavior-x: contain; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; flex: none; border: 1px solid var(--line-300); border-radius: 999px; background: #fff; color: var(--ink-700); font-size: var(--text-base); font-weight: 600; white-space: nowrap; }
.chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.chip .count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper-200); color: var(--ink-900); font-size: var(--text-xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .count { background: rgb(255 255 255 / 20%); color: #fff; }
.chip .count.alert { background: var(--brand-600); color: #fff; }
@media (pointer: coarse) { .chip { min-height: 44px; } }
/* Status badge & tags: always icon + text, never color only */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--tone-line, var(--line-200)); border-radius: 999px; background: var(--tone-bg, var(--paper-100)); color: var(--tone, var(--ink-700)); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.badge .icon { width: 15px; height: 15px; }
:is(.order-row, .ticket, .status-block, .payment-v3) :is(.badge, .tag) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.badge.lg { min-height: 34px; padding: 4px 14px; font-size: var(--text-base); }
.badge.lg .icon { width: 18px; height: 18px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--tone-bg, var(--paper-100)); color: var(--tone, var(--ink-700)); font-size: var(--text-xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.tag .icon { width: 14px; height: 14px; }
.tag.solid { background: var(--brand-600); color: #fff; }
/* Callouts */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--tone-line, var(--line-200)); border-left-width: 4px; border-left-color: var(--tone, var(--ink-600)); border-radius: var(--radius); background: var(--tone-bg, var(--paper-100)); color: var(--ink-900); font-size: var(--text-base); }
.callout > .icon { color: var(--tone, var(--ink-600)); margin-top: 1px; }
.callout > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.callout strong { font-weight: 700; }
.callout .callout-action { margin-left: auto; align-self: center; flex: none; }
/* State blocks: loading / empty / error */
.state-block { display: grid; justify-items: center; gap: 10px; padding: clamp(1.25rem, 4vw, 2.5rem) var(--space-card); text-align: center; border: 1px dashed var(--line-300); border-radius: var(--radius); background: #fff; }
.state-block > .icon { width: 36px; height: 36px; color: var(--tone, var(--ink-400)); }
.state-block h2, .state-block h3 { font-size: var(--text-lg); }
.state-block p { max-width: 36ch; color: var(--ink-600); font-size: var(--text-base); }
.state-block .button, .state-block button { margin-top: 6px; }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-200); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent); animation: shimmer 1.4s infinite; }
.skeleton-line { height: 14px; border-radius: 4px; }
@keyframes shimmer { to { transform: translateX(100%); } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-300); border-top-color: var(--brand-600); animation: spin .8s linear infinite; }
.boot { display: grid; place-items: center; gap: 12px; min-height: 60vh; color: var(--ink-600); }
/* Cards & sections */
.card { border: 1px solid var(--line-200); border-radius: var(--radius); background: #fff; }
.card-pad { padding: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: var(--text-lg); }
.section-head h2 .icon { margin-right: 6px; color: var(--ink-600); }
.divider { height: 1px; background: var(--line-200); border: 0; margin: 0; }
/* Page heading row and counters (customer and staff pages) */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-gap); margin-bottom: var(--space-gap); }
.page-head h1 { font-size: var(--text-title); }
.page-head h1:focus { outline: none; }
.page-head p { color: var(--ink-600); }
.page-head .head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-head > div { min-width: 0; }
.page-head h1, .page-head p { overflow-wrap: anywhere; }
@media (max-width: 767px) { .page-head h1 { font-size: var(--text-title); } }
.nav-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-600); color: #fff; font-size: var(--text-xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* Dialogs: center (default), sheet, drawer (non-modal side panel), full */
.dialog { width: min(calc(100vw - 32px), var(--dialog-w, 560px)); max-width: none; max-height: min(calc(100dvh - 48px), 880px); margin: auto; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: var(--paper-50); color: var(--ink-900); box-shadow: var(--shadow-3); overflow: hidden; }
.dialog:not([open]) { display: none; }
.dialog.size-sm { --dialog-w: 27.5rem; } .dialog.size-md { --dialog-w: 37.5rem; } .dialog.size-lg { --dialog-w: 51.25rem; }
.dialog::backdrop { background: rgb(41 33 28 / 48%); }
.dialog-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line-200); background: #fff; flex: none; }
.dialog-head h2 { flex: 1; min-width: 0; font-size: var(--text-xl); overflow-wrap: anywhere; }
.dialog-head h2:focus { outline: none; }
.dialog-head .close { margin-left: auto; }
.dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.dialog-body > * { min-width: 0; }
.dialog-body:has(.dialog-foot) { padding-bottom: 0; }
.dialog-foot { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-200); background: rgb(255 253 249 / 97%); }
.dialog.variant-drawer { position: fixed; inset: 64px 0 0 auto; z-index: 30; width: min(460px, 100vw); height: auto; max-height: none; margin: 0; border-width: 0 0 0 1px; border-radius: 0; box-shadow: var(--shadow-2); }
.dialog.variant-full { --dialog-w: 760px; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } }
.dialog[open] { animation: pop .18s var(--ease); }
.dialog.variant-drawer[open] { animation: slide-in .2s var(--ease); }
@media (max-width: 767px) {
  .dialog { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-width: 1px 0 0; }
  .dialog[open] { animation: rise .22s var(--ease); }
  .dialog.variant-full, .dialog.variant-drawer { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .dialog-head { min-height: 56px; padding-left: 16px; }
  .dialog-body { padding: 16px; gap: 16px; }
  .dialog-foot { margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
/* Toast (popover="manual" → top layer, above modal dialogs) */
.toast { position: fixed; inset: auto auto calc(24px + env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); z-index: 90; width: max-content; max-width: min(92vw, 480px); margin: 0; padding: 12px 16px; border: 0; border-radius: var(--radius); background: var(--ink-900); color: #fff; font-size: var(--text-base); font-weight: 600; box-shadow: var(--shadow-2); display: none; }
.toast.visible, .toast:popover-open { display: block; animation: rise .2s var(--ease); }
.toast[data-tone="danger"] { background: var(--danger-600); }
.toast[data-tone="warning"] { background: #6B4400; }
.toast[data-tone="success"] { background: #1F6B4F; }
/* Tables */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line-200); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line-200); text-align: left; vertical-align: middle; }
th { background: var(--paper-100); color: var(--ink-600); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #FFFBF6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.actions { width: 1%; white-space: nowrap; text-align: right; }
td small, .cell-sub { display: block; color: var(--ink-600); font-size: var(--text-sm); }
/* Key/value & line items & totals */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: var(--text-base); }
.kv dt { color: var(--ink-600); overflow-wrap: anywhere; }
.kv dd { overflow-wrap: anywhere; }
.line-items { display: grid; gap: 0; }
.line-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line-200); }
.line-items li:last-child { border-bottom: 0; }
.line-name { display: grid; min-width: 0; }
.line-name strong { font-weight: 600; overflow-wrap: anywhere; }
.line-name small { color: var(--ink-600); font-size: var(--text-sm); }
.line-qty { color: var(--ink-600); white-space: nowrap; }
.line-total { font-weight: 600; white-space: nowrap; text-align: right; min-width: 64px; }
.totals { display: grid; gap: 8px; font-size: var(--text-base); }
.totals > div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt, .totals .label { color: var(--ink-600); }
.totals dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals .grand { padding-top: 10px; border-top: 1px solid var(--line-200); font-size: var(--text-lg); font-weight: 700; }
.totals .grand dt { color: var(--ink-900); }
.money-dual { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 100%; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; text-align: right; }
.money-dual small { color: var(--ink-600); font-size: var(--text-2xs); font-weight: 500; }
.price-pair { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.price-pair strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.price-pair small { color: var(--ink-600); font-size: var(--text-2xs); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Order detail (shared by customer dialog and staff drawer) */
.status-block { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--tone-line, var(--line-200)); border-radius: var(--radius); background: var(--tone-bg, #fff); }
.status-block .status-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.status-block p { color: var(--ink-900); font-size: var(--text-base); }
.status-block .status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.payment-v3 > .status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.status-block .status-actions .button.primary { flex: 1 1 200px; }
.detail-section { display: grid; gap: 10px; }
.detail-section h3 { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.detail-section h3 .icon { color: var(--ink-600); }
.detail-section .callout { font-size: var(--text-base); }
.order-meta { font-size: var(--text-sm); color: var(--ink-600); font-variant-numeric: tabular-nums; }
.print-list { display: grid; gap: 8px; }
.print-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: var(--radius); background: #fff; font-size: var(--text-base); }
.print-list li .print-meta { flex: 1 1 160px; min-width: 0; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.print-list li .print-actions { display: flex; gap: 8px; }
@media (max-width: 560px) { .progress li { font-size: var(--text-2xs); } .progress li time { display: none; } }
/* Quantity stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-300); border-radius: var(--radius); background: #fff; }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink-900); }
.stepper button:hover:not(:disabled) { background: var(--paper-100); }
.stepper :where(input) { width: 56px; min-height: 44px; padding: 0 4px; border: 0; border-inline: 1px solid var(--line-200); border-radius: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper :where(input):focus-visible { box-shadow: inset var(--focus); }
.stepper.sm button { width: 36px; height: 36px; }
.stepper.sm .qty { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .stepper.sm button { width: 44px; height: 44px; } }
/* Order progress (ordered list; current step marked with aria-current) */
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); counter-reset: step; }
.progress li { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 30px; text-align: center; font-size: var(--text-xs); color: var(--ink-600); }
.progress li::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--line-300); }
.progress li:first-child::before { display: none; }
.progress li::after { content: ""; position: absolute; top: 4px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--line-300); background: #fff; }
.progress li.done { color: var(--ink-900); }
.progress li.done::before { background: var(--success-600); }
.progress li.done::after { border-color: var(--success-600); background: var(--success-600); box-shadow: inset 0 0 0 3px #fff; }
.progress li[aria-current="step"] { font-weight: 700; color: var(--ink-900); }
.progress li[aria-current="step"]::after { width: 20px; height: 20px; top: 2px; margin-left: -10px; border-color: var(--brand-600); background: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-100); }
.progress li time { font-size: var(--text-2xs); color: var(--ink-600); font-weight: 400; font-variant-numeric: tabular-nums; }
.progress.stopped li[aria-current="step"]::after { border-color: var(--danger-600); background: var(--danger-600); box-shadow: 0 0 0 4px var(--danger-50); }
/* Event history */
.events { display: grid; gap: 0; }
.events li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 0 0 14px 0; }
.events li::before { content: ""; grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--tone, var(--ink-400)); }
.events li::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: 2px; width: 2px; background: var(--line-200); }
.events li:last-child { padding-bottom: 0; }
.events li:last-child::after { display: none; }
.events .event-title { font-weight: 600; font-size: var(--text-base); }
.events .event-meta { grid-column: 2; font-size: var(--text-sm); color: var(--ink-600); overflow-wrap: anywhere; }
/* Payment and settlement note under order totals (customer + staff) */
.settle-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; font-size: var(--text-sm); color: var(--ink-600); }
.settle-note > span:last-child:not(.badge):not(.icon) { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.settle-note .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
/* System banners (offline, session expired, new orders) */
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tone-bg, var(--paper-100)); color: var(--ink-900); border-bottom: 1px solid var(--tone-line, var(--line-200)); font-size: var(--text-base); }
.banner > .icon { color: var(--tone, var(--ink-600)); }
.banner > span { flex: 1; min-width: 0; }
.banner button, .banner .button { flex: none; }
/* Language switch */
.lang-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line-300); border-radius: 999px; background: #fff; }
.lang-switch button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-700); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.lang-switch button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }
@media (pointer: coarse) { .lang-switch button { min-height: 40px; } }
/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-900); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--ink-900); }
/* Shared logo states must also cover merchant login headers outside .sidebar. */
.brand-mark { position: relative; overflow: hidden; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius); background: var(--brand-600); color: #fff; font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.brand-mark[data-logo-length="2"] { font-size: .875rem; }
.brand-mark:is([data-logo-length="3"], [data-logo-length="4"]) { font-size: .625rem; }
.brand-mark > img[data-brand-logo] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: var(--paper-50); }
.brand-mark > img[data-brand-logo][data-loaded="true"] { opacity: 1; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: var(--text-lg); font-weight: 800; }
.brand-text small { font-size: var(--text-xs); color: var(--ink-600); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-form { display: grid; gap: 16px; }
.confirm-message { color: var(--ink-700); }
.state-icon { color: var(--ink-400); }
/* Payment surfaces share the existing dialog, status, form and money primitives. */
.payment-qr { width: 200px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; justify-self: center; background: #fff; }
.dialog[data-key="payment"] :where(.form-stack, .status-block, fieldset, .choice, .totals, .callout) { min-width: 0; }
.dialog[data-key="payment"] .choices { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.dialog[data-key="payment"] :where(.choice-text strong, .status-block p, .callout, .order-meta) { overflow-wrap: anywhere; }
.dialog[data-key="payment"] .choice-side { white-space: normal; }
.dialog[data-key="payment"] :where(.button, .text-button), .mock-payment-page :where(.button, .text-button) { min-width: 0; max-width: 100%; padding-block: 10px; white-space: normal; overflow-wrap: anywhere; }
.mock-payment-page { --tabbar-h: 0px; }
.mock-payment-page main { width: min(100%, 620px); display: grid; gap: 18px; margin-inline: auto; padding: 24px 16px 48px; }
.mock-payment-page h1 { font-size: var(--text-title); overflow-wrap: anywhere; }
.mock-payment-page h2 { font-size: var(--text-lg); }
.mock-payment-page .payment-summary { display: grid; gap: 12px; padding-block: 16px; border-block: 1px solid var(--line-200); }
.mock-payment-page .header-end { min-width: 0; }
@media (max-width: 560px) {
  .callout:has(.callout-action) { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .callout .callout-action { grid-column: 2; justify-self: start; margin-left: 0; }
  :is(.customer-app, .admin-app) .kv { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 12px; }
  :is(.customer-app, .admin-app) .line-items li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
  :is(.customer-app, .admin-app) .line-items .line-name { grid-column: 1 / -1; }
  :is(.customer-app, .admin-app) .line-items .line-total { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .totals > div { flex-wrap: wrap; }
  .totals dd { min-width: 0; max-width: 100%; margin-left: auto; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .progress li > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .status-actions .button { min-width: 0; max-width: 100%; white-space: normal; padding-block: 10px; overflow-wrap: anywhere; }
  .mock-payment-page .brand-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .skeleton::after { display: none; }
}
.responsive-picture { display: contents; }