/* Avenzo customer app - one shell and one set of primitives for every customer page.
   Colours, type and radii come only from the design system tokens (/assets/ui/avenzo-tokens.css). */

:root {
  --cx-header-h: 60px;
  --cx-tabbar-h: 64px;
  --cx-width: 720px;
  --cx-width-wide: 1120px;
  --cx-gutter: 16px;
  /* Stacking order for the customer app, lowest to highest. Nothing else sets a z-index
     except inside its own component. */
  --cx-z-sticky: 40;    /* menu category rail */
  --cx-z-header: 60;    /* top header */
  --cx-z-tabbar: 65;    /* bottom navigation */
  --cx-z-cart: 70;      /* floating cart pill */
  --cx-z-sheet: 100;    /* sheet backdrop + panel (one stacking context) */
  --cx-z-toast: 120;
}

/* ---------- base ---------- */
body.cx {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--bg);
}
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx a { color: inherit; }
.cx button { font: inherit; color: inherit; }
.cx h1, .cx h2, .cx h3, .cx p { margin: 0; }
.cx img { max-width: 100%; }
.cx-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cx-skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--cx-z-toast); padding: 10px 14px;
  border-radius: 10px; background: var(--text); color: var(--bg) !important; text-decoration: none;
}
.cx-skip:focus { top: 12px; }
.cx-icon { width: 20px; height: 20px; flex: none; display: block; }

/* Access and shell, decided before paint by customer-boot.js:
   data-cx-auth    - "redirect": leaving before paint (nothing is shown);
                     "pending": first page of a tab, no session snapshot yet - the header and tab
                     bar render, the page content waits behind a skeleton until the session is
                     confirmed (never a blank screen, never private content before the check)
   data-cx-shell   - "authenticated" (the Avenzo customer app) or "guest" (table ordering only)
   data-cx-access  - "signed-in" pages (finishing an account) show no app navigation either */
html[data-cx-auth="redirect"] body { visibility: hidden; }
html[data-cx-auth="pending"] .cx-main { position: relative; }
html[data-cx-auth="pending"] .cx-main > * { visibility: hidden; }
html[data-cx-auth="pending"] .cx-main::before {
  content: ""; position: absolute; inset: 16px 16px auto; height: 260px; border-radius: 14px;
  animation: cx-skel-show 1ms linear 150ms both;
  background:
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) 0 0 / 60% 32px no-repeat,
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) 0 48px / 40% 18px no-repeat,
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) 0 96px / 100% 72px no-repeat,
    linear-gradient(var(--surface-subtle), var(--surface-subtle)) 0 184px / 100% 72px no-repeat;
}
html[data-cx-shell="guest"] [data-cx-app],
html[data-cx-access="signed-in"] [data-cx-app] { display: none !important; }

/* Pages with the bottom tab bar leave room for it. */
body.cx--tabs { padding-bottom: calc(var(--cx-tabbar-h) + env(safe-area-inset-bottom)); }
html[data-cx-shell="guest"] body.cx--tabs, html[data-cx-access="signed-in"] body.cx--tabs { padding-bottom: 0; }
@media (min-width: 901px) { body.cx--tabs { padding-bottom: 0; } }

/* ---------- header ---------- */
.cx-header {
  position: sticky; top: 0; z-index: var(--cx-z-header);
  background: var(--bg); /* solid: scrolled content (orange controls) must never show through */
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.cx-header__in {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--cx-width-wide); min-height: var(--cx-header-h); margin: 0 auto;
  padding: 0 max(var(--cx-gutter), env(safe-area-inset-right)) 0 max(var(--cx-gutter), env(safe-area-inset-left));
}
.cx-header__context {
  min-width: 0; overflow: hidden; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
  padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2);
}
.cx-header__context[hidden] { display: none; }
.cx-back { margin-left: -10px; }
.cx-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cx-nav { display: none; gap: 2px; margin-left: 16px; }
.cx-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); text-decoration: none;
}
.cx-nav a:hover { color: var(--text); background: var(--surface-subtle); }
.cx-nav a[aria-current="page"] { color: var(--text); background: var(--surface-subtle); }
@media (min-width: 901px) { .cx-nav { display: flex; } }

.cx-iconbtn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--text-2); cursor: pointer; text-decoration: none;
}
.cx-iconbtn:hover { color: var(--text); background: var(--surface-subtle); }
.cx-scan-desktop { display: none !important; }
@media (min-width: 901px) {
  .cx-scan-desktop {
    display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
    border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none;
  }
  .cx-scan-desktop:hover { border-color: var(--brand); }
  .cx-scan-desktop .cx-icon { width: 18px; height: 18px; color: var(--brand-ink); }
}
.cx-account {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px;
  border-radius: 12px; text-decoration: none; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.cx-account:hover { background: var(--surface-subtle); }
.cx-avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 700;
}
.cx-signin { padding: 0 12px; color: var(--brand-ink); }

/* ---------- bottom tab bar (phones and tablets) ---------- */
.cx-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--cx-z-tabbar);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--cx-tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
  background: var(--surface); border-top: 1px solid var(--border);
}
.cx-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--cx-tabbar-h); min-width: 44px; padding: 6px 2px 8px;
  font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: 0.01em;
  color: var(--text-3); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.cx-tab .cx-icon { width: 22px; height: 22px; }
.cx-tab[aria-current="page"] { color: var(--text); }
.cx-tab[aria-current="page"] .cx-icon { color: var(--brand-ink); }
/* Scan QR: the primary action, centred, a solid mark that stays calm. */
.cx-tab--scan { justify-content: flex-start; padding-top: 0; color: var(--text-2); }
.cx-tab--scan .cx-scan-btn {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: -14px; margin-bottom: 1px;
  border-radius: 18px; background: var(--brand-fill); color: var(--text-on-brand);
  box-shadow: var(--shadow-md); border: 3px solid var(--surface);
}
.cx-tab--scan .cx-scan-btn .cx-icon { color: inherit; width: 22px; height: 22px; }
.cx-tab--scan[aria-current="page"] .cx-scan-btn { background: var(--brand-fill-hover); }
@media (min-width: 901px) { .cx-tabbar { display: none; } }

/* ---------- layout ---------- */
.cx-main {
  width: 100%; max-width: var(--cx-width); margin: 0 auto;
  padding: 20px max(var(--cx-gutter), env(safe-area-inset-right)) 40px max(var(--cx-gutter), env(safe-area-inset-left));
}
.cx-main--wide { max-width: var(--cx-width-wide); }
.cx-stack { display: flex; flex-direction: column; gap: 16px; }
.cx-stack--lg { gap: 28px; }
.cx-section { display: flex; flex-direction: column; gap: 12px; }
.cx-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-h1 { font-family: var(--font-display); font-size: clamp(26px, 6.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.cx-h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cx-h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cx-lead { font-size: 15.5px; color: var(--text-2); }
.cx-muted { color: var(--text-2); }
.cx-faint { color: var(--text-3); }
.cx-small { font-size: 14px; }
.cx-xs { font-size: 12.5px; }
.cx-link { color: var(--brand-ink) !important; font-weight: 600; text-decoration: none; }
.cx-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-dot { display: inline-block; width: 3px; height: 3px; margin: 0 6px 2px; border-radius: 50%; background: currentColor; opacity: 0.6; vertical-align: middle; }
.cx-num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-sm); padding: 0 18px; border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.1; text-decoration: none !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) ease;
}
.cx-btn:active:not(:disabled) { transform: scale(0.985); }
.cx-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cx-btn--primary { color: var(--text-on-brand) !important; background: var(--brand-fill); }
.cx-btn--primary:hover:not(:disabled) { background: var(--brand-fill-hover); }
.cx-btn--secondary { color: var(--text) !important; background: var(--surface); border-color: var(--border-strong); }
.cx-btn--secondary:hover:not(:disabled) { background: var(--surface-subtle); }
.cx-btn--quiet { color: var(--text-2) !important; background: transparent; padding: 0 12px; }
.cx-btn--quiet:hover:not(:disabled) { color: var(--text) !important; background: var(--surface-subtle); }
.cx-btn--danger { color: var(--danger) !important; background: transparent; border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.cx-btn--lg { min-height: var(--control); font-size: 16px; padding: 0 20px; }
.cx-btn--block { width: 100%; }
.cx-btn .cx-icon { width: 18px; height: 18px; }
.cx-btn[aria-busy="true"] { cursor: progress; }
.cx-spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: cx-spin 0.7s linear infinite; flex: none;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* ---------- cards & rows ---------- */
.cx-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.cx-card--pad { padding: 16px; }
.cx-card--link { display: block; text-decoration: none; transition: border-color var(--fast) ease; }
.cx-card--link:hover { border-color: var(--border-strong); }
.cx-rows { display: flex; flex-direction: column; }
.cx-row {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px;
  text-decoration: none; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.cx-row + .cx-row { border-top: 1px solid var(--border); }
button.cx-row:hover, a.cx-row:hover { background: var(--surface-subtle); }
.cx-row__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-subtle); color: var(--text-2); flex: none; }
.cx-row__body { flex: 1; min-width: 0; }
.cx-row__title { font-size: 15px; font-weight: 600; }
.cx-row__sub { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.cx-row__end { flex: none; color: var(--text-3); display: flex; align-items: center; gap: 6px; font-size: 14px; }

/* ---------- continue card (active context on Home) ---------- */
.cx-continue {
  display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-lg);
}
.cx-continue:hover { border-color: var(--border-strong); border-left-color: var(--brand); }
.cx-continue__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.cx-continue__body { flex: 1; min-width: 0; }
.cx-continue__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
.cx-continue__title { font-size: 16px; font-weight: 600; margin-top: 2px; }
.cx-continue__sub { font-size: 14px; color: var(--text-2); }

/* ---------- search & chips ---------- */
.cx-search { position: relative; }
.cx-search .cx-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.cx-search input {
  width: 100%; height: 48px; padding: 0 14px 0 44px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); outline: none;
  -webkit-appearance: none; appearance: none;
}
.cx-search input::placeholder { color: var(--text-3); }
.cx-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.cx-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.cx-chips::-webkit-scrollbar { display: none; }
.cx-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.cx-chip[aria-pressed="true"], .cx-chip[aria-current="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.cx-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 36px chips sit in a 44px touch row. */
.cx-chip-row { min-height: 44px; display: flex; align-items: center; }

/* ---------- restaurant cards ---------- */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cx-rcard { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cx-rcard:hover { border-color: var(--border-strong); }
.cx-rcard__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-subtle); display: grid; place-items: center; overflow: hidden; }
.cx-rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-rcard__initial { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--text-3); }
.cx-rcard__status { position: absolute; left: 10px; top: 10px; }
.cx-rcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.cx-rcard__name { font-size: 16px; font-weight: 600; }
.cx-rcard__meta { font-size: 13.5px; color: var(--text-2); }
.cx-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); }
.cx-rating .cx-icon { width: 14px; height: 14px; color: var(--brand); }
.cx-status-open { background: var(--success-soft); color: var(--success); }
.cx-status-closed { background: var(--surface-subtle); color: var(--text-2); }

/* ---------- restaurant identity ---------- */
.cx-rhead { display: flex; flex-direction: column; gap: 8px; }
.cx-rhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--text-2); }
.cx-veg { display: inline-flex; align-items: center; gap: 6px; }
.cx-foodmark { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; flex: none; }
.cx-foodmark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-foodmark--veg { color: var(--success); }
.cx-foodmark--nonveg { color: var(--danger); }
.cx-foodmark--egg { color: var(--warning); }

/* ---------- service mode choice ---------- */
.cx-modes { display: flex; flex-direction: column; gap: 10px; }
.cx-mode {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-decoration: none;
}
.cx-mode:hover { border-color: var(--text-3); }
.cx-mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cx-mode__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-subtle); color: var(--text); flex: none; }
/* A restaurant with one way to order: the mode and one prominent action (no choice screen). */
.cx-single-mode { display: flex; flex-direction: column; gap: 16px; }
.cx-single-mode__head { display: flex; align-items: center; gap: 14px; }
.cx-single-mode .cx-btn .cx-icon { margin-left: 4px; }
.cx-mode__body { flex: 1; min-width: 0; }
.cx-mode__title { font-size: 16px; font-weight: 600; }
.cx-mode__desc { font-size: 14px; color: var(--text-2); }
.cx-mode .cx-chev { color: var(--text-3); }

/* ---------- menu ---------- */
.cx-context { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cx-context .cx-icon { width: 16px; height: 16px; color: var(--brand-ink); }
.cx-menu-tools { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
/* Food type is a filter, so it is a segmented control - visibly different from category navigation. */
.cx-seg { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-sunken, var(--surface-subtle)); overflow-x: auto; scrollbar-width: none; }
.cx-seg::-webkit-scrollbar { display: none; }
.cx-seg button {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.cx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cx-seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Categories: one quiet rail that stays under the app header while the menu scrolls. */
.cx-cats {
  position: sticky; top: calc(var(--cx-header-h) + env(safe-area-inset-top)); z-index: var(--cx-z-sticky);
  margin: 10px calc(-1 * var(--cx-gutter)) 0; padding: 8px var(--cx-gutter);
  background: var(--bg); border-bottom: 1px solid transparent;
}
.cx-cats[data-stuck="true"] { border-bottom-color: var(--border); }
.cx-cats .cx-chip { min-height: 36px; }
.cx-cat { scroll-margin-top: calc(var(--cx-header-h) + 64px); }
.cx-cat__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; padding: 18px 0 6px; }
.cx-items { display: flex; flex-direction: column; }
.cx-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cx-item:last-child { border-bottom: 0; }
.cx-item__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cx-item__desc { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-item__price { font-size: 15px; font-weight: 600; margin-top: 2px; }
.cx-item__note { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.cx-item__side { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cx-item__open { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; border-radius: 8px; }
.cx-item__open:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.cx-item[data-unavailable="true"] .cx-item__name, .cx-item[data-unavailable="true"] .cx-item__price { color: var(--text-3); }
.cx-item[data-unavailable="true"] .cx-food img { opacity: 0.5; filter: grayscale(1); }

/* ---------- dish images ---------- */
/* Every dish shows its own photo, or a neutral plate - never another dish's picture. Fixed boxes
   (aspect-ratio) so images load without shifting the layout. */
.cx-food { display: block; flex: none; overflow: hidden; border-radius: 12px; background: var(--surface-subtle); }
.cx-food img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-food--none { display: grid; place-items: center; color: var(--text-3); }
.cx-food--none .cx-icon { width: 40%; height: 40%; max-width: 40px; max-height: 40px; opacity: 0.7; }
.cx-food--item { width: 104px; height: 88px; }
.cx-food--sheet { width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; }
.cx-food--sheet.cx-food--none { aspect-ratio: 16 / 5; }
.cx-food--line { width: 52px; height: 52px; border-radius: 10px; }
@media (min-width: 700px) { .cx-food--item { width: 120px; height: 100px; } .cx-item__side { width: 120px; } }

/* ---------- special instructions ---------- */
.cx-instr { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.cx-instr__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-instr__summary { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.cx-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium, 500); cursor: pointer;
}
.cx-toggle .cx-icon { width: 16px; height: 16px; display: none; }
.cx-toggle[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--fw-semibold); }
.cx-toggle[aria-pressed="true"] .cx-icon { display: block; }
.cx-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- cart lines ---------- */
.cx-cline { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cx-cline:last-child { border-bottom: 0; }
.cx-cline__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-cline__name { font-weight: 600; font-size: 15px; }
.cx-cline__meta { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.cx-cline__price { font-weight: 600; text-align: right; }
.cx-cline__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 4px 0 0 -8px; }
.cx-cline__actions .cx-qty { margin-left: auto; }
.cx .cx-linkbtn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; color: var(--brand-ink); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer;
}
.cx .cx-linkbtn:hover { background: var(--surface-subtle); }
.cx .cx-linkbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cx .cx-linkbtn--quiet { color: var(--text-2); }
.cx-add {
  min-width: 96px; min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--brand-ink);
  font-size: 15px; font-weight: 700;
}
.cx-add:hover:not(:disabled) { border-color: var(--brand); }
.cx-add:disabled { color: var(--text-3); cursor: not-allowed; }
.cx-qty { display: inline-flex; align-items: center; height: 40px; border-radius: 10px; background: var(--brand-fill); color: var(--text-on-brand); overflow: hidden; }
.cx-qty button { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.cx-qty button:hover { background: color-mix(in srgb, #000 12%, transparent); }
.cx-qty button .cx-icon { width: 16px; height: 16px; }
.cx-qty output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-qty--quiet { background: var(--surface-subtle); color: var(--text); }

/* ---------- sheets (bottom sheet on phones, centred dialog on wider screens) ---------- */
.cx-sheet { position: fixed; inset: 0; z-index: var(--cx-z-sheet); display: flex; align-items: flex-end; justify-content: center; }
.cx-sheet[hidden] { display: none; }
.cx-sheet__backdrop { position: absolute; inset: 0; background: var(--overlay); animation: cx-fade var(--med) var(--ease); }
.cx-sheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: min(92vh, 92dvh); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom); animation: cx-rise var(--med) var(--ease); outline: none;
}
.cx-sheet__head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px 20px; }
.cx-sheet__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; flex: 1; min-width: 0; }
.cx-sheet__body { overflow-y: auto; padding: 6px 20px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cx-sheet__foot { padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .cx-sheet { align-items: center; padding: 24px; }
  .cx-sheet__panel { border-radius: 20px; padding-bottom: 0; }
}
@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-rise { from { transform: translateY(16px); opacity: 0; } }
body.cx-sheet-open { overflow: hidden; }

/* ---------- fields ---------- */
.cx-field { display: flex; flex-direction: column; gap: 8px; }
.cx-label { font-size: 14px; font-weight: 600; }
.cx-input, .cx-textarea {
  width: 100%; min-height: 50px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--field); border: 1px solid var(--border-strong); border-radius: var(--r); outline: none;
  -webkit-appearance: none; appearance: none;
}
.cx-textarea { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.cx-input:focus, .cx-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.cx-input[aria-invalid="true"] { border-color: var(--danger); }
.cx-input::placeholder, .cx-textarea::placeholder { color: var(--text-3); }
.cx-affix { position: relative; }
.cx-affix__prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.cx-affix .cx-input { padding-left: 50px; }
.cx-hint { font-size: 13px; color: var(--text-2); }
.cx-error { font-size: 13.5px; font-weight: 500; color: var(--danger); }
.cx-error:empty { display: none; }
.cx-alert { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--danger); background: var(--danger-soft); }
.cx-alert:empty { display: none; }
.cx-alert[data-tone="info"] { color: var(--text); background: var(--surface-subtle); }
.cx-alert[data-tone="success"] { color: var(--success); background: var(--success-soft); }

/* ---------- modifiers ---------- */
.cx-group { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--border); }
.cx-group > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.cx-group > legend + * { clear: both; }
.cx-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cx-group__name { font-size: 15px; font-weight: 600; }
.cx-group__rule { font-size: 12.5px; color: var(--text-3); }
.cx-group__rule[data-required="true"] { color: var(--brand-ink); font-weight: 600; }
.cx-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 15px; }
.cx-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand-fill); flex: none; }
.cx-opt__name { flex: 1; }
.cx-opt__price { color: var(--text-2); font-size: 14px; }

/* ---------- order lines & totals ---------- */
.cx-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cx-line:last-child { border-bottom: 0; }
.cx-line__body { flex: 1; min-width: 0; }
.cx-line__name { font-weight: 600; font-size: 15px; }
.cx-line__meta { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.cx-line__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cx-totals { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.cx-totals div { display: flex; justify-content: space-between; gap: 12px; }
.cx-totals .cx-total { font-size: 17px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ---------- status ---------- */
.cx-status-hero { display: flex; flex-direction: column; gap: 6px; }
/* Status: the order number is what customers and staff refer to, so it leads. */
.cx-order-no { font-family: var(--font-display); font-size: clamp(28px, 7vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cx-status-hero__state { font-size: 18px; font-weight: 600; color: var(--brand-ink); }
/* Collection / pickup code: secondary, masked until asked for. */
.cx-codebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-codebox__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-codebox__label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cx-codebox__value { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; }
.cx-codebox__value[data-masked="true"] { color: var(--text-3); letter-spacing: 0.2em; }
/* Order lines on the status page. */
.cx-oline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cx-oline:last-of-type { border-bottom: 0; }
.cx-oline__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-code { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; text-align: center; }
.cx-code__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.cx-code__value { font-family: var(--font-display); font-size: 48px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cx-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cx-kv dt { font-size: 12.5px; color: var(--text-2); }
.cx-kv dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cx-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cx-actions > :only-child { grid-column: 1 / -1; }

/* ---------- empty, skeleton, toast ---------- */
.cx-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; }
.cx-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface-subtle); color: var(--text-2); }
.cx-empty__icon .cx-icon { width: 24px; height: 24px; }
/* Skeletons stay invisible for their first 150 ms: content that arrives quickly replaces them
   without a skeleton ever flashing; slower content shows a layout-matched placeholder. */
.cx-skel { background: linear-gradient(90deg, var(--surface-subtle), var(--surface-sunken), var(--surface-subtle)); background-size: 200% 100%; animation: cx-skel-show 1ms linear 150ms both, cx-shimmer 1.4s linear infinite; border-radius: 10px; }
@keyframes cx-shimmer { to { background-position: -200% 0; } }
@keyframes cx-skel-show { from { opacity: 0; } to { opacity: 1; } }
.cx-toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--cx-toast-offset, 0px) + env(safe-area-inset-bottom)); z-index: var(--cx-z-toast);
  transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px;
  background: var(--text); color: var(--bg); font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-lg);
}
body.cx--tabs .cx-toast { --cx-toast-offset: var(--cx-tabbar-h); }
@media (min-width: 901px) { body.cx--tabs .cx-toast { --cx-toast-offset: 0px; } }

/* ---------- scan ---------- */
.cx-scan-view { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #0D0D0D; }
.cx-scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-scan-frame { position: absolute; inset: 18%; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); pointer-events: none; }
.cx-scan-idle { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #F6F4F1; }

/* ---------- print (bill) ---------- */
@media print {
  .cx-header, .cx-tabbar, .cx-no-print { display: none !important; }
  body.cx { background: #fff; padding: 0 !important; }
  .cx-main { padding: 0; max-width: none; }
  .cx-card { border: 0; }
}

/* ---------- bill ---------- */
.cx-bill { display: flex; flex-direction: column; gap: 18px; }
.cx-bill__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-strong); }
.cx-bill__doc { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.cx-bill__foot { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px dashed var(--border-strong); text-align: center; }
@media print { .cx-bill { gap: 12px; } }
.cx-bill__items--collapsed .cx-line[data-extra] { display: none; }
@media print { .cx-bill__items--collapsed .cx-line[data-extra] { display: flex; } }
/* ---------- page transitions (same-origin MPA navigations) ----------
   The header and tab bar keep stable names, so they stay put between pages; only the main content
   moves: the old page fades out quickly, the new one fades in with a small rise. The root crossfade
   is off, so there is never a white/black flash or both pages at once. No motion when reduced. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .cx-header { view-transition-name: cx-header; }
  .cx-tabbar { view-transition-name: cx-tabbar; }
  .cx-main { view-transition-name: cx-main; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(cx-header), ::view-transition-group(cx-tabbar), ::view-transition-group(cx-main) { animation: none; }
  /* Old and new shell stay still and stacked (the new, opaque one on top): never a gap. */
  ::view-transition-old(cx-header), ::view-transition-old(cx-tabbar),
  ::view-transition-new(cx-header), ::view-transition-new(cx-tabbar) { animation: none; }
  ::view-transition-old(cx-main) { animation: cx-vt-out 80ms ease-out both; }
  ::view-transition-new(cx-main) { animation: cx-vt-in 170ms cubic-bezier(0.2, 0.7, 0.2, 1) 50ms both; }
  ::view-transition-image-pair(cx-main) { isolation: auto; }
}
@keyframes cx-vt-out { to { opacity: 0; } }
@keyframes cx-vt-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- floating cart pill (the only cart affordance outside the cart sheet) ---------- */
.cx .cx-cartpill {
  position: fixed; z-index: var(--cx-z-cart);
  right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  font: inherit; font-weight: var(--fw-semibold); -webkit-tap-highlight-color: transparent;
}
.cx .cx-cartpill[hidden] { display: none; }
.cx .cx-cartpill .cx-icon { width: 22px; height: 22px; color: var(--brand-ink); }
.cx-cartpill__count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--brand-fill); color: var(--text-on-brand); font-size: 13px; font-weight: 700; }
.cx-cartpill__total { font-size: 15.5px; }
.cx .cx-cartpill:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 900px) {
  html:not([data-cx-shell="guest"]):not([data-cx-access="signed-in"]) body.cx--tabs .cx-cartpill { bottom: calc(var(--cx-tabbar-h) + env(safe-area-inset-bottom) + 14px); }
  html:not([data-cx-shell="guest"]):not([data-cx-access="signed-in"]) body.cx--tabs.cx--has-cart .cx-toast { --cx-toast-offset: calc(var(--cx-tabbar-h) + 66px); }
}
body.cx--has-cart .cx-main { padding-bottom: 96px; }
body.cx-sheet-open .cx-cartpill { visibility: hidden; }

/* ---------- Orders tab: a small dot on the icon, never a tile ---------- */
.cx-tab.cx-has-dot, .cx-nav a.cx-has-dot { position: relative; }
.cx-active-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-fill); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.cx-tab .cx-active-dot { top: 11px; left: calc(50% + 7px); }
.cx-nav .cx-active-dot { top: 6px; right: 2px; box-shadow: none; }

/* ---------- Home ---------- */
.cx-home-hero { display: flex; flex-direction: column; gap: 6px; }
.cx-again { display: flex; flex-direction: column; gap: 10px; }
.cx-again__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; }
.cx-again__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cx-again__dishes { font-size: 14.5px; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-again__cta { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 14px; font-weight: var(--fw-semibold); color: var(--brand-ink); }
.cx-again__cta .cx-icon { width: 16px; height: 16px; }
.cx-usuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cx-usual { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 14px 16px; text-decoration: none; }
.cx-usual__name { font-weight: 600; overflow-wrap: anywhere; }
.cx-usual__meta { font-size: 13px; color: var(--text-2); }
@media (min-width: 700px) { .cx-usuals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-welcome {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 28px 22px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border);
}
.cx-welcome[hidden] { display: none; }
.cx-welcome__mark { width: 44px; height: auto; margin-bottom: 6px; }
.cx-welcome .cx-btn { margin-top: 8px; }

/* ---------- cart sheet ---------- */
.cx-sheet__sub { font-size: 14px; color: var(--text-2); margin: -2px 0 6px; }
.cx-cline > .cx-food { grid-row: span 2; }
.cx-cline__qtyrow { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cx-cline__links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 0 -8px; }
.cx .cx-cline .cx-linkbtn { min-height: 44px; }
.cx-cline__instr { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 14px; border-radius: 14px; background: var(--surface-subtle); }
.cx-cline__instr[hidden] { display: none; }
.cx-instr__label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.cx-cline__instr { container-type: inline-size; }
.cx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container (min-width: 380px) { .cx-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-choice {
  min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14px; font-weight: var(--fw-medium, 500);
}
.cx-choice[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--fw-semibold); }
.cx-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cx-cline__instr .cx-toggle { min-height: 44px; }
.cx-cline__instr .cx-textarea { min-height: 72px; background: var(--surface); }
.cx-cline__instr .cx-btn { align-self: flex-end; }

/* ---------- payment step ---------- */
.cx-paysum { display: flex; flex-direction: column; gap: 4px; }
.cx-paysum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-paysum__total { font-family: var(--font-display); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-paymethods { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-paymethods legend { padding: 0; margin-bottom: 10px; }
.cx-paymethod { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); cursor: pointer; }
.cx-paymethod:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cx-paymethod input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand-fill); flex: none; }
.cx-paymethod__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-subtle); color: var(--text-2); flex: none; }
.cx-paymethod__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-paymethod__title { font-weight: 600; }
.cx-paymethod__sub { font-size: 13.5px; color: var(--text-2); }
.cx-paybar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; padding-top: 8px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
@media (max-width: 900px) {
  html:not([data-cx-shell="guest"]):not([data-cx-access="signed-in"]) body.cx--tabs .cx-paybar { bottom: calc(var(--cx-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
}

/* ---------- order status (track) ---------- */
.cx-track-top { display: flex; flex-direction: column; gap: 4px; }
.cx-track-top__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-track-top__row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.cx-track-top__when, .cx-track-top__total { flex: none; font-variant-numeric: tabular-nums; }
.cx-track-top__when { font-size: 14px; color: var(--text-2); }
.cx-track-top__total { font-weight: 700; font-size: 17px; }
.cx-track-top__where { font-size: 15px; color: var(--text-2); }
.cx-hero { display: flex; align-items: center; gap: 16px; }
.cx-hero__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-hero__state { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.cx-hero__line { color: var(--text-2); font-size: 15px; }
.cx-hero__progress { height: 3px; border-radius: 3px; background: var(--border); margin-top: 16px; overflow: hidden; }
.cx-hero__progress span { display: block; height: 100%; background: var(--brand-fill); border-radius: inherit; transition: width var(--med) var(--ease); }
.cx-orb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.cx-orb::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-fill); }
.cx-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.cx-orb[data-tone="done"] { background: var(--success-soft); }
.cx-orb[data-tone="done"]::after { background: var(--success); }
.cx-orb[data-tone="off"] { background: var(--surface-subtle); }
.cx-orb[data-tone="off"]::after { background: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .cx-orb[data-tone="live"]::before { animation: cx-orb 2.2s var(--ease) infinite; }
  .cx-orb[data-tone="live"]::after { animation: cx-orb-core 2.2s ease-in-out infinite; }
}
@keyframes cx-orb { 0% { transform: scale(0.7); opacity: 0.55; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes cx-orb-core { 50% { transform: scale(0.85); } }
.cx-hero__pay { font-size: 14px; font-weight: 600; margin-top: 2px; }
.cx .cx-linkbtn[data-items-toggle] { margin: 4px 0 0 -8px; }
.cx-item--spot { animation: cx-spot 1.6s var(--ease) 1; border-radius: 12px; }
@keyframes cx-spot { 0%, 40% { box-shadow: 0 0 0 3px var(--ring); background: var(--brand-soft); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cx-item--spot { animation: none; box-shadow: 0 0 0 2px var(--ring); } }