/* =====================================================
   Cabix POS — светлая тема, сенсор + мышь
   ===================================================== */

:root{
  --bg:#F4F6F9;
  --panel:#FFFFFF;
  --panel-2:#F8FAFC;
  --border:#E2E8F0;
  --border-2:#CBD5E1;
  --text:#0F1B2A;
  --dim:#5B6B7E;
  --dim-2:#68778A;
  --primary:#2563EB;
  --primary-dark:#1D4ED8;
  --primary-soft:#EAF1FE;
  --danger:#DC2626;
  --danger-soft:#FDECEC;
  --warn:#B45309;
  --warn-soft:#FCF3E3;
  --ok:#15803D;
  --ok-soft:#E9F7EE;
  /* Токены, которые раньше были рассыпаны по файлу кодами цветов. Вынесены
     сюда, чтобы тёмные темы (html[data-theme]) переопределялись одним блоком. */
  --chip-dim:#EEF2F6;
  --scroll:#CBD5E1;
  --toast-ink:#101B2A;
  --on-primary:#fff;      /* подпись поверх синей заливки */
  --danger-edge:#F5C4C4;
  --ok-edge:#BFE5CC;
  --ok-deep:#177A45;
  --dim-3:#98A3B2;
  --panel-3:#F6F9FD;
  --login-bg:linear-gradient(160deg,#F8FAFF 0%,#EEF3FA 100%);
  /* Белая подложка предпросмотра этикетки: она физическая (лист бумаги),
     на тёмной теме остаётся белой — печатать будем на белом. */
  --paper:#fff;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 1px 3px rgba(15,27,42,.08),0 4px 16px rgba(15,27,42,.06);
  --shadow-lg:0 8px 40px rgba(15,27,42,.18);
  --tap:46px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}

/* Главный экран кассы — без полос прокрутки. Меню, полоса категорий, сетка
   товаров и корзина стоят рядом, и восьмипиксельная полоса у каждой резала
   рабочую поверхность смены на четыре части. Прокрутка остаётся прежней
   (колесо, тачпад, палец), пропадает только сама полоса — так же сделано в
   мобильной кассе.

   Таблицы документов, модалки и остальные экраны НЕ трогаем: там полоса —
   ещё и единственная подсказка, что вправо или вниз есть что смотреть. */
.sidenav,.cat-chips,.product-grid,.cart-items{scrollbar-width:none;-ms-overflow-style:none}
.sidenav::-webkit-scrollbar,
.cat-chips::-webkit-scrollbar,
.product-grid::-webkit-scrollbar,
.cart-items::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:15px;font-weight:600;user-select:none;transition:background .12s,border-color .12s,transform .05s}
.btn:hover{border-color:var(--border-2);background:var(--panel-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-danger{background:var(--danger-soft);border-color:var(--danger-edge);color:var(--danger)}
.btn-ok{background:var(--ok-soft);border-color:var(--ok-edge);color:var(--ok)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-lg{min-height:54px;font-size:16px;border-radius:14px}
.btn-sm{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn-block{width:100%}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);font-size:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--dim)}
.icon-btn:hover{border-color:var(--border-2);color:var(--text)}
/* Рисованные значки шапки вместо эмодзи: те рисует система, и на Windows они
   приезжали цветными и разного роста — рядом читались как случайный набор.
   Обводка берёт цвет кнопки, поэтому наведение красит значок вместе с рамкой. */
.icon-btn svg{width:21px;height:21px;display:block;flex:none}
/* Кнопка языка — не глобус, а код текущего: RU, UZ, EN. Глобус одинаков на
   всех семи языках и не отвечает на вопрос «на каком сейчас касса». */
.lang-btn{font-size:12.5px;font-weight:800;letter-spacing:.4px}

/* ---------- Поля ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:13px;color:var(--dim);font-weight:600}
.field input,.field select,.field textarea,
input.inp,select.inp,textarea.inp{min-height:var(--tap);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;background:var(--panel);color:var(--text);width:100%}
.field textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.search-box{position:relative;flex:1;min-width:180px}
.search-box input{width:100%;min-height:var(--tap);border:1px solid var(--border);border-radius:var(--radius);padding:10px 40px 10px 42px;background:var(--panel)}
.search-box::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim-2);font-size:19px}
.search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:transparent;color:var(--dim-2);font-size:17px;border-radius:10px}
.search-clear:hover{background:var(--panel-2);color:var(--text)}

/* ---------- Вход ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--login-bg)}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:34px 30px;box-shadow:var(--shadow-lg)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.login-logo{width:52px;height:52px;border-radius:14px;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.login-title{font-size:20px;font-weight:800}
.login-sub{color:var(--dim);font-size:13px}
.login-error{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:18px}
.login-tabs button{min-height:42px;border:none;border-radius:9px;background:transparent;color:var(--dim);font-size:14px;font-weight:700}
.login-tabs button.active{background:var(--panel);color:var(--primary);box-shadow:var(--shadow)}
.login-hint{color:var(--dim);font-size:12.5px;line-height:1.5;margin:-4px 0 14px}
.key-input{text-transform:uppercase;letter-spacing:1px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:16px!important;text-align:center}
.mono-key{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;letter-spacing:.5px}
.login-foot{text-align:center;color:var(--dim-2);font-size:12.5px;margin-top:18px;line-height:1.5}
/* Логотип на входе — картинка приложения (logo-icon.png, тот же файл, что в
   мобильной кассе), а не буквы «OX»: у всех версий Cabix POS один значок.
   На мелких размерах это ЗНАК без надписи — «Cabix POS SYSTEM» со слоганом
   при 52px сливается в кашу. Надпись остаётся на иконках 180-512px. */
.login-logo{overflow:hidden;background:transparent;box-shadow:var(--shadow)}
.login-logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ---------- Каркас ---------- */
/* minmax(0,…), а не 1fr: у колонки «1fr» минимум — по содержимому, и длинное
   название магазина в шапке растягивало колонку ШИРЕ экрана. На телефоне из-за
   этого правый край шапки уезжал за границу вместе с кнопками «Обновить» и
   «Выйти» — нажать их было нельзя. Само название и так обрезается многоточием
   (.store-name), место ему для этого не нужно. */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:60px 1fr;grid-template-areas:"top top" "nav view";height:100vh;height:100dvh}
.topbar{min-width:0}
.topbar{grid-area:top;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border);z-index:30}
/* Магазин и кассир — одной кнопкой с кружком-инициалом: по нему шапка
   читается как «чей это магазин», а не как строка текста. */
.topbar-store{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:0;padding:4px 8px 4px 4px;border-radius:12px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.topbar-store:hover{background:var(--panel-2)}
.topbar-store .store-ava{flex:0 0 34px;height:34px;border-radius:11px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.topbar-store .store-lines{min-width:0}
.store-name{display:block;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-user{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Правая часть шапки: часы и состояние сети слева, кнопки — единой группой
   на общей подложке, чтобы пять значков не рассыпались по краю. */
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-tools{display:flex;align-items:center;gap:4px;padding:3px;border-radius:14px;background:var(--panel-2);border:1px solid var(--border)}
.topbar-tools .icon-btn{width:38px;height:38px;border:0;background:transparent;border-radius:10px}
.topbar-tools .icon-btn:hover{background:var(--panel);color:var(--text)}
.topbar-tools .icon-btn svg{width:19px;height:19px}
/* Часы в шапке: время крупно, дата подписью. Ширина фиксируется в ch,
   иначе блок дёргается при смене 1 на 8 и тянет за собой соседние кнопки. */
.clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;
  padding:5px 11px;border-radius:12px;background:var(--panel-2);border:1px solid var(--border);
  line-height:1;font-variant-numeric:tabular-nums;min-width:104px}
.clock .clock-time{font-size:17px;font-weight:800;letter-spacing:.4px;color:var(--text)}
.clock .clock-time small{font-size:11px;font-weight:700;color:var(--dim-2);margin-left:3px;letter-spacing:0}
.clock .clock-date{font-size:11px;font-weight:600;color:var(--dim);white-space:nowrap}
.net-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--ok-soft);color:var(--ok)}
.net-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.net-badge.off{background:var(--danger-soft);color:var(--danger)}
.nav-toggle{display:inline-flex}

/* ---------- Боковое меню ---------- */
/* Три группы с подписями, рисованные значки, активный пункт с полосой слева.
   Список из двадцати одинаковых строк читался сплошной стеной — группы дают
   глазу опору, а подпись группы исчезает в свёрнутом меню. */
.sidenav{grid-area:nav;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);z-index:25;min-height:0}
.nv-scroll{flex:1 1 auto;overflow-y:auto;padding:8px 10px calc(10px + env(safe-area-inset-bottom));scrollbar-width:none}
.nv-scroll::-webkit-scrollbar{display:none}
.nv-group{display:flex;align-items:center;gap:8px;padding:11px 10px 5px}
.nv-group:first-child{padding-top:2px}
.nv-group span{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--dim-3);white-space:nowrap}
.nv-group i{flex:1;height:1px;background:var(--border)}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 12px;border-radius:12px;border:none;background:transparent;color:var(--dim);font:inherit;font-size:14.5px;font-weight:600;text-align:left;margin-bottom:2px;transition:background .12s,color .12s}
.nav-item .nav-ico{flex:0 0 22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:18px}
.nav-item .nav-ico svg{width:20px;height:20px;display:block}
.nav-item .nav-txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--primary)}
.nav-sep{height:1px;background:var(--border);margin:10px 6px}
/* Подвал меню: свернуть и номер сборки — всегда на виду, не уезжают со
   списком при прокрутке. */
.nv-foot{flex:none;border-top:1px solid var(--border);padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
.nv-collapse{display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--dim-2);font:inherit;font-size:13.5px;font-weight:700;text-align:left}
.nv-collapse:hover{background:var(--panel-2);color:var(--text)}
.nv-collapse .nav-ico{flex:0 0 22px;height:22px;display:flex;align-items:center;justify-content:center}
.nv-collapse .nav-ico svg{width:18px;height:18px}
.nav-build{display:flex;align-items:center;gap:11px;min-height:30px;padding:0 12px;color:var(--dim-3);font-size:12px;font-weight:600;cursor:default}
.nav-build .nav-ico{flex:0 0 22px;height:22px;display:flex;align-items:center;justify-content:center}
.nav-build .nav-ico svg{width:15px;height:15px}
.nav-build .nav-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Затемнение под выехавшим меню — только на узком экране (см. media ниже). */
.nav-scrim{display:none}

.view{grid-area:view;overflow-y:auto;padding:18px;min-width:0}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.view-head h1{margin:0;font-size:21px;font-weight:800}
.view-head .sub{color:var(--dim);font-size:13px;margin-top:2px}
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Карточки/панели ---------- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
/* Карточка «магазин + профиль» на экране настроек. Набор классов и вид — как
   в мобильной кассе, чтобы одно и то же место в двух кассах выглядело одинаково.
   Это кнопка, а не блок: по нажатию открывается правка названия и имени. */
.set-hero{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#0EA5E9,#2563EB);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;color:#fff;max-width:560px;width:100%;border:0;text-align:left;font:inherit;cursor:pointer}
.set-hero:hover{filter:brightness(1.05)}
.set-hero:active{transform:scale(.99)}
.set-ava{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800}
.set-hero-main{min-width:0;display:block;flex:1 1 auto}
.set-hero-name{display:block;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-hero-sub{display:block;font-size:12.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* Почта владельца под именем. Кегль ниже имени и приглушена: это справка
   «под каким адресом магазин», а не то, что читают каждый день. */
.set-hero-mail{display:block;font-size:12px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.set-hero-role{display:inline-block;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22);border-radius:99px;padding:3px 10px;margin-top:6px}
.set-hero-edit{margin-left:auto;flex:none;font-size:17px;opacity:.85}
.card h3{margin:0 0 12px;font-size:15px;font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow)}
.stat .s-label{color:var(--dim);font-size:12.5px;font-weight:600}
.stat .s-value{font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .s-sub{color:var(--dim-2);font-size:12px;margin-top:2px}

/* ---------- Таблицы ---------- */
.tbl-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--dim);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--panel-2)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--chip-dim);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:default}
.tbl tbody tr.rowbtn{cursor:pointer}
.tbl tbody tr.rowbtn:hover{background:var(--panel-3)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dim{color:var(--dim);font-size:12.5px}
/* Колонка названия: в широкой таблице длинное имя раздвигало остальные
   колонки за край экрана. Ограничиваем ширину — текст переносится. */
.tbl td.nm{max-width:320px;white-space:normal;overflow-wrap:anywhere}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--danger-soft);color:var(--danger)}
.chip-dim{background:var(--chip-dim);color:var(--dim)}
.chip-blue{background:var(--primary-soft);color:var(--primary)}
.empty-note{padding:40px 16px;text-align:center;color:var(--dim-2);font-size:14px}

/* ---------- Экран продажи ---------- */
.sale-layout{display:grid;grid-template-columns:1fr 390px;gap:16px;height:calc(100dvh - 60px - 36px);min-height:420px}
.sale-left{display:flex;flex-direction:column;min-width:0;min-height:0}
.sale-toolbar{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.cat-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}
.cat-chip{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--border);background:var(--panel);font-size:14px;font-weight:600;color:var(--dim);display:inline-flex;align-items:center;gap:8px}
.cat-chip .dot{width:10px;height:10px;border-radius:50%}
.cat-chip.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.product-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;gap:12px;align-content:start;padding:2px 2px 20px}
.p-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .06s,border-color .12s}
.p-card:hover{border-color:var(--primary)}
.p-card:active{transform:scale(.97)}
/* Квадратная плитка, фото вписано целиком: у товаров фотографии разного
   формата, и обрезка по краям съедала как раз этикетку с названием. */
.p-card .p-img{aspect-ratio:1/1;flex:0 0 auto;background:var(--panel-2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.p-card .p-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.p-card .p-img .noimg{font-size:30px;opacity:.35}
.p-card .p-stock{position:absolute;top:6px;right:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.92);color:#5B6B7E}
.p-card .p-stock.low{color:#DC2626}
/* Звезда лежит ВНУТРИ кнопки товара: промах мимо неё добавляет товар в чек.
   36px вместо 26px и контрастнее — попасть проще, ошибиться труднее. */
.p-card .p-fav{position:absolute;top:4px;left:4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;border-radius:99px;background:rgba(255,255,255,.94);color:var(--dim-3);cursor:pointer;user-select:none;transition:transform .08s,color .12s}
.p-card .p-fav:hover{transform:scale(1.15)}
.p-card .p-fav.on{color:#D97706}
.p-card .p-body{padding:9px 11px 11px}
.p-card .p-name{font-size:13.5px;font-weight:600;line-height:1.25;max-height:2.5em;overflow:hidden}
.p-card .p-price{font-size:14.5px;font-weight:800;margin-top:5px;color:var(--primary);font-variant-numeric:tabular-nums}
/* Штрихкод (в комиссионке — IMEI) в карточке товара и в корзине.
   Моноширинный: цифры одинаковой ширины, столбик кодов читается сверху вниз
   и глаз сам находит различие между двумя похожими телефонами. Приглушённый
   и мелкий — это справка, а не второе название. Строка одна, длинный код
   обрезается многоточием, чтобы карточка не выросла и сетка не поехала. */
.p-card .p-code,.c-item .c-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.3;letter-spacing:.02em;
  color:var(--dim);opacity:.85;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-item .c-code{font-size:11px;margin-top:2px}

.cart{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);min-height:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.cart-head b{font-size:15.5px}
.cart-items{flex:1 1 auto;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.cart-head,.cart-foot{flex:0 0 auto}
.cart-empty{padding:44px 20px;text-align:center;color:var(--dim-2)}
.c-item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--chip-dim)}
.c-item .c-name{font-weight:600;font-size:14px}
.c-item .c-price{color:var(--dim);font-size:12.5px}
.c-item .c-total{font-weight:800;font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums;align-self:center}
.c-qty{display:flex;align-items:center;gap:8px;grid-column:1/-1}
/* 46px, а не 40×38: это самое частое действие кассы, и по нему промахиваются
   чаще всего — рядом стоит «удалить». Ориентир Apple HIG 44pt / Material 48dp. */
.c-qty button{width:46px;height:46px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);font-size:20px;font-weight:700;color:var(--text)}
.c-qty .q-val{min-width:74px;height:46px;border:1px solid var(--border);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--panel);font-variant-numeric:tabular-nums}
.c-qty .q-unit{color:var(--dim-2);font-size:12px}
.c-qty .c-del{margin-left:auto;color:var(--danger);background:var(--danger-soft);border-color:var(--danger-edge)}
/* Своя цена в чеке. Кнопка-инструмент рядом со «%»: спокойная, пока цена
   каталожная, и зелёная, когда её подняли, — наценка должна быть видна с
   одного взгляда, а не только в мелком тексте строки. margin-left:auto стоит
   ТОЛЬКО здесь: у трёх кнопок с auto место делилось бы между ними и они
   расползались по строке. */
.c-qty .c-tool{margin-left:auto;color:var(--dim);background:var(--panel-2);border-color:var(--border);font-size:17px}
.c-qty .c-tool.c-on{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-edge)}
.c-qty .c-tool ~ .c-del{margin-left:0}
/* Каталожная цена рядом с поднятой — зачёркнутой и приглушённой. */
.c-item .c-price s{opacity:.6}
/* Нехватка товара в строке чека: единственное место, где кассир заметит
   опечатку в количестве до того, как возьмёт деньги. */
.c-item .c-short{color:var(--danger);font-size:12px;font-weight:600;margin-top:2px}
.cart-foot{border-top:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.cart-line{display:flex;justify-content:space-between;font-size:14px;color:var(--dim)}
.cart-line b{color:var(--text);font-variant-numeric:tabular-nums}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:800}
.cart-total .t-sum{font-size:24px;font-variant-numeric:tabular-nums;transition:color .16s,transform .16s}
/* Короткая вспышка итога: на телефоне чек внизу, и без неё непонятно,
   попал товар в чек или нет. */
.cart-total.bump .t-sum{color:var(--ok);transform:scale(1.06)}
.cart-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* ---------- Модальные окна ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,27,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;animation:fade .12s}
.modal{background:var(--panel);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:92dvh;display:flex;flex-direction:column;animation:pop .14s}
.modal.modal-wide{max-width:760px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head b{font-size:17px}
.modal-x{width:44px;height:44px;border:none;background:var(--panel-2);border-radius:11px;font-size:17px;color:var(--dim)}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Выбор клиента: долг прямо в строке ----------
   Кассир должен узнать о долге, пока ВЫБИРАЕТ человека, а не на проведении
   чека. Цвета только токенами: тёмные темы переопределяют --danger-* одним
   блоком внизу файла, и плашка долга там не белеет. */
.cp-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.cp-chip{min-height:34px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);font-size:13px;font-weight:700}
.cp-chip:hover{border-color:var(--border-2)}
.cp-chip.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.cp-chip i{font-style:normal;color:var(--danger)}
.cp-list{max-height:50dvh;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.cp-row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;text-align:left}
.cp-row:hover{border-color:var(--border-2);background:var(--panel-2)}
.cp-row.debt{border-color:var(--danger-edge)}
.cp-ava{flex:0 0 38px;height:38px;border-radius:12px;background:var(--panel-2);border:1px solid var(--border);color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800}
.cp-ava.debt{background:var(--danger-soft);border-color:var(--danger-edge);color:var(--danger)}
.cp-nm{flex:1 1 auto;min-width:0}
.cp-nm b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-nm small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-debt{flex:none;text-align:right;min-width:92px}
/* Номер карты лояльности, по которому нашёлся клиент (28.09.2026). Не
   <small>: тот на узком экране прячется, а номер кассир сверяет с картой. */
.cp-card{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* Баллы клиента в списке выбора (28.09.2026) — метка под именем. */
.cp-pts{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-pts svg{flex:none}
.cp-debt b{display:block;font-size:15.5px;font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-debt b.none{color:var(--dim-2)}
.cp-debt small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap}
.cp-warn{color:var(--warn)}
.cp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--dim)}
.cp-foot b{color:var(--danger);font-variant-numeric:tabular-nums}
.cp-foot:empty{display:none;margin:0;padding:0;border:0}
/* Узкий экран: телефон уступает место сумме долга — он есть в карточке
   клиента, а долг кассиру нужен именно здесь. */
@media(max-width:560px){
  .cp-nm small{display:none}
  .cp-debt{min-width:0}
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* ---------- Оплата ---------- */
.pay-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.pay-type{min-height:56px;border-radius:12px;border:2px solid var(--border);background:var(--panel);font-size:14px;font-weight:700;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pay-type .ico{font-size:19px}
.pay-type.active{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.pay-big{font-size:26px;font-weight:800;text-align:center;padding:8px 0 2px;font-variant-numeric:tabular-nums}
.pay-change{text-align:center;font-size:15px;color:var(--dim);margin-bottom:10px}
.pay-change b{color:var(--ok);font-size:18px}
.pay-change b.neg{color:var(--danger)}
.quick-cash{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.quick-cash button{min-height:48px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);font-weight:700;font-variant-numeric:tabular-nums}
/* Выбранная сумма: следующий тап по ней проводит продажу — говорим об этом видом. */
.quick-cash button.chosen{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* ---------- Numpad ---------- */
.numpad-backdrop{position:fixed;inset:0;background:rgba(15,27,42,.45);display:flex;align-items:flex-end;justify-content:center;z-index:120}
@media(min-width:700px){.numpad-backdrop{align-items:center}}
.numpad{background:var(--panel);border-radius:20px 20px 0 0;width:100%;max-width:420px;padding:18px;box-shadow:var(--shadow-lg)}
@media(min-width:700px){.numpad{border-radius:20px}}
.numpad-title{text-align:center;color:var(--dim);font-size:14px;font-weight:600}
.numpad-value{text-align:center;font-size:32px;font-weight:800;padding:10px 0 14px;font-variant-numeric:tabular-nums;min-height:60px}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.numpad-grid button{min-height:58px;border-radius:14px;border:1px solid var(--border);background:var(--panel-2);font-size:22px;font-weight:700;color:var(--text)}
.numpad-grid button:active{background:var(--primary-soft)}
.numpad-actions{display:grid;grid-template-columns:1fr 2fr;gap:9px;margin-top:12px}

/* ---------- Тосты ---------- */
.toast-root{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--toast-ink);color:var(--panel);padding:12px 20px;border-radius:12px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow-lg);animation:pop .15s;max-width:90vw}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}

/* ---------- Фото товара ---------- */
.photo-row{display:flex;gap:10px;flex-wrap:wrap}
.photo-slot{width:84px;height:84px;border-radius:12px;border:1.5px dashed var(--border-2);background:var(--panel-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .ph-del{position:absolute;top:2px;right:2px;width:32px;height:32px;border-radius:9px;border:none;background:rgba(15,27,42,.7);color:#fff;font-size:14px;line-height:1}
/* ✎ — переобрезать снимок (18.09.2026). Стоит в НИЖНЕМ левом углу, по
   диагонали от ✕: кнопки маленькие, а промах удаляет фото. */
.photo-slot .ph-crop{position:absolute;left:2px;bottom:2px;width:32px;height:32px;border-radius:9px;border:none;background:rgba(15,27,42,.7);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.photo-slot .ph-crop:hover,.photo-slot .ph-del:hover{background:rgba(15,27,42,.9)}
.photo-add{width:84px;height:84px;border-radius:12px;border:1.5px dashed var(--border-2);background:var(--panel);color:var(--dim-2);font-size:26px}

/* ---------- Списки-строки документов ---------- */
.doc-lines{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.doc-line{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:9px 12px}
.doc-line .dl-name{font-weight:600;font-size:14px;min-width:0}
.doc-line .dl-name small{display:block;color:var(--dim-2);font-weight:400}
.doc-line .dl-qty,.doc-line .dl-price{min-width:74px;min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;padding:0 8px}
.doc-line .dl-del{width:44px;height:44px;border-radius:11px;border:none;background:var(--danger-soft);color:var(--danger);font-size:16px}
/* Инвентаризация: отметка «проверено» на строке */
.doc-line .dl-check{width:44px;height:44px;border-radius:11px;border:1px solid var(--border);background:var(--panel);color:var(--dim-2);font-size:17px;font-weight:800;cursor:pointer}
.doc-line .dl-check.on{background:var(--ok);border-color:var(--ok);color:var(--on-primary)}
/* Приход: две цены на строке — закупка и продажа, с подписями */
.doc-line-wide{grid-template-columns:1fr auto auto auto auto}
.doc-line-wide .dl-price{display:inline-flex;flex-direction:column;gap:1px;min-height:44px;padding:4px 10px}
.doc-line-wide .dl-price small{font-size:9.5px;color:var(--dim-2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;line-height:1}
.doc-line-wide .dl-price.dl-changed{border-color:var(--primary);background:var(--primary-soft)}
.doc-line-wide .dl-price.dl-changed span,.doc-line-wide .dl-price.dl-changed small{color:var(--primary)}
@media(max-width:640px){.doc-line-wide{grid-template-columns:1fr auto auto}}

/* ---------- Сотрудники: права и ключ ---------- */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0 4px}
.perm-item{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 11px;border:1px solid var(--border);border-radius:11px;background:var(--panel);cursor:pointer;user-select:none}
.perm-item input{width:19px;height:19px;accent-color:var(--primary);flex:0 0 19px}
.perm-item span{font-size:13.5px;font-weight:500;line-height:1.25}
.perm-item.checked{border-color:var(--primary);background:var(--primary-soft)}
.perm-section{color:var(--dim);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;grid-column:1/-1}
.key-display{background:var(--primary-soft);border:1.5px dashed var(--primary);border-radius:14px;padding:18px;text-align:center;margin:12px 0}
.key-display .key-code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:21px;font-weight:800;letter-spacing:1.5px;color:var(--primary);word-break:break-all}
.key-display .key-note{color:var(--dim);font-size:12.5px;margin-top:8px;line-height:1.5}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}

/* ---------- Степпер (− значение +) для инвентаризации ---------- */
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper button{border:1px solid var(--border);color:var(--text);cursor:pointer}
.stepper .st-minus,.stepper .st-plus{width:42px;height:42px;border-radius:10px;background:var(--panel-2);font-size:19px;font-weight:700}
.stepper .st-minus:active,.stepper .st-plus:active{background:var(--primary-soft);border-color:var(--primary)}
.stepper .st-val{min-width:66px;height:42px;border-radius:10px;background:var(--panel);font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;padding:0 10px}

/* ---------- Статистика ---------- */
.s-value.pos{color:var(--ok)}
.s-value.neg{color:var(--danger)}
.stats-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:880px){.stats-two{grid-template-columns:1fr}}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--dim);font-weight:600}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:190px;padding-top:6px;overflow-x:auto}
.chart-col{flex:1 1 0;min-width:14px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-stack{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.chart-stack .cb{width:30%;max-width:14px;min-width:4px;border-radius:4px 4px 0 0;display:inline-block}
.chart-label{font-size:10.5px;color:var(--dim-2);height:14px;white-space:nowrap}
.hbar{margin-bottom:12px}
.hbar-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:5px}
.hbar-top span{color:var(--dim);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-top b{font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar-track{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.hbar-fill{height:100%;border-radius:99px;background:var(--primary)}

/* Полоса «состав оплат» в блоке «Сотрудники»: длина всей полосы — выручка
   сотрудника относительно лучшего, сегменты внутри — наличные / карта / долг.
   Зазор 2px между сегментами, чтобы соседние цвета не сливались. */
.pay-split{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:110px}
.pay-split-in{display:flex;gap:2px;height:100%;min-width:6px}
.pay-split-in i{display:block;height:100%;border-radius:99px;min-width:3px}

/* ---------- Товары за период: лучшие / худшие ---------- */
/* Две колонки одной карточки. Шапки колонок выровнены по высоте (.tp-sub с
   min-height): слева в этой строке доля периода, справа — переключатель
   вкладок, и без общей высоты таблицы разъезжались бы по вертикали.
   Полоса под названием — доля товара от ЛУЧШЕГО за период, одна линейка на
   обе колонки, поэтому в правой она честно вырождается в ниточку. */
.tp-note{margin:-6px 0 12px;font-size:12.5px;color:var(--dim-2)}
.tp-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tp-cl{font-size:12.5px;color:var(--dim-2);font-weight:600}
.tp-lim{display:flex;align-items:center;gap:8px}
.tp-col{min-width:0}
.tp-col h4{margin:0 0 6px;font-size:14.5px;font-weight:700}
.tp-sub{min-height:46px;margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--dim);font-weight:600}
.tp-wrap{border:none;box-shadow:none;background:transparent}
.tp-wrap .tbl th{background:transparent;padding:8px 10px}
.tp-wrap .tbl td{padding:9px 10px}
.tp-bar{height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:6px;max-width:220px}
.tp-bar i{display:block;height:100%;border-radius:99px}
.tp-out{color:var(--danger)}
.tp-foot{margin-top:8px;font-size:12.5px;color:var(--dim-2)}
.tp-col .empty-note{padding:28px 12px}
/* На узком экране колонки встают друг под друга (правило .stats-two выше), и
   выравнивать шапки уже не с чем: пустая полоса над таблицей только мешает. */
@media(max-width:880px){.tp-sub{min-height:0}}

/* ---------- Сегменты периодов ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{min-height:38px;padding:0 14px;border-radius:9px;border:none;background:transparent;color:var(--dim);font-size:13.5px;font-weight:600}
.seg button.active{background:var(--primary);color:var(--on-primary)}

/* ---------- Печать чека ---------- */
#print-area{display:none}
@media print{
  body>*{display:none!important}
  /* Чек рисует printReceipt (core.js): своя ширина ленты и классы .rc-*.
     Правила старой разметки .r-center / .r-line / .r-total удалены — не генерируются. */
  /* width:auto — ширину ленты задаёт printReceipt (58/72/80 мм из настроек).
     Жёсткие 72mm здесь перебивали выбор пользователя. */
  #print-area{display:block!important;font:12px/1.4 "Courier New",monospace;color:#000;width:auto}
  #print-area hr{border:none;border-top:1px dashed #000;margin:6px 0}
  /* Режим «документ» (накладная прихода, акт инвентаризации): обычный лист, таблица. */
  #print-area.doc{width:auto;font:12px/1.5 Arial,Helvetica,sans-serif}
  #print-area.doc h1{font-size:16px;margin:0;text-align:center}
  #print-area.doc .d-meta{font-size:11px;margin:2px 0;text-align:center}
  #print-area.doc table{width:100%;border-collapse:collapse;margin-top:10px}
  #print-area.doc th,#print-area.doc td{border:1px solid #000;padding:4px 6px;font-size:11px;text-align:left}
  #print-area.doc th{background:#eee}
  /* Вторая строка ячейки (штрихкод под названием товара в накладной продажи):
     мельче и серее названия, чтобы читалось как подпись, а не как второй
     товар. Рисуется из printDocument при ячейке вида {text, sub}. */
  #print-area.doc td .d-sub{margin-top:1px;font-size:9.5px;color:#555}
  /* Длинная накладная переносится на второй лист. Шапку таблицы повторяем на
     каждом листе, а строку не рвём пополам: иначе со второй страницы колонки
     безымянные и понять, где количество, а где цена, нельзя. */
  #print-area.doc thead{display:table-header-group}
  #print-area.doc tr{page-break-inside:avoid;break-inside:avoid}
  #print-area.doc td.num,#print-area.doc th.num{text-align:right}
  #print-area.doc td.chk,#print-area.doc th.chk{text-align:center}
  /* Квадрат для галочки в листе сборки заказа: сборщик отмечает в нём
     собранное прямо в зале. Рамка, а не знак «□»: у части шрифтов принтера
     этого знака нет. Незалитый — в залитый нечем поставить отметку. */
  #print-area.doc .d-box{display:inline-block;width:11px;height:11px;border:1px solid #000}
  /* Нехватка остатка: цвет И жирность. Монохромный принтер цвета не покажет
     вовсе, а на листе сборки это самая важная ячейка. */
  #print-area.doc td.bad,#print-area.doc td .d-sub.bad{color:#b42318;font-weight:700}
  #print-area.doc .d-totals{margin-top:8px;text-align:right;font-size:12px}
  #print-area.doc .d-sign{margin-top:22px;display:flex;justify-content:space-between;font-size:11px}
  /* Итог прописью — над подписями, чтобы читался вместе с ними. */
  #print-area.doc .d-words{margin-top:10px;font-size:11px}
  /* Место для печати: под подписью продавца, слева. Пунктир, а не сплошная —
     иначе на слабом принтере круг спорит с оттиском самой печати. */
  #print-area.doc .d-stamp{margin-top:10px;width:24mm;height:24mm;border:1px dashed #777;border-radius:50%;font-size:10px;color:#555;text-align:center;line-height:24mm}
}

/* ---------- Адаптив ---------- */
@media(max-width:1060px){
  .sale-layout{grid-template-columns:1fr 340px}
}
@media(max-width:880px){
  /* Шапка на узком экране: кнопок в ней стало пять (уведомления, тема, язык,
     обновить, выход), и в прежние 46 px с зазором 12 они перестают влезать —
     правый край уезжал за экран вместе с кнопкой выхода. Кнопки ужимаются,
     зазоры сжимаются; ниже 640 из шапки уходит ещё и язык. */
  .topbar{gap:8px;padding:0 10px}
  .topbar-right{gap:6px}
  .topbar-tools{gap:2px;padding:2px}
  .topbar .icon-btn{width:38px;height:38px}
  .topbar .icon-btn svg{width:19px;height:19px}
  .topbar-store{padding:3px 6px 3px 3px;gap:8px}
  .topbar-store .store-ava{flex-basis:32px;height:32px;border-radius:10px;font-size:14px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "view"}
  .sidenav{position:fixed;top:60px;left:0;bottom:0;width:264px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  .sidenav.open{transform:none}
  /* Подложка под выехавшим меню: нажатие мимо закрывает его, а витрина под
     ним видна, но не принимает случайные касания. */
  .nav-scrim{display:block;position:fixed;inset:0;z-index:24;background:rgba(15,27,42,.35);opacity:0;pointer-events:none;transition:opacity .2s}
  .app.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .nav-toggle{display:inline-flex}
  /* Экран продажи занимает ровно высоту окна: товары скроллятся сами,
     чек снизу — позиции скроллятся внутри, клиент и кнопки оплаты всегда видны. */
  .sale-layout{display:flex;flex-direction:column;gap:10px;height:calc(100dvh - 60px - 24px);min-height:0}
  /* Витрине — минимум два ряда карточек, а не один: иначе кассир листает
     товары в окошко высотой в одну позицию. */
  .sale-left{flex:1 1 auto;min-height:220px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .cart{flex:0 0 auto;max-height:38dvh}
  /* Тап по шапке чека разворачивает его на почти весь экран и обратно. */
  .cart.expanded{max-height:80dvh}
  .cart-head{cursor:pointer;user-select:none}
  .cart-head::after{content:"⌃";margin-left:6px;color:var(--dim-2);font-size:13px;display:inline-block;transform:rotate(180deg) translateY(2px);transition:transform .15s}
  .cart.expanded .cart-head::after{transform:rotate(0deg) translateY(2px)}
  .cart-items{min-height:64px}
  .view{padding:12px}
  .pay-types{grid-template-columns:repeat(2,1fr)}
}
/* ---------- Телефон: таблицы становятся карточками ----------
   8 колонок на узком экране означают горизонтальную прокрутку: чтобы увидеть
   сумму, надо промотать вправо и потерять из виду номер чека. Разметка та же,
   подписи берутся из data-l у ячеек. На компьютере остаётся обычная таблица. */
@media(max-width:640px){
  table.tbl.cards,
  table.tbl.cards tbody,
  table.tbl.cards tr,
  table.tbl.cards td{display:block;width:auto}
  table.tbl.cards thead{display:none}
  .tbl-wrap:has(table.tbl.cards){border:none;box-shadow:none;background:transparent;overflow:visible}
  table.tbl.cards tr{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);margin-bottom:10px;padding:10px 14px}
  table.tbl.cards tr.rowbtn:hover{background:var(--panel)}
  table.tbl.cards td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border:none;padding:5px 0;text-align:left}
  table.tbl.cards td::before{content:attr(data-l);color:var(--dim);font-size:12px;font-weight:600;
    flex:0 0 auto;white-space:nowrap}
  table.tbl.cards td:empty,
  table.tbl.cards td[data-l=""]:empty{display:none}
  table.tbl.cards td.num{text-align:right}
  /* Первая ячейка карточки — заголовок: без подписи и покрупнее. */
  table.tbl.cards td.card-head{display:block;font-size:15px;padding-bottom:8px;
    border-bottom:1px solid var(--border);margin-bottom:6px}
  table.tbl.cards td.card-head::before{content:none}
  /* Действие внизу карточки — во всю ширину, чтобы попадать пальцем. */
  table.tbl.cards td.card-act{display:block;padding-top:10px}
  table.tbl.cards td.card-act::before{content:none}
  table.tbl.cards td.card-act .btn{width:100%}
}

/* Телефон: в шапке остаются только те кнопки, без которых нельзя работать. */
@media(max-width:640px){
  /* Язык уходит из шапки — он остался в «Настройках» карточкой «Язык», а
     тема из настроек убрана совсем, поэтому её кнопка остаётся здесь всегда. */
  #lang-btn{display:none}
  /* «онлайн» — обычное состояние, и место на телефоне оно занимает зря.
     Плашку показываем, только когда сети НЕТ: это единственное, о чём кассиру
     нужно знать, и тогда ей не жалко ширины. */
  .net-badge:not(.off){display:none}
}

@media(max-width:480px){
  .field-row{grid-template-columns:1fr}
  .doc-line{grid-template-columns:1fr auto auto;grid-auto-rows:auto}
  /* На телефоне часы не прячем целиком, а сжимаем до времени: дату видно
     в системной строке, а вот время смены нужно прямо здесь. */
  /* Кружок магазина уходит: на 390 px он отнимал у названия магазина
     четверть строки, и «Магазин «Бодом»» превращался в «Ма…». */
  .topbar-store .store-ava{display:none}
  .clock{min-width:0;padding:4px 8px}
  .clock .clock-date{display:none}
  .clock .clock-time{font-size:15px}
  .clock .clock-time small{display:none}
}

/* ---------- Телефон: нижняя навигация + PWA (вырез iPhone) ---------- */
.topbar{padding-top:env(safe-area-inset-top)}
.app{grid-template-rows:calc(60px + env(safe-area-inset-top)) 1fr}
.sidenav{top:calc(60px + env(safe-area-inset-top))}
.bottom-nav{display:none}
@media(max-width:640px){
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
    background:var(--panel);border-top:1px solid var(--border);z-index:45;padding:6px 6px env(safe-area-inset-bottom)}
  .bottom-nav button{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border-radius:12px;
    font:inherit;font-size:10.5px;font-weight:700;color:var(--dim);min-width:0}
  .bottom-nav button .bn-ico{display:flex;align-items:center;justify-content:center;height:24px;font-size:19px;line-height:1}
  .bottom-nav button .bn-ico svg{width:22px;height:22px;display:block}
  .bottom-nav button .bn-txt{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bottom-nav button.active{color:var(--primary);background:var(--primary-soft)}
  .view{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .sale-layout{height:calc(100dvh - 60px - env(safe-area-inset-top) - 24px - 56px - env(safe-area-inset-bottom))}
  .sidenav{bottom:calc(62px + env(safe-area-inset-bottom))}
  /* iOS Safari приближает страницу при фокусе в поле со шрифтом <16px */
  input,select,textarea,.search-box input,.field input,.field select{font-size:16px!important}
}

/* --- Регистрация и восстановление пароля --- */
.login-success{background:var(--ok-soft);color:var(--ok-deep);border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.auth-links{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.auth-links:has(> :only-child){justify-content:center}
.link-btn{background:none;border:none;color:var(--primary);font-size:13.5px;font-weight:700;padding:4px 2px;cursor:pointer}
.link-btn:disabled{color:var(--dim-2);cursor:default}
.code-input{text-align:center;font-size:24px!important;letter-spacing:10px;font-weight:700;font-family:"SF Mono",ui-monospace,Menlo,monospace}

/* --- Новый товар: цены и остаток (создают приход) --- */
.pf-money-card{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 14px 2px;margin-bottom:14px}
.pf-money-head{font-size:14.5px;font-weight:800;margin-bottom:3px}
.pf-money-note{font-size:12.5px;color:var(--dim);margin-bottom:12px}
.pf-money{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pf-money .field input{background:var(--panel);font-variant-numeric:tabular-nums}
.pf-margin:empty{display:none}
.pf-margin{border-top:1px dashed var(--border-2);padding:9px 0 11px;margin-top:-2px}
.pf-mrow{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--dim);padding:2px 0}
.pf-mrow b{color:var(--text);font-variant-numeric:tabular-nums}
.pf-mrow.bad b{color:var(--danger)}
.pf-mwarn{margin-top:6px;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:600}
@media (max-width:760px){.pf-money{grid-template-columns:1fr}}

/* Карточка, которую касса продать не даст: нет остатка или нет цены */
.p-card.p-off{opacity:.6}
.p-card.p-off:hover{border-color:var(--border-2)}
.p-card .p-price.p-noprice{color:var(--danger);font-size:12.5px;font-weight:700}
/* Без права «Цена прихода» поле себестоимости не рисуется — колонки две */
.pf-money-2{grid-template-columns:1fr 1fr}

/* Счётчик товаров на чипсе категории */
.cat-chip .cc-n{font-size:12px;font-weight:800;opacity:.55;font-variant-numeric:tabular-nums}
.cat-chip.active .cc-n{opacity:.85}
#pp-cats .cat-chips{margin-bottom:10px;padding-bottom:6px}

/* На активном чипсе точка категории тонет в заливке — делаем её белой */
.cat-chip.active .dot{background:var(--on-primary)!important}

/* Причины списания: чипсы переносятся строками, а не уезжают вбок. Их всего
   семь, и искать нужную горизонтальной прокруткой в модальном окне неудобно. */
.wo-reasons{display:flex;flex-wrap:wrap;gap:8px}
.wo-reasons .cat-chip{min-height:38px;padding:0 14px}

/* ---------- Свёрнутое меню (полоска с иконками) ---------- */
/* Кассир жмёт ☰ — меню сжимается до иконок, витрина получает ещё один ряд
   карточек. Состояние помнится в браузере кассы (App.NAV_MINI_KEY). */
.app.nav-mini{grid-template-columns:68px 1fr}
.app.nav-mini .nv-scroll{padding:10px 8px 6px}
.app.nav-mini .nav-item,
.app.nav-mini .nv-collapse,
.app.nav-mini .nav-build{justify-content:center;gap:0;padding:0}
.app.nav-mini .nav-txt{display:none}
.app.nav-mini .nav-item .nav-ico svg{width:21px;height:21px}
.app.nav-mini .nav-sep{margin:10px 2px}
/* Подпись группы в полоске не помещается — от неё остаётся черта. */
.app.nav-mini .nv-group{padding:10px 4px 6px}
.app.nav-mini .nv-group span{display:none}
.app.nav-mini .nv-group:first-child{padding-top:0}
.app.nav-mini .nv-foot{padding-left:8px;padding-right:8px}
.app.nav-mini .nav-build{min-height:30px}

/* ---------- Плитки склада на «Товарах» ---------- */
.pr-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.pr-kpi .k{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;box-shadow:var(--shadow);min-width:0}
.pr-kpi .k-l{font-size:12px;color:var(--dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-kpi .k-v{font-size:19px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-kpi .k.buy .k-v{color:var(--warn)}
.pr-kpi .k.sale .k-v{color:var(--primary)}
.pr-kpi .k-sub{font-size:11.5px;color:var(--dim-2);margin-top:2px}
@media(max-width:880px){.pr-kpi{grid-template-columns:1fr 1fr}}

/* ---------- Карточка сущности (товар, клиент) ---------- */
/* Одна раскладка на обе карточки: шапка с аватаром, плитки, факты, списки.
   Плитки берут ту же сетку .pr-kpi, что и склад — иначе внутри модалки и на
   экране «Товары» одни и те же цифры выглядели бы по-разному. */
.ent-card{display:flex;flex-direction:column;gap:14px}
.ent-head{display:flex;gap:14px;align-items:flex-start}
.ent-ava{width:76px;height:76px;border-radius:16px;object-fit:cover;flex:none;background:var(--panel-2)}
.ent-ava-empty{display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--border)}
.ent-title{font-size:18px;font-weight:800;line-height:1.25;word-break:break-word}
.ent-sub{color:var(--dim);font-size:13px;margin-top:3px;word-break:break-word}
.ent-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* Плиток в карточке бывает 3 или 4 — сколько разрешают права. Жёсткие
   четыре колонки .pr-kpi оставляли бы в этом случае пустое место. */
.ent-kpi{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ent-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.ent-fact{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;padding:8px 0;border-bottom:1px dashed var(--border)}
.ent-fact span{color:var(--dim);flex:none}
.ent-fact b{font-variant-numeric:tabular-nums;text-align:right;word-break:break-word}
.ent-sec h4{margin:0 0 9px;font-size:14.5px;font-weight:800}
/* Описание товара: переносы строк из формы сохраняем, длинный текст скроллим
   внутри блока — иначе он выталкивает кнопки модалки за нижний край экрана. */
.ent-desc{font-size:13.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;
  max-height:30dvh;overflow-y:auto}
/* Список внутри карточки прокручивается сам: иначе длинная история покупок
   уводила бы кнопки модалки за нижний край экрана. */
.ent-list{display:flex;flex-direction:column;gap:6px;max-height:40dvh;overflow-y:auto}
.ent-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}
.ent-row b{font-variant-numeric:tabular-nums}

/* ---------- Список выбора в окне (язык) ---------- */
/* Строка на вариант, а не <select>: у языка семь значений, и в закрытом
   списке не видно ни своего среди них, ни того, что выбрано сейчас. Названия
   написаны на самих языках — свой человек узнаёт, даже если интерфейс чужой.

   07.09 окно причёсано: строка доросла до размера кнопки кассы, код языка
   стал плашкой, а отметка — кружком у КАЖДОЙ строки (пустой у остальных,
   залитый у текущего). Раньше галочка была только у выбранного, и до
   нажатия список читался как голый текст без оформления. */
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--panel);
  color:var(--text);font:inherit;font-size:15.5px;font-weight:700;text-align:left;
  transition:background .12s,border-color .12s,transform .05s}
.pick-row:hover{border-color:var(--border-2);background:var(--panel-2)}
.pick-row:active{transform:scale(.995)}
.pick-row.active{border-color:var(--primary);background:var(--primary-soft)}
.pick-row:disabled{opacity:.55}
/* Код языка — плашка, а не бледные буквы: по ней строку находят взглядом,
   даже когда само название написано незнакомым алфавитом. */
.pick-code{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:28px;padding:0 8px;border-radius:9px;background:var(--chip-dim);
  font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--dim)}
.pick-row.active .pick-code{background:var(--primary);color:var(--on-primary)}
.pick-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-row.active .pick-name{color:var(--primary-dark)}
/* Кружок отметки стоит у каждой строки: так сразу видно, что здесь ВЫБИРАЮТ,
   а не просто читают список. Внутри пусто у всех, кроме текущего языка. */
.pick-on{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border-2);
  font-size:13px;font-weight:800;line-height:1;color:transparent}
.pick-row.active .pick-on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.ent-row small{display:block;color:var(--dim-2);font-size:11.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .ent-facts{grid-template-columns:1fr}
  .ent-ava{width:60px;height:60px}
}

/* ---------- Выбор месяца ---------- */
.mpick{display:flex;flex-direction:column;gap:6px;max-height:60dvh;overflow-y:auto}
.mpick-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:0 15px;border:1px solid var(--border);background:var(--panel-2);border-radius:12px;font-size:15.5px;font-weight:700;color:var(--text);text-align:left}
.mpick-item:hover{background:var(--panel)}
.mpick-item.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}
.mpick-item b{color:var(--primary);font-size:16px}
/* «Показать все месяцы» — выход из короткого списка (18.09.2026): по
   умолчанию в выборе только месяцы с данными, но пустой месяц иногда
   нужен (сверить, что там действительно пусто). */
.mpick-item.mpick-more{justify-content:center;background:transparent;border-style:dashed;color:var(--dim-2);font-weight:700;min-height:44px;font-size:14px}
.mpick-item.mpick-more:hover{background:var(--panel-2);color:var(--text)}
/* Строка периодов над экраном: та же полоса чипов, что у категорий */
.period-row .cat-chips{margin-bottom:6px}

/* ---------- Печать штрихкодов ---------- */
/* Две колонки: слева настройки печати, справа товары. На узком экране
   настройки уезжают наверх — иначе таблица с количеством не помещается. */
.lb-grid{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
@media (max-width:1100px){.lb-grid{grid-template-columns:1fr}}
.lb-card{padding:14px 16px}
.lb-card h3{margin:0 0 6px;font-size:15px}

.lb-sheets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lb-sheet{text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--panel);line-height:1.25}
.lb-sheet b{display:block;font-size:13px}
.lb-sheet span{display:block;font-size:11px;color:var(--dim)}
.lb-sheet.on{border-color:var(--primary);background:rgba(37,99,235,.08)}
.lb-sheet.on b{color:var(--primary)}

.lb-checks{display:flex;flex-direction:column;gap:6px}
.lb-check{display:flex;align-items:center;gap:9px;min-height:38px;padding:0 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel);font-size:13.5px;font-weight:600;color:var(--dim);text-align:left}
.lb-check .lb-box{width:20px;height:20px;flex:0 0 auto;border:1.5px solid var(--border-2);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.lb-check.on{border-color:var(--primary);color:var(--text)}
.lb-check.on .lb-box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

.lb-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.lb-sum>div{background:var(--panel-2);border-radius:10px;padding:8px 10px;text-align:center}
.lb-sum span{display:block;font-size:11px;color:var(--dim)}
.lb-sum b{font-size:17px;font-variant-numeric:tabular-nums}

.lb-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.lb-bulk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.lb-bulk .dim{font-size:12.5px}
.lb-issue{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35);border-radius:11px;padding:9px 12px;margin-bottom:10px;font-size:13.5px}

.lb-tbl td{vertical-align:middle}
.lb-qty{display:inline-flex;align-items:center;gap:4px}
.lb-qty input{width:64px;text-align:center;min-height:34px;border:1px solid var(--border);border-radius:9px;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--panel)}
.lb-qty input:disabled{opacity:.45}
.lb-step{width:32px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);
  font-size:16px;font-weight:700;color:var(--dim)}
.lb-step:active{background:var(--primary);color:var(--on-primary)}

/* Выбор дизайна наклейки. Значок — схема из полосок: по одному названию
   «Код сбоку» не догадаться, как это выглядит. */
.lb-tpls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lb-tpl{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:9px 7px;
  border:1px solid var(--border);border-radius:11px;background:var(--panel);line-height:1.2}
.lb-tpl b{font-size:12.5px}
.lb-tpl .lb-tpl-sub{font-size:10.5px;color:var(--dim)}
.lb-tpl-pic{display:block}
.lb-tpl-pic svg{display:block}
.lb-tpl-pic .paper{fill:var(--panel-2);stroke:var(--border-2);stroke-width:1}
.lb-tpl-pic rect{fill:var(--text)}
.lb-tpl-pic .dim{fill:var(--dim)}
.lb-tpl-pic .stroke{stroke:var(--text);fill:none}
.lb-tpl.on{border-color:var(--primary);background:rgba(37,99,235,.08)}
.lb-tpl.on b{color:var(--primary)}
.lb-tpl.on .lb-tpl-pic .paper{fill:var(--panel)}

/* Предпросмотр: те же миллиметры, что уйдут в принтер, — на экране сразу
   видно, влезает ли название на выбранную наклейку. Геометрия самой наклейки
   (.lbl*) генерируется в screens-labels.js: ensureLabelCss — один набор
   правил на предпросмотр и на печать, разойтись они уже не могут. */
.lb-prev{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lb-prev-item{border:1px dashed var(--border-2);border-radius:4px;overflow:hidden;background:#fff;flex:0 0 auto}

/* ---------- Уведомления ---------- */
/* Колокольчик в шапке и цифра на пункте меню. Цифру рисуем и там, и там:
   в свёрнутом меню подписи скрыты, и без бейджа новый заказ виден только
   тому, кто и так открыл раздел. */
.notif-btn{position:relative;overflow:visible}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:var(--on-primary);font-size:11px;font-weight:800;line-height:19px;text-align:center;
  border:2px solid var(--panel);box-sizing:content-box;font-variant-numeric:tabular-nums}
/* Точка вместо числа: заказов нет, но есть на что посмотреть. */
.notif-badge.dot{min-width:9px;width:9px;height:9px;padding:0;background:var(--warn,#f59e0b)}

.nav-item{position:relative}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--danger);
  color:var(--on-primary);font-size:11.5px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
/* В свёрнутом меню подписи нет — цифра прижимается к значку углом и
   уменьшается, иначе она наезжает на сам значок. */
.app.nav-mini .nav-badge{position:absolute;top:2px;right:4px;margin:0;min-width:17px;height:17px;line-height:17px;font-size:10.5px;
  border:2px solid var(--panel);box-sizing:content-box}

.notif-panel{position:fixed;z-index:60;top:58px;right:12px;width:min(370px,calc(100vw - 20px));
  max-height:min(70vh,540px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.18);padding:8px}
.notif-panel h4{margin:6px 8px 8px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.notif-panel h4 .dim{font-weight:600;font-size:12px}
.notif-row{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:8px 10px;border:none;
  background:transparent;border-radius:12px;text-align:left;color:var(--text)}
.notif-row:hover{background:var(--panel-2)}
.notif-row .n-ico{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;font-size:17px;background:var(--panel-2)}
/* Заголовок и пояснение — колонкой: span'ы инлайновые, и без display:block
   они слипались в одну строку («Новые заказыАзиз Каримов»). */
.notif-row .n-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.notif-row .n-title{display:block;font-size:14px;font-weight:700;line-height:1.25}
.notif-row .n-sub{display:block;font-size:12.5px;color:var(--dim);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.notif-row .n-num{flex:0 0 auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;padding-left:2px}
.notif-row.warn .n-ico{background:var(--warn-soft,#fef3c7)}
.notif-row.bad .n-ico{background:var(--danger-soft)}
.notif-row.bad .n-num{color:var(--danger)}
.notif-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;
  border-top:1px solid var(--border);margin-top:6px}
.notif-foot label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);font-weight:600}
.notif-foot input{width:17px;height:17px;accent-color:var(--primary)}
@media(max-width:640px){.notif-panel{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto}}

/* ---------- «Из каталога» — выбор товаров из глобального каталога платформы ---------- */
/* ---------- Карта магазина (настройки витрины) ----------
   Leaflet приезжает с CDN, поэтому его класс стилизуем сами: скругление под
   остальные карточки и скрытая подпись-копирайт, которая на узкой модалке
   налезает на кнопки зума. Высота фиксированная: карте нужен размер ДО того,
   как она отрисуется, от процентов внутри модалки она схлопывается в ноль. */
.ab-map{height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--chip-dim)}
.ab-map .empty-note{padding:24px 12px}
.leaflet-container{border-radius:12px;font:inherit}
.leaflet-control-attribution{display:none}

/* Категории выпадающим списком — только «Каталог Cabix POS»: там их бывает три
   десятка, и активный чипс уезжал за край ленты. Ленты чипсов (.cat-chips) на
   «Товарах», приходе, инвентаризации и возврате остались как были. */
.cat-select-row{display:flex;margin:0 0 10px}
select.cat-select{width:100%;max-width:340px;min-height:40px;padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--panel);color:var(--text);font-size:14px;font-weight:600}
select.cat-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
/* Язык каталога — отдельный от языка кассы (см. getCatalogLang в i18n.js):
   карточки наполняет админ платформы, и на коробке товар может быть подписан
   не на том языке, на котором работает продавец. */
.cs-lang-row{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.cs-lang-lbl{color:var(--dim);font-size:12.5px;font-weight:600;white-space:nowrap}
select.cs-lang{min-width:132px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--text);font-size:13.5px;font-weight:600}
select.cs-lang:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.cs-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;user-select:none;background:var(--panel)}
.cs-row:hover{border-color:var(--border-2)}
.cs-row.cs-on{border-color:var(--primary);background:var(--primary-soft)}
.cs-row.cs-taken{opacity:.55;cursor:default}
.cs-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 44px;border:1px solid var(--border);background:var(--panel-2)}
.cs-noimg{display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.cs-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* Название показываем ЦЕЛИКОМ: обрезка многоточием прятала как раз ту часть,
   по которой товар и отличают (объём, вкус, вес). Длинное — переносится
   на вторую строку, шрифт чуть мельче, чтобы строк не стало три. */
.cs-name{font-weight:600;font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.cs-sub{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex:0 0 26px;font-size:14px}
.cs-row.cs-on .cs-check{background:var(--primary);border-color:var(--primary)}
.cs-check-off{visibility:hidden}
.cs-mark{color:var(--dim);font-size:12px;font-weight:600;white-space:nowrap}

/* =====================================================
   ТЁМНЫЕ ТЕМЫ — те же две, что в iPhone-приложении и в мобильной кассе:
   «Blue» (тёмно-синяя) и «Тёмная» (чёрная). Меняются только переменные,
   ни одно правило вёрстки выше не дублируется.

   Печать чеков и предпросмотр этикеток НЕ трогаем: там цвета физические,
   бумага всегда белая.
   ===================================================== */

html[data-theme="blue"]{
  color-scheme:dark;
  --bg:#0A1429;
  --panel:#122038;
  --panel-2:#0E1B31;
  --panel-3:#0E1B31;
  --border:#23374F;
  --border-2:#33496B;
  --text:#F2F6FC;
  --dim:#A9B8CD;
  --dim-2:#8FA0B7;
  --dim-3:#7C8DA5;
  --primary:#4F8DF7;
  --primary-dark:#6BA2FF;
  --primary-soft:#16294A;
  --danger:#FF7070;
  --danger-soft:#3A1A21;
  --danger-edge:#5C2B34;
  --warn:#F3B863;
  --warn-soft:#3A2C16;
  --ok:#54DE8A;
  --ok-soft:#11311F;
  --ok-edge:#2A5A3C;
  --ok-deep:#7CE8A6;
  --chip-dim:#1A2A45;
  --scroll:#33496B;
  --toast-ink:#050D1B;
  --on-primary:#0A1220;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --login-bg:linear-gradient(160deg,#0A1429 0%,#0E1B31 100%);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --panel:#101012;
  --panel-2:#161619;
  --panel-3:#161619;
  --border:#272729;
  --border-2:#3A3A40;
  --text:#F5F5F7;
  --dim:#A6A6AC;
  --dim-2:#8C8C93;
  --dim-3:#7A7A80;
  --primary:#4F8DF7;
  --primary-dark:#6BA2FF;
  --primary-soft:#15203A;
  --danger:#FF7070;
  --danger-soft:#2B1416;
  --danger-edge:#4A2225;
  --warn:#F3B863;
  --warn-soft:#2B2010;
  --ok:#54DE8A;
  --ok-soft:#102417;
  --ok-edge:#2A4A36;
  --ok-deep:#7CE8A6;
  --chip-dim:#1C1C1F;
  --scroll:#3A3A40;
  --toast-ink:#000000;
  --on-primary:#0A1220;
  --shadow:0 1px 3px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 40px rgba(0,0,0,.7);
  --login-bg:linear-gradient(160deg,#000000 0%,#101012 100%);
}

/* Фотографии товаров на тёмном фоне слегка гасим: белые подложки снимков
   ночью бьют по глазам. */
html[data-theme="blue"] .p-card img,
html[data-theme="dark"] .p-card img{filter:brightness(.94)}

/* Печать. Тема ставит на <html> тёмный фон инлайном (см. index.html): с
   включённой «печатью фона» лист уходил чёрным. Чек и документы печатаются
   своими блоками — там цвета физические. */
@media print{
  html,body{background:#fff!important}
}

/* ---------- Выбор языка на экране входа ---------- */
/* Язык меняли только в «Настройках» — то есть уже ПОСЛЕ входа, и человек,
   который не читает по-русски, до этой настройки не доходил вовсе. */
.login-wrap{position:relative}
.login-lang{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:99px;padding:6px 12px;box-shadow:var(--shadow)}
.login-lang-ico{font-size:15px;line-height:1}
.login-lang select{border:0;background:transparent;color:var(--primary);font-weight:800;font-size:13.5px;min-height:30px;padding:0 2px;appearance:none;-webkit-appearance:none}
.login-lang select:focus{outline:none}


/* Код партнёра в регистрации (2026-08-08). См. mobile.cabix.website — там то же. */
.ref-row{margin:-4px 0 12px}
.ref-row .link-btn{padding:0;min-height:36px}
.field-hint{color:var(--dim-2);font-size:12px;line-height:1.45}
.field-hint.ok{color:var(--ok);font-weight:700}
/* Код приехал по ссылке партнёра — поле только для чтения. Красим как
   подтверждение, а не как отключённое поле: бледно-серое поле читается как
   ошибка, а зелёное — как «всё уже заполнено, трогать не надо». */
.field input.ref-locked{
  background:var(--ok-soft);border-color:var(--ok);color:var(--ok-deep);
  font-weight:800;letter-spacing:.6px;cursor:default;
}
.field input.ref-locked:focus{outline:none;border-color:var(--ok)}

/* Счётчик заказов в фильтрах онлайн-магазина: жёлтый кружок.
   Просьба владельца 2026-08-14: зайдя на экран, и владелец, и сотрудник
   должны СРАЗУ видеть, сколько заказов всего, сколько новых и сколько
   готовится. Раньше это была обычная цифра через точку — её не замечали.
   Ноль не рисуем вовсе: пустой кружок только мешает. */
.ord-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 7px;
  border-radius: 999px; background: #F5C518; color: #1B1300;
  font-size: 11.5px; font-weight: 800; line-height: 1; vertical-align: middle;
}


/* ---------- Фотографии товара во весь экран (openProductGallery) ----------
   Фон почти чёрный в ОБЕИХ темах и не зависит от палитры: светлый фон вокруг
   снимка съедает его края. Тот же экран есть в Android (ProductGallery.kt) и
   в iOS (SaleProductGallery.swift) — вёрстку менять только во всех трёх. */
.pgal{position:fixed;inset:0;z-index:1200;background:#0b0d10}
/* overscroll-behavior обязан стоять на САМОМ скролл-контейнере: на .pgal
   (который ничего не прокручивает) он не работает, и свайп проваливался
   на страницу под оверлеем. */
.pgal-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pgal-track::-webkit-scrollbar{display:none}
/* Сверху больше, чем снизу: шапка с названием, подписью и счётчиком
   занимает около 90 px, точки страниц снизу — около 40 px. К обоим краям
   прибавляем безопасную зону: в установленном приложении на iPhone экран
   уходит под чёлку и под полосу «домой». Переменную --topsafe брать НЕЛЬЗЯ —
   в pos её нет, а нераскрытая переменная обнуляет всё свойство целиком. */
.pgal-page{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:calc(96px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom))}
.pgal-page img{max-width:100%;max-height:100%;object-fit:contain}
/* Подложка под шапкой: на светлом снимке белое название иначе не читается. */
.pgal-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 12px 26px 18px;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none}
.pgal-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* Не больше двух строк: отступ снимка сверху задан числом, и третья
   строка названия уехала бы поверх фотографии. */
.pgal-title b{color:#fff;font-size:calc(15px*var(--fs,1));font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgal-title span{color:rgba(255,255,255,.78);font-size:calc(12px*var(--fs,1));font-weight:600}
.pgal-title i{color:rgba(255,255,255,.72);font-size:calc(11px*var(--fs,1));font-style:normal;font-weight:700}
.pgal-x{pointer-events:auto;flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;cursor:pointer}
/* Одна фотография — точек нет: они сообщали бы, что листать есть куда. */
.pgal-dots{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:7px;pointer-events:none}
.pgal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.34)}
.pgal-dots i.on{width:9px;height:9px;background:#fff}
/* Стрелки — для мыши: на телефоне листают пальцем, и там они только мешают. */
.pgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.42);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pgal-nav.prev{left:10px}
.pgal-nav.next{right:10px}
@media (max-width:760px){.pgal-nav{display:none}}
/* Пока открыт снимок, тосты уезжают ВНИЗ и поднимаются над ним. Просто
   поднять их нельзя: полоса тоста стоит сверху и накрывает крестик галереи —
   нажатие гасило бы тост, а не закрывало снимок. Спрятать их под снимок тоже
   нельзя: там отказы «нет остатка» и ошибки сети. */
body.pgal-on .toast-root{z-index:1300;top:auto;bottom:calc(18px + env(safe-area-inset-bottom))}

/* ---------- «Погасить несколько долгов» (bulk-debt.js) ----------
   Свой префикс bulk-: окно живёт поверх и экрана «Долги», и карточки
   клиента, и не должно цеплять их стили. Цвета — только через токены темы
   и полупрозрачные оттенки, чтобы синяя и тёмная темы работали без правок. */
.bulk{--bk-orange:#C2410C;--bk-edge:rgba(255,255,255,.7);--bk-glass:rgba(255,255,255,.55);--bk-primary-edge:#CFE0FF;--bk-warn-edge:#F0DCB4;--bk-check:#CBD5E1;--bk-track:#DFE5EC;display:flex;flex-direction:column}
/* На тёмных темах в кассе этих токенов нет — задаём их здесь же. */
html[data-theme="blue"] .bulk,html[data-theme="dark"] .bulk,html[data-theme="blue"] .bulk-go,html[data-theme="dark"] .bulk-go{--bk-orange:#FDBA74;--bk-edge:rgba(255,255,255,.14);--bk-glass:rgba(255,255,255,.10);--bk-primary-edge:#2A4370;--bk-warn-edge:#5A4526;--bk-check:#3A4A63;--bk-track:#1E3050}
.bulk-intro{margin:0 0 14px;color:var(--dim);font-size:13.5px;line-height:1.45}
.bulk-top{display:flex;align-items:flex-start;gap:12px;padding:8px 0 14px}
.bulk-top-txt{flex:1;min-width:0}
.bulk-top h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.bulk-top p{margin:5px 0 0;color:var(--dim);font-size:13px;line-height:1.45}
.bulk-form{display:flex;flex-direction:column;gap:12px}
.bulk-col{display:contents}
.bulk-fail{order:0}
.bulk-sec-cust{order:1}
.bulk-sec-amount{order:2}
.bulk-sec-method{order:3}
.bulk-sec-list{order:4}
.bulk-sec-sum{order:5}
.bulk-sec-over{order:6}
.bulk-sec-note{order:7}
.bulk-fail:empty,.bulk-sec-over:empty,.bulk-sec-list:empty,.bulk-sec-amount:empty,.bulk-sec-method:empty,.bulk-sec-sum:empty{display:none}
.bulk-card{background:var(--panel-2);border:1px solid var(--border);border-radius:18px;padding:14px}
.bulk-lbl{font-size:13px;font-weight:700;color:var(--dim);margin-bottom:8px}
.bulk-orange{color:var(--bk-orange)}

/* Аватар с инициалами */
.bulk-ava{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,#F97316,#EF4444);letter-spacing:.3px}
.bulk-ava.big{width:52px;height:52px;flex-basis:52px;font-size:18px}

/* Выбор клиента */
.bulk-pick-head b{display:block;font-size:17px;font-weight:800}
.bulk-pick-head p{margin:3px 0 12px;color:var(--dim);font-size:13px;line-height:1.4}
.bulk-pick .search-box{margin-bottom:12px}
.bulk-pick-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--border);background:var(--panel-2);border-radius:16px;margin-bottom:8px;color:var(--text)}
.bulk-pick-row:active{transform:scale(.99)}
.bulk-pick-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bulk-pick-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-pick-main small{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-pick-sum{color:var(--bk-orange);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.bulk-chev{color:var(--dim-2);font-size:22px;line-height:1}

/* Карточка клиента */
.bulk-cust{border-radius:20px;padding:14px;border:1px solid var(--bk-edge);background:linear-gradient(135deg,rgba(249,115,22,.20) 0%,rgba(239,68,68,.14) 60%,rgba(236,72,153,.08) 100%)}
.bulk-cust-top{display:flex;align-items:center;gap:12px}
.bulk-cust-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bulk-cust-main b{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-cust-main small{color:var(--dim);font-size:13px}
.bulk-change{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--bk-edge);background:var(--bk-glass);color:var(--text);font-weight:700;font-size:13px;white-space:nowrap}
.bulk-cust-kpi{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:12px}
.bulk-cust-kpi small{display:block;color:var(--dim);font-size:12px;font-weight:600}
.bulk-cust-kpi b{display:block;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.15;font-variant-numeric:tabular-nums;word-break:break-word}
.bulk-cust-kpi .r{text-align:right}
.bulk-cust-kpi .r b{font-size:20px}
.bulk-cust-none{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--bk-glass);color:var(--dim);font-weight:600;font-size:13.5px}

/* Сумма */
.bulk-amt{display:flex;align-items:baseline;gap:8px;width:100%;border:2px solid var(--bk-primary-edge);background:var(--panel);border-radius:16px;padding:10px 14px;min-height:62px;color:var(--text);text-align:left}
.bulk-amt.static{border-style:dashed;border-color:var(--border)}
.bulk-amt-v{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bulk-amt.empty .bulk-amt-v{color:var(--dim-2)}
.bulk-amt-cur{color:var(--dim);font-weight:700;font-size:14px}
.bulk-amt-edit{margin-left:auto;align-self:center;color:var(--primary);font-size:18px}
.bulk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bulk-chip{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.bulk-chip.main{border-color:var(--bk-primary-edge);background:var(--primary-soft);color:var(--primary)}
.bulk-chip.on{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.bulk-mix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.bulk-mix-in{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:8px 12px;border-radius:14px;border:2px solid var(--bk-primary-edge);background:var(--panel);color:var(--text);text-align:left;min-width:0}
.bulk-mix-in small{color:var(--dim);font-weight:600;font-size:12.5px}
.bulk-mix-in b{font-size:18px;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Способ оплаты: три плитки вместо двух */
.pay-types.bulk-types{grid-template-columns:repeat(3,1fr);margin-bottom:0}

/* Список долгов */
.bulk-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bulk-list-head b{display:block;font-size:16px;font-weight:800}
.bulk-list-head small{color:var(--dim);font-size:12.5px}
.bulk-link{border:none;background:var(--primary-soft);color:var(--primary);font-weight:700;border-radius:99px;min-height:40px;padding:0 14px;white-space:nowrap;font-size:13px}
.bulk-seg{margin-bottom:4px}
.bulk-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);border:1.5px solid var(--border);border-radius:16px;padding:11px 12px;margin-top:8px;color:var(--text);transition:background .15s,border-color .15s}
.bulk-row.is-closes{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.45)}
.bulk-row.is-partial{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.45)}
.bulk-row.is-off .bulk-row-t,.bulk-row.is-off small{opacity:.7}
.bulk-check{flex:0 0 28px;width:28px;height:28px;border-radius:9px;border:2px solid var(--bk-check);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;background:transparent}
.bulk-row.is-closes .bulk-check{background:#22C55E;border-color:#22C55E}
.bulk-row.is-partial .bulk-check{background:#F97316;border-color:#F97316}
.bulk-row.is-notReached .bulk-check{background:var(--primary);border-color:var(--primary)}
.bulk-row-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bulk-row-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.bulk-row-main small{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-state{font-size:12px;font-weight:700;margin-top:3px;color:var(--dim-2)}
.bulk-row.is-closes .bulk-state{color:var(--ok)}
.bulk-row.is-partial .bulk-state{color:var(--bk-orange)}
.bulk-row-end{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.bulk-row-debt{font-size:15px;font-weight:800;color:var(--dim)}
.bulk-row:not(.is-off) .bulk-row-debt{color:var(--bk-orange)}
.bulk-row.is-closes .bulk-row-debt{color:var(--dim-2);text-decoration:line-through;font-weight:700}
.bulk-row-pay{color:var(--ok);font-weight:800;font-size:13.5px}

/* Итог */
.bulk-sum-top{display:flex;justify-content:space-between;align-items:baseline}
.bulk-sum-top b{font-size:16px;font-weight:800}
.bulk-pct{font-weight:800;color:var(--ok);font-variant-numeric:tabular-nums}
.bulk-bar{height:10px;border-radius:99px;background:var(--bk-track);overflow:hidden;margin:8px 0 10px}
.bulk-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22C55E,#06B6D4);transition:width .25s}
.bulk-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:14px}
.bulk-line span{color:var(--dim)}
.bulk-line b{font-variant-numeric:tabular-nums;text-align:right}
.bulk-line.pay b{color:var(--ok)}
.bulk-hr{height:1px;background:var(--border);margin:6px 0}
.bulk-line.total span{color:var(--text);font-weight:800}
.bulk-line.total b{font-size:18px;font-weight:800}
.bulk-line.total.warn b{color:var(--bk-orange)}
.bulk-line.total.ok b{color:var(--ok)}

/* Предупреждения */
.bulk-warn,.bulk-fail-box{display:flex;gap:10px;align-items:flex-start;border-radius:16px;padding:12px 14px;font-weight:600;font-size:13.5px;line-height:1.4}
.bulk-warn{background:var(--warn-soft);border:1px solid var(--bk-warn-edge);color:var(--warn)}
.bulk-fail-box{background:var(--danger-soft);border:1px solid var(--danger-edge);color:var(--danger)}
.bulk-warn-main{flex:1;min-width:0}
.bulk-warn-main p{margin:0}
.bulk-warn-btn{margin-top:8px;border-color:var(--bk-warn-edge);color:var(--warn);background:var(--panel)}

/* Кнопка проведения */
.btn.bulk-go{background:var(--ok);border-color:var(--ok);color:var(--on-primary);font-weight:800}
.btn.bulk-go:disabled{opacity:.45}
.bulk-spin{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:bulkspin .8s linear infinite}
@keyframes bulkspin{to{transform:rotate(360deg)}}

/* Готово */
.bulk-done{text-align:center;padding:18px 0 6px}
.bulk-done-ico{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22C55E,#06B6D4);box-shadow:0 10px 30px rgba(34,197,94,.30)}
.bulk-done h3{margin:0;font-size:22px;font-weight:800}
.bulk-done>p{margin:4px 0 16px;color:var(--dim)}
.bulk-done-list{text-align:left}
.bulk-done-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);background:var(--panel-2);border-radius:14px;margin-bottom:8px}
.bulk-done-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bulk-done-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-done-main small{font-size:12.5px;font-weight:700}
.bulk-done-main small.ok{color:var(--ok)}
.bulk-done-main small.warn{color:var(--bk-orange)}
.bulk-done-pay{color:var(--ok);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Вход с экранов: кнопка в шапке «Долгов» и зелёная во всю ширину в карточках */
.bulk-entry{display:flex;gap:8px;align-items:center}
.bulk-open-btn{width:100%;min-height:50px;border:none;border-radius:16px;background:var(--ok);color:var(--on-primary);font-size:15px;font-weight:800;margin:0 0 12px}
.bulk-open-btn:active{transform:scale(.98)}
.bulk-note{padding:11px 14px;border-radius:14px;background:var(--chip-dim);color:var(--dim);font-size:13px;font-weight:600;margin:0 0 12px}

/* Настольная касса: широкое окно. Слева клиент и список чеков, справа —
   сумма, способ оплаты и итог (прилипает, пока листаешь длинный список).
   Уже 900 px — одна колонка в том же порядке, что и на телефоне. */
.modal.bulk-modal{max-width:1080px}
.bulk-modal .modal-foot{justify-content:flex-end}
.bulk-modal .modal-foot .bulk-go{min-width:300px}
.bulk-pick{max-width:680px;margin:0 auto}
.bulk-row:hover,.bulk-pick-row:hover{border-color:var(--border-2)}
.bulk-chip:hover,.bulk-mix-in:hover,.bulk-amt:hover{border-color:var(--primary)}
@media(min-width:900px){
  .bulk-form{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
  .bulk-fail{grid-column:1/-1}
  .bulk-col{display:flex;flex-direction:column;gap:12px;min-width:0}
}
@media(min-width:900px) and (min-height:760px){
  .bulk-col-b{position:sticky;top:0}
}
@media(max-width:640px){
  .bulk-modal .modal-foot .bulk-go{min-width:0;width:100%}
}
.bulk-seg{display:flex;width:100%;margin-bottom:4px}
.bulk-seg button{flex:1}
.btn.bulk-go:hover{background:var(--ok);border-color:var(--ok);filter:brightness(1.06)}
/* Вход: кнопка в шапке «Долгов» и в карточке клиента — сплошная зелёная. */
.btn.bulk-open{background:var(--ok);border-color:var(--ok);color:var(--on-primary);font-weight:700}
.btn.bulk-open:hover{background:var(--ok);border-color:var(--ok);filter:brightness(1.06)}

/* Экран «Готово»: вводный текст уже не нужен */
.bulk.is-done .bulk-intro,.bulk.is-done .bulk-top p{display:none}
.bulk-done{max-width:620px;margin:0 auto;width:100%}

/* ===== «Заказы онлайн» (16.09.2026) =====
   Период над списком, предупреждение об открытых заказах за другие дни,
   окно «Статистика» (три отдельных графика) и окна «Баннеры» /
   «Скидочные товары» вместо отдельных страниц. */
.ord-period .cat-chips{margin-bottom:2px}
.ord-period-note{font-size:13px;color:var(--dim);margin:0 0 10px}
.ord-open-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;
  margin:0 0 12px;padding:10px 12px 10px 14px;border-radius:var(--radius);
  border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.10);font-size:13.5px;font-weight:600}
.ord-open-note .btn{flex:0 0 auto}

/* Окно статистики витрины */
.modal.shs-modal{max-width:880px}
.shs-periods .cat-chips{margin-bottom:4px}
.shs-body{min-height:360px}
.shs-caption{font-size:13px;color:var(--dim);margin:4px 0 12px}
.shs-caption b{color:var(--text)}
.shs-visits{--shs-c:#7C3AED;--shs-soft:rgba(124,58,237,.13)}
.shs-orders{--shs-c:#EA580C;--shs-soft:rgba(234,88,12,.13)}
.shs-amount{--shs-c:#16A34A;--shs-soft:rgba(22,163,74,.13)}
.shs-tiles{margin-bottom:12px}
.shs-tiles .stat{border-top:3px solid var(--shs-c)}
.shs-tiles .s-value{color:var(--shs-c);font-variant-numeric:tabular-nums}
.shs-card{margin-bottom:12px;padding:14px 16px 12px}
.shs-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.shs-head h3{margin:0;font-size:15px;flex:1;min-width:0}
.shs-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;background:var(--shs-soft)}
.shs-total{font-size:17px;font-weight:800;color:var(--shs-c);font-variant-numeric:tabular-nums;white-space:nowrap}
.shs-bars{display:flex;align-items:stretch;gap:8px;height:180px}
.shs-bars.dense{gap:3px}
.shs-col{flex:1 1 0;min-width:0;max-width:80px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default}
.shs-val{height:15px;line-height:15px;font-size:11px;font-weight:700;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.shs-track{flex:1;width:100%;display:flex;align-items:flex-end;border-radius:7px;background:var(--panel-2);overflow:hidden}
.shs-bar{display:block;width:100%;border-radius:7px 7px 0 0;background:var(--shs-c);opacity:.5;transition:opacity .12s}
.shs-col.peak .shs-bar,.shs-col:hover .shs-bar{opacity:1}
.shs-col.peak .shs-val{color:var(--shs-c)}
.shs-day{height:14px;line-height:14px;font-size:11px;color:var(--dim-2);font-variant-numeric:tabular-nums}
.shs-col.today .shs-day{color:var(--text);font-weight:800}
.shs-bars.dense .shs-track,.shs-bars.dense .shs-bar{border-radius:4px 4px 0 0}
.shs-bars.dense .shs-val{visibility:hidden;position:relative;z-index:1}
.shs-bars.dense .shs-col.peak .shs-val,.shs-bars.dense .shs-col:hover .shs-val{visibility:visible}
.shs-bars.dense .shs-day{font-size:10px}
.shs-empty{margin-top:8px;font-size:12.5px;color:var(--dim-2);text-align:center}
.shs-foot{font-size:12px;color:var(--dim-2);margin:2px 2px 0}
@media(max-width:600px){
  .shs-bars{gap:4px;height:150px}
  .shs-bars.dense{gap:2px}
  .shs-bars.dense .shs-col.skip .shs-day{visibility:hidden}
}

/* Окна «Баннеры» и «Скидочные товары» */
.shelf-hint{font-size:13px;line-height:1.5;margin:0 0 12px}
.bn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.bn-list .empty-note{grid-column:1/-1}
.bn-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden}
.bn-img{position:relative}
.bn-img img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;background:var(--panel-2)}
.bn-num{position:absolute;top:8px;left:8px;min-width:26px;height:26px;padding:0 8px;border-radius:99px;
  background:rgba(15,23,42,.72);color:#fff;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.bn-actions{display:flex;gap:6px;padding:10px;flex-wrap:wrap}
.bn-actions .btn-danger{margin-left:auto}
.ft-count{font-size:13px;margin:0 0 8px}
.ft-dirty{color:var(--warn)}
.ft-list{display:flex;flex-direction:column;gap:6px}
.ft-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.ft-num{flex:0 0 auto;width:26px;height:26px;border-radius:99px;background:var(--panel-2);color:var(--dim);
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ft-name{flex:1;min-width:0}
.ft-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-name small{display:block;color:var(--dim-2);font-variant-numeric:tabular-nums}

/* ---------- Кнопки в шапке экрана (23.09.2026) ----------
   Правый верхний угол «Прихода», «Поставщиков», «Списания», «Аудита»,
   «Поступлений», «Расходов», «Сотрудников» (и остальных экранов с viewHead)
   собирался из кнопок двух размеров: .btn-sm 36 px и обычная .btn 46 px,
   плюс свои 40 px у «Долгов». Теперь все кнопки шапки ОДНОГО размера:
   40 px, 14 px, одинаковые поля, скругление и значок 16 px. Главное действие
   отличается только цветом (.btn-primary), а не ростом.
   Специфичность (три класса) выше, чем у .btn-sm, .btn.bulk-open и .dz-act
   .btn — поэтому правило одно и перекрывает все частные размеры. */
.view-head .head-actions{gap:8px !important;align-items:center}
.view-head .head-actions > .btn{
  height:40px;min-height:40px;padding:0 15px;border-radius:11px;
  font-size:14px;font-weight:600;line-height:1;gap:7px;white-space:nowrap}
.view-head .head-actions > .btn svg{width:16px !important;height:16px !important;flex:none}
.view-head .head-actions > .icon-btn{width:40px;height:40px;border-radius:11px}

/* =====================================================
   Уроки и новости (27.09.2026) — screens-learn.js
   ===================================================== */
.learn-btn{position:relative;overflow:visible}
.ln-tabs{display:inline-flex;gap:3px;padding:3px;background:var(--panel-2);border:1px solid var(--border);border-radius:13px}
.ln-tab{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border:0;border-radius:10px;
  background:transparent;color:var(--dim);font-size:14px;font-weight:700;cursor:pointer}
.ln-tab:hover{color:var(--text)}
.ln-tab.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.ln-tab-ico{font-size:13px}
.ln-tab-lessons.on .ln-tab-ico{color:#E62117}
.ln-count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--danger);color:#fff;
  font-size:11.5px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.ln-body{display:flex;flex-direction:column;gap:14px;max-width:1280px}

.ln-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 16px;text-align:center;color:var(--dim)}
.ln-empty b{color:var(--text);font-size:17px}
.ln-empty span{max-width:420px;line-height:1.5}
.ln-empty-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:28px;background:var(--primary-soft);color:var(--primary)}

.ln-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ln-bar-t{display:flex;flex-direction:column;margin-right:auto}
.ln-bar-t b{font-size:16px}
.ln-bar-t span{color:var(--dim);font-size:13px}
.ln-offline{color:var(--warn);font-size:12.5px;font-weight:700}

.ln-kind{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:800;
  color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);white-space:nowrap}
.ln-date{color:var(--dim-2);font-size:12.5px;white-space:nowrap}
.ln-pin{font-size:13px}
.ln-dot{width:9px;height:9px;border-radius:50%;background:var(--k);margin-left:auto;flex:none}

.ln-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.ln-news{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--panel);color:var(--text);overflow:hidden;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s,border-color .12s,box-shadow .12s;font:inherit}
.ln-news:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow-lg)}
.ln-news.unread{border-color:color-mix(in srgb,var(--k) 55%,var(--border))}
.ln-news-img{display:block;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden}
.ln-news-img img{width:100%;height:100%;object-fit:cover;display:block}
.ln-news-pad{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.ln-news-top{display:flex;align-items:center;gap:8px}
.ln-news-title{font-size:16px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ln-news.unread .ln-news-title{font-weight:800}
.ln-news-text{color:var(--dim);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.ln-news-more{color:var(--k);font-size:13px;font-weight:800;margin-top:2px}

.ln-article{display:flex;flex-direction:column;gap:12px}
.ln-article-img{width:100%;max-height:420px;object-fit:cover;border-radius:14px;display:block;background:var(--panel-2)}
.ln-article-title{margin:0;font-size:22px;line-height:1.3;font-weight:800}
.ln-article-text{font-size:15px;line-height:1.65;white-space:pre-line;color:var(--text)}
.ln-article-note{color:var(--dim-2);font-size:12.5px}
.btn.ln-link-btn{background:var(--k);border-color:var(--k);color:#fff}

.ln-hero{display:grid;grid-template-columns:auto 1fr minmax(220px,300px);gap:16px;align-items:center;padding:16px 18px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ln-hero-ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg,#F5433B,#D91F6B)}
.ln-hero-main{display:flex;flex-direction:column;gap:2px}
.ln-hero-main b{font-size:16px}
.ln-hero-main span{color:var(--dim);font-size:13px}
.ln-hero-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-bottom:6px}
.ln-hero-row b{color:var(--ok)}
.ln-track{height:7px;border-radius:99px;background:var(--chip-dim);overflow:hidden}
.ln-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),#34D1BF)}

.ln-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ln-search{flex:0 1 320px;min-width:220px}
.ln-sec{font-size:15px;font-weight:800;margin-top:4px}
.ln-sec span{color:var(--dim-2);font-weight:700;font-size:13px;margin-left:4px}

.ln-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111}
.ln-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ln-play{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  display:grid;place-items:center;background:rgba(230,33,23,.93);color:#fff;font-size:15px;padding-left:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s}
.ln-thumb.big .ln-play{width:62px;height:62px;margin:-31px 0 0 -31px;font-size:22px}
.ln-dur,.ln-short{position:absolute;bottom:7px;padding:1px 6px;border-radius:5px;color:#fff;font-size:11.5px;font-weight:700;background:rgba(0,0,0,.78)}
.ln-dur{right:7px;font-variant-numeric:tabular-nums}
.ln-short{left:7px;background:#E62117}
.ln-seen{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok);color:#fff;font-size:12px;font-weight:900}

.ln-featured{display:grid;grid-template-columns:minmax(280px,480px) 1fr;text-align:left;padding:0;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--panel);color:var(--text);overflow:hidden;cursor:pointer;box-shadow:var(--shadow);font:inherit}
.ln-featured .ln-thumb{border-radius:0;height:100%}
.ln-featured:hover .ln-play,.ln-lesson:hover .ln-play,.ln-side:hover .ln-play{transform:scale(1.1)}
.ln-featured-pad{display:flex;flex-direction:column;gap:8px;padding:20px 22px;justify-content:center;align-items:flex-start}
.ln-cat{color:#E62117;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ln-featured-title{font-size:19px;font-weight:800;line-height:1.3}
.ln-featured-text{color:var(--dim);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ln-watch{margin-top:6px}

.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ln-lesson{display:flex;flex-direction:column;gap:8px;text-align:left;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer;font:inherit}
.ln-lesson-title{font-size:14.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ln-lesson-sub{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-ok{color:var(--ok);font-weight:700}

.modal.ln-modal{max-width:1100px}
.ln-player{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.ln-player-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.ln-frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.ln-frame.short{aspect-ratio:9/16;max-height:62vh;margin:0 auto;width:auto;height:62vh}
.ln-frame iframe{width:100%;height:100%;border:0;display:block}
.ln-player-info{display:flex;gap:10px;align-items:center;margin-top:4px}
.ln-player-side{display:flex;flex-direction:column;gap:8px}
.ln-side-list{display:flex;flex-direction:column;gap:6px}
.ln-side{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;padding:6px;border:0;border-radius:12px;
  background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.ln-side:hover{background:var(--panel-2)}
.ln-side .ln-thumb{border-radius:9px}
.ln-side .ln-play{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:11px}
.ln-side-t{font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:980px){
  .ln-player{grid-template-columns:1fr}
  .ln-featured{grid-template-columns:1fr}
  .ln-hero{grid-template-columns:auto 1fr}
  .ln-hero-prog{grid-column:1/-1}
}
@media (max-width:560px){
  .ln-news-grid{grid-template-columns:1fr}
  .ln-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .view-head .head-actions:has(.ln-tabs){width:100%}
  .ln-tabs{width:100%}
  .ln-tab{flex:1;justify-content:center}
  .ln-search{flex:1 1 100%}
}

/* =====================================================
   Выбор нескольких дней (28.09.2026) — dateRangePicker, core.js
   ===================================================== */
.modal.drp-modal{max-width:440px}
.drp{display:flex;flex-direction:column;gap:12px}
.drp-presets{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.drp-presets::-webkit-scrollbar{display:none}
.drp-preset{flex:none;min-height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.drp-preset:hover{border-color:var(--border-2)}
.drp-preset.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.drp-hint{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;
  background:var(--primary-soft);color:var(--text);font-size:13px;font-weight:600;line-height:1.35}
.drp-hint span{color:var(--primary);font-weight:800}
.drp-nav{display:flex;align-items:center;gap:8px}
.drp-nav b{flex:1;text-align:center;font-size:16px;font-weight:800}
.drp-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--panel-2);
  color:var(--text);font-size:20px;font-weight:800;line-height:1;cursor:pointer}
.drp-arrow:hover:not(:disabled){border-color:var(--border-2)}
.drp-arrow:disabled{color:var(--dim-2);opacity:.5;cursor:default}
.drp-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px}
.drp-wd{text-align:center;font-size:11.5px;font-weight:800;color:var(--dim);text-transform:uppercase;padding:4px 0}
.drp-wd.we{color:var(--danger);opacity:.75}
.drp-cell{position:relative;height:42px;border:0;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);font:inherit}
.drp-cell.empty{cursor:default}
.drp-cell span{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .1s}
.drp-cell:not(.off):not(.edge):hover span{background:var(--panel-2)}
.drp-cell.off{color:var(--dim-2);opacity:.45;cursor:default}
.drp-cell.today span{box-shadow:inset 0 0 0 1.5px var(--primary)}
.drp-cell.band::before{content:"";position:absolute;top:2px;bottom:2px;left:0;right:0;
  background:color-mix(in srgb,var(--primary) 16%,transparent)}
.drp-cell.band-start::before{left:50%}
.drp-cell.band-end::before{right:50%}
.drp-cell.band-start.band-end::before{display:none}
.drp-cell.edge span{background:var(--primary);color:var(--on-primary);font-weight:800;box-shadow:none}
.btn.drp-show{flex-direction:column;gap:1px;min-height:54px;flex:1}
.btn.drp-show .drp-show-t{font-size:15.5px;font-weight:800}
.btn.drp-show small{font-size:12px;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.btn.drp-show:disabled{opacity:.55}