:root{
  --bg:#E9EDEA; --card:#FFFFFF; --card-2:#F5F8F5;
  --border:#E2E7E2; --border-2:#CCD5CE;
  --ink:#101613; --muted:#57675E; --faint:#66776E;
  --brand:#0E9F6E; --brand-deep:#076B4C; --brand-soft:#E4F4EC;
  --warn:#A76A08; --warn-soft:#FCF2DF;
  --danger:#C4432F; --danger-soft:#FBECE8;
  --ok:var(--brand-deep);
  --track:#E5EAE6; --btn-fg:#FFFFFF;
  --sh-1:0 1px 2px rgba(16,22,19,.04), 0 6px 18px rgba(16,22,19,.06);
  --sh-2:0 16px 40px rgba(16,22,19,.18);
  --f-ui:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,monospace;
  --r-card:14px; --r-ctl:9px;
  --rail:236px; --gut:26px;
}
html[data-theme="dark"]{
  --bg:#080C0A; --card:#141A17; --card-2:#1A211D;
  --border:#26302A; --border-2:#36443B;
  --ink:#E7EDE9; --muted:#8DA097; --faint:#748679;
  --brand:#2FBF87; --brand-deep:#26A473; --brand-soft:#16281F;
  --warn:#D9A44A; --warn-soft:#2A2216;
  --danger:#E17C6A; --danger-soft:#2A1917;
  --track:#212B25; --btn-fg:#08120E;
  --sh-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.3); --sh-2:0 20px 48px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.n{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lbl{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--faint)}

.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

/* ── rail ── */
.rail{padding:18px 14px 18px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--bg)}
.brand{display:flex;align-items:center;gap:9px;padding:4px 10px 2px}
.pin{position:absolute;top:20px;right:10px;width:26px;height:26px;border:1px solid var(--border);background:var(--card);
     border-radius:7px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;display:grid;place-items:center;padding:0}
.pin:hover{color:var(--brand-deep);border-color:var(--brand)}
.pin:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* свёрнутое меню: только значки, разворачивается по наведению */
html[data-rail="auto"]{--rail:66px}
html[data-rail="auto"] .rail{align-items:center;padding-left:10px;padding-right:10px}
html[data-rail="auto"] .txt,
html[data-rail="auto"] .grp > .lbl,
html[data-rail="auto"] .brand b,
html[data-rail="auto"] .who > div:not(.av),
html[data-rail="auto"] .theme,
html[data-rail="auto"] .pin{opacity:0;pointer-events:none}
/* opacity:0 не убирает текст из потока flex — из-за gap он всё равно расталкивает иконку
   за пределы 44px-квадрата (icon+невидимый-но-занимающий-место текст центрируются вместе).
   Схлопываем ширину текста в 0, чтобы центрировалась только иконка. */
html[data-rail="auto"] .nav .txt{width:0;margin:0;overflow:hidden;white-space:nowrap}
html[data-rail="auto"] .nav{justify-content:center;padding:9px 0;width:44px;gap:0}
html[data-rail="auto"] .who{justify-content:center;padding:9px 0;width:44px}
html[data-rail="auto"] .rail:hover,
html[data-rail="auto"] .rail:focus-within{
  position:fixed;left:0;top:0;width:236px;align-items:stretch;
  padding-left:16px;padding-right:14px;box-shadow:var(--sh-2);z-index:60;border-right:1px solid var(--border)}
html[data-rail="auto"] .rail:hover .txt,
html[data-rail="auto"] .rail:hover .grp > .lbl,
html[data-rail="auto"] .rail:hover .brand b,
html[data-rail="auto"] .rail:hover .who > div:not(.av),
html[data-rail="auto"] .rail:hover .theme,
html[data-rail="auto"] .rail:hover .pin,
html[data-rail="auto"] .rail:focus-within .txt,
html[data-rail="auto"] .rail:focus-within .theme,
html[data-rail="auto"] .rail:focus-within .pin{opacity:1;pointer-events:auto}
html[data-rail="auto"] .rail:hover .nav,
html[data-rail="auto"] .rail:hover .who{justify-content:flex-start;padding:8px 10px;width:auto;gap:10px}
html[data-rail="auto"] .rail:hover .nav .txt,
html[data-rail="auto"] .rail:focus-within .nav .txt{width:auto}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-weight:700;font-size:14px}
.brand b{font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.grp{display:flex;flex-direction:column;gap:2px}
.grp > .lbl{padding:0 10px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-ctl);color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.nav:hover{background:var(--card);color:var(--ink)}
.nav.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.nav .ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;
         stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.nav.on .ic{stroke:var(--brand);opacity:1}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.theme{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-ctl);padding:3px;box-shadow:var(--sh-1)}
.theme button{flex:1;padding:6px 0;background:transparent;border:0;border-radius:7px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--muted)}
.theme button[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.theme button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.who{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-ctl);box-shadow:var(--sh-1)}
.who .av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-size:12px;font-weight:600}
.who p{margin:0;font-size:13.5px;font-weight:600}
.who small{color:var(--faint);font-size:11.5px}

/* ── main ── */
/* ширина контента подстраивается под экран: на обычных мониторах не растягивается больше,
   чем удобно читать, а на широких — реально использует место, иначе таблицы с кучей колонок
   (заявки, магазины) всё равно требуют горизонтального скролла даже при свободном месте вокруг */
main{min-width:0;padding:22px var(--gut) 34px;max-width:1720px;margin:0 auto;width:100%}
@media (min-width:1900px){ main{max-width:min(94vw, 2200px)} }
@media (min-width:2300px){ main{max-width:min(92vw, 2600px)} }
.head{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px}
h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.sub{margin:5px 0 0;color:var(--muted);font-size:14px}
.sub b{font-family:var(--f-num);font-weight:500;color:var(--ink)}
.btn{margin-left:auto;flex:none;background:var(--brand);color:var(--btn-fg);border:0;border-radius:var(--r-ctl);padding:10px 17px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--sh-1)}
.btn:hover{background:var(--brand-deep)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── stat cards: числа — главный визуальный акцент страницы, карточки вокруг — тихие ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;margin-bottom:14px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.stat{background:var(--card);padding:15px 16px 16px}
.stat .v{font-family:var(--f-num);font-size:28px;font-weight:500;letter-spacing:-.03em;display:block;margin-top:6px}
.stat .v.g{color:var(--brand-deep)} .stat .v.r{color:var(--danger)}
.stat .foot{margin-top:7px;font-size:12px;color:var(--faint)}

/* ── plan card (signature) ── */
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px 18px;margin-bottom:14px}
.plan-top{display:flex;align-items:baseline;gap:10px;margin-bottom:13px}
.plan-top b{font-size:15px;font-weight:600}
.plan-top span{font-size:12.5px;color:var(--muted)}
.dev{position:relative;height:12px;background:var(--track);border-radius:6px}
.dev-mid{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;border-radius:1px;background:var(--ink);opacity:.35}
.dev-bar{position:absolute;top:0;bottom:0;background:var(--brand);border-radius:6px}
.dev-bar.r{background:var(--danger)}
.dev-cap{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--f-num);font-size:9px;color:var(--muted)}
.plan-legend{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--faint);position:relative}
.plan-legend .mid{position:absolute;left:50%;transform:translateX(-50%);color:var(--muted)}
.plan-legend b{font-family:var(--f-num);font-weight:500;color:var(--ink)}

/* ── toolbar ── */
/* Полоса действий над отмеченными заявками. Отдельно от .tools: фильтры на
   телефоне сворачиваются, а действия прятать нельзя — иначе кнопку не нажать. */
#selbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
        background:var(--brand-soft);border-left:1px solid var(--border-2);
        border-right:1px solid var(--border-2);padding:10px 16px}
#selbar[hidden]{display:none}
#selbar .selbar-n{font-size:13px;color:var(--muted);margin-right:auto}
#selbar .selbar-n b{color:var(--ink);font-family:var(--f-num)}
@media(max-width:960px){#selbar{padding:10px 12px}#selbar .act{flex:1;min-height:40px}}

.tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;padding:13px 16px}
/* Блок = одна панель: шапка с названием, под ней фильтры, под ними таблица.
   Между панелями — воздух, внутри панели — только волосяные линии. Так глаз видит границы блоков. */
.sec + .tools{border-radius:0;border-top:0;padding:11px 16px;background:var(--card-2)}
.sec + .tcard,.sec + .tools + .tcard,.sec + .panel-note + .tcard{border-top:0;border-radius:0 0 var(--r-card) var(--r-card)}
.panel-note{margin:0;background:var(--card);border-left:1px solid var(--border-2);border-right:1px solid var(--border-2);
            padding:0 18px 12px;font-size:12.5px;color:var(--faint);line-height:1.45}
.search{flex:1 1 250px;max-width:330px}
input[type=search],select{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:14px;color:var(--ink)}
select{width:auto;cursor:pointer}
input[type=search]::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.count{margin-left:auto;font-size:13px;color:var(--muted)}
.count b{font-family:var(--f-num);font-weight:500;color:var(--ink)}

/* ── table card ── */
.tcard{background:var(--card);border:1px solid var(--border-2);border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1160px}
thead th{position:sticky;top:0;z-index:2;background:var(--card);text-align:left;padding:10px 14px;border-bottom:1.5px solid var(--border-2);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none}
thead th:first-child{padding-left:18px}
thead th:last-child{padding-right:18px;cursor:default;position:sticky;right:0;z-index:3;background:var(--card);box-shadow:-8px 0 12px -8px rgba(16,24,40,.14)}
tbody td:last-child{position:sticky;right:0;background:var(--card);box-shadow:-8px 0 12px -8px rgba(16,24,40,.14)}
tbody tr:hover td:last-child,tbody tr:focus-within td:last-child{background:var(--card-2)}
html[data-theme="dark"] thead th:last-child,html[data-theme="dark"] tbody td:last-child{box-shadow:-8px 0 12px -8px rgba(0,0,0,.5)}
/* в таблице заказов заявки последний столбец — просто дата, не действия; прикреплять его справа
   не нужно (пин задуман для кнопок действий) — иначе он наплывает на широкий столбец с текстом сообщения */
#ordtable thead th:last-child,#ordtable tbody td:last-child{position:static;box-shadow:none}
thead th.r{text-align:right}
/* числа в таблицах — по правому краю, как и их заголовки: иначе колонка «плывёт»
   и цифры невозможно сравнивать взглядом */
tbody td.r{text-align:right}
thead th:hover{color:var(--ink)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody td:first-child{padding-left:18px} tbody td:last-child{padding-right:18px}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--card-2)}
tbody tr:focus-within td{background:var(--card-2)}
.rn{font-family:var(--f-num);font-size:12.5px;color:var(--faint);text-align:right;width:46px}
.shop{display:flex;align-items:center;gap:11px}
.logo{width:36px;height:36px;flex:none;border-radius:9px;background:var(--brand-soft);border:1px solid var(--border);
      display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--brand-deep);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}
a.nm{font-weight:600;font-size:14px;color:inherit;text-decoration:none}
a.nm:hover{color:var(--brand-deep)}
a.nm:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.nm-ext{font-family:var(--f-num);font-size:10px;color:var(--faint);margin-left:5px}
.mid{font-family:var(--f-num);font-size:13px;color:var(--muted)}
.ct{font-size:13.5px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* длинные названия товаров переносим на 2–3 строки, а не режем многоточием */
.pname{white-space:normal;display:inline-block;max-width:330px;line-height:1.35}
.ph{font-family:var(--f-num);font-size:12px;color:var(--faint);margin-top:1px}
/* редактирование прямо в таблице/карточке: карандаш подсказывает, что поле кликабельно,
   а сохранение всегда явное — галочка «сохранить» и крестик «отмена», одинаково на всех страницах */
.editable-cell{cursor:text;border-radius:6px;padding:3px 6px;margin:-3px -6px;display:inline-block}
.editable-cell:hover,.editable-fact:hover{background:var(--card-2);box-shadow:0 0 0 1px var(--border-2)}
/* карандаш виден всегда (приглушённо) — иначе непонятно, что поле вообще можно редактировать,
   пока случайно не навести мышью; на hover — чётче */
.editable-cell::after,.editable-fact::after{content:"✎";margin-left:6px;font-size:11px;color:var(--faint);opacity:.4}
.editable-cell:hover::after,.editable-fact:hover::after{opacity:1}
.editable-input{width:100%;padding:4px 7px;border:1px solid var(--brand);border-radius:6px;background:var(--card);font-family:inherit;font-size:13.5px;color:var(--ink)}
.editable-fact{cursor:text;border-radius:6px;padding:1px 5px;margin:-1px -5px}
.edit-wrap{display:inline-flex;align-items:center;gap:4px;width:100%}
.edit-ok,.edit-no{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--border-2);background:var(--card);
                  cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;padding:0;color:var(--muted)}
.edit-ok{background:var(--brand);border-color:var(--brand);color:var(--btn-fg);font-weight:700}
.edit-ok:hover{background:var(--brand-deep)}
.edit-no:hover{border-color:var(--danger);color:var(--danger)}
.edit-ok:focus-visible,.edit-no:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pzoom{width:34px;height:34px;border-radius:8px;cursor:zoom-in}
.pzoom img{width:34px;height:34px;border-radius:8px;object-fit:cover;border:1px solid var(--border);display:block}
/* превью при наведении — отдельным слоем поверх всей страницы (position:fixed),
   иначе таблица со своим скроллом (.wrap{overflow-x:auto}) обрезает увеличенную картинку */
#pzoom-preview{position:fixed;z-index:999;pointer-events:none;display:none;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.35);border:2px solid var(--brand);background:var(--card)}
#pzoom-preview img{display:block;width:260px;height:260px;object-fit:cover}
.dp-cell{cursor:pointer;border-radius:6px}
.dp-cell:hover{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
/* прогресс по дням растёт вширь на каждую дату — закрепляем №+товар слева, чтобы не терять,
   какая это строка, при скролле по датам вправо */
#dptable th:nth-child(-n+2),#dptable td:nth-child(-n+2){position:sticky;background:var(--card)}
#dptable th:first-child,#dptable td:first-child{left:0;z-index:2}
#dptable th:nth-child(2),#dptable td:nth-child(2){left:46px;z-index:2;box-shadow:4px 0 8px -6px rgba(16,24,40,.18);text-align:left;white-space:normal;max-width:220px}
#dptable thead th:nth-child(-n+2){z-index:4}
/* значок «наш выкупатор» / выбор классификации рядом с именем — компактно, в одну строку с именем,
   не переносится под текст (иначе строки таблицы скачут по высоте) */
.buyer-badge{display:inline-flex;flex:none;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;background:#EAF2FF;border:1px solid #BBD6FF;color:#2563C7;font-size:11px;font-weight:600;margin-left:6px;white-space:nowrap}
html[data-theme="dark"] .buyer-badge{background:#1B2C4A;border-color:#2E4B7A;color:#8FB8FF}
.buyer-badge.cust{background:var(--card-2);border-color:var(--border);color:var(--muted)}
.classify-sel{flex:none;width:84px;margin-left:6px;padding:2px 4px;border-radius:999px;background:var(--card-2);border:1px solid var(--border-2);font-size:10.5px;color:var(--muted);font-family:inherit;cursor:pointer}
/* «Кто это» отдельным столбцом — значок и выбор больше не налезают на имя покупателя */
.qcell{white-space:nowrap}
.qcell .buyer-badge,.qcell .classify-sel{margin-left:0}
.qcell .classify-sel{width:122px;padding:4px 6px;border-radius:var(--r-ctl);font-size:11.5px}
.pill.w{background:var(--warn-soft);color:var(--warn)}
.stat .v.w{color:var(--warn)}
.mgr{display:inline-block;padding:3px 10px;background:var(--card-2);border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.mgr-sel{width:132px;padding:5px 7px;border-radius:var(--r-ctl);background:var(--card-2);border:1px solid var(--border-2);
         font-size:12.5px;color:var(--ink);font-family:inherit;cursor:pointer}
.mgr-sel:hover{border-color:var(--brand)}
td.num{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:14px}
td.num.dim{color:var(--muted)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-family:var(--f-num);font-size:12.5px;font-weight:500}
.pill.g{background:var(--brand-soft);color:var(--brand-deep)}
.pill.r{background:var(--danger-soft);color:var(--danger)}
.rowgap{min-width:126px}
.rowgap .dev{height:8px;border-radius:4px}
.rowgap .dev-mid{top:-3px;bottom:-3px;width:2px}
.devnum{margin-top:5px;text-align:center;font-family:var(--f-num);font-size:11.5px;font-weight:500}
.devnum.g{color:var(--brand-deep)} .devnum.r{color:var(--danger)}
.hint{display:inline-grid;place-items:center;width:14px;height:14px;margin-left:5px;border-radius:50%;
      border:1px solid var(--border-2);color:var(--faint);font-size:9px;font-weight:700;cursor:help;vertical-align:middle}
.noday{color:var(--faint);font-size:12.5px}
.acts{display:flex;gap:7px;justify-content:flex-end;opacity:.35}
tr:hover .acts,tr:focus-within .acts{opacity:1}
.act{background:var(--card);border:1px solid var(--border-2);border-radius:8px;padding:6px 11px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.act:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.act.pri{color:var(--ink);border-color:var(--border-2);font-weight:600}
.act:focus-visible{outline:2px solid var(--brand);outline-offset:1px;opacity:1}
/* компактная кнопка-иконка в колонке "Действия" — экономит место в плотных таблицах заявок.
   Цвет закреплён за смыслом действия (не только на hover — иначе не разобрать, где какая): */
.act.icon{width:30px;height:30px;padding:0;display:inline-grid;place-items:center}
.act.icon .ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.act.icon.act-check,.act.icon.act-open{color:var(--brand-deep);border-color:color-mix(in srgb, var(--brand) 35%, var(--border-2))}
.act.icon.act-check:hover,.act.icon.act-open:hover{background:var(--brand-soft);border-color:var(--brand)}
.act.icon.act-edit{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 35%, var(--border-2))}
.act.icon.act-edit:hover{background:var(--warn-soft);border-color:var(--warn)}
.act.icon.act-del{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 35%, var(--border-2))}
.act.icon.act-del:hover{background:var(--danger-soft);border-color:var(--danger)}
.empty{padding:56px var(--gut);text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

@media (max-width:960px){
  /* Боковая панель на телефоне не помещается. Раньше она превращалась в
     горизонтальную ленту иконок со своим скроллом — иконки резались, лента ела
     высоту экрана. Теперь панели нет вовсе, а навигация внизу (.mnav ниже),
     как в обычных приложениях. */
  .app{grid-template-columns:1fr}
  .rail{display:none}
  :root{--gut:14px}
  h1{font-size:21px}
}
@media (prefers-reduced-motion:no-preference){
  tbody tr,.act,.nav,.btn{transition:background .14s ease,color .14s ease,opacity .14s ease,border-color .14s ease}
  .dev-bar{transition:width .5s cubic-bezier(.2,.7,.3,1)}
}

/* ═══════ карточка магазина ═══════ */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;margin-bottom:14px}
.back:hover{color:var(--brand-deep)}
.back:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.shead{display:flex;align-items:flex-start;gap:16px;background:var(--card);border:1px solid var(--border);
       border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--sh-1);margin-bottom:14px;flex-wrap:wrap}
.shead .big{width:64px;height:64px;flex:none;border-radius:12px;background:var(--brand-soft);border:1px solid var(--border);
            display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--brand-deep);overflow:hidden}
.shead .big img{width:100%;height:100%;object-fit:cover}
.shead h1{font-size:24px;margin:0}
.shead .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;background:var(--card-2);
     border:1px solid var(--border);color:var(--muted)}
.tag.on{background:var(--brand-soft);border-color:transparent;color:var(--brand-deep);font-weight:600}
.tag.off{background:var(--danger-soft);border-color:transparent;color:var(--danger);font-weight:600}
.kaspi{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--card);
       border:1px solid var(--border-2);border-radius:var(--r-ctl);padding:9px 14px;font-size:13.5px;
       font-weight:600;color:var(--ink);text-decoration:none}
.kaspi:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.kaspi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
       background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
       box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden}
.fact{padding:14px 18px;border-right:1px solid var(--border)}
.fact:last-child{border-right:0}
.fact .lbl{display:block;margin-bottom:4px}
.fact .val{font-size:14.5px;font-weight:600}
.fact .val.mono{font-family:var(--f-num);font-weight:500}

.sec{display:flex;align-items:center;gap:11px;margin:30px 0 0;position:relative;flex-wrap:wrap;
     background:var(--card);border:1px solid var(--border-2);border-bottom:1px solid var(--border);
     border-radius:var(--r-card) var(--r-card) 0 0;padding:14px 18px 13px}
.sec::before{content:"";position:absolute;left:0;top:13px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.sec h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.sec span{font-size:12.5px;color:var(--muted);background:var(--card-2);border:1px solid var(--border);
          border-radius:999px;padding:2px 10px;font-family:var(--f-num);white-space:nowrap}
.sec .sec-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.cmt{max-width:280px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oid{font-family:var(--f-num);font-size:12px;color:var(--muted)}

/* ═══════ отзывы ═══════ */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rev{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--sh-1)}
.rev-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rev-av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-size:12px;font-weight:700}
.rev-who{font-weight:600;font-size:13.5px}
.rev-date{font-family:var(--f-num);font-size:11.5px;color:var(--faint)}
.rev-stars{margin-left:auto;color:#F5A623;font-size:13px;letter-spacing:1px}
.rev-text{font-size:13.5px;line-height:1.5;color:var(--ink)}
.rev-prod{margin-top:8px;font-size:11.5px;color:var(--faint)}
.rev-warn{margin-top:8px;font-size:11.5px;color:var(--danger)}
.act.del:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}

/* ═══════ WhatsApp диалоги ═══════ */
.wa{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 44px);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);background:var(--card)}
.wa-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--card)}
.wa-lhead{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.wa-lhead h2{margin:0;font-size:16px;font-weight:700}
.wa-conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-deep);font-weight:600}
.wa-conn .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.wa-conn.off{color:var(--danger)} .wa-conn.off .dot{background:var(--danger)}
.wa-search{padding:10px 12px;border-bottom:1px solid var(--border)}
.wa-search input{width:100%;padding:8px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;color:var(--ink)}
.wa-search input:focus{outline:none;border-color:var(--brand)}
.wa-threads{flex:1;overflow-y:auto;min-height:0}
.wa-th{display:flex;gap:11px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);align-items:center}
.wa-th:hover{background:var(--card-2)}
.wa-th.on{background:var(--brand-soft)}
.wa-th .av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:600}
.wa-th .mid2{flex:1;min-width:0}
.wa-th .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-th .last{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wa-th .right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.wa-th .tm{font-family:var(--f-num);font-size:11px;color:var(--faint)}
.wa-th .badge{background:var(--brand);color:#fff;font-family:var(--f-num);font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.wa-chat{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.wa-chead{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;background:var(--card)}
.wa-chead .av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.wa-chead .nm{font-weight:600;font-size:14.5px}
.wa-chead .ph{font-family:var(--f-num);font-size:12px;color:var(--muted)}
.wa-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.wa-day{align-self:center;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 12px;font-size:11.5px;color:var(--muted);margin:6px 0}
.bub{max-width:66%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;position:relative}
.bub .t{font-family:var(--f-num);font-size:10px;color:var(--faint);margin-top:3px;text-align:right}
.bub.in{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:3px}
.bub.out{align-self:flex-end;background:var(--brand-soft);border:1px solid transparent;border-bottom-right-radius:3px}
.bub.ai{align-self:flex-end;background:var(--card);border:1px dashed var(--brand)}
.bub.ai .tag{font-size:10px;color:var(--brand-deep);font-weight:600;margin-bottom:3px;display:block}
.wa-compose{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:9px;align-items:flex-end;background:var(--card)}
.wa-compose textarea{flex:1;resize:none;padding:10px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;color:var(--ink);max-height:120px;line-height:1.4}
.wa-compose textarea:focus{outline:none;border-color:var(--brand)}
/* тот же вид, что у .btn (основная кнопка страницы) — раньше был захардкожен белый текст,
   в тёмной теме на светлом --brand это читалось почти нечитаемо (контраст 2.35:1 вместо 8:1 у .btn) */
.wa-send{flex:none;background:var(--brand);color:var(--btn-fg);border:0;border-radius:var(--r-ctl);padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--sh-1)}
.wa-send:hover{background:var(--brand-deep)}
.wa-send:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wa-empty{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center}
/* QR экран */
.qr-wrap{display:grid;place-items:center;height:calc(100vh - 44px)}
.qr-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:34px 40px;box-shadow:var(--sh-2);text-align:center;max-width:420px}
.qr-card h2{margin:0 0 8px;font-size:20px}
.qr-card p{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.qr-box{width:230px;height:230px;margin:0 auto 22px;border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;background:#fff;position:relative;overflow:hidden}
.qr-box svg{width:200px;height:200px}
.qr-steps{text-align:left;font-size:13px;color:var(--muted);line-height:1.7;margin-top:6px}
.qr-steps b{color:var(--ink);font-family:var(--f-num)}
@media (max-width:820px){
  .wa{grid-template-columns:1fr}
  .wa[data-view="chat"] .wa-list{display:none}
  .wa[data-view="list"] .wa-chat{display:none}
}

/* ═══════ модалка ═══════ */
.modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.5);display:grid;place-items:center;z-index:100;padding:20px}
html[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.65)}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-2);width:760px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column}
.modal-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-h h2{margin:0;font-size:19px;font-weight:700}
.modal-h .x{margin-left:auto;background:transparent;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:6px}
.modal-h .x:hover{background:var(--card-2);color:var(--ink)}
.modal-b{padding:18px 22px;overflow-y:auto}
.modal-f{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--faint);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);font-family:inherit;font-size:14px;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fld textarea{resize:vertical;min-height:52px}
.items-h{display:flex;align-items:center;margin:6px 0 8px}
.items-h b{font-size:14px}
.items-h button{margin-left:auto;background:var(--brand-soft);color:var(--brand-deep);border:0;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.item{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;position:relative}
.item .del-item{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;padding:0;
  background:transparent;border:0;border-radius:7px;color:var(--faint);font-size:17px;cursor:pointer;line-height:1}
.item .del-item:hover{color:var(--danger);background:var(--danger-soft)}
.item .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.item .g4 .fld.wide{grid-column:1/-1}
.btn-ghost{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-ctl);padding:10px 16px;font-family:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.modal .err{color:var(--danger);font-size:13px;margin-right:auto;align-self:center}

/* поиск-выбор (магазин/город и т.п. — вводишь буквы, показывает совпадения) — вместо родного <select>/<datalist>,
   у которых на разных ОС/браузерах список либо огромный, либо не ищется по буквам нормально */
.ac-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;background:var(--card);
  border:1px solid var(--border-2);border-radius:10px;box-shadow:var(--sh-2);padding:6px;max-height:240px;overflow-y:auto}
.ac-opt{padding:7px 10px;border-radius:7px;font-size:13.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-opt:hover,.ac-opt.hi{background:var(--card-2)}
.ac-empty{padding:7px 10px;font-size:12.5px;color:var(--faint)}

/* индикатор долгой фоновой проверки: полоса прогресса + секундомер — вместо голого "идёт..." текста,
   чтобы было видно, что процесс жив и примерно сколько ждать */
.ck-prog{margin-top:10px}
.ck-prog-track{height:8px;border-radius:5px;background:var(--track);overflow:hidden;position:relative}
.ck-prog-bar{height:100%;border-radius:5px;background:var(--brand);width:0%;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.ck-prog-bar.done{background:var(--brand-deep)}
.ck-prog-bar.err{background:var(--danger)}
.ck-prog-row{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--faint)}
.ck-prog-row .n{font-family:var(--f-num)}
.ck-prog-msg{margin-top:8px;font-size:13px;color:var(--muted);white-space:pre-line}
@media (max-width:640px){ .frow,.item .g4{grid-template-columns:1fr} }

/* ── группа фильтров, влияющих на официальный факт заявки (не просто вид списка) ── */
.rule-filters,.view-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-radius:var(--r-ctl);padding:6px 10px}
.rule-filters{background:var(--brand-soft);border:1px solid color-mix(in srgb, var(--brand) 30%, transparent)}
.rule-filters .lbl{color:var(--brand-deep)}
.rule-filters select{background:var(--card)}
.view-filters{background:var(--card-2);border:1px solid var(--border-2)}
.rule-filters select,.view-filters select{max-width:220px;text-overflow:ellipsis}

/* ── миниатюры фото для отзывов в форме заявки ── */
.photo-thumb{position:relative;width:72px;height:72px}
.photo-thumb img{width:72px;height:72px;border-radius:8px;object-fit:cover;border:1px solid var(--border);display:block;background:var(--card-2)}
.photo-thumb .photo-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--card);
  border:1px solid var(--border-2);color:var(--muted);font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.photo-thumb .photo-del:hover{color:var(--danger);border-color:var(--danger)}
.photo-thumb .photo-del:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.photo-thumb .photo-used{position:absolute;bottom:3px;left:3px;right:3px;text-align:center;font-size:9px;font-weight:600;
  padding:2px 0;border-radius:4px;background:rgba(0,0,0,.6);color:#fff}

/* компактное поле в тулбаре редактирования правила заявки (даты/цена/город) */
.mini-inp{padding:5px 8px;border:1px solid var(--border-2);border-radius:var(--r-ctl);background:var(--card-2);font-family:inherit;font-size:13px;color:var(--ink)}

/* ── единый вид короткого статусного сообщения (загрузка/ошибка) — чтобы блок результата
   не «прыгал» между голым текстом и оформленной карточкой в зависимости от исхода ── */
.status-msg{padding:12px 16px;border-radius:var(--r-ctl);font-size:13.5px;background:var(--card-2);border:1px solid var(--border-2);color:var(--muted)}
.status-msg.err{background:var(--danger-soft);border-color:transparent;color:var(--danger)}

/* ── тост-уведомление (замена системных alert()) — общий на все страницы ── */
#toast-host{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--ok);color:#fff;padding:11px 16px;border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.45;white-space:pre-line;box-shadow:var(--sh-2);max-width:360px;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:var(--danger)}

/* ── индикатор активной сортировки в заголовке таблицы ── */
thead th.sorted{color:var(--ink)}
thead th.sorted::after{content:"";display:inline-block;margin-left:5px;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:5px solid var(--brand-deep);vertical-align:middle}
thead th.sorted.desc::after{border-bottom:0;border-top:5px solid var(--brand-deep)}

/* ── Свёрнутая панель: только значки ─────────────────────────────────────────
   Раньше подписи и переключатель темы делались ПРОЗРАЧНЫМИ, но место занимали.
   Из-за этого группа «СПРАВОЧНИКИ» оказывалась шире панели (66px), центрирование
   выталкивало её влево, и иконки срезало — замер показывал x = −28px, а кнопку
   темы уносило на 48px за край. Клипинг это прятал, но выглядело криво.

   Поэтому здесь всё лишнее убирается ИЗ ПОТОКА (display:none) и возвращается при
   наведении. Тогда ширину задают только иконки, и вылезать нечему. */
html[data-rail="auto"] .grp > .lbl,
html[data-rail="auto"] .brand b,
html[data-rail="auto"] .theme,
html[data-rail="auto"] .who > div:not(.av),
html[data-rail="auto"] #rail-logout,
html[data-rail="auto"] .pin{display:none}

html[data-rail="auto"] .rail{padding-left:0;padding-right:0;gap:14px}
html[data-rail="auto"] .brand{padding:4px 0 2px;justify-content:center;gap:0}
html[data-rail="auto"] .rail-foot{width:100%;align-items:center;gap:0}
html[data-rail="auto"] .who{background:transparent;border:0;box-shadow:none;padding:0;width:auto}

/* При наведении панель разворачивается — возвращаем всё на место */
html[data-rail="auto"] .rail:hover .grp > .lbl,
html[data-rail="auto"] .rail:focus-within .grp > .lbl{display:block;padding:0 10px 6px}
html[data-rail="auto"] .rail:hover .brand b,
html[data-rail="auto"] .rail:focus-within .brand b{display:inline}
html[data-rail="auto"] .rail:hover .theme,
html[data-rail="auto"] .rail:focus-within .theme{display:flex}
html[data-rail="auto"] .rail:hover .who > div:not(.av),
html[data-rail="auto"] .rail:focus-within .who > div:not(.av){display:block}
html[data-rail="auto"] .rail:hover #rail-logout,
html[data-rail="auto"] .rail:focus-within #rail-logout{display:block;width:100%;margin-top:8px}
html[data-rail="auto"] .rail:hover .pin,
html[data-rail="auto"] .rail:focus-within .pin{display:grid}
html[data-rail="auto"] .rail:hover,
html[data-rail="auto"] .rail:focus-within{padding-left:16px;padding-right:14px;gap:22px}
html[data-rail="auto"] .rail:hover .brand,
html[data-rail="auto"] .rail:focus-within .brand{padding:4px 10px 2px;justify-content:flex-start;gap:9px}
html[data-rail="auto"] .rail:hover .rail-foot,
html[data-rail="auto"] .rail:focus-within .rail-foot{align-items:stretch;gap:10px}
html[data-rail="auto"] .rail:hover .who,
html[data-rail="auto"] .rail:focus-within .who{background:var(--card);border:1px solid var(--border);box-shadow:var(--sh-1);padding:9px 10px}

/* Телефон не должен ломаться на пять строк: колонка узкая, и «+7 (707) 476-43-08»
   рвался по скобкам и дефисам, раздувая строку таблицы втрое. */
td.phone-cell{white-space:nowrap}

/* Поля выбора даты выпадали из оформления: общее правило охватывает только
   input[type=search] и select, поэтому рядом с оформленными фильтрами даты
   выглядели «голыми» браузерными полями — другая высота, рамка и шрифт. */
input[type=date]{padding:9px 12px;background:var(--card-2);border:1px solid var(--border-2);
  border-radius:var(--r-ctl);font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.2}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* ═══════ мобильная версия ═══════
   Сделано под айфон: нижняя панель вкладок, крупные области нажатия, поля не
   меньше 16px (иначе Safari при фокусе зумит страницу) и отступы под «чёлку»
   и полосу home — через env(safe-area-inset-*). */

/* Нижняя панель вкладок. В разметке её нет — её строит auth.js из пунктов
   боковой панели, чтобы не править 15 страниц. */
.mnav{display:none}
.mnav-sheet{display:none}

@media (max-width:960px){
  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--card);border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(16,24,40,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  html[data-theme="dark"] .mnav{box-shadow:0 -2px 12px rgba(0,0,0,.35)}
  .mnav a,.mnav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:7px 2px 5px;
    color:var(--muted);text-decoration:none;font-size:10.5px;line-height:1.15;text-align:center;
    background:none;border:0;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mnav a.on{color:var(--brand-deep);font-weight:600}
  .mnav a.on svg{stroke:var(--brand-deep)}
  .mnav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  /* лист «Ещё» — остальные разделы */
  .mnav-sheet{
    display:none;position:fixed;inset:0;z-index:90;background:rgba(16,24,40,.45);
    align-items:flex-end;
  }
  .mnav-sheet.open{display:flex}
  .mnav-sheet .inner{
    width:100%;background:var(--card);border-radius:18px 18px 0 0;
    padding:8px 0 calc(12px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto;
  }
  .mnav-sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--border-2);margin:8px auto 10px}
  .mnav-sheet a{
    display:flex;align-items:center;gap:12px;padding:14px 20px;min-height:52px;
    color:var(--ink);text-decoration:none;font-size:15px;border-bottom:1px solid var(--border);
  }
  .mnav-sheet a:last-of-type{border-bottom:0}
  .mnav-sheet a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;color:var(--muted)}
  .mnav-sheet a.on{color:var(--brand-deep);font-weight:600}

  /* место под нижнюю панель, чтобы она не закрывала последнюю строку таблицы */
  main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* шапка страницы: заголовок сверху, кнопки под ним во всю ширину */
  /* Заголовок занимает всю строку, кнопки идут под ним ЛЕНТОЙ, а не тремя полосами.
     Раньше тут стояло flex-direction:column — оно и растягивало каждую кнопку. */
  .head{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-bottom:16px}
  .head > div:first-child{flex:1 1 100%}
  .head .btn,.head .btn-ghost{margin-left:0;width:100%;min-height:44px}
  .head > div:last-child{display:flex;flex-direction:column;gap:8px}

  /* цифры — по две в ряд, иначе экран уходит в бесконечную ленту */
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:12px 13px 13px}
  .stat .v{font-size:23px}

  /* фильтры в столбик */
  .tools{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
  /* у .search задано flex:1 1 250px — когда фильтры становятся столбиком, эти
     250px превращаются в ВЫСОТУ и дают пустую дыру на пол-экрана */
  .tools .search{flex:none;max-width:none;width:100%}
  .tools select,.tools input{width:100%;min-height:44px}
  .count{margin-left:0;text-align:right}

  /* таблицы: прокрутка пальцем, страница вбок НЕ ползает */
  .wrap{-webkit-overflow-scrolling:touch}
  body{overflow-x:hidden}

  /* Safari зумит страницу, если поле мельче 16px — поэтому ровно 16 */
  /* !important здесь оправдан: у части полей размер задан инлайном в разметке,
     а Safari на айфоне ЗУМИТ страницу при фокусе в поле мельче 16px — и человек
     каждый раз руками возвращает масштаб. */
  input,select,textarea{font-size:16px !important}

  /* модалка на телефоне — во весь экран, иначе в неё не попасть пальцем */
  .modal{width:100%;max-width:100%;max-height:100vh;height:100%;border-radius:0}
  .modal-bg{padding:0}
  .modal-b{padding:14px 16px}
  .modal-h,.modal-f{padding:14px 16px}
  .modal-f{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

  /* кнопки в строках таблицы — не меньше 40px, иначе не попасть */
  .acts .act{min-width:40px;min-height:40px}
}
@media (max-width:960px){
  /* Что растягивало страницу вбок на телефоне (замер: 502px при экране 390):
     1) пояснения рядом с заголовками блоков стоят с запретом переноса,
     2) строки фильтров на странице заявки — flex в одну строку без переноса.
     Переносим пояснения и разрешаем фильтрам переноситься. */
  .sec span{white-space:normal}
  #rf-quickfilters,.rule-filters,.view-filters,.sec{flex-wrap:wrap;max-width:100%;min-width:0}
  /* вглубь, а не только по прямым детям: кнопки «Сохранить» и подписи лежат уровнем ниже */
  #rf-quickfilters *,.rule-filters *,.view-filters *{min-width:0;max-width:100%}
  #rf-quickfilters label,.rule-filters label,.view-filters label{flex-wrap:wrap}
  #rf-quickfilters select,.rule-filters select,.view-filters select{max-width:100%}
  .count{margin-left:0}
  /* страховка: даже если что-то одно вылезет, страница вбок не поедет */
  html{overflow-x:hidden}
}

/* ═══════ КАРТОЧКИ ВМЕСТО ТАБЛИЦ НА ТЕЛЕФОНЕ ═══════
   Первая версия мобильной вёрстки была просто сжатым десктопом: сверху три кнопки
   во всю ширину, плитка цифр и четыре фильтра — а сами данные уезжали далеко вниз,
   и таблицу приходилось листать вбок вслепую. Здесь строка таблицы превращается в
   карточку с подписями полей, а лишние колонки скрываются (их выбирает auth.js). */
@media (max-width:960px){

  /* шапка компактнее: заголовок и подзаголовок в одну колонку, без лишнего воздуха */
  .head{gap:8px;margin-bottom:12px}
  h1{font-size:20px}
  .sub{font-size:13px}

  /* Кнопки шапки — в ряд с прокруткой, а не три полосы во весь экран.
     Важно: на разных страницах кнопки лежат то в обёртке, то прямо в .head,
     поэтому правило охватывает оба случая. */
  .head{flex-wrap:wrap}
  .head > div:last-child:not(:first-child){display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;width:100%}
  .head > button,.head > div:last-child .btn,.head > div:last-child .btn-ghost,
  .head .btn,.head .btn-ghost{
    width:auto;flex:0 0 auto;white-space:nowrap;min-height:40px;padding:9px 14px;font-size:13.5px;margin-left:0}
  /* сами кнопки, лежащие прямо в .head, выстраиваем в прокручиваемую ленту */
  .head > button{order:2}

  /* Цифры — лентой с прокруткой: видно первые две, остальные листаются пальцем.
     Так они занимают одну строку вместо пол-экрана. */
  .stats{display:flex;overflow-x:auto;gap:1px;-webkit-overflow-scrolling:touch}
  .stat{flex:0 0 46%;padding:10px 12px}
  .stat .v{font-size:20px;margin-top:3px}
  .stat .foot{font-size:11px;margin-top:4px}

  /* Фильтры сворачиваются: открываются кнопкой «Фильтры» (её ставит auth.js) */
  .tools.m-collapsed{display:none}
  .m-filters-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;
    width:100%;min-height:44px;padding:11px 14px;margin-bottom:10px;
    background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-ctl);
    font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer}
  .m-filters-btn b{font-weight:600}
  .m-filters-btn .n{color:var(--brand-deep);font-weight:600}

  /* ── строка таблицы → карточка ── */
  .tcard{border-radius:var(--r-card);background:transparent;border:0;box-shadow:none;overflow:visible}
  .tcard .wrap{overflow:visible;max-height:none!important}
  .tcard table{min-width:0;width:100%;display:block}
  .tcard thead{display:none}
  .tcard tbody{display:block}
  .tcard tbody tr{
    display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border-2);
    border-radius:var(--r-card);margin-bottom:10px;padding:10px 12px;box-shadow:var(--sh-1);
  }
  .tcard tbody tr:hover td{background:transparent}
  .tcard tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:6px 0;border:0;border-bottom:1px solid var(--border);text-align:right;
  }
  .tcard tbody tr td:last-child{border-bottom:0}
  .tcard tbody td::before{
    content:attr(data-label);flex:0 1 auto;min-width:0;max-width:55%;
    color:var(--muted);font-size:12.5px;font-weight:500;text-align:left;line-height:1.25;
  }
  .tcard tbody td[data-label=""]::before{display:none}
  /* колонки, не попавшие в мобильный набор */
  .tcard tbody td.m-hide{display:none}
  /* у части ячеек в таблице жёсткая узкая ширина (номер, проценты) — в карточке
     из-за неё подпись не помещалась и ломалась на три строки */
  .tcard tbody td{width:auto!important;min-width:0}
  /* правая липкая колонка действий на телефоне не нужна */
  .tcard tbody td:last-child{position:static!important;box-shadow:none!important}
  .tcard tbody td .acts{justify-content:flex-end}

  /* первая ячейка карточки — заголовок: крупнее и без подписи */
  /* название — всегда первой строкой карточки, независимо от порядка колонок */
  .tcard tbody td.m-title{
    order:-1;display:block;text-align:left;padding:2px 0 8px;border-bottom:1px solid var(--border);
    font-size:15px;font-weight:600;
  }
  /* галочка выбора строки в карточке не нужна — она для массовых действий за столом */
  .tcard tbody td:has(input[type=checkbox]){display:none}
  .tcard tbody td.m-title::before{display:none}

  .empty{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-card);padding:20px}
}

/* ═══════ корзины выкупа ═══════
   Карточка корзины повторяет остальные блоки сервиса: шапка с номером и
   состоянием, ниже строки товаров. Своих цветов не заводим — только токены. */
.bk{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-card);
    margin-bottom:12px;box-shadow:var(--sh-1);overflow:hidden}
.bk-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:13px 16px;
      background:var(--card-2);border-bottom:1px solid var(--border)}
.bk-h b{font-size:15px}
.bk-h .bk-sum{font-family:var(--f-num);font-size:13px;color:var(--muted)}
.bk-h .bk-sum b{font-family:var(--f-num);font-size:13.5px;color:var(--ink)}
.bk-b{padding:12px 16px 14px}
.bk-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.bk-row input[type=url],.bk-row input[type=text]{flex:1;min-width:190px;padding:9px 11px;
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--card-2);
  border:1px solid var(--border-2);border-radius:var(--r-ctl)}
.bk-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.bk-money{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.bk-money input{width:auto}
.bk-ln{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
       padding:8px 0;border-top:1px solid var(--border);font-size:13.5px}
.bk-ln:first-child{border-top:0}
.bk-ln a{text-decoration:none}
.bk-ln a:hover{text-decoration:underline}
.bk-ln small{display:block;color:var(--faint);font-size:12px;margin-top:2px}
.bk-ln .bk-st{white-space:nowrap;font-family:var(--f-num);font-size:12.5px;color:var(--muted)}

/* выбор выкупатора: их тысячи, поэтому поиск, а не выпадающий список */
.bpick{position:relative;margin-left:auto;min-width:240px;flex:1;max-width:340px}
.bpick input{width:100%;padding:9px 11px;font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-ctl)}
.bpick input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.bpick.has input{border-color:var(--brand);background:var(--brand-soft)}
.bpick .found{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:270px;
  overflow:auto;background:var(--card);border:1px solid var(--border-2);
  border-radius:var(--r-ctl);box-shadow:var(--sh-2)}
.bpick .found[hidden]{display:none}
.bpick .found button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;
  border:0;font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.bpick .found button:hover,.bpick .found button:focus-visible{background:var(--brand-soft);outline:none}
.bpick .found button small{color:var(--muted);font-family:var(--f-num)}
.bpick .found .bk-none{padding:10px 12px;font-size:13px;color:var(--muted)}
@media(max-width:960px){
  .bk-h{padding:11px 13px}.bk-b{padding:11px 13px 13px}
  /* на телефоне каждому элементу — своя строка, иначе поля сжимаются в нечитаемые огрызки */
  .bk-h .bpick{flex:1 0 100%;margin-left:0;max-width:none;min-width:0;order:9}
  .bk-h .bk-sum{flex:1 0 100%}
  .bk-row{gap:8px}
  .bk-row input[type=url],.bk-row input[type=text]{flex:1 0 100%;min-width:0;font-size:16px}
  .bk-row .act,.bk-row .btn-ghost{flex:1;min-height:40px}
  .bk-money{flex:1 0 100%}
  /* товар и его цена — в столбик, иначе название наезжает на сумму */
  .bk-ln{flex-direction:column;gap:2px}
  .bk-ln .bk-st{align-self:flex-start}
}