#app {
    /* ── токены ─────────────────────────────────
       Весь вид приложения задаётся здесь: ниже по файлу ни одного цвета
       литералом. Светлая нейтральная основа, тёплый жёлтый акцент — только на
       главном действии, активном пункте и прогрессе, чтобы он оставался
       сигналом, а не фоном. Брендбук заказчика подменяется в этом блоке. */
    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --raised: #F8F9FA;
    --line: #E3E6EA;
    --line-2: #EEF0F2;
    --line-strong: #CDD2D9;
    --ink: #15171C;
    --ink-2: #535A66;
    --ink-3: #8B929D;

    /* Акцент. На жёлтом — тёмный текст: белый на жёлтом нечитаем. */
    --brand: #FFC82C;
    --brand-hover: #F5B800;
    --brand-ink: #7A5300;         /* акцентный текст на светлом фоне */
    --brand-soft: #FFF5D1;
    --brand-line: #FBE29A;
    --on-brand: #15171C;
    --on-color: #FFFFFF;          /* текст на зелёном, красном и тёмном */
    --focus: #E8A800;

    /* Тёмная поверхность: сканер экземпляра и панель массовых действий. */
    --dark: #1C1F26;
    --dark-2: #2A2E37;
    --on-dark: #E9ECF1;

    --ok: #12804A;
    --ok-soft: #E8F6EE;
    --ok-line: #C5E7D3;
    --warn: #8C5A00;
    --warn-soft: #FFF4DC;
    --bad: #C2301F;
    --bad-soft: #FDECEA;
    --bad-line: #F4C9C3;

    --r: 9px;
    --r-lg: 14px;
    --sh: 0 1px 2px rgba(21,23,28,.05);
    --sh-2: 0 8px 24px -8px rgba(21,23,28,.16), 0 2px 6px -2px rgba(21,23,28,.06);
    --sh-3: 0 28px 64px -16px rgba(21,23,28,.28), 0 10px 24px -10px rgba(21,23,28,.12);

    --ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
  }
  #app * { box-sizing: border-box; }
  #app ::selection { background: var(--brand-soft); }

  /* ── скелетон загрузки ──────────────────────── */
  #app .boot { padding: 40px; display: flex; flex-direction: column; gap: 12px; }
  #app .sk-line, #app .sk { background: linear-gradient(90deg,var(--line-2) 25%,var(--raised) 37%,var(--line-2) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 6px; height: 11px; }
  @keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

  /* ── каркас ─────────────────────────────────── */
  #app .layout { display: flex; min-height: 100dvh; }

  /* Меню — на всю высоту окна и не уезжает при прокрутке страницы. */
  #app aside {
    width: 240px; flex: 0 0 240px; background: var(--surface);
    border-right: 1px solid var(--line); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100dvh;
    transition: width .16s ease, flex-basis .16s ease;
  }
  #app.rail aside { width: 66px; flex-basis: 66px; }
  #app aside .org { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
  #app aside .logo {
    width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand); color: var(--on-brand);
    display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  }
  #app aside .org .nm { font-weight: 650; font-size: 14px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app aside .org .sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app aside .org .txt { min-width: 0; }
  #app.rail aside .org .txt, #app.rail aside .lbl, #app.rail .navgrp-t, #app.rail aside .new span { display: none; }

  #app aside .new { padding: 0 12px 10px; }
  #app aside .new button { width: 100%; justify-content: center; height: 40px; }
  #app.rail aside .new button { padding: 0; }

  #app nav { padding: 4px 10px 10px; flex: 1; overflow-y: auto; }
  #app .navgrp-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); padding: 14px 10px 6px; font-weight: 650; }
  #app nav a, #app aside .bottom a {
    display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r);
    color: var(--ink-2); cursor: pointer; font-size: 13.5px; margin-bottom: 2px; user-select: none;
    text-decoration: none; position: relative; font-weight: 500;
  }
  #app nav a::before {
    content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--brand); transition: height .14s ease;
  }
  #app nav a:hover, #app aside .bottom a:hover { background: var(--raised); color: var(--ink); }
  #app nav a:focus-visible, #app aside .bottom a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  #app nav a[aria-current="page"], #app aside .bottom a[aria-current="page"] { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
  #app nav a[aria-current="page"]::before { height: 20px; }
  #app nav a svg, #app aside .bottom a svg { flex: none; opacity: .8; }
  #app nav a[aria-current="page"] svg { opacity: 1; color: var(--brand-ink); }
  #app nav a .cnt { margin-left: auto; font-size: 11px; font-family: var(--mono); color: var(--bad); background: var(--bad-soft); border-radius: 20px; padding: 1px 7px; }
  #app aside .bottom { border-top: 1px solid var(--line); padding: 10px; }

  #app .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

  /* ── верхняя панель ─────────────────────────── */
  #app header {
    height: 60px; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px; padding: 0 18px; position: sticky; top: 0; z-index: 20;
  }
  #app .icon-btn {
    all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: var(--r);
    display: grid; place-items: center; color: var(--ink-2); flex: none; position: relative;
  }
  #app .icon-btn:hover { background: var(--raised); color: var(--ink); }
  #app .icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  #app .icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); border: 2px solid var(--surface); }

  #app .gsearch { position: relative; flex: 1; max-width: 480px; }
  #app .hsp { flex: 1; }
  #app .gsearch svg { position: absolute; left: 12px; top: 11px; color: var(--ink-3); }
  #app .gsearch input { padding-left: 36px; height: 38px; background: var(--raised); border-color: transparent; }
  #app .gsearch input:hover { border-color: var(--line); }
  #app .gsearch kbd {
    position: absolute; right: 9px; top: 9px; font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--surface);
  }
  #app .ghits {
    position: absolute; top: 44px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; z-index: 40; max-height: 360px; overflow-y: auto;
  }
  #app .ghits .h { padding: 9px 14px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 650; }
  #app .ghits .it { display: flex; gap: 10px; align-items: center; padding: 9px 14px; cursor: pointer; }
  #app .ghits .it:hover, #app .ghits .it.on { background: var(--brand-soft); }
  #app .ghits .it .s { font-size: 12px; color: var(--ink-2); }

  #app .who { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: var(--r); margin-left: auto; }
  #app .who:hover { background: var(--raised); }
  #app .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; }
  #app .who .t { font-size: 13px; line-height: 1.2; font-weight: 550; }
  #app .who .t .r { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }

  #app .pop {
    position: absolute; top: 54px; right: 14px; width: 300px; max-width: calc(100vw - 28px); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-2); z-index: 45; overflow: hidden;
  }
  #app .pop .ph { padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-weight: 650; font-size: 13px; display: flex; justify-content: space-between; }
  #app .pop .pi { padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
  #app .pop .pi:last-child { border-bottom: 0; }
  #app .pop .pi:hover { background: var(--raised); }
  #app .pop .pi .s { font-size: 12px; color: var(--ink-3); }

  /* ── контент ────────────────────────────────── */
  #app .page { padding: 26px 28px 64px; flex: 1; width: 100%; max-width: 1480px; }
  #app .ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  #app h1 { font-size: 24px; font-weight: 650; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
  #app .ph-row .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
  #app h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
  #app .back { all: unset; cursor: pointer; color: var(--ink-2); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 14px; padding: 4px 8px 4px 4px; border-radius: var(--r); }
  #app .back:hover { color: var(--ink); background: var(--surface); }

  /* ── кнопки ─────────────────────────────────── */
  #app .btn {
    all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 15px; border-radius: var(--r); font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; box-shadow: var(--sh);
    transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
  }
  #app .btn:hover { background: var(--raised); border-color: var(--line-strong); }
  #app .btn:active { box-shadow: none; transform: translateY(1px); }
  #app .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* Главное действие экрана: «Сохранить», «Провести», «Оплатить». */
  #app .btn.pri {
    background: var(--brand); border-color: var(--brand); color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(21,23,28,.12), inset 0 -1px 0 rgba(0,0,0,.06);
  }
  #app .btn.pri:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  #app .btn.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--ink-2); }
  #app .btn.ghost:hover { background: var(--line-2); color: var(--ink); }
  #app .btn.dang { color: var(--bad); }
  #app .btn.dang:hover { background: var(--bad-soft); border-color: var(--bad-line); }
  /* Подтверждение необратимого действия — красная кнопка. */
  #app .btn.pri.dang { background: var(--bad); border-color: var(--bad); color: var(--on-color); }
  #app .btn.pri.dang:hover { background: #A32719; border-color: #A32719; }
  #app .btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
  #app .btn.lg { height: 46px; padding: 0 20px; font-size: 15px; }
  #app .btn.wide { width: 100%; }
  #app .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
  #app .btn .spin { width: 14px; height: 14px; border: 2px solid rgba(21,23,28,.25); border-top-color: var(--on-brand); border-radius: 50%; animation: sp .6s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg) } }

  /* ── поля ───────────────────────────────────── */
  #app label.f { display: block; margin-bottom: 14px; }
  #app .lb { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
  #app input, #app select, #app textarea {
    width: 100%; font-family: var(--ui); font-size: 14px; height: 40px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink);
    transition: border-color .12s, box-shadow .12s;
  }
  #app textarea { height: auto; padding: 9px 12px; resize: vertical; }
  #app input:hover, #app select:hover { border-color: var(--line-strong); }
  #app input:focus, #app select:focus, #app textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--brand-soft); }
  #app input:disabled, #app select:disabled { background: var(--raised); color: var(--ink-2); cursor: not-allowed; border-style: dashed; }
  #app input[type="number"] { font-family: var(--mono); }
  #app input::placeholder { color: var(--ink-3); }
  #app .hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
  #app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #app .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  #app .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
  #app .fsect { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 650; margin: 6px 0 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  #app .fsect:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  #app .req { color: var(--bad); }
  #app .fieldbad input, #app .fieldbad select { border-color: var(--bad); }
  #app .fielderr { font-size: 12px; color: var(--bad); margin-top: 5px; }

  /* ── карточки ───────────────────────────────── */
  #app .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
  #app .card > .ch { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 56px; }
  #app .card > .cb { padding: 18px; }
  #app .card > .cb.flush { padding: 0; }

  #app .stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(168px,1fr)); gap: 12px; margin-bottom: 22px; }
  #app .stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh);
    padding: 16px 18px 15px; transition: border-color .12s, box-shadow .12s; min-width: 0;
  }
  #app .stat:first-child { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
  #app .stat:first-child .k, #app .stat:first-child .d { color: #A9B0BC; }
  #app .stat:first-child .v small { color: #A9B0BC; }
  #app .stat .k { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; font-weight: 550; }
  #app .stat .v {
    font-size: 26px; font-weight: 650; letter-spacing: -.035em; margin-top: 10px;
    font-variant-numeric: tabular-nums; line-height: 1.08; overflow-wrap: anywhere;
  }
  #app .stat .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
  #app .stat .d { font-size: 12px; margin-top: 7px; color: var(--ink-3); }
  #app .stat .d.up { color: var(--ok); }
  #app .stat .d.down { color: var(--bad); }
  #app .stat:first-child .d.up { color: #6FD3A0; }
  #app .stat:first-child .d.down { color: #FF9A8E; }

  /* ── таблицы ────────────────────────────────── */
  #app .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #app table { width: 100%; border-collapse: collapse; }
  #app th {
    font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
    text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--raised); white-space: nowrap;
  }
  #app tbody td:first-child { font-weight: 550; }
  #app th:first-child, #app td:first-child { padding-left: 18px; }
  #app th:last-child, #app td:last-child { padding-right: 18px; }
  #app td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; font-size: 13.5px; }
  #app tbody tr:last-child td { border-bottom: 0; }
  #app tbody tr.click { cursor: pointer; }
  #app tbody tr:hover { background: var(--raised); }
  #app tbody tr.sel { background: var(--brand-soft); }
  #app td.n, #app th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* Номер документа и IMEI не переносятся: «SALE-» / «000004» в две строки не читается. */
  #app td.mono { white-space: nowrap; }
  #app .t-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
  #app .rowact { opacity: 0; transition: opacity .1s; }
  #app tr:hover .rowact, #app tr:focus-within .rowact, #app tr.sel .rowact { opacity: 1; }
  @media (hover: none) { #app .rowact { opacity: 1 } }
  #app input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand-hover); cursor: pointer; }

  /* ── бейджи ─────────────────────────────────── */
  #app .bdg {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; background: var(--line-2); color: var(--ink-2); white-space: nowrap;
  }
  #app .bdg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
  #app .bdg.plain::before { display: none; }
  #app .bdg.ok { background: var(--ok-soft); color: var(--ok); }
  #app .bdg.warn { background: var(--warn-soft); color: var(--warn); }
  #app .bdg.bad { background: var(--bad-soft); color: var(--bad); }
  #app .bdg.brand { background: var(--brand-soft); color: var(--brand-ink); }

  /* ── серийный номер: ключевой компонент ─────── */
  #app .sn {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px;
    letter-spacing: .02em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 4px 10px 4px 9px; white-space: nowrap; box-shadow: var(--sh);
  }
  #app .sn .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
  #app .sn.sold .tick { background: var(--ink-3); }
  #app .sn.hold .tick { background: var(--warn); }
  #app .sn.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
  #app .sn.bad .tick { background: var(--bad); }
  #app .sn button { all: unset; cursor: pointer; color: var(--ink-3); padding: 2px; border-radius: 4px; }
  #app .sn button:hover { color: var(--bad); background: var(--bad-soft); }
  #app .sn-big { font-family: var(--mono); font-size: 24px; letter-spacing: .07em; font-weight: 500; }

  /* ── сканер ─────────────────────────────────── */
  #app .scanbox { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--sh); }
  #app .scanbox .st { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }
  #app .scanbox.goods .st { background: var(--brand-soft); color: var(--brand-ink); }
  #app .scanbox.serial .st { background: var(--dark); color: var(--on-dark); }
  #app .scanbox .sb { padding: 14px 16px 16px; }
  #app .scanbox input.scan {
    width: 100%; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; height: 50px; padding: 0 0 2px;
    font-family: var(--mono); font-size: 22px; letter-spacing: .06em; background: transparent; box-shadow: none;
  }
  #app .scanbox input.scan:focus { border-color: var(--brand); box-shadow: none; }
  #app .scanbox input.scan::placeholder { color: var(--ink-3); letter-spacing: .04em; font-size: 18px; }
  #app .scanbox .tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
  #app .scanbox .live { font-size: 12px; color: var(--ink-3); margin-left: auto; display: flex; align-items: center; gap: 6px; }
  #app .scanbox .live b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s ease infinite; }
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

  #app .fb { margin-top: 12px; border-radius: var(--r); padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; border: 1px solid; }
  #app .stack > .fb:first-child, #app .stack > div > .fb:first-child { margin-top: 0; }
  #app .fb .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--on-color); font-size: 11px; flex: none; margin-top: 1px; }
  #app .fb.good { background: var(--ok-soft); border-color: var(--ok-line); }
  #app .fb.good .ic { background: var(--ok); }
  #app .fb.err { background: var(--bad-soft); border-color: var(--bad-line); }
  #app .fb.err .ic { background: var(--bad); }
  /* Справка, а не ошибка: например, «все номера уже внесены» (0019). */
  #app .fb.info { background: var(--brand-soft); border-color: var(--brand-line); }
  #app .fb.info .ic { background: var(--brand); }
  #app .fb .acts2 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  #app .bat-in { width: 84px; height: 30px; padding: 0 8px; }
  #app .bat-in.bad { border-color: var(--bad); background: var(--bad-soft); }
  #app .qtyctl { display: inline-flex; align-items: center; gap: 6px; }
  #app .qtyctl .btn { height: 24px; min-width: 24px; padding: 0 6px; }
  #app .fb .ttl { font-weight: 650; margin-bottom: 2px; }
  #app .fb .meta { color: var(--ink-2); font-size: 13px; }

  /* ── прогресс ───────────────────────────────── */
  #app .prog { height: 8px; border-radius: 20px; background: var(--line-2); overflow: hidden; }
  #app .prog i { display: block; height: 100%; background: var(--brand); border-radius: 20px; transition: width .2s ease; }
  #app .prog.done i { background: var(--ok); }

  /* ── вкладки ────────────────────────────────── */
  #app .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
  #app .tabs button {
    all: unset; cursor: pointer; padding: 10px 13px; font-size: 13.5px; color: var(--ink-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 550;
  }
  #app .tabs button:hover { color: var(--ink); }
  #app .tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  #app .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 650; }

  /* ── фильтры и массовые действия ────────────── */
  #app .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  #app .filters select, #app .filters input { height: 38px; width: auto; min-width: 140px; font-size: 13.5px; }
  #app .filters .fsearch { position: relative; flex: 1; min-width: 200px; }
  #app .filters .fsearch input { width: 100%; padding-left: 34px; }
  #app .filters .fsearch svg { position: absolute; left: 11px; top: 11px; color: var(--ink-3); }
  #app .fsearch { position: relative; }
  #app .fsearch > svg { position: absolute; left: 11px; top: 12px; color: var(--ink-3); }
  #app .bulk {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--dark); color: var(--on-color);
    border-radius: var(--r-lg); margin-bottom: 12px; font-size: 13.5px; flex-wrap: wrap;
  }
  #app .bulk .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: var(--on-color); box-shadow: none; }
  #app .bulk .btn:hover { background: rgba(255,255,255,.2); }
  #app .bulk .sp { flex: 1 }

  /* ── пустые состояния ───────────────────────── */
  #app .empty { text-align: center; padding: 52px 24px; }
  #app .empty .ei { width: 50px; height: 50px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; margin: 0 auto 14px; }
  #app .empty h3 { font-size: 15.5px; font-weight: 650; margin: 0 0 6px; }
  #app .empty p { color: var(--ink-2); font-size: 13.5px; margin: 0 auto 16px; max-width: 400px; }
  #app .empty .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

  /* ── модалка и дровер ───────────────────────── */
  #app .scrim { position: fixed; inset: 0; background: rgba(21,23,28,.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; animation: fade .14s ease; }
  @keyframes fade { from { opacity: 0 } }
  #app .modal { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-3); width: 100%; max-width: 540px; max-height: 90dvh; display: flex; flex-direction: column; animation: rise .16s ease; }
  @keyframes rise { from { transform: translateY(8px); opacity: .6 } }
  #app .modal .mh { padding: 18px 20px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  #app .modal .mh h3 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.015em; }
  #app .modal .mh .s { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
  #app .modal .mb { padding: 4px 20px 6px; overflow-y: auto; }
  #app .modal .mf { padding: 14px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line-2); margin-top: 6px; }
  #app .modal.wide { max-width: 760px; }

  #app .scrim.right { justify-content: flex-end; padding: 0; }
  #app .drawer { background: var(--surface); width: 500px; max-width: 100%; height: 100%; box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: slide .18s ease; }
  @keyframes slide { from { transform: translateX(24px) } }
  #app .drawer .dh { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  #app .drawer .db { padding: 18px 20px 28px; overflow-y: auto; flex: 1; }

  #app .kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 14px; font-size: 13.5px; }
  #app .kv .k { color: var(--ink-2); }

  /* ── уведомления ────────────────────────────── */
  #app .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 92vw; }
  /* Открыто окно — уведомления сверху: внизу они закрывали кнопку «Создать / Сохранить». */
  #app:has(.scrim) .toasts { top: 20px; bottom: auto; }
  #app .toast {
    display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--ok); border-radius: var(--r); box-shadow: var(--sh-2); padding: 12px 14px; width: 352px; max-width: 92vw;
    animation: rise .16s ease;
  }
  #app .toast.err { border-left-color: var(--bad); background: #FFFBFA; }
  #app .toast .ic { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: var(--on-color); display: grid; place-items: center; font-size: 11px; flex: none; margin-top: 1px; }
  #app .toast.err .ic { background: var(--bad); }
  #app .toast .tt { font-size: 13.5px; font-weight: 650; }
  #app .toast .ts { font-size: 13px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
  #app .toast .tk { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
  #app .toast button { all: unset; cursor: pointer; color: var(--ink-3); margin-left: auto; padding: 2px; border-radius: 4px; }
  #app .toast button:hover { color: var(--ink); background: var(--line-2); }

  /* ── касса ──────────────────────────────────── */
  #app .pos { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
  /* Колонка сетки должна ужиматься, иначе таблица растянет кассу за край экрана. */
  #app .pos > * { min-width: 0; }
  #app .cart { position: sticky; top: 78px; }
  #app .cart .card { border-color: var(--line-strong); }
  #app .cart .line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); align-items: center; }
  #app .cart .line .nm { font-size: 13.5px; font-weight: 600; }
  /* 0017: справочники с «+», действия над товаром, оплата частями */
  /* 0018: тип товара, фото, гарантия, действия, долги */
  #app .seg { display: flex; flex-wrap: wrap; gap: 6px; }
  #app .seg > label, #app .seg > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
  #app .seg > label input { position: absolute; opacity: 0; pointer-events: none; }
  #app .seg > .on { background: var(--brand-soft); border-color: var(--brand-line); font-weight: 600; }
  #app .seg > button:disabled { opacity: .45; cursor: not-allowed; }
  #app .seg.big > button { height: 42px; padding: 0 18px; font-size: 14px; }
  #app .pphoto { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
  #app .pp-img { width: 96px; height: 96px; flex: none; border-radius: var(--r); background: var(--raised); border: 1px dashed var(--line-strong); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); }
  #app .pp-img img, #app .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #app .thumb { overflow: hidden; }
  #app .thumb.sm { width: 28px; height: 28px; }
  #app details.more { margin: 12px 0 4px; }
  #app details.more > summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
  #app label.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0 10px; cursor: pointer; }
  #app .simbox.same { background: var(--brand-soft); border-color: var(--brand-line); }
  #app .pickrow { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
  #app .pickrow:hover { background: var(--raised); }
  #app .acts-menu { display: none; position: relative; }
  #app .acts-menu > summary { list-style: none; }
  #app .acts-menu > summary::-webkit-details-marker { display: none; }
  #app .acts-menu .menu { position: absolute; right: 0; top: 36px; z-index: 30; display: grid; gap: 4px; padding: 6px; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); }
  #app .acts-menu .menu .btn { justify-content: flex-start; }
  #app .acts .lbl-w { display: none; }
  #app .acts-menu .menu .lbl-w { display: inline; }
  @media (min-width: 1500px) { #app .acts .lbl-w { display: inline; } }
  /* До 1500 px пять кнопок в строке каталога ложились столбиком 2×3 и сжимали название
     товара — там действия одной кнопкой «⋯» с тем же списком. */
  @media (max-width: 1499px) {
    #app .acts.acts-wide { display: none; }
    #app .acts-menu { display: inline-block; }
  }
  @media (max-width: 900px) {
    /* «⋯» всегда на экране: колонка действий прижата к правому краю таблицы */
    #app td.acts-cell { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -8px 0 8px -8px rgba(0,0,0,.18); }
    #app td.acts-cell:has(details[open]) { z-index: 6; }
    #app tr:has(> td.acts-cell) > th:last-child { position: sticky; right: 0; z-index: 2; background: inherit; }
  }
  #app .debtcard { margin-bottom: 14px; }
  #app .debtcard .ch { align-items: flex-start; }
  #app h3.sect-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 6px 0 10px; }
  #app .simbox { font-size: 12.5px; color: var(--ink-2); background: var(--warn-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; margin: -4px 0 12px; }
  #app .dsel { display: flex; gap: 6px; align-items: stretch; }
  #app .dsel select { flex: 1; min-width: 0; }
  #app .btn.dplus { width: 40px; padding: 0; justify-content: center; flex: none; }
  /* Ластик рядом с «+» (0028): убрать значение из справочника. */
  #app .btn.derase { color: var(--ink-3); }
  #app .btn.derase:hover { color: var(--bad); border-color: var(--bad); }
  #app .btn.derase[disabled] { opacity: .45; pointer-events: none; }
  /* Ёмкость аккумулятора б/у и восстановленного iPhone — заметный блок. */
  #app .simbox.batbox { border-left: 3px solid var(--warn, #a15c00); margin: 4px 0 12px; }
  #app input.bat-in.bad { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 18%, transparent); }
  #app .acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  #app .btn.dang-ghost { color: var(--bad); }
  #app .btn.dang-ghost:hover { background: var(--bad-soft); border-color: var(--bad-line); }
  #app .paysum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r); background: var(--brand-soft); border: 1px solid var(--brand-line); }
  #app .paysum b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  #app .payadd { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
  #app .payadd .btn { margin-bottom: 14px; height: 40px; }
  #app .paylist { border: 1px solid var(--line); border-radius: var(--r); margin: 2px 0 12px; }
  #app .payrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
  #app .payrow:last-child { border-bottom: 0; }
  #app .payrow .sp { flex: 1; }
  #app .payrow .pm { min-width: 150px; }
  #app .payrow .pm.debt { color: var(--bad); font-weight: 600; }
  #app .paytot { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 10px 12px; margin-bottom: 14px; background: var(--raised); border-radius: var(--r); font-variant-numeric: tabular-nums; }
  #app .paytot span { color: var(--ink-2); }
  #app .paycust { border-top: 1px solid var(--line-2); padding-top: 12px; }
  #app .paycust.need select[name=cust] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
  @media (max-width: 640px) {
    #app .payadd { grid-template-columns: 1fr; gap: 0; }
    #app .payadd .btn { width: 100%; justify-content: center; }
    #app .payrow .pm { min-width: 0; }
  }
  #app .cart .sums { padding: 10px 18px; display: grid; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
  #app .cart .sums .row { flex-wrap: nowrap; min-height: 28px; }
  #app .cart .tot { padding: 16px 18px; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); background: var(--raised); }
  #app .cart .tot .v { font-size: 28px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

  /* ── график ─────────────────────────────────── */
  #app .chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding: 0 2px; }
  #app .chart .b { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; transition: background .12s; }
  #app .chart .b:hover { background: var(--brand-hover); }
  #app .chart .b span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
  #app .chart-x { height: 22px; }

  #app .flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  #app .flow .node { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 15px; background: var(--surface); min-width: 168px; }
  #app .flow .node .k { font-size: 11.5px; color: var(--ink-3); }
  #app .flow .node .v { font-weight: 650; margin-top: 2px; }
  #app .flow .arr { color: var(--brand-ink); display: flex; align-items: center; gap: 4px; font-size: 12px; }

  #app .muted { color: var(--ink-2); }
  #app .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  #app .nowrap { white-space: nowrap; }
  #app .stack { display: flex; flex-direction: column; gap: 16px; }
  #app .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  #app .sep { height: 1px; background: var(--line-2); margin: 14px 0; }
  #app .thumb { width: 40px; height: 40px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); flex: none; }
  #app .thumb.lg { width: 96px; height: 96px; border-radius: var(--r-lg); }
  #app .note { font-size: 12.5px; color: var(--ink-2); background: var(--raised); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 9px 12px; }

  /* ── адаптив ────────────────────────────────── */
  @media (max-width: 1180px) { #app .pos { grid-template-columns: 1fr 330px } }
  @media (max-width: 900px) {
    #app aside { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; z-index: 70; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sh-3); }
    #app.nav-open aside { transform: none; }
    #app.rail aside { width: 240px; flex-basis: 240px; }
    #app.rail aside .org .txt, #app.rail aside .lbl, #app.rail .navgrp-t, #app.rail aside .new span { display: block; }
    #app .scrim.nav { z-index: 65; }
    #app .pos { grid-template-columns: 1fr; }
    #app .cart { position: static; }
    #app .page { padding: 18px 16px 56px; }
    #app .kv { grid-template-columns: 116px 1fr; }
    #app .drawer { width: 100%; }
    #app .toasts { left: 12px; right: 12px; bottom: 12px; }
    #app:has(.scrim) .toasts { top: 12px; bottom: auto; }
    #app .toast { width: auto; }
    #app .grid4 { grid-template-columns: 1fr 1fr; }
    #app header { padding: 0 12px; }
  }
  @media (max-width: 640px) {
    #app .grid2, #app .grid3, #app .grid4 { grid-template-columns: 1fr; gap: 0; }
    #app .grid2 > *, #app .grid3 > *, #app .grid4 > * { margin-bottom: 0; }
    #app .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    #app .stat { padding: 13px 14px; }
    #app .stat .v { font-size: 21px; }
    #app h1 { font-size: 21px; }
    #app .ph-row { align-items: flex-start; }
    #app .ph-row > .row { width: 100%; }
    #app .ph-row > .row .btn { flex: 1 1 auto; }
    #app .scrim { padding: 0; align-items: flex-end; }
    #app .modal { max-height: 94dvh; border-radius: 16px 16px 0 0; }
    #app .modal .mf .btn { flex: 1; }
    #app .filters select, #app .filters input { min-width: 0; flex: 1 1 140px; }
    #app .cart .tot .v { font-size: 24px; }
    #app .scanbox input.scan { font-size: 18px; }
    #app .card > .cb { padding: 14px; }
  }
  /* На телефоне в шапке помещается только аватар: имя и роль видны в меню. */
  @media (max-width: 560px) {
    #app .who .t, #app .who > svg { display: none; }
    #app .who { padding: 4px; gap: 0; }
    #app .gsearch kbd { display: none; }
  }
  /* Полоса оплаты — только на телефоне и планшете, где корзина под списком товаров. */
  #app .paybar { display: none; }
  @media (max-width: 900px) {
    #app .railbtn, #app .hsp { display: none; }
    #app .gsearch { max-width: none; }
    #app .paybar { display: flex; position: sticky; bottom: 0; z-index: 15; margin: 16px -16px -56px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(21,23,28,.18); align-items: center; justify-content: space-between; gap: 12px; }
    #app .paybar b { font-size: 20px; letter-spacing: -.02em; }
    #app .paybar .btn { min-width: 150px; }
  }
  @media (min-width: 901px) { #app .burger { display: none } }
  @media (prefers-reduced-motion: reduce) { #app *, #app *::before { animation: none !important; transition: none !important } }

  /* ── экран входа ────────────────────────────── */
  #app .auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background:
    radial-gradient(1200px 500px at 50% -10%, var(--brand-soft), transparent 70%), var(--bg) }
  #app .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--sh-2); padding: 28px }
  #app .auth-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700;
    color: var(--ink); margin-bottom: 20px }
  #app .auth-brand svg { background: var(--brand); color: var(--on-brand); border-radius: 9px; padding: 6px; width: 34px; height: 34px }
  #app .auth-err { background: var(--bad-soft); color: var(--bad); border-radius: var(--r);
    padding: 10px 12px; font-size: 13px; margin-bottom: 14px }
  #app .auth-hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2);
    font-size: 12px; line-height: 1.7; color: var(--ink-3) }
  #app .auth-hint code { font-family: var(--mono); color: var(--ink-2) }

/* ── 0023: Trade-in, расходы, смены ── */
#app .paytrade{margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#app .paytrade .payrow{flex:1;min-width:260px}
#app .payrow .pm.ti{background:var(--brand-soft);color:var(--brand-ink)}
#app .pp-img.sm{width:56px;height:56px;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
#app .pp-img.sm img{width:100%;height:100%;object-fit:cover}
#app .pp-img.sm .icon-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;background:var(--surface)}
#app .tiph{display:flex;gap:6px;flex-wrap:wrap}
#app .fb.warn{background:var(--warn-soft);border-color:var(--warn)}
#app .shiftbar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:-6px 0 14px;border:1px dashed var(--warn);background:var(--warn-soft);border-radius:var(--r);font-size:13px;flex-wrap:wrap}
#app .shiftbar.on{border-style:solid;border-color:var(--line);background:var(--surface)}
#app .shiftbar .sp{flex:1}
#app .filters.exf{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 14px}
#app .filters.exf .f{margin:0;min-width:130px}
#app .shiftkv{grid-template-columns:minmax(180px,auto) 1fr}
#app tr.muted td{color:var(--ink-2)}

/* ── логотип Birdeme (финальное ТЗ, 15) ── */
#app aside .logo.brand{background:#151716;padding:6px}
#app aside .logo.brand img{width:100%;height:100%;object-fit:contain;display:block}
#app .auth-brand.logo{display:block;margin:0 0 18px}
#app .auth-brand.logo img{display:block;height:52px;width:auto;max-width:100%}