/* =====================================================================
   «Nodex Mono» — второй вариант оформления для всех приложений (касса, кухня, Офис, официант, владелец, QR-меню).
   Правила: docs/ref/mobile-design-skill.md. Работает ТОЛЬКО при <html data-ui="mono"> (ставит /js/ui-boot.js);
   без этого атрибута файл ничего не меняет — «Классический» дизайн остаётся вариантом 1.

   Как устроено
   - Один префикс :root[data-ui="mono"]:not(#nx-mono) — у него «вес» id, поэтому он перекрывает правила тем
     (классика, тёмная касса, светлый Офис 4b, .ma, .lw) без !important. !important — только в глобальных запретах.
   - Сначала свои токены --m-*, затем перекраска токенов каждого семейства (app/d28/office-v4b/.ma/.ct/.bento/гость),
     затем глобальные запреты (тени, стекло, градиенты, радиусы), затем компоненты по приложениям.
   - Палитра: серые уровни Mono, один акцент — зелёный Nodex #2BD47D с чёрным текстом (только главная кнопка экрана
     и ключевые числа), разрушительное действие — #FF453A. Выбор = белая заливка + чёрный текст или белая рамка 2px.
   - Радиусы: 0 (фото), 2 (элементы управления), 6 (окна и нижние листы). Шрифт — NodexSans (subset Inter, переименован; OFL — public/fonts/OFL.txt),
     тяжёлый NodexSans Display — только заголовки и главные кнопки. Цифры табличные.
   - Тема: основная — тёмная Mono; светлая Mono (переключатель темы) — только токены в конце файла.
   ===================================================================== */

@font-face { font-family: "NodexSans"; src: url("/fonts/nodexsans-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NodexSans"; src: url("/fonts/nodexsans-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NodexSans"; src: url("/fonts/nodexsans-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "NodexSans"; src: url("/fonts/nodexsans-700.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "NodexSans Display"; src: url("/fonts/nodexsans-display-800.woff") format("woff"); font-weight: 600 900; font-style: normal; font-display: swap; }

:root[data-ui="mono"]:not(#nx-mono) {
  /* ---------- 1. Токены Mono ---------- */
  --m-bg: #000000; --m-surface: #141414; --m-raised: #1F1F1F; --m-line: #2B2B2B; --m-track: #3D3D3D;
  --m-text: #FFFFFF; --m-text-2: #A3A3A3; --m-text-3: #808080; --m-dis: #4D4D4D;
  --m-accent: #2BD47D; --m-accent-text: #2BD47D; --m-on-accent: #000000; --m-danger: #FF453A; --m-on-danger: #000000;
  --m-sel: #FFFFFF; --m-on-sel: #000000; --m-scrim: rgba(0, 0, 0, .6); --m-focus: #FFFFFF;
  --m-font: "NodexSans", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --m-display: "NodexSans Display", "NodexSans", "Inter Display", Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --m-r: 2px; --m-r-sheet: 6px;

  /* app.css / d28 (Офис, касса) */
  --backdrop: var(--m-bg); --bg: var(--m-bg); --side: var(--m-bg); --surface: var(--m-surface); --surface-2: var(--m-raised); --surface-3: var(--m-raised); --elev: var(--m-raised);
  --card: var(--m-surface); --ink: var(--m-text); --ink-2: var(--m-text-2); --muted: var(--m-text-2);
  --line: var(--m-line); --line-strong: var(--m-track); --hair: var(--m-line); --fill: var(--m-raised); --seg-on: var(--m-sel);
  --brand: var(--m-accent); --brand-hover: var(--m-accent); --brand-ink: var(--m-on-accent); --brand-text: var(--m-text); --brand-soft: var(--m-raised);
  --accent: var(--m-sel); --accent-hover: var(--m-sel); --accent-soft: var(--m-raised); --accent-ink-soft: var(--m-text);
  --ribbon: var(--m-sel); --ribbon-ink: var(--m-on-sel); --saffron: var(--m-text); --saffron-soft: var(--m-raised);
  --ok: var(--m-accent); --ok-soft: var(--m-raised); --warn: var(--m-text); --warn-soft: var(--m-raised);
  --danger: var(--m-danger); --danger-soft: var(--m-raised); --danger-solid: var(--m-danger);
  --glass: var(--m-surface); --glass-edge: none; --glass-shadow: none; --highlight: transparent; --card-shadow: none; --shadow-1: none; --shadow-2: none;
  --track-on: var(--m-accent); --track-off: var(--m-track); --focus: var(--m-focus); --paper: #FFFFFF;
  --chart-bar: var(--m-accent); --chart-bar-2: var(--m-track); --chart-grid: var(--m-line);
  --font: var(--m-font); --font-display: var(--m-display);
  --r-sm: var(--m-r); --r-md: var(--m-r); --r-lg: var(--m-r); --header-h: 64px;
  /* мобильные (.ma / гость) — на корне тоже, для гостевого меню */
  --label: var(--m-text); --secondary: var(--m-text-2); --card-2: var(--m-raised); --chip: var(--m-surface); --bar: var(--m-bg);
  --on-accent: var(--m-on-sel); --grabber: var(--m-track); --shadow: none;
  /* микроанимации: галочка оплаты — зелёная, движения короче */
  --mo-check-bg: var(--m-accent); --mo-check-ink: var(--m-on-accent); --mo-spring: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;

  /* семейства токенов, объявленные на своих корнях */
  & .ma, & dialog.ma-sheet {
    --bg: var(--m-bg); --card: var(--m-surface); --card-2: var(--m-raised); --label: var(--m-text); --secondary: var(--m-text-2); --fill: var(--m-raised); --seg-on: var(--m-sel);
    --bar: var(--m-bg); --hair: var(--m-line); --hair-strong: var(--m-track); --shadow: none;
    --accent: var(--m-sel); --on-accent: var(--m-on-sel); --accent-text: var(--m-text); --accent-soft: var(--m-raised); --accent-ink: var(--m-text);
    --warn-soft: var(--m-raised); --warn-ink: var(--m-text); --ok-soft: var(--m-raised); --ok-ink: var(--m-accent); --danger-soft: var(--m-raised); --danger-ink: var(--m-danger);
    --chip: var(--m-surface); --glass: var(--m-surface); --glass-edge: var(--m-line); --highlight: transparent; --dim: var(--m-bg); --sheet: var(--m-surface); --sheet-card: var(--m-raised);
    --grabber: var(--m-track); --lime: var(--m-accent); --lime-ink: var(--m-on-accent);
  }
  & .ct {
    --c-canvas: var(--m-bg); --c-canvas-2: var(--m-bg); --c-top: var(--m-bg); --c-tile: var(--m-surface); --c-tile-2: var(--m-raised); --c-tile-hi: var(--m-raised);
    --c-lime: var(--m-sel); --c-lime-ink: var(--m-on-sel); --c-bar: var(--m-bg); --c-bar-2: var(--m-surface); --c-line: var(--m-line); --c-ink: var(--m-text); --c-ink-2: var(--m-text-2);
  }
  & .bento { --bento-bg: var(--m-surface); --bento-ink: var(--m-text); --bento-muted: var(--m-text-2); --bento-accent: var(--m-accent); --bento-radius: var(--m-r); --bento-gap: 1px; }
  & .wordmark.nx { --nx-green: var(--m-accent); }

  /* ---------- 2. Глобальные запреты: тени, свечение, стекло, градиенты, радиусы ---------- */
  & *, & *::before, & *::after { box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  & *:not(img, video, canvas, .spinner, .spinner *), & *::before, & *::after { border-radius: var(--m-r) !important; }
  & img, & video, & canvas { border-radius: 0 !important; }
  & dialog.modal, & dialog.term-modal, & .toast, & .mb-bar, & .mb-cats-list { border-radius: var(--m-r-sheet) !important; }
  & dialog.ma-sheet, & dialog.g-sheet, & .ma-cart, &[data-mobile] dialog.modal { border-radius: var(--m-r-sheet) var(--m-r-sheet) 0 0 !important; }
  & body { background: var(--m-bg); color: var(--m-text); font-family: var(--m-font); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
  & body::before, & body::after { display: none; }
  & :is(body, button, input, select, textarea, dialog, .ma, .lw, .g, dialog.ma-sheet, dialog.g-sheet) { font-family: var(--m-font); }
  & :is(.num, td.num, th.num, .ma-num, .co-s, .pay-total, .bento-v, .bento-big, .own-big, .kpi b, .own-kpi b, table.data td, .g-price, .ma-sum, .ma-total b, .ma-card-s, .ct-tname, .cm-p, .key, .pk) { font-variant-numeric: tabular-nums; }
  & :focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
  & ::selection { background: var(--m-sel); color: var(--m-on-sel); }
  & dialog::backdrop { background: var(--m-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
  & a { color: var(--m-text); text-decoration-color: var(--m-track); }
  & a:hover { color: var(--m-text); text-decoration-color: var(--m-text); }
  & ::-webkit-scrollbar-thumb { background: var(--m-track); }
  & * { scrollbar-color: var(--m-track) transparent; }

  /* ---------- 3. Общие компоненты (Офис, окна кассы, телефоны в бэк-офисе) ---------- */
  & .btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--m-track); background: transparent; color: var(--m-text); font-weight: 600; font-size: 14px; letter-spacing: 0; transform: none; }
  & .btn:hover { background: var(--m-raised); border-color: var(--m-track); color: var(--m-text); }
  & .btn:active { background: var(--m-raised); transform: none; }
  & .btn[disabled], & .btn:disabled { background: transparent; border-color: var(--m-line); color: var(--m-dis); opacity: 1; }
  & .btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
  & .btn-lg, & .btn-xl { min-height: 52px; font-size: 16px; }
  & .btn-icon { width: 44px; padding: 0; }
  & .btn-sm.btn-icon { width: 36px; }
  & .btn-ghost, & .btn-ghost:hover { border-color: transparent; background: transparent; }
  & .btn-ghost:hover { background: var(--m-raised); }
  & :is(.btn-primary, #pay-go, .btn-primary:hover, #pay-go:hover) { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; letter-spacing: 0; }
  & :is(.btn-primary, #pay-go):is([disabled], :disabled) { background: var(--m-raised); border-color: var(--m-raised); color: var(--m-dis); }
  & .btn-danger, & .btn-danger:hover { background: transparent; border-color: var(--m-danger); color: var(--m-danger); }
  & .btn-danger-solid, & .btn-danger-solid:hover { background: var(--m-danger); border-color: var(--m-danger); color: var(--m-on-danger); font-weight: 700; }
  & .btn-dark { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .btn-excel { border-color: var(--m-track); }

  & .input, & select.input, & textarea.input, & .field input:not([type="checkbox"], [type="radio"]), & .field select, & .field textarea {
    min-height: 44px; border: 1px solid var(--m-track); background: var(--m-bg); color: var(--m-text); font-family: var(--m-font); }
  & .input:focus, & select.input:focus, & textarea.input:focus { outline: none; border-color: var(--m-text); background: var(--m-bg); }
  & .input::placeholder, & textarea::placeholder, & input::placeholder { color: var(--m-text-3); }
  & select option { background: var(--m-surface); color: var(--m-text); }
  & .field > span, & .field > label, & label.lbl, & .lbl, & legend { color: var(--m-text-2); font-weight: 500; font-size: 13px; }
  & input[type="checkbox"]:not(.switch, [role="switch"]), & input[type="radio"] { accent-color: var(--m-sel); }
  & :is(.check, .field, .filters, .mb-filters, label) > input[type="checkbox"]:not(.switch, [role="switch"]) {
    appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--m-text-3); background: transparent; display: inline-grid; place-items: center; vertical-align: middle; cursor: pointer; }
  & :is(.check, .field, .filters, .mb-filters, label) > input[type="checkbox"]:not(.switch, [role="switch"]):checked {
    border-color: var(--m-sel); background: var(--m-sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat; }
  & .check input { accent-color: var(--m-sel); }

  /* квадратный переключатель вместо iOS-«пилюли» */
  & .ios-switch, & .setting-check input[type="checkbox"], & input[type="checkbox"].switch, & .main[data-page="settings"] .check input[type="checkbox"] {
    width: 44px; height: 24px; padding: 2px; border: 1px solid var(--m-track); background: var(--m-bg); }
  & .ios-switch > span, & .setting-check input[type="checkbox"]::after, & input[type="checkbox"].switch::after, & .main[data-page="settings"] .check input[type="checkbox"]::after {
    width: 18px; height: 18px; background: var(--m-text-3); }
  & .setting-check input[type="checkbox"]::after, & input[type="checkbox"].switch::after, & .main[data-page="settings"] .check input[type="checkbox"]::after { top: 2px; left: 2px; }
  & .ios-switch[aria-checked="true"], & .setting-check input[type="checkbox"]:checked, & input[type="checkbox"].switch:checked, & .main[data-page="settings"] .check input[type="checkbox"]:checked {
    background: var(--m-sel); border-color: var(--m-sel); }
  & .ios-switch[aria-checked="true"] > span, & .setting-check input[type="checkbox"]:checked::after, & input[type="checkbox"].switch:checked::after, & .main[data-page="settings"] .check input[type="checkbox"]:checked::after {
    background: var(--m-on-sel); transform: translateX(20px); }
  & .setting-check { border-top: 1px solid var(--m-line); }

  /* круглые «галочки» таблиц — квадратные */
  & .mb-t input[type="checkbox"], & table.data input[type="checkbox"]:not(.switch) {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--m-text-3); background: transparent; display: inline-grid; place-items: center; vertical-align: middle; cursor: pointer; }
  & .mb-t input[type="checkbox"]:checked, & table.data input[type="checkbox"]:not(.switch):checked {
    border-color: var(--m-sel); background: var(--m-sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat; }
  & .mb-t input[type="checkbox"]:indeterminate { border-color: var(--m-sel); background: var(--m-sel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") center / 10px no-repeat; }

  /* сегменты — в рамке-линии, выбранный белый */
  & .seg, & .ma-seg, & .ma .theme-seg, & .g-seg, & .theme-seg { gap: 0; padding: 0; border: 1px solid var(--m-track); background: transparent; }
  & .seg button, & .ma-seg button, & .ma .theme-seg button, & .g-seg button, & .theme-seg button { min-height: 36px; height: auto; border: 0; background: transparent; color: var(--m-text-2); font-weight: 600; font-size: 13px; }
  & .seg button + button, & .ma-seg button + button, & .g-seg button + button, & .theme-seg button + button { border-left: 1px solid var(--m-track); }
  & :is(.seg, .ma-seg, .theme-seg, .g-seg) button:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--m-sel); color: var(--m-on-sel); font-weight: 700; }

  /* вкладки разделов — текст с белой чертой под выбранной */
  & .tabs { gap: 0; padding: 0; margin-bottom: 20px; border-bottom: 1px solid var(--m-line); }
  & .tab { height: 44px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--m-text-2); font-size: 14px; font-weight: 600; }
  & .tab:hover { background: transparent; color: var(--m-text); }
  & .tab[aria-selected="true"], & .tab[aria-current="page"] { background: transparent; color: var(--m-text); border-bottom-color: var(--m-text); }

  /* панели: без «карточек» — поверхность без тени, разделение линиями */
  & :is(.panel, .table-wrap, .ins-card, .own-hero, .own-card, .own-kpi > div, .kpi-row .kpi, .crep-tape-wrap, .fs, .hint-box, .ch-card, .pg-tile, .calc > div, .ph-prev, .ls-card, .ui-card) {
    background: var(--m-surface); border: 1px solid var(--m-line); }
  & .panel { padding: 20px; }
  & .panel .panel, & .panel .table-wrap { background: transparent; }
  & .hint-box svg { color: var(--m-text-2); }
  & .sub-h { color: var(--m-text-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  & h1, & h2, & h3 { letter-spacing: -.01em; }

  /* таблицы — строки 48 с линиями */
  & table.data { font-size: 14px; }
  & table.data th { background: var(--m-bg); color: var(--m-text-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px; border-bottom: 1px solid var(--m-line); }
  & .panel table.data th, & .table-wrap table.data th { background: var(--m-surface); }
  & table.data td { padding: 12px; height: 48px; border-bottom: 1px solid var(--m-line); color: var(--m-text); }
  & table.data tfoot td { background: var(--m-raised); border-top: 1px solid var(--m-track); }
  & table.data tr.clickable:hover td, & .mb-t tbody tr:hover td { background: var(--m-raised); }
  & table.data tr.row-sel td, & .mb-t tr.row-sel td { background: var(--m-raised); }
  & table.data tr.row-low td, & table.data tr.row-neg td { background: transparent; }
  & table.data tr.row-neg td:first-child, & table.data tr.row-low td:first-child { border-left: 2px solid var(--m-danger); }
  & table.data tr.row-low td:first-child { border-left-color: var(--m-text); }
  & table.data tr.row-muted td { color: var(--m-text-3); }
  & .neg, & .row-neg .num { color: var(--m-danger); }

  /* метки и плашки */
  & .badge { padding: 2px 8px; border: 1px solid var(--m-track); background: transparent; color: var(--m-text-2); font-size: 12px; font-weight: 600; }
  & .badge.ok, & .badge.info { border-color: var(--m-text-3); color: var(--m-text); }
  & .badge.warn { border-color: var(--m-text); color: var(--m-text); }
  & .badge.danger { border-color: var(--m-danger); color: var(--m-danger); }
  & .alert { border: 1px solid var(--m-track); background: var(--m-surface); color: var(--m-text); }
  & .alert.warn { border-color: var(--m-text-3); background: var(--m-surface); color: var(--m-text); }
  & .alert.danger { border-color: var(--m-danger); background: var(--m-surface); color: var(--m-text); }
  & .alert::before, & .alert.warn::before, & .alert.danger::before { content: ""; width: 3px; height: 16px; background: var(--m-text); color: transparent; }
  & .alert.danger::before { background: var(--m-danger); }
  & .alerts .alert { min-height: 40px; border-color: var(--m-line); }
  & code, & .srv-url code { background: var(--m-raised); color: var(--m-text); border: 1px solid var(--m-line); }
  & .tag, & .tag.warn { background: transparent; border: 1px solid var(--m-track); color: var(--m-text); }
  & .pin-dup { background: var(--m-surface); border: 1px solid var(--m-text-3); color: var(--m-text); }
  & .spinner { border-color: var(--m-track); border-top-color: var(--m-text); }

  /* окна */
  & dialog.modal { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); }
  & .modal-head h2 { font-family: var(--m-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
  & .modal-foot { border-top: 1px solid var(--m-line); }
  & .toast { background: var(--m-raised); color: var(--m-text); border: 1px solid var(--m-track); }
  & .toast.ok::before { background: var(--m-accent); }
  & .toast.error { background: var(--m-danger); color: var(--m-on-danger); border-color: var(--m-danger); }

  /* знак продукта */
  & .wordmark.nx .nx-p { opacity: .55; }
  & .wordmark span { color: var(--m-text-2); }

  /* ---------- 4. Офис (бэк-офис) ---------- */
  &[data-area="office"] .shell, & .shell:not(.terminal) { padding: 0; gap: 0; column-gap: 0; row-gap: 0; }
  @media (min-width: 1100px) {
    & .shell:not(.terminal) { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: 64px 1fr; }
    & .shell:not(.terminal) .topbar { grid-column: 1 / -1; grid-row: 1; top: 0; }
    & .shell:not(.terminal) .sidenav { grid-column: 1; grid-row: 2; top: 64px; height: calc(100dvh - 64px); }
    & .shell:not(.terminal) .main { grid-column: 2; }
  }
  & .shell:not(.terminal) .topbar { height: 64px; padding: 0 16px 0 20px; border: 0; border-bottom: 1px solid var(--m-line); background: var(--m-bg); z-index: 30; }
  & .shell:not(.terminal) .sidenav { padding: 16px 12px 12px; border: 0; border-right: 1px solid var(--m-line); background: var(--m-bg); }
  @media (max-width: 1099px) { & .shell:not(.terminal) .sidenav { top: 0; height: 100dvh; background: var(--m-surface); } }
  & .shell.nav-open .nav-scrim { background: var(--m-scrim); }
  & .shell:not(.terminal) .main { padding: 28px 32px 48px; max-width: 1480px; }
  @media (max-width: 760px) { & .shell:not(.terminal) .main { padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); } }
  & .brand, & .brand .wordmark, & .who b { color: var(--m-text); }
  & .who span, & .brand .wordmark span { color: var(--m-text-2); }
  & .brand-sep { background: var(--m-line); }
  & .brand-text { font-family: var(--m-display); font-weight: 800; color: var(--m-text); }
  & .navlink, & .nav-group > button { height: 40px; min-height: 40px; padding: 0 12px; gap: 12px; color: var(--m-text-2); font-size: 14px; font-weight: 500; background: transparent; }
  & .navlink svg, & .nav-group > button svg { width: 18px; height: 18px; color: var(--m-text-3); }
  & .navlink:hover, & .nav-group > button:hover { background: var(--m-surface); color: var(--m-text); }
  & .navlink[aria-current="page"] { background: var(--m-sel); color: var(--m-on-sel); font-weight: 600; }
  & .navlink[aria-current="page"] svg { color: var(--m-on-sel); }
  & .nav-group > button.has-current, & .nav-group > button.has-current svg { color: var(--m-text); font-weight: 600; }
  & .nav-sub { margin-left: 20px; padding-left: 10px; border-left: 1px solid var(--m-line); }
  & .nav-sub .navlink { height: 36px; min-height: 36px; font-size: 13px; }
  & .nav-sub .navlink[aria-current="page"]::before { display: none; }
  & .nav-foot { margin-top: auto; padding: 12px 4px 0; background: transparent; border-top: 1px solid var(--m-line); }
  & .nav-ava { background: var(--m-raised); color: var(--m-text); }
  & .nav-me small { color: var(--m-text-2); }
  & .ui-pick-sel { min-height: 36px; border: 1px solid var(--m-track); background: var(--m-bg); color: var(--m-text); }
  & .page-head { margin-bottom: 20px; }
  & .page-head h1, & .own-h1 { font-family: var(--m-display); font-weight: 800; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; color: var(--m-text); }
  & .main h2 { font-weight: 700; }
  /* ленты предупреждений сверху: строки, без цветных кругов */
  & .alerts { gap: 8px; }
  & :is(.alerts, .own-alerts) :is(button, li, a, .alert) { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & :is(.alerts, .own-alerts) :is(i, .dot, svg) { color: var(--m-text-2); }
  & .alerts :is(.dot, i)::before, & .alerts .dot { background: var(--m-text); }
  /* меню (массовые действия, фото блюд) */
  & .mb-bar { background: var(--m-raised); color: var(--m-text); border: 1px solid var(--m-track); }
  & .mb-bar .btn { background: transparent; border-color: transparent; }
  & .mb-bar .btn-danger { color: var(--m-danger); }
  & .mb-cats-list { background: var(--m-raised); border: 1px solid var(--m-track); }
  & .mb-ph, & .m-ph { border: 1px solid var(--m-line); }
  & .sale-note.stop { color: var(--m-danger); }
  /* отчёты */
  & .crep-btn { background: transparent; border: 1px solid var(--m-track); color: var(--m-text); }
  & .crep-btn[aria-pressed="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .own-chart .bar, & .bar-hit + .bar, & svg .bar { fill: var(--m-accent); }
  & .lg-now { background: var(--m-accent); }
  & .ledger li { border-bottom-color: var(--m-line); }
  & .ledger li.total .val { box-shadow: none; color: var(--m-text); }
  & .hero-num, & .own-big { font-family: var(--m-display); font-weight: 800; letter-spacing: -.02em; }
  & .guide-n { background: var(--m-sel); color: var(--m-on-sel); }
  & .chart-tip { background: var(--m-raised); color: var(--m-text); border: 1px solid var(--m-track); }
  & .olap-t.heat tbody td[style*="--h"] { background: rgba(43, 212, 125, calc(var(--h) * .45)); }
  & .swatch { border: 1px solid var(--m-line); }
  & .c-cash, & .c-card, & .c-transfer { color: var(--m-text); }

  /* ---------- 5. Bento («Панель владельца», «Главная» владельца): линии и уровни серого ---------- */
  & .bento { gap: 1px; background: var(--m-line); border: 1px solid var(--m-line); }
  & .bento-tile { padding: 16px 20px; background: var(--m-surface); color: var(--m-text); }
  & .bento-tap:hover { background: var(--m-raised); }
  & .bento-xl { background: var(--m-bg); }
  & .bento-l { color: var(--m-text-2); font-size: 13px; font-weight: 500; }
  & .bento-v { font-family: var(--m-font); font-weight: 700; letter-spacing: -.02em; color: var(--m-text); }
  & .bento-xl .bento-v, & .bento-big { font-family: var(--m-display); font-weight: 800; color: var(--m-accent-text); letter-spacing: -.03em; }
  & .bento-sub { color: var(--m-text-3); font-size: 12px; }
  & .bento-spark { color: var(--m-accent-text); }
  & .bento-list li { border-bottom: 1px solid var(--m-line); padding-bottom: 6px; }
  & .bento-list li:last-child { border-bottom: 0; }

  /* ---------- 6. Касса (раскладка терминала .ct / .co / .cm) ---------- */
  &[data-term] body { background: var(--m-bg); }
  & .ct, & .co, & .cm { color: var(--m-text); font-family: var(--m-font); }
  & .ct-top { background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
  & .ct-ic { color: var(--m-text); border-left: 1px solid var(--m-line); background: transparent; }
  & .ct-ic:hover { background: var(--m-surface); }
  & .ct-who b, & .ct-user b { color: var(--m-text); }
  & .ct-who span, & .ct-user span, & .ct-who small { color: var(--m-text-2); }
  & .ct-warn, & .shift-over { color: var(--m-text) !important; text-decoration: underline; text-decoration-color: var(--m-danger); text-underline-offset: 3px; }
  & .ct-halls, & .ct-side { background: var(--m-bg); border-right: 1px solid var(--m-line); }
  & .ct-hall, & .ct-dept { background: transparent; color: var(--m-text); border-bottom: 1px solid var(--m-line); border-left: 0; }
  & .ct-hall::before, & .ct-dept::before { display: none; }
  & .ct-hall[aria-pressed="true"], & .ct-side .ct-dept[aria-pressed="true"]:not(.open) { background: var(--m-sel); color: var(--m-on-sel); }
  & .ct-side .ct-dept.open[aria-pressed="true"] { background: transparent; color: var(--m-text); }
  & .ct-subs { background: transparent; }
  & .ct-grid, & .ct-tables { background: var(--m-bg); gap: 8px; padding: 8px; }
  & .ct-table { margin: 0; background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); }
  & .ct-table.free:hover { background: var(--m-raised); }
  & .ct-table.busy { background: var(--m-sel); color: var(--m-on-sel); border-color: var(--m-sel); }
  & .ct-table.busy :is(.ct-tname, .ct-tmin, small, span, b) { color: var(--m-on-sel); }
  & .ct-table.void { background: transparent; border-color: transparent; }
  & .ct-tname { font-weight: 700; }
  & .ct-plus { background: var(--m-raised); color: var(--m-text); }
  & .ct-bar { background: var(--m-bg); border-top: 1px solid var(--m-line); }
  & .cb { background: transparent; color: var(--m-text); border-right: 1px solid var(--m-line); font-weight: 600; }
  & .cb:hover:not([disabled]) { background: var(--m-surface); }
  & .cb[disabled] { color: var(--m-dis); }
  & .cb.hl, & .cb.hl:hover:not([disabled]) { background: var(--m-raised); color: var(--m-text); }
  & .cb.pay, & .cb.pay:hover:not([disabled]) { background: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; }
  & .cb.pay[disabled] { background: var(--m-raised); color: var(--m-dis); }
  & .cb-n, & .ct-n, & .cnt-badge { background: var(--m-text); color: var(--m-bg); font-weight: 700; }
  /* заказ */
  & .ct-top-order, & .co-head { background: var(--m-surface); color: var(--m-text); border-bottom: 1px solid var(--m-line); }
  & .ct-gtab { background: var(--m-bg); color: var(--m-text-2); border-right: 1px solid var(--m-line); }
  & .ct-gtab[aria-pressed="true"], & .ct-gtab[aria-selected="true"], & .ct-gtab.on { background: var(--m-sel); color: var(--m-on-sel); }
  & .co-head :is(small, span) { color: var(--m-text-2); }
  & .co-gbar { background: var(--m-raised); color: var(--m-text); border-bottom: 1px solid var(--m-line); }
  & .co-left { background: var(--m-bg); border-right: 1px solid var(--m-line); }
  & .co-lines { background: var(--m-bg); color: var(--m-text); }
  & .co-line { background: transparent; border-bottom: 1px solid var(--m-line); }
  & .co-line:hover { background: var(--m-surface); }
  & .co-line.sel { background: var(--m-surface); outline: 2px solid var(--m-sel); outline-offset: -2px; }
  & .co-n small, & .co-n .co-cmt { color: var(--m-text-2); }
  & .co-n .co-st, & .co-line:not(.sent) .co-st { color: var(--m-text-2); }
  & .co-line:not(.sent) .co-st { color: var(--m-text); font-weight: 600; }
  & .co-n .co-st.st-ready { color: var(--m-accent-text); }
  & .co-n .co-st.st-served { color: var(--m-text-3); }
  & .co-q { color: var(--m-text); }
  & .co-empty, & .co-other { color: var(--m-text-2); background: transparent; }
  & .co-sum { background: var(--m-surface); border-top: 1px solid var(--m-line); }
  & .co-pct, & .co-total { background: var(--m-surface); color: var(--m-text-2); border-right: 1px solid var(--m-line); }
  & .co-pct b, & .co-total b, & .co-sub b { color: var(--m-text); }
  & .co-sub span, & .co-pct span { color: var(--m-text-3); }
  & .co-total b, & .co-tot { font-family: var(--m-display); font-weight: 800; }
  & .co-tools { background: var(--m-bg); border-top: 1px solid var(--m-line); }
  & .co-t { background: transparent; color: var(--m-text); border-right: 1px solid var(--m-line); }
  & .co-t:hover:not([disabled]) { background: var(--m-surface); }
  /* меню */
  & .cm-nav { background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
  & .cm-nb, & .cm-course { background: transparent; color: var(--m-text); border-color: var(--m-line); }
  & .cm-course[aria-pressed="true"]:not([disabled]) { background: var(--m-sel); color: var(--m-on-sel); }
  & .cm-course[disabled], & .cm-course[disabled][aria-pressed="true"] { background: transparent; color: var(--m-dis); }
  & .cm-path { color: var(--m-text); font-weight: 700; }
  & .cm-q { background: var(--m-bg); color: var(--m-text); border: 1px solid var(--m-track); }
  & .cm-grid { background: var(--m-bg); gap: 8px; padding: 8px; }
  & .cm-tile { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); font-weight: 600; }
  & .cm-tile:hover { background: var(--m-raised); }
  & .cm-tile.grp { background: var(--m-raised); border-color: var(--m-track); font-weight: 700; }
  & .cm-tile :is(small, .cm-p) { color: var(--m-text-2); }
  & .cm-tile.grp small { color: var(--m-text-2); }
  & .cm-cell.stopped .cm-tile { background: var(--m-bg); color: var(--m-dis); border-style: dashed; }
  & .cm-stop { background: transparent; color: var(--m-danger); border: 1px solid var(--m-danger); }
  & .cm-cnt { background: var(--m-sel); color: var(--m-on-sel); }
  & .cm-info { border: 1px solid var(--m-track); color: var(--m-text-2); background: transparent; }
  & .cm-empty { color: var(--m-text-2); }
  /* окна кассы */
  & dialog.term-modal { border: 1px solid var(--m-line); }
  & dialog.term-modal :is(.field > label, .field > span, legend, .pay-display label) { color: var(--m-text-2); font-weight: 500; }
  & .pay-sum { background: var(--m-bg); border: 1px solid var(--m-line); }
  & .pay-line { border-bottom: 1px solid var(--m-line); }
  & .pay-line span { color: var(--m-text-2); }
  & .pay-total { font-family: var(--m-display); font-weight: 800; color: var(--m-text); }
  & .pay-line.change b, & .pay-line .change, & .change b { color: var(--m-accent-text); }
  & .pay-m { background: transparent; border: 1px solid var(--m-track); color: var(--m-text); }
  & .pay-m small { color: var(--m-text-2); }
  & .pay-m[aria-checked="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .pay-m[aria-checked="true"] small { color: var(--m-on-sel); }
  & .pay-entry { background: var(--m-bg); border: 1px solid var(--m-track); color: var(--m-text); font-weight: 700; }
  & .pay-notes .note { background: var(--m-raised); border: 1px solid var(--m-raised); color: var(--m-text); font-weight: 600; }
  & .pay-notes .note:hover { border-color: var(--m-track); }
  & .numpad .key { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); font-weight: 500; }
  & .numpad .key:hover { background: var(--m-raised); }
  & .menu-grid .act { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .menu-grid .act svg { color: var(--m-text-2); }
  & .menu-grid .act.pay { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-on-accent); }
  & .cx-r span, & .chip-radio span { background: transparent; border: 1px solid var(--m-track); color: var(--m-text); }
  & .cx-r input:checked + span, & .chip-radio input:checked + span { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .cx-pad .pk, & .pk { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .pk:hover { background: var(--m-raised); }
  & .pct-grid .btn[aria-pressed="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .out-big { font-family: var(--m-display); font-weight: 800; }
  & .kfail { background: var(--m-danger); color: var(--m-on-danger); border: 0; }
  & .kfail-ic { background: var(--m-on-danger); color: var(--m-danger); }
  & .kfail-btn { background: var(--m-on-danger); color: var(--m-text); }
  & .kfail-inline { background: transparent; color: var(--m-danger); border: 1px solid var(--m-danger); }
  & .sl-row { background: var(--m-surface); border-bottom: 1px solid var(--m-line); }
  & .sl-row.on { background: var(--m-surface); border-left: 2px solid var(--m-danger); }
  & .sl-row.on .sl-name b { color: var(--m-text); text-decoration-color: var(--m-danger); }
  & .sl-name small { color: var(--m-text-2); }
  & .sl-btn { border: 1px solid var(--m-danger); background: transparent; color: var(--m-danger); }
  & .sl-btn.off { border-color: var(--m-sel); background: var(--m-sel); color: var(--m-on-sel); }

  /* ---------- 7. Кухня ---------- */
  & .kitchen-head h1 { font-family: var(--m-display); font-weight: 800; color: var(--m-text); }
  & .kitchen-grid { gap: 8px; }
  & .k-card { background: var(--m-surface); border: 1px solid var(--m-line); }
  & .k-card header { background: var(--m-raised); color: var(--m-text); border-bottom: 1px solid var(--m-line); }
  & .k-card.warn { border-color: var(--m-text-3); }
  & .k-card.late { border-color: var(--m-danger); }
  & .k-timer { background: var(--m-bg); color: var(--m-text); border: 1px solid var(--m-track); }
  & .k-card.warn .k-timer { background: var(--m-sel); color: var(--m-on-sel); border-color: var(--m-sel); }
  & .k-card.late .k-timer { background: var(--m-danger); color: var(--m-on-danger); border-color: var(--m-danger); }
  & .k-item { border-bottom: 1px solid var(--m-line); }
  & .k-item.st-ready { color: var(--m-text-3); }
  & .k-next { background: transparent; color: var(--m-text); border: 1px solid var(--m-track); }
  & .k-next:hover { background: var(--m-raised); }
  & .k-item.st-ready .k-next { background: var(--m-accent); color: var(--m-on-accent); }
  & .cl-item.done .cl-box { background: var(--m-sel); color: var(--m-on-sel); }

  /* ---------- 9. Подключение телефона, вход «Официант»/«Владелец» ---------- */
  & .enr { background: var(--m-bg); color: var(--m-text); }
  & .enr { place-items: center start; padding-left: 20px; padding-right: 20px; }
  & .enr-card, & .qrl .enr-card { width: min(440px, 100%); justify-items: stretch; align-items: start; text-align: left; padding: 0; gap: 16px; background: transparent; border: 0; }
  & .enr-card > img, & .qrl .enr-card > img { justify-self: start; }
  & .enr-card.done { text-align: left; }
  & .qrl-help { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text-2); }
  & .enr-card h1 { font-family: var(--m-display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; text-align: left; }
  & .enr-sub { color: var(--m-text-2); text-align: left; }
  & .qrl-logo { width: 72px; height: 72px; padding: 0; background: transparent; }
  & .qrl-logo.nodex { background: var(--m-bg); padding: 0; }
  & .enr-go { width: 100%; min-height: 52px; background: var(--m-accent); color: var(--m-on-accent); border: 0; font-family: var(--m-display); font-weight: 800; }
  & .enr-go.alt, & .qrl-btn.alt { background: transparent; color: var(--m-text); border: 1px solid var(--m-track); font-family: var(--m-font); font-weight: 600; }
  & .enr-go[disabled] { background: var(--m-raised); color: var(--m-dis); }
  & .enr-input { background: var(--m-bg); border: 1px solid var(--m-track); color: var(--m-text); }
  & .enr-bad { color: var(--m-danger); }

  /* ---------- 10. Официант (.ma) ---------- */
  &[data-mobile] body { background: var(--m-bg); }
  & .ma { font-family: var(--m-font); letter-spacing: 0; }
  & .ma :focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
  & .ma-head { padding-left: 20px; padding-right: 20px; }
  & .ma-lt { font-family: var(--m-display); font-weight: 800; font-size: 34px; line-height: 40px; letter-spacing: -.02em; }
  & .ma-lt.sm { font-size: 28px; line-height: 34px; }
  & .ma-sub { color: var(--m-text-2); }
  & .ma-top { background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
  & .ma-round, & .ma-round.sm { width: 44px; height: 44px; background: transparent; border: 1px solid var(--m-line); color: var(--m-text); }
  & .ma-round[disabled] { opacity: 1; color: var(--m-dis); }
  & .ma-back, & .ma-link { color: var(--m-text); }
  & .ma-pill { background: transparent; border: 1px solid var(--m-track); color: var(--m-text); }
  & .ma-search, & .g-search { height: 44px; background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text-3); }
  & .ma-search:focus-within, & .g-search:focus-within { border-color: var(--m-text); }
  & .ma-seg button, & .ma .theme-seg button { height: 36px; }
  & .ma-sec { padding: 24px 20px 0; gap: 8px; }
  & .ma-cap { padding-left: 0; color: var(--m-text-3); font-size: 12px; letter-spacing: .06em; }
  & .ma-cap.danger { color: var(--m-danger); }
  & .ma-empty { color: var(--m-text-2); text-align: left; margin: 32px 20px; }
  & .ma-sec .ma-empty { margin: 16px 0; }
  /* списки и карточки — строки с линиями, без «карточек» */
  & .ma-cards { gap: 0; border-top: 1px solid var(--m-line); }
  & .ma-card { padding: 12px 0; background: transparent; border-bottom: 1px solid var(--m-line); }
  & .ma-ic, & .ma-ic.ok, & .ma-ic.plain { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .ma-card-m { color: var(--m-text-2); }
  & .ma-chip, & .ma-chip.ok { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid var(--m-track); background: transparent; color: var(--m-text-2); font-size: 12px; }
  & .ma-chip.warn { border-color: var(--m-text); color: var(--m-text); }
  & .ma-chip.danger { border-color: var(--m-danger); color: var(--m-danger); }
  & .ma-group { background: transparent; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); }
  & .ma-group > li + li, & .ma-group > .ma-li + .ma-li { border-top: 1px solid var(--m-line); }
  & .ma-li { min-height: 52px; padding: 12px 0; }
  & .ma-li-t small { color: var(--m-text-2); }
  & .ma-li-t small.cm { color: var(--m-text); }
  & .ma-li-link svg { color: var(--m-text-3); }
  & .ma-ava { background: var(--m-raised); }
  /* категории официанта: строки-плитки без цветной заливки; цвет категории — узкая полоса слева (ориентир, не украшение) */
  /* категории официанта: список строк с линиями вместо цветных карточек (цвет категории не используем — один акцент) */
  & .iw-cats { display: block; padding: 8px 20px calc(var(--sab) + 96px); }
  & .iw-cat { width: 100%; min-height: 60px; padding: 0 28px 0 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
    background: transparent; border: 0; border-bottom: 1px solid var(--m-line); overflow: visible; }
  & .iw-cat:first-child { border-top: 1px solid var(--m-line); }
  & .iw-cat::before { display: none; }
  & .iw-cat::after { content: ""; display: block; position: absolute; inset: auto 4px auto auto; top: 50%; width: 8px; height: 8px; margin-top: -5px; background: none;
    border-right: 2px solid var(--m-text-3); border-bottom: 2px solid var(--m-text-3); border-radius: 0 !important; transform: rotate(-45deg); }
  & .iw-cat:active { background: var(--m-surface); transform: none; }
  & .iw-cat b { font-size: calc(17px * var(--fs)); font-weight: 600; }
  & .iw-cat small { color: var(--m-text-3); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  & .iw-head { padding-left: 20px; padding-right: 20px; }
  & .iw-btn, & .iw-ic { height: 44px; background: transparent; border: 1px solid var(--m-line); color: var(--m-text); }
  & .iw-ic { width: 44px; }
  & .iw-ic[aria-pressed="true"] { background: var(--m-sel); color: var(--m-on-sel); border-color: var(--m-sel); }
  & .iw-btn[aria-current="page"] { background: var(--m-raised); opacity: 1; color: var(--m-text-3); }
  & .iw-where b { font-family: var(--m-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
  & .iw-where span { color: var(--m-text-2); }
  & .iw-cart { left: 20px; right: 20px; height: 56px; background: var(--m-accent); color: var(--m-on-accent); }
  & .iw-cart-l b { font-family: var(--m-display); font-weight: 800; }
  & .iw-cart-l i { background: var(--m-on-accent); color: var(--m-accent-text); }
  & .iw-cart-sum { font-family: var(--m-display); font-weight: 800; }
  & .iw-cart[disabled], & .iw-cart.empty { background: var(--m-raised); color: var(--m-text-2); }
  /* блюда */
  & .ma-chips { gap: 8px; padding: 12px 20px 4px; }
  & .ma-chips button, & .ow-chips button, & .g-chips button { height: 32px; padding: 0 12px; border: 1px solid var(--m-track); background: transparent; color: var(--m-text); font-weight: 600; }
  & .ma-chips button[aria-selected="true"], & .ow-chips button[aria-pressed="true"], & .g-chips button[aria-pressed="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .ma-grid { gap: 8px; padding: 12px 20px; }
  & .ma-dish { background: var(--m-surface); border: 1px solid var(--m-line); }
  & .ma-dp { color: var(--m-text); }
  & .ma-dplus { width: 32px; height: 32px; background: var(--m-raised); color: var(--m-text); }
  & .ma-cnt { background: var(--m-sel); color: var(--m-on-sel); }
  & .ma-rem { color: var(--m-text); }
  & .ma-dish.stopped { opacity: 1; background: var(--m-bg); color: var(--m-dis); border-style: dashed; }
  /* плавающие кнопки и корзина */
  & .ma-new { height: 52px; padding: 0 20px 0 8px; background: var(--m-accent); color: var(--m-on-accent); border: 0; right: 20px; font-family: var(--m-display); font-weight: 800; }
  & .ma-new-plus, & .ma .ma-new-plus { width: 36px; height: 36px; background: var(--m-on-accent); color: var(--m-accent-text); }
  & .ma-cartbar { left: 20px; right: 20px; background: var(--m-raised); border: 1px solid var(--m-track); }
  & .ma-cb-bag { background: var(--m-surface); }
  & .ma-cb-bag i { background: var(--m-sel); color: var(--m-on-sel); }
  & .ma-cb-t small { color: var(--m-text-2); }
  & .ma .ma-cb-sum { background: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; }
  & .ma-cart { background: var(--m-surface); border-top: 1px solid var(--m-line); }
  & .ma-cart .ma-group { background: transparent; }
  & .ma-sh-head h2 { font-family: var(--m-display); font-weight: 800; font-size: 20px; }
  & .ma-step { background: transparent; border: 1px solid var(--m-track); height: 36px; }
  & .ma-step button { height: 34px; }
  & .ma-step i { background: var(--m-track); width: 1px; }
  & .ma-swipe-del { background: var(--m-danger); color: var(--m-on-danger); }
  & .ma-cmt { color: var(--m-text); }
  & .ma-st.ok { color: var(--m-accent-text); }
  & .ma-st.warn { color: var(--m-text); }
  & .ma-x, & .ma-foot { color: var(--m-text-2); }
  & .ma-sendbar { background: var(--m-bg); border-top: 1px solid var(--m-line); padding-left: 20px; padding-right: 20px; }
  & .ma-total span { color: var(--m-text-2); }
  & .ma-total b { font-family: var(--m-display); font-weight: 800; }
  & .ma .ma-send:not(.ghost), & .ma-send { height: 52px; background: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; }
  & .ma-send i { background: var(--m-on-accent); color: var(--m-accent-text); }
  & .ma .ma-send.ghost { background: transparent; color: var(--m-text); border: 1px solid var(--m-track); font-family: var(--m-font); font-weight: 600; }
  & .ma-send[disabled] { opacity: 1; background: var(--m-raised); color: var(--m-dis); }
  /* нижние вкладки и листы */
  & .ma-tabs { background: var(--m-bg); border-top: 1px solid var(--m-line); }
  & .ma-tabs button { color: var(--m-text-3); font-size: 11px; }
  & .ma-tabs button[aria-current="page"] { color: var(--m-text); }
  & dialog.ma-sheet { background: var(--m-surface); color: var(--m-text); border-top: 1px solid var(--m-line); font-family: var(--m-font); }
  & dialog.ma-sheet::backdrop { background: var(--m-scrim); }
  & .ma-acts { border-top: 1px solid var(--m-line); }
  & .ma-act { min-height: 52px; background: transparent; color: var(--m-text); text-align: left; padding: 0 4px; font-weight: 500; }
  & .ma-act + .ma-act { border-top: 1px solid var(--m-line); }
  & .ma-act.danger { color: var(--m-danger); }
  & .ma-legend i.free { background: var(--m-surface); border: 1px solid var(--m-track); }
  & .ma-legend i.busy { background: var(--m-sel); }
  & .ma-tgrid { gap: 8px; }
  & .ma-table { background: var(--m-bg); border: 1px solid var(--m-line); }
  & .ma-table small { color: var(--m-text-2); }
  & .ma-table.busy { background: var(--m-sel); color: var(--m-on-sel); border-color: var(--m-sel); }
  & .ma-table.busy small { color: var(--m-on-sel); opacity: 1; }
  &[data-mobile] dialog.modal::before { background: var(--m-track); }

  /* ---------- 11. Владелец (.ow) ---------- */
  & .ow-login { background: var(--m-bg); }
  & .ow-lg { justify-items: stretch; text-align: left; width: min(390px, 100%); padding-left: 20px; padding-right: 20px; }
  & .ow-mark { width: 48px; height: 48px; padding: 0; background: transparent; }
  & .ow-lg h1 { font-family: var(--m-display); font-weight: 800; font-size: 34px; }
  & .ow-sub { color: var(--m-text-2); }
  & .ow-dots { gap: 10px; }
  & .ow-dots i { width: 14px; height: 14px; border: 1.5px solid var(--m-text-3); }
  & .ow-dots i.on { background: var(--m-sel); border-color: var(--m-sel); }
  & .ow-err { color: var(--m-danger); }
  & .ow-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  & .ow-k { width: auto; height: 64px; background: var(--m-surface); border: 1px solid var(--m-line); font-size: 28px; font-weight: 500; }
  & .ow-k.fn { background: transparent; border-color: transparent; }
  & .ow-k:active { background: var(--m-sel); color: var(--m-on-sel); }
  & .ow-go { height: 52px; background: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; }
  & .ow-go[disabled] { opacity: 1; background: var(--m-raised); color: var(--m-text-3); }
  & .ow-link { color: var(--m-text); }
  & .ow-bell i { background: var(--m-danger); color: var(--m-on-danger); }
  & .ow-hero, & .ow-kpi, & .ow-chart { background: var(--m-surface); border: 1px solid var(--m-line); }
  & .ow-hero b { font-family: var(--m-display); font-weight: 800; color: var(--m-accent-text); }
  & .ow-hero span, & .ow-hero small, & .ow-kpi span, & .ow-kpi small, & .ow-col small { color: var(--m-text-2); }
  & .ow-kpi.bad b, & .ow-r small, & .ma-num.neg, & .ow small.neg, & .ow-d.down { color: var(--m-danger); }
  & .ow-d.up, & .ow small.pos, & .ow .ow-kpi b.pos { color: var(--m-accent-text); }
  & .ow-bar { background: var(--m-accent); }
  & .ow-wk { background: var(--m-text); opacity: .6; }
  & .ow-n { background: var(--m-raised); }
  & .ow-tb { background: var(--m-sel); color: var(--m-on-sel); }
  & .ow-pad-x { padding: 0 20px; gap: 8px; }
  & .ow-alert { border-left: 2px solid var(--m-text); }
  & .ow-tabs button[aria-current="page"] { color: var(--m-text); }
  & .bento .ow-chart { border: 0; background: transparent; }

  /* ---------- 12. QR-меню гостя ---------- */
  & .g { color: var(--m-text); }
  & .g-head { padding-left: 20px; padding-right: 20px; }
  & .g-logo { background: transparent; padding: 0; }
  & .g-title span { color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .g-lt { margin: 4px 0 0; font-family: var(--m-display); font-weight: 800; font-size: 34px; line-height: 40px; letter-spacing: -.02em; }
  & .g-round { width: 44px; height: 44px; background: transparent; border: 1px solid var(--m-line); }
  & .g-seg button { min-width: 44px; height: 36px; }
  & .g-chips { padding: 12px 20px; background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
  & .g-main { padding: 0 20px; gap: 28px; }
  & .g-sec h2 { margin: 20px 0 8px; font-family: var(--m-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
  & .g-cdesc { margin: -4px 0 8px; color: var(--m-text-2); }
  & .g-list { gap: 0; border-top: 1px solid var(--m-line); }
  & .g-item { padding: 12px 0; gap: 16px; background: transparent; border-bottom: 1px solid var(--m-line); }
  & .g-ph { width: 88px; height: 88px; background-color: var(--m-surface); }
  & .g-ph.none { display: none; }
  & .g-item:has(.g-ph.none) .g-it { min-height: 44px; padding: 0; }
  & .g-it small { color: var(--m-text-2); }
  & .g-price { color: var(--m-text); font-weight: 700; }
  & .g-bar { gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: 640px; margin: 0 auto;
    background: var(--m-bg); border: 0; border-top: 1px solid var(--m-line); }
  & .g-call { min-height: 52px; background: var(--m-accent); color: var(--m-on-accent); font-family: var(--m-display); font-weight: 800; }
  & .g-call.alt { background: transparent; color: var(--m-text); border: 1px solid var(--m-track); font-family: var(--m-font); font-weight: 600; }
  & .g-call[disabled], & .g-call.alt[disabled] { background: transparent; color: var(--m-dis); border: 1px solid var(--m-line); }
  & .g-closed { font-size: 15px; padding: 10px 0; background: transparent; color: var(--m-text-2); text-align: left; font-weight: 500; border-bottom: 1px solid var(--m-line); }
  & .g-toast { background: var(--m-raised); color: var(--m-text); border: 1px solid var(--m-track); }
  & .g-toast.bad { background: var(--m-danger); color: var(--m-on-danger); }
  & .g-pill { background: var(--m-accent); color: var(--m-on-accent); }
  & dialog.g-sheet { background: var(--m-surface); color: var(--m-text); }
  & dialog.g-sheet::backdrop { background: var(--m-scrim); }
  & .g-fail img { background: transparent; padding: 0; }

  /* ---------- 12b. «Официант» на кассе (#/waiter), табель-киоск, мелкие списки Офиса ---------- */
  & .wt-head h1, & .wo-head h2 { font-family: var(--m-display); font-weight: 800; color: var(--m-text); }
  & .wt-tabs { gap: 0; padding: 0; background: transparent; border: 1px solid var(--m-track); }
  & .wt-tabs button { color: var(--m-text-2); background: transparent; }
  & .wt-tabs button + button { border-left: 1px solid var(--m-track); }
  & .wt-tabs button[aria-selected="true"] { background: var(--m-sel); color: var(--m-on-sel); }
  & .wt-badge { background: var(--m-text); color: var(--m-bg); }
  & .wt-table { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text-2); }
  & .wt-table b { color: var(--m-text); }
  & .wt-table.busy { background: var(--m-sel); border: 1px solid var(--m-sel); color: var(--m-on-sel); }
  & .wt-table.busy b { color: var(--m-on-sel); }
  & .wt-table.pre { background: var(--m-surface); border: 2px solid var(--m-sel); color: var(--m-text); }
  & .wt-table.pre b { color: var(--m-text); }
  & .wt-row, & .wo-lines { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .wt-ready { background: var(--m-surface); border: 1px solid var(--m-accent); }
  & .wo-total { color: var(--m-text); font-family: var(--m-display); font-weight: 800; }
  & .wo-cats, & .wo-bar { background: var(--m-bg); border-color: var(--m-line); }
  & .term-cat, & .wo-cats .term-cat { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .term-cat::before { display: none; }
  & .term-cat[aria-pressed="true"], & .wo-cats .term-cat[aria-pressed="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .wo-dish { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .chip-btn { min-height: 40px; border: 1px solid var(--m-track); background: transparent; color: var(--m-text); }
  & .chip-btn[aria-pressed="true"] { background: var(--m-sel); border-color: var(--m-sel); color: var(--m-on-sel); }
  & .kiosk-head h1, & .kiosk-head p, & .kiosk-hint { color: var(--m-text); }
  & .kiosk-head h1 { font-family: var(--m-display); font-weight: 800; }
  & .kiosk-ava { background: var(--m-raised); color: var(--m-text); }
  & .kiosk-pin, & .kiosk-done { background: var(--m-surface); border: 1px solid var(--m-line); }
  & .term-note, & .own-upd { color: var(--m-text-2); }
  & .tm-users li, & .rv-head > div, & .rv-pays li, & .day-warn { background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-text); }
  & .enr-link, & .qrl-note { color: var(--m-text-2); }
  & .chooser-body { background: var(--m-surface); color: var(--m-text); }

  /* ---------- 12c. Ничего мельче 11 px; касание 44 на сенсорных экранах ---------- */
  & :is(.ct-ic.lbl span, .cb span, .ct-gtab span, .co-sub span, .cm-stop) { font-size: 11px; }
  & :is(.own-chart .axis-label, svg text) { font-size: 11px; }
  & :is(.ow-col small, .ow-tabs button span, .ma-tabs button span, .ma-tabs button) { font-size: 11px; }
  &[data-term] .seg button, &[data-mobile] .seg button { min-height: 44px; }
  &[data-term] .btn-sm, &[data-mobile] .btn-sm { min-height: 44px; }
  & .ow-chips button, & .ma-chips button, & .g-chips button { position: relative; }
  & :is(.ow-chips, .ma-chips, .g-chips) button::after { content: ""; position: absolute; inset: -6px 0; }

  /* ---------- 13. Остатки: полосатые «стоп» и цветные пятна ---------- */
  & .item-cell.stopped .item-tile, & .dish.stopped .dish-btn { background: var(--m-bg); color: var(--m-dis); border: 1px dashed var(--m-track); }
  & .ls-mini .m-ph, & .ls-thumb .t-tint { background: var(--m-raised); }
  & .mo-sent::after { background: transparent; color: var(--m-accent-text); }
  & .mo-paid-ic { background: var(--m-accent); color: var(--m-on-accent); }
}

/* ---------- Светлая Mono: те же правила, другие значения токенов (белый фон, чёрный текст, зелёный глубже) ----------
   Включается переключателем темы (data-theme="light"). Тёмная Mono — основная. */
:root[data-ui="mono"][data-theme="light"]:not(#nx-mono) {
  --m-bg: #FFFFFF; --m-surface: #F5F5F5; --m-raised: #EBEBEB; --m-line: #E0E0E0; --m-track: #C2C2C2;
  --m-text: #000000; --m-text-2: #5C5C5C; --m-text-3: #6B6B6B; --m-dis: #B3B3B3;
  --m-accent: #16A35A; --m-accent-text: #087A40; --m-on-accent: #000000; --m-danger: #D70015; --m-on-danger: #FFFFFF;
  --m-sel: #000000; --m-on-sel: #FFFFFF; --m-scrim: rgba(0, 0, 0, .4); --m-focus: #000000;
  --paper: #FFFFFF;
  color-scheme: light;
  & .mb-t input[type="checkbox"]:checked, & table.data input[type="checkbox"]:not(.switch):checked,
  & :is(.check, .field, .filters, .mb-filters, label) > input[type="checkbox"]:not(.switch, [role="switch"]):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E"); }
  & .mb-t input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E"); }
  & .olap-t.heat tbody td[style*="--h"] { background: rgba(22, 163, 90, calc(var(--h) * .35)); }
  & .wordmark.nx { --nx-green: #12A05A; }
}