/* tools2.work — оформлення панелі */
:root{
  --green:#16a34a; --green-d:#15803d; --green-l:#22c55e;
  /* Фіолетовий — робоча смуга потоку та перемикач завдань (відділити від основного) */
  --violet:#7c3aed; --violet-d:#5b21b6; --violet-l:#a855f7;
  --bg:#f1f5f9; --panel:#ffffff; --line:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
  --danger:#dc2626;
  /* Жовтий акцент карток (`.card-warn`) — тон бурштину, а не лимона: на білій
     панелі чистий жовтий (#facc15) майже не видно, смужка читається як сіра. */
  --amber:#f59e0b;
  /* Кольори брендів — ОДНЕ джерело: рамка картки лота, кутовий стікер
     і таблетка-фільтр бренду беруть колір звідси. */
  --b-dewalt:#facc15; --b-makita:#14b8a6; --b-bosch:#2563eb;
  --b-ridgid:#f97316; --b-milwauke:#dc2626;
  /* Kobalt — теж синій, але ЯСКРАВА ЛАЗУР, а не індиго Bosch (#2563eb).
     Обрано саме hue ≈200: це середина проміжку між Bosch (222) і бірюзою
     Makita (173), тобто ~25° від кожного — на тонкій рамці 2px різниця в
     10-15° не читається, і колір злився б із сусідом. Плюс 100% насиченості
     проти 83% у Bosch: пара «індиго / лазур» розрізняється навіть краєм ока. */
  --b-kobalt:#00a8ff;
  /* Бічний padding .content — full-bleed блоки виходять на нього негативним
     margin-ом. НЕ через 100vw: 100vw включає вертикальний скролбар → зайві
     ~15px і горизонтальна прокрутка на кожній сторінці. */
  --pad:26px;
  /* Верхній padding .content — відступ від ряду підзакладок до вмісту сторінки. */
  --ctop:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
}
a{color:inherit;text-decoration:none}
code{background:#e8f5ec;color:var(--green-d);padding:1px 5px;border-radius:4px;font-size:.9em}

/* ── Навігація ──
   ЄДИНИЙ стиль для всієї панелі — компактні ряди .tasktabs (опис нижче, біля
   .ttab). Широкої шапки з логотипом і високих вкладок (.topbar/.tabs/.subtabs)
   більше нема: вони були проміжним варіантом, який підмінявся компактним меню
   в «Наявних пропозиціях».
   Липне ОДИН контейнер .navwrap з обома рядами всередині — а не кожен ряд окремо
   зі своїм офсетом. Тому підменю фізично не може ні відліпитись від меню, ні
   наїхати на нього, і не треба міряти висоти скриптом (--h-top/--h-tabs/--h-main). */
.navwrap{position:sticky;top:0;z-index:20}

/* ── Контент ──
   ПРАВИЛО ПРОЄКТУ: усі сторінки панелі верстаються на ПОВНУ ширину екрана —
   без колонки по центру. Нові сторінки нічого додатково робити не мусять. */
.content{max-width:none;margin:0;padding:var(--ctop) var(--pad) 60px}
/* `?embed=1` — розділ показаний РАМКОЮ всередині іншої сторінки панелі (вікно
   «Посилки/eBay» у складі, див. `t2_is_embed()`). Свого меню там нема, тож і
   відступу під нього не треба: у рамці кожен піксель на рахунку. */
body.embed .content{padding:12px var(--pad) 28px}
body.embed .page-head{margin-top:0}
.page-head h1{margin:0 0 4px;font-size:1.6rem}
/* Опис під заголовком не має впиратись у наступний блок. `.card` має лише
   margin-bottom, тож коли одразу під шапкою йде картка (API-Ключі, Заблоковані
   продавці), текст лягав їй на межу. Відступ ставимо на ЗВ'ЯЗЦІ, а не на самій
   .page-head: сторінки, де далі йде `.cards` (свій margin-top:22px) чи інлайновий
   margin, лишаються з тими самими проміжками, що й були. */
.page-head + .card,
.page-head + .tbl,
.page-head + form{margin-top:18px}
.muted{color:var(--muted);margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
/* Картки, що йдуть підряд у стовпчик (не в сітці .cards), не мають злипатись —
   на «Запустити» блоки «Розклад (диспетчер)» і «Запуск в ручному режимі» стояли
   впритул і читались як один. У сітці .cards відступ і так дає gap. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  margin-bottom:22px}
.cards .card{margin-bottom:0}
.card-title{font-weight:700;margin-bottom:8px}
.card-body{color:var(--muted);line-height:1.6;font-size:.95rem}
.card-body b{color:var(--text)}

/* Акцентна смужка зліва. Картка БЕЗ неї виглядає «недооформленою» поруч із сусідньою,
   тому в рядах карток кольор мають усі: зелений — головна дія, фіолетовий — робота
   потоку (той самий колір, що й робоча смуга), сірий — довідкове/налаштування. */
.card-ok{border-left:4px solid var(--green)}
.card-err{border-left:4px solid var(--danger)}
.card-vio{border-left:4px solid var(--violet)}
.card-mut{border-left:4px solid var(--muted)}
/* Жовтий — картка-ДІЯ в ряду карток-станів (поле пошуку серед плиток «скільки чого»).
   Не зелений: зелений у цих рядах уже значить «головний стан», і дві зелені смужки
   поруч читались би як однакові за змістом блоки. */
.card-warn{border-left:4px solid var(--amber)}
.sm{font-size:.85rem}
.nowrap{white-space:nowrap}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:14px;
  padding:34px;text-align:center;color:var(--muted)}

/* ── ГОЛОВНА: плитка розділів (дубль першого рівня меню) ──
   Кількість колонок задана ЯВНО на трьох ширинах, а не auto-fit: плитка має читатись
   як сітка однакових кнопок (2 / 3 / 4), і auto-fit на проміжних ширинах давав би
   то 2, то 3 колонки різної ширини. Порядок правил — від вузького до широкого. */
.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
@media(min-width:620px){.home-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1000px){.home-grid{grid-template-columns:repeat(4,1fr);gap:18px}}

/* Головна дія панелі — «Виписати рахунок» — окремою широкою кнопкою НАД сіткою.
   Зелений градієнт тут не прикраса: плитка розділів уся однакова й нейтральна, тож
   виділити одну дію серед них можна лише кольором, якого в сітці немає. */
.home-cta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:22px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(135deg,var(--green-l) 0%,var(--green) 55%,var(--green-d) 100%);
  color:#fff;font-weight:800;font-size:1.05rem;line-height:1.2;text-align:center;
  border:1px solid var(--green-d);box-shadow:0 4px 14px rgba(22,163,74,.28);
  transition:box-shadow .12s,transform .12s,filter .12s;
}
.home-cta:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(22,163,74,.36);transform:translateY(-1px)}
.home-cta:active{transform:translateY(0);box-shadow:0 3px 10px rgba(22,163,74,.28)}
.home-cta-i{display:flex;color:#fff}
.home-cta-i svg{width:26px;height:26px;display:block;stroke-width:1.8}
/* Сітка розділів іде одразу під кнопкою — свій верхній відступ вона вже має, але
   поруч із кнопкою він завеликий, тож ріжемо його саме в цій парі. */
.home-cta + .home-grid{margin-top:12px}
@media(max-width:620px){
  .home-cta{padding:15px 14px;font-size:.98rem;gap:9px}
  .home-cta-i svg{width:22px;height:22px}
}

/* Плитка — значок над підписом. Ціль пальця навмисно велика (min-height + весь блок
   є посиланням): на телефоні це головний спосіб ходити панеллю. */
.htile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:118px;padding:18px 12px;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  color:var(--text);font-weight:700;font-size:.95rem;line-height:1.25;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.htile:hover{border-color:var(--green-l);box-shadow:0 4px 14px rgba(15,23,42,.07);transform:translateY(-1px)}
.htile:active{transform:translateY(0)}
.htile-i{display:flex;color:var(--green);opacity:.9}
.htile-i svg{width:38px;height:38px;display:block;stroke-width:1.6}
.htile-t{display:block}
/* «Вийти» — остання плитка, червона: дія іншого роду, ніж перехід у розділ. */
.htile-exit{color:var(--danger)}
.htile-exit .htile-i{color:var(--danger)}
.htile-exit:hover{border-color:var(--danger);background:#fef2f2}
@media(max-width:620px){
  .htile{min-height:104px;padding:14px 8px;gap:8px;font-size:.86rem}
  .htile-i svg{width:32px;height:32px}
}

/* Числа — УСЕРЕДИНІ плитки, під підписом розділу. Окремими кнопками під нею вони
   читались як інший блок поруч із сіткою; тут вони частина самої плитки, і клікати
   можна куди завгодно в квадрат — уся площа веде в той список (див. index.php). */
.htile-subs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:2px}
/* Таблетка «підпис · число»: число виділене, бо саме воно й є відповіддю. Це НЕ
   посилання (всю плитку вже й так клікають), тож власного hover-у не має. */
.hsub{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;font-size:.76rem;font-weight:600;line-height:1.2;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
}
.hsub b{font-size:.86rem;font-weight:800}
/* Розділ, у якому чекає робота, помітний ще ДО читання чисел — теплою рамкою. */
.htile-work{border-color:#fed7aa}
.htile-work:hover{border-color:#fb923c;background:#fffbf5}
@media(max-width:620px){.hsub{padding:3px 7px;font-size:.7rem;gap:4px}}

/* «Головна» в ряду розділів — вужча за решту закладок: це кнопка «на початок»,
   а не рівноправний розділ, тож рівної частки ширини їй не належить. */
.tt-home{flex:0 0 auto;padding-left:14px;padding-right:14px}

/* ── Повідомлення ── */
.flash{border-radius:10px;padding:10px 14px;margin-bottom:18px;font-weight:600;font-size:.92rem}
.flash-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d)}
.flash-err{background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}

/* ── Кнопки ── */
.btn{display:inline-block;border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:9px;padding:9px 14px;font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit}
/* `display:inline-block` вище перемагає службовий `display:none` браузера, тому атрибут
   `hidden` сам собою кнопку НЕ ховає — це треба сказати окремо. Не косметика: у вже
   проведеному рахунку «Провести» ставало `hidden`, лишалось на екрані, і клік по ньому
   відправляв форму ще раз — сервер брав це за НОВИЙ документ (номер +1) і відмовляв. */
.btn[hidden]{display:none}
.btn:hover{border-color:var(--muted)}
.btn-sm{padding:5px 10px;font-size:.82rem;border-radius:7px}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d);border-color:var(--green-d)}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed}
.btn-ok{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
.btn-danger{background:#fff;border-color:#fecaca;color:var(--danger)}
.btn-danger:hover{background:#fef2f2;border-color:var(--danger)}
.btn-ghost{background:var(--bg)}
/* Фіолетова — ПЕРЕХІД у суміжну сторінку, що стоїть поруч із основною дією
   («Перейти до операцій» біля «Зберегти зміни»). Колір навмисно не зелений: дві
   однаково зелені кнопки поруч змушують щоразу читати підписи, щоб не натиснути
   не ту, а помилка тут коштує незбереженої картки. Фіолетовий у панелі вже
   означає «інша смуга роботи» (робоча смуга потоку, перемикач завдань). */
.btn-violet{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:700}
.btn-violet:hover{background:var(--violet-d);border-color:var(--violet-d);color:#fff}
/* Чорна — «Стара база» в картці товару. Це не дія над товаром, а довідка, тож колір
   навмисно поза палітрою дій (зелена = зберегти, фіолетова = перехід): чорну кнопку
   око не плутає з жодною з них. Бліда `btn-ghost` губилась у ряду настільки, що її
   не помічали взагалі. */
.btn-black{background:#111;border-color:#111;color:#fff;font-weight:700}
.btn-black:hover{background:#000;border-color:#000;color:#fff}
/* Жовта — «Внести в базу» в картці посилки. Стоїть впритул до зеленої «Перейти», і
   другою зеленою вона читалась би як той самий перехід удвох екземплярах. Жовтий у
   палітрі дій більше нічим не зайнятий (зелена = зберегти/перейти, фіолетова = сусідня
   сторінка, чорна = довідка), тому кнопку видно й сплутати її нема з чим. Текст чорний:
   білий на бурштиновому не тримає контраст. */
.btn-amber{background:#f59e0b;border-color:#f59e0b;color:#111;font-weight:700}
.btn-amber:hover{background:#d97706;border-color:#d97706;color:#111}

/* ── Панель інструментів + чипи ── */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:18px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:.86rem;font-weight:600;color:var(--muted)}
.chip:hover{border-color:var(--green-l);color:var(--text)}
.chip.active{background:var(--green);border-color:var(--green);color:#fff}

/* ── Мітки ── */
.tag{display:inline-block;background:#e8f5ec;color:var(--green-d);border-radius:6px;
  padding:2px 7px;font-size:.78rem;font-weight:700;margin:2px 3px 0 0}
.tag-mut{background:var(--bg);color:var(--muted)}
.tag-ok{background:#f0fdf4;color:var(--green-d)}
.tag-err{background:#fef2f2;color:var(--danger);font-weight:600}
/* «Не відправлено» — стан очікування, а не помилка: бурштиновий, щоб у списку впадав
   в око (таких одиниці), але не читався як збій поряд з червоним «скасовано». */
.tag-wait{background:#fffbeb;color:#b45309;font-weight:600}

/* ── Таблиці ── */
.tbl{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.92rem}
.tbl th{background:#f8fafc;text-align:left;padding:11px 12px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
/* Зебра для довгих таблиць (завдання, запуск, історія прогонів) — щоб рядки не зливались.
   Шапка тут звичайний перший <tr> (thead немає), тому її виключаємо: підсвічуються
   ПАРНІ рядки даних, а це кожен другий tr починаючи з третього. */
.tbl-zebra tr:nth-child(odd):not(:first-child) td{background:#f0f3f9}
/* Наведення помітно насиченіше за зебру. Специфічність рівна зебрі, тож правило мусить
   стояти НИЖЧЕ за неї — інакше сірий смугастий рядок не реагував би на курсор. */
.tbl tr:not(:first-child):hover td{background:#dfe6f2}

/* Чорний список: відступ під шапкою, пошук, пагінація */
.bl-head{margin-bottom:26px}
.bl-tools{display:flex;align-items:center;gap:14px;margin:26px 0 12px}
.bl-q{flex:1 1 340px;max-width:460px;padding:10px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.92rem;background:#fff;color:var(--text)}
.bl-q:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.bl-found{color:var(--muted);font-size:.86rem;font-weight:600}
.bl-tbl tbody tr[hidden]{display:none}
.bl-pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 40px}
.blp{min-width:36px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;font-size:.86rem;font-weight:700;color:var(--muted);cursor:pointer}
.blp:hover:not(:disabled){border-color:var(--violet);color:var(--violet-d)}
.blp:disabled{opacity:.4;cursor:not-allowed}
.blp-cur{background:linear-gradient(90deg,var(--violet-d),var(--violet-l));
  border-color:var(--violet-d);color:#fff}
.blp-gap{color:var(--muted);padding:0 2px}

/* Чорний список: логін → товари продавця на eBay; джерело → закладка завдання.
   .nf-sel — той самий нік у таблиці правил сповіщень (умова «новий лот продавця»). */
.bl-seller,.nf-sel{font-weight:800;color:var(--violet-d);border-bottom:1px dashed rgba(124,58,237,.45)}
.bl-seller:hover,.nf-sel:hover{color:var(--violet);border-bottom-color:var(--violet)}
.bl-src{display:inline-block;margin:0 5px 4px 0;padding:2px 9px;border-radius:999px;
  font-size:.78rem;font-weight:600;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.bl-src:hover{border-color:var(--violet);color:var(--violet-d)}
.bl-src-main{background:#f5f3ff;border-color:#ddd6fe;color:var(--violet-d);font-weight:700}

/* Назва завдання → та сама вибірка сторінкою пошуку eBay (нова вкладка) */
.task-ebay{color:var(--violet-d);border-bottom:1px dashed rgba(124,58,237,.45)}
.task-ebay:hover{color:var(--violet);border-bottom-color:var(--violet)}
.task-ebay-i{font-weight:400;opacity:.55}
/* Прогін, що піде глибше однієї сторінки (давно не синхронізували) */
.pg-more{color:var(--violet-d);font-weight:700}

/* Стан товару (Condition ID): весь довідник eBay галочками в 3 колонки */
.cn-block{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--bg)}
.cn-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;
  font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:9px}
.cn-act{font-weight:600}
.cn-act a{font-weight:700;color:var(--violet-d);border-bottom:1px dashed rgba(124,58,237,.45)}
.cn-act a:hover{color:var(--violet);border-bottom-color:var(--violet)}
/* Групи станів: шапка з галочкою «вся група» + пункти групи в 3 колонки */
.cn-groups{display:flex;flex-direction:column;gap:9px}
.cn-g{border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 11px}
.grid-form .cn-ghead,.cn-ghead{display:flex;flex-direction:row;align-items:center;gap:8px;
  cursor:pointer;font-size:.86rem;font-weight:800;color:var(--text);margin-bottom:8px}
.cn-gn{font-weight:600;font-size:.78rem;color:var(--muted)}
.cn-items{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:1000px){.cn-items{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cn-items{grid-template-columns:1fr}}
/* label усередині .grid-form за замовчуванням колонковий і сірий — тут потрібен рядок */
.grid-form .cn-item,.cn-item{display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--bg);cursor:pointer;
  font-size:.84rem;font-weight:600;color:var(--text);line-height:1.3}
.cn-item:hover{border-color:#ddd6fe;background:#faf9ff}
.cn-item:has(input:checked){border-color:#c4b5fd;background:#f5f3ff}
/* .grid-form input дає полям рамку й padding — для галочки це зайве, скидаємо */
.grid-form .cn-ghead input[type=checkbox],.grid-form .cn-item input[type=checkbox],
.cn-ghead input[type=checkbox],.cn-item input[type=checkbox]{
  width:16px;height:16px;min-width:0;padding:0;border:0;background:none;
  accent-color:var(--violet-d);margin:0;flex:none;cursor:pointer}
.cn-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-item code{flex:none;font-size:.76rem}
.cn-item:has(input:checked) code{background:var(--violet-d);color:#fff}
.cn-hint{margin-top:9px;line-height:1.5}
.cn-hint code{background:#fff}

/* Глибина прогону: правило однією фразою з полями всередині неї */
.dp-block{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--bg)}
.dp-head{font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.dp-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:.92rem;font-weight:600;color:var(--text);line-height:1.6}
.dp-row input{width:82px;text-align:center;font-weight:700}
.dp-hint{margin-top:8px;line-height:1.5}

/* Стоп-слова: заголовок + режим порівняння + список — одним блоком */
.sw-block{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--bg)}
.sw-head{font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.sw-chk{margin-bottom:10px;font-weight:600;color:var(--text);line-height:1.45}
.sw-block textarea{width:100%;box-sizing:border-box}   /* інакше textarea лишалась вузькою (cols за замовчуванням) */
.sw-chk input{margin-top:2px;align-self:flex-start}
.sw-hint{margin-top:8px;line-height:1.5}
.sw-hint code{background:#fff}

/* ── Форми ── */
.row-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 12px}
.row-form input,.row-form select{padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:.92rem;font-family:inherit;color:var(--text);background:#fff;min-width:180px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px}
.grid-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;
  font-weight:600;color:var(--muted)}
.grid-form .wide{grid-column:1/-1}
.grid-form input,.grid-form select,.grid-form textarea{
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:.92rem;
  font-family:inherit;color:var(--text);background:#fff;resize:vertical}
/* Приклад заповнення має ЧІТКО відрізнятись від справжнього значення: дефолтний
   сірий браузера надто темний — «631» у порожньому полі читалось як заповнене. */
.grid-form input::placeholder,.grid-form textarea::placeholder,
.row-form input::placeholder{color:#b8c0cf;font-style:italic;opacity:1}
.grid-form input:focus,.grid-form select:focus,.grid-form textarea:focus,
.row-form input:focus,.row-form select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.grid-form .check{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.form-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:4px}

/* ── Робоча смуга (на місці логотипа, на всю ширину, фіолетова) ── */
.topwork{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(90deg,var(--violet-d),var(--violet-l));
  color:#fff;padding:9px 16px;
}
body.work .topwork{margin:0}
.tw-back{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;font-size:1.1rem;font-weight:700;
  background:rgba(255,255,255,.16);color:#fff;
}
.tw-back:hover{background:rgba(255,255,255,.3)}
/* flex:1 1 0 (а не auto) — рівні боки, щоб .tw-find стояв по центру смуги */
.tw-count{font-size:1rem;flex:1 1 0;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.tw-count b{font-size:1.3rem}
.tw-sub{opacity:.8;font-size:.85rem;margin-left:4px}
/* Розмір пачки: колишнє число «показано 12» стало вибором. Виглядає як частина
   підпису (а не як кнопка) — прозорий фон, білий текст; підкреслення пунктиром
   натякає, що на це можна натиснути. Обгортка .tw-subw і підписи .tw-subt
   розділені навмисно: на телефоні ховаються ЛИШЕ підписи, а селект лишається
   (див. медіа-запит ≤620px). */
.tw-subt{opacity:.8}
.tw-batch{
  font:inherit;font-size:.85rem;font-weight:700;margin:0 3px;padding:1px 2px;
  border:0;border-bottom:1px dashed rgba(255,255,255,.6);border-radius:0;
  background:transparent;color:#fff;cursor:pointer;vertical-align:baseline}
.tw-batch:hover{border-bottom-color:#fff}
.tw-batch option{background:#fff;color:var(--text)}
/* Порядок пачки: «спершу події» (знахідки правил → подешевшалі → решта) чи «за часом».
   Поруч — скільки таких лотів у ВСЬОМУ потоці, а не лише на екрані: одразу видно,
   скільки ще цікавого попереду. Стиль той самий, що в перемикача вікон (.tw-win). */
.tw-ord{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle;align-items:center}
.tw-ordb{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff}
.tw-ordb:hover{background:rgba(255,255,255,.3)}
.tw-ordb.on{background:#fff;color:var(--violet-d)}
.tw-ordn{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.22);color:#fff}
/* min-width:max-content — кнопки ніколи не стискаються, навіть коли рівна
   «половина» смуги вужча за них (тоді центр форми зсунеться, це прийнятно). */
.tw-act{display:flex;gap:8px;align-items:center;flex:1 1 0;justify-content:flex-end;
  min-width:max-content}
.tw-act form{display:inline}
.btn-light{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.28);border-color:#fff}
/* Автооновлення: вибір інтервалу + зворотний відлік у робочій смузі */
.tw-auto{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tw-auto select{
  font:inherit;font-size:.82rem;font-weight:600;padding:5px 7px;border-radius:8px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}
.tw-auto select:hover{background:rgba(255,255,255,.28);border-color:#fff}
.tw-auto select option{background:#fff;color:var(--text)}
.ar-cd{
  font:inherit;font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:52px;padding:5px 8px;border-radius:8px;cursor:pointer;
  background:#fff;border:1px solid #fff;color:var(--violet-d)}
.ar-cd.ar-hold{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.ar-cd.ar-soon{background:#fde047;border-color:#fde047;color:#713f12}
/* Режим звуку — ОДИН компактний селект (off / лише правила / будь-який новий лот).
   Окремого дзвіночка поруч нема: обраний режим і так написаний у самому селекті,
   а іконка дублювала його й займала місце у вузькій смузі.
   Селект перебрав обидві ролі дзвіночка: він же індикатор («блимає» .ding у момент
   сигналу — видно, звідки звук) і перевірка гучності (перевибір режиму програє тон).
   Увімкнений звук — ЗЕЛЕНИЙ (а не напівпрозорий білий, як решта селектів смуги):
   стан «дзвонить» має читатись із протилежного кінця кімнати.
   Специфічність: `.tw-auto select` = 0,1,1, тому перекриваємо через
   `.tw-auto select.ar-snd-sel` (0,2,1) — самого `.ar-snd-sel` (0,1,0) не вистачить. */
.tw-auto select.ar-snd-sel{max-width:150px;
  background:var(--green-l);border-color:var(--green-l);color:#fff}
.tw-auto select.ar-snd-sel:hover{background:var(--green);border-color:var(--green)}
/* Вимкнено — назад у нейтральний напівпрозорий вигляд решти смуги */
.tw-auto select.ar-snd-sel.off{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3);color:#fff}
.tw-auto select.ar-snd-sel.off:hover{background:rgba(255,255,255,.28);border-color:#fff}
/* На телефоні смуга й так тісна: лишаємо емодзі + початок підпису (нативний select
   сам обріже), режим усе одно видно по іконці 🔕 / 🔔 / 🔊 */
@media(max-width:900px){.tw-auto select.ar-snd-sel{max-width:104px}}
/* Коротке підморгування в момент дзвінка — видно, звідки звук (і коли він беззвучний) */
.ar-snd-sel.ding{animation:snd-ding .5s ease-in-out 2}
@keyframes snd-ding{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* «✓ Опрацьовано — далі N →» — головна дія потоку, тому ЗЕЛЕНА (біла на білому ряду
   світлих кнопок губилась, і на телефоні палець ішов не туди). */
.btn-go{background:var(--green-l);border-color:var(--green-l);color:#fff;font-weight:800}
.btn-go:hover{background:var(--green);border-color:var(--green)}

/* ── Закладки завдань (другий ряд) ── */
.tasktabs{display:flex;background:var(--panel);border-bottom:1px solid var(--line)}
/* Кнопка згортання ряду меню (nav_tog_html) — на десктопі її нема взагалі,
   вмикається лише у вузькому блоці ≤620px нижче. */
.nav-tog{display:none}
/* flex+center: вміст закладки (назва + лічильник + «N хв тому») стоїть по центру
   і ПО ВЕРТИКАЛІ теж — рядок закладок більше не «пливе», коли одна з них вища.
   Обрізання довгої назви живе на .ttab-t (у flex ellipsis працює лише на елементі
   з min-width:0, а не на голому текстовому вузлі). */
.ttab{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:5px;
  text-align:center;padding:9px 8px;font-size:.86rem;font-weight:600;
  color:var(--muted);border-right:1px solid var(--line);
  overflow:hidden;white-space:nowrap;
}
.ttab-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Значок перед назвою підсторінки — інлайн-SVG з t2_icon() (functions.php).
   Колір = колір самої закладки (`currentColor`): приглушений сірий на звичайній,
   БІЛИЙ на активній. Емодзі тут були раніше — вони кольорові й різні в кожній ОС.
   flex:0 0 auto — значок не стискається й не бере участі в ellipsis (обрізається
   САМА назва). */
.ttab-i{flex:0 0 auto;display:inline-flex;align-items:center;line-height:1;
  color:#94a3b8;opacity:.9}
.ttab-i svg{width:15px;height:15px;display:block}
.ttab:hover .ttab-i{color:var(--muted);opacity:1}
.ttab.active .ttab-i{color:#fff;opacity:1}
.ttab:last-child{border-right:0}
.ttab:hover{background:#f8fafc;color:var(--text)}
.ttab.active{background:var(--green);color:#fff}
/* Коли востаннє синхронізувалось це завдання — дрібним, у колір закладки */
.ttab-ago{font-size:.75em;font-weight:600;opacity:.55;white-space:nowrap;flex:0 0 auto;margin-left:2px}
.ttab.active .ttab-ago{opacity:.85}
/* Скільки лотів цієї закладки залишилось опрацювати — між назвою і «N хв тому» */
.ttab-n{font-size:.82em;font-weight:800;color:var(--green);white-space:nowrap;flex:0 0 auto}
.ttab-n.zero{color:inherit;opacity:.35;font-weight:600}
.ttab.active .ttab-n{color:#fff}
/* ── Таблетки на закладці замість одного числа ──
   «(19)» відповідає лише «скільки всього», а там, де в розділі два різні стани
   (журнал замовлень: чекає на гроші / вже виконується), закладка мусить казати
   обидва. Кольори НЕ свої: це той самий словник, що в тегах стадій розділу
   (`.sl-st`), тож число читається без підпису — і на активній (зеленій)
   закладці теж, бо заливка таблетки власна, а не успадкована. */
.ttab-ps{display:inline-flex;gap:4px;flex:0 0 auto;align-items:center}
.ttab-p{font-size:.76em;font-weight:800;font-variant-numeric:tabular-nums;
  border-radius:999px;padding:1px 7px;line-height:1.45;white-space:nowrap;
  background:var(--bg);color:var(--muted)}
/* «Нове замовлення» — ГУСТИЙ помаранчевий, як тег стадії й таблетка на головній
   (`.sl-st.sl-new`, `.sl-wpill-new`). Без цього рядка таблетка падала в дефолт
   `.ttab-p` — сірий на сірому, тобто єдина стадія, якою ще НІХТО не займався,
   читалась на закладці найтихіше з усіх. */
.ttab-p.sl-new{background:#ea580c;color:#fff}
.ttab-p.sl-wait{background:#fef3c7;color:#92400e}
.ttab-p.sl-run{background:#dcfce7;color:var(--green-d)}
.ttab-p.sl-off{background:#fee2e2;color:var(--danger)}
.ttab-p.sl-done{background:var(--green-d);color:#fff}
/* На активній закладці темно-зелена таблетка злилась би з тлом — обводимо. */
.ttab.active .ttab-p.sl-done{box-shadow:inset 0 0 0 1px #fff}
/* Ряд розділів панелі — трохи темніший, ряд підсторінок — світліший */
.tt-main{background:#f1f5f9}
.tt-main .ttab{font-weight:700}
.tt-exit{flex:0 0 auto;padding-left:18px;padding-right:18px;color:var(--danger)}
.tt-exit:hover{background:#fef2f2;color:var(--danger)}
/* Скільки лишилось до АВТОВИХОДУ (кінця сесії). Малює JS у nav_main_html():
   «7:59» (год:хв), під годину — «59:30» (хв:сек); менше 5 хв — червона таблетка. */
.tt-left{flex:0 0 auto;font-size:.75em;font-weight:800;font-variant-numeric:tabular-nums;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger);
  border-radius:999px;padding:2px 8px;line-height:1.35;white-space:nowrap}
.tt-left.tt-left-warn{background:var(--danger);border-color:var(--danger);color:#fff;
  animation:ttblink 1s steps(1,end) infinite}
/* Довгий вхід («Запам'ятати на 365 днів») — сірий спокійний вигляд: «364 дн»
   червоним читалось би як тривога. */
.tt-left.tt-left-far{background:#f1f5f9;border-color:var(--line);color:var(--muted)}
@keyframes ttblink{50%{opacity:.45}}
.tt-sub{background:#f8fafc}
.tt-sub .ttab{font-size:.82rem}
/* Перемикач самих запитів (завдань) — фіолетовий, як робоча смуга над ним */
.tt-task .ttab.active{background:linear-gradient(90deg,var(--violet-d),var(--violet-l));color:#fff}
.tt-task .ttab:hover:not(.active){background:#f5f3ff;color:var(--violet-d)}

/* ── Таблетки типу лота (Auction | BuyNow) під рядом закладок завдань ──
   Окремий ряд, а не вкладені посилання всередині .ttab: закладка — це <a>, і <a> в
   <a> вкладати не можна. Ряд зʼявляється ЛИШЕ коли у вибірці є аукціони. */
.typetabs{display:flex;gap:6px;align-items:center;padding:6px 10px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.tpill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);
  font-size:.75rem;font-weight:700;white-space:nowrap}
.tpill:hover{border-color:var(--violet-l);color:var(--violet-d)}
.tpill-n{font-weight:600;opacity:.75}
.tpill.on{background:var(--violet-d);border-color:transparent;color:#fff}
.tpill.on .tpill-n{opacity:.9}
/* Аукціонна таблетка «носить» той самий сигнал, що й ціна на картці, — нейтральний
   темний, щоб не читалась як знижка/безкоштовна доставка. */
.tpill.tp-auc.on{background:var(--text)}
.tpill.tp-bin.on{background:var(--green-d)}
/* «По знижці» — бурштиновий, у пару до мітки виду `.tag-wait` у таблиці правил. */
.tpill.tp-drop.on{background:#b45309}

/* ── Сітка лотів: 6 в ряд, full-bleed на всю ширину екрана ── */
.lots-wrap{width:auto;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  padding:12px 16px}
/* 12 лотів на екран (EBAY_BATCH) в один екран без прокрутки: 6 колонок × 2 ряди.
   Сторінка «Наявні пропозиції» ЗАВЖДИ йде як body.work (свої компактні меню
   замість шапки панелі), тож сітка спільна для обох режимів — з меню й без. */
.lots{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

/* Робочий режим: смуга + закладки + сітка рівно на один екран, без прокрутки */
body.work .content{max-width:none;margin:0;padding:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;overflow:hidden}
body.work .lots-wrap{flex:1 1 auto;min-height:0;width:100%;margin:0;padding:10px 12px}
/* 2 ряди на екран. Саме ця сітка дає НАЙБІЛЬШЕ фото при 12 лотах: висота ряду
   росте в 1.5×, і фото впирається вже в ширину картки, а не в низький ряд
   (4×3 висоту ряду не збільшує взагалі, тому фото було б таким самим дрібним). */
body.work .lots{height:100%;grid-template-rows:repeat(2,1fr)}
body.work .lot{min-height:0}
body.work .lot-img{flex:1 1 auto;aspect-ratio:auto;min-height:0}
body.work .lot-img img{object-fit:contain}
/* position:relative — точка відліку для кнопки «+» (блокнот): вона мусить лежати
   ПОЗА <a class="lot-img"> (кнопка всередині посилання — невалідна розмітка), тому
   позиціонується по картці. overflow:hidden лишається — кнопка всередині країв. */
.lot{
  position:relative;
  display:flex;flex-direction:column;background:var(--panel);
  border:2px solid #525865;border-radius:12px;overflow:hidden;
  transition:box-shadow .12s,transform .12s;
}
/* Рамка за брендом у назві лота (клас проставляє ebay_brand());
   кутовий стікер «коли додано» фарбується в той самий колір. */
.br-dewalt{border-color:var(--b-dewalt)}      /* DeWalt — жовта */
.br-makita{border-color:var(--b-makita)}      /* Makita — бірюзова */
.br-bosch{border-color:var(--b-bosch)}        /* Bosch — синя */
.br-ridgid{border-color:var(--b-ridgid)}      /* Ridgid — оранжева */
.br-milwauke{border-color:var(--b-milwauke)}  /* Milwaukee — червона */
.br-kobalt{border-color:var(--b-kobalt)}      /* Kobalt — яскрава лазур (не плутати з Bosch) */
.br-dewalt .lot-added{background:var(--b-dewalt);color:#422006}
.br-makita .lot-added{background:var(--b-makita)}
.br-bosch .lot-added{background:var(--b-bosch)}
.br-ridgid .lot-added{background:var(--b-ridgid)}
.br-milwauke .lot-added{background:var(--b-milwauke)}
.br-kobalt .lot-added{background:var(--b-kobalt)}
/* На наведенні колір рамки НЕ чіпаємо — інакше губиться підказка про бренд */
.lot:hover{box-shadow:0 6px 18px rgba(15,23,42,.16)}
.lot-hidden{opacity:.5}
/* Фото «острівцем»: відступ від рамки з трьох боків (щоб рамка бренду читалась
   як рамка, а не як обвід фото). Свій радіус + overflow — інакше квадратне фото
   зрізало б заокруглення й стікер вилазив би за кут. */
.lot-img{position:relative;display:block;aspect-ratio:1/1;background:#f8fafc;cursor:zoom-in;
  margin:6px 6px 0;border-radius:8px;overflow:hidden}
.lot-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Рівно 2 рядки + верхній відступ. flex:0 0 auto обовʼязково: інакше в робочому режимі
   (де висота картки обмежена) флекс стискає заголовок і другий рядок обрізається. */
.lot-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding:11px 12px 0;font-size:.86rem;line-height:1.35;font-weight:600;
  flex:0 0 auto;height:calc(2.7em + 11px)}
.lot-title:hover{color:var(--green-d);text-decoration:underline}

/* Інфо-рядок: ціна · Best Offer · стан · вік лістингу (все в один ряд) */
.lot-info{display:flex;align-items:center;gap:9px;padding:9px 12px 10px;
  flex-wrap:nowrap;overflow:hidden;flex:0 0 auto}
.lot-price{color:var(--danger);font-weight:800;font-size:1.45rem;line-height:1.05}
.lot-price:hover{color:#991b1b;text-decoration:underline}
/* Колір ціни = доставка: зелена — безкоштовна, червона (дефолт) — платна/розрахункова */
.lot-price.lp-free{color:var(--green-d)}
.lot-price.lp-free:hover{color:#14532d}
/* Аукціон: ціна це СТАВКА, а не «купити зараз», тому колірний код доставки тут не
   діє — чорним, з підписом «Start at». Інакше зелена/червона ціна читалась би як
   готова сума покупки. */
.lot-price.lp-auc{color:var(--text)}
.lot-price.lp-auc:hover{color:#000}
.lp-start{font-size:.62em;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;vertical-align:middle}
/* Позначки «+дост.» біля ціни більше нема (17.08.2026): число вже підсумкове, а з чого
   воно складається — каже підказка на самій цифрі (`title` = ebay_price_view()['hint']). */
.lot-bo{background:#e8f5ec;color:var(--green-d);font-size:.68rem;font-weight:800;
  padding:3px 8px;border-radius:6px;white-space:nowrap}
.li-age{color:var(--muted);font-size:.72rem;white-space:nowrap;margin-left:auto;flex:0 0 auto}
/* Внутрішня «закладка» в куті фото: як давно лот потрапив у нашу базу.
   Верхній лівий радіус = радіус самого фото (.lot-img), інакше округлий клип
   батька лишає світлий піксель між краєм фото і стікером. */
.lot-added{position:absolute;top:0;left:0;z-index:2;
  background:#525865;color:#fff;font-size:.68rem;font-weight:700;
  padding:3px 8px;border-radius:8px 0 9px 0;white-space:nowrap}
/* Дзеркальна закладка в правому куті: лот повернувся в потік, бо продавець збив ціну.
   Колір НЕ залежить від бренду (на відміну від .lot-added) — це подія, а не належність. */
.lot-drop{position:absolute;top:0;right:0;z-index:2;
  background:var(--danger);color:#fff;font-size:.72rem;font-weight:800;
  padding:3px 8px;border-radius:0 8px 0 9px;white-space:nowrap}
/* ── Лот підпав під правило сповіщення: «шейкер» + бейдж ──
   РАМКУ НЕ ЧІПАЄМО взагалі: її колір — це бренд, і він мусить лишитись читабельним
   (кільце box-shadow тут стояло і було прибрано на прохання — ознакою слугують рух і бейдж).
   Рух — БЕЗПЕРЕРВНИЙ (пауз між серіями нема: смикання «раз на кілька секунд» губилось,
   коли око саме дивилось в інший бік). Цикл 0.7 с, рух на КОЖНОМУ кроці кадрів.
   На наведенні пауза — щоб роздивитись/натиснути по нерухомій картці. */
.lot-hit{animation:lot-shake .7s linear infinite;will-change:transform}
.lot-hit:hover{animation-play-state:paused}
/* Погашений лот (опрацьовано або продавець у чорному списку) НЕ смикається, навіть
   якщо підпадає під правило: подія відпрацьована. Те саме правило вимикає й звук
   (див. HIT_SEL у скрипті потоку) — рух і сигнал мусять гаснути разом. */
.lot-hit.lot-hidden{animation:none}
@keyframes lot-shake{
  0%  {transform:translate3d(-3px,0,0) rotate(-.7deg)}
  12% {transform:translate3d(2px,-1px,0) rotate(.5deg)}
  25% {transform:translate3d(3px,0,0)  rotate(.7deg)}
  37% {transform:translate3d(-2px,1px,0) rotate(-.5deg)}
  50% {transform:translate3d(-3px,0,0) rotate(-.6deg)}
  62% {transform:translate3d(2px,1px,0)  rotate(.55deg)}
  75% {transform:translate3d(3px,0,0)  rotate(.6deg)}
  87% {transform:translate3d(-2px,-1px,0) rotate(-.55deg)}
  100%{transform:translate3d(-3px,0,0) rotate(-.7deg)}
}
/* Кому рух заважає (системне налаштування) — лишається кільце й бейдж, без смикання */
@media (prefers-reduced-motion:reduce){.lot-hit{animation:none}}
/* Бейдж правила — низ фото (верхні кути зайняті «коли додано», «↓ %» і кнопкою «+») */
.lot-hb{position:absolute;left:0;bottom:0;z-index:3;max-width:100%;
  display:flex;align-items:center;gap:5px;
  background:var(--violet,#7c3aed);color:#fff;font-size:.68rem;font-weight:700;
  padding:3px 8px;border-radius:0 9px 0 8px}
.lot-hb svg{width:13px;height:13px;flex:none}
.lot-hb .hb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lot-hb .hb-n{flex:none;opacity:.8}

/* Той самий бейдж у ЛАЙТБОКСІ (велике фото). На картці він накладка в кутку фото,
   тут — окремий рядок над фото: на весь екран накладка ховала б частину товару.
   Колір і дзвіночок ті самі, щоб зв'язок «підсвічена картка → чому» читався одразу. */
.lb-hb{display:flex;align-items:center;gap:7px;max-width:min(92vw,1000px);
  background:var(--violet,#7c3aed);color:#fff;font-size:.82rem;font-weight:700;
  padding:6px 14px;border-radius:999px}
.lb-hb[hidden]{display:none}
.lb-hb svg{width:15px;height:15px;flex:none}
.lb-hb .lb-hb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Кнопка «+» у куті картки: відкласти пропозицію в блокнот ──
   Правий верхній кут ФОТО (фото має margin 6px, звідси 12px від краю картки).
   `.under` — коли там уже висить бейдж зниження ціни (.lot-drop): кнопка стає ПІД ним.
   `.on` — лот уже в блокноті: зелена з галочкою (повторний клік прибирає). */
.lot-pin{position:absolute;top:12px;right:12px;z-index:4;
  width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(15,23,42,.14);border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--muted);
  box-shadow:0 1px 4px rgba(15,23,42,.18);transition:background .12s,color .12s,transform .12s}
.lot-pin.under{top:40px}
.lot-pin svg{width:16px;height:16px;display:block}
.lot-pin:hover{background:#fff;color:var(--green-d);border-color:var(--green-l);transform:scale(1.08)}
.lot-pin[disabled]{opacity:.5;cursor:progress}
.lot-pin .pin-b{display:none}
.lot-pin.on{background:var(--green);border-color:var(--green);color:#fff}
.lot-pin.on:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.lot-pin.on .pin-a{display:none}
.lot-pin.on .pin-b{display:flex}

/* ── Сторінка «Блокнот» ── */
/* ПАНЕЛЬ блокнота — один блок замість трьох смуг поспіль (кнопка «+», рядок «Відкладено:
   N» і смуга «Оновити блокнот» з приміткою про квоту). Вони кажуть про один і той самий
   список, тож і виглядати мусять як одна річ: дії ліворуч, лічильники поруч, «Оновити»
   притиснуте праворуч (margin-left:auto нижче). Другим рядком у ту саму панель
   розгортається форма ручного додавання, третім — прогрес забору. */
.nt-bar{margin:18px 0 6px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#fff,#f8fafc)}
.nt-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Лічильники — цифри великі й темні, слова дрібні й сірі: у рядку читають саме числа. */
.nt-cnt{margin-right:auto;font-size:.84rem;color:var(--muted);white-space:nowrap}
.nt-cnt b{color:var(--text);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}
.nt-cnt-s{white-space:nowrap}
/* Відповідь на дію блокнота стоїть під панеллю, а не вгорі сторінки
   (див. $flashHere в ebay/index.php). Відступ зверху — щоб вона читалась як відповідь
   САМЕ цього блока, а не як початок списку лотів під ним. */
.nt-flash{margin-top:10px}
/* Форма ручного додавання: розгортається кнопкою, стоїть другим рядком панелі.
   flex-wrap, бо на телефоні підказка мусить переїхати під поле, а не стиснути його. */
.nt-add-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfdff}
.nt-add-f[hidden]{display:none}
.nt-add-f input[type=text]{flex:1 1 320px;min-width:0;padding:7px 10px;
  border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.86rem;color:var(--text)}
.nt-add-f .sm{flex:1 1 100%}
/* Скільки записів уже зникло з eBay — червоним у рядку лічильників (число, а не текст:
   воно каже, чи є сенс тиснути «Очистити» в нижній частині).
   Селектор із `.nt-cnt`, бо там усі числа перекрашені в темний (`.nt-cnt b`) — без цього
   червоне число програвало б за специфічністю й губилось серед решти. */
.nt-gone-n,.nt-cnt .nt-gone-n{color:var(--danger)}
/* ── Заголовок частини блокнота (наявні / уже нема) ──
   Це не декоративна лінія, а межа двох різних правил: верхню частину перевіряють і
   купують, нижня — історія, яку більше не перевіряють. Тому в кожної свій колір, своє
   пояснення і СВОЯ кнопка «Очистити»: чистять їх за різними приводами. */
.nt-sep{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:26px 0 10px;padding:10px 14px;border-radius:11px;border:1px solid var(--line)}
.nt-sep-t{font-weight:800;font-size:.95rem;white-space:nowrap}
.nt-sep-t b{font-variant-numeric:tabular-nums}
.nt-sep-s{flex:1 1 260px;font-size:.82rem;line-height:1.45;color:var(--muted)}
.nt-sep form{flex:0 0 auto}
.nt-sep-live{background:#f0fdf4;border-color:#bbf7d0}
.nt-sep-live .nt-sep-t{color:var(--green-d)}
.nt-sep-live .nt-sep-s{color:#166534}
.nt-sep-gone{background:#fef2f2;border-color:#fecaca}
.nt-sep-gone .nt-sep-t{color:var(--danger)}
.nt-sep-gone .nt-sep-s{color:#9f1239}
@media(max-width:900px){
  /* На телефоні кнопка «Очистити» стає на всю ширину під поясненням — інакше вона
     тиснеться в кут і в неї важко влучити пальцем. */
  .nt-sep{gap:8px}
  .nt-sep-s{flex:1 1 100%}
  .nt-sep form{flex:1 1 100%}
  .nt-sep form .btn{width:100%}
}
/* ── Картка лота, якого на eBay уже нема ──
   Заголовок частини лишається позаду через два екрани прокрутки, тому мітка мусить бути
   на САМІЙ картці. Фото знебарвлюється (це видно боковим зором, ще до читання), а поверх
   нього лягає смуга «продано» / «уже нема» на всю ширину — у кутку вона губилась би серед
   «скільки тому додано» і «↓ N%». Рамку не чіпаємо: її колір — бренд. */
.lot-sold .lot-img img{filter:grayscale(.7) contrast(.95);opacity:.62}
.lot-sold-tag{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(220,38,38,.9);color:#fff;text-align:center;
  font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px}
/* Ціна проданого лота — приглушена й закреслена: купити за неї вже не можна, і читати її
   як пропозицію не варто (число лишається — воно потрібне як історія ринку). */
.lot-sold .lot-price{opacity:.75;text-decoration:line-through}
.lot-note{transition:opacity .16s}
.nt-note{padding:0 10px 8px}
.nt-note input{width:100%;padding:5px 8px;border:1px dashed var(--line);border-radius:7px;
  font-family:inherit;font-size:.76rem;color:var(--text);background:#fbfdff}
.nt-note input:focus{outline:none;border-style:solid;border-color:var(--green-l);
  box-shadow:0 0 0 3px rgba(34,197,94,.12)}

/* Стара ціна поруч із новою — закреслена, дрібніша, приглушена */
.lot-was{color:var(--muted);font-size:.85rem;font-weight:700;flex:0 0 auto}
/* «Як давно» першим рядком у колонці «Останній прогін» (сторінка «Запустити») */
.run-ago{font-weight:800;color:var(--violet-d);font-size:.92rem;line-height:1.3}
/* Колонка «Наступний прогін»: живий відлік першим рядком (цокає в JS).
   ЗАВЖДИ зелений, у всіх станах. Кольорові пороги («менше хвилини» жовтим, «слот
   минув» червоним із написом «ось-ось») прибрано: тривожний колір ставився там, де
   нічого не сталось — до прогону лишалось кілька секунд. За справність cron і так
   відповідає окрема смуга стану диспетчера вгорі сторінки. */
.nx-in{font-weight:800;color:var(--green-d);font-size:.92rem;line-height:1.3}
/* Лічильник подешевілих у таблиці історії прогонів */
.rp-n{color:var(--danger)}
/* «Результатів» — скільки лотів запит мав на eBay усього (оцінка, тому зі знаком ~) */
.th-n{color:var(--violet-d);white-space:nowrap}
/* Таблетка стану товару: будь-який «New…» — зелена, решта — жовта */
.cd{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;line-height:1.35}
.cd-g{background:#f0fdf4;color:var(--green-d);border-color:#bbf7d0}
.cd-y{background:#fefce8;color:#a16207;border-color:#fde68a}
/* Фіолетова — «додано вручну» (лот, якого в потоці нема, занесений за номером) */
.cd-v{background:#f5f3ff;color:var(--violet-d);border-color:#ddd6fe}
.lot-foot{display:flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:8px 10px 9px 12px;border-top:1px solid var(--line);margin-top:auto}
/* Імʼя продавця — повністю, але з розчиненням у кінці, щоб верстка не поплила.
   Простір «розтягує» обгортка .lot-sw, а клікабельний лише сам текст імені
   (інакше промах по порожньому місцю відкривав би eBay).
   Розмір і міжрядок задані НА ОБГОРТЦІ, а не лише на самому ніку: інакше .lot-sw
   лишається зі «стрибком» батьківського шрифту (1rem), її рядок вищий за дрібний текст
   усередині, і нік, сидячи на базовій лінії цього високого рядка, стоїть нижче центру
   таблетки з рейтингом поруч. Однаковий line-height з .fb вирівнює їх точно. */
.lot-sw{flex:1 1 auto;min-width:0;overflow:hidden;font-size:.84rem;line-height:1.35;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 78%,transparent 100%)}
.lot-seller{display:inline;color:var(--muted);font-size:.84rem;line-height:1.35;white-space:nowrap}
.lot-seller:hover{color:var(--green-d);text-decoration:underline}
/* Таблетка рейтингу продавця: <21 червона, 21–151 жовта, >151 зелена.
   Понад 9999 картка друкує «9999» — точне п'яти-шестизначне число тут нічого не
   вирішує, а таблетку розпирало б і з'їдало місце під нік. Повне — в підказці. */
.fb{flex:0 0 auto;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px;
  border:1px solid transparent;line-height:1.35}
.fb-r{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.fb-y{background:#fefce8;color:#a16207;border-color:#fde68a}
.fb-g{background:#f0fdf4;color:var(--green-d);border-color:#bbf7d0}
/* Значок активності продавця «N/24h»: N лотів за вікно (24h → 48h → 7д → усі).
   Гаряче вікно (доба) — помаранчеве; ширші вікна — приглушено-сірі, бо це вже
   не «щойно навалив», а просто кілька лотів того самого продавця в потоці. */
.lot-24{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:6px;
  font-size:.68rem;font-weight:700;padding:3px 7px;white-space:nowrap;flex:0 0 auto}
.lot-24:hover{background:#ffedd5;border-color:#fb923c}
.lot-24-old{background:var(--bg);color:var(--muted);border-color:var(--line)}
.lot-24-old:hover{background:#f1f5f9;border-color:#cbd5e1}
/* Перемикач вікна на сторінці продавця (у зеленій робочій смузі) */
.tw-wins{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.tw-win{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;white-space:nowrap}
.tw-win:hover{background:rgba(255,255,255,.3)}
.tw-win.on{background:#fff;color:var(--green-d)}
.tw-win.zero{opacity:.45}
/* Кнопка «Заблокувати» — у рядку з продавцем */
.lot-ban{flex:0 0 auto;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--muted);font-family:inherit;font-size:.68rem;font-weight:700;
  padding:3px 7px;cursor:pointer;white-space:nowrap}
.lot-ban:hover{background:#fef2f2;border-color:#fecaca;color:var(--danger)}

/* ── Модальне вікно (блокування продавця) ──
   Вікно ВИЩЕ за екран — звичайна ситуація на телефоні (вікно продавця: прев'ю лота +
   нік + лічильники + чотири дії). Тому:
   • сама коробка обмежена висотою екрана й прокручується ВСЕРЕДИНІ (`overflow-y`) —
     інакше низ із кнопками просто зрізало краєм екрана, і «Заблокувати» не було видно;
   • одиниця `dvh`, а не `vh`: на мобільних браузерах `vh` рахується від екрана БЕЗ
     адресного рядка, тобто дає висоту більшу за реально видиму;
   • `safe center` — центрування, яке при переповненні поводиться як `flex-start`
     (звичайний `center` виштовхує верх контенту за межу, і догорнути туди неможливо);
   • `overscroll-behavior` не пускає прокрутку далі на сторінку під вікном. */
.modal{position:fixed;inset:0;z-index:110;background:rgba(15,23,42,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;
  align-items:safe center;overflow-y:auto;overscroll-behavior:contain}
.modal[hidden]{display:none}
/* Ширина — від ВІЛЬНОГО місця (100% контейнера), а не від 94vw: `.modal` вже має свій
   padding, тож на вузькому екрані (складений фолд ~280px) вікно в 94vw вилазило за
   нього на кілька пікселів і тягнуло горизонтальну прокрутку через усю сторінку. */
.modal-box{background:var(--panel);border-radius:16px;padding:22px 24px;
  width:min(420px,100%);box-shadow:0 24px 60px rgba(15,23,42,.3);
  display:flex;flex-direction:column;gap:12px;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-title{font-weight:800;font-size:1.15rem}
/* Шапка вікна: заголовок + хрестик. Хрестик тут обовʼязковий, бо клік по підкладці
   вікна НЕ закриває (виділення тексту мишею часто заносить курсор за межі коробки —
   і форма з набраним текстом зникала). Закривають: ✕, «Скасувати», Esc. */
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-x{border:0;background:none;font-size:1.1rem;line-height:1;padding:2px 4px;
  color:var(--muted);cursor:pointer;font-family:inherit}
.modal-x:hover{color:var(--text)}
.modal-name{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-weight:700;word-break:break-all}
.modal-check{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;cursor:pointer}
.modal-check input{width:18px;height:18px;accent-color:var(--danger);cursor:pointer}
.modal-box input[type=text]{padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font-size:.92rem;font-family:inherit;color:var(--text);background:#fff}
.modal-box input[type=text]:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Причина = таблетки (одиночний вибір). Поле вводу зʼявляється лише для «інше…» —
   так на мобільному клавіатура не лізе поверх вікна при звичайному виборі причини. */
.modal-quick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.82rem;color:var(--muted)}
.modal-quick .mq{border:1px dashed #fca5a5;border-radius:999px;padding:6px 12px;
  color:var(--danger);font-weight:600;cursor:pointer;background:#fff;
  font-family:inherit;font-size:.82rem;line-height:1.2;-webkit-appearance:none}
.modal-quick .mq:hover{background:#fef2f2;border-style:solid}
.modal-quick .mq.is-on{background:var(--danger);border-color:var(--danger);
  border-style:solid;color:#fff}
/* На тач-екрані таблетки — основний (і єдиний) спосіб вводу: більші й на всю ширину рядка */
@media (max-width:620px){
  .modal-quick{gap:9px}
  .modal-quick .mq{padding:9px 14px;font-size:.9rem}
}
/* ── Вікно продавця (клік по ніку на картці лота) ──
   Три дії різного «ваги»: скільки його вже в базі (головне — велике посилання),
   розбивка по вікнах (дрібні таблетки) і два зовнішні переходи рядками нижче. */
/* Прев'ю лота, З ЯКОГО вікно відкрили: фото + назва у два рядки. Вікно одне на всю
   пачку, а звідси ж і блокують — без цієї прив'язки промах по сусідній таблетці
   заблокував би не того продавця, і помітилось би це вже після зникнення лотів. */
.sel-lot{display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.sel-lot[hidden]{display:none}
.sel-lot img{width:52px;height:52px;flex:0 0 auto;object-fit:cover;border-radius:7px;
  background:#fff;border:1px solid var(--line)}
.sel-lot img[hidden]{display:none}
.sel-lot span{font-size:.8rem;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Рейтинг у дужках після ніка — та сама таблетка того ж кольору, що на картці */
.sel-fbw{margin-left:7px;font-weight:400;color:var(--muted);white-space:nowrap}
.sel-fbw .fb{margin:0 2px}
.sel-total{display:block;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-weight:700;font-size:.92rem;color:var(--green-d)}
.sel-total:hover{background:#f0fdf4;border-color:var(--green)}
.sel-wins{display:flex;flex-wrap:wrap;gap:6px}
.sel-w{font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:999px;
  background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;white-space:nowrap}
.sel-w:hover{background:#ffedd5;border-color:#fb923c}
.sel-w.zero{background:var(--bg);color:var(--muted);border-color:var(--line)}
.sel-links{display:flex;flex-direction:column;gap:8px}
.sel-l{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-weight:600;font-size:.88rem;color:var(--text);background:#fff}
.sel-l:hover{border-color:var(--green);background:#f0fdf4}
.sel-l svg{width:16px;height:16px;flex:0 0 auto}
.sel-l-nf{color:#6d28d9;border-color:#ddd6fe;background:#faf5ff}
.sel-l-nf:hover{border-color:#8b5cf6;background:#f3e8ff}
.modal-note{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}
.modal-act{display:flex;justify-content:flex-end;gap:9px;margin-top:2px}
.modal-act .btn[disabled]{opacity:.45;cursor:not-allowed}
/* Вікно продавця: дії — великі кнопки НА ВСЮ ШИРИНУ одна під одною, тим самим
   розміром, що посилання «Лоти на eBay» / «Додати у сповіщення» вище. Ряд, притиснутий
   праворуч, на телефоні вилазив за край, і «Заблокувати продавця» не було видно взагалі. */
#selModal .modal-act{flex-direction:column;align-items:stretch;gap:8px;margin-top:4px}
#selModal .modal-act .btn{width:100%;text-align:center;padding:11px 14px;font-size:.9rem}
#selModal .btn-danger{border-color:#fecaca}
/* Зняття бана — ЗЕЛЕНА кнопка на тому самому місці, де для не-заблокованого стоїть
   червона «Заблокувати». Колір тут несе сенс, а не декор: вікно вже заблокованого
   видно з першого погляду, і забанити його вдруге більше нема чим. */
#selModal .btn-ok{border-color:#86efac;font-weight:700}
#selModal .btn-ok:hover{background:#dcfce7;border-color:var(--green)}
/* Галочка у вікні розблокування — зелена, а не червона (дефолт .modal-check): дія
   не руйнівна, і червоний accent читався б як «зараз щось зникне». */
#unbanModal .modal-check input{accent-color:var(--green)}

/* Попап завдання: та сама .modal, але широка коробка з прокруткою всередині —
   форма довга (умови, глибина, стоп-слова), сторінка під нею не має скролитись */
.tk-box{width:min(1040px,96vw);max-height:90vh;overflow:auto;gap:0;padding:20px 22px}
.tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tk-title{font-size:1.15rem;font-weight:800;margin-bottom:2px}
.tk-x{background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.9rem;line-height:1;padding:6px 9px}
.tk-x:hover{border-color:var(--danger);color:var(--danger)}
.tk-box .grid-form{margin-top:10px}
/* Кнопки збереження прилипають до низу — форма довга, гортати до них не треба */
.tk-act{position:sticky;bottom:-20px;margin-top:14px;padding:12px 0 4px;
  background:var(--panel);border-top:1px solid var(--line)}

/* ── Довідка по синтаксису пошукового запиту (вікно ПОВЕРХ форми завдання) ──
   z-index вищий за .modal (110), бо це вікно над вікном: форма лишається
   відкритою під ним, довідку читають саме по ходу написання запиту. */
.qh-modal{z-index:120}
.qh-box{width:min(920px,96vw);max-height:90vh;overflow:auto;align-items:stretch;
  gap:0;padding:20px 22px;text-align:left}
/* Підпис поля + кнопка довідки в один рядок: кнопка мусить бути ПОРУЧ із полем,
   інакше її не знаходять саме тоді, коли вона потрібна. */
.lbl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qh-btn{background:none;border:1px dashed var(--violet,#7c3aed);color:var(--violet-d);
  border-radius:999px;padding:2px 10px;font-family:inherit;font-size:.74rem;
  font-weight:700;cursor:pointer}
.qh-btn:hover{background:#f5f3ff;border-style:solid}
.qh-lead{margin:12px 0 4px;color:var(--muted);font-size:.86rem;line-height:1.55}
.qh-sec{margin:18px 0 8px;font-weight:800;font-size:.95rem;color:var(--green-d)}
.qh-sec-bad{color:var(--danger)}
.qh-tbl{width:100%;border-collapse:collapse;font-size:.83rem;line-height:1.5}
.qh-tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);font-weight:700;padding:0 10px 6px 0;border-bottom:1px solid var(--line)}
.qh-tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.qh-tbl code{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-size:.82rem;white-space:nowrap}
.qh-n{font-weight:800;white-space:nowrap;color:var(--green-d)}
.qh-row-bad .qh-n{color:var(--danger)}
.qh-use{background:var(--violet,#7c3aed);border:1px solid var(--violet,#7c3aed);color:#fff;
  border-radius:7px;padding:4px 10px;font-family:inherit;font-size:.74rem;
  font-weight:700;cursor:pointer;white-space:nowrap}
.qh-use:hover{background:var(--violet-d);border-color:var(--violet-d)}
.qh-list{margin:0;padding-left:20px;font-size:.84rem;line-height:1.6;color:var(--text)}
.qh-list li{margin-bottom:8px}
/* На телефоні таблиця прикладів прокручується всередині себе, а не розпирає вікно */
@media(max-width:700px){
  .qh-tbl{display:block;overflow-x:auto;white-space:normal}
  .qh-box{padding:16px}
}
body.no-scroll{overflow:hidden}
/* Кнопка «Нове завдання» під заголовком сторінки (знизу — відступ від таблиці) */
.ph-act{margin:12px 0 18px}

/* ── Колонка «Порядок» у таблиці завдань (кнопки ↑/↓) ──
   Номер великий і фіолетовий, бо саме він відповідає на питання «якою за рахунком
   буде закладка в потоці»; самі стрілки — дрібні, поруч, щоб рядок не розпухав. */
.tk-ord{white-space:nowrap}
.tk-pos{display:inline-block;min-width:20px;font-weight:800;color:var(--violet-d);
  font-size:.95rem;vertical-align:middle;margin-right:6px}
.tk-mv{display:inline-flex;gap:3px;vertical-align:middle}
.tk-mv .btn{padding:2px 8px;font-size:.9rem;line-height:1.25}
.tk-mv .btn[disabled]{opacity:.32;cursor:default;pointer-events:none}

/* ── Сповіщення (вкладка «Сповіщення»): правила + черга збігів для додатка ──
   Префікс .nf-, а не .nt-: останній уже зайнятий блокнотом (.nt-tools/.nt-note). */
.nf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 10px}
/* Ряд фільтрів на «Сповіщеннях» — окремий блок, а не приклеєна до сітки смуга (як у
   потоці): під ним одразу таблиця правил, і без відступу вони злипались в одне полотно. */
.typetabs.tt-nf{flex-wrap:wrap;border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:11px;padding:8px 10px;margin:0 0 22px}
/* Живий пошук по ЗНАЧЕННЮ правила (нік продавця / слова в назві) — фільтрує рядки
   таблиці на льоту, без перезавантаження, тому це не форма з submit. */
.nf-find{margin-left:auto;position:relative;display:flex;align-items:center}
.nf-find input{width:250px;padding:4px 28px 4px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:.78rem}
.nf-find input::placeholder{color:var(--muted)}
.nf-find input:focus{outline:none;background:#fff;border-color:var(--violet-l)}
.nf-find-x{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:2px 5px;line-height:1;cursor:pointer;
  color:var(--muted);font-size:.85rem}
.nf-find-x:hover{color:var(--violet-d)}
.nf-find-x[hidden]{display:none}
/* Порожній результат живого пошуку (рядок таблиці, показується лише коли 0 збігів) */
.nf-none[hidden]{display:none}
/* Поки фільтр активний, смужки зебри рахує JS: nth-child не знає про сховані рядки,
   і зебра розсипалась би на випадкові подвійні смуги. Однакова вага з базовим
   правилом .tbl-zebra — виграє це, бо стоїть нижче у файлі. */
.tbl-zebra.nf-filtering tr.nf-r td{background:transparent}
.tbl-zebra.nf-filtering tr.nf-r.nf-alt td{background:#f0f3f9}
.nf-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
/* Картка-перемикач виду правила: підсвічується вибрана (без JS, через :has) */
.grid-form .nf-kind,.nf-kind{display:grid;grid-template-columns:auto 1fr;gap:4px 9px;
  align-items:center;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  background:#fff;cursor:pointer}
.nf-kind:hover{border-color:#ddd6fe;background:#faf9ff}
.nf-kind:has(input:checked){border-color:#c4b5fd;background:#f5f3ff}
.grid-form .nf-kind input[type=radio],.nf-kind input[type=radio]{
  width:17px;height:17px;flex:none;padding:0;border:0;border-radius:50%;
  accent-color:var(--violet-d);cursor:pointer}
.nf-kn{font-weight:700;font-size:.9rem;color:var(--text)}
.nf-kd{grid-column:2;font-size:.78rem;color:var(--muted);line-height:1.45}
.nf-fields[hidden]{display:none}
/* Цінові поля ширші за дефолт .dp-row (82px) — там не вміщався навіть плейсхолдер */
.nf-fields .dp-row input{width:118px}
/* Мініатюра лота в черзі */
.nf-q .nf-th{width:74px}
.nf-q .nf-th img{width:64px;height:48px;object-fit:cover;border-radius:7px;background:var(--bg);display:block}
.nf-api{margin:8px 0 0;padding-left:18px;line-height:1.7}
.nf-api code{word-break:break-all}

/* ── Лайтбокс фото ── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;
  justify-content:safe center;overflow-y:auto;overscroll-behavior:contain}
.lb[hidden]{display:none}
/* Висота фото рахується з відрахуванням смуги кнопок і підпису — інакше при
   довгій назві низ картинки ховався б за краєм екрана. Але сам цей відрахунок —
   ЗДОГАД: смуга кнопок переноситься в 2–3 ряди, з'являється рядок живої перевірки,
   бейдж правила — і фіксовані 235px перестають бути правдою. Тому окрім `calc` фото
   ще й СТИСКАЄТЬСЯ як flex-елемент (`flex:0 1 auto` + `min-height:0`), тобто віддає
   висоту решті рядків, а `object-fit:contain` не дає йому при цьому спотворитись.
   `dvh` замість `vh` — бо на телефоні `vh` не враховує адресний рядок і завищує екран. */
.lb img{max-width:min(92vw,1200px);max-height:calc(100vh - 235px);
  max-height:calc(100dvh - 235px);min-height:0;flex:0 1 auto;object-fit:contain;
  border-radius:10px;background:#fff}
/* Кнопки — зверху по центру */
.lb-bar{display:flex;align-items:center;justify-content:center;gap:12px;
  max-width:min(92vw,1200px);width:100%;color:#f1f5f9}
/* Назва — знизу, по центру, до 2 рядків */
.lb-title{max-width:min(92vw,1000px);width:100%;text-align:center;color:#f1f5f9;
  font-size:.95rem;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* УВАГА: це РІЗНІ переходи, не дублікати. Зелена .lb-open — на САМ ЛОТ;
   сіра .lb-seller (нікнейм) — на ВСІ ТОВАРИ цього продавця; поруч червона
   «Заблокувати» (те саме вікно підтвердження, що й кнопка на картці лота). */
.lb-open{background:var(--green);color:#fff;border-radius:8px;padding:8px 14px;
  font-weight:700;font-size:.85rem;white-space:nowrap}
.lb-open:hover{background:var(--green-d)}
.lb-seller{background:rgba(255,255,255,.14);border:1px solid #475569;color:#f1f5f9;
  border-radius:8px;padding:8px 14px;font-weight:700;font-size:.85rem;
  max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-seller:hover{background:#1e293b;border-color:#94a3b8}
.lb-ban{background:var(--danger);border:1px solid var(--danger);color:#fff;
  border-radius:8px;padding:8px 14px;font:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.lb-ban:hover{background:#991b1b;border-color:#991b1b}
/* Дзеркало .lb-ban для вже заблокованого: та сама суцільна кнопка, тільки зелена.
   Свої правила, а не панельний `.btn-ok` — смуга лайтбокса темна, і світла кнопка
   панелі на ній губиться. */
.lb-unban{background:var(--green);border:1px solid var(--green);color:#fff;
  border-radius:8px;padding:8px 14px;font:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.lb-unban:hover{background:var(--green-d);border-color:var(--green-d)}
.lb-x{background:none;border:1px solid #475569;color:#f1f5f9;border-radius:8px;
  padding:8px 14px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  white-space:nowrap;flex:0 0 auto}
.lb-x:hover{background:#1e293b;border-color:#94a3b8}
/* ── Жива перевірка «чи лот ще актуальний» (рядок під смугою кнопок) ──
   Порожній стан НЕ займає місця (`:empty`-подібна поведінка через .lb-live без модифікатора),
   інакше фото стрибало б на висоту рядка при кожному відкритті. */
.lb-live{display:none;align-items:center;gap:8px;max-width:min(92vw,1200px);
  border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700;
  border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-live.ll-wait,.lb-live.ll-live,.lb-live.ll-warn,.lb-live.ll-gone,.lb-live.ll-err{display:flex}
/* Вердикт + сіра таблетка завдання — одним рядком. Обидва елементи вміють бути
   відсутніми (порожній стан перевірки / лот без завдання), тож рядок сам по собі
   нульової висоти — фото від нього не стрибає. */
.lb-lrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:min(92vw,1200px)}
/* Назва завдання, з якого лот. Свідомо НЕЙТРАЛЬНА (сіра): це не вердикт і не тривога,
   а підпис «звідки він тут» — кольори поруч зайняті станом перевірки. */
.lb-task{background:rgba(255,255,255,.10);border:1px solid #475569;color:#cbd5e1;
  border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700;
  max-width:min(60vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-task[hidden]{display:none}
/* Подробиці (ціна, «було $X», час до кінця) — тим самим кольором, але тихіше за вердикт */
.lb-live .ll-s{font-weight:600;opacity:.82;overflow:hidden;text-overflow:ellipsis}
.ll-wait{background:rgba(255,255,255,.12);border-color:#475569;color:#e2e8f0}
.ll-live{background:rgba(22,163,74,.20);border-color:#16a34a;color:#bbf7d0}
.ll-warn{background:rgba(234,179,8,.20);border-color:#eab308;color:#fef08a}
.ll-err {background:rgba(255,255,255,.10);border-color:#64748b;color:#cbd5e1}
/* «Уже нема на eBay» — НЕ рядок під кнопками, а великий штамп ПОСЕРЕД фото.
   Решта вердиктів лишається тонкою таблеткою вгорі: вони кажуть «дивись далі».
   А «продано» — єдиний, після якого решту картки читати вже нема сенсу, і поки він
   був такою самою смужкою, погляд ішов на фото повз нього.
   `position:absolute` в межах .lb (вона fixed на весь екран) — саме тому штамп НЕ
   зсуває ні кнопки, ні фото; `pointer-events:none` — щоб клік крізь нього нормально
   закривав лайтбокс, а не гасився об напис. */
.lb-live.ll-gone{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-5deg);
  flex-direction:column;gap:4px;text-align:center;
  padding:20px 44px;border-radius:18px;border:3px solid #fecaca;
  background:rgba(153,27,27,.94);color:#fff;
  font-size:2.2rem;line-height:1.1;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 20px 55px rgba(0,0,0,.5);
  max-width:min(86vw,760px);white-space:normal;overflow:visible}
/* Підпис («продано» / «строк розміщення вийшов») — читабельний, але не кричить */
.lb-live.ll-gone .ll-s{font-size:1rem;font-weight:700;opacity:.95;
  text-transform:none;letter-spacing:0;overflow:visible}

/* ── Кількість колонок за шириною екрана ──
   Вужчий екран — менше колонок. На ДЕСКТОПІ пачка з 12 лотів і далі має влазити
   в один екран (більше рядів), на мобільному/планшеті — ні (див. блок нижче).
   Орієнтир для фолдів: складений вузький ≤620 → 2, розгорнутий «книжка» → 3,
   розгорнутий альбом → 4. */
@media(max-width:1400px){
  .lots{grid-template-columns:repeat(4,1fr)}
  body.work .lots{grid-template-rows:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .lots{grid-template-columns:repeat(3,1fr);gap:10px}
  body.work .lots{grid-template-rows:repeat(4,minmax(0,1fr))}
}
@media(max-width:620px){
  .lots{grid-template-columns:repeat(2,1fr);gap:8px}
  body.work .lots{grid-template-rows:repeat(6,minmax(0,1fr))}
}

/* ── Мобільний/сенсорний режим: НЕ тиснемо пачку в один екран ──
   Робочий режим (body.work) на десктопі навмисно вміщує всю пачку у 100vh без
   прокрутки. На телефоні/фолді це давало плаский нечитабельний ряд, тож тут
   висота знімається й сторінка просто прокручується — фото лишається квадратним.
   Умова: будь-який сенсорний екран до 1250px (фолд в альбомі теж), і БУДЬ-ЯКИЙ
   екран ≤900px (щоб вузьке вікно на десктопі поводилось так само). */
@media (max-width:1250px) and (hover:none), (max-width:900px){
  body.work .content{height:auto;overflow:visible}
  body.work .lots{height:auto;grid-template-rows:none}
  body.work .lot{min-height:0}
  body.work .lot-img{flex:0 0 auto;aspect-ratio:1/1}
  body.work .lots-wrap{flex:0 0 auto}
}

/* ── Дубль «✓ Опрацьовано» в КІНЦІ стрічки лотів (тільки мобільний) ──
   Тут стояла плаваюча кнопка «Наверх» — прибрана. Гортати вгору взагалі не треба:
   сабміт іде POST-ом, сторінка перезавантажується з наступною пачкою й відкривається
   з самого верху. Тобто дубль головної дії робить і те, заради чого була «Наверх».

   НЕ `position:fixed`: кнопка стоїть у потоці, рівно після останнього ряду карток —
   плаваюча накривала б нижні лоти, а тут вона просто «кінець пачки».
   Одна й на всю ширину: у кінці стрічки вибору вже нема, є лише «далі».
   На десктопі не показується — там уся пачка вміщується в один екран без прокрутки. */
.botgo{display:none}
@media (max-width:1250px) and (hover:none), (max-width:900px){
  .botgo{display:block;padding:0 12px 18px}   /* 12px = padding сітки лотів */
}
/* Збільшена пачка («показано 24…96») — те саме й на десктопі: стрічка довша за екран,
   тож у її кінці має бути та сама головна дія. */
.botgo.botgo-on{display:block;padding:0 12px 18px}
.botgo .btn{width:100%;padding:14px;border-radius:12px;font-size:1rem}

/* ── Збільшена пачка: робочий режим перестає тиснути сітку в один екран ──
   За замовчуванням body.work вміщує 12 лотів у 100vh (фіксовані ряди + overflow:hidden
   на .content). Для 24–96 лотів це означало б, що зайві ряди просто зникають за краєм,
   тож тут висота знімається й ряди стають авто.
   Знімається саме висота СТОРІНКИ (як у мобільному блоці вище), а не прокрутка
   всередині .lots-wrap: кнопка-дубль «Опрацьовано» лежить ПОЗА сіткою, і при
   внутрішній прокрутці її зрізав би overflow:hidden на .content. */
body.work .content:has(.lots-wrap.big){height:auto;overflow:visible}
body.work .lots-wrap.big{flex:0 0 auto}
body.work .lots-wrap.big .lots{height:auto;grid-template-rows:none}
body.work .lots-wrap.big .lot{min-height:0}
body.work .lots-wrap.big .lot-img{flex:0 0 auto;aspect-ratio:1/1}

/* ── Планшет/фолд: широкі таблиці прокручуються ВСЕРЕДИНІ себе ──
   Інакше таблиця розпирала сторінку і зʼявлялась горизонтальна прокрутка
   всього документа (скарга «на деяких сторінках горизонтальна прокрутка»). */
@media(max-width:1100px){
  .tbl{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .bl-tools{flex-wrap:wrap}
  .bl-q{max-width:none}
}

@media(max-width:700px){
  :root{--pad:12px;--ctop:18px}
  .content{padding:var(--ctop) var(--pad) 40px}
  .lots-wrap{padding:8px}
  .lot-price{font-size:1.25rem}
}

@media(max-width:620px){
  /* «· показано 12 · ще 1 екранів» — другорядне; на телефоні воно з'їдало рядок
     лічильника (лишаємо на розгорнутому фолді, там місце є). Значки подій
     (🔔 N / ↓ N) лишаються — це те, заради чого дивляться в смугу. */
  .tw-sub{display:none}
  /* ВИНЯТОК — блок з вибором розміру пачки: ховаємо самі підписи, а СЕЛЕКТ лишаємо.
     На телефоні він потрібен навіть більше, ніж на десктопі: колонок дві, пачка
     гортається довго, і «показувати по 48» — це рішення, яке ухвалюють саме тут.
     Щоб не висіти голим числом, селект отримує рамку-таблетку, як решта контролів. */
  .tw-sub.tw-subw{display:inline-flex;align-items:center;margin-left:6px;opacity:1}
  .tw-subw .tw-subt{display:none}
  .tw-batch{margin:0;padding:2px 4px;border:1px solid rgba(255,255,255,.35);
    border-radius:7px;background:rgba(255,255,255,.16)}
  /* Рядок лічильника стає flex-ом: місця мало, і стискатись має ТЕКСТ «Залишилось: N»,
     а не селект зі значками подій — інакше ellipsis (він з ≤900px) зрізав би саме їх,
     бо вони стоять у кінці рядка. */
  .tw-count:has(.tw-subw){display:flex;align-items:center;gap:2px}
  .tw-count:has(.tw-subw) .tw-cnt-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tw-count:has(.tw-subw) .tw-subw,.tw-count:has(.tw-subw) .tw-ord{flex:0 0 auto}
  /* Вузька картка: рядки ціни й продавця переносяться, а не обрізаються. */
  .lot-info{flex-wrap:wrap;gap:6px;padding:8px 10px 9px}
  .lot-price{font-size:1.15rem}
  .lot-foot{flex-wrap:wrap;gap:6px}
  .li-age{margin-left:auto}
  .lots{gap:7px}
  /* Лайтбокс: ряд кнопок переноситься, інакше на вузькому екрані вилазив за край */
  .lb{padding:12px;gap:8px}
  .lb-bar{flex-wrap:wrap;gap:8px}
  .lb-seller{max-width:58vw}
  /* Вердикт перевірки на вузькому екрані переноситься, а не обрізається на пів слова */
  .lb-live{white-space:normal;flex-wrap:wrap;gap:4px 8px;max-width:92vw;text-align:center;
    justify-content:center;border-radius:12px;font-size:.8rem}
  /* На вузькому екрані таблетка завдання стає під вердиктом (обидва по центру) */
  .lb-lrow{gap:6px;max-width:92vw}
  .lb-task{max-width:88vw;white-space:normal;border-radius:12px;font-size:.78rem;padding:5px 12px}
  /* Штамп «продано» лишається великим і на телефоні — але в межах екрана */
  .lb-live.ll-gone{font-size:1.5rem;padding:14px 22px;max-width:84vw;flex-wrap:nowrap}
  .lb-live.ll-gone .ll-s{font-size:.85rem}
  .lb img{max-height:calc(100dvh - 290px)}
  /* Вікно (модалка) на телефоні: майже на всю висоту екрана, дрібніші поля навколо —
     кожен зайвий піксель тут іде в прокрутку вмісту, а не в порожню рамку. */
  .modal{padding:10px}
  .modal-box{padding:18px 16px;max-height:calc(100dvh - 20px)}
}

/* ── Вхід ── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#dcfce7,#f1f5f9)}
.login-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:34px 30px;width:min(360px,92vw);box-shadow:0 24px 60px rgba(15,23,42,.12);
  display:flex;flex-direction:column;gap:14px;
}
.login-brand{font-weight:800;font-size:1.5rem;text-align:center}
.login-brand span{color:var(--green)}
.login-sub{text-align:center;color:var(--muted);margin-top:-8px;font-size:.9rem}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted)}
.login-card input{
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:1rem;
  color:var(--text);background:#fff;
}
.login-card input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
/* Галочка «Запам'ятати мене» — рядком (спільне .login-card label — колонка). */
.login-card label.login-rem{flex-direction:row;align-items:center;gap:9px;
  font-size:.86rem;font-weight:600;color:var(--text);cursor:pointer;user-select:none;margin-top:-2px}
.login-card label.login-rem input{width:17px;height:17px;flex:0 0 auto;padding:0;
  accent-color:var(--green);cursor:pointer}
.login-card button{
  margin-top:6px;padding:12px;border:0;border-radius:10px;background:var(--green);
  color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
}
.login-card button:hover{background:var(--green-d)}
.login-err{background:#fef2f2;color:var(--danger);border:1px solid #fecaca;
  border-radius:10px;padding:10px 12px;font-size:.9rem;font-weight:600;text-align:center}
.login-note{text-align:center;color:var(--muted);font-size:.78rem}

/* ── Мобільна навігація ──
   Нижче 900px липкість рядів знімаємо — вони просто стоять один під одним і їдуть зі
   сторінкою. Тут же — щільніші розміри самих закладок (вони діють і всередині
   випадаючого списку нижче). */
@media(max-width:900px){
  .navwrap{position:static;top:auto}
  /* Останній запобіжник від горизонтальної прокрутки сторінки: clip (а НЕ hidden) —
     hidden зробив би body контейнером прокрутки й поламав position:sticky. */
  body{overflow-x:clip}
  .ttab{padding:6px 7px;font-size:.8rem;gap:4px}
  .tt-sub .ttab{font-size:.76rem;padding:5px 7px}
  .ttab-i svg{width:13px;height:13px}
  .ttab-ago{font-size:.68em}
  .tt-exit{padding-left:10px;padding-right:10px}
  .tt-left{padding:1px 6px}
}

/* ── Телефон, складений І РОЗГОРНУТИЙ фолд: УСІ ряди меню — ВИПАДАЮЧІ СПИСКИ ──
   Межа піднята з 620px до 900px: на розгорнутому фолді ряди лишались рядами й разом
   із фіолетовою смугою займали пів екрана, а закладки завдань до того ж не влазили і
   їхали горизонтальною прокруткою — сусіднє завдання доводилось шукати свайпом наосліп.
   Тепер на будь-якому мобільному стані (складений фолд, розгорнутий фолд, телефон)
   у ряду видно ЛИШЕ поточний пункт (кнопка .nav-tog з назвою), решта випадає стовпчиком
   по кліку — клас .open на <nav> ставить nav_drop_js() (functions.php). Правило спільне
   для ВСІХ трьох рівнів: розділи (.tt-main), підсторінки (.tt-sub) і ВИБІР ЗАВДАННЯ
   (.tt-task) — останній малює сама сторінка потоку, але клас у нього той самий.
   Кнопка пофарбована як активна закладка свого рівня, щоб рівні читались окремо
   й у згорнутому вигляді. */
@media(max-width:900px){
  .tasktabs{display:block;overflow:visible}
  /* Розміри тут навмисно «пальцеві», а не компактні: обидва рівні меню на телефоні —
     це випадаючі списки, і по них ходять пальцем, а не курсором. Кнопка й пункти
     тримають ~46px висоти (нижня межа зручного тапу), тому вони більші за десктопні
     закладки, хоча решта мобільних правил щільніша за десктоп. */
  .nav-tog{
    display:flex;align-items:center;gap:9px;width:100%;min-height:46px;
    padding:12px 14px;font:inherit;font-size:.95rem;font-weight:700;line-height:1.25;
    text-align:left;border:0;cursor:pointer;background:var(--bg);color:var(--text);
  }
  .nav-tog-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-tog-c{flex:0 0 auto;display:flex;transition:transform .15s}
  .nav-tog-c svg{width:19px;height:19px;display:block}
  .tasktabs.open .nav-tog-c{transform:rotate(180deg)}
  /* Кнопка = активна закладка свого рівня: розділи зелені, завдання фіолетові. */
  .tt-main .nav-tog{background:var(--green);color:#fff}
  .tt-sub .nav-tog{background:#fff;color:var(--text);border-bottom:1px solid var(--line)}
  .tt-task .nav-tog{background:linear-gradient(90deg,var(--violet-d),var(--violet-l));color:#fff}
  .tt-main .nav-tog .ttab-n,.tt-task .nav-tog .ttab-n{color:#fff}
  /* Таблетки свою заливку носять із собою — на кнопці згортання їх не чіпаємо. */
  /* Самі пункти видно лише в розкритому ряду — стовпчиком, вирівняні по лівому краю. */
  .tasktabs .ttab{display:none}
  .tasktabs.open .ttab{
    display:flex;justify-content:flex-start;text-align:left;align-items:center;gap:10px;
    width:100%;min-width:0;flex:0 0 auto;min-height:46px;padding:12px 14px;
    font-size:.95rem;
    border-right:0;border-top:1px solid var(--line);
  }
  /* Другий рівень (підсторінки) — трохи менший за перший, але так само «пальцевий»:
     різниця в розмірі лишається підказкою, який це рівень. */
  .tt-sub.open .ttab{font-size:.9rem}
  .tasktabs.open .ttab-i svg{width:18px;height:18px}
  .tasktabs.open .ttab-t{flex:1 1 auto}
}

/* ── Сторінка «Запустити»: cron-рядок у таблиці + пагінація історії ── */
.cron-line{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
/* code розтягується на всю ширину колонки → усі рядки однакової довжини,
   кнопки «копіювати» вишикувані в один стовпчик */
.cron-line code{flex:1 1 auto;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:5px 8px;font-size:.78rem;word-break:break-all;line-height:1.35}
.cron-copy{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){.cron-line{flex-wrap:wrap}.cron-line code{flex:1 1 100%}}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 4px}
.pager .btn{min-width:34px;text-align:center}

/* ── Ручний запуск: селектор разової глибини + кнопка в один рядок ──
   Глибина «на зараз» (5 сторінок замість авто-1) не має вимагати правки налаштувань
   завдання, тому вибір стоїть саме біля кнопки, а не у формі завдання. */
.run-form{display:flex;flex-direction:column;gap:5px;min-width:132px}
.run-pages{background:var(--bg);border:1px solid var(--line);border-radius:7px;
  padding:4px 6px;color:var(--text);font-size:.76rem;max-width:150px}

/* ── Розклад завдання: клітинка в таблиці «Запустити» + попап-редактор ──
   Схем дві (інтервал з винятками / точні часи), у клітинку вони вже не влазять —
   тому в рядку лишається лише зведення, а редагування переїхало в #schModal.
   Ті самі колонки sched_* показує й мобільний додаток. */
.sch-cell{min-width:230px}
.sch-mode-tag{display:inline-block;padding:2px 7px;border-radius:6px;font-size:.72rem;
  font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.sch-m0{background:rgba(59,130,246,.12);color:#2563eb}
.sch-m1{background:rgba(168,85,247,.14);color:#7c3aed}
.sch-desc{color:var(--text);line-height:1.35}
/* Виняток — окремим рядком з відступом: у стрічку кілька винятків зливаються в кашу */
.sch-rline{color:var(--muted);line-height:1.35;padding-left:9px;border-left:2px solid var(--line);
  margin-top:2px}
.sch-cell .btn{margin-top:6px}

.sch-box{width:min(760px,96vw);max-height:90vh;overflow:auto;gap:0;padding:20px 22px}
.sch-onoff{display:flex;align-items:center;gap:8px;margin:14px 0 10px;cursor:pointer}
/* Перемикач схеми — дві великі картки, бо це головний вибір у вікні */
.sch-tabs{display:flex;gap:10px;flex-wrap:wrap}
.sch-tabs label{flex:1 1 220px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;background:var(--bg)}
.sch-tabs label:has(input:checked){border-color:var(--green);background:rgba(34,197,94,.07)}
.sch-pane{margin-top:14px}
.sch-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.88rem;margin-bottom:9px}
.sch-sep{color:var(--muted)}
.sch-sub{margin:16px 0 4px;font-weight:700;font-size:.92rem}
.sch-note{line-height:1.45;margin-bottom:8px}
/* Виняток — один рядок «з–по → кожні N хв» */
.sch-rule{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;
  font-size:.85rem;color:var(--muted)}
.sch-del{background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.78rem;line-height:1;padding:4px 6px}
.sch-del:hover{border-color:var(--danger);color:var(--danger)}
/* Дні винятку — свої на кожен рядок (не плутати з .sched-days, що вимикає добу цілком).
   Тому вигляд навмисно інший: дрібніші й тісніші квадратики впритул до інтервалу. */
/* Номер рядка = пріоритет винятку (діє перший підхожий), тому він видимий, а не декор */
.sch-rn{min-width:16px;font-weight:700;color:var(--text)}
.sch-ord{display:inline-flex;gap:2px}
.sch-up,.sch-dn{background:none;border:1px solid var(--line);border-radius:5px;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.75rem;line-height:1;padding:4px 6px}
.sch-up:hover,.sch-dn:hover{border-color:var(--green);color:var(--text)}
.sch-rdays{display:inline-flex;gap:2px;margin-left:4px}
.sch-rday{background:var(--bg);border:1px solid var(--line);border-radius:5px;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.7rem;line-height:1;padding:4px 5px;min-width:24px}
.sch-rday.on{background:var(--green);border-color:transparent;color:#fff}
/* Точні часи: рядок на день тижня, час — «фішка» з власним хрестиком */
.sch-day{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 0;
  border-top:1px solid var(--line)}
.sch-dn{min-width:30px;font-weight:700;font-size:.82rem}
.sch-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1 1 200px}
.sch-chip{display:inline-flex;align-items:center;gap:3px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:2px 3px 2px 5px}
.sch-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;bottom:-20px;margin-top:16px;padding:12px 0 4px;
  background:var(--panel);border-top:1px solid var(--line)}
.sch-est{font-size:.85rem;color:var(--muted)}
.sch-foot .modal-act{margin:0}
@media(max-width:700px){
  .sch-box{padding:16px}
  .sch-day{align-items:flex-start}
}

.sched-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.sched-num{width:58px}
.sched-time{width:104px}
.sched-row input,
.sch-box input[type=time],
.sch-box input[type=number]{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:3px 5px;color:var(--text);font-size:.82rem}
/* Усередині «фішки» часу поле без власної рамки — рамку тримає сама фішка */
.sch-chip input[type=time]{border:none;background:none;padding:2px 0;font-size:.82rem}
/* Дні — квадратики-перемикачі: сама галочка схована, підсвічується підпис. */
.sched-days{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.sched-days label{cursor:pointer}
.sched-days input{position:absolute;opacity:0;pointer-events:none}
.sched-days span{display:inline-block;min-width:26px;text-align:center;padding:3px 4px;
  border:1px solid var(--line);border-radius:6px;font-size:.74rem;color:var(--muted);background:var(--bg)}
.sched-days input:checked+span{background:var(--green);border-color:transparent;color:#fff}
.sched-days .btn{margin-left:6px}

/* ── Фільтр по назві лота в робочій смузі (між лічильником і кнопками) ──
   Форма стоїть РІВНО по центру смуги: боки (.tw-count / .tw-act) — flex:1 1 0,
   тобто ділять залишок порівну, тож середній блок не «пливе» від довжини тексту
   лічильника. Всередині форми поле й таблетки теж центровані. */
.tw-find{flex:0 1 430px;min-width:200px;display:flex;flex-direction:column;
  align-items:center;gap:5px}
.tw-find-in{display:flex;align-items:center;gap:6px;width:100%}
.tw-find-in input{
  flex:1 1 auto;min-width:0;font:inherit;font-size:.88rem;padding:6px 10px;border-radius:8px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.tw-find-in input::placeholder{color:rgba(255,255,255,.65)}
.tw-find-in input:focus{outline:none;background:rgba(255,255,255,.28);border-color:#fff}
.tw-find-go,.tw-find-x{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;font:inherit;font-size:.9rem;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.tw-find-go:hover,.tw-find-x:hover{background:rgba(255,255,255,.3);border-color:#fff}
/* Ряд під полем — рівно ОДИН рівень (nowrap): «усі», дві таблетки пошуку і список
   брендів. Раніше тут стояли ще шість бренд-таблеток, вони переносились другим рядком
   і на кожному екрані піднімали висоту фіолетової смуги; бренди перебрав <select>. */
.tw-chips{display:flex;gap:5px;flex-wrap:nowrap;justify-content:center;
  align-items:center;max-width:100%}
.tw-chip{
  padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.5;
  color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);
  transition:filter .12s,box-shadow .12s}
.tw-chip:hover{background:rgba(255,255,255,.3);filter:brightness(1.1)}
/* Активна таблетка — білий обідок. box-shadow тут не перебивається бренд-правилами
   нижче (вони чіпають лише background/border/color), тож працює для всіх. */
.tw-chip.on{background:#fff;color:var(--violet-d);border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.85)}
/* Таблетки брендів — залиті ТИМ САМИМ кольором, що й рамка картки цього бренду. */
.tw-chip.br-dewalt{background:var(--b-dewalt);border-color:var(--b-dewalt);color:#422006}
.tw-chip.br-makita{background:var(--b-makita);border-color:var(--b-makita);color:#fff}
.tw-chip.br-bosch{background:var(--b-bosch);border-color:var(--b-bosch);color:#fff}
.tw-chip.br-ridgid{background:var(--b-ridgid);border-color:var(--b-ridgid);color:#fff}
.tw-chip.br-milwauke{background:var(--b-milwauke);border-color:var(--b-milwauke);color:#fff}
.tw-chip.br-kobalt{background:var(--b-kobalt);border-color:var(--b-kobalt);color:#fff}
/* «search» — єдина таблетка-КНОПКА (решта — посилання): вона нікуди не веде, а лише
   підставляє в поле префікс «search: ». Тому й вигляд інший — пунктирний обідок:
   видно, що це не ще один фільтр потоку, а вихід за його межі (пошук по всій базі).
   Кнопці доводиться повертати шрифт і курсор — від .tw-chip вони не успадковуються. */
.tw-chip-find{font-family:inherit;cursor:pointer;border-style:dashed;letter-spacing:.02em}
.tw-chip-find::before{content:'🔎 ';font-size:.8em}
.tw-chip-find.on{border-style:solid}

/* Список брендів. Носить і .tw-chip (звідти форма таблетки й бренд-заливки
   .tw-chip.br-*, які стоять НИЖЧЕ за .tw-chip.on — тому колір бренду перебиває
   білу «активну» заливку, лишаючи від неї сам обідок), і .tw-brandsel — те, що
   селект не успадковує від таблетки-посилання: шрифт, курсор, вигляд поля.
   `text-overflow` тут ні до чого — назви брендів короткі, ряд і так не рветься. */
.tw-brandsel{font-family:inherit;cursor:pointer;padding:2px 6px;
  -webkit-appearance:none;appearance:none;flex:0 0 auto}
.tw-brandsel:focus{outline:none;border-color:#fff}
/* Розкритий список — це вже віджет ОС (малює не смуга, а браузер), тож фарбуємо самі
   опції. «бренд: усі» — нейтральна світла пара, бренди — заливка кольором бренду з
   БІЛОЮ назвою: розкритий список читається тим самим кольоровим кодом, що й рамки
   карток та обраний (закритий) селект. */
.tw-brandsel option{color:#111827;background:#fff}
.tw-brandsel option.br-dewalt{background:var(--b-dewalt)}
.tw-brandsel option.br-makita{background:var(--b-makita)}
.tw-brandsel option.br-bosch{background:var(--b-bosch)}
.tw-brandsel option.br-ridgid{background:var(--b-ridgid)}
.tw-brandsel option.br-milwauke{background:var(--b-milwauke)}
.tw-brandsel option.br-kobalt{background:var(--b-kobalt)}
.tw-brandsel option[class^=br-]{color:#fff;font-weight:700}
/* Закритий селект з обраним брендом — теж БІЛА назва. Інакше на dewalt діяло б
   правило таблетки `.tw-chip.br-dewalt{color:#422006}` (темно-коричневий) — воно тієї
   ж специфічності, тому перебиваємо його розташуванням нижче у файлі. */
.tw-brandsel[class*=' br-']{color:#fff}

/* Кнопка-лупа: відкриває форму фільтра попапом. Живе тільки на вузькому екрані —
   на десктопі форма стоїть у смузі й кнопка не потрібна. */
.tw-findtog{display:none}

/* ── Вузький екран (телефон І РОЗГОРНУТИЙ ФОЛД): фіолетова смуга у ДВА чіткі ряди ──
   Раніше цей блок робив лише одне — ховав форму фільтра під лупу, а сама розкладка
   смуги переїжджала в рядки тільки з ≤700px. Через це на РОЗГОРНУТОМУ фолді (≈820–900px)
   смуга лишалась «десктопною»: лічильник, лупа, два селекти, «↩» і «Опрацьовано» тиснулись
   в один ряд, підписи обрізались, а головна кнопка ставала найвужчою серед усіх. Тепер
   рядковий режим починається з тієї самої межі, що й лупа, — 900px:
     ряд 1: ← / ⛶ · «Залишилось: N» (+ 🔔/↓) · лупа фільтра;
     ряд 2: автооновлення + звук + «↩», а «✓ Опрацьовано» — окремим рядком на всю ширину.
   ВАЖЛИВО: саме `flex:… 100%`, а не `width:100%` — у flex-рядку ширину задає flex-basis,
   тож `width:100%` НЕ переносить елемент на власний рядок. */
@media(max-width:900px){
  .topwork{flex-wrap:wrap;position:relative;padding:8px 10px;gap:8px}
  .tw-count{order:0;flex:1 1 auto;min-width:0;font-size:.86rem}
  .tw-count b{font-size:1.1rem}
  /* Обрізаємо ellipsis-ом лише простий лічильник. У картці продавця всередині того
     самого блока лежить ряд таблеток-вікон (.tw-wins) — під nowrap їх просто зрізало б
     за краєм, тож там дозволяємо перенос. */
  .tw-count:not(:has(.tw-wins)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tw-wins{flex-wrap:wrap}
  /* min-width:max-content з десктопної версії ЗНІМАЄМО: інакше ряд кнопок ширший
     за екран розпирав сторінку вбік. */
  .tw-act{order:3;flex:1 1 100%;min-width:0;flex-wrap:wrap;gap:6px;justify-content:flex-start}
  /* Ряд дій ділиться НЕ так, як у DOM: у розмітці порядок десктопний
     (селекти → «↩ назад» → «Опрацьовано»), а на мобільному потрібно
        ряд A: селекти автооновлення й звуку;
        ряд B: «✓ Опрацьовано» + одразу за ним «↩ назад».
     Переставляє їх `order` — DOM не чіпаємо, щоб не ламати десктоп.
     Раніше «↩» лишався в ряду селектів (він стоїть перед «Опрацьовано», а те займало
     всю ширину), тож кнопка повернення висіла окремо й дрібною. */
  .tw-auto{order:1;flex:1 1 100%;min-width:0;gap:6px}
  .tw-act .tw-f-go{order:2;flex:1 1 auto;min-width:0}
  .tw-act .tw-f-undo{order:3;flex:0 0 auto}
  .tw-act .tw-f-go .btn{width:100%;white-space:nowrap}
  /* Обидві кнопки ряду B — ОДНОГО розміру (з «↩» знімаємо дрібний .btn-sm): вони
     стоять поруч і є парою «далі / назад», а не головною дією та дрібним хвостиком. */
  .tw-act .tw-f-go .btn,.tw-act .tw-f-undo .btn{
    padding:10px 14px;font-size:.9rem;border-radius:9px;line-height:1.25}
  /* Селекти автооновлення й звуку ділять свій ряд порівну — інакше довший з них
     (режим звуку) відтісняв відлік за край. */
  .tw-auto select{flex:1 1 0;min-width:0}
  .tw-auto select.ar-snd-sel{max-width:none}

  .tw-findtog{
    /* order НЕ ставимо: у DOM кнопка стоїть після лічильника, а лічильник і ряд дій
       мають order:0/3 — тож лупа сама лишається в першому рядку біля «←». */
    display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
    height:29px;padding:0 9px;border-radius:8px;cursor:pointer;
    font:inherit;font-size:.85rem;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
  /* Фільтр активний — кнопка «горить» і показує, за чим саме фільтруємо. */
  .tw-findtog.on{background:#fff;border-color:#fff;color:var(--violet-d);font-weight:800}
  .tw-findtog-q{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:.78rem;font-weight:700}
  /* У попапі ряд короткий (усі / search / seller / список брендів) і зазвичай влазить,
     але на найвужчих екранах хай краще перенесеться, ніж вилізе за край. */
  .tw-chips{flex-wrap:wrap}
  .tw-find{display:none}
  .topwork.find-open .tw-find{
    display:flex;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex:0 0 auto;max-width:none;padding:11px 12px;gap:9px;
    background:var(--violet-d);box-shadow:0 14px 28px rgba(15,23,42,.32)}
  /* Таблетки типу лота (Усі / Auction / BuyNow) — під рядами меню, дрібніші й на всю
     ширину: це вже третій рівень фільтра, він не має конкурувати з самими рядами. */
  .typetabs{gap:6px}
  .typetabs .tpill{flex:1 1 0;justify-content:center;font-size:.8rem;padding:6px 8px}
  /* Пошук на «Сповіщеннях» — окремим рядом під таблетками (flex:1 1 100%, а не auto:
     інакше стає в один ряд і давить таблетки до нечитабельного). */
  .nf-find{flex:1 1 100%;margin:6px 0 0}
  .nf-find input{width:100%}
}

/* ── Смуга стану диспетчера (перший блок оглядової сторінки /ebay/) ──
   Заливка градієнтом читається з відстані: зелений — cron живий, червоний — мовчить.
   Це не «прикраса»: без зворотного звʼязку від cron увімкнений розклад нічого не
   гарантує — завдання могли б мовчки не запускатись, а панель виглядала б справною. */
.dsp{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;
  border-radius:14px;padding:16px 20px;margin:22px 0 4px;color:#fff}
.dsp-ok{background:linear-gradient(90deg,var(--green-d),var(--green-l))}
.dsp-bad{background:linear-gradient(90deg,#991b1b,#ef4444)}
.dsp-main{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0}
.dsp-ico{font-size:1.7rem;line-height:1;flex:0 0 auto}
.dsp-t{font-size:1.12rem;font-weight:800}
.dsp-s{font-size:.82rem;opacity:.9;line-height:1.45}
.dsp-cell{flex:0 1 230px;min-width:0;border-left:1px solid rgba(255,255,255,.28);padding-left:20px}
.dsp-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.75;font-weight:700}
.dsp-v{font-size:.98rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsp-act{margin-left:auto;flex:0 0 auto}
.dsp .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.dsp .btn:hover{background:rgba(255,255,255,.26);border-color:#fff}
/* Підказка з готовим рядком cron — лише в «червоному» стані, повною шириною. */
.dsp-fix{flex:1 1 100%;font-size:.82rem;background:rgba(0,0,0,.22);border-radius:9px;padding:9px 12px}
.dsp-fix code{background:rgba(0,0,0,.3);color:#fff;font-size:.78rem;word-break:break-all}
@media(max-width:760px){
  /* Колонки стають рядками: розділова риска зліва перетворюється на верхню. */
  .dsp{gap:12px}
  .dsp-cell{flex:1 1 100%;border-left:0;border-top:1px solid rgba(255,255,255,.28);
    padding-left:0;padding-top:10px}
  .dsp-act{margin-left:0;flex:1 1 100%}
  .dsp-act .btn{width:100%;text-align:center}
}

/* ── Попап знімка прогону (історія: клік по «Знайдено / Відсіяно / Додано») ──
   Числа в історії — це підсумок, з якого раніше не можна було дізнатись НІЧОГО
   конкретного. Тепер кожне відкриває той самий вигляд карток, що й потік, лише
   з прокруткою всередині вікна. */
.snap-n{border:1px solid var(--line);background:var(--panel);color:var(--text);
  font:inherit;font-weight:700;font-size:.88rem;border-radius:7px;padding:2px 9px;cursor:pointer}
.snap-n:hover{border-color:var(--violet);color:var(--violet-d);background:#f5f3ff}
.snap-n.snap-add{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
.snap-n.snap-add:hover{background:#dcfce7;border-color:var(--green);color:var(--green-d)}

.snap{position:fixed;inset:0;z-index:130;background:rgba(15,23,42,.66);
  display:flex;align-items:center;justify-content:center;padding:22px}
.snap[hidden]{display:none}
/* Вікно рівно в межах екрана: шапка фіксована, прокручується лише список карток. */
.snap-win{background:var(--bg);border-radius:14px;width:min(1600px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px rgba(2,6,23,.45)}
.snap-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(90deg,var(--violet-d),var(--violet-l));color:#fff}
.snap-ttl{font-weight:800;font-size:1.02rem}
.snap-sub{font-size:.82rem;opacity:.9}
.snap-x{margin-left:auto;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  color:#fff;font:inherit;font-size:1rem;line-height:1;border-radius:8px;padding:6px 11px;cursor:pointer}
.snap-x:hover{background:rgba(255,255,255,.3)}
.snap-body{overflow:auto;padding:14px 16px 20px;-webkit-overflow-scrolling:touch}
.snap-empty{color:var(--muted);padding:30px;text-align:center}
/* Шапка пошуку по базі: знайдений продавець (посилання на його сторінку) і схожі
   ніки (таблетка перезапускає пошук уже в режимі «лише продавець»). Стоїть НАД
   картками, бо відповідає на інше питання: не «чи є цей лот», а «чий він». */
.find-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 12px}
.fh-lb{color:var(--muted);font-size:.82rem;font-weight:700}
.fh-s{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:inherit;
  font-size:.85rem;font-weight:700;color:var(--violet-d);background:#f5f3ff;
  border:1px solid #ddd6fe;border-radius:999px;padding:4px 11px;cursor:pointer}
.fh-s:hover{background:#ede9fe;border-color:var(--violet)}
.fh-s b{font-size:.75rem;color:#fff;background:var(--violet);border-radius:999px;padding:1px 7px}
/* Підказки — блідіші за знайденого: їхніх лотів у списку ще нема. */
.fh-sug .fh-s{color:var(--text);background:var(--panel);border-color:var(--line)}
.fh-sug .fh-s b{background:var(--muted)}
.fh-sug .fh-s:hover{border-color:var(--violet);color:var(--violet-d)}
/* Заголовок групи результатів пошуку (не опрацьовані / опрацьовані / заблоковані).
   Смужка-роздільник, а не картка: вона має різати список, але не перетягувати увагу
   на себе. Колір лівої межі повторює колір мітки на фото тієї ж групи. */
.find-grp{display:flex;align-items:center;gap:9px;margin:18px 0 10px;padding:6px 0 6px 11px;
  border-left:4px solid var(--line);font-size:.9rem;font-weight:800}
.find-grp:first-child{margin-top:0}
.find-grp b{font-size:.75rem;font-weight:800;color:#fff;background:var(--muted);
  border-radius:999px;padding:2px 9px}
.fg-h{color:var(--muted);font-size:.8rem;font-weight:600}
.fg-live{border-left-color:#16a34a;color:#15803d}
.fg-live b{background:#16a34a}
.fg-done{border-left-color:#64748b;color:#475569}
.fg-done b{background:#64748b}
.fg-ban{border-left-color:var(--danger);color:var(--danger)}
.fg-ban b{background:var(--danger)}
/* Картки трохи щільніші за потік: тут переглядають список, а не працюють з ним. */
.snap-lots{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
/* Попап відкривається і зі сторінки потоку, а вона — `body.work`, де сітка лотів
   розтягнута рівно на екран (`height:100%` + `grid-template-rows:repeat(2,1fr)`,
   фото `flex:1 1 auto`). Усередині вікна ці правила чужі: один ряд карток резервував
   ПОРОЖНІЙ другий ряд — між групами результатів зяяла діра на пів екрана, а фото
   тягнулось на всю висоту ряду. Тут список прокручується, тож висота — по вмісту. */
body.work .snap-lots{height:auto;grid-template-rows:none}
body.work .snap-lots .lot-img{flex:0 0 auto;aspect-ratio:1/1}
/* Причина відсіву — головне в списку «Відсіяно», тому просто на фото. */
.snap-why{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);
  background:rgba(220,38,38,.92);color:#fff;font-size:.68rem;font-weight:700;
  padding:3px 7px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snap-dup{position:absolute;left:6px;bottom:6px;background:rgba(15,23,42,.78);color:#fff;
  font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:6px}
/* Мітка пошуку по базі: де саме лот живе. Це головна відповідь на питання «а ми його
   бачили?», тому колір несе сенс — зелений «ще в потоці», сірий «уже опрацьовано»,
   помаранчевий «у постійну базу так і не потрапив, лишився тільки в знімку прогону». */
.snap-tag{max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snap-tag.st-live{background:rgba(22,163,74,.92)}
.snap-tag.st-done{background:rgba(71,85,105,.86)}
.snap-tag.st-hist{background:rgba(217,119,6,.92)}
/* Уже заблокований продавець: не кнопка, а червона мітка — забанити двічі не можна. */
.lot-ban.is-ban{background:#fef2f2;border-color:#fecaca;color:var(--danger);cursor:default}
@media(max-width:700px){
  .snap{padding:0}
  .snap-win{border-radius:0;height:100%}
  .snap-lots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ── Прогноз API-запитів (остання колонка таблиці «Запустити») ──
   Питання, на яке відповідає колонка: «чи покриють наявні ключі те, що я щойно
   поставив у розклад». Тому поруч із числом завжди видно, з чого воно склалось
   (прогонів × сторінок), а в підсумку — відсоток від добової квоти ключів. */
.fc{white-space:nowrap}
.fc-n{font-size:1.05rem;font-weight:800}
/* Одиниця при числі: заголовок колонки короткий («Прогноз»), а «/добу» має читатись
   як підпис, а не як частина числа — звідси менший кегль і приглушений тон. Одиниця
   саме добова: квота eBay добова, тож у місячних числах не було з чим порівнювати. */
.fc-u{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:2px}
.fc-ok{color:var(--green-d)}
.fc-warn{color:#b45309}
.fc-bad{color:var(--danger)}
.tbl tr.fc-sum td{background:#f8fafc;border-top:2px solid var(--line)}
.tbl tr.fc-sum:hover td{background:#f1f5f9}

/* ══════════════════════ Логістика ══════════════════════ */

/* ── Стадії руху посилки — ОДНЕ джерело кольору ──
   Кольори успадковані від старої системи (її читали роками, м'язова пам'ять на
   «жовте = летить, оранжеве = митниця» дорожча за свіжу палітру), але текст скрізь
   темний і великий: у старій він був 11px на насиченому фоні й ледве читався. */
.st-packing { --s:#cbd5e1; --st:#334155; }  /* ще пакується в США */
.st-transit { --s:#fed944; --st:#453a06; }  /* в дорозі */
.st-customs { --s:#f6b259; --st:#4a2c07; }  /* стоїть на митниці */
.st-city    { --s:#b4e98f; --st:#254a12; }  /* розмитнена, їде по місту */
.st-office  { --s:#68c42a; --st:#173d05; }  /* чекає на відділенні */
.st-received{ --s:#d6009c; --st:#ffffff; }  /* отримано */
.st-arc     { --s:#eef2f7; --st:#5b6675; }  /* здано в архів (знахідка пошуку) */

.lg-flash{margin:14px 0;padding:11px 14px;border-radius:10px;font-size:.92rem}
.lg-flash.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d)}
.lg-flash.err{background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}

/* Смужка стану оновлення: коротка фактична довідка + одна дія. */
.lg-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 18px;
  padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.lg-bar-t{flex:1 1 auto;color:var(--muted);font-size:.9rem}
.lg-bar-t b{color:var(--text)}

/* Верхній відступ — бо під заголовком більше немає рядка-підпису: таблетки
   стояли б упритул до H1. */
.lg-legend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.lg-lg{background:var(--s);color:var(--st);border-radius:999px;padding:5px 12px;
  font-size:.8rem;font-weight:700}

/* ── Пошук по дошці ──
   Стоїть в один рядок із заголовком «В дорозі (N)»: він звужує рівно те число, яке
   в заголовку й стоїть. На вузькому екрані падає під заголовок на всю ширину. */
.lg-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lg-head h1{margin:0}
.lg-find{display:flex;align-items:center;gap:8px;flex:1 1 320px;max-width:560px;position:relative}
.lg-find-in{flex:1 1 auto;min-width:0;padding:9px 34px 9px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:.92rem}
.lg-find-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.lg-find-in::placeholder{color:#b9c3d1}
/* Хрестик заходить усередину поля негативним відступом (під його праве поле 34px),
   а не absolute: у рядку є ще лічильник знахідок, і абсолютна прив'язка ловила б
   правий край усього блоку, а не поля.
   Кружечком, а не голим символом: сірий ✕ без тла зливався з рамкою поля і плутався
   з лічильником знахідок поруч — його просто не знаходили, і щоб побачити повний
   список, чистили поле руками.
   Відступ саме 38px (= 8 gap + 22 ширина + 8 просвіт): при -30px хрестик ставав рівно
   на правий край поля, а край там заокруглений (radius:999px) — кружечок налазив на
   дугу рамки. `margin-right:8px` повертає на місце те, що стоїть ПІСЛЯ нього (лічильник
   знахідок, кнопка «Знайти»): інакше воно поїхало б за хрестиком усередину поля. */
.lg-find-x{flex:0 0 auto;margin-left:-38px;margin-right:8px;position:relative;border:0;cursor:pointer;
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--line);color:var(--text);
  font-size:.72rem;line-height:1;padding:0}
.lg-find-x:hover{background:var(--danger);color:#fff}
.lg-find-x[hidden]{display:none}
.lg-find-n{flex:0 0 auto;color:var(--muted);font-size:.85rem;white-space:nowrap}
.lg-find-n.none{color:var(--danger)}
/* «Шукати в архіві» — у тому ж рядку, що поле: це не окреме питання, а уточнення до
   набраного («…і серед отриманих теж»). Знята за замовчуванням, стан живе в `?arc=1`. */
.lg-find-arc{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-size:.82rem;white-space:nowrap;cursor:pointer;user-select:none}
.lg-find-arc input{margin:0;cursor:pointer}
.lg-find-arc:hover{color:var(--text)}

/* ── Картка «Пошук посилки» на головній розділу ──
   ПЕРША картка в сітці `.cards`, поруч із плитками стану: у розділ заходять із готовим
   питанням «де оце», і поле мусить бути там, куди потрапляєш, а не через два переходи.
   Сама картка нічого не показує — веде на дошку з уже набраним запитом (там і плитки,
   і картка посилки).
   Розміри тримаємо в межах колонки сітки (мінімум 280px): поле стискається до 120px і
   лишається в одному рядку з кнопкою, інакше кнопка зривалась би на другий рядок і
   картка ставала б вищою за сусідні. */
.lg-hfind-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.lg-hfind-in{flex:1 1 120px;min-width:0;padding:9px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:.92rem}
.lg-hfind-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.lg-hfind-in::placeholder{color:#b9c3d1}
.lg-hfind-arc{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  color:var(--muted);font-size:.84rem;cursor:pointer;user-select:none}
.lg-hfind-arc input{margin:0;cursor:pointer}
.lg-hfind-arc i{font-style:normal;opacity:.75}
.lg-hfind-arc:hover{color:var(--text)}
/* Прихована плитка/рядок під час пошуку. Саме класом: .lg-tile це flex (на телефоні
   grid), і атрибут hidden сам собою його не сховає. */
.lg-hide{display:none !important}
/* Під час пошуку підсумок «отримувачів: N» мовчить — його місце займає лічильник
   знахідок біля поля, і два різні числа поруч читались би як суперечність. */
.lg-board.lg-find-on .lg-sum{display:none}

/* ── Смуга «В архіві»: знахідки пошуку, яких на дошці немає ──
   Стоїть НАД дошкою і навмисно виглядає як службова врізка, а не як ще один рядок
   отримувача: дошка — це «що робити далі», а тут відповідь «уже нічого, воно приїхало».
   Пунктирна рамка й сірий фон кажуть це ще до підпису. Показує її JS, коли пошук дає
   збіги в архіві (`?ajax=arcfind`). */
.lg-arc{margin:0 0 14px;padding:10px 12px 12px;border:1px dashed #cbd5e1;
  border-radius:14px;background:#f8fafc}
.lg-arc[hidden]{display:none}
.lg-arc-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:9px}
.lg-arc-t{font-weight:700;font-size:.9rem;color:#475569}
.lg-arc-t b{color:#1f2937}
.lg-arc-s{font-size:.82rem;color:var(--muted)}
.lg-arc-go{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--green-d);
  text-decoration:none;white-space:nowrap}
.lg-arc-go:hover{text-decoration:underline}
/* Та сама сітка плиток, що на дошці — плитку не треба вчитись читати вдруге. */
.lg-arc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
@media(max-width:860px){
  .lg-arc-tiles{grid-template-columns:1fr;gap:5px}
  .lg-arc-go{margin-left:0}
}

/* ── Дошка «В дорозі» ──
   Рядок = отримувач, плитки = його посилки. Ліва колонка навмисно порожня, крім
   системного імені: ім'я людини на екрані не потрібне, а слаг звідси копіюють у MEEST. */
.lg-board{display:flex;flex-direction:column;gap:12px}
.lg-row{display:flex;gap:14px;align-items:flex-start}
/* Ширина колонки імен — ФІКСОВАНА, і взята під найдовший реальний слаг
   («melnichenko-vladyslav», 21 символ) разом з двома кнопками поруч. Саме фіксована,
   а не по вмісту: плитки всіх отримувачів мають починатись на одній вертикалі, інакше
   дошка з двох десятків рядків читається як драбина. */
.lg-who{flex:0 0 268px;padding-top:6px}
.lg-tiles{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lg-empty{color:var(--muted);font-size:.88rem;padding:10px 2px}
/* Підсумок дошки — рядок без плиток: число стоїть рівно під колонкою імен, тому
   читається як «стільки їх у списку», а не як ще одна посилка. */
.lg-sum{margin-top:2px;border-top:1px solid var(--line);padding-top:10px}
.lg-sum-t{color:var(--muted);font-size:.85rem;white-space:nowrap}
.lg-sum-t b{color:var(--text);font-size:1rem}

/* ── Рядок «Затримуються» ── Той самий крій, що й рядок отримувача (щоб не вчитись
   читати дошку вдруге), але з червоною смугою знизу: це не ще одна людина, а стан, і
   око має спіткнутись об нього, йдучи стовпчиком імен. Плитки в ньому ДУБЛЮЮТЬ ті, що
   лежать у своїх отримувачів, — блок це погляд, а не місце зберігання. */
.lg-row-late{padding-bottom:12px;border-bottom:2px solid var(--danger)}
.lg-late-t{display:inline-flex;align-items:center;gap:7px;color:var(--danger);font-weight:800}
.lg-late-t b{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:.78rem;text-align:center}
/* Плитка в цьому рядку — з червоною обводкою: колір самої плитки лишається кольором
   стадії («Пакується»), інакше вона перестала б читатись як та сама посилка, що й у
   рядку отримувача. */
.lg-t-late{outline:2px solid var(--danger);outline-offset:-2px}
/* Знак оклику перед тривалістю — ознака «висить по США довше за норму».
   Стоїть на КОЖНІЙ плитці такої посилки, і головне його місце — рядок отримувача:
   у блоці «Затримуються» затримка й так написана в назві рядка, а серед двох десятків
   сусідніх плиток число «12 д» саме по собі нічим не кричить. Червоне коло, а не колір
   тексту: плитка вже пофарбована в колір стадії, і ще один відтінок там не помітний.
   Зникає сам собою — плитка перестає бути «Пакується», щойно посилка виїде. */
.lg-bang{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-right:5px;vertical-align:-3px;
  background:var(--danger);color:#fff;border-radius:999px;
  font-style:normal;font-weight:900;font-size:.72rem;line-height:1}

.lg-tile{position:relative;background:var(--s);color:var(--st);border-radius:12px;
  padding:11px 13px 12px;min-height:104px;display:flex;flex-direction:column;gap:5px}
.lg-t-top{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;font-weight:700;
  opacity:.85;line-height:1.25}
.lg-t-stage{white-space:nowrap}
/* Номер — головне на плитці: його шукають очима й копіюють. */
.lg-t-code{font-size:1.02rem;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.lg-t-code a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18)}
.lg-t-code a:hover{border-bottom-color:currentColor}
.st-received .lg-t-code a{border-bottom-color:rgba(255,255,255,.5)}
.lg-cp{border:0;background:rgba(255,255,255,.45);color:inherit;border-radius:6px;cursor:pointer;
  font-size:.85rem;line-height:1;padding:3px 5px}
.lg-cp:hover{background:rgba(255,255,255,.75)}
.lg-cp.done{background:#16a34a;color:#fff}
.st-received .lg-cp{background:rgba(255,255,255,.25)}
.lg-t-grp{font-size:.78rem;font-weight:700;opacity:.8}
.lg-t-info{font-size:.86rem;line-height:1.35;word-break:break-word}
/* Позначки митниці: ✓ подано інвойс, ✓✓ мито сплачене. */
.lg-t-mark{position:absolute;top:8px;right:10px;font-size:.9rem;font-weight:800;opacity:.75}

/* Шапка-перемикач отримувача — лише мобільна (див. блок @media нижче). */
.lg-mtog{display:none}

/* ── Дошка на телефоні: список отримувачів, що розкриваються ──
   Плитки в сітці тут не працювали взагалі: на 360px у рядок влазила одна плитка,
   і два десятки отримувачів перетворювались на кілометр прокрутки, де не видно
   ні кому скільки, ні де закінчується один і починається наступний.
   Тому рядок згорнутий у смужку на всю ширину («отримувач + що в нього по стадіях»),
   а розкритий показує посилки компактними рядками-табличкою. */
@media(max-width:860px){
  /* Кожен отримувач — окрема картка з власними межами, а не рядок у суцільній
     стрічці: у стрічці з двадцяти імен розкритий рядок губився серед сусідніх
     і не було видно, де він закінчується. Розкрита картка ще й підсвічена
     (зелена рамка + градієнт від зеленого до білого) — око одразу знаходить,
     що саме зараз відкрито. */
  .lg-board{gap:8px;border-top:0}
  .lg-row{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:14px;overflow:hidden;transition:border-color .14s,box-shadow .14s}
  .lg-row.open{border-color:var(--green);box-shadow:0 6px 18px rgba(22,163,74,.16);
    background:linear-gradient(180deg,#ecfdf5 0,#f7fefa 42%,var(--panel) 100%)}
  .lg-who{flex-wrap:wrap;gap:8px;padding:2px 10px}

  .lg-mtog{display:flex;flex:1 1 auto;min-width:0;align-items:center;gap:8px;
    border:0;background:none;padding:11px 0;font:inherit;color:inherit;cursor:pointer;
    text-align:left}
  .lg-row.open .lg-mtog-n{color:var(--green-d)}
  .lg-mtog-n{font-weight:800;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  /* Лічильники по стадіях — той самий колір, що й плитки: згорнутий рядок читається
     як міні-легенда «де зараз його посилки». */
  .lg-mtog-d{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
  .lg-mtog-d i{background:var(--s);color:var(--st);border-radius:999px;font-style:normal;
    font-size:.72rem;font-weight:800;padding:2px 7px;line-height:1.25}
  /* Загального числа поруч з бейджами немає навмисно: воно дублювало їхню суму.
     Слово лишається тільки там, де бейджів нема взагалі — інакше рядок мовчав би. */
  .lg-mtog-c{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:.78rem}
  .lg-mtog-a{flex:0 0 auto;color:var(--muted);font-size:.9rem;line-height:1;
    transition:transform .15s}
  .lg-row.open .lg-mtog-a{transform:rotate(180deg)}

  /* Слаг для MEEST на телефоні не показуємо взагалі: у шапці картки стоїть рівно
     те саме коротке ім'я, і рядок під ним був його дослівним дублем. Копіювати його
     є звідки — у модалці «Нова посилка» він з кнопкою копіювання. */
  .lg-slug{display:none}
  .lg-bslug{display:none}

  .lg-tiles{display:none;grid-template-columns:1fr;gap:5px;padding:0 10px 12px}
  .lg-row.open .lg-tiles,
  .lg-board.lg-find-on .lg-row .lg-tiles{display:grid}
  .lg-row.open .lg-empty{padding:2px 2px 10px}
  /* Знайдене показуємо розкритим одразу: шукали конкретну посилку, а не список імен. */
  .lg-board.lg-find-on .lg-row{border-color:var(--green)}
  .lg-board.lg-find-on .lg-mtog-a{display:none}

  /* Плитка → компактний рядок таблиці: номер і стадія в одну лінію, опис під ними. */
  .lg-tile{min-height:0;padding:7px 10px;border-radius:9px;gap:2px 8px;
    display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"code top mark" "grp grp grp" "info info info"}
  .lg-t-code{grid-area:code;font-size:.94rem}
  .lg-t-top{grid-area:top;justify-content:flex-end;flex-wrap:wrap;gap:3px 7px;font-size:.72rem}
  .lg-t-mark{grid-area:mark;position:static;top:auto;right:auto;font-size:.82rem;
    align-self:center}
  .lg-t-grp{grid-area:grp}
  .lg-t-info{grid-area:info;font-size:.82rem}

  /* Підсумок карткою не робимо: він не отримувач, а підпис під списком. */
  .lg-sum{border:0;border-radius:0;background:none;box-shadow:none;padding:4px 10px 0}
  .lg-sum .lg-tiles{display:none}
}

/* ── Підсвітка рядка на ПК ──
   Рядок тягнеться на всю ширину екрана, і на дальніх плитках око губить, чий це
   отримувач. Наведення на будь-яку частину рядка (ім'я чи будь-яку плитку) підіймає
   весь рядок — межі стають видимі. Лише там, де є курсор: на тачі :hover «залипає». */
@media(min-width:861px) and (hover:hover){
  .lg-board .lg-row:not(.lg-sum){padding:6px 10px;margin:0 -10px;border-radius:14px;
    transition:background .12s,box-shadow .12s}
  .lg-board .lg-row:not(.lg-sum):hover{background:var(--panel);
    box-shadow:0 2px 12px rgba(15,23,42,.09)}
}

/* ── Таблиця отримувачів ──
   Колонок багато (стадії), тому числа вузькі, а нулі глухо гасяться: погляд має
   чіплятись за те, ДЕ посилки є, а не перелічувати нулі. */
.lg-tbl td,.lg-tbl th{padding-left:9px;padding-right:9px}
.lg-tbl td{vertical-align:middle}
.lg-z{color:var(--muted)}
.lg-nw{white-space:nowrap}
.lg-msg{font-size:.85rem;color:var(--muted)}
.lg-off td{opacity:.5}
.lg-inl{display:inline}
.lg-sort{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line);white-space:nowrap}
.lg-sort:hover{color:var(--text);border-bottom-color:var(--muted)}
.lg-sort.active{color:var(--text);font-weight:800;border-bottom-color:transparent}
.lg-ar{color:var(--green)}
/* Слаг отримувача — його копіюють у кабінет MEEST, тому це поле вводу (клік = виділити),
   а не текст: виділяти мишею рядок у таблиці незручно й легко захопити зайве. */
.lg-slug{border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--muted);
  font:inherit;font-size:.84rem;padding:4px 8px;width:100%;max-width:210px}
.lg-slug:focus{outline:none;border-color:var(--green-l);background:#fff;color:var(--text)}

/* Замок на кнопці статусу: у людини є посилки в роботі, тож вимкнути її не вийде.
   Кнопка лишається робочою — причину з числами пояснює сервер після кліку. */
.lg-lock-i{font-size:.72rem;opacity:.6;margin-left:2px}

.lg-add{margin:0 0 16px}
.lg-add summary{cursor:pointer;font-weight:700;color:var(--green-d);padding:6px 0}
.lg-add-f{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:10px;
  padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.lg-add-f label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
.lg-add-f input{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;
  font-size:.92rem;background:#fff;color:var(--text)}
.lg-hint{font-size:.75rem;color:var(--muted)}

/* ── Сітка розкладу: 7 днів × 24 години ──
   Тільки конкретні години, без «кожні N хвилин»: оновлення важке (сотня запитів до
   повільного трекера), і воно має ставатись у передбачувані моменти, а не фоном. */
.lg-sched{margin:6px 0 26px}
.lg-en{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:14px}
.lg-grid-wrap{overflow-x:auto;margin-bottom:16px}
.lg-grid{border-collapse:separate;border-spacing:3px}
.lg-grid th{font-size:.72rem;color:var(--muted);font-weight:700;padding:2px 4px;text-align:center}
.lg-grid .lg-h,.lg-grid .lg-d{cursor:pointer;user-select:none;border-radius:6px}
.lg-grid .lg-h:hover,.lg-grid .lg-d:hover{background:var(--line);color:var(--text)}
.lg-cell{display:block;width:26px;height:24px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);cursor:pointer}
.lg-cell:hover{border-color:var(--green-l)}
.lg-cell.on{background:var(--green);border-color:var(--green)}
.lg-cell input{display:none}
.lg-h3{margin:26px 0 12px;font-size:1.05rem}

/* Рядок cron на сторінці розкладу: сітка годин марна, поки зовнішній cron не смикає
   диспетчер — тому готовий рядок стоїть поруч із нею, а не в документації. */
.lg-cron{margin:0 0 22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px}
.lg-cron-t{font-size:.9rem;color:var(--muted);margin-bottom:10px}
.lg-cron-t b{color:var(--text)}
.lg-cron-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lg-cron-in{flex:1 1 420px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--text);font-family:ui-monospace,Consolas,monospace;font-size:.84rem}
.lg-cron-in:focus{outline:none;border-color:var(--green-l);background:#fff}
.lg-cron .lg-hint{display:block;margin-top:9px;line-height:1.5}
.btn.lg-cp.done{background:var(--green);border-color:var(--green);color:#fff}

/* ── Смуга стану: клітинка зі стадіями + фіолетова таблетка сортування ── */
.dsp-wide{flex:1 1 380px}
.dsp-st{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:5px}
.dsp-p{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;white-space:nowrap}
.dsp-p b{font-size:.92rem}
.dsp-p.zero{opacity:.5}
/* Крапка кольору стадії — та сама змінна, що фарбує плитки, тож легенда не роз'їдеться. */
.dsp-p i{width:9px;height:9px;border-radius:50%;background:var(--s);
  box-shadow:0 0 0 1px rgba(255,255,255,.5)}

/* Таблетки над дошкою: і легенда кольорів, і сортування отримувачів. */
.lg-legend a.lg-lg{text-decoration:none;cursor:pointer;border:2px solid transparent}
.lg-legend a.lg-lg:hover{border-color:rgba(15,23,42,.25)}
.lg-legend a.lg-lg.active{border-color:var(--text);box-shadow:0 2px 10px rgba(15,23,42,.18)}
.lg-lg b{margin-left:4px}
/* «Найменше посилок» — не стадія, а спосіб дивитись; тому фіолетовий, колір «режиму»
   (той самий, що робоча смуга потоку в eBay), а не жоден з кольорів руху посилки. */
.lg-lg-all{background:var(--violet);color:#fff}
.lg-legend a.lg-lg-all.active{border-color:var(--violet-d)}
/* «Додані сьогодні» — фільтр, а не стадія і не сортування, тому рожевий: колір поза
   всією шкалою руху посилки, щоб таблетка не читалась як ще одна точка маршруту. */
.lg-lg-today{background:#ec4899;color:#fff}
.lg-legend a.lg-lg-today.active{border-color:#9d174d}
/* Квадратик-галочка перед написом: показує, що це вимикач (увімк./вимк.), а не ще одне
   сортування. Порожня рамка видна ЗАВЖДИ — якби квадратик з'являвся лише в активному
   стані, напис би стрибав, і у вимкненому стані таблетка знову читалась як сортування. */
.lg-lg-today{display:inline-flex;align-items:center}
.lg-ck{width:13px;height:13px;margin-right:7px;border:2px solid #fff;border-radius:3px;
  flex:none;position:relative}
.lg-lg-today.active .lg-ck{background:#fff}
/* Галочка — дві сторони квадрата, повернуті на 45°: не залежить від шрифту/емодзі. */
.lg-lg-today.active .lg-ck::after{content:"";position:absolute;left:3px;top:0;
  width:3px;height:7px;border:solid #be185d;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Сьогоднішня плитка в рядку: рядок під фільтром лишається цілим (з усіма посилками
   отримувача), і без позначки довелось би згадувати, яку саме щойно додали. */
.lg-t-new{box-shadow:inset 0 0 0 2px #ec4899}

/* Слаг у модалці «Нова посилка»: свій рядок під іменем + кнопка копіювання.
   Кнопка тут на світлому тлі, тому не напівпрозора біла (як на кольоровій плитці),
   а з рамкою — інакше її просто не видно. */
.lg-slug-row{display:flex;align-items:center;gap:7px;margin-top:5px;font-weight:600}
.lg-cp-slug{background:#fff;border:1px solid var(--line);color:var(--muted);padding:3px 7px}
.lg-cp-slug:hover{background:var(--bg);color:var(--text);border-color:var(--muted)}
.lg-cp-slug.done{border-color:#16a34a}

/* Ліва колонка рядка: ім'я і «+» по центру відносно плиток. */
.lg-row{align-items:center}
.lg-who{display:flex;align-items:center;gap:7px;padding-top:0}
/* Ім'я отримувача на дошці — просто текст: його читають очима, а копіюють значком
   поруч, тому поле вводу тут було зайвою рамкою. Довге ім'я обрізається трьома
   крапками, щоб колонка не роз'їжджалась і плитки лишались на одній вертикалі. */
.lg-bslug{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-plus{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--green-d);font-size:1.15rem;font-weight:800;line-height:1;
  cursor:pointer}
.lg-plus:hover{background:var(--green);border-color:var(--green);color:#fff}

/* Номер на плитці — кнопка, бо відкриває картку; виглядає як посилання. */
.lg-open{border:0;background:none;padding:0;font:inherit;font-size:1.02rem;font-weight:800;
  letter-spacing:.01em;color:inherit;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.18)}
.lg-open:hover{border-bottom-color:currentColor}
.st-received .lg-open{border-bottom-color:rgba(255,255,255,.5)}
.lg-ext{color:inherit;text-decoration:none;opacity:.65;font-weight:700}
.lg-ext:hover{opacity:1}

/* Перехід у кабінет MEEST у ШАПЦІ КАРТКИ — назвою перевізника, а не стрілкою.
   Фірмові кольори логотипу: темно-синій прямокутник, білий напис малими літерами
   і червона крапка. Так значок читається без наведення й не плутається з рештою
   стрілок сторінки (у списках вони лишаються — там їх десятки, і напис на кожній
   плитці перетягував би на себе увагу з номера посилки).
   `line-height:1` + власний padding — щоб таблетка не розпирала рядок заголовка. */
.lg-meest{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:4px 9px;border-radius:6px;background:#0a2d6e;color:#fff;text-decoration:none;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;line-height:1;text-transform:lowercase}
.lg-meest::after{content:"";width:5px;height:5px;border-radius:50%;background:#e2231a}
.lg-meest:hover{background:#0d3a8c}

/* ── Поля у модалках розділу ── */
.lg-f{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--muted)}
/* Типи перелічені ПОІМЕННО, і кожен новий треба дописати сюди: тип, якого в списку
   немає, лишається з дефолтною коробкою браузера — рамка, шрифт і висота інші, ніж
   у сусідів, і поле візуально випадає з форми. Саме це сталось із `type=tel`
   («Телефон покупця» в рахунку): підпис і підказка стилізовані, а сама рамка — ні. */
.lg-f input[type=text],.lg-f input[type=tel],.lg-f input[type=email],
.lg-f input[type=url],.lg-f input[type=search],
.lg-f input[type=date],.lg-f input[type=time],.lg-f input[type=number],
.lg-f select,.lg-f textarea{
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.92rem;
  background:#fff;color:var(--text);width:100%}
.lg-f textarea{resize:vertical;line-height:1.5}
.lg-f input:focus,.lg-f select:focus,.lg-f textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.lg-f-row{display:flex;gap:12px;flex-wrap:wrap}
/* min-width:0 — обов'язково: поле дати має власну «мінімальну» ширину, і на вузькому
   екрані flex-елемент відмовлявся стискатись, розпираючи вікно вбік. */
.lg-f-row .lg-f{flex:1 1 150px;min-width:0}

/* Посилання на замовлення: поле + зелений перехід + жовте «Внести в базу» поруч.
   Поле навмисно найвужче з трьох (`flex:1 1 90px` замість `auto`): адресу сюди
   ВСТАВЛЯЮТЬ, а не читають — а обидві кнопки поруч мусять бути читабельні цілком,
   інакше на другій із них лишається «Внести в…». */
.lg-lnk{display:flex;gap:8px;align-items:stretch}
.lg-lnk input{flex:1 1 90px;min-width:0}
.lg-lnk-go{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap;
  text-decoration:none;font-size:.85rem}
/* .btn задає display:inline-block, тому атрибут hidden сам собою вікно не сховає. */
.lg-lnk-go[hidden]{display:none}
.lg-recv{margin-top:4px}
.lg-recv input{accent-color:var(--green)}
.lg-spacer{flex:1 1 auto}
.lg-x{border:0;background:none;font-size:1.1rem;color:var(--muted);cursor:pointer;line-height:1}
.lg-x:hover{color:var(--text)}

/* Картка посилки — широке вікно у дві колонки: правки і маршрут поруч, бо правлять
   опис зазвичай саме дивлячись, де посилка зараз. */
.lg-edit-box{width:min(1000px,100%)}
.lg-edit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* Номер у шапці картки — та сама пара, що на плитці: сам номер і ↗ у кабінет MEEST. */
.lg-edit-code{display:flex;align-items:center;gap:8px}
.lg-edit-code .lg-ext{font-size:.9em}
.lg-edit-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.lg-edit-form{display:flex;flex-direction:column;gap:12px}
.lg-edit-act{margin-top:auto;align-items:center}
.lg-route{display:flex;flex-direction:column;min-height:0;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lg-route-h{font-weight:700;font-size:.9rem;margin-bottom:10px}
.lg-route-list{overflow-y:auto;max-height:52vh;display:flex;flex-direction:column;gap:10px;
  margin-bottom:12px}
.lg-route-empty{color:var(--muted);font-size:.88rem}
/* Оновити трекінг — під маршрутом і на всю ширину колонки: спершу дивляться, коли
   дані оновлювались востаннє, і лише потім вирішують смикати трекер.
   margin-top:auto притискає кнопку до низу колонки й на короткому маршруті —
   інакше на посилці з двома подіями вона висіла б посеред порожнього поля. */
.lg-route-go{display:block;width:100%;margin:auto 0 0;padding:9px 14px;text-align:center}
.lg-route-go:disabled{cursor:progress}
.lg-route-err{margin-top:8px;padding:7px 10px;border-radius:9px;font-size:.82rem;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}
.lg-ev{border-left:2px solid var(--line);padding-left:11px}
.lg-ev-t{font-size:.76rem;color:var(--muted);font-weight:700}
.lg-ev-x{font-size:.9rem;line-height:1.4}
.lg-ev-p{font-size:.8rem;color:var(--muted)}
/* Найсвіжіша подія — це «де воно зараз», тому вона єдина позначена кольором. */
.lg-ev:first-child{border-left-color:var(--green)}
.lg-ev:first-child .lg-ev-x{font-weight:700}
@media(max-width:820px){
  .lg-edit-cols{grid-template-columns:1fr}
  .lg-route-list{max-height:34vh}
}
/* Вузький екран (складений фолд): усе, що стояло в рядок, переходить у стовпчик —
   інакше ряд кнопок і поле з «Перейти» розпирали вікно і давали горизонтальну прокрутку. */
@media(max-width:430px){
  .modal-box{padding:16px 13px}
  .modal-act{flex-wrap:wrap}
  .lg-edit-act .btn{flex:1 1 auto}
  .lg-edit-act .lg-spacer{display:none}
  .lg-f-row{gap:10px}
  .lg-f-row .lg-f{flex:1 1 100%}
  .lg-lnk{flex-wrap:wrap}
  .lg-lnk-go{flex:1 1 100%;justify-content:center}
}

/* Підказки в полях — світліші за будь-який реальний текст: у модалці із заповненими
   полями сірий placeholder читався як уже введене значення. */
.lg-f input::placeholder,.lg-f textarea::placeholder,
.lg-add-f input::placeholder{color:#d3dae4;opacity:1}

/* Вердикт перевірки номера: тихий, поки номер вільний (блок схований), і червоний
   рядок, щойно номер зайнятий — разом із заблокованою кнопкою «Додати». */
.lg-dup{margin:-4px 0 2px;padding:8px 11px;border-radius:9px;font-size:.85rem;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}

/* ── Що знайшлось за номером замовлення eBay (вікно «Нова посилка») ──
   Блок дивляться рівно один раз — щоб переконатись, що номер той: два сусідні
   замовлення різняться однією цифрою, і єдина надійна перевірка — побачити фото.
   Тому фото великі (56px), а не значки, і список має власну прокрутку: у замовленні
   буває десяток позицій, і форма не має від цього ставати вдвічі вищою за екран. */
.lg-ord{margin:-4px 0 2px;padding:9px 11px;border-radius:10px;font-size:.85rem;
  background:#f8fafc;border:1px solid var(--line);max-height:230px;overflow-y:auto}
.lg-ord-h{font-size:.82rem;color:var(--muted);margin-bottom:7px}
.lg-ord-h b{color:var(--text)}
.lg-ord-i{display:flex;align-items:center;gap:9px;padding:5px 0;border-top:1px solid #eef2f7}
.lg-ord-i:first-of-type{border-top:0}
.lg-ord-i img{width:56px;height:56px;object-fit:contain;border-radius:7px;
  background:#fff;border:1px solid var(--line);flex:0 0 auto}
.lg-ord-noimg{width:56px;height:56px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;text-align:center;border-radius:7px;border:1px dashed var(--line);
  color:#cbd5e1;font-size:.62rem;line-height:1.1}
.lg-ord-t{min-width:0;line-height:1.3}
.lg-ord-t i{color:var(--muted);font-style:normal;font-weight:700}
.lg-ord-t em{display:block;font-style:normal;font-weight:700;color:var(--green-d);font-size:.82rem}
/* «Вже везе інша посилка» — попередження, а не заборона: та сама покупка справді
   буває розділена на дві відправки, і вирішує це людина, а не форма. */
.lg-ord-warn{margin:-2px 0 7px;padding:7px 9px;border-radius:8px;font-size:.82rem;
  background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.lg-ord-none{color:var(--muted)}
.lg-ord-none a{color:var(--green-d);text-decoration:underline}
/* Кілька замовлень в одній коробці — картки одна під одною. Розділові рискою, а не
   просто відступом: без неї позиції двох різних покупок читались як один список. */
.lg-ordc + .lg-ordc{margin-top:10px;padding-top:10px;border-top:1px dashed #cbd5e1}

/* ── Замовлення посилки: рядок на номер ── */
/* Список під полем «Замовлення eBay» у картці. Кнопки переходу тут, а не на полі
   адреси: адреса одна, а замовлень у коробці буває кілька, і другому не діставалось
   ні переходу на eBay, ні жовтої «Внести в базу». */
.lg-ords:empty{display:none}
.lg-ords{display:flex;flex-direction:column;gap:6px;margin:-6px 0 2px}
.lg-ordr{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lg-ordn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;
  font-weight:700;color:var(--text)}
.lg-ordr .lg-cp{background:#fff;border:1px solid var(--line);color:var(--muted);padding:2px 6px}
.lg-ordr .lg-cp:hover{background:var(--bg);color:var(--text);border-color:var(--muted)}
.lg-ordr .btn{white-space:nowrap}
/* Номер, якого немає в базі покупок: не помилка (посилку однаково везуть), а причина,
   чому в рядку немає жовтої кнопки. */
.lg-ordx{font-size:.78rem;color:var(--muted)}

/* ── Список на отримання ── */
/* Відступ від шапки сторінки: рядок «Чекає: …» і заголовок «На відділенні» стояли
   впритул і читались як одна суцільна плита. */
.rc-form{margin-top:18px}
/* Перемикач «Приховати вміст посилок» — під підписом сторінки, окремим рядком:
   це режим показу всього списку, а не властивість якоїсь із двох колонок. */
.rc-hide{display:inline-flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;
  font-size:.9rem;color:var(--muted);user-select:none}
.rc-hide input{width:17px;height:17px;accent-color:var(--green);cursor:pointer}
.rc-hide:hover{color:var(--text)}
.rc-form.rc-nofo .rc-info{display:none}
.rc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.rc-col{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.rc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;background:var(--s);color:var(--st)}
.rc-h-t{font-weight:800;font-size:.95rem}
.rc-h-t b{margin-left:4px}
.rc-all{border:0;background:rgba(255,255,255,.5);color:inherit;border-radius:999px;
  padding:3px 11px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.rc-all:hover{background:rgba(255,255,255,.85)}
.rc-list{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.rc-empty{background:var(--panel);color:var(--muted);font-size:.88rem;padding:14px}

/* Рядок = одна посилка. Вся картка — <label>, тож ціль для пальця це весь блок,
   а не квадратик 14px: галочки тут ставлять на ходу, у відділенні.
   Дві колонки (цифри | решта) замість стовпчика: у стовпчик кожна картка займала
   вдвічі більше висоти, і список на десяток посилок не влазив в екран. */
.rc-it{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;
  cursor:pointer}
.rc-it:hover{background:#f8fafc}
.rc-it.on{background:#f0fdf4}
.rc-it input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--green)}
.rc-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.rc-code{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
/* Останні 4 цифри — головне число картки: саме його називають на стійці.
   Своя колонка фіксованої ширини: інакше номери «стрибали» б по горизонталі
   від рядка до рядка й перестали читатись як стовпчик. */
.rc-tail{flex:0 0 auto;width:4.2ch;text-align:center;font-size:1.6rem;font-weight:800;
  line-height:1.05;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rc-info{font-size:.9rem;line-height:1.35;word-break:break-word}
.rc-who{font-size:.8rem;color:var(--muted)}

/* Дія лишається під рукою, поки гортаєш довгий список. */
.rc-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 -4px 14px rgba(15,23,42,.06)}
.rc-cnt{color:var(--muted);font-size:.9rem}
.rc-cnt b{color:var(--text);font-size:1.05rem}
/* Копіювання списку — праворуч, окремо від дії, що змінює дані: «позначити
   отриманими» незворотне, а «скопіювати» ні, і поруч їх плутали б. */
.rc-spacer{flex:1 1 auto}
#rcCopy.done{background:var(--green);border-color:var(--green);color:#fff}

@media(max-width:900px){
  .rc-cols{grid-template-columns:1fr;gap:14px}
  /* Смуга дій у стовпчик: два рядки кнопок краще, ніж дві стиснуті в піврядка. */
  .rc-spacer{display:none}
  .rc-bar .btn{flex:1 1 auto}
}

/* ═══════════ Логістика → «Архів» ═══════════ */
/* Список без кольорів стадій навмисно: усе тут уже закрите, і фарбувати нічим —
   значення має лише дата, коли посилку здали, номер і те, що в ній було. */
.ar-bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:14px 0 12px}
.ar-cnt{color:var(--muted);font-size:.9rem}
.ar-cnt b{color:var(--text)}
.ar-cnt.none{color:var(--danger)}
/* Кнопка «Знайти» стоїть у полі пошуку: з телефона Enter не завжди під рукою. */
.ar-go{flex:0 0 auto}
/* Скільки останніх показати — дрібні таблетки, а не таблетки-сортування дошки:
   це та сама вибірка, лише глибша, тому вони мовчазні до кліку. */
.ar-nn{display:inline-flex;gap:6px}
.ar-n{min-width:34px;text-align:center;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  text-decoration:none;font-size:.82rem;font-weight:700}
.ar-n:hover{color:var(--text);border-color:var(--muted)}
.ar-n.active{background:var(--green);border-color:var(--green);color:#fff}
.ar-hint{color:var(--muted);font-size:.82rem}
/* «Ще N у дорозі» — єдине посилання в рядку, і воно веде на ІНШУ закладку, тому
   помітне: без нього пошук по архіву мовчки бреше, що посилки не існує. */
.ar-also{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;text-decoration:none;font-size:.85rem}
.ar-also:hover{background:#ffedd5;border-color:#fdba74}

.ar-list{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* Рядок = одна посилка. Колонки фіксовані зліва (дата, номер, отримувач), опис —
   решта ширини: у списку на 300 знахідок око йде вертикаллю по номерах, і «плаваючі»
   колонки перетворили б його на драбину. */
.ar-it{display:grid;grid-template-columns:104px minmax(150px,182px) minmax(110px,168px) minmax(0,1fr);
  gap:4px 14px;align-items:baseline;padding:10px 14px;background:var(--panel)}
.ar-it:hover{background:#f8fafc}
.ar-d{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;gap:1px}
.ar-d i{font-style:normal;font-size:.74rem;opacity:.75}
.ar-c{display:flex;align-items:center;gap:6px;min-width:0}
/* Номер — кнопка, бо відкриває картку; виглядає як посилання (той самий устрій, що
   на плитці дошки, але на світлому тлі, тому лінія темніша). */
.ar-open{border:0;background:none;padding:0;font:inherit;font-size:.94rem;font-weight:800;
  letter-spacing:.01em;color:var(--text);cursor:pointer;border-bottom:1px solid var(--line)}
.ar-open:hover{border-bottom-color:var(--text)}
.ar-w{font-size:.86rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ar-b{min-width:0}
.ar-i{font-size:.88rem;line-height:1.35;word-break:break-word}
/* Повний опис — другим, тьмянішим рядком і не більше трьох ліній: під пошуком у ньому
   зазвичай і сидить збіг, але цілий абзац у списку зайняв би пів екрана. */
.ar-note{font-size:.82rem;line-height:1.4;color:var(--muted);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ar-it mark{background:#fef08a;color:inherit;border-radius:3px;padding:0 1px}
.ar-empty{background:var(--panel);color:var(--muted);font-size:.9rem;padding:18px 14px;
  line-height:1.5}

@media(max-width:820px){
  /* На телефоні колонки не тримаються: номер іде першим рядком (його шукають очима),
     дата й отримувач — дрібним підписом під ним, опис останнім. */
  .ar-it{grid-template-columns:1fr;gap:3px;padding:11px 13px}
  .ar-d{flex-direction:row;gap:7px;order:2}
  .ar-c{order:1}
  .ar-w{order:3;font-size:.82rem;color:var(--muted)}
  .ar-b{order:4;margin-top:3px}
  .ar-hint{display:none}
}

/* ═══════════ eBay → «Очистка бази» (майстер видалення старих записів) ═══════════ */
/* Три числа над майстром: скільки лотів у базі, скільки відкладено й наскільки старий
   найстаріший запис. Без них перший крок робиться наосліп — «а є що чистити взагалі?». */
.cl-sum{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.cl-sum-i{flex:1 1 180px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.cl-sum-i b{font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cl-sum-i span{color:var(--muted);font-size:.85rem}

/* Номер кроку в заголовку — щоб три картки читались як послідовність, а не як три
   незалежні набори кнопок. */
.cl-step{margin-top:16px}
.cl-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin-right:8px;border-radius:50%;background:var(--green);color:#fff;
  font-size:.82rem;font-weight:700}
.cl-off{opacity:.65}
.cl-off .cl-n{background:var(--muted)}
.cl-hot{border-left:4px solid var(--danger)}
.cl-form{display:block}

.cl-age{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.95rem;margin-top:6px}
.cl-num{width:90px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  font-size:1rem;font-weight:700;text-align:center}
.cl-unit{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:.95rem;background:#fff}

/* Готові межі з уже порахованою кількістю — рішення приймається з чисел, а не
   перебором форми. Порожня межа приглушена, щоб не тягнула на себе клік. */
.cl-pre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.cl-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);
  font-size:.85rem;text-decoration:none}
.cl-pill:hover{border-color:var(--muted)}
.cl-pill b{font-variant-numeric:tabular-nums}
.cl-pill.on{background:var(--green);border-color:var(--green);color:#fff}
.cl-pill.zero{opacity:.45}

/* Джерела — три картки-галочки. Сітка з авто-підбором: на ПК три в ряд, на телефоні
   одна під одною БЕЗ окремого медіа-правила (minmax + auto-fit роблять це самі). */
/* `min(230px,100%)` — не голі 230px: на складеному фолді (~280px за вирахуванням
   --pad з обох боків) жорсткий мінімум колонки ширший за екран, і сітка виносить
   картку за край разом з горизонтальною прокруткою всієї сторінки. */
.cl-srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:10px;margin-top:6px}
.cl-src{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"c t n" ". d d";
  gap:2px 10px;align-items:center;padding:12px 14px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:11px}
.cl-src:hover{border-color:var(--muted)}
.cl-src.on{background:#f0fdf4;border-color:var(--green)}
.cl-src-note.on{background:#fffbeb;border-color:#fbbf24}
.cl-src input{grid-area:c;width:17px;height:17px;accent-color:var(--green)}
.cl-src-note input{accent-color:#d97706}
.cl-src-t{grid-area:t;font-weight:700;font-size:.95rem}
/* Число праворуч від назви — скільки записів цього джерела під поточною межею. */
.cl-src-n{grid-area:n;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;
  color:var(--muted)}
.cl-src.on .cl-src-n{color:var(--text)}
.cl-src-d{grid-area:d;color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:2px}
.cl-src-d b{color:var(--text)}
.cl-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.cl-warn{color:var(--danger);font-size:.88rem;font-weight:600}

/* Результат: число завбільшки з заголовок — це головна відповідь сторінки. */
.cl-res{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 14px}
.cl-big{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--danger)}
.cl-res-t{font-size:.95rem;line-height:1.5}
.cl-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cl-fact{padding:5px 11px;border-radius:8px;background:var(--bg);border:1px solid var(--line);
  font-size:.85rem;color:var(--muted)}
.cl-fact b{color:var(--text)}
.cl-fact.k-live{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.cl-fact.k-live b{color:#1d4ed8}
.cl-fact.k-note{background:#fffbeb;border-color:#fde68a;color:#92400e}
.cl-fact.k-note b{color:#92400e}

/* Список, а не таблиця: назва тут головна, мусить лишатись клікабельною й читабельною
   на телефоні (4 колонки там перетворюються на кашу). Кожен рядок — назва зверху,
   під нею смуга дрібних фактів, що переносяться самі. */
/* Список прокручується ВСЕРЕДИНІ блока: 500 рядків розтягували сторінку на десятки
   екранів, і кнопка підтвердження опинялась за півкілометра прокрутки від числа,
   яке її пояснює. Тепер обидва — на одному екрані. */
.cl-list{border:1px solid var(--line);border-radius:12px;overflow:hidden auto;
  max-height:min(65vh,640px);background:var(--panel);overscroll-behavior:contain}
.cl-row{padding:10px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.cl-row:last-child{border-bottom:0}
.cl-row:hover{background:#f8fafc}
.cl-row.k-live{border-left-color:#60a5fa}
.cl-row.k-note{border-left-color:#fbbf24}
.cl-row-t{display:block;color:var(--text);text-decoration:none;font-size:.93rem;
  line-height:1.4;font-weight:600;word-break:break-word}
.cl-row-t:hover{color:var(--green-d);text-decoration:underline}
.cl-ext{color:var(--muted);font-weight:400}
.cl-row-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px;
  font-size:.82rem;color:var(--muted)}
.cl-badge{padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:700;
  background:var(--bg);border:1px solid var(--line)}
.cl-badge.b-live{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.cl-badge.b-note{background:#fffbeb;border-color:#fde68a;color:#92400e}
.cl-price{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cl-who{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-when{margin-left:auto;white-space:nowrap}
.cl-more{margin-top:10px}

/* Кнопка видалення живе за галочкою: confirm() люди тиснуть не читаючи, а тут дію
   ще й треба свідомо розблокувати. */
.cl-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.cl-ack{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);cursor:pointer}
.cl-ack b{color:var(--danger)}
.cl-ack input{width:17px;height:17px;accent-color:var(--danger)}

@media(max-width:900px){
  /* Три підсумкові плитки лишаються В РЯД (`flex:1 1 0` + min-width:0), а не стають
     стовпчиком: у стовпчик вони з'їдали пів екрана телефона до першого кроку майстра. */
  .cl-sum{gap:8px}
  .cl-sum-i{flex:1 1 0;min-width:0;padding:10px 11px}
  .cl-sum-i b{font-size:1.15rem}
  .cl-sum-i span{font-size:.76rem;line-height:1.3}
  .cl-big{font-size:2.1rem}
  .cl-age{gap:8px}
  .cl-age span{flex:1 1 100%}
  .cl-num{flex:1 1 auto;width:auto;min-width:80px}
  /* «Скільки часу тому» на телефоні тікало б у власний рядок через margin-left:auto —
     разом із порожнім місцем від нього. Прибираємо: смуга просто переноситься. */
  .cl-when{margin-left:0}
  .cl-who{max-width:10ch}
  .cl-go{align-items:stretch}
  .cl-go .btn{width:100%}
}
/* Пояснення «звідки починається достовірна історія». Стоїть під підсумковими плитками:
   поки історія коротка, всі лічильники майстра нульові, і без цього рядка сторінка
   виглядає зламаною, а не чесною. */
.cl-note{margin:12px 0 2px;padding:11px 14px;border-radius:11px;
  background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.88rem;line-height:1.55}
.cl-note b{color:#1e3a8a}

/* ═════════════════ «eBay Live» — разовий пошук напряму в eBay ═════════════════
   Форма навмисно в ОДИН рядок (слова / порядок / наявність / к-сть лотів / кнопка):
   решта параметрів запиту зашита в коді (США + новий стан), і виносити їх у поля
   означало б дати їх крутити — а вони не для кручення.
   Базис поля слів навмисно НЕ 420px, а вужчий: із пʼятьма контролями рядок на
   звичайному ноутбуці ламався навпіл саме через нього, а розтягується поле й так
   (flex-grow) — на широкому екрані воно все одно займе все, що лишилось. */
.el-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 6px;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff}
.el-q{flex:1 1 280px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:.95rem;color:var(--text)}
.el-q:focus{outline:none;border-color:var(--green-l);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.el-s,.el-n{flex:0 0 auto;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:.88rem;color:var(--text);background:#fff;cursor:pointer}
.el-s:focus,.el-n:focus{outline:none;border-color:var(--green-l)}
.el-web{flex:0 0 auto;margin-left:auto;font-size:.84rem;color:var(--muted);text-decoration:none;
  border-bottom:1px dashed var(--line)}
.el-web:hover{color:var(--text)}

/* Підсумковий рядок над сіткою. «Уже в базі» виділене — саме це число каже, чи є
   в цій видачі взагалі щось нове, чи ми її вже всю переглянули завданнями. */
.el-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 2px;
  font-size:.9rem;color:var(--text)}
.el-sum b{font-variant-numeric:tabular-nums}
.el-seen{color:var(--violet-d);font-weight:600}
/* Скільки з видачі відсіяв чорний список — окремим числом, бо «Показано» їх уже не
   рахує (вони під межею внизу), і без цього рядка різниця виглядала б як втрачені лоти. */
.el-banned{color:var(--danger);font-weight:600}
.el-sum-f{margin-left:auto}

@media(max-width:900px){
  /* На телефоні кнопка «Пошук» стає на всю ширину під полем: поруч із селектом
     сортування вона тиснулась у 4 символи й у неї важко було влучити. */
  .el-f{gap:8px;padding:11px}
  .el-q{flex:1 1 100%}
  .el-s{flex:1 1 auto}
  .el-f .btn{flex:1 1 100%}
  .el-web{margin-left:0;flex:1 1 100%;text-align:center;padding-top:2px}
  .el-sum-f{margin-left:0;flex:1 1 100%}
  /* Галочка «з наявністю» на телефоні стає в один ряд із селектом сортування, а кнопка
     «Пошук» лишається на всю ширину під ними (див. .el-f .btn вище). */
  .el-qty{flex:0 0 auto;padding:0 2px}
  .el-n{flex:0 0 auto}
  .el-qbar{gap:8px;padding:9px 11px}
  .el-qbar .btn{flex:1 1 100%}
  .el-qnote{flex:1 1 100%}
  /* У панелі блокнота кнопка займає рядок НЕ на всі 100%, а лише скільки лишилось:
     інакше значок «i» переносило на власний рядок, де він висів сам-один. */
  .el-qbar-bare .el-qgo{flex:1 1 auto;min-width:0}
  /* Хмарка підказки на вузькому екрані ніколи не ширша за екран: «i» стоїть біля правого
     краю, тож розгортаємось уліво від нього. */
  .t2tip-b{right:-6px;left:auto;max-width:min(300px,calc(100vw - 36px))}
}
/* Пояснення до порядку «найдешевші»: eBay сортує по СУМІ з доставкою, а на картці
   стоїть гола ціна — без цього рядка список читається як несортований. */
.el-hint{margin:8px 0 2px;padding:9px 13px;border-radius:10px;
  background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.85rem;line-height:1.5}

/* ── Наявність («скільки в наявності») ──
   Галочка стоїть у формі поруч із сортуванням, але виглядає як ПРИМІТКА, а не як ще один
   рівноправний контрол: вона витрачає квоту, і мовчазне ввімкнення «на автопілоті» — саме
   те, чого треба уникнути. */
.el-qty{flex:0 0 auto;display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:.84rem;color:var(--muted);white-space:nowrap}
.el-qty input{width:15px;height:15px;accent-color:var(--green);cursor:pointer}
.el-qty:hover{color:var(--text)}
/* Смуга під підсумком: кнопка з ЦІНОЮ дії + скільки квоти лишилось + стан забору */
.el-qbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px;
  padding:8px 12px;border:1px dashed var(--line);border-radius:10px;background:#fbfdff;
  font-size:.85rem;color:var(--muted)}
.el-qnote{flex:1 1 260px;line-height:1.45}
.el-qnote b{color:var(--text);font-variant-numeric:tabular-nums}
.el-qhave{color:var(--violet-d);font-weight:600}
.el-qst{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
/* Підсумок завершеного забору — зеленим: рядок «готово: …» має відрізнятись від того ж
   рядка в процесі, бо після перезавантаження блокнота це ЄДИНИЙ слід того, що сталось. */
.el-qst-ok{color:var(--green-d)}
/* ── Вбудований режим смуги (усередині чужої панелі — блокнот) ──
   display:contents розчиняє контейнер смуги: її кнопка, «i» і прогрес стають прямими
   дітьми панелі, тож прогрес може розтягнутись на всю ширину рядка (flex-basis:100%),
   а не тулитись у вузьку колонку. Своєї рамки й фону в цьому режимі немає — рамка вже
   є в панелі, а друга всередині першої читалась би як окремий блок. */
.el-qbar-bare{display:contents}
/* Дія притискається праворуч — ліворуч лишаються «+ Додати вручну» й лічильники.
   Розпірка стоїть на ЛІЧИЛЬНИКАХ (.nt-cnt{margin-right:auto}), а не на кнопці: кнопку
   JS після завершення забору видаляє, і разом з нею поїхав би вліво значок «i». */
.el-qbar-bare .el-qnote-s{flex:0 1 auto;font-size:.82rem}
/* Рядок стану — на власному рядку панелі, ПРЯМО над смужкою прогресу: разом вони
   читаються як одна відповідь («N з M · 12 с» + скільки залито). Втиснутий у перший
   рядок, він на кожному оновленні числа розсовував кнопки. */
.el-qbar-bare .el-qst{flex:1 1 100%;margin-top:6px;font-size:.83rem}
/* ── Прогрес забору наявності ──
   Смужка на всю ширину рядка (flex-basis:100% → переносить себе на власний рядок).
   Дві доріжки: залита `-i` — те, що вже пораховане, бліда `-p` — пачка, ЯКА ЗАРАЗ
   у польоті. Без другої смужка стояла б нерухомо всі 10–20 секунд пачки, а саме ця
   пауза й читалась як «зависло». */
.el-qprog{flex:1 1 100%;position:relative;height:6px;margin-top:4px;border-radius:99px;
  background:#e5edf7;overflow:hidden}
.el-qprog[hidden]{display:none}
.el-qprog-i,.el-qprog-p{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  transition:width .35s ease}
.el-qprog-i{background:var(--green);z-index:2}
.el-qprog-p{background:rgba(37,99,235,.28);z-index:1}
/* Поки пачка в польоті — по блідій доріжці біжить блик: рух видно навіть тоді, коли
   числа стоять (пачка приходить цілком, проміжних відповідей у ній немає). */
.el-qprog-run .el-qprog-p{background-image:linear-gradient(90deg,
  rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  background-size:120px 100%;background-repeat:no-repeat;animation:qprog 1.1s linear infinite}
@keyframes qprog{from{background-position:-120px 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.el-qprog-run .el-qprog-p{animation:none}}

/* ── Підказка «i» (спільна) ──
   Довге пояснення, потрібне раз, не має щодня займати рядок поруч із кнопкою. tabindex
   + :focus-within, а не лише :hover, бо на телефоні наведення не існує — там працює тап. */
.t2tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:0 0 auto;border-radius:50%;cursor:help;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font-size:.72rem;font-weight:800;font-style:italic;line-height:1;user-select:none}
.t2tip:hover,.t2tip:focus{color:var(--text);border-color:var(--muted);outline:none}
.t2tip-b{position:absolute;bottom:calc(100% + 8px);right:-6px;z-index:60;
  width:max-content;max-width:min(280px,80vw);padding:8px 11px;border-radius:9px;
  background:#0f172a;color:#e2e8f0;font-size:.78rem;font-weight:400;font-style:normal;
  line-height:1.45;text-align:left;box-shadow:0 8px 22px rgba(15,23,42,.28);
  opacity:0;visibility:hidden;transition:opacity .15s ease}
.t2tip-b b{color:#fff}
.t2tip:hover .t2tip-b,.t2tip:focus .t2tip-b,.t2tip:focus-within .t2tip-b{opacity:1;visibility:visible}
/* Таблетка кількості — та сама форма, що й у стану товару (.cd), бо стоїть з ним в один
   ряд і відповідає на те саме питання «що саме я беру».
   Кольори НЕ дублюють стан: синій — є запас, бурштиновий — остання штука (це і є те,
   за чим по кількість ідуть), червоний — лота вже нема, сірий — eBay числа не назвав. */
.qp{font-variant-numeric:tabular-nums}
.qp-n{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.qp-1{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.qp-x{background:#fef2f2;color:var(--danger);border-color:#fecaca}
.qp-u{background:#f8fafc;color:var(--muted);border-color:var(--line)}

/* ── Межа перед списком заблокованих ──
   Заголовок, а не просто лінія: список під ним живе за іншим правилом (ці лоти в
   роботу не беруться), і читач має дізнатись про це ДО того, як почне їх розглядати. */
.el-bansep{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 0 10px;padding:10px 14px;border-radius:11px;
  background:#fef2f2;border:1px solid #fecaca}
.el-bansep-t{font-weight:800;font-size:.95rem;color:var(--danger);white-space:nowrap}
.el-bansep-t b{font-variant-numeric:tabular-nums}
.el-bansep-s{flex:1 1 260px;font-size:.82rem;color:#9f1239;line-height:1.45}

/* ═══════════ Акаунти eBay (вкладка «API-Ключі») ═══════════
   Форма підключення — сітка, а не .row-form: полів тут різнорідні (короткий підпис,
   довгий RuName, багаторядкові scope-и), і в один ряд вони або розповзались, або
   тиснули одне одного. Розкладка та сама, що в .grid-form, але зі своїми класами:
   там сітка прив'язана до форми завдання й міняти її під акаунти не можна. */
.acc-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-top:6px}
.acc-f{display:flex;flex-direction:column;gap:6px;font-size:.82rem;
  font-weight:600;color:var(--muted)}
.acc-f input,.acc-f select,.acc-f textarea{
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:.92rem;
  font-family:inherit;color:var(--text);background:#fff;resize:vertical}
.acc-f textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}
.acc-f input::placeholder,.acc-f textarea::placeholder{color:#b8c0cf;font-style:italic;opacity:1}
.acc-f input:focus,.acc-f select:focus,.acc-f textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Блок полів OAuth сам є коміркою сітки — всередині ще одна сітка, щоб RuName і
   scope-и не «вискакували» з ряду при перемиканні способу входу. */
.acc-oauth{grid-column:1/-1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.acc-oauth[hidden],.acc-legacy[hidden]{display:none}
.acc-wide{grid-column:1/-1}
.acc-act{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:4px}

/* ═══════════ «Мої покупки» ═══════════
   Замовлення — це НЕ картка лота: у ньому кілька позицій, спільні гроші, статус і
   трекінг. Тому власний блок (шапка → позиції → підвал), а не сітка .cards: позиції
   мусять читатись як список під одним замовленням, інакше незрозуміло, що з чим
   приїхало в одній посилці. */
/* Щільність списку. Замовлень на сторінці 20, у кожного шапка + позиції: кожні
   зайві 4px відступу — це ще один екран прокрутки на сторінку. Тому картка
   тісна навмисно; повітря лишилось рівно між замовленнями, щоб їх межі читались. */
.ord{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:8px 12px;margin-bottom:9px}
.ord-h{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ord-h .tag{margin-left:6px}
.ord-sum{text-align:right;display:flex;flex-direction:row;align-items:baseline;gap:8px}
.ord-sum b{font-size:1rem}
.ord-sum a{color:var(--muted);text-decoration:none}
.ord-sum a:hover{color:var(--green-d);text-decoration:underline}
.ord-i{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;
  border-bottom:1px solid var(--line);border-radius:9px;
  outline:2px solid transparent;outline-offset:-2px;transition:outline-color .12s,background .12s}
.ord-i:last-of-type{border-bottom:0}
/* Позиція під курсором — у РАМКУ. Замовлення розсипається на кілька позицій
   однакового вигляду, і при роботі «зверху вниз» (внести в базу, відкрити лот)
   око щоразу заново шукало, на якому саме рядку стоїть миша. Рамка внутрішня
   (`outline-offset:-2px`) — щоб рядок не «підстрибував» і не зсував сусідів.
   На дотику наведення не існує, тож правило під `hover:hover`. */
@media (hover:hover){
  .ord-i:hover{outline-color:var(--green);background:#f0fdf4}
}
.ord-i img,.ord-noimg{width:52px;height:52px;object-fit:cover;border-radius:8px;
  background:var(--bg);flex:0 0 52px}
.ord-t{flex:1;min-width:0}
.ord-t a{color:var(--text);text-decoration:none;font-weight:600;font-size:.88rem;
  line-height:1.35;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-t a:hover{color:var(--green-d)}
/* Моя нотатка з eBay (Purchase history). Рамка ліворуч і моноширинний шрифт —
   бо це не речення, а фактично табличка «База / МІСТ / Трек», і трек-номер із неї
   читають по цифрах.
   ОДИН рядок з трьома крапками (раніше було `pre-wrap` + фон-плашка): нотатка з двох
   коротких рядків розгорталась у вузькій колонці на 4-5 і займала більше місця, ніж
   назва товару з фото. Повний текст — у `title` рядка (ставить PHP). */
.ord-note{margin-top:3px;padding-left:7px;border-left:2px solid var(--green-d);
  font-size:.73rem;line-height:1.35;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
/* ── Колонки рядка покупки: ціна · доставка · сума · трек · замовлення ──
   Фіксована ширина, а не auto: колонки мають стояти в один стовпчик через УСІ замовлення
   списку, а кожне замовлення — окремий блок і про сусідів нічого не знає. Тому ширина
   задається тут, і шапка (.ord-th) використовує рівно ті самі числа. */
.ord-p{font-weight:700;white-space:nowrap;flex:0 0 78px;text-align:right;font-size:.86rem}
.ord-ship{font-weight:600;color:var(--muted)}
/* Розклад пачки під ціною рядка: «$44.99×3». Другим рядком і дрібним — головне число
   лишається головним, а перевірити арифметику можна не відкриваючи лот. */
.ord-q{display:block;font-weight:500;font-size:.7rem;color:var(--muted)}
.ord-free{color:var(--green-d)}
.ord-land{color:var(--text)}
/* Трек і номер замовлення — такі самі стовпчики, як ціни (раніше стояли підвалом
   `.ord-f` окремим рядком під кожним замовленням). Моноширинний шрифт лише на самому
   числі, а не на контейнері: на телефоні контейнер отримує текстовий підпис через
   ::before, і моно в ньому виглядав би як ще один номер.
   `break-all` — бо трек у 22 цифри не має де переноситись «по-людськи». */
.ord-tk,.ord-on{min-width:0;font-size:.72rem;line-height:1.3;color:var(--muted)}
/* +18px до кожної проти попереднього: рівно на значок копіювання, який тепер стоїть
   у рядку з номером. Без цього сам номер отримав би менше місця, ніж мав, і трек
   ламався б на зайвий рядок. Шапка (`.c-trk`/`.c-ord`) тримає ті самі числа. */
.ord-tk{flex:0 0 168px}
.ord-on{flex:0 0 132px}
.ord-tk span,.ord-on span{display:block;word-break:break-all;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.ord-on span{color:var(--muted)}
/* ── Номер + значок копіювання в одному рядку ──
   Номер тут існує рівно для того, щоб бути вставленим деінде (кабінет MEEST, пошук
   перевізника, форма приходу), а виділяти мишею monospace-рядок, який ще й переноситься
   на два рядки, — найдовший спосіб це зробити. Значок вирівняний по ВЕРХУ: номер буває
   у два рядки (а комбінований — ще й у червоній рамці з підписом), і по центру він
   з'їжджав би від свого числа. */
.ord-tk .ord-cpw,.ord-on .ord-cpw{display:flex;align-items:flex-start;gap:4px}
.ord-tk .ord-cpw+.ord-cpw{margin-top:4px}
.ord-cpw>span{flex:1 1 auto;min-width:0}
.ord-cp{flex:0 0 auto;border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:6px;padding:1px 4px;font:inherit;font-size:.82rem;line-height:1.3}
.ord-cp:hover{background:var(--bg);color:var(--text)}
.ord-cp.done{background:#16a34a;color:#fff}
.ord-tk .ord-dash{color:var(--muted);font-family:inherit}
/* Трек-посилання на сайт перевізника. Виглядає рівно як звичайний номер — це ті
   самі цифри в стовпчику, і двадцять підкреслених синіх рядків поспіль зробили б із
   опорного тексту гірлянду. Клікабельність показує курсор і підкреслення ПРИ
   НАВЕДЕННІ. Колір усередині червоної рамки комбінованої відправки — її: номер там
   небезпечний, і синє посилання гасило б попередження. */
.ord-trkl{color:inherit;font:inherit;text-decoration:none;text-underline-offset:3px}
.ord-trkl:hover{color:var(--green-d);text-decoration:underline}
.ord-tk span.is-comb .ord-trkl:hover{color:#991b1b}
/* ── Комбінована відправка (той самий трек на кількох замовленнях) ──
   Червона рамка навколо САМОГО номера, а не бейдж збоку: небезпечний тут номер, і
   око має спіткнутись об нього, коли йде стовпчиком треків згори вниз. Підпис —
   всередині рамки другим рядком (`<i>` блоком), щоб не поїхала ширина колонки. */
.ord-tk span.is-comb{border:2px solid var(--danger);border-radius:8px;padding:4px 6px;
  background:#fef2f2;color:#991b1b}
.ord-tk span.is-comb i{display:block;margin-top:3px;font-style:normal;font-weight:800;
  font-size:.66rem;line-height:1.25;letter-spacing:.01em;color:var(--danger);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-transform:uppercase}
/* Скільки замовлень їде цим треком — кружечком у кінці підпису: без числа «комбінована»
   не каже, скільки ще рядків шукати під тим самим номером. */
.ord-tk span.is-comb i b{display:inline-block;margin-left:5px;min-width:15px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:#fff;text-align:center}
.ord-th{display:flex;align-items:center;gap:10px;padding:4px 0 2px;
  font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
/* Порожні кінці шапки = місце фото (52px) і кнопки «Внести в базу» (104px). Раніше
   ширину фото «з'їдала» перша колонка (flex:1), і підписи трималися на місці лише
   тому, що колонок було рівно стільки. З появою треку й номера рахунок став точним:
   кожен підпис має свій клас із тією самою шириною, що й колонка рядка. */
.ord-th::before{content:"";flex:0 0 52px}
.ord-th::after{content:"";flex:0 0 104px}
.ord-th .c-nm{flex:1 1 auto;min-width:0}
.ord-th .c-cmt{flex:0 0 190px}
.ord-th .c-p{flex:0 0 78px;text-align:right}
.ord-th .c-trk{flex:0 0 168px}
.ord-th .c-ord{flex:0 0 132px}

/* ── НАШ коментар до позиції (колонка між товаром і ціною) ──
   СІРИЙ БЛОК, а не голий текст: це єдина колонка рядка, куди пише людина, і вона
   мусить читатись як поле, у яке можна клацнути, — решта рядка приїхала з eBay.
   Порожня комірка не порожня, а з підказкою («Додати коментар») блідим: інакше
   стовпчик виглядав би поламаним, а не вільним.
   Ширина фіксована й та сама, що в шапці (`.c-cmt`): колонки стоять одним стовпчиком
   через УСІ замовлення списку, а кожне замовлення — окремий блок і про сусідів
   нічого не знає. */
.ord-cmt{flex:0 0 190px;min-width:0;align-self:stretch;display:flex;align-items:stretch;
  position:relative;font-size:.74rem;line-height:1.35;color:var(--text)}
/* Порожня комірка — КНОПКА, а не блідий нахилений підпис. Підпис нічого не обіцяв:
   він виглядав як «коментаря нема» і не підказував, що комірка взагалі клікабельна
   (правка була подвійним кліком, про який ніде не написано). Пунктирна рамка —
   звичний знак «тут з'явиться щось нове», текст рівний, без курсиву. */
.ord-cmt-add{width:100%;box-sizing:border-box;padding:5px 8px;
  border:1px dashed var(--line);border-radius:8px;background:var(--bg);
  font:inherit;font-size:.72rem;line-height:1.3;color:var(--muted);
  cursor:pointer;text-align:center}
.ord-cmt-add:hover{border-color:var(--green);color:var(--green)}
/* Уже доданий коментар живе В ПОЛІ й полем лишається: правити його можна одразу,
   не згадуючи жодних жестів. У спокої поле тихе (підкладка рядка, тонка рамка) —
   стовпчик читається як текст; у фокусі — розгортається (нижче). */
.ord-cmt-f{width:100%;min-width:0;box-sizing:border-box;padding:5px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);
  font:inherit;font-size:.74rem;line-height:1.35;color:var(--text);
  resize:none;overflow:auto}
.ord-cmt-f:hover{border-color:var(--muted)}
/* ── Поле в фокусі СПЛИВАЄ поверх рядка, а не тулиться всередині комірки ──
   Комірка завширшки 190px і заввишки з фото (52px) — а коментар пишуть на два-три
   рядки. Поле, затиснуте в неї, обрізало б набране рівно посередині. Тому на час
   правки воно позиційоване поверх (як маленька модалка): своя ширина, своя висота
   і тінь, за якою видно, що це вже правка, а не показ. */
.ord-cmt.is-edit{z-index:30}
.ord-cmt-f:focus{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:30;
  width:320px;min-width:100%;max-width:calc(100vw - 32px);min-height:104px;
  padding:7px 9px;border-color:var(--green);background:var(--panel);
  box-shadow:0 10px 30px rgba(15,23,42,.20),0 0 0 3px rgba(22,163,74,.16);
  outline:none;font-size:.8rem;line-height:1.45;resize:vertical}
.ord-filter{margin-top:18px}
/* Поле пошуку зі скиданням усередині. Хрестик — окремий <a> поверх поля, а не
   `type=search` (браузерний хрестик лише чистить значення в браузері, форму не шле,
   тож список лишався б відфільтрованим до наступного «Показати»). Праве падінг
   поля — під нього: інакше довгий номер замовлення заповзав під хрестик.
   Клас саме `ord-fq`, а не `ord-q`: останній уже зайнятий розкладом пачки під ціною
   рядка (`$44.99×3`) вище в цьому ж файлі. */
.ord-fq{position:relative;display:inline-flex;flex:1 1 320px;min-width:220px}
.ord-fq input{flex:1 1 auto;min-width:0;padding-right:34px!important}
.ord-fq-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#eef1f6;color:var(--muted);font-size:.7rem;
  line-height:1;text-decoration:none}
.ord-fq-x:hover{background:var(--danger);color:#fff}
/* Мініатюра-посилання. Розмір тримає правило `.ord-i img` вище, анкеру лишається лише
   не розтягуватись і не давати зайвий inline-відступ під картинкою. */
.ord-ph{flex:0 0 52px;line-height:0;border-radius:8px;display:block;cursor:zoom-in}
.ord-ph:hover img{opacity:.85}

/* ── Швидкі фільтри-таблетки ── */
.ord-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.ord-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-size:.86rem;font-weight:600;
  color:var(--text);text-decoration:none;background:var(--panel)}
.ord-chip:hover{border-color:var(--muted)}
.ord-chip b{background:var(--bg);border-radius:999px;padding:1px 8px;font-size:.78rem;
  color:var(--muted)}
.ord-chip.is-on{background:var(--green);border-color:var(--green);color:#fff}
.ord-chip.is-on b{background:rgba(255,255,255,.22);color:#fff}
/* Червона таблетка («Не внесені в MEEST») — єдина, що показує БОРГ, а не стан.
   У ряду однакових сірих вона мусить читатись як «сюди подивись» ще до того, як
   прочитають підпис, тому червоне тут і в вимкненому вигляді, а не лише в увімкненому. */
.ord-chip-red{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.ord-chip-red:hover{border-color:var(--danger)}
.ord-chip-red b{background:#fee2e2;color:#b91c1c}
.ord-chip-red.is-on{background:var(--danger);border-color:var(--danger);color:#fff}
.ord-chip-red.is-on b{background:rgba(255,255,255,.24);color:#fff}
/* Сіра таблетка («Скасовані на eBay») — дзеркало червоної: та кличе щось зробити,
   а ця веде в архів того, з чим робити вже нічого. Тому притишена ще сильніше за
   звичайні (текст `--muted`), і в увімкненому стані теж не зелена: зелений на цій
   сторінці означає робочий режим розбору, а тут розбирати нема чого. */
.ord-chip-off{color:var(--muted)}
.ord-chip-off.is-on{background:#475569;border-color:#475569;color:#fff}
.ord-chip-off.is-on b{background:rgba(255,255,255,.22);color:#fff}
.ord-count{margin:10px 0 2px}

/* ── Пагінація списку замовлень ── */
.ord-pg{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:16px 0 4px}
.ord-pg a{min-width:34px;text-align:center;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;color:var(--text);text-decoration:none;font-weight:600;font-size:.86rem}
.ord-pg a:hover{border-color:var(--muted)}
.ord-pg .ord-pg-cur{min-width:34px;text-align:center;padding:6px 9px;border-radius:8px;
  background:var(--green);color:#fff;font-weight:700;font-size:.86rem}
.ord-pg .ord-pg-gap{color:var(--muted);padding:0 2px}
/* Забір з eBay стоїть останнім блоком — відділяємо його від списку повітрям, щоб
   не читався як продовження замовлень. */
.ord-sync{margin-top:26px}
@media (max-width:900px){
  .ord-h{align-items:flex-start}
  .ord-sum{text-align:left}
  /* На телефоні три колонки по 92px разом із фото й назвою не влазять. Шапку ховаємо,
     а кожне число підписуємо самим за себе (`data-l` → «Доставка $8.58»), тож таблиця
     не ламається на горизонтальний скрол і лишається читабельною. */
  .ord-th{display:none}
  .ord-i{flex-wrap:wrap}
  /* На телефоні назва отримує всю ширину — обрізати її трьома крапками тут уже нема
     потреби (це компроміс вузької колонки на широкому екрані). */
  .ord-t{flex:1 1 100%;order:1}
  .ord-t a{white-space:normal}
  .ord-i img,.ord-noimg{order:0}
  .ord-ph{order:0}
  /* Коментар — ОКРЕМИМ рядком під назвою (order:1.5 роботи не має, тому просто
     між ними за порядком): це єдиний текст рядка, який пишуть, і затиснутий у
     190px поруч із цінами він на телефоні перетворився б на дві літери. */
  .ord-cmt{flex:1 1 100%;order:1;align-self:auto}
  .ord-cmt-add{padding:8px}
  .ord-cmt-f{min-height:60px}
  /* На телефоні комірка вже на всю ширину рядка, і поле не мусить нікуди спливати
     — воно просто розсуває картку вниз, місця для цього тут вдосталь. */
  .ord-cmt-f:focus{position:static;transform:none;width:100%;max-width:100%;min-height:96px;
    box-shadow:0 0 0 3px rgba(22,163,74,.16)}
  .ord-p{flex:0 0 auto;order:2;font-size:.9rem}
  /* Трек і номер — тим самим прийомом, що й цінові колонки, але окремим рядком
     під ними (order:3): вони довші за будь-яке число, і в один ряд із цінами
     переносились би посеред цифр. */
  .ord-tk,.ord-on{flex:0 0 auto;order:3}
  .ord-tk span,.ord-on span{display:inline;word-break:normal}
  /* Пара «номер + ⧉» на телефоні INLINE: підпис колонки друкується псевдоелементом
     `::before` у тому ж рядку, і блокова пара зіштовхнула б число під нього — тобто
     «Трек» і сам трек опинились би на різних рядках. Кілька треків розділяємо
     горизонтально, а не переносом: вертикальні відступи тут і так вичерпані. */
  .ord-tk .ord-cpw,.ord-on .ord-cpw{display:inline-flex;align-items:center}
  .ord-cpw>span{flex:0 1 auto}
  .ord-tk .ord-cpw+.ord-cpw{margin:0 0 0 10px}
  /* Рамка комбінованої відправки лишається блоком: на inline-елементі падінг і
     рамка не тримають висоту й наїжджають на сусідні рядки. */
  .ord-tk span.is-comb{display:inline-block}
  .ord-p::before,.ord-tk::before,.ord-on::before{content:attr(data-l) " ";font-weight:500;
    color:var(--muted);text-transform:uppercase;font-size:.7rem;letter-spacing:.03em}
}

/* Позначки «опрацьовано» (`.ord-mk` / `.ord-done` / `.ord-todo`) більше немає: вона
   дублювала «✓ Вже в базі» й лише вносила плутанину — два прапорці про одне й те саме
   рано чи пізно розходяться. Єдина ознака «розібрано» — рядок обліку в складі. */

/* ── Стовпчик дій рядка покупки: «Внести в базу» + «Внести в Meest» ──
   Обидві кнопки в ОДНІЙ колонці шириною 104px — рівно стільки ж тримає порожній хвіст
   шапки (`.ord-th::after`). Другим стовпчиком вони зсунули б підписи всіх замовлень
   списку, а колонки тут стоять наскрізно через блоки, які про сусідів нічого не знають. */
.ord-acts{flex:0 0 104px;display:flex;flex-direction:column;align-items:stretch;gap:4px}
/* Усередині колонки ширину задає сам стовпчик, тож `flex-basis` кнопок (він тут
   рахувався б як ВИСОТА) знімаємо. */
.ord-acts>.ord-db,.ord-acts>.ord-dbsp,.ord-acts>.ord-ms{flex:0 0 auto;width:100%}

/* ── «Внести в базу»: кнопка рядка покупки → прихід на склад ──
   Зелена й ЗАВЖДИ на одному місці (фіксовані 118px), бо в неї цілять очима, йдучи
   списком згори вниз. Уже внесене — та сама коробка, але блідою галочкою з артикулом:
   стан читається без наведення, а другого приходу на ту саму покупку зробити не можна. */
.ord-db{flex:0 0 104px;min-height:30px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;padding:4px 7px;border-radius:8px;
  border:1px solid var(--green);background:var(--green);color:#fff;font:inherit;
  font-size:.78rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
  cursor:pointer}
.ord-db:hover{filter:brightness(1.07)}
.ord-db.is-in{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
/* «Ще не відправлено» — та сама коробка, але сірим і без вигляду кнопки: прихід
   вноситься лише з накладною, а вона починається з трек-номера. Порожнє місце тут
   читалось би як збій, а зелена кнопка — як дія, яку чомусь не приймають. */
.ord-db.is-wait{background:var(--bg);border-color:var(--line);color:var(--muted);
  font-weight:600;cursor:default}
.ord-db-n{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:500;font-size:.7rem;opacity:.8}
.ord-dbsp{flex:0 0 104px}

/* ── «Внести в Meest»: кнопка рядка покупки → нова посилка в логістиці ──
   СИНЯ, і навмисно не зелена: зелений у цьому списку вже означає «пішло на склад», і
   дві однакові кнопки поспіль читались би як одна дія в два кроки. Тут інший бік
   шляху — товар ще навіть не вилетів зі США. Стоїть під складською, бо і в житті
   йде після неї, і лише в ПЕРШОМУ рядку замовлення: посилка заводиться на коробку
   цілком, а не на позицію. */
.ord-ms{min-height:28px;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:3px 7px;border-radius:8px;
  border:1px solid #2563eb;background:#2563eb;color:#fff;font:inherit;
  font-size:.75rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
  cursor:pointer}
.ord-ms:hover{filter:brightness(1.08)}
/* Уже заведене — та сама коробка блідим, з номером посилки: стан читається без
   наведення, а другої посилки на те саме замовлення завести вже не пропонуємо. */
.ord-ms.is-in{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;font-weight:600}

/* ── Вікно «Куди перейти?» (клік по назві товару в покупках) ──
   Дві адреси одного й того самого рядка: сам лот і деталі замовлення на eBay. Кнопки
   стовпчиком і з підписом під назвою: вибір роблять один раз і читаючи, а не цілячись
   у пару однакових прямокутників поруч. */
.ord-gobox{width:min(520px,100%)}
.og-go{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.og-go a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-decoration:none;text-align:left;line-height:1.3}
.og-go a[hidden]{display:none}
.og-go a span{font-weight:500;font-size:.78rem;opacity:.85}

/* ── Вікно «Внести в базу» ── */
.ord-dbbox{width:min(600px,100%)}
.od-item{display:flex;align-items:center;gap:11px;background:var(--bg);
  border-radius:10px;padding:9px 11px}
.od-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex:0 0 52px}
.od-ttl{font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Кнопка «Вибрати товар складу» — на місці колишнього поля пошуку. Пунктиром і на всю
   ширину: це перший (і обовʼязковий) крок форми, а не додаткова дія збоку. */
.od-open{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;background:#fff;border:1px dashed var(--green);border-radius:9px;
  padding:9px 12px;cursor:pointer;font:inherit;color:var(--green-d)}
.od-open:hover{background:#f0fdf4}
.od-open[hidden]{display:none}
.od-open b{font-size:.92rem}
/* Номер замовлення eBay — поле лише для читання: показуємо, але не редагуємо (сервер
   бере його зі своєї бази — саме ним прихід звʼязаний із покупкою). */
.od-ro{background:var(--bg)!important;color:var(--muted);font-weight:700;cursor:default}
/* Розшифровка підставленої ціни покупки (товар + доставка продавця) */
.od-buyn{font-size:.78rem;margin-top:-4px}
.od-buyn[hidden]{display:none}
/* Чого бракує, щоб кнопка ожила — рядком у самому підсумку (він темний, звідси бурштин).
   Кнопка «Внести прихід» сіра, поки не введена доставка; без цього рядка це виглядало б
   як збій, а не як незаповнене поле. */
.od-need{border-top:1px solid #334155;margin-top:6px;padding-top:6px;
  font-size:.78rem;line-height:1.35;color:#fbbf24}
/* ── Вікно вибору товару складу (поверх «Внести в базу») ──
   z-index вищий за .modal (110) — так само, як довідка `.qh-modal` над формою завдання. */
/* ── Вікно вибору «один товар / кілька» (перед формою приходу) ──
   Варіанти — в один стовпчик: це не сітка рівнозначних плиток, а питання з двома
   відповідями, які читають зверху вниз (той самий прийом, що у вікні переходу за
   номером замовлення в складі). */
.ord-kindbox{width:min(520px,100%)}
.ord-kinds{grid-template-columns:1fr}
.ord-kind{width:100%}
/* Друга гілка веде на іншу сторінку, а не відкриває вікно тут — значок синій, як усі
   переходи панелі: зелене коло означає «дія просто тут». */
.ord-kind .wh-op-i.many{background:#1d4ed8}
.od-findm{z-index:120}
.od-findbox{width:min(560px,100%)}
/* Результати пошуку по складу — рядками-кнопками, а не <select>: вибирають ОКОМ, по фото
   й артикулу, і випадаючий список на сотні позицій цього дати не може. Висота — від
   ЕКРАНА: список живе в окремому вікні, тож може займати його майже цілком. */
.od-res{display:flex;flex-direction:column;gap:4px;max-height:min(60vh,460px);overflow:auto}
.od-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 9px;
  cursor:pointer;font:inherit;color:var(--text)}
.od-row:hover{border-color:var(--green);background:#f0fdf4}
.od-row img,.od-noimg{width:40px;height:40px;object-fit:cover;border-radius:7px;
  flex:0 0 40px;background:var(--bg)}
.od-rn{min-width:0;display:flex;flex-direction:column;gap:1px}
.od-rn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
/* Обраний товар — зеленою плашкою: після вибору видно рівно те, у що піде прихід. */
.od-pick{display:flex;align-items:center;gap:11px;background:#f0fdf4;
  border:1px solid #bbf7d0;border-radius:10px;padding:8px 11px}
.od-pick[hidden]{display:none}
.od-pick img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 44px}
.od-pick>div{flex:1;min-width:0}

/* ── Вікно «Нова посилка» (кнопка «Внести в Meest» у покупках) ──
   Класи полів тут спільні з логістикою (`.lg-f`, `.lg-dup`, `.lg-ord*`, `.lg-slug-row`) —
   форма одна й та сама, і власного набору стилів для неї бути не повинно, інакше два
   однакові вікна поїхали б різними шляхами. Своє тут лише те, чого на дошці нема. */
.ms-box{width:min(560px,100%)}
/* Пояснення автовибору отримувача — дрібним і одразу під списком: воно відповідає на
   питання «чому саме він», яке виникає рівно в момент, коли бачиш підставлене ім'я. */
.ms-why{margin:-6px 0 2px;font-size:.78rem;line-height:1.45}
/* Номер замовлення — довідкою, не полем: сюди прийшли з його рядка, набирати нічого. */
.ms-ord{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);
  color:var(--text);font-weight:700;font-size:.9rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
/* Трек у шапці вікна — поруч із назвою: наступний крок після цієї форми завжди один і
   той самий (завести відправку в кабінеті MEEST ЗА ЦИМ треком), і ховати його під
   вікном означало б ховати те, заради чого вікно й відкрили. Шапка стає багаторядковою,
   тому вирівнювання по верху, а не по центру. */
.ms-head{align-items:flex-start}
.ms-trk{display:inline-flex;flex-direction:column;gap:2px;vertical-align:middle;
  margin-left:9px}
.ms-trk[hidden]{display:none}
.ms-trk>span{display:inline-flex;align-items:center;gap:3px}
.ms-trk em{font-style:normal;font-weight:700;font-size:.82rem;color:var(--green-d);
  word-break:break-all;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
/* ── Сусіди по треку ── Замовлення, що їдуть тією самою коробкою. Жовтим, як і позначка
   «Комбінована відправка» в списку: це те саме явище, і у вікні воно з тієї ж причини —
   посилка одна, покупок у ній кілька. */
.ms-sibs{display:flex;flex-direction:column;gap:5px;margin:-4px 0 2px;padding:9px 11px;
  border-radius:10px;background:#fffbeb;border:1px solid #fde68a}
.ms-sibs[hidden]{display:none}
.ms-sib-h{font-size:.8rem;line-height:1.45;color:#92400e;margin-bottom:2px}
.ms-sib{display:flex;align-items:center;gap:7px;font-size:.85rem;cursor:pointer}
.ms-sib b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text)}
.ms-sib span{font-size:.78rem;color:#92400e}
/* Сусід, якого вже везе інша посилка: галочка знята, і рядок не має вдавати вибір —
   друга посилка на ту саму коробку і є та помилка, від якої тут рятує список. */
.ms-sib.is-busy{opacity:.7}
.ms-sib.is-busy span{font-weight:700}
@media (max-width:900px){
  /* На телефоні колонка дій їде окремим рядком під цінами (як трек і номер), а
     розпірка для тих, у кого нема доступу до складу, зникає зовсім: тримати місце
     під кнопку, якої не буде, є сенс лише поки колонки стоять наскрізним стовпчиком. */
  .ord-acts{order:3;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;width:100%}
  .ord-acts>.ord-db,.ord-acts>.ord-ms{width:auto;flex:1 1 130px}
  .ord-dbsp{display:none}
}

/* ═══════════════════ Облік товарів (/warehouse/) ═══════════════════
   Три закладки: список, картка товару, фільтри. Класи з префіксом wh-.
   Поля форми навмисно беруть готові .lg-f/.lg-f-row з логістики: це той самий
   вигляд поля вводу на всю панель, і другий власний набір розійшовся б з ним
   на першій же правці. */

/* ── Список ── */
.wh-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wh-hact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Перемикач мови назв: дві таблетки в одній обоймі. Стоїть ПЕРЕД пошуком, бо міняє
   не вибірку, а мову, якою її читають — переклад перевіряють так само, як його
   побачить покупець: одним стовпчиком, без «а під ним дрібним оригінал». */
.wh-lng{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:var(--panel)}
.wh-lng-b{padding:6px 13px;font-size:.82rem;font-weight:700;color:var(--muted);
  letter-spacing:.03em;line-height:1.2}
.wh-lng-b + .wh-lng-b{border-left:1px solid var(--line)}
.wh-lng-b:hover{background:var(--bg);color:var(--text)}
.wh-lng-b.on{background:var(--green);color:#fff}
.wh-lng-b.on:hover{background:var(--green-d);color:#fff}
/* Текст, для якого перекладу нема (показано українську в RU-режимі): не ховаємо і
   не підміняємо мовчки — саме таке й шукають перемикачем. */
.wh-nolng{color:var(--danger)}
.wh-nolng-t{display:inline-block;margin-left:6px;background:#fef2f2;border:1px solid #fecaca;
  color:var(--danger);border-radius:999px;padding:0 7px;font-size:.68rem;font-weight:700;
  vertical-align:middle}
.wh-find{display:flex;align-items:center;gap:8px}
.wh-find input{padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;color:var(--text);min-width:280px}
.wh-find input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
/* Хрестик скидання живе ВСЕРЕДИНІ поля пошуку — окремою кнопкою поруч він забирав
   ширину в самого поля. Обгортка потрібна лише щоб було до чого його позиціонувати;
   праве поле вводу розширене рівно під нього, інакше довгий запит заповзав під хрестик. */
.wh-findw{position:relative;display:flex;align-items:center}
.wh-findw input{padding-right:30px}
.wh-findx{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:.72rem;line-height:1;
  color:var(--muted);background:var(--bg);text-decoration:none}
.wh-findx:hover{color:var(--text);background:var(--line)}
/* Лупа стоїть РІВНО там, де хрестик (це той самий кут поля, і два стани підміняють
   один одного), але вона — кнопка відправки форми, а не посилання: окремої «Шукати»
   поруч більше нема, ширина її з'їдала в поля стільки, що довгий артикул не влазив. */
.wh-findg{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:var(--muted);background:var(--bg)}
.wh-findg svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.wh-findg:hover{color:var(--green-d);background:var(--line)}
.wh-qnote{margin:0 0 10px;font-size:.85rem}
.wh-tbl td{vertical-align:middle}
.wh-c-ph{width:64px}
.wh-c-num{text-align:right;white-space:nowrap}
/* ⚠ Заголовок числової колонки теж ПРАВОРУЧ, і саме окремим правилом: `.tbl th`
   задає `text-align:left` і має ВИЩУ вагу (клас+тег) за голий `.wh-c-num` (клас),
   тож підпис лишався ліворуч, поки числа під ним стояли праворуч — «5 шт» не
   збігалося з «Не вистачає», і всі числові стовпчики виглядали зсунутими. */
.tbl th.wh-c-num{text-align:right}
.tbl th.wh-c-act{text-align:right}
.wh-c-act{width:1%;white-space:nowrap;text-align:right}
/* Мінімальний залишок — найвужча колонка таблиці: підпис скорочено до «Min» (повний
   лишився підказкою), а `width:1%` домальовує решту — браузер віддає такій колонці
   рівно стільки, скільки треба її вмісту («3 шт»), і всю зекономлену ширину забирає
   назва товару, заради якої в список і заходять. */
.wh-c-min{width:1%}

/* ── Розмір сторінки (біля перемикача мови) ── */
.wh-per{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted)}
.wh-per select{padding:6px 9px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);font:inherit;font-size:.82rem;font-weight:700;color:var(--text);
  cursor:pointer;line-height:1.2}
.wh-per select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}

/* ── Клікабельний заголовок колонки ──
   Підпис-перемикач + ПАРА стрілок, кожна своїм посиланням. Стрілки бліді, поки
   колонка не активна: три пари чорних трикутників у шапці читались би як окремий
   ряд значків і перебивали б самі підписи. Активна пара — зелена, тобто колонка
   й напрямок видно з одного погляду, без вчитування.
   ⚠ `.tbl th.wh-sth` (клас+тег), бо `.tbl th` задає свій `text-align`/`color` і
   голий клас його не перебиває — та сама пастка, що й з `.wh-c-num` вище. */
.tbl th.wh-sth{white-space:nowrap}
.tbl th.wh-sth.wh-c-num{text-align:right}
.wh-sth .wh-sh{color:inherit;font-weight:inherit;border-bottom:1px dashed transparent}
.wh-sth .wh-sh:hover{color:var(--green-d);border-bottom-color:currentColor}
.wh-sth.on .wh-sh{color:var(--green-d)}
/* Дві стрілки стовпчиком: вони мусять влізти у висоту рядка шапки, а поруч —
   вдвічі розширити колонку. Кожна — окрема ціль кліку, тож `padding` дає їм
   натискну площу, якої в самому гліфі 8px нема. */
.wh-sar{display:inline-flex;flex-direction:column;vertical-align:middle;
  margin-left:5px;line-height:.72}
.wh-sar-b{font-size:.55rem;color:var(--line);padding:0 2px;letter-spacing:0}
.wh-sar-b:hover{color:var(--green-d)}
.wh-sar-b.on{color:var(--green)}

/* ── Вікно перегляду фото (список, дефіцит, галерея картки товару) ──
   Ширше за звичайну модалку (`.modal-box` = 420px): це саме перегляд знімка, і в
   420px товар видно не краще, ніж у мініатюрі, заради якої вікно й відкривали.
   Висоту тримає сам знімок — `max-height` у vh/dvh, інакше вертикальне фото
   (сток 900×1600) вилазить за екран і вікно доводиться прокручувати. */
.wh-imgm .modal-box{width:min(860px,100%)}
.wh-imgm-b{display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px}
.wh-imgm-b img{max-width:100%;max-height:calc(100vh - 210px);
  max-height:calc(100dvh - 210px);height:auto;display:block;border-radius:8px}
/* Назва товару під знімком: великий текст по центру — це підпис до картинки, а не
   службовий рядок. Пара до `hidden` обов'язкова (правило панелі), інакше прихований
   підпис лишався б на екрані через `display:block`. */
.wh-imgm-cap{margin-top:10px;text-align:center;font-size:1.05rem;font-weight:700;
  line-height:1.35;display:block}
.wh-imgm-cap[hidden]{display:none}
/* Шапка: ім'я файлу + шлях у стовпчик. `min-width:0` обов'язковий — інакше довге
   ім'я в flex-рядку розпирає коробку замість того, щоб переноситись. */
.wh-imgm-h{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Ім'я файлу — головний рядок вікна: моноширинне (його звіряють посимвольно) і
   трохи дрібніше за звичайний `.modal-title`, бо імена бувають довгі. */
.wh-imgm-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;
  word-break:break-all}
/* Шлях під ним — довідково: дрібний і приглушений, але клікабельний (веде на знімок). */
.wh-imgm-u{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  font-weight:600;word-break:break-all;color:var(--muted)}
.wh-imgm-u:hover{color:var(--green-d);text-decoration:underline}
/* Мініатюра-посилання: показуємо, що по ній клікають (курсор + легке підсвічування). */
.wh-phl{display:inline-block;cursor:zoom-in}
.wh-phl:hover .wh-th{border-color:var(--green)}
/* У галереї картки товару підсвічування знімка НЕМА навмисно: плитки там стоять
   щільною сіткою, і зелена обводка при кожному проході миші блимала на пів екрана,
   нічого не додаючи — курсора-лупи (`zoom-in`) вистачає, щоб зрозуміти, що по фото
   клікають. У списку рамка лишається: там мініатюра одна в рядку і не миготить. */
/* Мініатюра списку: ФІКСОВАНА ШИРИНА, висота — за пропорціями знімка.
   Було 52×52 з `object-fit:cover`, тобто квадратна обрізка: у товарів складу фото
   майже завжди не квадратне (інструмент лежить упоперек кадру), і в стовпчик
   потрапляла його середина — без насадки, без шильдика, часто без половини корпусу.
   Упізнати товар по такому огризку не виходило, а саме для цього мініатюра й стоїть.
   Тепер знімок видно ЦІЛКОМ; спільною лишається ширина, тож стовпчик рівний.
   `max-height` — запобіжник під вертикальні кадри (сток 900×1600 інакше розтягнув би
   рядок на пів екрана); `contain` тримає пропорції, якщо стеля таки спрацювала. */
.wh-th{width:52px;height:auto;max-height:96px;object-fit:contain;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);display:block}
.wh-noph{display:inline-block;width:52px;height:52px;line-height:52px;text-align:center;
  border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.wh-name{font-weight:700}
.wh-name:hover{color:var(--green-d)}
/* Товар, знятий з експорту на вітрину (`avail_mode='hidden'`): червона назва плюс
   кружок із «!». Дві ознаки, а не одна: колір сам по собі не читається ні в ч/б,
   ні при дальтонізмі, а в цій колонці червоним уже світить `.wh-nolng` (нема RU).
   Зелене підсвічування `.wh-name:hover` гасимо — інакше під курсором попередження
   зникає саме в той момент, коли товар беруть у роботу. */
.wh-name.wh-hid,.wh-name.wh-hid:hover{color:var(--danger)}
.wh-hid-i{display:inline-block;width:16px;height:16px;line-height:15px;text-align:center;
  border-radius:50%;background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;
  margin-right:5px;vertical-align:middle;cursor:help}
/* Артикул НЕ переноситься: `48-11-2440` MySQL віддає одним рядком, а браузер рвав
   його по дефісах на два — прочитати такий артикул з екрана (а їх звіряють весь
   день) виходило лише по складах. Колонка від цього трохи ширшає, і це дешевше. */
.wh-sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;
  white-space:nowrap}
.wh-c-sku{white-space:nowrap}
/* Артикул-кнопка (питання до логістики). Виглядає рівно як звичайний артикул — це
   ті самі цифри, і перефарбувати їх у синє посилання означало б зробити з опорного
   тексту таблиці двадцять підкреслених рядків. Клікабельність показує курсор і
   підкреслення ПРИ НАВЕДЕННІ, а не постійно. */
.wh-skuq{padding:0;border:0;background:none;color:inherit;font-weight:700;cursor:pointer;
  text-decoration:none;text-underline-offset:3px}
.wh-skuq:hover{color:var(--green-d);text-decoration:underline}
.muted .wh-skuq{font-weight:400;color:inherit}
/* ── Артикул під назвою (своєї колонки в списку більше нема) ──
   Дрібніший і приглушений: у клітинці тепер два рядки, і якби артикул важив стільки
   ж, скільки назва, пара читалась би як два різні товари. Клікабельність (питання в
   логістику) і кнопка копіювання лишились ті самі — змінилось лише місце. */
.wh-nsku{margin-top:2px;font-size:.82rem;color:var(--muted)}
.wh-nsku .wh-sku{font-size:.84rem;color:var(--text)}
.wh-nsku .wh-cp{width:18px;height:18px;margin-left:3px}
/* Альтернативний артикул — у ТОМУ Ж рядку, за основним: третій рядок у клітинці
   зробив би з таблиці стрічку, а альтернативний артикул є в меншості товарів. */
/* «Переглянути на сайті» — одразу за артикулом, у тому ж рядку. Дрібно й
   приглушено: це не зміст рядка, а вихід із нього; колір фірмовий зелений, як усі
   переходи панелі. Не переноситься — короткий підпис, що рветься по словах, у
   рядку з артикулом читався б як другий артикул. */
.wh-site{margin-left:10px;font-size:.76rem;font-weight:700;color:var(--green-d);
  text-decoration:none;white-space:nowrap;border-bottom:1px dashed rgba(22,101,52,.35)}
.wh-site:hover{border-bottom-style:solid}
.wh-nsku-a{margin-left:8px}
/* Артикул У ЛАПКАХ (сторінка дефіциту) — той самий артикул, лише готовий до
   вставки в пошук eBay: без лапок він б'ється на слова й повертає все підряд.
   Через тире й у ТОМУ Ж рядку: це одна річ у двох формах, а два рядки читались
   би як два різні артикули. Тире приглушене — воно роздільник, а не текст. */
.wh-nsku-q{margin-left:6px;color:var(--muted)}

/* ── Таблетка «OLX» (колонка «OLX / Prom») ──
   Замість номера оголошення: сам номер ні про що не говорить, його все одно
   підставляли руками в адресу OLX. Зелена — це «оголошення живе», і колір той самий,
   що в решти дій панелі. Підпис — ВЕЛИКИМИ, як і сама назва майданчика: малими
   літерами таблетка читалась як випадкове слово, а не як марка сайту. */
.wh-olxb{display:inline-block;padding:2px 9px;border:1px solid var(--green);border-radius:999px;
  background:var(--green);color:#fff;font:inherit;font-size:.76rem;font-weight:700;
  letter-spacing:.02em;cursor:pointer;line-height:1.45}
.wh-olxb:hover{background:var(--green-d);border-color:var(--green-d)}
.wh-olxb:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
/* Пара до `hidden` обов'язкова (правило панелі): у картці товару таблетку ховають
   атрибутом, поки поле «ID товару на OLX» порожнє, а `display:inline-block` вище
   переміг би сам `hidden`. */
.wh-olxb[hidden]{display:none}
/* Номер оголошення в шапці вікна — довідково: моноширинний і приглушений, бо його
   звіряють очима з тим, що показав OLX, але самі по собі ці цифри не дія. */
.wh-olxno{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;
  font-weight:600;color:var(--muted)}
/* Вікно вузьке: у ньому лише назва, знімок і три кнопки. */
.wh-olxbox{max-width:440px}
/* Знімок товару — щоб ПЕРЕД переходом було видно, про яке оголошення йдеться (рядок
   списку до того часу вже за кадром). Висота обмежена екраном: сток буває
   вертикальний. Пара до `hidden` обов'язкова (правило панелі) — інакше товар без
   фото показував би порожню рамку. */
.wh-olximg{display:block;margin:10px auto 0;max-width:100%;max-height:230px;height:auto;
  border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.wh-olximg[hidden]{display:none}
/* Три переходи — в один ряд і на всю ширину: це рівноправні дії одного роду, і
   стовпчик з трьох кнопок читався б як послідовність кроків. */
.wh-olxacts{display:flex;gap:8px;margin-top:12px}
.wh-olxacts .btn{flex:1;text-align:center;justify-content:center}
/* «Шукати» — окремим рядком під трьома кабінетними діями: інший адресат (публічний
   пошук OLX, а не наше оголошення). На всю ширину, бо в рядку сама; артикул усередині
   виділений — на нього й дивляться перед переходом. Пара до `hidden` обов'язкова. */
.wh-olxfind{margin-top:8px}
.wh-olxfind[hidden]{display:none}
.wh-olxfind .btn{width:100%;text-align:center;justify-content:center}
.wh-olxfind b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── Кнопка «копіювати» біля назви й артикула ──
   Іконка двох аркушів, без підпису: стоїть у КОЖНОМУ рядку таблиці, і будь-яке
   слово поруч з'їло б колонку. Бліда, поки на рядок не навели — інакше двадцять
   іконок поспіль читались би як окремий стовпчик. */
.wh-cp,.wh-cpf{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:22px;height:22px;margin-left:5px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer;opacity:.45;transition:opacity .12s}
.wh-cp svg,.wh-cpf svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
tr:hover .wh-cp,.wh-cp:focus-visible,.wh-cpf:focus-visible{opacity:1}
.wh-cp:hover,.wh-cpf:hover{background:var(--bg);color:var(--green-d);opacity:1}
/* Підтвердження — на самій кнопці: галочка замість аркушів на секунду. Спливаюче
   повідомлення довелось би шукати очима, а копіюють підряд по кілька рядків. */
.wh-cp.ok,.wh-cpf.ok{opacity:1;color:var(--green);background:#f0fdf4}
.wh-cp.ok svg,.wh-cpf.ok svg{display:none}
.wh-cp.ok::after,.wh-cpf.ok::after{content:'✓';font-size:.85rem;font-weight:700}

/* Копіювання ІМЕНІ ФАЙЛУ (`.wh-cpf`) — у плитці галереї й у вікні перегляду.
   Окремий клас, а не `.wh-cp`: обробник `.wh-cp` живе в скрипті СПИСКУ, а ці дві
   кнопки стоять на картці товару й у спільному вікні фото, де того скрипта нема
   (у списку ж він є — і одна кнопка з обома класами копіювалася б двічі).
   У плитці бліда, поки на неї не навели (плиток десятки — ряд яскравих іконок
   читався б окремим стовпчиком); у вікні перегляду завжди видима — вона там одна. */
.wh-ph-i .wh-cpf{width:18px;height:18px;margin-left:2px}
.wh-ph:hover .wh-cpf{opacity:.8}
.wh-imgm-n .wh-cpf{opacity:1;color:var(--muted)}

/* ── Завантажити ФАЙЛ на диск (`.wh-dlf`) — поруч із копіюванням імені ──
   Стрілка вниз у тих самих двох місцях, що й іконка копіювання (плитка галереї і
   вікно перегляду), і того ж розміру: питання до цієї пари одне — «що зробити з цим
   файлом», — і два різні за виглядом значки читались би як речі різного роду.
   Це посилання, а не кнопка: файл віддає наш же домен із `Content-Disposition:
   attachment`, тож браузер качає його сам, без скрипта й без жодного питання.
   Качається при цьому не файл із теки, а його підготовлена копія — з вотермарком
   і адресою сайту (`?dl=photo`), бо ці знімки беруть рівно під OLX. Синій на
   наведенні, а не зелений, як у копіювання, — щоб дві сусідні іконки не зливались
   у здогадці, куди саме клацнув. */
.wh-dlf{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:22px;height:22px;margin-left:2px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer;opacity:.45;transition:opacity .12s}
.wh-dlf svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wh-dlf:hover,.wh-dlf:focus-visible{background:var(--bg);color:#2563eb;opacity:1}
.wh-ph-i .wh-dlf{width:18px;height:18px}
.wh-ph:hover .wh-dlf{opacity:.8}
.wh-imgm-n .wh-dlf{opacity:1;color:var(--muted)}

/* ── Копіювання ВМІСТУ ПОЛЯ (`.wh-cpi`) — картка товару ──
   Третій клас, а не `.wh-cp`: та копіює готовий текст із `data-cp`, а ця читає живе
   значення поля в момент кліку (разом із щойно набраним і ще не збереженим). Стоїть
   у підписі поля, тож завжди видима: кнопка тут одна на поле, а не двадцять поспіль
   у стовпчику таблиці. */
.wh-cpi{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:20px;height:20px;margin-left:4px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer}
.wh-cpi svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wh-cpi:hover{background:var(--bg);color:var(--green-d)}
.wh-cpi.ok{color:var(--green);background:#f0fdf4}
.wh-cpi.ok svg{display:none}
.wh-cpi.ok::after{content:'✓';font-size:.85rem;font-weight:700}
/* У ряду кнопок під полем тексту сторінки («Переглянути як HTML») кнопка вже не
   значок у підписі, а рівноправна дія — тому з підписом і звичайного розміру. */
.wh-pageact .wh-cpi{width:auto;height:auto;margin-left:0;gap:6px;padding:6px 11px;
  border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.82rem;
  background:var(--panel)}
.wh-pageact .wh-cpi.ok span{display:none}
.wh-pageact .wh-cpi.ok::after{content:'✓ Скопійовано'}

/* ── Рядок-заголовок усередині таблиці знахідок ──
   Точний збіг за артикулом і пов'язані з ним товари комплекту стоять в ОДНІЙ
   таблиці з рештою знахідок: три окремі таблиці розійшлися б колонками, і око
   мусило б заново шукати, де тут ціна. */
.wh-cap td{background:var(--bg);font-size:.82rem;font-weight:700;color:var(--muted);
  padding:7px 10px;letter-spacing:.01em}
.wh-cap.hit td{background:#f0fdf4;color:var(--green-d);
  box-shadow:inset 3px 0 0 var(--green)}
.wh-keep{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d);
  border-radius:999px;padding:2px 9px;font-size:.82rem;font-weight:700}
.wh-dots{color:var(--muted);padding:0 2px}

/* ── Розкладка списку: стовпчик підбору ліворуч, список праворуч ──
   Фільтри стоять САМЕ поруч зі списком, а не над ним і не у вікні: підбирають
   ітеративно (бренд → напруга → тип), і кожен крок має бути видно разом із тим,
   що з нього вийшло. Ширина стовпчика фіксована — плаваючи від довжини назв
   фільтрів, таблиця стрибала б на кожне звуження вибірки. */
.wh-lay{display:grid;grid-template-columns:264px minmax(0,1fr);gap:14px;align-items:start}
.wh-lay.nofilt{grid-template-columns:minmax(0,1fr)}   /* фільтрів ще не заведено */
.wh-lmain{min-width:0}
/* Розкладка йшла ВПРИТУЛ до заголовка сторінки: правило `.page-head + …` знає лише
   про .card/.tbl/form, а тут одразу за шапкою стоїть <div>. На «Товарах у дефіциті»
   під заголовком ще й два рядки пояснення — вони лягали просто на шапку таблиці. */
.page-head + .wh-lay{margin-top:18px}

/* ── ПРАВИЛО РОЗДІЛУ: при роботі з товарами сторінка НЕ прокручується ──
   Скролиться те, що всередині: стовпчик підбору — сам, таблиця — сама. Інакше
   стовпчик фільтрів, перемикач зрізу і пагінація йдуть за верхній край, і після
   кожної галочки (а їх ставлять десятками поспіль) доводиться гортати назад.
   Висоту `--wh-layh` рахує скрипт від РЕАЛЬНОГО положення розкладки — над нею
   липке меню змінної висоти, тож константа дала б або дірку, або обрізаний низ.
   Клас `fixh` вішає теж скрипт: без JS усе лишається звичайною сторінкою. */
/* `.content` має padding-bottom:60px під усі сторінки панелі. Тут він зайвий: список
   і так закінчується біля низу вікна, а 60px порожнечі під ним — це рівно та
   прокрутка, якої позбувались (той самий прийом, що й `.wh-form` у картці товару:
   16px нижнього просвіту лишаємо, решту з'їдаємо від'ємним відступом). */
.wh-lay.fixh{height:var(--wh-layh,auto);align-items:stretch;margin-bottom:-44px}
.wh-lay.fixh .wh-lmain{display:flex;flex-direction:column;min-height:0}
/* Коробка таблиці = єдине, що росте й скролиться; рамка й заокруглення переїхали
   з самої таблиці сюди, бо `.tbl{overflow:hidden}` створює власний контейнер
   прокрутки й ламає липку шапку. */
.wh-tbox{min-height:0;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);overflow:auto}
.wh-lay.fixh .wh-tbox{flex:1}
.wh-tbox .tbl{border:0;border-radius:0;overflow:visible}
/* Шапка таблиці лишається на місці при прокрутці списку: без неї на тридцятому
   рядку вже не сказати, де ціна, а де мінімальний залишок. `border-collapse` з'їдає
   рамку липкої комірки — повертаємо її внутрішньою тінню. */
.wh-tbox .wh-tbl th{position:sticky;top:0;z-index:2;
  box-shadow:inset 0 -1px 0 var(--line)}
/* Пагінація лишається ПІД таблицею, у видимій частині: вона й потрібна саме тоді,
   коли долистали до низу. */
.wh-lay.fixh .pager{flex:0 0 auto;margin-top:12px;flex-wrap:wrap}

/* Стовпчик липкий і скролиться САМ: перелік значень довший за екран, і без цього
   до кінця фільтрів доводилось би гортати всю сторінку разом із таблицею.
   `--ctop` — той самий відступ під липким меню панелі, що й у .content. */
/* `--wh-navh` — реальна висота липкого меню, її міряє скрипт: меню тут
   `position:sticky` і змінної висоти (ряд закладок переносить рядки), тож будь-яка
   константа дала б або дірку, або стовпчик, що заповзає під меню. */
.wh-side{margin:0;position:sticky;top:calc(var(--wh-navh, 56px) + 8px);
  display:flex;flex-direction:column;padding:12px;
  max-height:calc(100dvh - var(--wh-navh, 56px) - 22px)}
/* У розкладці з фіксованою висотою стовпчик уже й так стоїть на місці — липкість
   і власна стеля висоти зайві: він просто займає всю висоту своєї колонки, а
   всередині скролиться перелік груп (`.wh-side-b`). */
.wh-lay.fixh .wh-side{position:static;max-height:none;height:100%;min-height:0}
/* Пошук у стовпчику підбору — над галочками. У шапці, у ряду з перемикачем мови й
   розміром сторінки, набраний запит губився з очей, хоча шукають і звужують те саме,
   одне за одним. Тут полю дозволено СТИСКАТИСЬ (`min-width:0` замість 280px з шапки):
   стовпчик вузький, і жорсткий мінімум розпирав би йому колонку. */
.wh-sfind{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wh-sfind .wh-findw{flex:1;min-width:0}
.wh-sfind input{width:100%;min-width:0;padding:8px 30px 8px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);font:inherit;color:var(--text)}
.wh-sfind input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.wh-sfind .btn{flex:0 0 auto}
.wh-side-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.wh-side-t{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:0;border:0;
  background:none;font:inherit;color:inherit;text-align:left;cursor:default}
.wh-side-t .card-title{margin:0}
.wh-side-n{flex:0 0 auto;background:var(--green);color:#fff;border-radius:999px;
  padding:0 7px;font-size:.72rem}
.wh-side-x{flex:0 0 auto}
.wh-side-b{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;
  padding-right:4px}
.wh-side-note{font-size:.76rem;margin:4px 0 0;line-height:1.45}
/* Числа біля значень: скільки товарів дасть галочка. Порожнє значення не ховаємо,
   а гасимо — зникни воно, перелік стрибав би на кожен клік, і не було б видно,
   чого на складі нема взагалі. */
.wh-fv-n{margin-left:auto;flex:0 0 auto;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:0 6px;font-size:.68rem;color:var(--muted);font-weight:700}
.wh-side .wh-fv{gap:6px}
.wh-side .wh-fv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-fv.zero{opacity:.45}
.wh-fv.on .wh-fv-n{background:var(--green);border-color:var(--green);color:#fff}

/* ── Вибрані значення НАД переліком груп (стовпчик підбору) ──
   Число «(3)» у заголовку казало, СКІЛЬКИ галочок, але не ЯКІ — а половина груп
   згорнута, і щоб згадати вибір, доводилось розкривати їх по одній. Тут вибір
   видно цілком: рядок на значення, «Фільтр» напівжирним і саме значення під ним
   у тому ж рядку, ✕ — той самий зріз без цієї галочки.
   Блок стоїть ПОЗА прокруткою груп: він має лишатись на очах, а прокрутка живе
   там, де її лишили. */
.wh-selbox{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;padding-bottom:9px;
  border-bottom:1px solid var(--line);max-height:26vh;overflow-y:auto}
.wh-selr{display:flex;align-items:baseline;gap:6px;background:#f0fdf4;
  border:1px solid #bbf7d0;border-radius:8px;padding:3px 4px 3px 8px;font-size:.76rem}
.wh-selr b{flex:0 0 auto;color:var(--muted);font-weight:700}
.wh-selr b::after{content:':'}
.wh-selr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;color:var(--green-d)}
.wh-selx{flex:0 0 auto;color:var(--muted);text-decoration:none;font-size:.8rem;line-height:1;
  padding:2px 4px;border-radius:5px}
.wh-selx:hover{background:#fef2f2;color:var(--danger)}

/* ── Перемикач зрізу списку (всі / без фільтрів / комплекти) ──
   Радіо-кнопки виглядають таблетками в один ряд: варіанти взаємовиключні, їх три,
   і випадаючий список заради трьох пунктів вимагав би двох кліків замість одного.
   Сам кружечок лишається на місці (це радіо, і воно має читатись як радіо), просто
   вся таблетка клікабельна. */
.wh-modes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wh-mode{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 10px;
  background:var(--panel);font-size:.86rem;user-select:none}
.wh-mode:hover{border-color:var(--green-l)}
.wh-mode input{width:15px;height:15px;margin:0;accent-color:var(--green)}
.wh-mode.on{border-color:var(--green);background:#f0fdf4;font-weight:700;color:var(--green-d)}
.wh-mode-n{background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:0 7px;font-size:.74rem;color:var(--muted);font-weight:700}
.wh-mode.on .wh-mode-n{background:var(--green);border-color:var(--green);color:#fff}
/* «На складі мінус» — єдина ЧЕРВОНА таблетка в ряду. Зелений тут означає «зріз як
   зріз», а цей зріз повідомляє про розбіжність складу з документами, і однаковий
   вигляд ховав би її серед звичайних. Розмітка додає таблетку лише коли мінус є
   (див. цикл у `warehouse/index.php`), тож червоний ніколи не висить даремно. */
.wh-mode-neg{border-color:#fecaca;color:var(--danger)}
.wh-mode-neg:hover{border-color:var(--danger);background:#fef2f2}
.wh-mode-neg input{accent-color:var(--danger)}
.wh-mode-neg.on{border-color:var(--danger);background:#fef2f2;color:var(--danger)}
.wh-mode-neg .wh-mode-n{border-color:#fecaca;color:var(--danger)}
.wh-mode-neg.on .wh-mode-n{background:var(--danger);border-color:var(--danger);color:#fff}

/* ── Колонка «Фільтри»: галочка / хрестик ──
   Знак відповідає на єдине питання «проставлено чи ні» одним поглядом по стовпчику.
   Зелений ще й кнопка (перелік фільтрів товару), червоний — просто позначка: там
   показувати нема чого. */
.wh-c-f{width:1%;white-space:nowrap;text-align:center}
.tbl th.wh-c-f{text-align:center}   /* див. `.tbl th.wh-c-num`: `.tbl th` важчий за клас */
.wh-fmark{display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:2px 9px;font-size:.95rem;font-weight:700;line-height:1.5}
.wh-fmark b{font-size:.72rem;font-weight:700}
.wh-fmark.ok{color:var(--green-d);background:#f0fdf4;border:1px solid #bbf7d0;
  cursor:pointer;font-family:inherit}
.wh-fmark.ok:hover{border-color:var(--green);background:#dcfce7}
.wh-fmark.no{color:var(--danger);background:#fef2f2;border:1px solid #fecaca}
/* Хрестик буває й ПОСИЛАННЯМ (коли роботу почали, але не добили — SEO без другої
   мови, текст однією мовою), і КНОПКОЮ (колонка «Фільтри»: значення є, але серед
   них нема «Категорії товару» — перелік не порожній, і відкривають його так само,
   як зелений). Такий рядок відкривають, щоб дописати, і клікати по ньому мають так
   само, як по галочці. Для голого `<span>` (нічого не робили) правило не спрацює —
   селектор навмисно перелічує саме `a` і `button`. */
button.wh-fmark.no{cursor:pointer;font-family:inherit}
a.wh-fmark.no:hover,
button.wh-fmark.no:hover{border-color:var(--danger);background:#fee2e2}
/* SEO-позначка — ОРАНЖЕВА, а не зелена: у списку два однакові стовпчики галочок
   поспіль злились би в один, а оранжевий тут той самий, що й на кнопці «Керування
   SEO» в картці, — колір означає «сюди заходили», а не «перевірено». */
.wh-fmark.seo{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa}
.wh-fmark.seo:hover{border-color:#f97316;background:#ffedd5;color:#9a3412}
/* Позначка тексту сторінки — СИНЯ, третій колір поспіль: зелена (фільтри),
   оранжева (SEO), синя (текст). Три однакові галочки в ряд злились би в один
   стовпчик, і рядок довелось би читати по заголовках колонок. */
.wh-fmark.txt{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
.wh-fmark.txt:hover{border-color:#3b82f6;background:#dbeafe;color:#1e40af}
/* Позначка російської назви — ФІОЛЕТОВА, четвертий колір ряду: зелена (фільтри),
   фіолетова (назва RU), оранжева (SEO), синя (текст). Той самий порядок і той самий
   набір, що й червоні позначки в шапці картки товару, — питання в них одне: чого
   товару бракує, щоб виїхати на сайт. */
.wh-fmark.rul{color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe}
.wh-fmark.rul:hover{border-color:#8b5cf6;background:#ede9fe;color:#5b21b6}

/* ── Склад комплекту під його назвою ──
   Дерево малюємо самим текстом `|_`: рівень тут рівно один, і будь-які лінії
   псевдоелементами довелось би підганяти під висоту рядка на кожну зміну шрифту. */
.wh-kitp{margin-top:5px;display:flex;flex-direction:column;gap:2px}
.wh-kitp-r{display:flex;align-items:baseline;gap:6px;font-size:.82rem;flex-wrap:wrap}
.wh-kitp-b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
  flex:0 0 auto;letter-spacing:-1px}
.wh-kitp-r a{color:var(--text)}
.wh-kitp-r a:hover{color:var(--green-d);text-decoration:underline}
.wh-kitp-r .wh-sku{font-size:.78rem;color:var(--muted)}

/* ── Картка товару ──
   Дві колонки: ліворуч поля, праворуч фото. Фото — саме поруч, а не під формою:
   їх додають в один захід із набором назви, і прокручувати між ними екран туди-сюди
   означало б робити подвійну роботу на кожному товарі. */
/* Три колонки: поля | фото | фільтри. Мета — уся картка в межах одного екрана, тому
   кожна колонка скролиться сама (max-height від висоти вікна), а не тягне за собою
   сторінку.
   Ширину ділимо на користь ПОЛІВ: у картці найдовше саме набирають (назви двома
   мовами, ціни, артикули), а галерея відповідає на питання «які фото вже є» — для
   цього вистачає двох плиток у ряд, а подробиці показує вікно перегляду по кліку.
   Текст сторінки СВОЄЇ колонки не має (пишуть його у вікні): він забирав ширину і в
   полів, і в фото заради роботи, яку роблять раз на товар. */
.wh-cols{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.78fr) minmax(0,.9fr);
  gap:14px;margin-top:16px;align-items:start}
/* Товар-комплект: четверта колонка (комплект) стає між полями і фотогалереєю, а
   ширину під неї віддає САМЕ ГАЛЕРЕЯ. Клас вішає скрипт разом із галочкою, тому
   у звичайного товару розкладка й розмір фото лишаються ті самі. */
.wh-cols.has-kit{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.85fr)}
.wh-card{margin:0}
/* Кожна колонка скролиться САМА, до низу вікна: висоту рахує скрипт (`--wh-colh`
   на .wh-cols) від реального положення сітки, бо над нею липке меню змінної
   висоти, і будь-яка константа тут була б або з дірою, або з прокруткою.
   Без JS правило не діє (max-height:none) — сторінка просто прокручується, як
   було. */
.wh-cols>.card{max-height:var(--wh-colh,none);overflow-y:auto}
/* .content має padding-bottom:60px під усі сторінки панелі. Тут він зайвий: картка
   і так закінчується біля низу вікна, а 60px порожнечі під нею — це рівно та
   прокрутка, якої позбувались. */
.wh-form{margin-bottom:-44px}
/* Заголовок сторінки товару = ряд дій: «До списку» ліворуч від назви, «Зберегти»
   праворуч навпроти неї. Так під кнопки не йде окремий ряд. */
.wh-phead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* ── Чому в назви є СВОЯ мінімальна ширина ──
   🐞 11.09.2026, розгорнутий Fold (~880px): назва товару малювалась стовпчиком по
   одній букві в рядок, а шапка через це розганялась на кілька екранів заввишки —
   решта кнопок опинялась десь далеко внизу, «сторінка розірвана».
   Причина: `flex:1` = `flex-basis:0` + `min-width:0`, тобто елемент згоден на БУДЬ-ЯКУ
   ширину. Поки поруч у ряду стояли лише «До списку» й «Зберегти», місця вистачало; як
   тільки в товару з'явились червоні позначки (5 кружків по 56px) плюс мова, «Стара
   база» й «до операцій», сума фіксованих ширин перевищила рядок — і єдиний елемент,
   який умів стискатись, стиснувся до нуля. `overflow-wrap:anywhere` у h1 (він потрібен
   для довгих артикулів) домалював решту: у колонці шириною в літеру кожна літера —
   окремий рядок.
   Тому: `flex-basis` 320px = «хочу стільки» — при браку місця ряд ПЕРЕНОСИТЬ назву на
   свій рядок, замість того щоб чавити її; `min-width` = підлога, нижче якої стиснути не
   можна взагалі. `min(100%,…)` у підлозі — щоб на справді вузькому контейнері вона не
   почала розпирати сторінку вбік (підлога не може бути ширшою за сам ряд). */
.wh-phead-t{flex:1 1 320px;min-width:min(100%,220px)}
/* Довга назва товару переноситься СЛОВАМИ й ріже задовге слово, а не вилазить із
   своєї колонки: `overflow:hidden` без цього просто зрізав би хвіст назви. */
/* Назва товару — на 20% дрібніша за звичайний заголовок сторінки (1.6rem): у цьому
   ряду вона ділить ширину з кнопками й позначками, а самі назви тут довгі
   («15 см полотно 14/18 TPI Bi-Metal 2X Long Life по металлу DeWALT DWA4186») і
   повним кеглем розганяли шапку на три рядки. */
.wh-phead-t h1{overflow-wrap:anywhere;line-height:1.25;font-size:1.28rem}
/* Наявність у рядку дат картки товару — ТАБЛЕТКОЮ, і кольоровою. Питання тут
   двійкове («є чи нема»), а сірим числом воно читалось би як ще одна технічна
   дрібниця поруч зі «створено/змінено», тобто проходило б повз око саме тоді,
   коли товару на складі нема. Кольори — ті самі, що в позначок списку
   (`.wh-fmark`) і плитки обліку: зелене «є», червоне «нема». */
.wh-qpill{display:inline-flex;align-items:center;margin-left:8px;padding:2px 10px;
  border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap;
  vertical-align:middle}
.wh-qpill.ok{color:var(--green-d);background:#f0fdf4;border:1px solid #bbf7d0}
.wh-qpill.no{color:var(--danger);background:#fef2f2;border:1px solid #fecaca}
/* Таблеток тут ДВІ, і вони відповідають на різні питання: «скільки є» (посилання в
   облік) і «скільки їде» (вікно з посилками). Друга — СИНЯ, третім кольором: зелене
   й червоне вже зайняті двійковим «є / нема», і пофарбувати «в дорозі» в будь-який
   з них означало б сказати про майбутнє те, що ці кольори кажуть про зараз.
   Обидві клікабельні, тож курсор і підкреслення на наведенні — щоб це було видно
   до кліку, а не після. Кнопка скидає власні поля <button>: у ряду з посиланням
   вона мусить бути тією ж таблеткою, а не елементом форми. */
.wh-qpill.tr{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
a.wh-qpill,button.wh-qpill{cursor:pointer;font-family:inherit;line-height:inherit}
a.wh-qpill:hover,button.wh-qpill:hover{filter:brightness(.97);text-decoration:underline}
.wh-phead .btn-go{flex:0 0 auto}
/* ── Чого товару бракує (шапка картки) ──
   Ті самі червоні хрестики, що в колонках «Фільтри» і «SEO» списку, тільки з
   підписом: у списку значення знака дає заголовок колонки, а тут його нема.
   Стоять МІЖ «До списку» і назвою — на єдиному місці шапки, повз яке погляд і
   так проходить дорогою до назви. Кожна — кнопка в те місце, де це дозаповнюють. */
/* Обгортка — `display:contents`, тобто самі позначки стають елементами ряду шапки:
   звичайний блок лишав по собі порожній проміжок у товарі, де все заповнено, і назва
   без причини відсувалась від «До списку». */
.wh-phead-warn{display:contents}
/* Позначка — КРУЖОК, а не таблетка: хрестик над підписом читається як один значок,
   і в ряду з довгою назвою товару він мусить рости вгору, а не вбік. Тому висота й
   ширина рівні (`--wh-warn`) і жодна з них не залежить від довжини слова —
   підпис навмисно дрібний, він лише називає те, що вже сказав знак. */
.wh-warnb{--wh-warn:56px;cursor:pointer;font-family:inherit;
  flex:0 0 auto;flex-direction:column;justify-content:center;gap:2px;
  width:var(--wh-warn);height:var(--wh-warn);padding:0;border-radius:50%;
  font-size:1.05rem;line-height:1}
.wh-warnb span{font-size:.56rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;line-height:1}
.wh-warnb:hover{background:#fee2e2;border-color:var(--danger)}
/* `hidden` слабший за `display:inline-flex` у `.wh-fmark` — без цього позначка,
   знята скриптом, лишалась би на екрані (правило панелі: пара до кожного hidden). */
.wh-warnb[hidden]{display:none}
/* Заголовок сторінки обліку лежав ВПРИТУЛ до плиток під ним: у h1 лише 4px знизу,
   а ні плитки, ні попередження власного відступу зверху не мають (правило
   `.page-head + …` знає тільки про .card/.tbl/form). Двом рядкам назви цих 4px
   не вистачало — назва читалась як напис ПО плитці. */
.page-head + .wh-sttiles,
.page-head + .wh-strow,
.page-head + .wh-stwarn{margin-top:18px}
.wh-form .lg-f{margin-bottom:12px}
.wh-hint{font-size:.85rem;margin:0 0 12px}
.wh-star{color:var(--danger)}
.wh-req input{border-color:var(--green-l)}
.wh-price input{font-weight:700}
/* ── Ціна продажу: вузьке поле + таблетка OLX праворуч ──
   Ціна — це чотири-п'ять цифр, а поле тримало пів рядка картки й порожніло праворуч
   від числа. Звужуємо його рівно під число, а звільнене місце віддаємо переходу в
   оголошення OLX: ціну міняють і одразу йдуть міняти її там. Ширина в `ch` — по
   вмісту, а не по колонці: сім знаків тримають і «1 250 000», якщо таке трапиться.
   `flex:0 0` — щоб рядок не розтягнув поле назад, а таблетка стала ОДРАЗУ за ним,
   а не притислась до дальнього краю. */
.wh-pricein{display:flex;align-items:center;gap:8px}
.wh-pricein input{flex:0 0 9ch;min-width:0}
/* ── Рядок цін: поля вирівняні по НИЖНЬОМУ краю ──
   Підписи трьох колонок різної довжини, і «Рекомендована ціна закупки, $» на вужчій
   картці лягає у два рядки. `.lg-f` викладає дітей стовпчиком ЗГОРИ, тож поле під
   довгим підписом з'їжджало на висоту зайвого рядка нижче за сусідні — рядок
   «розлазився». `margin-top:auto` на останньому елементі колонки притискає до низу
   САМЕ ПОЛЕ: підписи лишаються зверху (їх читають як заголовки колонок), а поля
   стоять на одній лінії за будь-якої ширини картки й довжини підпису.
   Селектор із `.lg-f-row`, бо клас `.wh-price` носить ще й число ціни в таблиці
   списку — там ці правила не мають діяти. */
.lg-f-row.wh-price > .lg-f > :last-child{margin-top:auto}
/* І прибираємо ПРИЧИНУ переносу: колонка ціни продажу забирала третину рядка, хоча
   в ній вузьке поле (9ch) + таблетка OLX, а решта ширини стояла порожня — саме її
   бракувало сусідньому підпису на один рядок. `flex:0 1` — не рости, але стискатись
   на вузькому. На телефоні рядок і так один стовпчик — повертаємо повну ширину. */
.lg-f-row.wh-price > .wh-req{flex:0 1 190px}
@media (max-width:900px){.lg-f-row.wh-price > .wh-req{flex:1 1 100%}}
/* Порожня половина рядка. Потрібна там, де поле має лишитись у ту саму ширину, що
   сусіднє над ним («Вага товару, кг» під «Ціною продажу»), а пари йому нема: без
   заглушки flex розтягнув би одиноке поле на весь рядок, і воно виглядало б як
   поле іншого призначення. На телефоні рядок і так один стовпчик — заглушка зайва. */
.wh-fspacer{flex:1 1 150px;min-width:0}
@media (max-width:900px){.wh-fspacer{display:none}}
/* ── «Стікер на сайті» в рядку цін ──
   Колір вибраного стікера приїжджає інлайном (`--stc`, з `wh_stickers()`) і малюється
   ТОВСТОЮ смугою по лівому краю списку: сам вибір — це чотири схожі слова, і без
   кольору картка не показувала б головного — як прапорець виглядатиме на вітрині.
   Смуга, а не заливка всього поля: заливка кольором стікера зробила б із поля
   форми кнопку, а білий текст на оранжевому в списку системного вигляду ще й
   по-різному малюється в різних браузерах. Без стікера смуга прозора — поле
   виглядає рівно як сусідні. */
.wh-stsel{border-left-width:5px !important;border-left-color:var(--stc,transparent) !important}
.wh-stsel[data-st=""]{border-left-width:1px !important}
/* ── Наявність на сайті: один вибір із чотирьох ──
   Радіо, а не галочки: варіанти взаємовиключні за змістом («реальні залишки» і
   «завжди в наявності» разом нічого не означають). Рядки повнорозмірні й
   клікабельні цілком — вибирають їх рідко, зате читають уважно, бо від цього
   залежить, що покупець побачить на вітрині. */
.wh-avail{display:flex;flex-direction:column;gap:4px;margin:10px 0 6px;padding:9px 10px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.wh-avail-t{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin-bottom:2px}
.wh-av{display:flex;align-items:flex-start;gap:9px;padding:5px 7px;border-radius:8px;
  font-size:.86rem;line-height:1.35;cursor:pointer;border:1px solid transparent}
.wh-av[hidden]{display:none}
.wh-av:hover{background:var(--panel)}
.wh-av input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--green);flex:0 0 auto}
.wh-av.on{background:var(--panel);border-color:var(--green-l)}
.wh-av.on span{font-weight:700;color:var(--green-d)}
/* Четвертий варіант («не експортувати залишки») — єдиний, що ТИМЧАСОВО знімає товар
   з вітрини, тож вибраним він червоний, а не зелений: три перші відповідають «як
   саме показувати», цей — «не показувати зовсім». Зелена галочка на ньому читалася б
   як «усе гаразд», хоча стан навпаки — товар не продається, поки прапорець стоїть. */
.wh-av[data-mode="hidden"] input{accent-color:var(--danger)}
.wh-av[data-mode="hidden"].on{border-color:#fecaca;background:#fef2f2}
.wh-av[data-mode="hidden"].on span{color:var(--danger)}

/* Галочка «мінімальні залишки» і к-сть — В ОДНОМУ рядку: поле читається як
   продовження фрази, а не як окреме питання під нею. */
.wh-keeprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.wh-keepck{margin:0}
.wh-keepck input{accent-color:var(--green)}
.wh-keepqty{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.wh-keepqty input{width:84px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-weight:700;color:var(--text);background:var(--panel)}
.wh-keepqty input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.wh-keepqty[hidden]{display:none}
/* Підпис поля разом із зірочкою — один рядок-елемент усередині .lg-f (той викладає
   дітей стовпчиком, тож голий span ставав окремим рядком під назвою). */
.wh-lbl{display:inline-flex;align-items:baseline;gap:4px}
/* Значок копіювання в підписі (телефон та імʼя покупця в рахунку). `align-items`
   тут `baseline`, а в кнопки без тексту базова лінія — її нижній край, тож вона
   провисала б під підписом; вирівнюємо саме її по центру. Менша за табличну —
   підпис поля дрібний (.82rem), і значок 22px переважив би сам напис. */
   Видимість як у картці: ховати її до наведення нема від чого — рядка таблиці,
   на який наводять, у формі немає взагалі. */
.wh-lbl .t2cp{flex:none;align-self:center;width:18px;height:18px;margin-left:1px;opacity:.7}
.wh-act{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.wh-act .lg-spacer{flex:1}

/* Зона вибору файлів. Клікабельна вся площа (це <label>), плюс перетягування. */
.wh-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:2px dashed var(--line);border-radius:12px;padding:18px;cursor:pointer;
  background:var(--bg);transition:border-color .15s,background .15s}
.wh-drop:hover,.wh-drop.over{border-color:var(--green);background:#f0fdf4}
.wh-drop input{display:none}
/* Другий шлях завантаження — по прямому посиланню. Кнопка ПІД зоною перетягування,
   а не в ній: зона — це <label>, і будь-яка кнопка всередині відкривала б ще й
   діалог вибору файлів. На всю ширину, щоб читалась як рівноцінний варіант. */
.wh-urlbtn{width:100%;margin-top:8px}
.wh-urlta{padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.86rem;color:var(--text);background:#fff;resize:vertical;
  min-height:76px;width:100%;box-sizing:border-box}
.wh-urlta:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Попередження про збереження картки — не «примітка серед приміток»: саме воно
   пояснює, чому сторінка зараз перезавантажиться. */
.wh-urlwarn{background:#fffbeb;border:1px solid #fde68a;border-radius:9px;
  padding:8px 10px;color:#92400e}
.wh-drop-t{font-weight:700}
.wh-drop-s{color:var(--muted);font-size:.85rem}
.wh-new-h{margin:14px 0 8px;font-weight:700;font-size:.9rem}

/* ── Шапка галереї: назва + стрілка «забрати все» ──
   Стрілка стоїть ОДРАЗУ за назвою, а не край картки: це дія над самим блоком
   («усі фото звідси»), і притиснута до правого поля вона читалась би як службова
   іконка картки на кшталт згортання. Розмір — як у `.wh-kitdl` у шапці набору:
   обидві роблять одне й те саме, лише над різними наборами картинок, і різні за
   виглядом вони натякали б на різні дії.
   `margin-bottom` у `.card-title` гасимо — відступ тепер тримає сам рядок. */
.wh-gal-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wh-gal-h .card-title{margin:0}
.wh-galdl{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);color:var(--muted);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
.wh-galdl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wh-galdl:hover,.wh-galdl:focus-visible{color:#2563eb;border-color:#93c5fd;background:#eff6ff}

/* Сітка фото. Картка фото = прев'ю + дві позначки під ним; головне фото
   виділяється зеленою рамкою, помічене на видалення — гасне.
   Рівно ДВІ плитки в ряд (`repeat(2,…)`, а не auto-fill): колонка вузька, і з
   автопідбором у неї влазила одна плитка на рядок — галерея ставала стовпчиком
   на два екрани, хоча дивляться в неї саме щоб охопити всі фото разом. */
.wh-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.wh-ph{position:relative;border:2px solid var(--line);border-radius:10px;padding:6px;
  background:var(--panel);display:flex;flex-direction:column;gap:3px}
/* Рамка прев'ю — ФІКСОВАНА, під звичайне фото товару 620×500 (`aspect-ratio`), а
   всередині `contain`: знімок видно ЦІЛКОМ, а не вирізаний по центру. Раніше тут
   стояв `cover` з жорсткою висотою, і від фото лишалась смуга посередині — по ній
   не впізнати ні ракурс, ні комплектацію.
   Квадратні (1000×1000) і будь-які інші пропорції рамку НЕ ламають: вони просто
   лягають у неї з полями по боках — сітка від цього не розʼїжджається. */
.wh-ph img{width:100%;aspect-ratio:620/500;height:auto;object-fit:contain;border-radius:6px;
  background:var(--bg);display:block}
.wh-ph.is-main{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.wh-ph.is-del{opacity:.4}
.wh-ph-r,.wh-ph-c,.wh-ph-d{display:flex;align-items:center;gap:5px;font-size:.78rem;
  color:var(--muted);cursor:pointer}
.wh-ph-r{font-weight:700;color:var(--text)}
.wh-ph-r input,.wh-ph-c input,.wh-ph-d input{width:14px;height:14px;margin:0;accent-color:var(--green)}
.wh-ph-d input{accent-color:var(--danger)}
.wh-ph-i{font-size:.7rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-ph-x{position:absolute;top:4px;right:4px;border:0;border-radius:6px;cursor:pointer;
  background:rgba(15,23,42,.6);color:#fff;font-size:.75rem;line-height:1;padding:4px 6px}
.wh-ph-x:hover{background:var(--danger)}

/* ── Фільтри в картці товару ──
   Групи згорнуті: розгорнутий перелік усіх фільтрів — це екран галочок, з якого
   для конкретного товару потрібні одиниці. Заголовок групи — <button>, бо він і
   є дією (згорнути/розгорнути), а не підписом. */
.wh-filt{margin-top:0;display:flex;flex-direction:column;min-height:0}
/* Перелік фільтрів більше не має ВЛАСНОЇ прокрутки: тепер скролиться вся колонка
   (.wh-cols>.card), і два вкладені скроли давали б два повзунки поруч. */
.wh-fgrid{display:flex;flex-direction:column;gap:7px;padding-right:4px}
/* ── Що вже позначено на товарі — переліком НАД групами ──
   Груп два десятки, частина згорнута: щоб побачити повний набір товару, доводилось
   розкривати їх по одній. Один рядок на значення («Фільтр: значення»), ✕ знімає
   галочку. Наповнює блок скрипт із тих самих галочок — розійтись вони не можуть. */
/* Липкий у межах своєї колонки (вона й так скролиться сама): перелік значень
   довгий, і догорнувши до низу груп, вибір мусить лишатись перед очима — саме
   заради «не забути, що вже поставив» блок і зроблено. Власна стеля висоти — щоб
   на десятку галочок він не з'їв колонку цілком. */
/* `flex:0 0 auto` тут ОБОВʼЯЗКОВЕ, і саме через власну прокрутку. Колонка фільтрів —
   flex-стовпчик з визначеною висотою (`--wh-colh`), а елемент з `overflow:auto` має
   автоматичний мінімальний розмір НУЛЬ — тобто стискається до нічого, коли сусід
   (`.wh-fgrid`, у нього min-height:auto) стискатись відмовляється. Саме так блок
   «Вибрано» й перетворювався на смужку в один рядок із власним повзунком, у яку
   налазила перша група. Стеля 34vh лишається — але тепер вона стеля, а не примха
   розкладки. */
.wh-fsel{position:sticky;top:0;z-index:2;flex:0 0 auto;
  margin:0 0 10px;padding:9px 10px;border:1px solid var(--green-l);border-radius:11px;
  background:#f0fdf4;max-height:34vh;overflow-y:auto}
.wh-fsel[hidden]{display:none}
.wh-fsel-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--green-d);margin-bottom:6px}
.wh-fsel-n{background:var(--green);color:#fff;border-radius:999px;padding:0 7px;
  font-size:.72rem;letter-spacing:0}
.wh-fsel-b{display:flex;flex-direction:column;gap:4px}
.wh-fsel-r{display:flex;align-items:baseline;gap:6px;background:var(--panel);
  border:1px solid #bbf7d0;border-radius:8px;padding:3px 4px 3px 8px;font-size:.78rem}
.wh-fsel-r b{flex:0 0 auto;color:var(--muted);font-weight:700}
.wh-fsel-r b::after{content:':'}
.wh-fsel-r span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;color:var(--green-d)}
.wh-fsel-x{flex:0 0 auto;border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:.8rem;line-height:1;padding:2px 5px;border-radius:5px;font-family:inherit}
.wh-fsel-x:hover{background:#fef2f2;color:var(--danger)}
.wh-fg{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--bg)}
.wh-fg[hidden]{display:none}
.wh-fg.open{border-color:var(--green-l);background:var(--panel)}
/* Фільтр з умовою показу — пунктиром: видно, що він тут не завжди. */
.wh-fg.dep{border-style:dashed}
.wh-fg-h{display:flex;align-items:center;gap:6px;width:100%;padding:0;border:0;background:none;
  font:inherit;font-weight:800;font-size:.86rem;color:var(--text);text-align:left;cursor:pointer}
.wh-fg-ar{font-style:normal;color:var(--muted);flex:0 0 auto;transition:transform .15s}
.wh-fg.open .wh-fg-ar{transform:rotate(90deg);color:var(--green)}
.wh-fg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-fg-n{flex:0 0 auto;background:var(--green);color:#fff;border-radius:999px;
  padding:0 7px;font-size:.72rem}
.wh-fg-n[hidden]{display:none}
.wh-fg-b{margin-top:6px}
.wh-fg-b[hidden]{display:none}
.wh-fv{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:.84rem;cursor:pointer}
.wh-fv input{width:16px;height:16px;margin:0;accent-color:var(--green)}
.wh-fv.on span{font-weight:700;color:var(--green-d)}

/* ── Закладка «Фільтри» ── */
.wh-flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:16px}
.wh-fbox{display:flex;flex-direction:column;gap:9px}
.wh-fbox.moved,.wh-val.moved{box-shadow:0 0 0 2px var(--green-l)}
.wh-fbox-h{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
/* Назви + збереження — одним стовпчиком, кнопка на всю ширину колонки: це головна
   дія картки, і поруч із червоним «Видалити фільтр» вона мусить читатись першою. */
.wh-fbox-n{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:7px}
.wh-fnames{display:flex;gap:7px;flex-wrap:wrap}
.wh-fsave{width:100%}
.wh-fbtns{flex:1 1 100%;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wh-fname{flex:1 1 140px;min-width:0;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-weight:700;color:var(--text);background:var(--panel)}
.wh-fname:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}

/* Стрілки порядку показу (фільтрів і значень) — навмисно дрібні: ними
   користуються раз при заведенні, а місце в рядку значення на вагу золота. */
.wh-ord{display:inline-flex;flex-direction:column;gap:2px;flex:0 0 auto}
.wh-ordb{border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;
  font-size:.62rem;line-height:1;padding:1px 5px;border-radius:4px}
.wh-ordb:hover{border-color:var(--green);color:var(--green-d);background:#f0fdf4}

/* Значення — ОДНЕ НА РЯДОК і дрібним шрифтом: у стрічку вони зливались, і в
   фільтрі на два десятки значень знайти потрібне очима було нічим. */
.wh-vals{display:flex;flex-direction:column;gap:3px}
.wh-val{display:flex;align-items:center;gap:5px;background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:2px 5px 2px 8px;font-size:.75rem}
.wh-val-ua{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-val-sp{flex:1}
.wh-val-n{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:0 6px;font-size:.68rem;color:var(--muted)}
.wh-val-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.8rem;
  line-height:1;padding:2px 4px;border-radius:5px}
.wh-val-x:hover{background:#fef2f2;color:var(--danger)}
.wh-vadd{display:flex;gap:7px;margin-top:auto}
.wh-vadd input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;color:var(--text);background:var(--panel)}
.wh-vadd input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}

@media (max-width:900px){
  /* Одна колонка: на телефоні поля й фото поруч дають по 160px на кожну —
     нечитабельно обом. */
  .wh-cols,.wh-cols.has-kit{grid-template-columns:1fr}
  /* В один стовпчик картки йдуть підряд — обмежувати кожну висотою екрана тут
     означало б чотири маленькі вікна з власними скролами замість сторінки. */
  .wh-cols>.card,.wh-cols>.wh-galcol{max-height:none}
  .wh-galcol>.card{overflow-y:visible}
  .wh-form{margin-bottom:0}
  .wh-head{align-items:stretch}
  .wh-hact{width:100%}
  .wh-find{flex:1;min-width:0}
  .wh-findw{flex:1;min-width:0}
  .wh-find input{flex:1;min-width:0}
  /* На дотику наведення нема — іконка копіювання лишається видимою завжди, інакше
     на телефоні її не існує. */
  .wh-cp{opacity:.75}
  /* Таблиця списку широка. Ховаємо службові колонки, лишаючи те, за чим товар
     упізнають рукою: фото, назву з артикулом, ціну, наявність, позначки фільтрів.
     ⚠ Правило адресує колонки НОМЕРОМ — додаючи колонку, номери треба перерахувати.
     Порядок колонок (11, артикул живе В КОЛОНЦІ НАЗВИ — своєї нема):
     1 фото · 2 назва+артикул · 3 ціна · 4 наявність · 5 фільтри · 6 назва RU ·
     7 SEO · 8 текст · 9 OLX/Prom · 10 Min (мін. залишок) · 11 дії.
     Ховаємо 7 і 8 (SEO і текст) — їх однаково правлять з великого екрана.
     ⚠ І ОБОВʼЯЗКОВО `:not(.wh-needtbl)`: таблиця дефіциту має ті самі класи, але
     власний набір колонок — без винятку правило зрізало б їй «Мінімум». */
  .wh-tbl:not(.wh-needtbl) th:nth-child(7),.wh-tbl:not(.wh-needtbl) td:nth-child(7),
  .wh-tbl:not(.wh-needtbl) th:nth-child(8),.wh-tbl:not(.wh-needtbl) td:nth-child(8){display:none}
  .wh-modes{gap:6px}
  .wh-mode{padding:5px 10px 5px 8px;font-size:.82rem}
  .wh-flist{grid-template-columns:1fr}
  /* Стовпчик підбору стає блоком НАД списком і згортається цілком (заголовок —
     кнопка): на телефоні поруч із таблицею йому просто нема ширини, а розгорнутий
     він відсунув би сам список за екран. */
  .wh-lay{grid-template-columns:1fr}
  .wh-side{position:static;max-height:none}
  .wh-side-t{cursor:pointer}
  .wh-side-t::after{content:'▾';color:var(--muted);font-size:.8rem}
  .wh-side.closed .wh-side-t::after{content:'▸'}
  .wh-side.closed .wh-side-b{display:none}
  .wh-side-b{max-height:56dvh}
}

/* ── Спливаючі повідомлення (правий НИЖНІЙ кут) ──
   Заміна рядку `.lg-flash` у складі: той стояв У ПОТОЦІ сторінки, тож після кожного
   збереження вміст з'їжджав на його висоту (сторінка сіпалась), а сам напис висів,
   поки його не перегорнеш. Тут повідомлення нікуди не зсуває сторінку, а успіх
   гасне сам — смужка знизу показує, скільки лишилось.
   Кут САМЕ НИЖНІЙ: угорі вікно накривало ряд закладок і заголовок сторінки — тобто
   рівно те місце, куди дивишся одразу після збереження, — і кнопку «Зберегти зміни»
   в тому ж ряду. Внизу праворуч воно на очах, але нічого не затуляє.
   Від висоти меню розташування більше не залежить — `--t2-navh` тут не потрібне. */
.toasts{position:fixed;right:16px;bottom:16px;z-index:40;
  display:flex;flex-direction:column;gap:9px;width:min(400px,calc(100vw - 32px));
  pointer-events:none}
.toast{position:relative;overflow:hidden;pointer-events:auto;display:flex;
  align-items:flex-start;gap:10px;padding:11px 12px 14px;border-radius:11px;
  font-size:.9rem;line-height:1.4;box-shadow:0 10px 30px rgba(15,23,42,.16);
  animation:t2in .22s ease-out}
.toast.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d)}
.toast.err{background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}
.toast-t{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
/* Посилання ВСЕРЕДИНІ повідомлення (див. `wh_msg_html`): «артикул зайнятий товаром
   №5» без переходу в той товар — половина відповіді. Підкреслене й окремим рядком,
   бо колір тексту повідомлення вже несе сенс (червоний = помилка) і фарбувати
   посилання в інший означало б два сигнали в одному рядку. */
.toast-a{display:inline-block;margin-top:4px;text-decoration:underline;font-weight:800}
.toast-a:hover{text-decoration:none}
.toast-x{flex:0 0 auto;padding:2px 4px;border:0;border-radius:6px;background:none;
  color:inherit;font:inherit;font-size:.95rem;line-height:1;opacity:.55;cursor:pointer}
.toast-x:hover{opacity:1;background:rgba(15,23,42,.08)}
/* Смужка = зворотний відлік до згасання. Тримається на animation, а не на таймері в
   JS: наведення мишею ставить її на паузу, і повідомлення чекає, поки дочитають. */
.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;
  opacity:.45;transform-origin:left center;animation:t2bar 5s linear forwards}
.toast:hover .toast-bar{animation-play-state:paused}
.toast.out{animation:t2out .25s ease-in forwards}
@keyframes t2in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes t2out{to{opacity:0;transform:translateX(20px)}}
@keyframes t2bar{to{transform:scaleX(0)}}
@media (max-width:900px){
  .toasts{right:10px;left:10px;width:auto;bottom:10px}
}

/* ── Кнопка «скопіювати» — ОДИН значок на всю панель (`t2_copy_btn()`) ──
   Іконка двох аркушів без підпису: кнопка стоїть упритул до значення, і слово
   «копіювати» поруч важило б більше за те, що копіюють, а в таблиці з півсотні
   рядків ще й з'їдало б колонку. Бліда, поки на рядок не навели, — двадцять
   яскравих іконок поспіль читались би як окремий стовпчик.
   Стилі ті самі, що в списку товарів (`.wh-cp`, звідки іконка й прийшла); той клас
   лишився зі своїми обробниками в `warehouse` і сюди не втручається. */
.t2cp{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:22px;height:22px;margin-left:5px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer;opacity:.45;transition:opacity .12s}
.t2cp svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
tr:hover .t2cp,.t2cp:focus-visible{opacity:1}
.t2cp:hover{background:var(--bg);color:var(--green-d);opacity:1}
/* Поза таблицею (картка, заголовок) ховати її нема від чого — рядка, на який
   наводять, там немає взагалі. */
.card .t2cp,.page-head .t2cp{opacity:.7}
/* Галочка замість аркушів на секунду — підтвердження на самій кнопці. */
.t2cp.ok{opacity:1;color:var(--green);background:#f0fdf4}
.t2cp.ok svg{display:none}
.t2cp.ok::after{content:'✓';font-size:.85rem;font-weight:700}

/* ── Облік товарів: доповнення (двомовні фільтри, модалки переліків) ── */

/* ── Перелік фільтрів товару в модалці (клік по числу в колонці «Фільтри») ──
   ТАБЛИЦЯ «параметр → значення», рядок на фільтр. Раніше це були картки із
   заголовком і таблетками під ним: назва фільтра і його значення стояли ОДНЕ ПІД
   ОДНИМ, і на десятку фільтрів вікно читалось суцільною купою — око не мало за що
   зачепитись. Два стовпці дають ту саму інформацію рядками, які скануються згори
   вниз за один погляд.
   Вікно — ЧИСТИЙ перегляд: ні назва фільтра, ні значення не клікаються, тож ні
   курсору-пальця, ні підсвітки при наведенні тут нема — вони обіцяли б дію,
   якої не буде. */
.wh-vlist{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto}
.wh-vtbl{width:100%;border-collapse:collapse;font-size:.88rem}
.wh-vtbl th{width:38%;text-align:left;vertical-align:top;padding:7px 10px 7px 0;
  font-weight:800;font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--line)}
.wh-vtbl td{vertical-align:top;padding:7px 0;border-bottom:1px solid var(--line)}
.wh-vtbl tr:last-child th,.wh-vtbl tr:last-child td{border-bottom:0}
/* Значення — кожне з нового рядка всередині своєї клітинки: у стрічку через кому
   довгі значення («18-20В акумуляторна») зливались би в суцільний текст. */
.wh-vitem{display:flex;align-items:baseline;gap:6px;font-size:.88rem;color:var(--text);
  font-weight:700;padding:1px 0}
.wh-vitem i{font-style:normal;color:var(--danger);font-size:.72rem;font-weight:700}

/* Список «зайнятих» товарів у модалці заборони видалення */
.wh-uselist{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow-y:auto}
.wh-useitem{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;background:var(--bg);font-size:.9rem}
.wh-useitem:hover{border-color:var(--green);background:#f0fdf4}
.wh-useitem span{color:var(--muted);font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Позначка «фільтр на товарах» біля кнопки видалення */
.wh-fuse{font-size:.78rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
/* Друга причина заборони — фільтр/значення є умовою показу іншого фільтра.
   Фіолетовим, як і сам блок умов на картці: одна причина — один колір. */
.wh-fuse-d{background:#faf5ff;border-color:#e9d5ff;color:var(--violet-d)}
/* Кнопка видалення, поки видаляти не можна: сіра й «вимкнена» на вигляд, але
   клікабельна — саме клік пояснює, що тримає фільтр. Тому не `disabled`. */
.btn.is-off{background:var(--bg);border-color:var(--line);color:var(--muted);cursor:help}
.btn.is-off:hover{background:#f1f5f9;border-color:var(--line);color:var(--muted)}
/* Фільтр-споживач у списку модалки — тим же фіолетовим, що й решта умов */
.wh-usedep{border-color:#e9d5ff;background:#faf5ff}
.wh-usedep:hover{border-color:var(--violet);background:#f5f3ff}
.wh-usedep span{font-family:inherit;color:var(--violet-d)}

/* Двомовні значення: UA основне, RU сірим поруч — і лише коли він ІНШИЙ (за
   правилом «нема `|` — одне на обидві мови» більшість значень збігаються, і
   другий такий самий напис лише подвоїв би рядок). */
.wh-fname-ru{font-weight:400;color:var(--muted)}
.wh-val-ru{font-style:normal;color:var(--muted);font-size:.68rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wh-val-e{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.75rem;
  line-height:1;padding:2px 4px;border-radius:5px}
.wh-val-e:hover{background:#eef2ff;color:var(--violet)}

/* ── Зв'язки фільтрів (умова показу) ──
   Галочки лежать у розмітці кожної картки й кожного значення завжди, а режим
   «Зв'язки» лише показує їх: домальовувати їх скриптом у сотні місць означало б
   тримати другу, паралельну до серверної, розмітку. */
.wh-lk{display:inline-flex;align-items:center;flex:0 0 auto}
.wh-lk[hidden]{display:none}
.wh-lk input{width:16px;height:16px;margin:0;accent-color:var(--violet);cursor:pointer}
.wh-lk-f input{width:18px;height:18px}
body.wh-linking .wh-fbox.is-linking{outline:2px solid var(--violet);outline-offset:2px}
body.wh-linking .wh-flist{padding-bottom:76px}
/* Смуга режиму — внизу екрана: галочки в цей час стоять по всіх картках, і
   кнопка збереження має бути видима, куди б людина не догорнула. */
.wh-lkbar{position:fixed;left:0;right:0;bottom:0;z-index:115;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--panel);
  border-top:2px solid var(--violet);box-shadow:0 -6px 20px rgba(15,23,42,.14)}
.wh-lkbar[hidden]{display:none}
.wh-lkbar-t{font-size:.85rem}
.wh-lkbar .lg-spacer{flex:1}
/* Умова показу на картці фільтра */
.wh-dep{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:.74rem;
  background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;padding:5px 8px}
.wh-dep.none{background:none;border-color:transparent;padding:0}
.wh-dep-i{background:var(--panel);border:1px solid #e9d5ff;border-radius:999px;
  padding:1px 8px;color:var(--violet-d)}
.wh-val.busy{border-style:dashed}
/* Значення-умова: лічильник товарів може бути 0, і без цієї позначки «не
   видаляється» виглядало б збоєм, а не свідомою забороною. */
.wh-val-d{background:#faf5ff;border-color:#e9d5ff;color:var(--violet-d)}
/* Хрестик зайнятого значення не обіцяє видалення: він сірий і без червоного
   ховера — натиснути можна, але це показ «де саме використовується». */
.wh-val.busy .wh-val-x{opacity:.55;cursor:help}
.wh-val.busy .wh-val-x:hover{background:#f1f5f9;color:var(--muted)}

/* ── Картка товару: назви, галочки, комплекти ── */

/* Назва — вдвічі вища за звичайне поле: повні назви товарів в один рядок не
   влазять, і кінець набраного доводилось прокручувати всередині поля. */
.wh-nm{min-height:78px}
/* Галочки картки (постійна наявність, комплект, частина комплекта) */
.wh-ck{margin:6px 0}
.wh-ck input{accent-color:var(--green)}
.wh-kithint{margin:2px 0 0;color:var(--muted)}

/* Блок «Комплект»: два незалежні переліки — з чого товар складається і в які
   набори входить. Показується лише під відповідною галочкою — ОКРЕМОЮ КОЛОНКОЮ
   в тому ж ряду (див. .wh-cols.has-kit): блоком під карткою товару він робив
   ліву колонку вищою за екран, і вся картка починала прокручуватись.
   Перелік скролиться ВСЕРЕДИНІ себе — сторінка від довгого набору не тягнеться. */
.wh-kits[hidden],.wh-kitgrp[hidden]{display:none}
.wh-kits{display:flex;flex-direction:column;min-height:0}
/* Заголовок блоку = підпис (той самий, що й у галочці) + кнопка додавання в тому
   ж рядку. Розділової лінії між двома переліками НЕМА: видимий завжди один, і
   `.wh-kitgrp+.wh-kitgrp` малював її навіть коли перший перелік display:none —
   тобто лінію між блоком і порожнечею. */
.wh-kit-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wh-kit-h .btn{margin-left:auto}
/* Стрілка «картинка набору для OLX» — ОДРАЗУ за кнопкою додавання: обидві дії
   про склад набору, різні лише напрямком (одна його наповнює, друга виносить
   назовні). Тому й розмір як у `.btn-sm` поруч, а не як у дрібних стрілок
   галереї: там іконка службова й тьмяна, а тут це самостійна дія в шапці блоку.
   `margin-left:0` гасить `gap` до кнопки наполовину — пара мусить читатись як
   пара, а не як дві окремі кнопки в одному ряду. */
.wh-kitdl{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-left:-5px;padding:0;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);color:var(--muted);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
.wh-kitdl[hidden]{display:none}
.wh-kitdl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wh-kitdl:hover,.wh-kitdl:focus-visible{color:#2563eb;border-color:#93c5fd;background:#eff6ff}
.wh-kitlist{display:flex;flex-direction:column;gap:7px}
/* Рядок товару в наборі: мініатюра + артикул/назва. Мініатюра тут головна —
   артикули сусідніх моделей відрізняються однією цифрою (3404-20 / 3453-20). */
.wh-kit{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:6px 8px}
.wh-kit img{width:46px;height:46px;object-fit:cover;border-radius:7px;background:var(--panel);
  border:1px solid var(--line);flex:0 0 auto}
.wh-kit img.noph{visibility:hidden}
.wh-kit-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:.8rem}
.wh-kit-t b{font-weight:800}
.wh-kit-t span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Рядок «артикул + ціна продажу + залишок». Обгортка сама СКИДАЄ успадковані від
   `.wh-kit-t span` правила показу (сірий, обрізка): вони для назви, а тут два
   самостійні шматки. Перенос дозволено: бейдж тепер несе ще й наявність
   («2 099 грн, в наявності 10 шт»), а колонка комплекту вузька — без переносу
   довгий бейдж ліз би за її край. */
.wh-kit-sku{display:flex;align-items:baseline;gap:7px;overflow:visible;color:var(--text);
  flex-wrap:wrap}
/* Ціна й залишок — одним бейджем, а не просто числом: у рядку вже є артикул жирним і
   назва сірим, і третій текст без власної форми зливався б із ними. Одним, а не двома
   поруч, бо це одна фраза про позицію, а не два незалежні показники. */
.wh-kit-pr{flex:0 1 auto;min-width:0;font-style:normal;font-size:.72rem;font-weight:700;
  color:var(--green-d);background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;
  padding:1px 7px;white-space:nowrap}
/* Порожній залишок робить бейдж червоним ЦІЛКОМ, разом із ціною: питання до рядка —
   «чи можу я це взяти зараз», і зелена таблетка з написом «нема в наявності»
   відповідала б на нього двома різними знаками одночасно. */
.wh-kit-pr.out{color:var(--danger);background:#fef2f2;border-color:#fecaca}
/* ── Частка собівартості позиції ── */
.wh-kit-sh{flex:0 0 auto;display:flex;align-items:center;gap:3px;font-size:.76rem;
  color:var(--muted)}
.wh-shi{width:52px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:.8rem;font-weight:700;text-align:right;color:var(--text)}
.wh-shi:focus{outline:none;border-color:var(--green-l);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
/* Підсумок + кнопка збереження часток. Стоїть під самим списком, бо відповідає на
   питання про НЬОГО: чи розписані вже всі 100%. */
.wh-shr{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.wh-shr[hidden]{display:none}
.wh-shr-sum{font-size:.8rem;font-weight:700;color:var(--muted)}
.wh-shr-sum.is-full{color:var(--green-d)}
.wh-shr-sum.is-over{color:var(--danger)}
.wh-shr .btn{align-self:stretch}
.wh-kit-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.85rem;
  line-height:1;padding:4px 6px;border-radius:6px;flex:0 0 auto}
.wh-kit-x:hover{background:#fef2f2;color:var(--danger)}
/* Перелік «товар входить у комплекти» тільки читається: рядок — посилання в той
   набір, бо міняти склад можна лише там. */
a.wh-kit:hover{border-color:var(--green);background:#f0fdf4}
.wh-kitro{margin:8px 0 0;font-size:.78rem}
.wh-kitfound{margin:10px 0 0;min-height:24px}
.wh-kit-err{color:var(--danger);font-size:.82rem}
/* ── Список знахідок у вікні комплекту ──
   Пошук іде маскою (артикул пам'ятають неповністю), тож знахідок буває багато.
   Показуємо їх прокруткою рівно на ~5 рядків: обрізати список числом означало б
   ховати частину знайденого, а розгорнути всі — вікно на весь екран.
   64px = висота рядка (46px картинка + падінги + проміжок). */
.wh-kitf-h{font-size:.76rem;color:var(--muted);font-weight:700;margin-bottom:6px}
.wh-kitf-l{display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto;
  padding-right:4px;overscroll-behavior:contain}
/* Рядок, який додати не можна (сам є комплектом) — блідий, з поясненням замість
   кнопки: «нема» і «є, але не годиться» мусять читатись по-різному. */
.wh-kitf.off{opacity:.6}
.wh-kit-off{flex:0 0 auto;font-size:.72rem;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
/* «вже 2×» — позиція в наборі не вперше. Це НЕ заборона (у коробці справді буває
   два однакові акумулятори), тому синім-нейтральним, а не червоним: рядок лишається
   з кнопкою, підказка лише каже, скільки їх там уже. */
.wh-kit-dup{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--violet);
  background:var(--panel);border:1px solid var(--violet);border-radius:999px;
  padding:2px 8px;white-space:nowrap}
/* Стрілки порядку у складі комплекту — ті самі, що й у значень фільтра. */
.wh-kit-ord{margin-left:auto}
.wh-kit-ord .wh-ordb:disabled{opacity:.35;cursor:default}
.wh-kit-ord .wh-ordb:disabled:hover{border-color:var(--line);color:var(--muted);background:var(--panel)}

/* ── Облік товару (?page=stock) і системні налаштування (?page=system) ──
   Наявність тут НЕ поле картки, а підсумок операцій, тому сторінка читається
   згори вниз саме так: підсумки → що можна зробити → що вже робили. */

/* Наявність у списку товарів: посилання в облік. Нуль сірим, але ЧИСЛОМ — «0 шт»
   і «руху ще не було» (прочерк) означають різне, і зливати їх не можна.

   ТАБЛЕТКОЮ, а не підкресленим числом: наявність — головне, за чим ходять у цей
   список, і в ряду з ціною та мінімальним залишком вона мусить читатись першою.
   Доти таблетку носив мінімальний залишок (він тепер голе число, `.wh-min`), і
   виходило навпаки: межа, вписана колись «на майбутнє», виглядала помітніше за
   реальний залишок. Колір лишається кодуванням стану: зелена — є, червона — нуль. */
.wh-qty{display:inline-block;background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d);
  border-radius:999px;padding:2px 9px;font-size:.82rem;font-weight:700;white-space:nowrap}
.wh-qty:hover{border-color:var(--green)}
.wh-qty.zero{background:#fef2f2;border-color:#fecaca;color:var(--danger)}
.wh-qty.zero:hover{border-color:var(--danger)}
/* Окремого вигляду для «руху ще не було» більше НЕМА (був `.wh-qty.none` — сірий
   прочерк без таблетки). Колонка відповідає на питання «скільки зараз на складі»,
   і на нього завжди є відповідь числом: не заводили — теж нуль. Прочерк серед
   червоних нулів читався як третій, невідомий стан. Пояснення живе в підказці. */
/* Віртуальна наявність — товар доступний ЧЕРЕЗ комплект-донор (свого залишку нема,
   але набір на складі є й розбирається). Пунктир і курсор `help` кажуть, що за
   знаком стоїть пояснення — підказка називає самі набори з їх залишком.
   Біля галочки стоїть число «в N к-т» — сумарний залишок наборів-донорів, тобто
   скільки штук звідти реально дістати. Гола галочка казала «є», але мовчала про
   кількість, а колонка саме про кількість і питає. Підпис дрібніший і блідіший за
   саму галочку: головне тут — що товар доступний, а «через набір» — уточнення. */
.wh-qty.virt{cursor:help;border-style:dashed}
.wh-qty-kt{font-size:.75rem;font-weight:700;opacity:.75}
/* Таблетка наявності — тепер КНОПКА (відкриває вікно «наявність + посилки»), тож
   скидає власні поля <button> і лишається на вигляд тією самою таблеткою. */
.wh-qtyb{font-family:inherit;line-height:inherit;cursor:pointer}
/* Нульовий залишок, під який щось ЇДЕ, показує число посилень у дорозі замість «0 шт».
   Колір таблетки лишається червоним — продати зараз усе одно нема чого, — а сам напис
   дрібніший: це відповідь на друге питання, і перебивати нею перше не можна. */
.wh-qty-tr{font-size:.75rem;font-weight:700}
/* Мінімальний залишок у СПИСКУ — голим числом кольору тексту: це не сигнал, а
   вписана межа, і поки її не перетнули, вона нічого не повідомляє. Як ціна поруч,
   тільки не жирним — ціну правлять, а межу лише звіряють. На сторінці дефіциту та
   сама межа лишається таблеткою (`.wh-keep`): там вона саме сигнал. */
.wh-min{color:var(--text);font-size:.9rem;white-space:nowrap}
/* Те саме число, але клікабельне: веде в «Товари в дефіциті» за артикулом рядка
   (нова вкладка) — тобто до магазинів, де це докуповують. Знак переходу —
   ПУНКТИР, що проступає на наведенні, а не постійне підкреслення посилання:
   колонка числова, і суцільна лінія під кожним числом читалась би як частина
   самого числа. Колір при цьому лишається текстовим — зелене посилання в ряду
   з наявністю поруч читалось би як «усе гаразд». */
.wh-minl{color:var(--text);border-bottom:1px dashed transparent}
.wh-minl:hover{color:var(--green-d);border-bottom-color:var(--green-l)}

/* Ціна в списку правиться на місці — подвійним кліком по числу (див. `wh-c-price`
   в `warehouse/index.php`). Курсор `cell` і пунктир, що проступає на наведенні,
   кажуть, що клітинка жива: без жодного знаку правку знайшли б хіба випадково, а
   постійний пунктир зробив би кожне число схожим на посилання. */
.wh-c-price{cursor:cell}
.wh-price{border-bottom:1px dashed transparent}
.wh-c-price:hover .wh-price{border-bottom-color:var(--line)}
/* «грн» біля кожного числа — приглушено й дрібніше за саму ціну: одиниця в усіх
   рядках однакова, і повним контрастом вона змагалась би з числом, заради якого в
   колонку й дивляться. У шапці «грн» більше нема — вона їде з очей, поки таблицю
   гортають усередині коробки, а ціни зчитують по рядку. */
.wh-cur{color:var(--muted);font-size:.82rem}
/* Поле стає РІВНО на місце числа й такої ж ширини, як клітинка: інакше при відкритті
   рядок сіпався б, а сусідні колонки — їхали вбік. Вирівняне праворуч, як і число
   під ним, щоб цифри не стрибали в момент заміни. */
.wh-pinp{width:100%;max-width:110px;padding:3px 6px;border:1px solid var(--green);
  border-radius:7px;font:inherit;font-weight:700;text-align:right;color:var(--text);
  background:var(--panel);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.wh-pinp:focus{outline:none}
/* Поки відповідь у дорозі — поле згасле й не приймає другого Enter: подвійне
   збереження тієї самої ціни лишило б у базі гонку двох запитів. */
.wh-pinp[disabled]{opacity:.6;cursor:progress}

/* Попередження про незаповнені налаштування — над підсумками: без курсу й тарифу
   собівартість не порахується, і дізнатись про це треба ДО набору накладної. */
.wh-stwarn{margin:0 0 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:10px 14px;font-size:.88rem;color:#92400e}
.wh-stwarn a{color:var(--green-d);font-weight:700;white-space:nowrap}

/* Підсумки плитками. auto-fit, а не 4 фіксовані колонки: на вузькому екрані
   плитки мають перелаштуватись у два ряди, а не стиснутись до нечитабельних. */
/* Знімок + плитки одним рядком. Мініатюра — окремим flex-елементом ПОРУЧ із сіткою,
   а не її клітинкою: у сітці вона зайняла б повні 210px (мінімум колонки) і читалась
   би як шоста плитка. Розмір фіксований, під висоту плитки: на вузькому екрані
   плитки перебудовуються в кілька рядів, і `align-self:stretch` розтягнув би знімок
   у смугу на пів екрана. */
/* Знімок і всі п'ять плиток — ОДНИМ рядом. Двома вони ставали з обох боків: збоку
   знімок забирав у ряду чисел свої 112 px, а винесений над ними — цілий ярус сторінки.
   Тож справа була не в тому, ДЕ стоїть знімок, а в тому, що сам ряд не вміщався:
   п'ять плиток по 210 px вимагали 1098 px тільки на себе. Тепер плитки стиснуті
   (мінімум 165 px, менші відступи й число), і на звичайному екрані ряд один.
   Вужче — `auto-fit` переносить сам, і це вже нормально: там ряд у принципі не влазить. */
.wh-strow{display:flex;align-items:stretch;gap:10px}
.wh-strow .wh-sttiles{flex:1;min-width:0}
/* Знімок — ПЕРША КЛІТИНКА сітки плиток (вузька колонка 120 px), а не сусід збоку.
   Збоку його висоту задавав увесь блок плиток: п'ять плиток на реальному екрані
   стають у ДВА ряди, і знімок виходив удвічі вищим за плитку. Стала висота полагодила
   це навпаки — знімок став нижчим за плитку. Клітинка сітки рівняється по СВОЄМУ ряду
   (`align-items:stretch` за замовчуванням), тому висота тепер завжди рівно в плитку —
   хай яка ширина екрана й скільки б рядів не набралось. Власної висоти не задаємо. */
.wh-sttiles.with-ph{grid-template-columns:120px repeat(auto-fit,minmax(165px,1fr))}
.wh-stph{position:relative;min-height:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);display:block}
/* `contain`, а не `cover`: тут не плитка-обкладинка, а ВПІЗНАВАННЯ товару («я точно
   того відкрив») — обрізаний по центру кадр лишав від коробки саму середину. Фото
   вписується цілим, пропорції не чіпаємо; поля з боків дає фон рамки. */
.wh-stph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.wh-stph:hover{border-color:var(--green)}
/* Мінімум колонки — 165 px, а не 210: п'ять плиток по 210 просили 1098 px тільки на
   себе, і ряд ламався надвоє ще до того, як до нього додався знімок. Разом із меншими
   відступами й числом (нижче) ряд просить ~870 px — на звичайному екрані він один. */
.wh-sttiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;
  margin-bottom:18px}
.wh-sttile{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.wh-sttile.ok{border-color:#bbf7d0;background:#f0fdf4}
.wh-stt-l{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.25}
/* Число менше (було 1.5rem), але лишається найбільшим на плитці: воно й далі те, заради
   чого сторінку відкривають, — просто ряд із п'яти таких чисел не мусить бути на весь екран. */
.wh-stt-v{font-size:1.3rem;font-weight:800;line-height:1.15}
.wh-stt-v i{font-style:normal;font-size:.9rem;font-weight:700;color:var(--muted)}
.wh-stt-s{font-size:.72rem;color:var(--muted);line-height:1.35}
/* Плитка фінрезультату несе в підписі два-три рядки розкладки — прибираємо
   `white-space` сюрпризи й даємо попередженню про рядки без курсу свій колір. */
.wh-stt-warn{color:#b45309;font-weight:700}

/* Перелік операцій: кнопка-рядок із підписом, що саме вона робить. Підпис тут
   обовʼязковий — «Внесення в базу» без пояснення читається як «зберегти товар». */
.wh-stops{margin-bottom:20px}
.wh-oplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px}
.wh-op{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 14px;
  color:var(--text)}
.wh-op:hover{border-color:var(--green);background:#f0fdf4}
.wh-op-i{flex:0 0 34px;height:34px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800}
.wh-op-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wh-op-t b{font-size:.95rem}
.wh-op-t span{font-size:.78rem;color:var(--muted)}
/* Ще не зроблена операція — видима, але явно неактивна: місце під неї передбачене. */
.wh-op.soon{cursor:default;opacity:.5}
.wh-op.soon:hover{border-color:var(--line);background:var(--bg)}
.wh-op.soon .wh-op-i{background:var(--muted)}

/* Заголовок журналу тримає в собі перемикач зрізу, тож САМ мусить бути рядком:
   `.card-title` — звичайний блок, а `.wh-jmodes` усередині — flex, тобто елемент
   блокового рівня. Без цього таблетки падали під напис і тулились до нього
   впритул (виглядало як налізання). Вирівнювання по ЦЕНТРУ, а не по базовій
   лінії: таблетка вища за напис, і baseline через вкладений flex ставить її
   так, ніби напис підвішений угорі. */
.wh-stjh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  margin-bottom:10px;font-size:1.05rem}
.wh-sttbl td{vertical-align:middle}
/* Розклад витрати одним виразом: «$81,00 + $10,87 = $91,87». Знаки дій — приглушені
   й дрібніші за числа: це розділові знаки виразу, а не його зміст. Перенос дозволено
   (`white-space:normal` перебиває `.wh-c-num`), інакше вираз розпирав би колонку на
   вузькому екрані; самі числа при цьому не рвуться. */
.wh-c-buy{white-space:normal}
.wh-buyx{display:inline-block;white-space:normal;line-height:1.35}
.wh-buyx i{font-style:normal;font-size:.78rem;color:var(--muted);padding:0 1px}
.wh-buyx b{white-space:nowrap}
/* Таблетка виду операції: приходи зелені, майбутні списання будуть червоними —
   рядок має читатись за кольором, а не за текстом у другій колонці. */
.wh-opb{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700}
.wh-opb.in{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green-d)}
/* Розкомплектування — фіолетове, не червоне: набір не зник і не проданий, він
   перетворився на свій вміст. Червоний тут читався б як помилка або списання. */
.wh-opb.unkit{background:#f5f3ff;border:1px solid #ddd6fe;color:#6d28d9}
/* А ОСЬ видалення — саме червоне: це скасована дія, і рядок під нею ні в чому не
   рахується. Тут колір попереджає, а не описує рух товару. */
.wh-opb.del{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
/* Записаний рахунок — СІРИЙ: документ ще нічого не зробив зі складом, це чернетка,
   яка чекає кнопки «Провести». Проведений бере звичайний зелений `in` — кінцевий
   стан, усе зроблено. Кольору тривоги в житті рахунку немає взагалі. */
.wh-opb.draft{background:var(--bg);border:1px solid var(--line);color:var(--muted)}

/* Видалений рядок журналу: лишається на місці (облік мусить пояснюватись), але
   читається як скасований — приглушений, з перекресленими числами. Перекреслюємо
   САМЕ цифри й назви, а не дати видалення: вони — єдине, що в цьому рядку чинне. */
.wh-strow-del{opacity:.6}
.wh-strow-del td{background:#fcfcfd}
.wh-strow-del .wh-c-num,
.wh-strow-del .wh-c-num b{text-decoration:line-through}
.wh-strow-del .wh-c-num .muted{text-decoration:none}
/* Пояснення замість кнопки в колонці дій: чому цьому рядку нема що запропонувати.
   Порожня клітинка на місці, де в сусідів стоїть кнопка, читається як збій, тому
   причина стоїть саме там, де очікували дію. */
.wh-actnote{display:inline-block;font-size:.74rem;line-height:1.3;color:var(--muted);
  max-width:150px}
.wh-actnote.is-lk{color:var(--violet,#7c3aed);text-decoration:none;font-weight:700}
.wh-actnote.is-lk:hover{text-decoration:underline}

/* Кнопка повернення — нейтральна, не зелена: це виправлення промаху, а не нова
   операція, і святкувати її кольором «головної дії» нема чого. */
.wh-strest{white-space:nowrap}
/* А ось «Рахунок №53697» — зелена: у рядку реалізації це ЄДИНА дія, і вона ж
   єдиний вихід на сам документ. Номер не переноситься: розірваний навпіл, він
   перестає бути номером. */
.wh-invbtn{white-space:nowrap}

/* ── Номер документа операції ── */
/* Перша колонка, вузька, і саме КНОПКА, а не посилання: перехід нікуди не веде,
   вікно відкривається на місці — а синій підкреслений текст обіцяв би сторінку. */
.wh-c-doc{width:1%;white-space:nowrap}
.tbl th.wh-c-doc{text-align:left}
.wh-docb{border:1px solid var(--line);background:var(--bg);border-radius:8px;
  padding:3px 8px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer}
.wh-docb:hover{border-color:var(--violet,#8b5cf6);color:#6d28d9;background:#f5f3ff}
/* ── Номер рахунку САМ показує, чи документ доведений до кінця ──
   Зелений із галочкою — проведений (склад списано), сірий — записаний (чернетка,
   праворуч на неї чекає кнопка «Провести»). Це той самий колірний код, що в
   таблетці статусу раніше, просто перенесений на те, з чого рядок починають
   читати: номер стоїть першим, і стан документа має бути видно вже там, а не за
   пів таблиці вправо. Кольору тривоги в житті рахунку немає взагалі. */
.wh-docb.is-posted{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
.wh-docb.is-posted:hover{background:#dcfce7;border-color:var(--green);color:var(--green-d)}
.wh-docb.is-draft{background:var(--bg);border-color:var(--line);color:var(--muted)}
.wh-docb i{font-style:normal;font-weight:900;margin-right:5px}

/* Вікно складу документа: рядки-посилання в товар. Читається згори вниз як історія —
   спершу що знято, потім що внесено (порядок задає сам запит). */
.wh-docbox{max-width:640px}

/* ── Рахунок текстом (вікно з журналу операцій) ──
   Саме `<pre>`: на екрані має бути рівно те, що поїде в буфер обміну, включно з
   переносами. Моноширинний — щоб «x2» і суми стояли стовпчиком і документ читався
   як документ, а не як абзац. */
.wh-itxtbox{max-width:560px}
.wh-itxt{margin:2px 0 12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.82rem;line-height:1.55;color:var(--text);white-space:pre-wrap;
  word-break:break-word;max-height:52vh;overflow:auto}
/* «Копіювати» — ліворуч, як і в формі рахунку: те саме за змістом місце. */
.wh-itxtact .wh-invcp{margin-right:auto}
.wh-doclist{margin-top:10px;max-height:52vh;overflow-y:auto}
/* Колонка дії — під найдовше слово («розкомплектовано»), і вирівнювання по ВЕРХУ:
   під назвою тепер стоїть рядок дат, і центрування підвішувало б підпис усередині. */
.wh-docr{display:grid;grid-template-columns:104px 1fr auto auto;align-items:start;gap:10px;
  padding:8px 4px;border-top:1px solid var(--line);color:var(--text);font-size:.88rem}
.wh-docr:first-child{border-top:0}
.wh-docr:hover{background:#f8fafc}
.wh-docr-o{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--green-d);line-height:1.35}
.wh-docr.out .wh-docr-o{color:#6d28d9}
.wh-docr-n{min-width:0;line-height:1.3}
.wh-docr-n i{color:var(--muted);font-style:normal;font-size:.8rem}
/* Дати рядка — окремим рядком під назвою: «коли документ» + «коли реально в базі».
   Дрібним і сірим, бо це підстава, а не сама відповідь. */
.wh-docr-d{display:block;margin-top:2px;color:var(--muted);font-size:.76rem;font-weight:400}
.wh-docr-q{white-space:nowrap;color:var(--muted);font-size:.82rem;padding-top:1px}
.wh-docr-s{white-space:nowrap;font-weight:700;min-width:72px;text-align:right}
/* Гривня під доларом — тим самим курсом, що записаний в операції (шапка вікна). */
.wh-docr-s i{display:block;color:var(--muted);font-style:normal;font-size:.76rem;font-weight:400}

/* ── Вікно «Посилки з артикулом» (клік по артикулу в списку товарів) ──
   Ширше за звичайну модалку: у рядку чотири поля (номер, опис, отримувач, стадія),
   і в 420px опис перетворювався б на стовпчик із двох слів. Рядок — ПОСИЛАННЯ в
   логістику новою вкладкою, тобто ціль кліку тут одна на весь рядок. */
/* ── Статус рахунку разом з обома його датами ──
   Окремої колонки «Дата» нема: дат у рахунку дві («від якого числа виписаний» і «коли
   провели»), вони не зобов'язані збігатись, а стояли в різних кінцях рядка — і кожна
   така пара читалась як розбіжність. Тут вони одна під одною й підписані, тож питання
   «чому дата 22-го, а проведений 23-го» зникає само.
   Два простих рядки «Підпис: значення» — і жодної таблетки статусу поруч: стан
   документа вже сказаний і наявністю рядка «Проведено», і кольором його номера в
   першій колонці, тож третій спосіб повторити те саме був зайвим. */
.wh-c-st{white-space:nowrap}
.wh-invd{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--text)}
.wh-invd span{display:block}
.wh-invd b{font-weight:700;color:var(--text)}
/* Автор — у дужках і приглушено: він уточнює, ХТО записав, а не що саме сталось. */
.wh-invd i{font-style:normal;color:var(--muted)}
.wh-invd-no{color:var(--muted);font-style:italic}

.wh-prcbox{width:min(640px,100%);max-width:none}
/* Підсумок і є вміст вікна: «на складі N шт» (посилання в облік) і «в дорозі M посилок»
   з НОМЕРАМИ тих посилок під числом. Дві однакові плитки в ряд, а не рядок тексту:
   питання до вікна рівно два й вони рівноправні — «скільки є» і «коли буде», — і
   зведені в речення вони читались би як одне довге уточнення. Під числом або підпис
   (`i` — «нічого не їде»), або самі номери (`a.wh-prcs-go`) з переходом у логістику. */
.wh-prcsum{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.wh-prcs-i{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:1px;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg);
  color:var(--muted);font-size:.8rem;text-decoration:none}
.wh-prcs-i b{font-size:1.05rem;font-weight:800;color:var(--text)}
.wh-prcs-i i{font-style:normal;font-size:.74rem;opacity:.85}
.wh-prcs-i.ok{background:#f0fdf4;border-color:#bbf7d0}
.wh-prcs-i.ok b{color:var(--green-d)}
.wh-prcs-i.no b{color:var(--danger)}
.wh-prcs-i.tr{background:#eff6ff;border-color:#bfdbfe}
.wh-prcs-i.tr b{color:#1d4ed8}
a.wh-prcs-i:hover{border-color:var(--green);background:#ecfdf5}
/* Номер посилки, що їде, — прямо в плитці, посиланням у логістику. Номер моноширинним
   (його звіряють посимвольно й копіюють), під ним дрібним — стадія і скільки вже їде.
   Кількох посилок з одним артикулом буває дві-три, тож вони просто стають одна під
   одну; довшого списку тут бути не може за визначенням — це те, що ще НЕ приїхало. */
a.wh-prcs-go{display:block;margin-top:4px;padding:4px 7px;border-radius:8px;
  background:rgba(255,255,255,.75);border:1px solid #bfdbfe;text-decoration:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  font-weight:700;color:#1d4ed8;overflow-wrap:anywhere}
a.wh-prcs-go:hover{border-color:#1d4ed8;background:#fff}
a.wh-prcs-go span{display:block;margin-top:1px;font-size:.72rem;font-weight:400;
  color:var(--muted);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Рядок під плитками: «шукаємо…», «нічого не знайдено» або посилання в історію. */
.wh-prcnote{margin-top:8px}
.wh-prcempty{padding:8px 4px}

/* ── Другий ярус того ж вікна: «Шукати на eBay» ──
   Відділений рискою, а не просто відступом: питання тут ІНШЕ («де це докупити»),
   ніж угорі («чи воно вже їде»), і без межі другий заголовок читався б як підпис
   до посилок. Форма — та сама `.el-f`, що на сторінці живого пошуку. */
.wh-ebsec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.wh-ebsec .el-f{margin:10px 0 0}
/* У вікні рядок пошуку просить менше, ніж на повній сторінці (там 280 px): інакше
   він сам займає весь перший ярус і виштовхує порядок з кількістю на третій. */
.wh-ebsec .el-q{flex:1 1 220px}

/* ── Вікно на майже весь екран (рамка з чужою сторінкою панелі) ──
   Висоту тут задає САМЕ ВІКНО, а не вміст: усередині рамка, у якої власної висоти
   немає взагалі, і при звичайному `max-height` вона схлопнулась би в нуль. Тому
   коробка розтягнута на весь екран мінус поля, а прокрутку веде вже сторінка
   всередині рамки — зовнішньої бути не повинно (два повзунки поспіль). */
.modal-full{z-index:120;padding:14px}
.modal-full .modal-box{width:100%;max-width:none;padding:14px 16px;overflow:hidden;
  height:calc(100vh - 28px);height:calc(100dvh - 28px);max-height:none}
.wh-ebfr{flex:1 1 auto;min-height:0;width:100%;border:1px solid var(--line);
  border-radius:12px;background:var(--bg)}
/* Посилання «окремою вкладкою» стоїть між заголовком і хрестиком — притискаємо
   його до хрестика, щоб воно не їхало слідом за довгим артикулом у заголовку. */
.modal-full .modal-head .el-web{margin-left:auto;align-self:center}

/* Видалений рядок документа: лишається на місці, але явно скасований. */
.wh-docr.del{opacity:.55}
.wh-docr.del .wh-docr-o{color:var(--red,#dc2626)}
.wh-docr.del .wh-docr-n,
.wh-docr.del .wh-docr-q,
.wh-docr.del .wh-docr-s{text-decoration:line-through}
.wh-docr.del .wh-docr-d{text-decoration:none}

/* ── Вікно розкомплектування ── */
/* Ширину задаємо саме `width`, а не `max-width`: базовий `.modal-box` має
   `width:min(420px,100%)`, і одного max-width мало — вікно лишалось на 420px, у які
   чотири колонки не влазять (назва товару стискалась у стовпчик по слову). */
.wh-unkbox{width:min(760px,100%);max-width:none}
.wh-unknote{margin:2px 0 10px}
/* По горизонталі не скролимо НІКОЛИ: рядок мусить влазити цілком, інакше цифри
   (заради яких вікно й відкривають) ховаються за краєм. */
.wh-unklist{max-height:46vh;overflow-y:auto;overflow-x:hidden}
/* Поле суми — рівно під число, яке в ньому буває («190,84»), а не на пів-вікна:
   решту ширини забирає гривнева колонка, заради якої сюди й дивляться.
   Колонка назви — `minmax(0,1fr)`, бо звичайний `1fr` не стискається нижче
   min-content і виштовхує решту колонок за межі вікна. */
.wh-unkr{display:grid;grid-template-columns:minmax(0,1fr) 52px 108px 124px;
  align-items:center;gap:12px;
  padding:9px 4px;border-top:1px solid var(--line);font-size:.88rem}
.wh-unkr:first-child{border-top:0}
.wh-unkr-n{min-width:0;overflow-wrap:anywhere;line-height:1.35}
.wh-unkr-n i{color:var(--muted);font-style:normal;font-size:.8rem}
.wh-unkr-p{color:var(--muted);font-size:.8rem;text-align:right}
.wh-unkr-f{display:flex;align-items:center;gap:5px;color:var(--muted)}
.wh-unkr-f input{width:100%;text-align:right}
.wh-unkr-u{color:var(--muted);font-size:.8rem;text-align:right;white-space:nowrap}
.wh-unksum-u{opacity:.8;white-space:nowrap}
/* На телефоні чотири колонки лишили б назві товару пів-сантиметра — назва йде
   окремим рядком зверху, а цифри стають під нею одним рядком праворуч. */
@media (max-width:600px){
  .wh-unkr{grid-template-columns:minmax(0,1fr) 104px 116px;gap:6px 10px}
  .wh-unkr-n{grid-column:1/-1}
  .wh-unkr-p{text-align:left}
}
/* Підсумок — єдиний індикатор, за яким вмикається кнопка, тож він і кричить:
   доки суми не зійшлись, він червоний і стоїть просто над нею. */
.wh-unksum{margin-top:12px;padding:9px 12px;border-radius:9px;font-size:.88rem;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}
.wh-unksum.ok{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
/* Джерело партії — своїм кольором на майданчик: у журналі його шукають оком
   («де тут ебей»), і однакові сірі бейджі довелось би дочитувати кожен. */
.wh-srcb{display:inline-block;border-radius:999px;padding:2px 9px;font-size:.72rem;
  font-weight:700;border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.wh-srcb.ebay{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.wh-srcb.amazon{background:#fff7ed;border-color:#fed7aa;color:#c2410c}

/* ── Вікно приходу ── */
/* Ширше за звичайну модалку: три поля в ряд (ціна / к-сть / дата) — це один
   рядок накладної, і розрізати його переносом означало б читати його по частинах. */
.wh-stbox{width:min(600px,100%)}
.wh-shipsel{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);
  padding-top:12px}
.wh-shl{font-size:.82rem;color:var(--muted);font-weight:700}
/* Таблетки способу доставки — зелені (вибір, а не небезпека, як у .modal-quick причин). */
.wh-shq .mq{border-color:#bbf7d0;color:var(--green-d)}
.wh-shq .mq:hover{background:#f0fdf4}
.wh-shq .mq.is-on{background:var(--green);border-color:var(--green);color:#fff}

/* Таблетки статусу в списку рахунків — тими самими кольорами, що й бейджі в колонці
   «Статус»: «Усі» й «Записаний» сірі (нічого ще не сталось), «Проведений» зелений
   (готово). Червоне з `.modal-quick` тут не про що — небезпечної дії серед них нема,
   а два різні кольори на один і той самий статус в одному екрані змушують щоразу
   перечитувати підпис замість того, щоб упізнавати. */
.wh-invq .mq{border-color:var(--line);color:var(--muted)}
.wh-invq .mq:hover{background:var(--bg)}
.wh-invq .mq.is-on{background:var(--muted);border-color:var(--muted);color:#fff}
.wh-invq .mq-posted{border-color:#bbf7d0;color:var(--green-d)}
.wh-invq .mq-posted:hover{background:#f0fdf4}
.wh-invq .mq-posted.is-on{background:var(--green);border-color:var(--green);color:#fff}
/* Червоний кружечок з числом на «Записані» — скільки рахунків складено, але складу
   ще не торкнулось. Червоний тут ЄДИНИЙ на всю стрічку і саме тому працює: сама
   таблетка сіра («ще нічого не сталось»), а число на ній — те, що чекає дії.
   `min-width` дорівнює висоті, тож однозначне число дає рівний круг, а тризначне
   розтягує його в таблетку, не обрізаючи цифр. */
.wh-invq .mq-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;margin-left:7px;padding:0 5px;box-sizing:border-box;
  border-radius:999px;background:var(--danger);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1}
/* На вибраній (сірій залитій) таблетці червоне по темному читалось би гірше за
   решту рядка — вивертаємо: біле коло, червона цифра. */
.wh-invq .mq.is-on .mq-n{background:#fff;color:var(--danger)}
.wh-shf[hidden],.wh-shnote[hidden]{display:none}
.wh-shnote{margin:0;font-size:.78rem;color:var(--muted);background:var(--bg);
  border-radius:9px;padding:8px 11px}
/* Спосіб доставки й число до нього — ОДИН рядок: таблетки ліворуч, поле праворуч.
   Раніше поле стояло під таблетками, а режим «мінімум» ховав його й натомість
   розгортав абзац — рядок то з'являвся, то зникав, і вікно смикалось під курсором. */
.wh-shrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wh-shrow .wh-shq{flex:0 0 auto;margin:0}
.wh-shrow .wh-shf{flex:1 1 150px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.92rem;background:#fff;color:var(--text)}
.wh-shrow .wh-shf:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Той самий світлий placeholder, що й у .lg-f: сірий читався б як уже введене число
   (поле тут стоїть поруч із заповненими, а не саме по собі). */
.wh-shrow .wh-shf::placeholder{color:#d3dae4;opacity:1}
/* Мінімум — не ввід, а вже відома сума: те саме місце в рядку, але сіре й лише
   для читання, щоб у нього не намагались друкувати. */
.wh-shrow .wh-shro{background:var(--bg);color:var(--muted);font-weight:700;cursor:default}
/* Підказка живе завжди (лише міняє текст), і місце під два рядки тексту зарезервоване
   наперед — інакше довший текст режиму ваги штовхав би кнопки вікна вниз. */
.wh-shhint{margin:0;min-height:2.4em;font-size:.78rem;line-height:1.35;color:var(--muted)}
/* ── Підтягнуте за номером замовлення ──
   Зелена рамка, а не сірий блок підказки поруч: це не пояснення до поля, а ФАКТИ з
   нашої бази, які щойно самі стали у форму, — і рядок мусить читатись як «ось звідки
   ці числа», інакше підставлену суму приймають за чужий недобитий ввід. */
.wh-ordpull{margin-top:8px;border:1px solid #bbf7d0;background:#f0fdf4;
  border-radius:10px;padding:8px 11px;display:grid;gap:8px}
.wh-ordpull[hidden]{display:none}
.wh-opl{margin:0;font-size:.78rem;line-height:1.4;color:var(--green-d)}
.wh-opl b{color:var(--text)}
/* Скасоване замовлення — червоним на початку того ж рядка: воно не відміняє прихід
   (товар міг і приїхати), але дізнатись про це треба ДО того, як його внесли. */
.wh-opx{color:#b91c1c}
.wh-opitems{display:grid;gap:6px}
.wh-opitems[hidden]{display:none}
.wh-opq{font-size:.78rem;color:var(--muted)}
/* Позиції — рядками-кнопками на всю ширину: обирають ОКОМ, по назві товару, а <select>
   ховав би саме те, за чим сюди дивляться, — суму кожної позиції. */
.wh-opi{display:grid;gap:2px;text-align:left;width:100%;padding:7px 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;color:var(--text)}
.wh-opi:hover{border-color:var(--green);background:#f0fdf4}
.wh-opi.is-on{border-color:var(--green);background:#dcfce7}
.wh-opi-t{font-size:.82rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wh-opi-s{font-size:.76rem;color:var(--muted)}
.wh-opi-s b{color:var(--text)}
/* Той самий зелений рядок «звідки ці числа», але у вікні закупки на кілька товарів:
   там він стоїть під сумами, які щойно самі себе заповнили із замовлення eBay. */
.wh-bulkpull{flex:1 1 100%;margin:0;font-size:.78rem;line-height:1.4;color:var(--green-d);
  border:1px solid #bbf7d0;background:#f0fdf4;border-radius:9px;padding:7px 10px}
.wh-bulkpull[hidden]{display:none}
.wh-bulkpull b{color:var(--text)}
/* Номер MEEST у журналі — синім, як решта переходів у логістику. */
.wh-mst{color:#1e4fbf;text-decoration:none;font-weight:600;white-space:nowrap}
.wh-mst:hover{text-decoration:underline}
/* Той самий вигляд, коли `.wh-mst` — КНОПКА, а не посилання (рахунок у журналі
   операцій відкриває вікно, а не сторінку): браузер інакше намалював би сіру
   коробку посеред клітинки. */
button.wh-mst{border:0;background:none;padding:0;font:inherit;font-weight:600;
  cursor:pointer;text-align:left}
/* Трек перевізника США — теж посилання, але НА ЧУЖИЙ сайт, тож не синє: сірий
   колір нерозпізнаного номера лишається базовим (щоб клікабельний і звичайний
   трек стояли в стовпчику однаково), а «по ньому клікають» показує пунктир під
   номером. Так два номери в клітинці не читаються як два однакові переходи. */
.wh-trk{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap;
  border-bottom:1px dotted #94a3b8}
.wh-trk:hover{color:var(--text);border-bottom-color:var(--text)}

/* ── Номер замовлення в журналі → вікно вибору переходу ── */
/* Кнопка, а не посилання: за номером ведуть ДВА різні переходи, і жодного «куди
   саме» в самому номері не написано. Виглядає як номер (той самий жирний текст,
   що й у не-eBay рядках), а пунктир під ним каже, що по ньому клікають. */
.wh-ordb{border:0;background:none;padding:0;font:inherit;font-weight:700;cursor:pointer;
  color:#1d4ed8;border-bottom:1px dashed #93c5fd;white-space:nowrap}
.wh-ordb:hover{border-bottom-style:solid}
.wh-ordbox{width:min(480px,100%)}
/* Варіанти — в один стовпчик: це не сітка рівнозначних плиток, а два кроки вибору,
   які читають зверху вниз. */
.wh-ordopts{grid-template-columns:1fr}
.wh-ordopt{text-decoration:none}
.wh-ordopt:hover{border-color:#1d4ed8;background:#eff6ff}
/* Значок самого eBay — синій, а не зелений: зелене коло тут означає «наша дія»
   (внесення в базу), а це вихід на чужий сайт. */
.wh-op-i.eb{background:#1d4ed8;font-size:1.1rem;font-style:italic}
/* Відмова форми — просто над кнопками, де на неї й дивляться, натискаючи «Внести».
   Червоний фон, а не сірий текст: це не підказка, а причина, чому нічого не сталось. */
.wh-sterr{margin:0;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;
  padding:9px 13px;font-size:.86rem;font-weight:600;color:var(--danger)}
.wh-sterr[hidden]{display:none}
/* Підсумок розрахунку — на темному, щоб не злився з полями над ним: це вже не
   ввід, а відповідь, заради якої вікно й відкривали. */
.wh-stcalc{background:#0f172a;color:#e2e8f0;border-radius:11px;padding:10px 14px;
  display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.wh-stcalc .muted{color:#94a3b8}
.wh-cl{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wh-cl b{font-weight:700;white-space:nowrap}
.wh-cl.big{border-top:1px solid #334155;margin-top:3px;padding-top:6px;font-size:.95rem}
.wh-cl.big b{font-size:1.15rem;font-weight:800;color:#4ade80}
.wh-cl.big i{font-style:normal;font-size:.8rem;font-weight:600;color:#94a3b8}
/* Числа всередині ПІДПИСУ підсумку («Всього: 8 найменувань у кількості 10 шт») —
   лише жирні. Зелений і 1.15rem від `.wh-cl.big b` тут читались би як друга сума
   поруч зі справжньою: та сама вага, той самий колір, а число зовсім про інше. */
.wh-cl.big b.wh-nq{font-size:inherit;font-weight:800;color:inherit}

/* ── Системні налаштування ── */
/* Дві картки поруч: курс і доставка змінюють РАЗОМ (перед заведенням партії),
   тож обидві мають бути в одному екрані, а не одна під одною. */
.wh-syscols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  align-items:start;margin-top:18px}
.wh-syscard{display:flex;flex-direction:column;gap:10px}
.wh-syscard .card-title{margin-bottom:0}
.wh-syscard .muted.sm{margin:0}
/* Поле тут одне на рядок і НЕ на всю ширину картки: числа короткі (45,03), і
   поле в 600px читалось би як місце для тексту. */
.wh-sysf{max-width:260px}
.wh-syslink{align-self:flex-start}
.wh-sysnote{margin:0;font-size:.78rem;color:var(--muted);background:var(--bg);
  border-radius:9px;padding:9px 12px;line-height:1.45}

/* Числове поле — той самий вигляд, що й решта полів .lg-f (кількість у приході). */
.lg-f input[type=number]{padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--text);width:100%}
.lg-f input[type=number]:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}

/* На телефоні журнал операцій ширший за екран — хай скролиться САМ, а не тягне
   вбік усю сторінку (правило панелі: горизонтальної прокрутки body не буває). */
@media (max-width:900px){
  .wh-sttbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wh-sttiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .wh-stt-v{font-size:1.15rem}
  /* Колонка знімка меншає разом із плитками — інакше на телефоні він з'їдає більше
     місця, ніж перша з них, а плитки там уже вдвічі вужчі. Висоту й тут не задаємо:
     вона й далі рівно по ряду сітки, тобто в плитку. */
  .wh-sttiles.with-ph{grid-template-columns:92px repeat(auto-fit,minmax(140px,1fr))}
  /* Три таблетки й поле в один ряд на телефоні не влазять — поле йде під них
     цілим рядком (а не тонкою смужкою збоку), решта поведінки та сама. */
  .wh-shrow .wh-shf{flex:1 1 100%}
  .wh-shhint{min-height:3.6em}
}

/* ── Замок замість кнопки видалення (список товарів) ──
   Товар з історією обліку не видаляється: у його операціях лежать витрачені гроші.
   Показуємо замок, а не згаслу кнопку — згасла кнопка запрошує в неї тицяти й
   гадати, чому не спрацювало, а замок читається як «сюди не можна» одразу.
   Ширина та сама, що й у кнопки ✕, щоб колонка дій не «стрибала» між рядками. */
.wh-nodel{display:inline-block;padding:5px 8px;font-size:.85rem;line-height:1.2;
  opacity:.45;cursor:help;user-select:none}

/* ── Товари в дефіциті (?page=need) ── */
/* Зріз («Показати: …») і пошук стоять ОДНИМ рядком над таблицею: обидва звужують
   те саме — перелік під стеженням, — і рознесені по різних кутах змушували б
   шукати другий після першого. Це дві окремі форми, тож ряд тримає обгортка. */
.wh-needbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.wh-needbar .wh-modes{margin:0}
.wh-needlbl{font-size:.85rem;font-weight:700;color:var(--muted)}
/* Пошук тягнеться в залишок ряду, але не менше своєї ширини: у поле набирають
   артикул, і обрізати його заради таблеток зліва нема сенсу. */
.wh-needf{flex:1 1 220px;display:flex;min-width:180px}
.wh-needf .wh-findw{flex:1;min-width:0}
.wh-needf input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font:inherit;color:var(--text)}
.wh-needf input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
/* На вузькому екрані ряд розпадається на два: таблетки зрізу довгі (у підписах
   ціла фраза), і поле пошуку поруч із ними лишалось би шириною в пів слова. */
@media (max-width:900px){.wh-needf{flex:1 1 100%}}
/* Рядок, якому вже бракує, підсвічуємо ЛІВОЮ СМУГОЮ, а не заливкою всього рядка:
   таблиця зебриста, і суцільний фон з'їв би читабельність сусідніх колонок. */
.wh-need-lo td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.wh-needtbl .wh-keep{white-space:nowrap}
/* Колонки «Не вистачає» більше нема: нестача читається зі співставлення «Наявність»
   і «Мінімум», а сам факт нестачі показує ЧЕРВОНА СМУГА рядка (`.wh-need-lo`) —
   заради ширини, яку та колонка відбирала в таблеток магазинів. */
/* На сторінці дефіциту наявність лишається ГОЛИМ числом, без таблетки зі списку:
   поруч уже стоїть межа (`.wh-keep`), і друга таблетка в тому ж рядку сперечалась би
   з нею за увагу. Наявність тут ще й не клікається (перехід дає назва). */
.wh-needtbl .wh-qty{background:none;border:0;padding:0;font-size:inherit;font-weight:800}
/* ── «В дорозі» — СИНЯ таблетка-кнопка між наявністю й мінімумом ──
   Колір той самий, що в плитці «у дорозі» вікна посилок (`.wh-prcs-i.tr`): одне й те
   саме поняття в двох місцях мусить впізнаватись без читання підпису. Синій, а не
   зелений чи червоний, бо ті двоє вже сказані про ТЕПЕР («є» / «нема»), а це — про
   потім; пофарбувати його зеленим означало б пообіцяти товар, якого сьогодні продати
   не можна.
   Таблеткою (на відміну від сусідньої наявності, яку тут сплющено в голе число) — бо
   вона єдина в рядку клікається, і це має бути видно до наведення.
   Слово «посилки» дрібним і блідішим за число: колонка питає «скільки», а слово лише
   не дає сплутати посилки зі штуками товару в сусідній колонці. */
.wh-ntr{display:inline-flex;align-items:baseline;gap:4px;font:inherit;cursor:pointer;
  background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:999px;
  padding:2px 9px;font-size:.82rem;font-weight:800;white-space:nowrap}
.wh-ntr i{font-style:normal;font-size:.74rem;font-weight:700;opacity:.8}
.wh-ntr:hover{border-color:#1d4ed8;background:#dbeafe}
/* Рекомендована ціна закупки ($): межа «дорожче не брати», з якою звіряють знайдене
   в магазинах поруч. Помітна, але не кричить — це орієнтир, а не число, яке
   переписують у замовлення. */
.wh-buyp{color:var(--green-d);white-space:nowrap}
/* ── Джерела пошуку (4 магазини) ──
   Таблетками в ОДИН ряд, а не переліком посилань: підписи короткі й читаються як
   набір кнопок «де подивитись», а рядок таблиці від них не росте вгору. На вузькому
   екрані переносяться — таблиця там і так гортається вбік.
   `nofollow` + нова вкладка: це вихід із системи в чужий сайт, і повертатись треба
   в той самий рядок дефіциту. */
.wh-c-shop{white-space:normal}
.wh-shops{display:flex;flex-wrap:wrap;gap:5px}
/* На сторінці дефіциту чотири таблетки стоять РІВНО в один ряд і не переносяться:
   це набір кнопок «обійти магазини підряд», і четверта («Fasteners», найдовший
   підпис) зривалась на другий рядок — колонка тримала ширину «на розсуд таблиці»,
   а не під свій вміст. `width:1%` + `nowrap` = колонка бере рівно свою мінімальну
   ширину, залишок віддається назві товару (єдиній тягучій колонці таблиці). */
.wh-needtbl .wh-c-shop{white-space:nowrap;width:1%}
.wh-needtbl .wh-shops{flex-wrap:nowrap}
.wh-shop{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg);font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap}
.wh-shop:hover{border-color:var(--green);background:#f0fdf4;color:var(--green-d)}

/* ── Перемикач мови в шапці картки товару ──
   Стоїть у тому ж ряду, що й «Зберегти», тому не має розтягуватись і має лишатись
   лівіше кнопок дій (порядок у розмітці: назва → мова → «до операцій» → «зберегти»). */
.wh-phead-lng{flex:0 0 auto}
.wh-phead .wh-tostock{flex:0 0 auto}

/* ── Керування SEO (картка товару) ── */
/* Кнопка на ВСЮ ширину блоку фотогалереї: вона підсумовує окремий бік товару
   (сторінку на сайті), а не стоїть в один ряд із дрібними діями галереї.
   Колір = СТАН: сіра — SEO не чіпали, оранжева з галочкою — там уже щось є.
   Оранжевий, а не зелений: зелений у панелі скрізь означає «зроблено/збережено»,
   а тут заповненість ще нічого не гарантує — це позначка «сюди заходили». */
/* Кнопка стоїть ПІД карткою галереї, а не в ній: усередині вона їхала в самий низ
   прокрутки колонки (галерея на десяток фото — це два екрани), і побачити її можна
   було лише догорнувши. Тепер картка й кнопка — одна колонка сітки: скролиться
   картка, кнопка лишається на очах під нею.
   Заливка — сірий градієнт, а не пунктирна рамка на тлі сторінки: плоска й бліда,
   вона читалась як підпис під галереєю, а не як дія. */
.wh-galcol{display:flex;flex-direction:column;min-height:0}
.wh-cols>.wh-galcol{max-height:var(--wh-colh,none)}
.wh-galcol>.card{min-height:0;overflow-y:auto}
.wh-seobtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  flex:0 0 auto;margin-top:10px;padding:13px 14px;border:1px solid #cbd5e1;
  border-radius:11px;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%);
  color:#334155;font:inherit;font-size:.9rem;font-weight:700;letter-spacing:.01em;
  cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.07);
  transition:background .15s,border-color .15s,color .15s}
.wh-seobtn:hover{background:linear-gradient(180deg,#f1f5f9 0%,#cbd5e1 100%);
  border-color:#94a3b8;color:#0f172a}
.wh-seobtn.on{background:linear-gradient(180deg,#fff7ed 0%,#fed7aa 100%);
  border-color:#fdba74;color:#c2410c}
.wh-seobtn.on:hover{background:linear-gradient(180deg,#ffedd5 0%,#fdba74 100%);
  border-color:#f97316}
.wh-seobtn-i{font-style:normal;font-size:.95rem;line-height:1}
/* Число пов'язаних у дужках — це СТАН кнопки, а не окрема мітка: воно стоїть
   ПРОДОВЖЕННЯМ підпису, тому й ніяких таблеток чи кольору — лише вага шрифту. */
.wh-relb-n{margin-left:5px;font-weight:800}
/* Вимкнена кнопка — у незбереженого товару: зв'язок це пара id, а свого id така
   картка ще не має. Гасимо ЇЇ, а не ховаємо: кнопка мусить лишитись на видноті
   разом із підказкою, чому вона зараз не працює. */
.wh-seobtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.wh-seobtn:disabled:hover{background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%);
  border-color:#cbd5e1;color:#334155}
.wh-relb-n[hidden]{display:none}
/* Перелік уже пов'язаних у вікні — під пошуком, з власною прокруткою: пар буває
   до дванадцяти, і без межі вікно виростало б нижче за екран разом зі списком. */
.wh-relsel{margin-top:12px;padding:9px 10px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg);max-height:34vh;overflow-y:auto}
.wh-relsel .wh-kit{background:var(--panel)}

/* Вікно ширше за звичайне: у ньому чотири поля (адреса, старий артикул і ДВА описи
   поруч) та ряд кнопок генерації — у вузькій коробці кнопки переносились би по одній
   на рядок, а описи лишались би смужками в пару слів завширшки.
   ⚠ Обовʼязково `width`, а не сама лише `max-width`: `.modal-box` задає
   `width:min(420px,100%)`, і max-width на ній нічого не розтягує — вона лише
   ОБМЕЖУЄ. Через це вікно довго стояло 420px, хоча тут було написано 640. */
.wh-seobox{width:min(980px,100%);max-width:980px}
.wh-seof{margin-top:14px}
.wh-seof:first-of-type{margin-top:4px}
/* Однорядкові поля вікна тримаємо в один зріст із описами: у розтягнутій коробці
   низькі інпути поруч із високими текстовими полями читались як другорядні. */
.wh-seobox .wh-seof input[type=text],.wh-seourl input{padding:11px 12px;font-size:.95rem}
.wh-seourl input{padding-left:2px}
/* Адреса набирається БЕЗ провідного слеша: він частина формату, а не тексту, і
   набраний руками дав би `//milwaukee…`. Тому слеш намальований, а не введений. */
.wh-seourl{display:flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:9px;background:#fff;overflow:hidden}
.wh-seourl-p{flex:0 0 auto;padding:9px 2px 9px 12px;color:var(--muted);font-weight:700}
.wh-seourl input{flex:1;min-width:0;border:0;padding:9px 12px 9px 2px;font:inherit;
  font-size:.92rem;background:none;color:var(--text)}
.wh-seourl input:focus{outline:none}
.wh-seourl:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Три дії над однією адресою — ОДНИМ рядом і рівними частками (`flex:1`), без
   переносу: перенесена на другий рядок кнопка читалась би як окремий крок, а не
   як ще один спосіб заповнити те саме поле. Тому й підписи короткі. */
.wh-seogen{display:flex;gap:8px;margin-top:8px}
.wh-seogen .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
/* Відповідь про унікальність — рядком ПІД полем, а не тостом: її читають разом із
   самою адресою, і повідомлення в куті екрана змушувало б переводити погляд. */
.wh-seomsg{margin:8px 0 0;font-size:.82rem;font-weight:700;color:var(--muted)}
.wh-seomsg.ok{color:var(--green-d)}
.wh-seomsg.bad{color:var(--danger)}
/* Висота — не з `rows`, а з `min-height`: описи набирають на 150–160 символів, і в
   трьох рядках готове речення доводилось прокручувати всередині поля. */
.wh-seota{width:100%;min-height:130px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.92rem;line-height:1.5;background:#fff;
  color:var(--text);resize:vertical}
.wh-seota:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
/* Ключові слова — НИЖЧЕ за опис: це перелік через кому на два-три рядки, а не
   речення, яке перевіряють цілим. Однакова висота з описом розтягувала б вікно
   на зайвий екран заради порожнього місця. */
.wh-seakw{min-height:78px}
/* Опис — двома мовами, поля ПОРУЧ: вони рівноправні (не «основне + переклад»), і
   поставлені одне під одним розтягували б вікно на зайвий екран. Лічильник живе
   в самому підписі поля, а не окремим рядком під ним, — так він стосується
   конкретної мови й не забирає висоту. */
.wh-seodsc{display:flex;gap:16px;margin-top:14px}
.wh-seodsc .wh-seof{flex:1 1 0;min-width:0;margin-top:0}
.wh-seolab{display:flex;align-items:baseline;gap:8px}
.wh-seolab .wh-seocnt{margin-left:auto}
.wh-seocnt{font-weight:800;color:var(--text)}
/* Підказка старого артикула — той самий рядок, що й у вікні комплекту, але як
   кнопка вибору: клік підставляє артикул у поле й гасить перелік. Власна прокрутка
   на ~4 рядки, щоб вікно не росло на весь екран. */
.wh-seofound{display:flex;flex-direction:column;gap:7px;margin-top:8px;max-height:260px;
  overflow-y:auto;overscroll-behavior:contain}
.wh-seofound:empty{margin-top:0}
.wh-seorow{width:100%;text-align:left;cursor:pointer;font:inherit}
.wh-seorow:hover{border-color:var(--green);background:#f0fdf4}

/* ── Вікно «Керування текстом сторінки» ──
   Ширше за SEO-вікно: тут два поля з РОЗМІТКОЮ, а не з реченням, і вузька коробка
   ламала б кожен тег переносом. `width` обовʼязково (див. вище про `.modal-box`). */
.wh-pagebox{width:min(1180px,100%);max-width:1180px}
.wh-pagegrid{display:flex;gap:16px}
.wh-pagecol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:9px}
.wh-pagecol .wh-seof{margin-top:0}
/* Моноширинний шрифт — бо в полі лежить HTML: у пропорційному теги й відступи
   візуально злипаються, і зайвий `<` знаходиться лише в перегляді. Висота одразу
   велика: опис товару — це екран тексту, а не рядок. */
.wh-pageta{width:100%;min-height:360px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  background:#fff;color:var(--text);resize:vertical;tab-size:2}
.wh-pageta:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.wh-pageact{display:flex;gap:8px;flex-wrap:wrap}
.wh-pagecol .wh-pageact{align-self:flex-start}

/* ── Переклад полів UA ⇄ RU (Google Cloud Translation) ──
   Кнопка живе в ПІДПИСІ свого поля («Перекласти на UA» біля «Назва UA»), тож
   мусить бути дрібною таблеткою, а не кнопкою: підпис — це рядок службового
   тексту, і повнорозмірна кнопка в ньому перетягнула б увагу на себе з самого
   поля. Фіолетовим по білому — щоб не читалась як дія над товаром: зелений у
   панелі означає «зберегти», а тут у базу нічого не йде, переклад лише лягає
   в поле форми. */
/* Кнопка стоїть ОДРАЗУ ЗА підписом, а не притиснута до правого краю: питання
   «чим заповнити це поле» виникає в момент читання підпису, і рознесені по різних
   кінцях рядка підпис та кнопка довелось би зв'язувати очима щоразу.
   `align-items:center` замість успадкованого `baseline` — таблетка з рамкою по
   базовій лінії тексту сидить помітно нижче за нього. */
.wh-trh{align-items:center}
.wh-trh .wh-trb{margin-left:4px}
.wh-trb{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--violet);
  font:inherit;font-size:.75rem;font-weight:700;line-height:1.5;padding:2px 9px;
  border-radius:999px;cursor:pointer;white-space:nowrap}
.wh-trb:hover{border-color:var(--violet);background:#f5f3ff}
.wh-trb[disabled]{opacity:.55;cursor:default;border-color:var(--line);background:var(--panel)}
/* У вікнах SEO й тексту сторінки кнопка ділить підпис із лічильником довжини.
   Лічильник лишається крайнім правим (`margin-left:auto` у нього вже є), кнопка —
   одразу за підписом; відступ дає `gap` самого `.wh-seolab`. */
.wh-seolab{flex-wrap:wrap}

/* Перегляд стоїть ПОВЕРХ вікна тексту, тож його шар вищий за звичайний `.modal`
   (110) — інакше друге вікно малювалось би під підкладкою першого. */
.wh-over{z-index:130}
.wh-prevbox{width:min(1100px,100%);max-width:1100px}
/* Рамка показу — з власною висотою й білим тлом: усередині чужий HTML, і сторінка
   в ній має виглядати сторінкою, а не вставкою в панель. */
.wh-prevfr{width:100%;height:min(68vh,640px);border:1px solid var(--line);
  border-radius:10px;background:#fff;display:block}

@media (max-width:900px){
  /* У шапці картки перемикач мови і «до операцій» не мають ділити рядок із
     «Зберегти»: на телефоні три кнопки в ряд стискаються до нечитабельних. */
  .wh-phead-lng,.wh-phead .wh-tostock{flex:1 1 auto}
  /* Назва — на ВЕСЬ рядок і нічого поруч. На телефоні (і на розгорнутому Fold, він
     теж під цією межею) ділити рядок їй нема з ким: будь-яка сусідка забирає більше,
     ніж лишає. Це та сама підлога, що вище, тільки доведена до кінця — тут назві
     потрібна не «мінімальна ширина», а вся. */
  .wh-phead-t{flex-basis:100%}
  .wh-needtbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* На телефоні поруч поставлені описи дають дві колонки по ~140px — у них не
     видно навіть речення, заради довжини якого й стоїть лічильник. Тому там
     мови йдуть одна під одною, а ряд кнопок над ними — знову з переносом. */
  .wh-seodsc{flex-direction:column;gap:14px}
  .wh-seogen{flex-wrap:wrap}
  .wh-seogen .btn{flex:1 1 120px}
  /* Дві колонки розмітки по ~140px не показують навіть цілого тега — на телефоні
     мови йдуть одна під одною, а поле нижче (екран і так вузький). */
  .wh-pagegrid{flex-direction:column;gap:14px}
  .wh-pageta{min-height:220px}
  .wh-pagecol .wh-pageact{align-self:stretch}
  .wh-pageact .btn{flex:1 1 140px}
  .wh-prevfr{height:min(60vh,520px)}
}

/* ═══════════════════════════ Реалізація: рахунки ═══════════════════════════
   Розділ «Виписати рахунок» (`/warehouse/?page=sell`) + сліди реалізації в обліку
   товару. Кольори взяті з тих самих трьох ролей, що вже діють у розділі:
   зелене = прихід/наша дія, фіолетове = виправлення (розкомплектування, скасування
   проведення), червоне = скасовано/помилка. Реалізація НОВОГО кольору не отримує —
   вона теж рух товару, лише в другий бік, і четверта фарба в тому ж ряду
   перестала б щось означати. */

/* Шапка: заголовок ліворуч, головна дія праворуч — рахунок виписують «звідси»,
   і кнопка мусить бути там, куди й дивляться, а не під поясненням. */
.wh-invhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
.wh-invhead h1{margin:0 0 4px}
.wh-invhead p{margin:0;max-width:760px}
.wh-invhead .btn{white-space:nowrap}

/* Мінус на складі — ЖОВТЕ попередження, а не червона помилка: проведення його
   свідомо дозволяє, це не збій, а список того, що треба дооформити приходом.
   Тут же — майбутнє місце такого ж повідомлення на головній панелі. */
.wh-invneg{margin:0 0 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:10px 14px;font-size:.88rem;color:#92400e;display:flex;flex-direction:column;gap:6px}
.wh-invneg > b{font-size:.95rem}
.wh-invnegl{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.wh-invnegl a{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid #fde68a;border-radius:999px;padding:3px 10px;font-size:.8rem;
  font-weight:600;color:#92400e}
.wh-invnegl a:hover{border-color:#f59e0b;background:#fffdf5}
.wh-invnegl a b{color:var(--danger);font-weight:800;white-space:nowrap}

/* Пошук + фільтр статусу одним рядом: питань до списку рахунків рівно два. */
/* ── Фінансовий звіт ──
   Панель фільтра — та сама `.wh-invbar` (щоб два сусідні екрани розділу не вчили
   читати себе по-різному), плюс дати й галочки. */
.wh-fin-d label{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;
  color:var(--muted);font-weight:700}
.wh-fin-d input[type=date]{height:34px;box-sizing:border-box;padding:5px 9px;
  border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--bg);
  color:var(--text)}
.wh-fin-d input[type=date]:focus{outline:none;border-color:var(--green)}
/* Галочка розділу — коробка, а не голий checkbox: у ряд із датами й кнопками він
   загубився б, а це головний перемикач екрана. */
.wh-ck{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;
  font-size:.84rem;font-weight:700;color:var(--muted)}
.wh-ck:has(input:checked){border-color:var(--green);background:#f0fdf4;color:var(--green-d)}
.wh-ck input{width:15px;height:15px;accent-color:var(--green);cursor:pointer}
/* Галочка «Візуалізація» — та сама коробка, але фіолетова: вона вмикає не ще один
   розділ звіту, а ІНШИЙ спосіб дивитись на ті самі числа, і зеленою читалась би як
   третя рівноправна таблиця. */
.wh-ck-viz:has(input:checked){border-color:var(--violet);background:#f5f3ff;color:var(--violet-d)}
.wh-ck-viz input{accent-color:var(--violet)}
/* «Прибуток» — золота, під колір своєї кривої: галочка вмикає саме ту лінію, і зв'язок
   між нею та графіком має читатись без пояснень. */
.wh-ck-prof:has(input:checked){border-color:#a16207;background:#fefce8;color:#854d0e}
.wh-ck-prof input{accent-color:#a16207}
/* Погашена галочка — та, що зараз нічого не робить (прибуток без візуалізації).
   Не ховаємо: зникла галочка читається як збій, а бліда — як «поки не на часі». */
.wh-ck.is-off{opacity:.45;cursor:not-allowed}
.wh-ck.is-off input{cursor:not-allowed}
/* Готові періоди — список одразу за полями дат: це той самий вибір періоду, лише
   готовими відповідями. Вигляд — як у таблетки розміру сторінки (`.wh-ib-per`), щоб
   у ряду не з'явилось третьої форми елемента керування. */
.wh-fin-per{height:34px;padding:0 9px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--text);font:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer}
.wh-fin-per:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}

/* ── Графік звіту (галочка «Візуалізація») ──
   Дві криві на одному полотні й одній шкалі. Полотно — серверний SVG; тут лише
   оформлення: сітка приглушена, підписи — текстовим кольором, колір лишається за
   самими лініями та позначками легенди. */
.wh-chart{margin:0 0 18px;padding:12px 14px 8px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
.wh-chart-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.wh-chart-t{font-size:.95rem;font-weight:800}
.wh-chart-t i{font-style:normal;font-weight:600;color:var(--muted);font-size:.82rem}
.wh-chart-lg{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:.82rem;
  font-weight:700;color:var(--muted)}
.wh-chart-lg span{display:inline-flex;align-items:center;gap:6px}
.wh-chart-lg i{width:10px;height:10px;border-radius:999px;display:inline-block}
.wh-chart-no{padding:16px 2px}
/* На вузькому екрані полотно НЕ стискаємо до нечитабельного: воно лишається 680px і
   прокручується всередині своєї коробки, тож сторінка вбік не їде (правило проєкту). */
.wh-chart-box{position:relative;overflow-x:auto}
.wh-chart-box svg{display:block;width:100%;min-width:680px;height:auto}
.wh-chart-ax{fill:var(--muted);font-size:11px}
.wh-chart-el{fill:var(--text);font-size:11.5px;font-weight:700}
/* Підказка — HTML поверх полотна, а не текст усередині SVG: той масштабувався б
   разом із viewBox і на широкому екрані ставав би вдвічі більшим за підписи осі. */
.wh-chart-tip{position:absolute;top:6px;transform:translateX(-50%);pointer-events:none;
  background:#111827;color:#e5e7eb;border-radius:9px;padding:7px 10px;font-size:.78rem;
  white-space:nowrap;z-index:2;box-shadow:0 6px 18px rgba(15,23,42,.18)}
.wh-chart-tip.is-r{transform:translateX(-100%)}
.wh-chart-tip[hidden]{display:none}
.wh-chart-tip b{display:block;color:#fff;font-size:.82rem;margin-bottom:3px}
.wh-chart-tip span{display:flex;align-items:center;gap:6px}
.wh-chart-tip i{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.wh-chart-tip em{font-style:normal;font-weight:700;color:#fff;margin-left:auto;padding-left:14px}
/* Збиток у підказці — червоним: мінус перед числом легко пропустити боковим зором. */
.wh-chart-tip em.is-neg{color:#fca5a5}
.wh-finper{margin:-6px 0 14px}
.wh-fintiles{margin-bottom:10px}
.wh-fintbl{margin-bottom:20px}
.wh-fin-p{color:var(--green-d)}
.wh-fin-m{color:var(--danger)}
/* Підсумкова смуга — темна, як «Разом» у рахунку: це не ще один рядок таблиці, а
   висновок під усім екраном. */
.wh-finfoot{display:flex;flex-direction:column;gap:4px;margin:6px 0 20px;padding:12px 15px;
  background:#111827;color:#e5e7eb;border-radius:12px;font-size:.9rem}
.wh-finfoot b{color:#fff}
.wh-finfoot i{font-style:normal;font-size:.78rem;color:#9ca3af}
.wh-finfoot .wh-fin-p{color:#4ade80}
.wh-finfoot .wh-fin-m{color:#fca5a5}

/* ── Панель над списком рахунків ──
   ОДНА панель із трьома групами, а не чотири речі впритул: знайти → звузити → як
   читати. Групи розділені тонкою рискою (`.wh-ib-g + .wh-ib-g`), тому видно, де
   закінчується одна й починається наступна, і панель не читається як звалище.

   ⚠ З 12.09.2026 цю ж панель носить ЖУРНАЛ ЗАМОВЛЕНЬ (`/sales/?page=list` —
   `.wh-invbar.sl-listbar`), і клас лишився той самий СВІДОМО, а не скопійований
   під новим імʼям: два списки схожі за змістом, людина ходить між ними десятки
   разів на день, і друга копія цих правил розійшлась би з першою через місяць.
   Префікс `wh-` тут читається як «звідки воно родом», а не «кому належить». */
.wh-invbar{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap;margin:0 0 14px;
  padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.wh-ib-g{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0}
/* Риска-роздільник саме на псевдоелементі: справжній <span> між групами довелось би
   ховати на телефоні, де групи переносяться в стовпчик. */
.wh-ib-g + .wh-ib-g::before{content:"";align-self:stretch;width:1px;min-height:26px;
  background:var(--line);margin-right:6px}
/* Поле й кнопка — ОДНЕ ціле: рамки стикуються, тож «Знайти» читається як частина
   пошуку, а не як ще одна кнопка в ряду. Тому саме тут `gap` збивається в нуль
   (група успадковувала спільні 8px від `.wh-ib-g`) і заборонено перенос: у поля
   навмисно нема ПРАВОЇ рамки — щойно між ним і кнопкою зʼявляється просвіт, поле
   виглядає обрізаним збоку, а кнопка — відірваною. */
/* Поле пошуку СТИСНУТО (було `1 1 340px`): рахунки читають за ПЕРІОД, а пошук за
   номером чи телефоном — дія рідша, і панель віддавала їй третину ширини під запит на
   десяток символів. Тепер першу половину панелі займає календар, а поле бере рівно
   стільки, скільки треба номеру. */
.wh-ib-find{flex:1 1 200px;min-width:170px;gap:0;flex-wrap:nowrap}
/* ── Період: дві дати + кнопка ──
   Стоїть ПЕРШИМ у панелі, до пошуку: питання «що продали цього тижня» ставлять
   постійно, а «знайти рахунок №53734» — коли вже знають номер.
   Підпис («з» / «по») — усередині ярлика перед самим полем, а не окремим рядком:
   два поля дат поспіль без підписів читаються як одне розірване, а повні слова
   («Дата з») з'їли б місце, якого в панелі й так нема. */
.wh-ib-date{gap:6px;flex-wrap:nowrap}
.wh-ib-date label{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;
  color:var(--muted);white-space:nowrap}
.wh-ib-date input[type=date]{height:34px;box-sizing:border-box;padding:6px 8px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);
  font:inherit;font-size:.84rem}
.wh-ib-date input[type=date]:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(22,163,74,.13)}
/* Кнопка діапазону — квадратна зі стрілкою: у панелі вже є «Знайти», і друге слово
   поруч змушувало б щоразу читати обидва, щоб зрозуміти, котре про що. */
.wh-ib-dgo{display:inline-flex;align-items:center;justify-content:center;height:34px;
  min-width:34px;padding:0 9px;flex:0 0 auto}
/* Скидання періоду — хрестиком поруч, а не окремою кнопкою в хвості панелі: воно
   стосується саме цих двох полів, і в кінці ряду його довелось би шукати. */
.wh-ib-dx{display:inline-flex;align-items:center;justify-content:center;width:26px;
  height:26px;border-radius:7px;color:var(--muted);font-size:.9rem;flex:0 0 auto}
.wh-ib-dx:hover{background:#fef2f2;color:var(--danger)}
/* Швидкі періоди — таблетками того ж вигляду, що й статуси: це такий самий зріз
   списку, лише по інший бік від «коли». */
.wh-ib-quick .mq{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:760px){
  /* На телефоні дати переносяться в стовпчик разом з рештою груп, і заборона
     переносу всередині групи витягла б панель за край екрана. */
  .wh-ib-date{flex-wrap:wrap}
}
.wh-invbar input[type=search]{flex:1 1 auto;min-width:0;height:34px;box-sizing:border-box;
  padding:7px 11px;border:1px solid var(--line);border-radius:9px 0 0 9px;border-right:0;
  font:inherit;background:var(--bg);color:var(--text)}
.wh-invbar input[type=search]:focus{outline:none;border-color:var(--green)}
/* `inline-flex` замість типового для `.btn` `inline-block`: при заданій висоті 34px
   і малому падінгу `btn-sm` підпис інакше липне до верху й стоїть вище за текст у
   полі поруч. */
.wh-ib-find .btn{display:inline-flex;align-items:center;justify-content:center;
  border-radius:0 9px 9px 0;height:34px;flex:0 0 auto}
.wh-ib-tail{margin-left:auto}
.wh-ib-per{height:34px;padding:0 9px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--text);font:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer}
.wh-ib-per:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.wh-ib-n{font-size:.82rem;color:var(--muted);white-space:nowrap}
.wh-ib-n b{color:var(--text)}
/* Таблетки статусу тут — посилання, а не кнопки (це зріз URL), тож вирівнювання
   задаємо самі: `.mq` розрахований на <button>. */
.wh-invq .mq{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:760px){
  /* На телефоні групи стають рядками на всю ширину — вертикальна риска між ними
     втратила б сенс, а «хвіст» більше нема куди відтісняти вправо. */
  .wh-ib-g{flex:1 1 100%}
  .wh-ib-g + .wh-ib-g::before{display:none}
  .wh-ib-tail{margin-left:0}
}

/* Журнал замовлень: та сама панель, але поле пошуку в ньому широке — тут шукають
   не номер документа, а «що згадав» (телефон, ТТН, прізвище, місто, артикул), і
   підказка в полі довга. Список стадій — таблетка того ж вигляду, що й розмір
   сторінки (`.wh-ib-per`), тільки не стиснута до числа. */
.sl-listbar .wh-ib-find{flex:1 1 300px;min-width:220px}
.sl-listbar .sl-stsel{font-weight:400;max-width:210px}

.wh-invtbl td{vertical-align:middle}
/* Стан рахунку в заголовку його вікна. Ті самі два кольори, що в колонці «Статус»
   списку (`.wh-opb`): сірий — складу ще не торкались, зелений — списання зроблені.
   Пігулкою, а не словом у дужках: у суцільному сірому заголовку «(проведений)»
   помічалось останнім — хоч саме від нього залежить, чи можна тут щось правити. */
.wh-invstat{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  vertical-align:middle;background:#eef1f6;color:var(--muted);border:1px solid var(--line)}
.wh-invstat.is-posted{background:#f0fdf4;color:var(--green-d);border-color:#bbf7d0}

/* ── «→ Замовлення №…» у шапці рахунку (13.09.2026) ──
   Другий бік звʼязку «рахунок ⇄ замовлення»: у картці замовлення номер документа
   стоїть кнопкою давно, а зворотного шляху не було — з відкритого рахунку номер
   замовлення доводилось шукати пошуком по журналу.
   РОЗМІРОМ рівне номеру (успадковує `.modal-title`, свого `font-size` не має) — це
   така сама назва документа, як і його власний номер, а не примітка під ним. Колір
   ФІОЛЕТОВИЙ і в панелі більше ніде не вживаний: ним читається «це не про склад, це
   чужий розділ», і сплутати його з зеленим «проведений» неможливо. Пунктир знизу —
   бо зовні це посилання (середній клік відкриє журнал вкладкою), хоч звичайний клік
   і перехоплює вікно. */
.wh-invord{margin-left:10px;color:#7c3aed;font-weight:800;text-decoration:none;
  white-space:nowrap;border-bottom:1px dashed rgba(124,58,237,.5);cursor:pointer}
.wh-invord:hover{color:#5b21b6;border-bottom-color:#5b21b6}
/* «+ Замовлення під цей рахунок» — те саме місце й той самий колір, бо питання те
   саме («а де його замовлення?»), просто відповідь ще попереду. Пунктир суцільніший
   і тон трохи блідіший: це ПРОПОЗИЦІЯ дії, а не посилання на наявне. */
.wh-invordnew{color:#8b5cf6;border-bottom-style:dotted}
.wh-invordnew:hover{color:#6d28d9;border-bottom-color:#6d28d9}
/* ── Роздільник дня в списку рахунків («За сьогодні» / «За вчора» / «Старіші») ──
   Смуга-підпис на всю ширину таблиці, а не ще одна колонка з датою: дата в рядка вже
   є, тут потрібно лише бачити, де закінчується один день. `background` з `!important`
   — щоб зебра (`.tbl-zebra tr:nth-child(odd)`) не пофарбувала смугу як звичайний
   рядок даних; специфічність у неї така сама, і хто виграє, залежало б від порядку. */
.wh-invsep td{background:var(--panel)!important;padding:9px 12px!important;
  border-top:2px solid var(--line);border-bottom:1px solid var(--line)}
.wh-invsep span{font-weight:800;font-size:.9rem;letter-spacing:.02em;color:var(--text)}
.wh-invsep i{margin-left:8px;font-style:normal;font-size:.78rem;color:var(--muted);
  font-weight:700}
/* ── Гроші дня в роздільнику ──
   Виручка й результат — окремими «пігулками» після кількості, а не суцільним рядком:
   це три різні числа, і без візуальної паузи між ними «6 рахунків на суму 12 400 грн
   чистий прибуток 3 100 грн» читається як одна довга фраза, яку доводиться розбирати.
   Прибуток кольоровий (зелений / червоний), бо знак тут — головне. */
.wh-invsep em{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  font-style:normal;font-size:.75rem;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.wh-invsep em b{font-weight:800;color:var(--text)}
.wh-invsep em.is-prof{color:var(--green-d);background:#f0fdf4;border-color:#bbf7d0}
.wh-invsep em.is-prof b{color:var(--green-d)}
.wh-invsep em.is-loss{color:#991b1b;background:#fef2f2;border-color:#fecaca}
.wh-invsep em.is-loss b{color:var(--danger)}
/* Застереження до числа («з 4 провед.», «!») — те, чого воно НЕ враховує. Дрібним і
   підкреслено пунктиром: наведенням видно, чому підсумок неповний. */
.wh-invsep em u{margin-left:5px;font-size:.68rem;font-weight:700;opacity:.75;
  text-decoration:underline dotted;cursor:help}
@media (max-width:760px){
  /* На телефоні таблиця рахунків горизонтально прокручується, і довгий роздільник
     тягнув би її ширину за собою — тому числа переносяться під підпис. */
  .wh-invsep em{margin:4px 6px 0 0}
}
/* Перший роздільник стоїть одразу під шапкою — подвійна лінія там зайва. */
.wh-invtbl tr:nth-child(2).wh-invsep td{border-top:0}
.wh-invtel{font-weight:700;color:var(--text);white-space:nowrap}
.wh-invtel:hover{color:var(--green-d)}
/* ── Клієнт у рядку рахунку: номер і прізвище — ВХІД У ЙОГО КАРТКУ ──
   Обидва стали кнопками (вікно з карткою клієнта, `#whCli`), тож перше завдання
   стилю — щоб вони лишились схожі на текст, яким і були: кнопковий вигляд у
   щільному списку читався б як дія над рахунком, а не як імʼя покупця.
   Поруч кожного стоїть значок копіювання — звідси рядок-флекс, інакше значок
   з'їжджав би на власний рядок під довгим прізвищем.
   Вирівнювання — ПО ВЕРХУ: прізвище з по батькові в цій колонці переноситься на
   два рядки, і при `center` значок копіювання з'їжджав до їхньої середини,
   відриваючись від самого імені. */
.wh-cliline{display:flex;align-items:flex-start;gap:4px}
button.wh-invtel,.wh-clinm{background:none;border:0;padding:0;font:inherit;
  text-align:left;cursor:pointer}
button.wh-invtel{font-weight:700;color:var(--text)}
/* Прізвище — БЕЗ власного розміру (12.09.2026): було .86rem, а в журналі
   замовлень те саме прізвище (`.sl-cname`) читається базовим розміром таблиці.
   Тепер його задає `.tbl` — тобто обидва списки збігаються самі, без другого
   числа, яке довелось би правити двічі. Приглушений колір лишається: у цій
   колонці головне — номер, прізвище його уточнює. */
.wh-clinm{color:var(--muted);line-height:1.25}
button.wh-invtel:hover,.wh-clinm:hover{color:var(--green-d);text-decoration:underline}
/* Рамка з карткою клієнта — та сама механіка висоти, що у вікні eBay Live
   (`.wh-ebfr`): висоту задає саме вікно, у рамки власної немає. */
.wh-clifr{flex:1 1 auto;min-height:0;width:100%;border:1px solid var(--line);
  border-radius:12px;background:var(--bg)}
/* ── Примітка в рядку рахунку ──
   Вільний текст без стелі ширини тягнув колонку на себе, а віддавала цю ширину
   сусідня колонка дій: «Провести» і ✕ переставали вміщатись в один рядок і ставали
   один під одним (кнопки при цьому вилазили за край комірки). Стеля стоїть і на
   комірці, і на самому тексті: `max-width` на `td` браузер трактує як побажання при
   розкладці таблиці, тож ріже саме внутрішній блок. Повний текст — у підказці. */
.wh-c-inote{width:1%;max-width:300px}
.wh-inote{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── «Що саме» у вікні підтвердження (провести / скасувати проведення) ──
   Компактний список позицій документа: фото, назва з артикулом, кількість. Стеля
   висоти з прокруткою — у рахунку буває десяток позицій, а вікно мусить лишитись
   вікном, у якому видно кнопки. */
.wh-invwhat{margin:2px 0 10px;max-height:210px;overflow-y:auto;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);padding:4px 6px}
.wh-invwhat[hidden]{display:none}
.wh-invwrow{display:flex;align-items:center;gap:9px;padding:4px 2px;font-size:.84rem}
.wh-invwrow + .wh-invwrow{border-top:1px solid var(--line)}
.wh-invwrow img{width:38px;flex:0 0 38px;height:auto;max-height:40px;object-fit:contain;
  border-radius:6px;border:1px solid var(--line);background:#fff}
.wh-invwrow .wh-invth-no{flex:0 0 38px;width:38px;height:31px;line-height:29px}
.wh-invwnm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text)}
.wh-invwq{flex:0 0 auto;font-weight:700;color:var(--text);white-space:nowrap}

/* ── Мініатюри позицій у рядку рахунку ──
   Уся стрічка — одна кнопка «відкрити рахунок»: клікають туди, куди дивляться.
   Ширина колонки фіксована під п'ять мініатюр + «+N», щоб рядки не гуляли по
   вертикалі один відносно одного. */
/* ⚠️ `.wh-c-th` більше НЕ колонка (12.09.2026): стрічка мініатюр переїхала всередину
   «Позицій», бо обидві відповідали на одне питання — «що в документі» — а ширину
   забирали двічі, затискаючи «Оплату» ліворуч. Клас лишений для сумісності. */
.wh-c-th{width:1%;white-space:nowrap}
/* Стрічка стоїть НАД переліком і займає власний рядок (`flex`, не `inline-flex`):
   інакше вона тягнулася б в один рядок з першим артикулом і колонка стала б удвічі
   ширшою за потрібне. Перенос дозволений — позицій буває п'ять. */
.wh-invths{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px;border:0;
  background:none;cursor:pointer;border-radius:8px;line-height:0;margin-bottom:3px}
.wh-invths:hover{background:var(--bg)}
/* Тут коробка СТАЛА (42×34 ≈ пропорція наших 620×500), а знімок вписується в неї
   без обрізки: у стрічці з пʼяти мініатюр різна висота рядків читалась би як збій
   таблиці, а не як різні фото. */
.wh-invths img{width:42px;height:34px;object-fit:contain;border-radius:7px;
  border:1px solid var(--line);background:#fff;display:block}
/* Позиція без фото не зникає, а лишає порожній прямокутник: інакше к-сть мініатюр
   не збігалась би з к-стю позицій у сусідній колонці й читалась як помилка. */
.wh-invth-no{width:42px;height:34px;border-radius:7px;border:1px dashed var(--line);
  background:var(--bg);color:var(--muted);font-size:.7rem;line-height:32px;
  text-align:center;display:block}
.wh-invth-more{font-size:.74rem;font-weight:700;color:var(--muted);line-height:1;
  padding:0 3px}

/* ── Колонка «Позиції» у списку рахунків ──
   Артикули з кількістю — та сама мова, що й у кнопці «Копіювати». Моноширинний, бо
   артикул читають по символах; кількість дрібним праворуч від назви, а не окремою
   колонкою: вона має значення лише разом з артикулом. */
.wh-c-pos{width:1%;white-space:nowrap}
.tbl th.wh-c-pos{text-align:left}
.wh-pos{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem;
  line-height:1.5;color:var(--text);max-width:210px;overflow:hidden;text-overflow:ellipsis}
.wh-pos i{font-style:normal;font-weight:800;color:var(--muted);margin-left:5px}
/* Ціна позиції — В КІНЦІ рядка і БЕЗ підкреслення (`<u>` тут узято лише як третій
   рівень розмітки поруч з артикулом і кількістю). Своїм кольором: артикул опорний,
   кількість службова, ціна — відповідь на окреме питання, і трьома однаковими
   сірими числами рядок читався б як одне довге. */
.wh-pos u{text-decoration:none;margin-left:7px;color:var(--green-d);font-weight:700}
/* Ширше за колишні 210px рівно на ціну: без цього довгий артикул із доданим числом
   обрізався б трьома крапками саме на ньому. */
.wh-pos{white-space:nowrap;max-width:290px}

/* Цеглянa таблетка `out` — «Реалізація» в журналі операцій товару: зі складу пішло.
   Не зелена (зелене тут означає прихід) і не фіолетова (то виправлення).
   Статус рахунку нею БІЛЬШЕ НЕ фарбується — див. `.wh-opb.draft` вище. */
.wh-opb.out{background:#fef7f2;border:1px solid #fed7aa;color:#c2410c}

/* Мінусова наявність у плитці обліку товару. Окремо від «.ok» і від нуля: нуль —
   «розпродано», мінус — «продано більше, ніж внесено». */
.wh-sttile.neg{border-color:#fecaca;background:#fef2f2}
.wh-sttile.neg .wh-stt-v{color:var(--danger)}

/* Форма-обгортка кнопки «Додати в рахунок»: у сітці операцій вона мусить займати
   рівно ту саму клітинку, що й сусідня кнопка, а не з'їхати на свою висоту. */
.wh-opform{display:flex}
.wh-opform .wh-op{flex:1 1 auto;width:100%}

/* ── Вікно рахунку ──
   Ширше за решту модалок: у ньому і шапка документа, і пошук, і сам перелік
   позицій з полями — у 520px це перетворювалось на стовпчик із десяти рядків. */
.wh-invbox{max-width:920px;width:100%}
/* Шапка документа: п'ять коротких полів, які читають як одну стрічку реквізитів.
   Номер і курс вужчі за решту — там числа, а не текст. */
.wh-invhrow{display:flex;flex-wrap:wrap;gap:12px}
.wh-invhrow .lg-f{flex:1 1 170px;min-width:0}
.wh-invhrow .wh-invf-no{flex:0 0 110px}
.wh-invhrow .wh-invf-rate{flex:0 0 130px}
/* `.wh-invnote` (пояснення про телефон покупця) прибрано з форми рахунку разом із
   самим абзацом — правило лишається порожнім місцем у історії, не в CSS. */

.wh-invsearch{margin-top:14px}
.wh-invsearch[hidden]{display:none}
/* Знахідки — власна прокрутка на ~4 рядки: перелік не має розсовувати вікно, у
   якому нижче лежить сам рахунок і його підсумок. */
.wh-invfound{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:230px;
  overflow-y:auto;overscroll-behavior:contain}
.wh-invfound:empty{margin-top:0}
.wh-invfr{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;
  cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:6px 10px;color:var(--text)}
.wh-invfr:hover{border-color:var(--green);background:#f0fdf4}
/* Те саме правило, що й у рядку рахунку: стала ширина, висота за пропорцією знімка. */
.wh-invfr img{width:52px;flex:0 0 52px;height:auto;max-height:56px;object-fit:contain;
  border-radius:6px;background:#fff}
.wh-invfn{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.wh-invfn b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Другий рядок знахідки — «артикул · залишок на складі N шт». Обрізаємо так само, як
   назву вище: у довгого артикулу немає права виштовхнути наявність за край. */
.wh-invfn i{font-style:normal;font-size:.76rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-invfp{font-size:.84rem;font-weight:700;white-space:nowrap}
/* Залишок у знахідці — інформація, а не заборона: нуль підсвічений, але рядок
   лишається клікабельним (у рахунок вносять те, що продають). */
.wh-invfs{font-weight:700;color:var(--green-d)}
.wh-invfs.zero{color:var(--danger)}

/* ── Перелік позицій рахунку ── */
.wh-invlist{display:flex;flex-direction:column;gap:7px;margin-top:14px;max-height:330px;
  overflow-y:auto;overscroll-behavior:contain}
.wh-invlist:empty{margin-top:0}
.wh-invrow{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:7px 10px}
/* Рядок, який після продажу піде в мінус, — червонуватий. Не заблокований: це
   попередження, а не відмова. */
.wh-invrow.neg{border-color:#fecaca;background:#fef2f2}
.wh-invrow.zero{border-color:#fde68a;background:#fffbeb}
/* Фото позиції: ШИРИНА стала, ВИСОТА за пропорцією знімка (`object-fit:contain`).
   Було 38×38 з `cover` — а майже всі наші фото 620×500, тобто квадрат зрізав їм боки
   й на мініатюрі лишалась середина інструмента без жодної впізнаваної деталі.
   `max-height` тримає вертикальні знімки, щоб один портрет не розсунув увесь рядок. */
.wh-invth{width:58px;flex:0 0 58px;height:auto;max-height:64px;object-fit:contain;
  border-radius:7px;background:#fff}
.wh-invth.empty{display:block;height:47px;background:var(--bg);border:1px dashed var(--line)}
.wh-invnm{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.wh-invnm b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Назва позиції — посилання в облік товару (нова вкладка). Виглядає як звичайна назва
   рядка: підкреслення зʼявляється лише під курсором, бо в списку з десяти позицій
   десять синіх посилань читались би як меню, а не як перелік товару. */
.wh-invlk{font-size:.88rem;font-weight:700;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.wh-invlk:hover{color:var(--green-d);text-decoration:underline}
/* Назва і кнопка «копіювати» перед нею — один рядок. `min-width:0` на посиланні
   обовʼязковий: без нього довга назва розсуває флекс-рядок замість трьох крапок. */
.wh-invnl{display:flex;align-items:center;gap:2px;min-width:0}
.wh-invnl .wh-invlk{flex:1 1 auto;min-width:0}
/* Кнопка стоїть у КОЖНІЙ позиції, тому бліда, поки на рядок не навели, — інакше
   стовпчик іконок читався б як окрема колонка документа. Правило `tr:hover .wh-cp`
   сюди не дістає: рядок рахунку — не таблиця. */
.wh-invncp{flex:0 0 auto;width:20px;height:20px;margin:0}
.wh-invrow:hover .wh-invncp{opacity:1}
.wh-invsku{font-size:.76rem;color:var(--muted)}
/* Артикул позиції та «Переглянути на сайті» — В ОДНОМУ рядку. `.wh-invnm` —
   колонковий флекс, тож без цієї обгортки посилання стало б окремим третім рядком
   позиції і подвоїло висоту кожного рядка рахунку. `min-width:0` — щоб довгий
   артикул не розсував рядок; `align-self:auto` знімає верхнє вирівнювання, яке
   `.wh-cpx` ставить для колонкового батька, а тут читалося б як зсув артикула
   вгору відносно посилання. Посилання не тисне на артикул (`flex:0 0 auto`) і
   відступ бере від флекса, а не від власного `margin` (`.wh-site` у таблиці
   товарів стоїть у рядку без гепа). */
.wh-invsl{display:flex;align-items:center;gap:10px;min-width:0}
.wh-invsl .wh-cpx{align-self:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.wh-invsl .wh-site{margin-left:0;flex:0 0 auto}
/* ── Копіювання КЛІКОМ по самому тексту (`.wh-cpx`) ──
   Для того, що нікуди не веде (артикул): окрема кнопка поруч із кнопкою назви
   змушувала б щоразу розбирати, котра з двох однакових іконок що копіює.
   `align-self` тримає клікабельну зону по ширині тексту, а не на весь рядок:
   `.wh-invnm` — колонковий флекс, і його діти інакше розтягуються на всю ширину. */
.wh-cpx{align-self:flex-start;max-width:100%;cursor:pointer;transition:color .12s}
.wh-cpx:hover{color:var(--green-d)}
.wh-cpx.ok{color:var(--green);font-weight:700}
.wh-cpx.ok::after{content:' ✓'}
.wh-invhave{font-size:.74rem;color:var(--muted)}
.wh-invrow.neg .wh-invhave b{color:var(--danger)}
/* Підписи над полями дрібні й усередині самої мітки: у рядку їх два, і винесені
   окремо вони подвоїли б висоту кожної позиції. */
.wh-invq2,.wh-invp{display:flex;flex-direction:column;gap:2px;font-size:.7rem;
  color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
/* Кількість ширша за ціну не тому, що число довше, а тому що поруч із ним живуть
   дві кнопки: «−» ліворуч, «+» праворуч. */
.wh-invq2{flex:0 0 138px}
.wh-invp{flex:0 0 118px}
/* Підпис ціни + кнопка копіювання — один рядок. Кнопка живе саме в підписі: у рядку
   рахунку вільного місця біля числа нема, а підпис однаково порожній праворуч.
   Відʼємні поля по вертикалі обовʼязкові: без них кнопка робить підпис ціни вищим за
   підпис кількості, і два сусідні поля перестають стояти на одній лінії (рядок
   центрує вміст). Бліда, поки на позицію не навели, — як і кнопка біля назви. */
.wh-invpl{display:flex;align-items:center;gap:2px}
.wh-invpcp{flex:0 0 auto;width:18px;height:18px;margin:-3px 0 -3px 1px}
.wh-invrow:hover .wh-invpcp{opacity:1}
/* Степер — один суцільний блок: кнопки й поле стикуються рамками, тому в поля
   збиваються радіуси з боків, де воно межує з кнопкою. Читається як одна деталь,
   а не як три окремі елементи, що випадково опинились поруч. */
.wh-invqs{display:flex;align-items:stretch}
.wh-invqs .wh-invqty{border-radius:0;text-align:center;padding:5px 4px}
.wh-invqs .wh-invqty:only-child{border-radius:8px}
.wh-qb{flex:0 0 30px;height:34px;box-sizing:border-box;border:1px solid var(--line);
  background:var(--bg);color:var(--text);cursor:pointer;font:inherit;font-size:1.05rem;
  font-weight:700;line-height:1;padding:0;display:flex;align-items:center;
  justify-content:center;user-select:none}
.wh-qm{border-radius:8px 0 0 8px;border-right:none}
.wh-qp{border-radius:0 8px 8px 0;border-left:none}
.wh-qb:hover{background:#fff;border-color:var(--green);color:var(--green-d)}
/* Кошик замість мінуса: на одній штуці «менше» означає вже не число, а прибрати
   рядок, і кнопка мусить попередити про це ДО кліку — кольором і значком. */
.wh-qm.is-del{font-size:.82rem;color:var(--danger)}
.wh-qm.is-del:hover{background:#fef2f2;border-color:var(--danger);color:var(--danger)}
/* Смуга з питанням — на всю ширину рядка, під полями: поля лишаються на місці
   (разом із прихованим `pid`), тож рахунок, записаний із відкритим питанням,
   позицію не втрачає.
   Клас — `wh-invask`, а НЕ `wh-invdel`: під тим іменем у списку рахунків ходить
   кнопка ✕ (гачок JS «видалити рахунок»), і поки стиль звався так само, кнопка
   отримувала `display:flex` — тобто ставала блоковою, падала під «Провести» й тягла
   за собою пунктирну риску та відступ звідси. Два різні елементи не мають права
   ділити одне ім'я класу, навіть якщо один зі стилів «все одно не спрацює». */
.wh-invask{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:8px;border-top:1px dashed #fecaca;font-size:.82rem}
.wh-invask span{flex:1 1 160px;color:var(--danger)}
.wh-invask b{overflow-wrap:anywhere}
/* Рядок із питанням переходить у два ряди — на десктопі теж (базовий `.wh-invrow`
   не переноситься): смуга мусить лягти ПІД поля, а не втиснутись між ними. */
.wh-invrow.is-del{border-color:#fecaca;background:#fef2f2;flex-wrap:wrap}
/* Два поля рядка — ОДНЕ І ТЕ САМЕ на вигляд: однакова висота, шрифт, рамка, радіус.
   `appearance:none` + прибрані стрілки `number` — саме через них «К-сть» була нижча й
   вужча за «Ціну» й читалась як поле іншого сорту. `box-sizing` обовʼязковий: без нього
   `width:100%` + padding дають різну підсумкову ширину в різних типах інпутів. */
.wh-invqty,.wh-invprice{box-sizing:border-box;width:100%;height:34px;padding:5px 9px;
  border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.92rem;
  font-weight:700;text-align:right;background:#fff;color:var(--text);appearance:none;
  -webkit-appearance:none;-moz-appearance:textfield}
.wh-invqty::-webkit-outer-spin-button,
.wh-invqty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wh-invqty:focus,.wh-invprice:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.wh-invqty[disabled],.wh-invprice[disabled]{opacity:.7;cursor:default;background:var(--bg)}
/* `.wh-invline` (сума рядка) прибрана з розмітки: вона дослівно повторювала «ціна ×
   кількість» із сусідніх полів, а при кількості 1 — просто дублювала ціну. */
.wh-invx{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);cursor:pointer;font:inherit;line-height:1}
.wh-invx:hover{border-color:var(--danger);color:var(--danger);background:#fef2f2}

/* Підсумок — зеленою плашкою в колір «Провести»: це вже не ввід, а відповідь, і
   вона мусить читатись окремо від полів над нею. Усе на ній — біле (зокрема сама
   сума: зелене по зеленому не читалось би). */
.wh-invsum{margin-top:12px;background:var(--green);color:#fff;border-radius:11px;
  padding:10px 14px;font-size:.85rem}
.wh-invsum .muted{color:rgba(255,255,255,.82)}
.wh-invsum .wh-cl.big{border-top:none;margin-top:0;padding-top:0}
.wh-invsum .wh-cl.big b{color:#fff}
.wh-invsum .wh-cl.big i{color:rgba(255,255,255,.82)}
/* Попередження про курс живе всередині `.wh-cl.big b` — без цих же класів у
   селекторі воно програло б за специфічністю правилу вище і побіліло. */
.wh-invsum i.warn,
.wh-invsum .wh-cl.big i.warn{color:#fff3c4}
/* ⧉ біля суми — копіювання числа без пробілів. Стоїть ПЕРЕД сумою, тому мусить бути
   дрібнішою за неї (успадкований від `.wh-cl.big b` розмір 1.15rem зробив би з кнопки
   другу головну річ у плашці) і напівпрозорою, поки на неї не навели. */
.wh-sumcp{margin-right:7px;padding:1px 6px;border:1px solid rgba(255,255,255,.45);
  border-radius:6px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:700;line-height:1.35;vertical-align:1px}
.wh-sumcp:hover{background:rgba(255,255,255,.26);border-color:#fff}
.wh-sumcp.done{background:#fff;border-color:#fff;color:var(--green-d)}

/* Галочка «Приховати залишки складу» — одразу під зеленою плашкою підсумку.
   Коробка та сама, що й у решті галочок панелі, але ЖОВТА в увімкненому стані, а не
   зелена: зелений тут скрізь означає «зроблено, все на місці», а ця галочка навпаки —
   каже, що у вікні зараз видно НЕ ВСЕ. Жовтий помітний рівно настільки, щоб згадати
   про неї, коли рахунок відкрили для себе, а вона лишилась увімкненою з учора. */
.wh-invhck{margin:0}
.wh-invhck:has(input:checked){border-color:#fde68a;background:#fffbeb;color:#854d0e}
.wh-invhck input{accent-color:#a16207}

/* Рядок інструментів під підсумком: галочка «Приховати залишки» + форма зміни цін.
   `wrap` — бо на телефоні дві коробки в один рядок не стають, і без переносу форма
   поїхала б за край вікна. Власні відступи галочки зняті вище (`margin:0`): у флексі
   проміжки роздає контейнер, інакше блоки стояли б на різній висоті. */
.wh-invtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}

/* Форма зміни цін — така сама «пігулка» 34px, що й галочка поруч: обидві коробки
   роблять із документом щось поверх нього, і різні за виглядом вони читались би як
   різні за вагою. Синій обвід у фокусі — щоб було видно, куди набирається число,
   коли форму викликали з клавіатури. */
.wh-invpct{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 6px 0 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:.83rem;color:var(--muted)}
.wh-invpct[hidden]{display:none}
.wh-invpctl{white-space:nowrap}
/* Поле під число на 5-6 знаків («-12,5»), а не на всю ширину: широке поле в цьому
   рядку обіцяло б, що туди пишуть щось довше за відсоток. `text-align:right` — знак
   і кома лишаються біля «%», тобто число читається як одне ціле з підписом. */
.wh-invpct input{width:62px;height:26px;padding:0 7px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--text);font:inherit;
  font-size:.85rem;font-weight:700;text-align:right}
/* Підказка «-2,9» — це ПРИКЛАД, а не набране число. Поле жирне й темне (щоб набраний
   відсоток читався здалеку), і цей самий стиль діставався плейсхолдеру — порожня форма
   виглядала заповненою. Тому підказці окремо: світлий тон і звичайна вага. */
.wh-invpct input::placeholder{color:#d3dae4;font-weight:400;opacity:1}
.wh-invpct input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 2px rgba(22,163,74,.16)}
.wh-invpcts{font-weight:700;color:var(--text);margin-left:-2px}
.wh-invpct .btn{height:26px;padding:0 10px;line-height:24px;font-size:.8rem}
@media (max-width:560px){
  .wh-invtools{gap:7px}
  .wh-invpct{width:100%;justify-content:space-between}
  .wh-invpct input{width:72px}
}
/* Саме приховання. Два місця, де в вікні стоїть залишок: підпис під назвою позиції
   (`.wh-invhave`) і хвіст рядка знахідки (`.wh-invfs`, разом зі своїм роздільником —
   він навмисно всередині спана). Червона/жовта підсвітка рядків не чіпається: вона
   попереджає ТОГО, ХТО ВИПИСУЄ, і числа собою не називає. */
.wh-invbox.is-nohave .wh-invhave,
.wh-invbox.is-nohave .wh-invfs{display:none}

/* Кнопки під формою — рівно в тому порядку, в якому росте наслідок:
   закрити → записати → провести. «Провести» лишається праворуч (головна дія). */
.wh-invact{gap:10px;flex-wrap:wrap}
/* «Копіювати» і «Фінансовий звіт» — у ЛІВОМУ куті: вони нічого не роблять з
   документом (винос даних назовні й погляд на результат), і в ряду наслідків
   читались би як ще один крок оформлення.
   Ряд розштовхує `margin-left:auto` на ПЕРШІЙ кнопці правої групи, а не `margin-right`
   на лівих: «Фінансовий звіт» то є, то нема (лише в проведеному рахунку), і поки
   відступ висів на самій «Копіювати», зникла кнопка забирала з собою й розрив. */
.wh-invact [data-close]{margin-left:auto}
.wh-invcp.done{background:#f0fdf4;border-color:#bbf7d0;color:var(--green-d)}
.wh-invfin[hidden]{display:none}
.wh-invro{margin:10px 0 0;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:10px;
  padding:9px 13px;font-size:.84rem;color:#5b21b6}
.wh-invro[hidden]{display:none}
/* Проведений рахунок відкривається на читання: поля згаслі, дії сховані. */
.wh-invbox.is-ro .wh-invhrow input[disabled]{opacity:.75}

/* ══ Вікно «Внести в базу»: закупка на кілька товарів ══
   Розмітку рядка позиції ділить з рахунком (`.wh-invrow` і його нутрощі) — питання в
   обох те саме («що саме і скільки»), і другий набір класів під ті самі рядки означав
   би два місця, де їх треба однаково лагодити. Тут — лише те, чого в рахунку нема:
   дві суми закупки, поле «скільки з них припадає на цю позицію» і підсумок звірки. */
.wh-bulkbox{max-width:1000px;width:100%}
/* Кнопка в шапці списку — та сама зелена, що й решта головних дій, лише не переноситься
   разом із рядом перемикачів (мова / розмір сторінки), між якими вона стоїть. */
.wh-bulkb{white-space:nowrap}
.wh-bulkbox .wh-bulkf-src{flex:0 0 130px}
.wh-bulkbox .wh-bulkf-date{flex:0 0 160px}
/* Другий ряд реквізитів (трек, MEEST, примітка) — дрібнішим шрифтом підписів: це не
   те, за чим повертаються до документа, а те, що дописують, якщо знають. */
.wh-bulkrow2{margin-top:10px}

/* Дві суми — окремою плашкою, а не в ряду реквізитів: усе вікно нижче розписує саме
   їх, і вони мусять читатись як умова задачі, а не як ще два поля серед десяти. */
.wh-bulkmoney{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.wh-bulkmoney .lg-f{flex:0 0 220px}
/* Поля рівняються НИЗОМ, а не верхом: підписи в ряду різної довжини й на вужчому вікні
   один із них переноситься в два рядки — тоді при рівнянні згори його поле з'їжджає
   на рядок нижче за сусіднє, і ряд «гуляє». Знизу ж поля стоять в одну лінію завжди,
   скільки б рядків не забрав підпис. */
.wh-bulkbox .wh-invhrow .lg-f,
.wh-bulkmoney .lg-f{justify-content:flex-end}
.wh-bulkhint{flex:1 1 220px;margin:0;align-self:center;font-size:.78rem;color:var(--muted)}
.wh-bulkhint b{color:var(--text)}

/* Поле вартості позиції: число + одиниця (%, $, ₴) однією деталлю, як степер кількості
   поруч. Ширше за «Ціну» в рахунку рівно на випадаючий список. */
.wh-bulkamt{display:flex;flex-direction:column;gap:2px;font-size:.7rem;color:var(--muted);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex:0 0 152px}
.wh-bulkas{display:flex;align-items:stretch}
.wh-bulkas .wh-bkval{border-radius:8px 0 0 8px;border-right:none;text-align:right}
.wh-bkunit{flex:0 0 52px;height:34px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:0 8px 8px 0;background:var(--bg);color:var(--text);font:inherit;
  font-size:.92rem;font-weight:700;text-align:center;cursor:pointer;padding:0 4px}
.wh-bkunit:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
/* «Решта» — дрібна службова кнопка, а не дія рівня «Внести»: вона лише добиває цент
   заокруглення, і виглядати мусить відповідно. */
.wh-bkrest{flex:0 0 auto;align-self:flex-end;height:34px;padding:0 9px;border-radius:8px;
  border:1px dashed var(--line);background:var(--bg);color:var(--muted);cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:700}
.wh-bkrest:hover{border-style:solid;border-color:var(--green);color:var(--green-d);background:#f0fdf4}
/* Курсив у підписі рядка (частка доставки) — дрібніший і сірий: це не те, що вписували,
   а те, що порахувалось само. */
.wh-bulkrow .wh-invhave i{font-style:normal;opacity:.75}
.wh-bulkrow .wh-invhave b{color:var(--text)}

/* Підсумок звірки — темною плашкою, а не зеленою: зелена в рахунку означає «готово
   провести», а тут плашка живе в обох станах (сума зійшлась і ні), і постійний зелений
   читався б як «усе гаразд» саме тоді, коли гроші не сходяться. Колір відповіді несуть
   самі рядки. */
.wh-bulksum{margin-top:12px;background:#0f172a;color:#e2e8f0;border-radius:11px;
  padding:9px 14px;font-size:.85rem;display:flex;flex-direction:column;gap:3px}
.wh-bkline{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wh-bkline b{font-weight:800;white-space:nowrap;color:#fff}
.wh-bkline i{font-style:normal;font-size:.8rem;font-weight:600;color:#94a3b8}
/* Складові повної суми («Товар», «Доставка в Україну») — тихіше за сам підсумок:
   вони пояснюють, звідки взялось число «Разом до розпису», а не питають уваги. */
.wh-bkline.sub{font-size:.82rem}
.wh-bkline.sub span,.wh-bkline.sub b{color:#94a3b8;font-weight:600}
.wh-bkline.warn b{color:#fca5a5}
.wh-bkline.warn span{color:#fca5a5}
.wh-bkline.ok b{color:#4ade80}
.wh-bkq{color:#94a3b8}
.wh-bkq b{color:#e2e8f0}
/* «Порівну» — у лівому куті серед дій, що документа не міняють (як «Копіювати» в
   рахунку): вона лише заповнює поля. Розрив до правої групи робить вона сама
   (`margin-right:auto`), а не відступ на «Закрити»: правило `.wh-invact [data-close]`
   живе лише у вікні рахунку, і тягти сюди його клас заради одного відступу означало б
   притягти й решту його поведінки. */
.wh-bulkeq{margin-right:auto}
.wh-bulkeq[disabled]{opacity:.5;cursor:default}
.wh-bulkeq[disabled]:hover{background:var(--bg);border-color:var(--line);color:var(--text)}

@media (max-width:760px){
  /* На телефоні рядок позиції розкладається у два яруси: назва зверху, поля під нею —
     інакше поле вартості з випадаючим списком витісняє назву товару за край. */
  .wh-bulkrow{flex-wrap:wrap}
  .wh-bulkrow .wh-invnm{flex:1 1 100%;order:1}
  .wh-bulkrow .wh-invth{order:0}
  .wh-bulkrow .wh-invq2,.wh-bulkrow .wh-bulkamt{flex:1 1 130px;order:2}
  .wh-bulkrow .wh-bkrest,.wh-bulkrow .wh-invx{order:3}
  .wh-bulkmoney .lg-f{flex:1 1 140px}
}

/* ── Друк рахунку (А4) ──
   Аркуш `.wh-pr` лежить у сторінці постійно й на екрані не існує взагалі. Друк не
   відкриває нове вікно (його ріжуть блокувальники) і не перебудовує сторінку.
   Перед друком JS переносить аркуш у ПРЯМІ ДІТИ `<body>` — саме тому тут можна
   гасити сторінку найпростішим способом: `body>*{display:none}` і виняток для аркуша.

   Перша редакція гасила сторінку через `body *{visibility:hidden}` (щоб не прибрати
   аркуш разом із предками) — і мала обидві хвороби, які з цього ростуть:
     • `visibility:hidden` ЗБЕРІГАЄ РОЗМІТКУ: погашена панель далі займала свою висоту,
       і рахунок на три рядки друкувався на трьох аркушах, з яких два порожні;
     • аркуш стояв `position:absolute;width:100%`, тобто в ширину БЛОКУ-КОНТЕЙНЕРА, а
       не сторінки друку. Панель широка (таблиці на весь екран) — і текст ліз за поля,
       не рятував і масштаб у діалозі друку.
   Тепер аркуш звичайний блок у порожньому потоці: висота = його власна, ширина =
   ширина друкованої сторінки. */
.wh-pr{display:none}
.wh-prbox{max-width:520px}
.wh-prck{margin:2px 0 6px}
@media print{
    /* Поля друку — НЕ `@page{margin}`, а власний `padding` аркуша (нижче). `@page`
       перебиває налаштування «Поля» в діалозі друку: варто там колись стояти «Немає»
       (а воно памʼятається між друками), і рахунок друкується впритул до країв аркуша.
       Padding — звичайний CSS, діалогу не підвладний, тож поля є завжди й однакові.
       Самому `@page` лишаємо `margin:0`: інакше в тих, у кого діалог на «За
       замовчуванням», поля склались би вдвічі. */
    @page{size:A4;margin:0}
    /* Панель — це екранний застосунок: у неї є фіксовані висоти й `overflow`, які на
       папері обертаються обрізаним чи розтягнутим аркушем. Знімаємо все підряд. */
    html,body{width:auto!important;height:auto!important;min-height:0!important;
      margin:0!important;padding:0!important;background:#fff!important;
      overflow:visible!important}
    body>*{display:none!important}
    body>.wh-pr{display:block!important;box-sizing:border-box;width:100%;max-width:100%;
      margin:0;padding:14mm 12mm;color:#000;font-size:11pt;line-height:1.35}
    .wh-prtop{display:flex;align-items:baseline;gap:10px;
      border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:8px}
    .wh-prt{font-size:18pt;font-weight:800}
    .wh-prd{font-size:11pt}
    .wh-prcl{margin-bottom:9px}
    /* `table-layout:fixed` — не косметика: без нього колонку «Товар» роздуває найдовша
       назва, і таблиця виходить ширшою за аркуш (браузер таблиці НЕ переносить).
       Ширини задані у відсотках від сторінки, решта — назві; довге слово ламається
       `overflow-wrap`, бо артикули бувають без пробілів. */
    .wh-prtbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:10pt}
    .wh-prtbl th,.wh-prtbl td{border:1px solid #999;padding:3px 5px;
      text-align:left;vertical-align:top;overflow-wrap:anywhere}
    /* Сірий заголовок таблиці друкується лише з дозволом на кольори тла — без
       `print-color-adjust` браузер вибілює його «щоб зекономити фарбу». Не біда,
       якщо все ж вибілить: рамки тримають структуру самі. */
    .wh-prtbl th{background:#eee;font-size:9.5pt;
      -webkit-print-color-adjust:exact;print-color-adjust:exact}
    .wh-prtbl .n{text-align:right}
    /* Ширини: усе, що НЕ назва, — у своїх мінімумах, решта аркуша (≈50%) лишається
       назві. Раніше артикул забирав 18%, а числові колонки — ще 38%, і назва тулилась
       у третину сторінки, перетворюючись на п'ять рядків по два слова. Числа коротші
       за свої заголовки («К-сть», «Ціна, грн»), тож звужувати їх безпечно. */
    .wh-prtbl .c1{width:5%;text-align:right}
    .wh-prtbl .c2{width:14%}
    .wh-prtbl .cq{width:8%}
    .wh-prtbl .cp{width:11.5%}
    .wh-prtbl .cs{width:12.5%}
    /* Заголовок повторюється на кожному аркуші, рядок не розривається між ними:
       рахунок на два десятки позицій — звичайна справа. */
    .wh-prtbl thead{display:table-header-group}
    .wh-prtbl tr{page-break-inside:avoid}
    .wh-prnm{display:block;font-weight:600}
    .wh-prhv{display:block;margin-top:2px;font-size:8.5pt;color:#444}
    .wh-prsum{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
      border-top:2px solid #000;padding-top:6px;font-size:13pt}
    .wh-prsum b{font-size:15pt;white-space:nowrap}
    .wh-prusd{text-align:right;font-size:10pt;color:#333}
    .wh-prnote{margin-top:10px;font-size:10pt}
}

/* ── Розгорнуте вікно рахунку («⤢ Розгорнути») ──
   Звичайний режим тримає перелік позицій у стелі 330px — щоб рахунок на дві позиції
   не був порожнім прямокутником на пів екрана. У документі на два десятки позицій та
   сама стеля означає читати його в щілину, прокручуючи ВСЕРЕДИНІ вікна, яке саме
   стоїть посеред порожнього екрана. Розгорнутий режим фіксує ВИСОТУ коробки під
   екран (`height`, а не `max-height`: інакше коробка лишиться по контенту й розтягне
   лише порожнечу під списком), а перелік робить єдиним, хто цю висоту ділить, —
   `flex:1` забирає все, що лишилось під шапкою й над кнопками.
   `min-height` — щоб на низькому екрані список не стиснуло в нуль: тоді прокрутку
   візьме на себе сама коробка (`.modal-box` уже має `overflow-y:auto`).
   Ширина теж більша: рядок позиції — назва, кількість, ціна й залишок в один рядок,
   і зайві 280px знімають переноси в назвах. */
.wh-invbox.is-exp{max-width:1200px;
  height:calc(100vh - 40px);height:calc(100dvh - 40px)}
.wh-invbox.is-exp .wh-invlist{flex:1 1 auto;max-height:none;min-height:120px}

/* ── Рахунок, показаний РАМКОЮ (`body.wh-solo`) — 13.09.2026 ──
   З журналу продажів рахунок відкривають вікном, а всередині того вікна стоїть
   рамка зі СПРАВЖНЬОЮ сторінкою реалізації. Доти в рамку їхала ціла сторінка —
   заголовок «Виписати рахунок», панель пошуку, список документів, — а форма
   рахунку лягала поверх неї своїм спливаючим вікном із власною підкладкою й
   шапкою. Виходило вікно у вікні: дві рамки, два заголовки «Рахунок №…», два ✕
   і чужий список, що просвічує крізь затемнення.
   Тут форма перестає бути вікном і стає САМОЮ сторінкою рамки: підкладки нема,
   коробка на всю ширину й висоту рамки, кутів і тіні теж нема — межу малює вже
   вікно-господар. Оточення (заголовок, панель, список) сторінка в цьому режимі
   не друкує взагалі (`$iSolo` у `warehouse/index.php`).
   `[hidden]` переписуємо явно: наш `display` сильніший за `.modal[hidden]`, і без
   цього порожня форма блимала б, поки вантажиться сам документ.
   Висота — як у розгорнутого режиму: коробка рівно в рамку, перелік позицій
   забирає все, що лишилось, і прокручується всередині себе (а не разом з усією
   сторінкою, щоб шапка документа й кнопки лишались на місці). */
body.wh-solo .content{padding:0}
body.wh-solo #whInv{position:static;display:block;z-index:auto;background:none;
  padding:0;overflow:visible;overscroll-behavior:auto}
body.wh-solo #whInv[hidden]{display:none}
body.wh-solo .wh-invbox{width:100%;max-width:none;border-radius:0;box-shadow:none;
  padding:12px 14px;max-height:none;height:100vh;height:100dvh}
/* Шапка форми й «Розгорнути» зайві: заголовок зі станом документа й ✕ несе
   вікно-господар (`wh-invtitle` летить йому повідомленням), а розгортати нема
   куди — форма вже на всю рамку. */
body.wh-solo .wh-invbox>.modal-head,
body.wh-solo .wh-invexp{display:none}
body.wh-solo .wh-invlist{flex:1 1 auto;max-height:none;min-height:120px}

/* ── Вікно «Фінансовий результат рахунку» ──
   Ширше за вікно рахунку під ним (920px): у ньому таблиця з п'яти колонок, з яких
   чотири — числа з підписами («Сума, грн», «Собів., $», «Результат, $»), і в 760px
   вони не влазили: заголовки ламались по складах, а назва товару відбирала решту.
   Задум «вікно-відповідь має бути дрібнішим за документ» тут програв читабельності:
   відповідь, яку доводиться розбирати, гірша за вікно, що перекриває рахунок. */
.wh-finbox{width:min(1080px,100%);max-width:1080px}
/* Числові колонки не переносяться: «1 250» на два рядки читається як два числа. */
.wh-fintbl2 .wh-c-num{white-space:nowrap}
/* Плитки — та сама сітка, що в розділі «Продаж» звіту, лише дрібніша: числа тут
   читають у вікні поверх вікна, а не на весь екран. */
.wh-finst{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin-bottom:14px}
.wh-fintile{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;display:flex;flex-direction:column;gap:3px}
.wh-fintile.ok{border-color:#bbf7d0;background:#f0fdf4}
.wh-fintile.neg{border-color:#fecaca;background:#fef2f2}
.wh-fintile.neg .wh-stt-v{color:var(--danger)}
.wh-fintile .wh-stt-v{font-size:1.22rem}
/* Таблиця позицій — власна прокрутка: у рахунку буває й двадцять рядків, а вікно не
   має виростати вище екрана (див. правило про модалки, вищі за viewport). Скролиться
   САМЕ ТІЛО, а не вся коробка: `.modal-box` уже має свій `max-height` + `overflow`, і
   без `min-height:0` тіло відмовилось би стискатись — тоді прокрутки виходило дві,
   вкладені одна в одну. Заголовок і «Закрити» при цьому лишаються на місці. */
.wh-fintbl2{margin:0}
.wh-fintbl2 td,.wh-fintbl2 th{padding:6px 8px}
#whInvFinBody{min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Застереження про дірку в числі — бурштинове, як `.wh-stt-warn`: це не помилка
   (результат порахований), а попередження, що він неповний. */
.wh-finwarn{margin:12px 0 0;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:8px 12px;font-size:.82rem;color:#92400e;line-height:1.45}

@media (max-width:900px){
  /* Шапка: кнопка «Створити рахунок» на телефоні йде під заголовок на всю ширину —
     у ряд із текстом вона стискалась до двох рядків підпису. */
  .wh-invhead,.sl-head{flex-direction:column;align-items:stretch}
  .wh-invtbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Позиція рахунку на вузькому екрані — двома рядами: назва зверху, поля під нею.
     Інакше поле ціни лишалось шириною в чотири символи. */
  .wh-invrow{flex-wrap:wrap}
  .wh-invnm{flex:1 1 100%;order:1}
  .wh-invth{order:0}
  .wh-invq2,.wh-invp{order:2;flex:1 1 90px}
  /* На телефоні кількість не стискається до ширини самого числа: інакше «−» і «+»
     стають вужчі за палець — а саме там ними й користуються найчастіше. */
  .wh-invq2{flex:1 1 138px}
  .wh-qb{flex:0 0 36px}
  .wh-invx{order:4}
  .wh-invask{order:5}
  .wh-invhrow .wh-invf-no,.wh-invhrow .wh-invf-rate{flex:1 1 120px}
}

/* ══════════ Архів старої панелі обліку («Стара база») ══════════
   Вікно ЛИШЕ ЧИТАЄ: жодне число звідси не бере участі в наявності чи собівартості.
   Тому й оформлення підкреслено спокійне — сірувата шапка групи, приглушені рядки:
   воно не має конкурувати очима з живим журналом операцій на тій самій сторінці. */
/* Плитка архіву в переліку операцій — СІРА: сусідні дві міняють склад, ця лише
   відкриває довідку, і зелений кружок читався б як така сама дія над товаром. */
.wh-op-arc:hover{border-color:var(--muted);background:var(--bg)}
.wh-op-arc .wh-op-i{background:var(--muted);font-size:1.05rem}

/* Ширину задаємо `width`, а не саме лише `max-width`: базовий `.modal-box` має
   `width:min(420px,100%)`, і без перекриття таблиця з дев'яти колонок стиснулась би
   в смужку. Дев'ять колонок + коментар — це найширше вікно в панелі. */
.wh-lgbox{width:min(1180px,100%);max-width:1180px}
.wh-lgbody{display:flex;flex-direction:column;gap:18px}

.wh-lghead{border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  background:var(--bg);display:flex;flex-direction:column;gap:8px}
.wh-lghead>b{font-size:1rem;line-height:1.35}
.wh-lgsub{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--muted)}

/* Підсумки старої картки — плитками в один ряд, як на сторінці обліку: питання
   «скільки лишалось і почому» те саме, і відповідь має виглядати так само. */
.wh-lgst{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.wh-lgtile{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.wh-lgt-l{font-size:.76rem;color:var(--muted)}
.wh-lgt-v{font-size:1.02rem;font-weight:800}
.wh-lgwarn{margin:0;font-size:.82rem;color:var(--danger);line-height:1.4}

/* Таблиця архіву прокручується САМА, а не разом із вікном: підсумки групи мусять
   лишатись на очах, поки гортають тисячу рядків операцій. */
.wh-lgscroll{overflow:auto;max-height:52vh;border:1px solid var(--line);border-radius:11px}
.wh-lgtbl{width:100%;min-width:900px;font-size:.85rem;margin:0}
.wh-lgtbl th{position:sticky;top:0;z-index:1;background:var(--panel)}
.wh-lgtbl td{vertical-align:top}
/* Тип операції — кольором рядка, як у старій панелі (там продаж був зеленим,
   повернення червоним): архів звіряють із нею, і власна палітра лише плутала б. */
.wh-lgtbl tr.lg-out td{background:rgba(22,163,74,.07)}
.wh-lgtbl tr.lg-back td{background:rgba(220,38,38,.07)}
/* Коментар — з переносами рядків: там треки, номери замовлень eBay і розрахунок
   посилки стовпчиком. Ширину обмежуємо, інакше один довгий коментар розтягує
   всю таблицю й решта колонок стискається в нечитабельне. */
.wh-lgcm{white-space:pre-line;max-width:420px;font-size:.78rem;color:var(--muted);
  line-height:1.4;word-break:break-word}

@media (max-width:900px){
  .wh-lgscroll{max-height:60vh}
  .wh-lgcm{max-width:240px}
}

/* ══════════ Журнал операцій товару: зріз, підсумки, колонка замовлення ══════════ */
/* Значок джерела + номер замовлення в ОДИН рядок (див. коментар у розмітці). */
.wh-ordline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wh-ordno{white-space:nowrap}

/* Перемикач зрізу журналу — ті самі таблетки, що в списку товарів (`.wh-mode`),
   лише поставлені в рядок із заголовком. Власних кольорів не заводимо: два різні
   вигляди одного й того ж перемикача в одному розділі довелось би щоразу впізнавати
   наново. */
.wh-jmodes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.85rem}

/* Перемикач ПОРЯДКУ — ті самі таблетки, але з підписом і трохи приглушені: у рядку
   заголовка їх тепер два набори поспіль, і без підпису («Порядок:») другий читався б
   як продовження зрізу. Відсунутий управо (`margin-left:auto`), поки ширина дозволяє:
   зріз відповідає на «що показати», порядок — на «як розкласти», і злиті в одну купу
   вони виглядають як п'ять рівноправних кнопок. */
.wh-jord{margin-left:auto}
.wh-jord-l{color:var(--muted);font-size:.8rem}
.wh-jord .wh-mode{font-size:.8rem;opacity:.9}
.wh-jord .wh-mode.on{opacity:1}
@media(max-width:900px){.wh-jord{margin-left:0}}

/* Підсумковий рядок зрізу. Не «ще один рядок таблиці»: смуга зверху й фон
   відділяють підсумок від операцій, інакше він читається як 51-ша операція. */
.wh-sttot td{background:var(--bg);border-top:2px solid var(--line);font-weight:600}
.wh-sttot .wh-tot-p{color:var(--green-d)}
.wh-sttot .wh-tot-m{color:var(--danger)}


/* ═══════════════════════════════════════════════════════════════════════════
   Розділ «Інструменти» (/tools/) — резервне копіювання й відновлення бази.
   Префікс .tb-* (tools · backup). Нічого не перевизначає: усі кнопки, картки
   й таблиці беруться зі спільних .btn/.card/.tbl.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Рядок cron — окрема коробка, а не абзац тексту: це готовий до копіювання
   артефакт, і його треба бачити як предмет, а не як речення в поясненні. */
.tb-cron{margin:20px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.tb-cron-t{margin-bottom:10px;font-size:.95rem}
.tb-cron-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tb-cron-in{flex:1 1 420px;min-width:0;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--text);font-family:ui-monospace,Consolas,monospace;
  font-size:.82rem}
.tb-hint{margin-top:8px;color:var(--muted);font-size:.85rem;line-height:1.6}
/* Довга адреса/рядок cron не мусить розсувати сторінку вбік: дозволяємо перенос
   усередині слова саме тут, а не глобально для <code>. */
.tb-hint code{white-space:normal;overflow-wrap:anywhere}

/* Смуга ручного запуску */
.tb-run{margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.tb-run-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tb-opt{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.88rem;
  line-height:1.5;max-width:640px;cursor:pointer}
.tb-opt input{margin-top:2px}

/* Прогрес. Ширина заливки — єдина річ, яку рухає JS. */
.tb-bar{height:10px;margin:12px 0 6px;border-radius:99px;background:var(--bg);
  border:1px solid var(--line);overflow:hidden}
.tb-bar[hidden]{display:none}
.tb-bar i{display:block;height:100%;width:0;background:var(--green);transition:width .25s linear}
.tb-log{min-height:1.2em;color:var(--muted);font-size:.88rem}
.tb-green{color:var(--green-d);font-weight:600}
.tb-red{color:var(--danger);font-weight:600}
.tb-a{color:var(--green-d);font-weight:600}

/* Видалення за період */
.tb-prune{margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.tb-prune-h{font-weight:700;margin-bottom:6px}
.tb-prune-p{font-size:.88rem;line-height:1.6;max-width:820px}
.tb-prune-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.tb-prune-row label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:.88rem}
.tb-prune-row input[type=date]{padding:6px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--text)}
.tb-plan{margin-top:12px;font-size:.88rem}
.tb-plan-h{margin:10px 0 6px;font-weight:600}
.tb-plan-l{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tb-plan-r{display:flex;gap:14px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid var(--line)}
.tb-plan-r:last-child{border-bottom:0}
/* Червоне/зелене підфарбування — не декор: це єдине, що відрізняє «піде» від
   «лишиться» на однакових за формою рядках плану. */
.tb-plan-del .tb-plan-r{background:#fef2f2}
.tb-plan-keep .tb-plan-r{background:#f0fdf4}
.tb-why{color:var(--green-d)}

/* Архів знімків */
.tb-h2{margin:26px 0 10px;font-size:1.1rem;font-weight:700}
.tb-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.tb-item{border-bottom:1px solid var(--line)}
.tb-item:last-child{border-bottom:0}
.tb-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;cursor:pointer}
.tb-head:hover{background:var(--bg)}
.tb-caret{color:var(--muted);width:12px}
.tb-when{min-width:200px}
.tb-when .muted{margin-left:6px;font-size:.85rem}
.tb-facts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.88rem}
.tb-facts b{color:var(--text)}
.tb-src{padding:2px 8px;border-radius:99px;font-size:.75rem;font-weight:700}
.tb-src-c{background:#eef2ff;color:#3730a3}
.tb-src-m{background:#f1f5f9;color:var(--muted)}
.tb-bad{color:var(--amber);font-weight:700}
.tb-act{margin-left:auto}
.tb-body{padding:4px 14px 12px 38px;background:var(--bg);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px}
.tb-body[hidden]{display:none}
.tb-brow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:.85rem}
.tb-bhead{grid-column:1/-1;font-weight:600;padding-bottom:6px;display:block}
.tb-runs td{font-size:.88rem}
.tb-warn{margin-top:18px}

@media (max-width:620px){
  .tb-head{gap:8px}
  .tb-when{min-width:100%}
  .tb-act{margin-left:0;width:100%}
  .tb-act .btn{width:100%}
  .tb-body{grid-template-columns:1fr;padding-left:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   «Інструменти» → «Налаштування сайту» (/tools/?page=siteconfig).
   Префікс .sc-* (site config). Розклад опрацювання замовлень вітрини: тижневі
   години, канікули, винятки-дати, календар і приклади. Кнопки, картки й таблиці —
   спільні (.btn/.card/.tbl/.lg-f), тут лише те, чого в них нема.
   ═══════════════════════════════════════════════════════════════════════════ */

.sc-form .card{margin-bottom:16px}
/* Дві картки поруч на ПК і одна під одною на вузькому: «Тижневий розклад» і
   «Канікули» правлять разом (поїхав — прибрав години, повернувся — повернув). */
.sc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;
  align-items:start}
.sc-cols .card{margin:0}
.sc-card{margin-top:16px}
.sc-card .muted.sm{margin:0 0 12px}

/* ── Попередній перегляд ──
   Найважливіший блок сторінки: рядок, який ПРЯМО ЗАРАЗ бачить покупець. Тому
   моноширинного вигляду тут нема — він мусить читатись так само, як на сайті. */
.sc-prev{margin-top:22px}
.sc-prev-l{padding:5px 0;line-height:1.5}
.sc-prev-lang{display:inline-block;min-width:34px;margin-right:6px;padding:1px 7px;
  border-radius:99px;background:var(--bg);border:1px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--muted);text-align:center}
.sc-prev-at{margin-top:8px}

/* ── Тижневий розклад ──
   Рядок дня — сітка, а не flex: назви днів різної довжини («Ср» проти «Понеділок»),
   і при flex поля часу стояли б у кожного рядка на своїй відстані від краю. */
.sc-week{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sc-day{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line)}
.sc-day:last-child{border-bottom:0}
.sc-day-n{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.sc-day-h{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}
.sc-day-h input[type=time]{padding:5px 7px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);font:inherit;font-size:.88rem}
/* Вихідний день не ховає свої години, а ГАСИТЬ їх: коли галочку повернуть, час має
   лишитись тим самим, а не набиратись заново. Замість них у рядку зʼявляється слово
   «вихідний» — інакше зблідлі 10:00–18:00 читались би як «працюємо, просто сіро». */
.sc-day-off{display:none;color:var(--muted);font-size:.82rem;font-style:italic}
.sc-day.off{background:var(--bg)}
.sc-day.off .sc-day-n b{color:var(--muted);font-weight:600}
.sc-day.off .sc-day-h{display:none}
.sc-day.off .sc-day-off{display:inline}
.sc-react{max-width:220px;margin-top:14px}
.sc-on{margin-top:14px}

/* ── Канікули ── */
.sc-vacd{margin-top:12px}
.sc-note{margin-top:10px}

/* ── Винятки за датами ──
   Рядок переноситься (`flex-wrap`), бо в ньому пʼять полів: на телефоні вони стають
   двома-трьома рядками, і це краще за горизонтальну прокрутку всієї сторінки. */
.sc-exc-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid var(--line)}
.sc-exc-r:last-child{border-bottom:0}
.sc-exc-r input[type=date],.sc-exc-r input[type=time],.sc-exc-r input[type=text],
.sc-exc-r select{padding:6px 9px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);font:inherit;font-size:.88rem}
.sc-exc-r input[type=text]{flex:1 1 160px;min-width:0}
.sc-exc-h{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}
.sc-exc-h[hidden]{display:none}
.sc-exc-r .btn{margin-left:auto}
.sc-exc{margin-bottom:12px}

/* ── Календар ──
   Дні — плитками, а не таблицею: два тижні тут читають оком «де діри», а не рядок
   за рядком. Вихідний і виняток мають відрізнятись ще до читання підпису. */
.sc-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.sc-cal-i{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:.86rem}
.sc-cal-d{font-weight:800}
.sc-cal-w{color:var(--muted)}
.sc-cal-h{width:100%;font-weight:600;color:var(--green-d)}
.sc-cal-n{width:100%;color:var(--amber);font-size:.78rem;font-weight:600}
.sc-cal-i.off{background:var(--bg)}
.sc-cal-i.off .sc-cal-h{color:var(--muted);font-weight:400}
.sc-cal-i.exc{border-color:var(--amber)}

.sc-smp td{font-size:.88rem;vertical-align:top}
.sc-save{margin:18px 0 6px}

@media (max-width:620px){
  .sc-day{grid-template-columns:1fr}
  .sc-day-h{justify-content:flex-start}
  .sc-exc-r .btn{margin-left:0}
}

/* Телефонні години в календарі — другим, тихішим рядком під годинами опрацювання:
   це той самий день, а не окрема сутність. */
.sc-cal-p{width:100%;color:var(--muted);font-size:.78rem}
/* Попередній перегляд рядка шапки/підвалу — під основним, з відбивкою: два різні
   написи на сайті, і злиті в один список вони читались би як варіанти одного. */
.sc-prev-h{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* ─────────── OLX: перелік оголошень кабінету (/olx/?page=ads) ─────────── */
/* Смуга станів. Лічильник у кнопці — не прикраса: у кабінеті знятих і
   протермінованих оголошень утричі більше, ніж активних, і без числа кнопка
   «Зняті» виглядає як фільтр, у якому «мабуть, порожньо». */
.olx-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
/* Права колонка смуги: рядок «знято … · Оновити з OLX», а ПІД ним поле пошуку.
   У стовпчик, а не в один ряд: перше — довідка про свіжість знімка, друге — дія над
   переліком, і поставлені поруч вони читались би як одне речення. */
.olx-bar-r{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* Пошук по плитках. Відсіює на місці, у міру набирання — тому це поле, а не форма з
   кнопкою: кнопка «Знайти» тут обіцяла б перезавантаження, якого не буде. */
.olx-find{display:flex;gap:8px;align-items:center}
.olx-find-w{position:relative;display:inline-flex}
.olx-find-i{width:250px;max-width:60vw;padding:5px 26px 5px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);color:var(--text);font:inherit;font-size:.82rem}
.olx-find-i:focus{outline:none;border-color:var(--green)}
/* Хрестик з'являється, лише коли є що чистити: порожнє поле з кнопкою скидання
   виглядає як фільтр, що вже щось відрізав. */
.olx-find-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;padding:0;
  background:none;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer}
.olx-find-x:hover{color:var(--text);background:var(--bg)}
/* «Показано N з M» — ЗЛІВА від поля (перелік звужується праворуч наліво до самого
   поля) і лише поки в полі щось є: рахувати весь перелік проти самого себе нема сенсу. */
.olx-find-r{white-space:nowrap}
/* Плитка ховається класом, а не атрибутом `hidden`: у `.olx-ad` власний `display:flex`,
   і він переважив би `hidden`. */
.olx-hide{display:none!important}
/* Повідомлення «нічого не знайдено» — на всю ширину сітки, інакше воно стало б
   вузькою першою колонкою й читалось як обрізана плитка. */
.olx-find-no{grid-column:1/-1}
/* Смуга йшла ВПРИТУЛ до заголовка сторінки: правило `.page-head + …` знає лише про
   .card/.tbl/form, а `.olx-bar` має власний `margin:0` — кнопки станів налазили на
   абзац під заголовком. */
.page-head + .olx-bar{margin-top:18px}
/* Лічильник у кнопці. Окремий клас, а не спільний `.muted`: сірий по зеленому фоні
   активної кнопки не читався взагалі — саме число ставало найтемнішим місцем підпису,
   хоча заради нього кнопку й підписують. На активній — біле з легкою прозорістю
   (тихіше за назву, але читабельне), на решті — звичайний приглушений тон. */
.olx-n{color:var(--muted)}
.btn-primary .olx-n{color:#fff;opacity:.85}

/* Смуга сортування — другим рядком під станами. Окремий блок, а не продовження
   `.olx-bar`: стан («що показувати») і порядок («у якій послідовності») — різні
   питання, і зліплені в один ряд вони читались би як сім рівноправних кнопок. */
.olx-sort{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.olx-sort-l{margin-right:2px}
/* Стрілка показує ПОТОЧНИЙ порядок (а не той, що буде після натискання) — інакше
   довелось би здогадуватись, що саме зараз зверху. */
.olx-arw{font-weight:800;opacity:.9}

/* Смуга фільтра «не продавалось довше ніж …» — ТРЕТІМ рядком, окремо від сортування:
   те впорядковує перелік, а це його ВІДРІЗАЄ. Наслідок різний (там нічого не зникає,
   тут зникає), і в одному ряду кнопки читались би як рівноправні. */
.olx-filt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.olx-filt-f{display:flex;gap:6px;align-items:center;margin:0}
/* Поле під довільне число — вузьке навмисно: сюди вводять 45 чи 18, а не суму. */
.olx-filt-n{width:74px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--text);font:inherit;font-size:.82rem}
.olx-filt-u{padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--text);font:inherit;font-size:.82rem}
.olx-filt-n:focus,.olx-filt-u:focus{outline:none;border-color:var(--green)}
/* «Показано N з M» стоїть ПОРУЧ із фільтром, а не в підвалі списку: число без бази
   порівняння нічого не каже, а мовчки зниклі плитки читаються як загублений товар. */
.olx-filt-r{margin-left:auto}
/* Плитки, а не таблиця: оголошення впізнають за фотографією й назвою. `auto-fill`
   з мінімумом 220px сам вирішує, скільки колонок влізе — від телефона до 4K, без
   жодного медіа-запиту. */
.olx-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.olx-ad{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .12s, box-shadow .12s}
/* Рамка на наведення. Сітка широка — на великому екрані в рядку до шести плиток, і
   поки очима йдеш від фотографії до чисел під нею, губиш, у якій саме ти колонці.
   Обводка робиться `box-shadow`, а НЕ товщиною рамки: змінити `border-width` означало
   б посунути вміст плитки на піксель, і вся сітка сіпалась би під курсором. */
.olx-ad:hover{border-color:var(--green);box-shadow:0 0 0 2px rgba(22,163,74,.22)}
/* Неактивне оголошення притлумлене, але НЕ приховане: половина роботи тут —
   побачити, що колись висіло й скінчилось. Повна прозорість вертається на
   наведення, щоб роздивитись фото. */
.olx-ad.off{opacity:.62}
.olx-ad.off:hover{opacity:1}
/* Фіксоване вікно фото (4:3) — інакше різнокаліберні фотографії OLX рвуть сітку
   на рядки різної висоти. `contain`, а не `cover`: товар на білому тлі, і обрізати
   його краї означало б ховати саме те, за чим оголошення впізнають. */
.olx-ad-ph{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:#f8fafc;border-bottom:1px solid var(--line)}
.olx-ad-ph img{width:100%;height:100%;object-fit:contain;display:block}
/* Скільки всього фото в оголошенні — кутовий значок поверх першого. */
.olx-ad-n{position:absolute;right:6px;bottom:6px;background:rgba(15,23,42,.72);color:#fff;
  font-size:.72rem;font-weight:700;padding:1px 6px;border-radius:999px}
/* ── Гроші під оголошенням: смуга НАД карткою ──
   Стоїть першою, ще до фотографії: ціна на OLX і так видно, а рішення («опустити»,
   «підняти», «зняти») приймається за цими чотирма числами — вхідна ціна, націнка,
   гроші на полиці, давність продажу. Сітка 2×2, бо в колонку 220px чотири числа в
   рядок стають нечитабельними, а в стовпчик — забирають пів картки. */
.olx-ad-st{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.olx-ad-st-no{display:block;padding:8px 11px;background:var(--bg);line-height:1.35}
.olx-st-c{background:var(--bg);padding:6px 9px;min-width:0}
/* Підпис — дрібний і тихий: його читають один раз, а далі впізнають позицію в сітці. */
.olx-st-c i{display:block;font-style:normal;font-size:.68rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.olx-st-c b{display:block;font-size:.92rem;font-weight:800;line-height:1.25}
/* Другий рядок значення — той самий факт в іншій одиниці (гривні під доларом, дата
   під днями, штуки під сумою). Не дубль, а те, чим користуються, коли треба звірити
   з накладною чи з цінником. */
.olx-st-c u{display:block;text-decoration:none;font-size:.72rem;color:var(--muted);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Кольори — підказка, а не вердикт: червоне = продаємо дешевше, ніж купили;
   бузкове = націнка понад 100% (можливо, ціна відлякує); бурштинове = давно або
   жодного разу не продавалось. */
.olx-st-c b.bad{color:var(--danger)}
.olx-st-c b.hot{color:var(--violet)}
.olx-st-c b.warn{color:#b45309}
.olx-st-dup{grid-column:1/-1;background:#fffbeb;color:#b45309;padding:4px 9px;font-size:.72rem}
.olx-ad-b{padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px;flex:1}
/* Назва — рівно два рядки: далі йде опис, який на переліку не потрібен, а рвана
   висота карток заважає порівнювати ціни поглядом по колонці. */
.olx-ad-t{color:var(--text);font-weight:600;font-size:.9rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.olx-ad-t:hover{color:var(--green-d)}
.olx-ad-p{font-weight:800;color:var(--green-d)}
.olx-ad-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}
/* ── Скільки оголошення бачили ──
   Три числа з `GET /adverts/{id}/statistics` одним рядком під метаданими: перегляди,
   відкриття телефону, «в обраному». Рівні три колонки, а не текст через крапку: ці числа
   читають ПО КОЛОНЦІ, порівнюючи плитку з плиткою, і плаваюча ширина звела б порівняння
   нанівець. Тон тихий — це довідка до ціни, а не вердикт по товару. */
.olx-ad-vw{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.olx-ad-vw span{background:var(--bg);padding:4px 6px;min-width:0;text-align:center}
.olx-ad-vw i{display:block;font-style:normal;font-size:.64rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olx-ad-vw b{display:block;font-size:.86rem;font-weight:800;line-height:1.25}
/* Не нуль = є до кого повернутись: телефон відкривали, оголошення тримають в обраному.
   Саме ці два числа й перетворюють «просто лежить» на «варто чіпати ціну». */
.olx-ad-vw b.hot{color:var(--violet)}
/* Номер оголошення копіюється по кліку (без `#`/`№`) — його носять у пошук OLX і в
   картку товару. Пунктир, а не підкреслення: суцільна лінія читалась би посиланням
   на іншу сторінку, а нікуди тут не переходять. */
.olx-ad-id{font-family:ui-monospace,Menlo,Consolas,monospace}
.olx-ad-id[data-cp]{cursor:pointer;border-bottom:1px dotted var(--border);transition:color .12s,border-color .12s}
.olx-ad-id[data-cp]:hover{color:var(--green-d);border-bottom-color:var(--green-d)}
/* «Вхідна ціна» — єдине число в цій сітці, за яким ходять питати «а звідки воно?»:
   відповідь лежить у приходах товару. Тому посиланням стає КЛІТИНКА ЦІЛКОМ, а не одне
   слово в ній: влучити мишею в підпис у 0.68rem, коли в рядку шість плиток, годі. */
a.olx-st-c{color:inherit;text-decoration:none;transition:background .12s}
a.olx-st-c:hover{background:var(--panel)}
a.olx-st-c:hover b{color:var(--green-d)}
/* ── Ціна = і показ, і поле правки ──
   Клік по ціні підміняє її формою НА ТОМУ Ж МІСЦІ. Тому ціна тут — `<button>`, і в неї
   треба зняти всю кнопкову зовнішність, лишивши саме число: рамку, тло, відступи й
   вирівнювання по центру. Пунктир знизу — єдиний натяк, що по числу можна клікнути;
   повноцінне підкреслення читалось би як посилання кудись, а нікуди воно не веде. */
button.olx-ad-p{background:none;border:0;padding:0;font:inherit;font-weight:800;
  color:var(--green-d);text-align:left;cursor:pointer;
  border-bottom:1px dashed transparent;align-self:flex-start}
button.olx-ad-p:hover{border-bottom-color:var(--green-d)}
.olx-ad-pb[hidden]{display:none}
/* Ширина поля в `em`, а не в пікселях: у гривневій ціні чотири-пʼять цифр, і поле під
   них має бути рівно таким — довше читалось би як «сюди можна вписати що завгодно». */
.olx-pf{display:flex;align-items:center;gap:5px}
/* `hidden` окремим правилом: атрибут програє власному `display:flex` вище, і без цього
   рядка форма стояла б розкритою на кожній плитці. */
.olx-pf[hidden]{display:none}
/* Скасувати — хрестик, а не друга кнопка: «Змінити» тут одна дія, і рівноважна пара
   кнопок питала б, яку з них натиснути, там де відповідь очевидна. */
.olx-pf-x{background:none;border:0;padding:0 2px;font-size:1.1rem;line-height:1;
  color:var(--muted);cursor:pointer}
.olx-pf-x:hover{color:var(--danger)}
.olx-pf-i{width:5.2em;min-width:0;padding:3px 6px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);color:var(--text);font:inherit;font-weight:700;
  -moz-appearance:textfield}
/* Стрілки number-поля тут зайві: вони забирають половину ширини й ловлять колесо миші
   під час гортання переліку — тобто міняють ціну тоді, коли її ніхто не чіпав. */
.olx-pf-i::-webkit-outer-spin-button,
.olx-pf-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Два виходи з плитки: в картку товару (правити все, що не ціна) і в пошук того ж
   артикула на самому OLX (побачити, за скільки те саме продають поруч). Тихі, дрібні й
   унизу — ними користуються після того, як подивились на числа, а не замість цього. */
.olx-ad-l{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:.75rem;
  border-top:1px dashed var(--line);padding-top:6px;margin-top:6px}
.olx-ad-l a{color:var(--muted);text-decoration:none}
.olx-ad-l a:hover{color:var(--green-d);text-decoration:underline}
.olx-ad-l b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}

/* ─────────── OLX: завдання-перевірки (/olx/?page=olxtasks) ─────────── */
/* Кожна перевірка — САМОСТІЙНА коробка з номером, підсумком і своїм переліком.
   Не картки в сітці й не рядки однієї таблиці: перевірок буде кілька, вони різного
   розміру (одна порожня, друга на двадцять рядків), і в сітці вони або розтяглись би
   до висоти найбільшої, або мусили б ховати перелік під кнопку. Стовпчик коробок
   читається згори вниз рівно в тому порядку, в якому їх і роблять. */
.olx-task{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin:0 0 18px}
/* Шапка завдання: номер · назва з поясненням · підсумок. Підсумок притиснутий
   праворуч (`margin-left:auto`) — сторінку відкривають заради нього, і на широкому
   екрані око шукає числа з одного краю, а не за різною довжиною назв. */
.olx-task-h{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.olx-task-n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--green);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.88rem}
.olx-task-t{min-width:0;flex:1}
.olx-task-t h2{margin:0 0 3px;font-size:1.05rem}
.olx-task-t p{margin:0;line-height:1.5}
.olx-task-p{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.olx-task-b{padding:4px 16px}
/* «Все чисто» — теж відповідь, і вона мусить читатись здалеку: інакше порожній блок
   не відрізнити від блоку, який просто не порахувався. */
.olx-task-ok{color:var(--green-d);font-weight:600;padding:12px 0}

/* Рядок проблеми. Не плитка, як у переліку оголошень: тут дивляться не на фото, а на
   ВЕРДИКТ і на те, що з ним робити, — тобто читають рядками. Фото лишається дрібним
   якорем, щоб оголошення все ж упізнавалось. */
/* СІТКА з ФІКСОВАНИМИ колонками, а не flex. На flex вердикт стояв одразу за назвою, а
   решту ширини забирав блок кнопок — і той у кожного рядка свій: дві кнопки, три, або
   три з «Шукати {артикул}», де довжина артикула взагалі ніяк не обмежена. Заміряно на
   живій сторінці: блок кнопок 202 / 318 / 344 / 358px, через що ліва межа вердикту
   гуляла на 156px. А вердикт — це ЄДИНА колонка, яку читають згори вниз («що саме не
   так»), і читати її можна лише тоді, коли всі рядки починаються з однієї лінії. Тому
   ширина обох правих колонок задана числом: `auto` за змістом знову зробило б їх
   різними, а сітка живе ВСЕРЕДИНІ рядка (кожен `.olx-row` — своя), тож поділити
   доріжки між рядками, як у таблиці, нема як. */
.olx-row{display:grid;grid-template-columns:64px minmax(0,560px) 320px minmax(360px,1fr);
  gap:12px;align-items:center;padding:10px 12px;margin:0 -12px;
  border-bottom:1px solid var(--line)}
.olx-row:last-child{border-bottom:0}
/* Смужки й підсвітка. Колонки тут стоять далеко одна від одної (назва ліворуч, кнопки
   при правому краю), а рядок читають ПОПЕРЕК — «оце оголошення, оце з ним не так, оце з
   ним робити». Без підкладки око на такій відстані зіскакує на сусідній рядок; смужка
   тримає його від назви до кнопок, а підсвітка на наведення показує, у якому рядку
   зараз курсор — тобто на яке саме оголошення натиснеться «Виключити».
   Підкладка виходить за текст на 12px (`padding` + відʼємний `margin`), щоб не
   притискалась до першої літери. */
.olx-row:nth-of-type(even){background:#f8fafc}
.olx-row:hover{background:#e9eef5}
.olx-row-ph{width:64px;height:48px;display:flex;align-items:center;
  justify-content:center;background:#f8fafc;border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
.olx-row-ph img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Назва — гумова, але зі СТЕЛЕЮ 560px (заміряно: найдовша з наявних назв займає 585px в
   один рядок). Без стелі колонка забирала всю вільну ширину — на 1600px це 718px під
   назви, після яких зяяла порожнеча аж до вердикту. Назва потрібна лише щоб упізнати
   оголошення: те, що не влізло, доводить другий рядок (`line-clamp:2`), а вердикт від
   цього стоїть одразу за нею, а не через півекрана. */
.olx-row-t{min-width:0}
.olx-row-t > a{color:var(--text);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.olx-row-t > a:hover{color:var(--green-d)}
.olx-row-v{min-width:0}
/* Кнопки притиснуті до правого краю СВОЄЇ колонки: довгий артикул у «Шукати» переносить
   ряд кнопок, а не роз'їжджає колонку вердикту, як це було на flex. */
.olx-row-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.olx-row-a form{display:inline}

/* Поле «Виключення» — під складкою (`<details>`), а не поруч із переліком: у нього
   заглядають раз на кілька тижнів, а перелік проблем читають щодня. Розгорнутим воно
   щоразу відсувало б наступне завдання за край екрана. */
.olx-task-x{border-top:1px solid var(--line);background:var(--bg)}
.olx-task-x > summary{cursor:pointer;padding:10px 16px;font-weight:600;user-select:none}
.olx-task-x > summary:hover{color:var(--green-d)}
.olx-task-xb{padding:0 16px 14px}
.olx-skips{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.olx-skip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.olx-skip-t{flex:1 1 200px;min-width:0;font-size:.9rem}
.olx-skip form{margin-left:auto}
.olx-skipf textarea{width:100%;min-height:96px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.6;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text);resize:vertical}
.olx-skipf > div{margin-top:8px}

/* Вузький екран: дві фіксовані колонки (320+360) забирають майже всю ширину, і назві
   лишається смужка. Тому першими в СВІЙ рядок ідуть кнопки — колонка вердикту від цього
   не рушає з місця, а вирівняною вона тут і потрібна. */
@media (max-width:1180px){
  .olx-row{grid-template-columns:64px minmax(0,1fr) 320px}
  .olx-row-a{grid-column:2 / -1}
  .olx-row-a{grid-column:2 / -1;justify-content:flex-start}
}
/* Телефон: підсумок під назвою (праворуч його нема куди тиснути), вердикт — своїм рядком
   під назвою: 320px поруч із назвою тут уже не вміщаються. */
@media (max-width:700px){
  .olx-task-p{margin-left:0;justify-content:flex-start}
  .olx-task-h{flex-wrap:wrap}
  .olx-row{grid-template-columns:64px minmax(0,1fr)}
  .olx-row-v{grid-column:2}
  .olx-row-a{grid-column:1 / -1}
}

/* ═══════════ «Товарні залишки» (`?page=warehousetotal`) ═══════════
   Сторінка складається з однакових таблиць-розрізів, тому стилів тут рівно на одну
   таблицю: заголовок, підсумковий рядок і колонка частки зі смужкою. */
.wh-tottbl{margin-bottom:8px}
.wh-tottbl + p{margin:0 0 22px}
/* Підсумок — не просто жирний рядок, а РИСА під таблицею: він мусить читатись як
   «те саме число, що в плитці вгорі», а не як ще одна категорія знизу списку. */
.wh-tot-sum td{border-top:2px solid var(--text);background:#f8fafc}
/* «— не заповнено» — не категорія, а дірка в картках: приглушуємо, щоб рядок не
   конкурував очима зі справжніми розрізами, але лишаємо видимим (його треба закрити). */
.wh-tot-none td{color:var(--muted)}
.wh-tot-none td b{font-weight:600}
/* Залежані гроші — бурштином, тим самим тоном, що й решта попереджень панелі
   (`.wh-stt-warn`): це не помилка, а те, на що треба подивитись. */
.wh-tot-old td{background:#fffbeb}

/* Колонка частки: смужка + число. Смужка ФІКСОВАНОЇ ширини, а не «по вмісту» —
   інакше колонки сусідніх таблиць розійшлися б і порівнювати їх очима стало б
   неможливо, а саме заради порівняння вона тут і стоїть. */
.wh-tot-sh{width:190px;white-space:nowrap}
.tbl th.wh-tot-sh{text-align:left}   /* див. `.tbl th.wh-c-num`: `.tbl th` важчий за клас */
.wh-tot-bar{display:inline-block;vertical-align:middle;width:120px;height:8px;
  border-radius:5px;background:var(--line);overflow:hidden}
.wh-tot-bar i{display:block;height:100%;background:var(--green);border-radius:5px}
.wh-tot-bar.old i{background:var(--amber)}
.wh-tot-pc{display:inline-block;vertical-align:middle;margin-left:8px;font-size:.8rem;
  color:var(--muted);font-variant-numeric:tabular-nums}

/* Захований хвіст: `hidden` на <tr> у деяких браузерах програє UA-правилу
   `display:table-row`, тому гасимо явно — інакше згорнуті рядки лишились би видимі. */
.wh-tottbl tr[hidden]{display:none}
/* Рядок-згортка: кнопка виглядає посиланням, а не кнопкою — вона нічого не змінює
   в даних, лише показує те, що вже пораховане в її ж власному рядку. */
.wh-tot-morerow td{background:#f8fafc}
.wh-tot-more{border:0;background:none;padding:0;font:inherit;font-weight:700;
  color:var(--green-d);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wh-tot-more:hover .wh-tot-more-t{text-decoration:underline}
.wh-tot-more-c{font-size:.75rem;color:var(--muted)}
/* Розгорнуті дрібні значення — приглушені: вони вже за межею, з якої число щось
   вирішує, і не мають конкурувати очима з головою таблиці. */
.wh-tot-hid td{color:var(--muted);font-size:.92em}
.wh-tot-hid td b{font-weight:600}

/* Вибір довільного розрізу живе В ЗАГОЛОВКУ секції, а не окремою смугою над таблицею:
   заголовок і є питання («Інший розріз»), а список — відповідь на нього. */
.wh-tot-cutf{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.wh-tot-cutf select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:.9rem;max-width:260px}
.wh-tot-hint{margin:0 0 22px}

/* Топ позицій: назва може бути довгою, решта колонок — числа в один рядок.
   Назва ТУТ переноситься по словах (по-за `.wh-invlk`, яка скрізь у панелі однорядкова
   з трикрапкою): сім колонок плюс нерозривна назва в 90 символів розпирали таблицю ширше
   за екран, і сторінка їхала горизонтально (глобальне `.tbl{overflow-x:auto}` вмикається
   лише від 1100px і від 1101 до ~1450px не рятувало). */
.wh-tottop td:first-child{min-width:220px;max-width:520px}
.wh-tottop .wh-invlk{white-space:normal;overflow:visible;text-overflow:clip}

/* Назва кошика залежаності — кнопка, що відкриває список товарів. Виглядає
   посиланням, бо нічого не міняє: вікно лише показує те, що вже пораховане в рядку. */
.wh-tot-agek{border:0;background:none;padding:0;font:inherit;font-weight:700;
  color:var(--text);cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:var(--muted)}
.wh-tot-agek:hover{color:var(--green-d);text-decoration-color:var(--green)}
/* Порожній кошик клікати нема сенсу — лишається звичайним написом. */
.wh-tot-agek[disabled]{cursor:default;text-decoration:none;color:var(--muted)}

/* Вікно списку: ширше за типове (420px), бо всередині таблиця на шість колонок.
   Скролиться САМ СПИСОК, а не вікно — шапка таблиці й кнопка «Закрити» мусять
   лишатись на місці, коли в кошику пів сотні позицій. */
.wh-totbox{width:min(900px,100%)}
.wh-totlist{max-height:58vh;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
.wh-totmtbl{border-radius:0}
.wh-totmtbl th{position:sticky;top:0;z-index:1}
.wh-totmtbl td,.wh-totmtbl th{padding:8px 10px}
/* Назва товару ТУТ переноситься по словах. `.wh-invlk` скрізь у панелі — один рядок з
   трикрапкою, і це правильно в широких таблицях сторінки. Але у вікні на 900px назва в
   90 символів розпирала таблицю до 1266px: числові колонки виїжджали за край, і замість
   списку з сумами лишався стовпчик самих назв із горизонтальною прокруткою під ним. */
.wh-totmtbl .wh-invlk{white-space:normal;overflow:visible;text-overflow:clip}
.wh-totmtbl td:first-child{min-width:200px;max-width:420px}

@media (max-width:760px){
  /* На телефоні смужка з'їдає ширину, потрібну назві категорії, а відсоток поруч
     каже те саме число точніше. Тому лишається лише він. */
  .wh-tot-sh{width:auto}
  .wh-tot-bar{display:none}
  .wh-tot-pc{margin-left:0}
  .wh-tot-cutf{margin-left:0;width:100%}
  .wh-tot-cutf select{flex:1;max-width:none}
}

/* ─────────────── OLX · Повідомлення (переписка з покупцями) ───────────────
   Ця сторінка живе у ДВОХ місцях одночасно: у панелі на комп'ютері й у WebView
   мобільного додатка (закладка «OLX»). Тому вона одноколонкова на будь-якій
   ширині, а не «двоколонковий месенджер, який на телефоні складається»: другий
   варіант довелось би все одно розбирати на ті самі перелік і розмову. */
.cv-list{display:flex;flex-direction:column;gap:8px}

/* Рядок гілки — цілком клікабельний. `display:flex` на посиланні, а не картка з
   посиланням усередині: у переліку цілять пальцем куди завгодно, і «влучив у
   назву — відкрилось, влучив у фото — ні» на телефоні читається як поломка. */
.cv-row{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.cv-row:hover{border-color:var(--muted)}
.cv-un{border-color:var(--green);background:#f0fdf4}
.cv-ph{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border-radius:8px;
  background:var(--bg);border:1px solid var(--line)}
.cv-ph-0{display:block}
.cv-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cv-top{display:flex;gap:10px;align-items:baseline}
/* min-width:0 — інакше довге ім'я розпирає flex-рядок і час виїжджає за край
   картки (flex-елемент за замовчуванням не вужчий за свій вміст). */
.cv-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-time{margin-left:auto;flex:0 0 auto;color:var(--muted);font-size:.78rem}
.cv-adv{font-size:.8rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cv-txt{font-size:.88rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.cv-me{color:var(--muted)}
/* Лічильник непрочитаних. Той самий вигляд і в заголовку сторінки (`.cv-n-h`),
   і в рядку гілки — щоб «5» угорі й «5» у списку читались як одне число. */
.cv-n{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--green);color:#fff;font-size:.78rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center}
.cv-n-h{vertical-align:middle;margin-left:6px}

/* ── Одна розмова ── */
.cv-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cv-head-t{min-width:0;font-size:.92rem}

/* Стрічка реплік. Власна прокрутка (а не прокрутка сторінки) потрібна заради поля
   відповіді: воно має лишатись на екрані, поки гортаєш листування вгору. */
.cv-thread{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,520px);
  overflow-y:auto;padding:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px}
.cv-m{max-width:78%;display:flex;flex-direction:column;gap:2px}
.cv-in{align-self:flex-start}
.cv-out{align-self:flex-end;align-items:flex-end}
.cv-b{padding:8px 11px;border-radius:12px;line-height:1.45;font-size:.9rem;
  word-break:break-word}
.cv-in .cv-b{background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px}
.cv-out .cv-b{background:#dcfce7;border:1px solid #bbf7d0;border-bottom-right-radius:4px}
.cv-t{font-size:.72rem;color:var(--muted);padding:0 4px}
.cv-att{display:block;margin-top:6px}
.cv-att img{display:block;max-width:220px;max-height:220px;border-radius:8px;
  border:1px solid var(--line)}

/* ── Поле відповіді ── */
.cv-reply{margin-top:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px}
.cv-reply textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.45;
  font:inherit;font-size:.92rem;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text)}
.cv-reply textarea:focus{outline:none;border-color:var(--green)}
.cv-reply-b{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:9px}

@media (max-width:560px){
  /* На телефоні картка гілки і так вузька — фото з'їдає рядок тексту, який
     насправді і є тим, заради чого сюди зайшли. */
  .cv-ph{width:44px;height:44px;flex-basis:44px}
  .cv-m{max-width:88%}
  .cv-thread{max-height:none}
}

/* ══════════════════════ Облік клієнтів (/sales/) ══════════════════════ */

/* Вирівнювання чисел праворуч — у розділі його носять і `td`, і `th`.
   Класу на всю панель досі не було (кожен розділ мав свій `wh-c-num` тощо);
   тут він один на всі шість сторінок, тому й ім'я коротке. */
.tbl td.ta-r,.tbl th.ta-r,.ta-r{text-align:right}

/* Шапка розділу: назва зрізу ліворуч, головна дія праворуч — та сама розкладка,
   що в «Виписати рахунок» (`.wh-invhead`). Кнопка «Нове замовлення» стояла в ряду
   фільтрів, збоку від «Знайти»/«Показати», і читалась як ще один фільтр. */
.sl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
.sl-head h1{margin:0 0 4px}
.sl-head p{margin:0;max-width:760px}
.sl-head .btn{white-space:nowrap}
/* Відповідь на щойно поставлене питання — ОКРЕМИМ рядком під довідкою про розмір
   бази, і темнішим за неї: доти вона стояла хвостиком того ж рядка («у довіднику
   19 914 клієнтів · знайдено 1») і читалась як частина довідки. */
.sl-head .sl-found{margin-top:3px;color:var(--text);font-size:.93rem}

/* ── Плитки-лічильники (огляд, звіт, картка клієнта) ──
   Колір несе СТАДІЮ, а не настрій: жовтий/зелений/червоний/темно-зелений
   успадковані зі старої системи — на них є м'язова пам'ять, і міняти їх
   означало б переучувати єдине, що люди читали там без тексту. */
.sl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin:18px 0}
.sl-tile{display:flex;flex-direction:column;gap:2px;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;
  padding:14px 16px;text-decoration:none;color:var(--text)}
a.sl-tile:hover{border-color:var(--green-l);border-left-color:var(--green)}
.sl-tile-n{font-size:1.7rem;font-weight:800;line-height:1.1}
.sl-tile-l{font-size:.84rem;font-weight:700;color:var(--muted)}
.sl-tile-s{font-size:.8rem;color:var(--muted)}
.sl-tile.sl-new{border-left-color:#ea580c}
.sl-tile.sl-wait{border-left-color:var(--amber)}
.sl-tile.sl-run{border-left-color:var(--green-l)}
.sl-tile.sl-off{border-left-color:var(--danger)}
.sl-tile.sl-done{border-left-color:var(--green-d)}
.sl-tile.sl-cl{border-left-color:var(--violet)}

/* Тег стадії в рядку журналу — той самий словник кольорів, що й плитки.
   «Виконується» і «Завершено» — обидва ЗЕЛЕНІ, і саме їх найчастіше розрізняють
   поглядом по колонці. Тому вони розведені не відтінком заливки (світлі #dcfce7
   і #d1fae5 з відстані читались як один колір), а ЯСКРАВІСТЮ: незакрите —
   світла заливка з темним текстом, закрите — ГУСТА темно-зелена з білим. Див.
   `_docs\COLORS.md` — там цей словник описаний як правило розділу. */
.sl-st{display:inline-block;margin-top:4px;border-radius:6px;padding:2px 7px;
  font-size:.75rem;font-weight:700;white-space:nowrap}
/* «Нове замовлення» — ГУСТИЙ помаранчевий з білим текстом, а не ще один блідий
   бурштин поруч із «Очікує оплати». Те саме правило, що розводить два зелених
   (див. `_docs/COLORS.md`): дві стадії однієї родини кольору розрізняються
   ЯСКРАВІСТЮ, і насичену заливку отримує та, що потребує дії просто зараз, —
   тут це саме «нове», бо ним ще ніхто не займався. */
.sl-st.sl-new{background:#ea580c;color:#fff}
.sl-st.sl-wait{background:#fef3c7;color:#92400e}
.sl-st.sl-run{background:#dcfce7;color:var(--green-d)}
.sl-st.sl-off{background:#fee2e2;color:var(--danger)}
.sl-st.sl-done{background:var(--green-d);color:#fff}
.sl-st.sl-mut{background:var(--bg);color:var(--muted)}

/* ── Стан у журналі — він же вхід у замовлення (12.09.2026) ──
   Хвостова колонка з кнопкою «Переглянути» знята: вона тримала 104px у кожному
   рядку заради дії, яку однаково роблять, дивлячись на ЛІВИЙ край рядка. Сама
   кнопка прозора — читається рівно той самий тег стадії, що й раніше; на всю
   клітинку вона розтягнута навмисне, щоб ціль була великою, а не в 60px тега. */
button.sl-stb{display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;text-align:left;cursor:pointer}
button.sl-stb:hover .sl-st{filter:brightness(.94)}
button.sl-stb:focus-visible{outline:2px solid var(--green-l);outline-offset:2px;
  border-radius:8px}
/* Щойно збережене замовлення — галочка при тегу. Текст тега НЕ підміняємо: стадія
   могла щойно змінитись, і саме її людина й прийшла перевірити. */
button.sl-stb.sl-saved .sl-st::after{content:' ✓';font-weight:800}

/* Шапка картки замовлення забарвлена стадією — як була кольорова рамка блоку
   в старій системі: стадію видно ще до того, як почав читати. */
.sl-head{border-left:4px solid var(--line);padding-left:14px}
.sl-head.sl-new{border-left-color:#ea580c}
.sl-head.sl-wait{border-left-color:var(--amber)}
.sl-head.sl-run{border-left-color:var(--green-l)}
.sl-head.sl-off{border-left-color:var(--danger)}
.sl-head.sl-done{border-left-color:var(--green-d)}

/* Текст замовлення — багаторядковий і довгий; у таблиці він мусить лишатись
   стовпчиком, а не розсувати колонки під найдовший артикул. */
.sl-goods{font-size:.86rem;line-height:1.4;max-height:5.6em;overflow:hidden;
  word-break:break-word}
.sl-ttn{font-weight:700;white-space:nowrap}
.sl-np{font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
/* Коробка статусу декларації стоїть завжди (вікно маршруту пише в неї свіжий
   статус), тож порожню прибираємо з потоку — інакше вона додавала б відступ. */
.sl-np:empty{display:none}
.sl-npbad{color:var(--danger);font-weight:700}
.sl-npbox .card-title a{font-weight:800}
.sl-npx{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.86rem}

/* ── SMS клієнтові (у блоці декларації) ──
   Відбито лінією зверху, бо це вже не «де посилка», а ДІЯ над нею — і дія
   безповоротна: надіслане не відкликають. Текст повідомлення стоїть поруч із
   кнопкою дрібним і в один рядок з обрізанням: прочитати його треба до кліку
   (у ньому сума грошей), а місця в картці на два абзаци немає — повністю той
   самий текст показує підтвердження. Див. `sales_sms_text()`. */
.sl-sms{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sl-sms-h{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.sl-sms-h b{color:var(--text);font-size:.92rem}
.sl-sms-r{display:flex;align-items:center;gap:10px;min-width:0;margin-top:5px}
.sl-sms-r .btn{flex:none}
.sl-sms-t{flex:1 1 auto;min-width:0;font-size:.76rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Слід відправки — зелений і сталого місця праворуч: він відповідає на «чи я вже
   це робив», і саме його відсутність провокує другу SMS у того самого клієнта. */
.sl-sms-at{flex:none;font-size:.76rem;font-weight:700;color:var(--green)}
@media (max-width:760px){
  .sl-sms-r{flex-wrap:wrap}
  .sl-sms-t{flex:1 1 100%;white-space:normal;order:3}
}

/* Зведення «в дорозі» по режимах переказу. */
.sl-pw{width:100%;border-collapse:collapse;font-size:.9rem}
.sl-pw td{padding:4px 0;border-bottom:1px solid var(--line)}
.sl-pw tr:last-child td{border-bottom:0}
/* «Замовлення в роботі» — два підсумкові рядки, відбиті тією ж лінією. Число тут
   більше за підпис: дивляться саме на нього, а слово поруч лише називає, що це. */
.sl-inwork td{padding:9px 0}
.sl-inwork b{font-size:1.14rem}

/* ── Два індикатори стану над оглядом (12.09.2026) ──
   Не білі картки, а заливка: це не дані сторінки, які читають, а стан, який
   мусить бути видно ще до читання. Рампи ті самі, що на смузі стану cron-у
   (`.dsp-ok`/`.dsp-bad`) — другого набору «фірмових» градієнтів у панелі нема.
   Червона дісталась доставці (чуже, що ламається мовчки), зелена — нашим
   грошам у роботі.
   Блок стоїть НАД заголовком періоду, тож власний верхній відступ йому не
   потрібен — інакше він відліплювався б від ряду закладок. */
.sl-state{margin-top:0;margin-bottom:20px}
.sl-scard{color:#fff;border:0}
.sl-scard-np{background:linear-gradient(120deg,#991b1b,#ef4444)}
.sl-scard-work{background:linear-gradient(120deg,var(--green-d),var(--green-l))}
.sl-scard .card-title,.sl-scard .card-body,.sl-scard b{color:#fff}
/* Дрібне на кольорі не має «сіріти»: --muted на червоному не читається. */
.sl-scard .muted,.sl-scard .sl-npbad{color:#fff;opacity:.92}
.sl-scard a{color:#fff;text-decoration:underline}
/* Розділові лінії підсумків — світлі, бо `--line` на заливці невидима. */
.sl-scard .sl-pw td{border-bottom-color:rgba(255,255,255,.28)}
/* Кнопка на заливці — світла рамка по кольору картки, а не сіра панельна. */
.sl-scard .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);
  color:#fff;text-decoration:none}
.sl-scard .btn:hover{background:rgba(255,255,255,.28);border-color:#fff;color:#fff}
/* Уся картка «в роботі» — посилання в журнал, і воно мусить це показувати.
   ⚠ Посилання тут НЕ сама картка, а прозорий шар поверх неї (`.sl-scard-all`):
   усередині стоїть друге, вужче (жовта таблетка → `status=2`), а вкладені
   посилання браузер не дозволяє. Шар лежить НИЖЧЕ таблетки (z-index), тобто
   клік по таблетці дістається саме їй, а не картці під нею. */
.sl-scard-lnk{position:relative}
.sl-scard-lnk:hover{filter:brightness(1.06)}
/* ⚠ Вмісту картки позиціонування НЕ даємо навмисно: `position:relative;z-index:0`
   на `.card-body` зробив би з нього власний контекст накладання, і таблетка
   всередині (z-index:2) опинилась би не над шаром-посиланням, а разом зі своїм
   батьком під ним — тобто клік по ній знову відкривав би загальний зріз.
   Нестатичний шар з додатним z-index і так лежить поверх статичного вмісту,
   незалежно від порядку в розмітці. */
.sl-scard-all{position:absolute;inset:0;z-index:1;border-radius:inherit}
a.sl-scard{display:block}
/* Очікування оплати — ЖОВТА таблетка тим самим словником, що таблетки-фільтри
   журналу (`.sl-fch.sl-wait`), куди картка й веде: грошей за цими замовленнями
   ще нема взагалі, і рядком звичайного тексту серед підсумків «у роботі» це
   читалось як третій такий самий підсумок. */
.sl-inwork-w td{border-bottom:0;padding-bottom:0}
.sl-wpill{display:inline-block;background:#fef3c7;color:#92400e;
  border:1px solid #fcd34d;border-radius:999px;padding:4px 11px;
  font-size:.84rem;line-height:1.3}
/* Таблетка сама посилання — і мусить лежати ПОВЕРХ шару картки, інакше клік по
   ній відкривав би загальний зріз робочого столу. Підкреслення знімаємо: на
   заливці всі посилання підкреслені (`.sl-scard a`), а таблетка — не текст. */
a.sl-wpill{position:relative;z-index:2;text-decoration:none}
.sl-scard .sl-wpill,.sl-scard .sl-wpill b,.sl-scard a.sl-wpill{color:#92400e}
.sl-scard a.sl-wpill:hover{background:#fde68a;border-color:#f59e0b}
/* «Нові замовлення» — та сама таблетка густим помаранчевим, що й тег стадії
   (`.sl-st.sl-new`): вона веде в зріз рівно цієї стадії, і колір мусить збігтись
   із тим, що людина побачить у журналі. Правила кольору тут важчі за спільні
   `.sl-scard .sl-wpill` — інакше заливка на картці перекрасила б текст у
   бурштиновий, тобто в чужу стадію. */
.sl-wpill-new{background:#ea580c;border-color:#ea580c}
.sl-scard .sl-wpill-new,.sl-scard .sl-wpill-new b,.sl-scard a.sl-wpill-new{color:#fff}
.sl-scard a.sl-wpill-new:hover{background:#c2410c;border-color:#c2410c}
/* «Відмови, ще не закриті» — ЧЕРВОНА, кольором стадії «Відмова» (`.sl-st.sl-off`),
   хоча ця стадія в них ще не стоїть: одержувач відмовився, посилка вертається, і
   грошей за нею не буде. Поруч із жовтою «очікують оплати» вона й читається як
   різниця між «ще не прийшли» і «вже не прийдуть». */
.sl-wpill-off{background:var(--danger);border-color:var(--danger)}
.sl-scard .sl-wpill-off,.sl-scard .sl-wpill-off b,.sl-scard a.sl-wpill-off{color:#fff}
.sl-scard a.sl-wpill-off:hover{background:#991b1b;border-color:#991b1b}

/* ── Підпис поля зі значком у ТОМУ Ж рядку ──
   `.grid-form label` — колонка (підпис, під ним поле), тож кнопка, вкладена просто
   в `<label>`, ставала б третім поверхом між ними. Обгортка робить із підпису
   рядок, і значок стає тим, чим має бути, — частиною підпису.
   Навіщо взагалі: суму замовлення щодня переносять у декларацію, у переписку й у
   банк, а виділити її мишею з поля вводу означає щоразу ловити межі числа. */
.sl-lblr{display:flex;align-items:center;gap:6px}
.sl-lblr .t2cp{flex:none;width:18px;height:18px}

/* ── «Ціна продажу» НИЖЧА за суму привʼязаного рахунку (15.09.2026) ──
   Вище за документ — нормально (доплата за доставку, округлення вгору, друга
   позиція, виписана окремо). Нижче — ні: з клієнта беруть менше, ніж уже списали
   зі складу, а в підсумках дня такий продаж нічим не відрізняється від звичайного.
   Тому поле саме МОРГАЄ, а не просто червоніє: воно стоїть посеред спокійної форми,
   і статичну рамку тут не помічали б рівно так, як не помічали розбіжність досі.
   Клас ставить і сервер при показі картки, і скрипт на кожну набрану цифру. */
.sl-sumf.is-low input{border-color:#dc2626;color:#b91c1c;font-weight:700;
  animation:sl-sumblink 1.05s ease-in-out infinite}
@keyframes sl-sumblink{
  0%,100%{background:#fff;box-shadow:0 0 0 0 rgba(220,38,38,0)}
  50%{background:#fee2e2;box-shadow:0 0 0 3px rgba(220,38,38,.3)}}
/* Фокус мусить лишатись зеленим, як у решти полів: людина вже побачила червоне й
   саме зараз його виправляє — миготіння під курсором заважає читати те, що набирають. */
.sl-sumf.is-low input:focus{animation:none;background:#fff;border-color:var(--green);
  color:var(--text);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.sl-sumwarn{display:block;font-size:.74rem;font-weight:700;color:#b91c1c;line-height:1.35}
/* `[hidden]` на елементі з власним `display` програє — гасимо явно. */
.sl-sumwarn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .sl-sumf.is-low input{animation:none;background:#fee2e2}}

/* Поле на всю ширину сітки форми (найменування, коментар). */
.grid-form label.sl-wide{grid-column:1/-1}
.grid-form textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--text);resize:vertical}

/* Смужка прогресу перенесення. */
.sl-bar{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;margin-top:10px}
.sl-bar i{display:block;height:100%;background:var(--green);transition:width .3s}

/* ── Налаштування розділу: ключ НП і рядок cron ──
   Обидва поля існують, щоб їх прочитали або скопіювали цілком, а не щоб у них
   набирали текст, — звідси моноширинний шрифт і виділення по кліку. */
.sl-cfg{margin:14px 0 0}
.sl-cfg-f{display:block}
.sl-cfg-f>span{display:block;font-size:.84rem;font-weight:700;color:var(--muted);margin-bottom:5px}
.sl-cfg-in{width:100%;max-width:520px;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--text);
  font-family:ui-monospace,Consolas,monospace;font-size:.9rem;letter-spacing:.02em}
.sl-cfg-in:focus{outline:none;border-color:var(--green-l)}
.sl-cron-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.sl-cron-in{flex:1 1 420px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--text);font-family:ui-monospace,Consolas,monospace;font-size:.84rem}
.sl-cron-in:focus{outline:none;border-color:var(--green-l);background:#fff}

/* ── Довідник клієнтів і отримувачів (11.09.2026) ── */

/* ⚠️ Поле «другий номер» БІЛЬШЕ НЕ ХОВАЄТЬСЯ (12.09.2026): воно стоїть одразу за
   селектом способу звʼязку, і поява/зникнення перебудовувала сітку форми просто
   під рукою — на широкому екрані «Назва компанії» (на дві клітинки) то влазила в
   залишок рядка, то ні, лишаючи дірку. Міняється лише підпис. Правило лишене на
   випадок, якщо `hidden` знову комусь знадобиться: `hidden` на label у формі НЕ
   працює сам — `.grid-form label{display:flex}` перебиває `display:none` з
   таблиці браузера (специфічність класу проти тега). */
.grid-form label.sl-commph[hidden]{display:none}

/* Рядок-підказка над списком. Не `.card`: він мусить читатись як примітка до
   сторінки, а не як ще один блок даних, що на ній лежить. */
.sl-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;
  padding:11px 14px;border:1px dashed var(--line);border-radius:11px;
  background:var(--bg);font-size:.9rem;color:var(--muted)}
.sl-note b{color:var(--text)}

/* Картка клієнта й отримувачі — поруч, поки є куди: це одне й те саме питання
   («хто це і куди йому везти»), і рознесені по вертикалі вони змушували б
   прокручувати сторінку, щоб звірити телефон з адресою. */
.sl-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px;align-items:start}
@media (max-width:1000px){.sl-cols{grid-template-columns:1fr}}

/* Права колонка картки: отримувачі + плитки підсумків одним стовпцем. Форма
   клієнта ліворуч висока, і сама по собі картка отримувачів закінчувалась на
   третині її висоти — праворуч від форми зяяла порожнеча на пів екрана. */
.sl-colr{display:flex;flex-direction:column;gap:16px;min-width:0}
.sl-colr .sl-tiles{margin:0}

/* Отримувачів буває кілька, а місця в колонці вистачає на два в ряд: у стовпчик
   вони гнали картку вниз там, де поруч порожньо.
   ⚠️ Тут саме `auto-FIT`: він схлопує порожні доріжки, тож ОДИН отримувач (а це
   99% карток) займає всю ширину, а не вузьку колонку з обірваним на два рядки
   імʼям. `auto-fill` лишив би другу доріжку порожньою. */
.sl-recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
/* Рядок отримувача: імʼя й адреса ліворуч, дії — ПРАВОРУЧ, а не під ними. Знизу
   вони відсували наступного отримувача, хоч уся права половина рядка стояла
   порожня. `align-items:start` — щоб кнопки трималися верху, а не пливли за
   довжиною адреси. */
.sl-rec{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"h a" "b a";gap:2px 10px;align-items:start;
  border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:11px;padding:10px 13px;background:var(--bg)}
/* Головний отримувач — той, кого підставлять у нове замовлення. Позначаємо
   смугою, а не тлом: тло читалось би як «виділений», тобто обраний зараз. */
.sl-rec.is-main{border-left-color:var(--green);background:var(--panel)}
.sl-rec-h{grid-area:h;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.sl-rec-b{grid-area:b;display:flex;flex-direction:column;gap:2px;font-size:.86rem;color:var(--muted)}
.sl-rec-a{grid-area:a;display:flex;gap:7px;align-self:start}
/* На вузькому дії повертаються під рядок: у два стовпці там уже не влізти. */
@media (max-width:520px){
  .sl-rec{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "b" "a"}
  .sl-rec-a{margin-top:9px}
}

/* Поле відділення і кнопка вибору — одним рядком: кнопка тут не окрема дія, а
   другий спосіб заповнити те саме поле.
   ⚠️ Підпис і саме поле доводиться вбирати ТУТ: цей рядок стоїть ПОЗА `.grid-form`
   (у нього своя розкладка з кнопкою), а вікно вбирає лише `input[type=text]` —
   селектор з атрибутом, який НЕ ловить `<input name="np">` без явного `type`.
   Через це поле відділення — єдине у вікні — лишалось голою браузерною
   коробочкою на 175px посеред нормальних полів. */
.sl-npf{display:flex;align-items:flex-end;gap:10px;margin:2px 0 12px}
.sl-npf label{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;
  font-size:.82rem;font-weight:600;color:var(--muted)}
.sl-npf input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:.92rem;font-family:inherit;color:var(--text);background:#fff}
.sl-npf input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.sl-npf .btn{flex:0 0 auto;white-space:nowrap}
/* Вікно отримувача — ширше за типові 420px: у ньому вісім полів, і в одну
   колонку вони робили з вікна стрічку на весь екран. На 560px `.grid-form`
   складається у дві колонки (прізвище+імʼя, місто+номер відділення), і все
   вікно читається одним поглядом. */
.sl-recbox{width:min(560px,100%)}
/* Поле, значення якого приходить з картки клієнта: його показують, а не питають. */
.sl-recbox label.is-locked input{background:var(--bg);color:var(--muted)}

/* Вікно з чужою сторінкою Нової пошти. Висота — від екрана, бо всередині карта:
   у коробці «по вмісту» від неї видно смужку. */
.sl-npw-box{width:min(860px,100%);max-width:none;padding:14px 16px 16px}
.sl-npw-box iframe{width:100%;height:min(74vh,680px);border:0;border-radius:11px;
  margin-top:10px;background:var(--bg)}

/* ── Пошук як вхід у розділ (11.09.2026) ── */

/* Номер набрали, а такого клієнта нема. Це не помилка й не порожній список, а
   РОЗВИЛКА: саме звідси починається заведення клієнта, тож блок помітний —
   пунктир примітки тут читався б як «до відома». */
.sl-miss{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:11px;background:var(--panel)}
.sl-miss-t{font-size:1.02rem;margin-bottom:4px}
.sl-miss p{margin:0 0 11px}

/* (Дії шапки картки клієнта живуть у `.sl-cardhead-r` — вони переїхали з-під
   підзаголовка на рівень прізвища, див. нижче.) */

/* ── Вікно пошуку клієнта («Нове замовлення» / «Новий клієнт») ──
   Ширше за звичайні 420px (`.modal-box`), бо всередині не питання, а ЗНАХІДКИ:
   таблиця з телефоном, імʼям, к-стю замовлень і датою останнього. У вузькій
   коробці її фіксовані колонки не вміщались, і пошук тягнув горизонтальну
   прокрутку через усю сторінку. Сама таблиця ще й прокручується всередині себе —
   на телефоні, де й 720px нема.
   ⚠️ Саме `width`, а не `max-width`: базовий `.modal-box` має `width:min(420px,100%)`,
   і max-width лише обмежив би його згори, лишивши вікно вузьким. */
.sl-findbox{width:min(720px,100%)}
.sl-findres{min-width:0;overflow-x:auto}

/* Заведення клієнта просто у вікні пошуку. НЕ картка в картці: рамка з зеленою
   смужкою (`.sl-miss`) має сенс на сторінці, де вона виділяє розвилку серед
   іншого, а всередині вікна, де більше нічого й немає, вона лише робила другий
   лівий край — блок стояв з відступом від поля пошуку над ним.
   `.modal-box` розкладає своїх дітей флексом з `gap:12px`, а цей блок —
   звичайний потік, тож відступи всередині нього доводиться ставити руками:
   інакше кнопки стояли впритул під полями (`.modal-act` розрахований на той
   самий gap і додає лише 2px). */
.sl-findnew{margin-top:4px}
.sl-findnew p{margin:4px 0 0}
.sl-findnew .grid-form{margin-top:12px}
.sl-findnew .modal-act{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* Дата + «як давно» під нею. Друге — підпис до першого, тож дрібніше й тісніше:
   міжрядок за замовчуванням розсував рядок таблиці на зайвий сантиметр. */
.sl-when{white-space:nowrap}
.sl-when .muted{font-size:.79rem;line-height:1.35;margin-top:1px}

/* Картка клієнта рамкою поверх списку. Висоту задає САМЕ ВІКНО (див. `.modal-full`):
   у рамки власної висоти немає взагалі, і від вмісту вона схлопнулась би в нуль.
   Прокрутку веде сторінка ВСЕРЕДИНІ рамки — зовнішньої бути не повинно. */
.sl-cardfr{flex:1 1 auto;min-height:0;width:100%;border:1px solid var(--line);
  border-radius:12px;background:var(--bg)}

/* ══════════════════ Організації та способи оплати (склад) ══════════════════ */

/* Картка стоїть під сіткою двох налаштувань і має свою кнопку дії — тому шапка
   в неї така сама, як у сторінок розділу: заголовок ліворуч, дія праворуч. */
.wh-orghead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.wh-orgtbl td .tag{margin:2px 4px 2px 0}
/* Вимкнена організація лишається в таблиці, але не претендує на увагу: її не
   видалили, її просто зараз не показують у формі. */
.wh-orgtbl tr.wh-orgoff td{opacity:.55}

/* Саме `width`, а не `max-width`: базовий `.modal-box` має `width:min(420px,100%)`,
   і max-width його лише обмежує згори — вікно лишалось 420px, а два стовпці оплат
   у нього не влазили. */
.wh-orgbox{width:min(620px,100%)}
/* Способи оплати — у два стовпці: сім рядків стовпчиком розтягують вікно на весь
   екран, а разом вони читаються як один перелік, а не як сім окремих питань.
   Треки — `minmax(0,1fr)`, а не `1fr`: `1fr` це `minmax(auto,1fr)`, тобто трек не
   вужчий за min-content ітему, а `.cn-name` всередині — `nowrap`. Назви на кшталт
   «Накладений платіж NovaPay» розпирали сітку до ~500px, і вікно (у нього
   `overflow-y:auto`, отже й `overflow-x:auto`) отримувало горизонтальну прокрутку.
   З нулем у мінімумі трек стискається, а назва обрізається еліпсисом — як і
   передбачено в `.cn-name`. */
.wh-orgpays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
@media(max-width:560px){.wh-orgpays{grid-template-columns:minmax(0,1fr)}}
/* Тією ж причиною — авто-мінімум ітему — розпирався і рядок «Показувати у формі
   рахунку»: flex-ітем без min-width:0 не стискається вужче за свій текст. */
.wh-orgpays .cn-item,.wh-orgact{min-width:0}
.wh-orgrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.wh-orgpos{flex:0 0 170px}
.wh-orgact{flex:1 1 240px}

/* Пара «спосіб оплати → організація» у вікні рахунку. Два поля в ряд і ширші за
   решту шапки: у них не числа, а назви, і обрізаний «RozetkaPay (PROM-опла…»
   довелось би вгадувати. */
.wh-invpay{margin-bottom:2px}
.wh-invpay .lg-f{flex:1 1 280px}
.wh-invpay select{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.92rem;background:#fff;color:var(--text)}
.wh-invpay select:disabled{background:var(--bg);color:var(--muted)}
/* ── Колонка «Оплата» в списку рахунків (11.09.2026) ──
   Раніше це був рядок під покупцем (`.wh-invpayl`) — і питання «чиїм ФОПом і як
   платили» доводилось вишукувати всередині чужої комірки. Ширину тримаємо по
   вмісту: назви організацій короткі, а колонка не мусить відбирати місце в
   позицій. Перенос по словах дозволений — «ФОП Синягівський М.І.» у нерозривному
   рядку розсував би таблицю. */
/* Ширша з 12.09.2026 (було 180px): звільнилась ціла колонка мініатюр, і саме сюди
   вона й пішла. При 180px «ФОП Синягівський М.І.» ламався на три рядки, а таблетка
   способу оплати лізла під нього — колонка читалась як злиплий стовпчик уламків. */
/* ⚠️ Ширина ЗАДАНА числом, а не `width:1%` (як було): `1%` у авто-розкладці означає
   «стисни до мінімуму», і колонка лишалась вузькою навіть тоді, коли вільне місце в
   таблиці було. Через це «ФОП Дячук Ігор Володимирович» стояв у чотири рядки, а
   таблетка способу оплати — під ним ще двома. */
.wh-c-pay{width:210px;min-width:190px;max-width:260px}
.tbl th.wh-c-pay{text-align:left}
.wh-invorg{font-weight:700;line-height:1.3;margin-bottom:3px;overflow-wrap:anywhere}
.wh-c-pay .tag{margin:0}

/* ══════════ Картка клієнта: вікна маршруту, старої бази й замовлення ══════════ */

/* Шапка картки у два стовпці: зліва — ХТО це, справа — що з ним робити. Дії
   стоять саме на рівні прізвища (11.09.2026): доти вони лежали під підзаголовком
   зліва, і «+ Замовлення» — те, заради чого в картку й заходять, — губилось між
   двома рядками дрібного тексту. Кнопки в ряд і притиснуті вправо. */
.sl-cardhead{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap}
.sl-cardhead-l{flex:1 1 320px;min-width:0}
/* `flex:0 1 auto` + `max-width` — щоб ряд кнопок МІГ стиснутись і перенестись:
   при `0 0 auto` його ширина рахується по вмісту, тож на телефоні три кнопки
   лишались одним рядком і «Стара база» вилазила за екран. */
.sl-cardhead-r{flex:0 1 auto;max-width:100%;display:flex;flex-wrap:wrap;
  justify-content:flex-end;align-items:center;gap:8px}
@media (max-width:640px){.sl-cardhead-r{justify-content:flex-start}}

/* ── Поле на дві клітинки сітки ──
   «Назва компанії» в довіднику — це майже завжди «ФОП Прізвище Імʼя По батькові»,
   і в одній клітинці воно обрізалось на половині. Дві клітинки замість `sl-wide`
   (на весь рядок): поруч мусить лишитись ЄДРПОУ — вони одне без одного не
   читаються.
   ⚠️ Розтягуємо лише там, де в сітці ТОЧНО більше однієї колонки: `span 2` у
   сітці з однією доріжкою створив би другу, неявну, і поле вилізло б за картку.
   Нижня межа взята з запасом — при 620px ширина картки ще дає дві колонки
   (`.grid-form` = `auto-fit,minmax(220px,1fr)`). */
@media (min-width:620px){.grid-form .sl-w2{grid-column:span 2}}
/* Підпис поля разом зі значком копіювання. Потрібен саме `<span>`-обгортка:
   `.grid-form label` — колонковий флекс, і кнопка, покладена просто в label,
   ставала б окремим поверхом між підписом і полем. Значок стоїть УПРИТУЛ до
   підпису (а не до поля), бо копіюють те, що в полі, а називає його підпис —
   так само, як у таблицях він стоїть упритул до самого значення. */
.grid-form .sl-lbl{display:flex;align-items:center;min-width:0}
.grid-form .sl-lbl .t2cp{margin-left:3px;flex:none}
/* ⚠️ Стеля в ТРИ колонки. Набір полів картки складали під три (телефон-прізвище-імʼя,
   пошта-звʼязок-другий номер, компанія×2-ЄДРПОУ), і вони лягають без жодної дірки
   рівно доти, доки доріжок три. На екрані від ~1870px `auto-fit` давав четверту —
   і тоді ЄДРПОУ лишався сам у рядку, а форма виглядала рваною. Нижче 1400px
   `auto-fit` однаково дає не більше трьох, тож нижньої межі правило не чіпає. */
@media (min-width:1400px){.sl-clform .grid-form{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Руйнівна дія — до ПРОТИЛЕЖНОГО краю від «Зберегти». Поруч, однакового розміру,
   вони відрізнялись лише кольором, і промах мишею коштував би картки клієнта. */
.sl-clform .form-actions .btn-danger{margin-left:auto}
/* Ряд дій не має прилипати до останнього поля: `.form-actions` дає 4px, і кнопки
   виглядали продовженням коментаря, а не окремим рядком рішень. */
.sl-clact{margin-top:18px}
/* Видалення заборонене (у клієнта є замовлення) — кнопка лишається НА МІСЦІ й
   лишається червоною: зникла, вона читалась би як «такої дії тут не буває», а
   сіра — як звичайна неактивна. Причину каже підказка браузера. */
.sl-btn-off{opacity:.4;cursor:not-allowed;user-select:none}

/* ── Замовлення клієнта в його картці ──
   Власної таблиці тут більше немає: список — ТОЙ САМИЙ, що в журналі (`.sl-list`,
   рендерер `$rowHtml`), разом із його колонками, шириною й прокруткою. Лишився
   тільки заголовок над ним — такий самий, як шапка журналу (`.sl-head`), але
   другого рівня: сторінку вже назвав `<h1>` з імʼям клієнта. */
.sl-ordhead{margin-top:26px}
.sl-ordhead h2{margin:0 0 4px;font-size:1.6rem;font-weight:800;line-height:1.2}
/* Номер декларації — кнопка, але виглядає як номер: клік питає НП просто зараз. */
button.sl-ttn{padding:0;border:0;background:none;font:inherit;font-weight:700;
  color:var(--text);cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px}
button.sl-ttn:hover{color:var(--green-d)}
/* Номер і «копіювати» — одним рядком: кнопка копіювання мусить стояти впритул до
   того, що копіює, інакше в таблиці з півсотні рядків незрозуміло, до котрого
   номера вона належить. Переносу нема — разом вони коротші за саму колонку. */
.sl-ttnr{display:flex;align-items:center;gap:4px;min-width:0}
.sl-ttnr .t2cp{flex:none}

/* Час стадії — В ТОМУ САМОМУ рядку, що й сама стадія (12.09.2026), а не поверхом
   нижче: це одне речення — «Прибула у відділення Самбір 3 год тому (12.09.2026
   10:19)». Двома блоками воно читалось як дві окремі довідки про одну подію.
   Дрібним і сірим — щоб стадія лишалась головною; `inline` (не блок), щоб
   переносилось по словах разом з нею. */
.sl-npwhen{font-size:.78rem;color:var(--muted)}
.sl-npst .sl-npwhen{margin-left:5px}
.sl-npst .sl-npwhen:empty{display:none}
/* Зелена галочка «в руках одержувача»: у стрічці на півсотні рядків це єдина
   позначка «тут уже все», і вона мусить читатись, не читаючи тексту поруч.
   Колір стадії при цьому НЕ міняємо — зелений рядок цілком переважив би червоні
   позначки про гроші, які стоять у тій самій клітинці. */
.sl-npok{font-style:normal;font-weight:900;color:var(--green-d);margin-right:4px}
/* ── КОЛІР НЕСЕ ВСЯ КЛІТИНКА (14.09.2026) ──
   Доти галочка була єдиним кольоровим знаком, а номер і стадія лишались чорними —
   тобто відповідь «тут уже все» читалась, лише прицілившись у 12-піксельний значок
   серед пів сотні рядків. Тепер отримана посилка вся зелена, відмова — вся червона:
   по такій стрічці видно, з чим робити нічого не треба й що поїхало назад, не
   читаючи жодного слова.
   ⚠ КОЛІР НЕСЕ ВЕСЬ ТЕКСТ КЛІТИНКИ, а не самі лише номер і стадія (14.09.2026,
   на вимогу). Доти уточнення — час події, місто з відділенням, примітка про
   сховану суму — лишались сірими, і клітинка читалась як «дві зелені стрічки серед
   сірих»: око мусило розбирати, котрий саме напис відповідає на питання. Тепер
   отримана посилка ЦІЛКОМ зелена, відмова — ЦІЛКОМ червона.
   Другорядне фарбуємо БЛІДІШИМ тоном того самого кольору, а не тим самим: поділ
   на головне й уточнення тримається на кольорі так само, як доти тримався на
   сірому, — інакше клітинка справді злилась би в суцільну пляму. Світлота тих
   тонів узята рівно як у `--muted`, який вони заміняють, тож дрібний текст
   лишається так само читабельним.
   Плашки («без післяплати», «затримка», «Відмова одержувача») лишаються собою: у
   них білий текст на заливці, і вони кажуть, ЩО саме сталось. Значок копіювання —
   теж: це кнопка, а не текст про посилку. */
.sl-ttnw.is-done{color:var(--green-d)}
.sl-ttnw.is-ref{color:var(--danger)}
.sl-ttnw.is-done .sl-np,.sl-ttnw.is-done .sl-npwhen,.sl-ttnw.is-done .muted{color:#3d8b5c}
.sl-ttnw.is-ref  .sl-np,.sl-ttnw.is-ref  .sl-npwhen,.sl-ttnw.is-ref  .muted{color:#c0524c}
.sl-ttnw.is-done .sl-ttn,.sl-ttnw.is-done .sl-npst-t{color:var(--green-d)}
.sl-ttnw.is-ref  .sl-ttn,.sl-ttnw.is-ref  .sl-npst-t:not(.sl-npref){color:var(--danger)}
.sl-ttnw.is-ref  .sl-ttn:hover{color:#991b1b}
/* Те саме в КАРТЦІ замовлення (блок «Нова пошта» — той самий клас на картці).
   Успадкуванням тут не обійтись: `.card-body` ставить власний сірий, `<b>` у ньому
   — власний чорний, а `<button>` кольору взагалі не успадковує.
   ⚠ `.sl-npbad` («у ТТН ≠ у нас») лишається червоною і в зеленій картці — це
   аварія про ГРОШІ, а не про стан посилки, і зазеленити її означало б сховати. */
.sl-npbox.is-done .card-body,.sl-npbox.is-done .card-body .muted{color:#3d8b5c}
.sl-npbox.is-ref  .card-body,.sl-npbox.is-ref  .card-body .muted{color:#c0524c}
.sl-npbox.is-done .card-body b:not(.sl-npref):not(.sl-npbad),
.sl-npbox.is-done button.sl-npst-b{color:var(--green-d)}
.sl-npbox.is-ref  .card-body b:not(.sl-npref):not(.sl-npbad),
.sl-npbox.is-ref  button.sl-npst-b{color:var(--danger)}
/* ── ПЛАШКИ КЛІТИНКИ ДЕКЛАРАЦІЇ — ОДНА ГЕОМЕТРІЯ НА ВСІ ТРИ ──
   «Без післяплати», «Затримка» і «Відмова одержувача» — три однаково аварійні
   висновки про ту саму посилку, і стояти вони мусять однаково. Доти відмова була
   просто червоним ТЕКСТОМ (.8rem у журналі, 1.02rem у картці, 1.04rem у вікні)
   поруч із плашками .75rem — три позначки одного роду виглядали як три різні
   сорти повідомлень, і клітинка читалась як набір випадкових написів.
   Плашка, а не кольорові літери: у рядку серед сірих підписів червоне слово
   читається як «одне зі слів», а плашка зупиняє око. */
.sl-nomoney,.sl-nplate,.sl-npref{display:inline-block;margin-top:3px;padding:1px 7px;
  border-radius:6px;color:#fff;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em}
/* ⚠ Червоне — там, де щось УЖЕ пішло не так: товар поїхав без післяплати
   («не заплатять») або одержувач відмовився («їде назад»). */
.sl-nomoney,.sl-npref{background:var(--danger)}
/* ⚠ СПОСІБ ОПЛАТИ на місці «без післяплати» — та сама геометрія, але СІРА і
   без крику: порожня післяплата в декларації з OLX-доставкою, оплатою за
   посиланням чи безготівкою по IBAN — не аварія, а сам спосіб оплати (гроші
   йдуть повз Нову пошту). Червона плашка там означала б тривогу на рівному
   місці — і, як усяка хибна тривога, знецінювала б справжню. Див.
   `sales_pay_channel()`. */
.sl-paych{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:6px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);
  font-size:.72rem;font-weight:700;white-space:nowrap}
/* ⚠ «Затримується» — бурштинова, а не червона: це ще не аварія, а прострочена
   обіцянка НП, і зрівнювати «машина запізнюється на дві години» з «гроші не
   повернуться» не можна. Плашка потрібна, бо самої лише стадії тут мало: НП і
   через дві години після обіцяної хвилини пише те саме «орієнтовна доставка». */
.sl-nplate{background:var(--amber)}
/* У вікні маршруту вони стоять під статусом окремими блоками — там рядок не
   ділиться з іншими позначками, і плашці потрібен власний відступ. */
.sl-ttnbody .sl-nplate,.sl-ttnbody .sl-npref{margin-top:6px;font-size:.78rem}
/* У картці замовлення стан — кнопка з великим текстом (`button.sl-npst-b b`), і
   її розмір переважив би розмір плашки. Відмова там мусить лишатись плашкою того
   самого розміру, що й затримка одразу під нею. */
button.sl-npst-b b.sl-npref{font-size:.75rem}
/* Копіювання в шапці вікна — біля самого номера. Блідою тут їй бути нема від чого
   (рядка, на який наводять, у заголовку немає), тож видимість як у картці. */
.modal-title .t2cp{opacity:.7}

/* ── Вікно маршруту декларації ── */
.sl-ttnbox{width:min(660px,100%)}
.sl-ttnbody{margin-top:4px;max-height:min(72vh,760px);overflow:auto}
.sl-ttnwait{padding:18px 0;color:var(--muted)}
.sl-ttnst{font-size:1.04rem;font-weight:800;line-height:1.35}
/* Коли саме — рядком одразу під статусом, бо це його друга половина: сам по собі
   статус каже, ЩО з посилкою, і мовчить про те, коли це буде. */
.sl-ttnwhen{font-size:.88rem;color:var(--muted);margin-top:3px}
.sl-ttnraw{font-size:.85rem;color:var(--muted);margin-top:3px}
.sl-ttnat{margin-top:10px;font-size:.79rem;color:var(--muted)}
.sl-npok{color:var(--green-d);font-weight:700}
/* Два кінці маршруту поруч — коротка відповідь на «звідки й куди»; покрокова
   стрічка йде нижче окремим блоком (`.sl-npmv`). */
.sl-nproute{display:flex;gap:12px;margin:12px 0;padding:11px 13px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.sl-npend{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-npend span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sl-npend b{font-size:.96rem;overflow-wrap:anywhere}
.sl-npend i{font-style:normal;font-size:.81rem;color:var(--muted);overflow-wrap:anywhere}
.sl-nparr{align-self:center;color:var(--muted);font-size:1.25rem}
@media (max-width:520px){.sl-nproute{flex-direction:column}.sl-nparr{transform:rotate(90deg)}}
/* Рядки «підпис — значення». Порожніх серед них не буває: їх не малює скрипт. */
.sl-nprows{display:flex;flex-direction:column}
.sl-nprow{display:flex;justify-content:space-between;gap:14px;padding:5px 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.sl-nprow:last-child{border-bottom:0}
.sl-nprow>span{color:var(--muted);flex:0 0 auto}
.sl-nprow>b{min-width:0;text-align:right;overflow-wrap:anywhere}
/* Прострочена планова дата — тим самим бурштином, що й плашка затримки: це та сама
   подія, лише названа в списку полів. */
.sl-nprow-late>span,.sl-nprow-late>b{color:var(--amber)}

/* ── Гроші декларації ──
   Окремою коробкою, а не рядком серед полів: решта вікна відповідає на «де
   посилка», а це — на «чи ми за неї отримаємо», і плутати їх не можна. */
.sl-npmoney{margin:12px 0;padding:10px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg)}
.sl-npm-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-weight:800}
.sl-npm-h>b{font-size:1.05rem;white-space:nowrap}
.sl-npm-our{margin-top:3px;font-size:.85rem;color:var(--muted)}
.sl-npm-our b{color:var(--text)}
/* Аварійний вигляд — рамка й підкладка, а не сам лише червоний текст: у вікні,
   де половина рядків сірі, червоне слово читається як ще один рядок. */
.sl-npm-bad{border-color:var(--danger);background:rgba(220,38,38,.07)}
.sl-npm-bad .sl-npm-h{color:var(--danger)}
.sl-npm-bad .sl-npm-our b{color:var(--danger)}

/* ── Покроковий маршрут ──
   Стрічка подій, та сама, що на сайті НП (`getDocumentsEWMovement`). Три стани
   малюються по-різному навмисно: пройдене — сірим, «зараз» — зеленим і жирним,
   обіцянки — пунктиром, бо це ще не факт, а план перевізника. */
.sl-npmv{margin-top:14px}
/* Геометрія: вісь стрічки по центру крапок (12px крапка, лівий край якої збігається
   з лівим краєм `ol`), тож `padding-left` списку дорівнює зсуву крапки. Інакше
   крапки «майбутнього» вилазили за лівий край і обрізались прокруткою вікна. */
.sl-npmv ol{list-style:none;margin:8px 0 0;padding:0 0 0 24px;position:relative}
.sl-npmv ol::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;
  width:2px;background:var(--line)}
.sl-npmv li{position:relative;display:flex;gap:12px;padding:5px 0;font-size:.86rem}
.sl-npmv li::before{content:'';position:absolute;left:-24px;top:10px;width:12px;
  height:12px;border-radius:50%;background:var(--line);box-shadow:0 0 0 3px var(--panel);
  box-sizing:border-box}
/* ⚠ Крапки станів адресуються РАЗОМ з `li` (`li.sl-mv-now::before`), а не самим
   класом: `.sl-npmv li::before` специфічніший за `.sl-mv-now::before`, і всі три
   стани малювались однаковим сірим — «зараз» не відрізнявся від історії взагалі. */
.sl-mv-passed{color:var(--muted)}
.sl-npmv li.sl-mv-now{font-weight:800}
.sl-npmv li.sl-mv-now::before{background:var(--green-d)}
.sl-mv-future{color:var(--muted)}
/* Обіцянка перевізника — ПОРОЖНЯ крапка (кільце), а не пунктирна: пунктир на колі
   12 px розпадається на три штрихи й читається як обрізаний кружок, а не як «ще не
   сталось». */
.sl-npmv li.sl-mv-future::before{background:var(--panel);border:2px solid var(--muted)}
/* ⚠ Прострочена обіцянка — та сама «майбутня» подія, чия година вже минула. НП
   лишає її в `future` скільки завгодно, тож сірою вона читалась як «ще попереду»,
   хоча насправді це «мало статись і не сталось». Бурштином — тим самим, що й
   плашка затримки в клітинці: подія одна. */
.sl-npmv li.sl-mv-future.is-late{color:var(--amber);font-weight:700}
.sl-npmv li.sl-mv-future.is-late::before{border-color:var(--amber)}
.sl-npmv li.sl-mv-future.is-late .sl-mv-t i{color:var(--amber)}
.sl-mv-t{flex:0 0 120px;white-space:nowrap}
.sl-mv-t i,.sl-mv-e i{display:block;font-style:normal;font-size:.76rem;
  color:var(--muted);font-weight:400}
.sl-mv-e{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){
  .sl-npmv li{flex-direction:column;gap:1px}
  .sl-mv-t{flex:none}
}

/* ── Вікно «стара база» ──
   Висота обмежена, бо в номера буває півтори сотні замовлень, а вікно мусить
   лишатись вікном: прокрутка тут внутрішня. */
.sl-srcbox{width:min(780px,100%)}
.sl-srcbody{max-height:min(66vh,620px);overflow:auto;margin-top:4px}
.sl-srcrow{border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  margin-top:10px;background:var(--bg)}
.sl-srcid{font-weight:800;margin-bottom:3px}

/* ── Замовлення поверх картки клієнта ──
   Помітно менше за картку (26 px поля проти 14 у `.modal-full`) — саме щоб було
   видно, що воно лежить ПОВЕРХ чогось, а не замінило його. */
.sl-ordm{padding:26px}
.sl-ordm .modal-box{width:min(1100px,100%);
  height:calc(100vh - 52px);height:calc(100dvh - 52px)}

/* ── Журнал замовлень: таблетки стадій ──
   Колір НЕ прикраса: він той самий, що в тегу стадії (`.sl-st`) і на плитках
   огляду — тобто одна стадія має один колір скрізь у розділі. Сірою смужкою
   однакових таблеток розклад читав лише той, хто дочитував підпис.
   Таблетка ще й ПОСИЛАННЯ (перезавантажує журнал зі стадією в адресі), тож
   обрана мусить помітно втискатись — звідси густа заливка в `.active`. */
.sl-fch{cursor:pointer;font:inherit;font-size:.84rem;line-height:1.2;
  display:inline-block;text-decoration:none}
.sl-fch b{font-weight:800}
.sl-fch.sl-new{background:#ea580c;border-color:#ea580c;color:#fff}
.sl-fch.sl-wait{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.sl-fch.sl-run{background:#dcfce7;border-color:#86efac;color:var(--green-d)}
.sl-fch.sl-off{background:#fee2e2;border-color:#fecaca;color:var(--danger)}
/* Та сама пара, що й у тегів стадії: закрите — густа темно-зелена заливка, щоб
   таблетка «Завершено» не зливалась із сусідньою «Виконується». */
.sl-fch.sl-done{background:var(--green-d);border-color:var(--green-d);color:#fff}
.sl-fch:hover{filter:brightness(.97)}
.sl-fch.active{box-shadow:inset 0 0 0 2px currentColor}
/* ── «Незакриті відмови» — зріз поверх стадій, а не стадія ──
   Стоїть у тому ж ряду таблеток, але навмисно НЕ схожа на сусідні: у стадій
   пастельні заливки, а тут густий червоний — той самий, що в таблетки на огляді
   (`.sl-wpill-off`), звідки в цей зріз і приходять. Клас окремий (`.sl-fchref`,
   без `.sl-fch`) ще й тому, що робочий стіл фільтрує рядки по набору `.sl-fch`
   без перезавантаження, а ця таблетка — звичайне посилання в новий запит.

   ⚠️ Селектори — ОБОВ'ЯЗКОВО `.chip.sl-fchref`, а не сам `.sl-fchref`: базовий
   `.chip.active` (дві класи) переважає одинарний клас, і в обраному зрізі таблетка
   ставала ЗЕЛЕНОЮ — типовим кольором обраного чипа. Те саме правило, що й у
   сусідніх `.sl-fch.sl-*` вище: колір стадії теж завжди парний. */
.chip.sl-fchref{background:var(--danger);border-color:var(--danger);color:#fff;
  font-size:.84rem;line-height:1.2;text-decoration:none}
.chip.sl-fchref b{font-weight:800;color:#fff}
.chip.sl-fchref:hover{background:#991b1b;border-color:#991b1b;color:#fff}
/* Вибраний зріз — темніший червоний плюс біла риска всередину: `currentColor` тут
   дав би червоне на червоному, тобто нічого. Заливку повторюємо явно, бо саме її
   перебивав `.chip.active`. */
.chip.sl-fchref.active{background:#991b1b;border-color:#991b1b;color:#fff;
  box-shadow:inset 0 0 0 2px #fff}
/* «Всі» лишається нейтральною — вона не стадія, а скидання вибору. */
.sl-fch[data-st="0"].active{background:var(--green);border-color:var(--green);
  color:#fff;box-shadow:none}
/* Порожня стадія на робочому столі: таблетка лишається (зникла читалась би як
   «такого фільтра нема»), але не світиться й не натискається — там нічого нема. */
.sl-fch-0,.sl-fch-0.active{background:var(--panel);border-color:var(--line);
  color:var(--muted);box-shadow:none;cursor:default;filter:none}
/* Поки таблетка фільтрує, зебру рахує JS (`.sl-alt`): `nth-child` не знає про
   сховані рядки й розсипав би смуги на випадкові подвійні. Саме ховання рядка —
   нижче, `.sl-list tr[hidden]`.
   ⚠ `:not(:hover)` в обох — інакше ці правила (вони важчі й стоять нижче) забрали б
   у рядка підсвітку під курсором, яку дає `.tbl tr:not(:first-child):hover td`. */
.tbl-zebra.sl-filtering tr:not(:first-child):not(:hover) td{background:transparent}
.tbl-zebra.sl-filtering tr.sl-alt:not(:hover) td{background:#f0f3f9}

/* Журнал став ширшим (десять колонок замість шести), і на вузькому екрані має
   їхати сам, а не розсувати сторінку: прокрутка — всередині обгортки. */
.sl-listwrap{overflow-x:auto}
.sl-list{min-width:1180px}
/* Рядок, схований таблеткою-фільтром. Явно, а не покладаючись на сам атрибут:
   `hidden` — це `display:block` зі стилів браузера, і будь-яке правило таблиці на
   `display` його перебиває (те саме вже ловили на полях форм). */
.sl-list tr[hidden]{display:none}
/* ── Смуги днів у журналі («За сьогодні» / «За вчора» / «Старіші») ──
   Геометрія й кольори — СПІЛЬНІ зі списком рахунків складу (`.wh-invsep`): між
   двома списками ходять десятки разів на день, і однакове за змістом угруповання
   не може виглядати по-різному. Тут лишається тільки те, чого там нема. */
.sl-list tr:nth-child(2).sl-daysep td{border-top:0}
/* ⚠ Поки ввімкнена таблетка стадії (`.sl-filtering`), числа в смузі ХОВАЄМО:
   вони описують увесь день, а під смугою лишилась одна стадія. Переписувати їх у
   браузері не можна без другої копії правила відмінювання («1 замовлення / 2
   замовлення / 5 замовлень»), яке вже є на сервері, — а показувати старі означало
   б підписувати відфільтрований список чужим числом. У фільтрі смуга відповідає
   на «коли», а не «скільки». */
.sl-list.sl-filtering .sl-daysep i,
.sl-list.sl-filtering .sl-daysep em{display:none}
/* ── Стан і номер однією колонкою (13.09.2026) ──
   Номер стоїть ПІД тегом стадії, у тій самій кнопці: власна колонка коштувала
   64px у кожному рядку заради чотирьох цифр, а найширшим колонкам (вміст
   документа, декларація) їх бракувало. Дрібніший і приглушений — це підпис до
   рядка, а не його зміст; клікається разом зі стадією. */
.sl-list .sl-c-st{white-space:nowrap}
.sl-list .sl-c-no{display:block;margin-top:3px;font-size:.8rem;font-weight:700;
  color:var(--muted)}
button.sl-stb:hover .sl-c-no{color:var(--text)}
.sl-list .sl-when{white-space:nowrap}
.sl-list .sl-sum{white-space:nowrap}
.sl-list .sl-pay{font-size:.86rem;color:var(--muted)}
/* ── Оплата: спосіб зверху, успадкований режим під ним ──
   Клітинка тепер може нести два рядки (`sales_pay_cell()`): ЧИМ платять
   (`pay_info` — те, що обрали на сайті) і, якщо він є, режим отримання грошей
   («контроль оплати» НП). Спосіб — звичайним кольором тексту, бо це і є
   відповідь на питання колонки; режим — сірим дрібним, як усі уточнення в
   журналі (`.sl-when .muted`). Довгі назви ламаємо: скорочення (`SL_PAY_SITE`)
   покриває лише те, що шле магазин, а менеджер пише в поле вільний текст. */
.sl-payw{color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.sl-paym{font-size:.79rem;line-height:1.3;margin-top:2px;color:var(--muted)}
/* ── Організація рахунку — другим рядком (13.09.2026) ──
   «Чим заплатили» і «на чий ФОП це впало» — одне питання, і доти друга його
   половина жила лише в товарному обліку. Дрібним і сірим, як усі уточнення в
   журналі: відповідь тут — спосіб, організація її лише доповнює. */
.sl-payo{font-size:.79rem;line-height:1.3;margin-top:2px;color:var(--muted)}
/* Рахунок є, а спосіб у ньому не проставлений. Мовчазна порожнеча читалась би як
   «післяплата», тож кажемо це вголос — але приглушено, курсивом: це не стан
   замовлення, а незаповнене поле в документі. */
.sl-payno{font-size:.82rem;line-height:1.3;color:#b45309;font-style:italic}
/* ── Стан документа під його номером у журналі (14.09.2026) ──
   Пігулка «Проведений» / «Записаний» тим самим словником, що в картці замовлення
   (`.sl-docline .sl-st`): від неї залежить, чи товар уже пішов зі складу й чи можна
   закривати замовлення. Доти відповідь на це жила лише всередині документа, тобто
   коштувала вікна на кожен рядок. Власним рядком, а не поруч із номером: разом
   вони не влазили в колонку й ламали номер навпіл. */
.sl-docst{margin-top:3px}
.sl-docst .sl-st{margin-top:0;font-size:.72rem}
.sl-list .sl-cname{font-weight:700;margin-top:2px;overflow-wrap:anywhere}
.sl-list .sl-goods{max-height:4.3em}
/* Телефон і «копіювати» — одним рядком, впритул: у списку на пів сотні рядків
   значок, відірваний від номера, неможливо віднести до потрібного. Той самий
   прийом, що в клітинці декларації (`.sl-ttnr`). */
.sl-cph{display:flex;align-items:center;gap:4px;min-width:0}
.sl-cph .t2cp{flex:none}
/* Номер — В ОДИН рядок. Без цього значок відбирав у посилання ширину, і в
   стиснутій колонці «(067) 675-74-68» ламалось на три поверхи (видно в картці
   клієнта, відкритій рамкою у вікні). Номер короткий — з колонки не вилізе. */
.sl-cph a{white-space:nowrap}

/* ── Застояле в роботі: весь рядок світло-фіолетовим (12.09.2026) ──
   «Виконується» довше за `SL_STALE_DAYS` днів — див. `sales_stale_days()`.
   Колір на всьому рядку, а не позначкою в клітинці: питання «чи є в списку
   те, що залежалось» ставлять, ковзаючи оком по таблиці, не читаючи колонок.
   ⚠ Два селектори: перший бʼється із зеброю (рівна специфічність, тож мусить
   стояти НИЖЧЕ за неї), другий — із зеброю таблеток-фільтра
   (`.tbl-zebra.sl-filtering …`, на клас важче). `:not(:hover)` в обох —
   інакше рядок перестав би реагувати на курсор. */
/* Спокійний стан — БЛІДО-фіолетовий: рядок мусить помічатись краєм ока, а не
   забивати собою півжурналу. Насичений відтінок лишився на наведенні — там він
   і потрібен, бо каже «так, я саме на цьому рядку». Доти було навпаки: спокійний
   стан світив густим #d2a6ff, а під курсором рядок ставав звичайним сірим, тобто
   при наведенні ВТРАЧАВ позначку застою. */
.tbl-zebra tr.sl-stale:not(:hover) td,
.tbl-zebra.sl-filtering tr.sl-stale:not(:hover) td{background:#f0e2ff}
/* Рівна вага з `.tbl tr:not(:first-child):hover td` (обидва 0,3,2), тож виграє
   порядком — ці правила стоять нижче. */
.tbl-zebra tr.sl-stale:hover td,
.tbl-zebra.sl-filtering tr.sl-stale:hover td{background:#d2a6ff}
/* ── Накладений платіж NovaPay ≠ сума замовлення — ВЕСЬ рядок червоним ──
   Та сама механіка, що в «застою» вище (разом з `:not(:hover)`, інакше під
   курсором рядок втрачав би позначку), але колір — тривожний: там «лежить
   задовго», а тут «з посилки прийде не та сума». Рядок може мати лише один із
   двох класів — їх розводить сам рендерер (`$rowHtml`), бо два кольорові тла на
   одному рядку читались би як третій стан. */
.tbl-zebra tr.sl-npgap:not(:hover) td,
.tbl-zebra.sl-filtering tr.sl-npgap:not(:hover) td{background:#fee2e2}
.tbl-zebra tr.sl-npgap:hover td,
.tbl-zebra.sl-filtering tr.sl-npgap:hover td{background:#fecaca}
/* Номер документа — кнопка, а виглядає як назва документа: клік відкриває його
   склад вікном (пунктир — той самий прийом, що на номері декларації). */
button.sl-invb{padding:0;border:0;background:none;font:inherit;font-size:.85rem;
  font-weight:700;text-align:left;color:var(--text);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
button.sl-invb:hover{color:var(--green-d)}
/* Кнопка рядка після збереження. Підтвердження лишається В РЯДКУ, де зробили
   дію: спливаюче повідомлення гасне, а питання «а я це вже зберіг?» — ні. */
.sl-ordb.sl-saved{font-weight:700}

/* ── Колонка «Позиції» журналу (11.09.2026) ──
   Те саме, що в списку рахунків складу: документ упізнають по товару, а не по
   номеру. Уся стрічка — одна кнопка «відкрити документ», тож пунктирне
   підкреслення `.sl-invb` тут знімаємо: під картинками воно було б смітинкою. */
.sl-c-pos{width:1%;white-space:nowrap}
.tbl th.sl-c-pos{text-align:left}
button.sl-poss{display:inline-flex;align-items:center;gap:4px;padding:2px;border:0;
  background:none;cursor:pointer;border-radius:8px;line-height:0;text-decoration:none}
button.sl-poss:hover{background:var(--bg)}
/* Коробка СТАЛА, знімок вписується без обрізки: різна висота мініатюр у стрічці
   читалась би як збій таблиці, а не як різні фото. */
.sl-poss img{width:42px;height:34px;object-fit:contain;border-radius:7px;
  border:1px solid var(--line);background:#fff;display:block}
/* Позиція без фото лишає порожній прямокутник — інакше к-сть мініатюр не
   збігалась би з к-стю позицій у документі. */
.sl-pos-no{width:42px;height:34px;border-radius:7px;border:1px dashed var(--line);
  background:var(--bg);color:var(--muted);font-size:.7rem;line-height:32px;
  text-align:center;display:block}
.sl-pos-more{font-size:.74rem;font-weight:700;color:var(--muted);line-height:1;padding:0 3px}

/* ── Вікно рахунку — РАМКА з товарного обліку (13.09.2026) ──
   Усередині не наш переказ документа, а СПРАВЖНЯ сторінка `/warehouse/?page=sell`
   з відкритою формою рахунку: з фінансовими діями, курсом, способом оплати та
   організацією. Тому вікно — майже на весь екран, а висоту тримає САМЕ ВІКНО: у
   рамки власної висоти немає взагалі, і при звичайному `max-height` вона
   схлопнулась би в нуль. Прокрутка — всередині рамки, зовнішньої бути не повинно
   (два повзунки поспіль). Той самий прийом, що в `.sl-cardfr`. */
/* Розміри дає спільний `.modal-full`; тут лишається тільки ЯРУС: рахунок
   відкривають ПОВЕРХ вікна замовлення (`.sl-ordm`, той самий `.modal-full`), і
   покладатись на порядок у розмітці для цього не варто. */
.sl-invm{z-index:130}
.sl-invfr{flex:1 1 auto;min-height:0;width:100%;border:1px solid var(--line);
  border-radius:12px;background:var(--bg)}

/* ── Старе, обрізане вікно складу рахунку — ЗНЯТЕ 13.09.2026 ──
   Класи нижче лишились від нього й новим кодом уже не малюються. Тримаємо їх до
   спільного прибирання CSS: заважати вони не заважають, а видаляти напівнавмання
   з файла на 7 тис. рядків дорожче, ніж лишити.
   ── Вікно складу рахунку ── */
.sl-invbox{width:min(820px,100%)}
.sl-invhead{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  margin:2px 0 10px;font-size:.9rem;color:var(--muted)}
.sl-invnote{padding:9px 12px;border:1px dashed var(--line);border-radius:10px;
  background:var(--bg);font-size:.86rem;margin-bottom:10px;overflow-wrap:anywhere}
.sl-invt{margin-top:4px}
/* Мініатюра позиції — така сама коробка, як у колонці «Позиції» журналу: вікно
   найчастіше відкривають кліком саме по фото, і всередині воно мусить упізнаватись
   тим самим знімком. Коробка СТАЛА, фото вписується без обрізки. */
.sl-invph{width:44px;padding-right:0!important}
.sl-invph img{width:42px;height:34px;object-fit:contain;border-radius:7px;
  border:1px solid var(--line);background:#fff;display:block}
/* Таблиця складу має свої фіксовані колонки (артикул, к-сть, ціна, сума) і у
   вузькому вікні не стискається далі — тож прокрутка мусить бути ВСЕРЕДИНІ неї,
   інакше вилазить горизонтальна смуга через усю сторінку. */
.sl-invwrap{overflow-x:auto}
.sl-invsum{margin-top:10px;text-align:right;font-size:1.02rem}
.sl-invsum b{font-size:1.16rem}

/* ══ Картка замовлення: «Клієнт і отримувач» одним блоком (12.09.2026) ══
   Дві колонки замість двох карток одна під одною. Питання тут одне — КОМУ це
   їде, — і в дев'яти випадках з десяти відповідь обома колонками та сама; двома
   окремими блоками це змушувало щоразу звіряти прізвище згори з прізвищем знизу.
   Ліворуч — хто платить, праворуч — куди й на чиє імʼя. Роздільна риска між ними
   та сама, що між групами панелі фільтрів: видно, де закінчується одне.
   На вузькому екрані колонки стають рядками, і риска переїжджає наверх другої. */
.sl-who-g{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:2px}
.sl-who-c{min-width:0;display:flex;flex-direction:column;gap:7px}
.sl-who-r{padding-left:22px;border-left:1px solid var(--line)}
/* Підпис колонки: що це за людина + дрібним, чим вона відрізняється від сусідньої
   («хто платить» / «кому й куди їде»). Без другого рядка колонки читались як два
   написання одного імені. */
.sl-who-h{font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;color:var(--muted)}
.sl-who-h span{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.sl-who-nm{font-size:1.06rem;font-weight:700;overflow-wrap:anywhere}
.sl-who-ph{font-size:1.02rem;font-weight:700;white-space:nowrap}
/* ── Отримувач БЛОКОМ, а не випадним списком (13.09.2026) ──
   `<select>` тут не влазив у колонку: один його рядок ніс імʼя + телефон + місто +
   поштомат і обрізався на півслові, а сам список питав «котрий з них?» там, де
   варіант майже завжди один. Тепер це такий самий текст, як клієнт ліворуч: поле
   в рядку, значення жирним, значок копіювання — кожне з них переносять у
   декларацію ОКРЕМО. Вибір переїхав під блок, у вікно (`.sl-recpick`).
   Підпис вузький і сталої ширини, щоб значення шикувались у стовпчик. */
.sl-rbx{display:flex;flex-direction:column;gap:5px}
.sl-rbx-r{display:flex;align-items:baseline;gap:8px;min-width:0}
.sl-rbx-l{flex:0 0 84px;font-size:.76rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.02em}
/* Значення НЕ розтягуємо: зі `flex:1 1 auto` значок копіювання відлітав до
   правого краю картки й переставав читатись як «копіювати оце». */
.sl-rbx-v{flex:0 1 auto;min-width:0;font-size:1rem;font-weight:700;overflow-wrap:anywhere}
.sl-rbx-r .t2cp{flex:0 0 auto;align-self:center}
.sl-rbx-t{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 2px 92px}
/* Адреса відділення з НП і примітка — пояснення до вже названого відділення,
   тому дрібним і без підпису: власного рядка «Адреса» вони не варті. */
.sl-rbx-a{margin-left:92px;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.sl-rbx-n{font-size:.8rem;color:var(--muted)}
/* ── Місто: назва вгорі, район з областю дрібним під нею ──
   Віджет НП підписує відділення самою назвою («селище Костянтинівка»), а таких
   сіл у довіднику двадцять. Повна назва в рядок не влазить (і не мусить — на
   екрані її читають, а не диктують), тому вона йде В БУФЕР, а район з областю
   стоять окремим дрібним рядком — рівно як адреса відділення нижче.
   Обгортка потрібна тому, що `.sl-rbx` — колонка з проміжком 5px: без неї
   уточнення відʼїжджало б від свого ж міста на ту саму відстань, що й сусідні
   поля. Див. `sales_recip_city_html()`. */
.sl-rbx-city{display:flex;flex-direction:column;gap:1px;min-width:0}
.sl-rbx-c{margin-left:92px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
/* Знімок замовлення суперечить довіднику — це вже не довідка, а попередження:
   посилка поїде туди, куди його перепише збереження картки. */
.sl-rbx-w{font-size:.8rem;color:#92400e;background:#fef3c7;border-radius:8px;padding:5px 9px}
/* Отримувача щойно змінили, але ще не зберегли — рамка тримає це на видноті доти,
   доки картку не збережуть. */
#slOrdRecBox.is-dirty{border-left:3px solid var(--green);padding-left:9px;margin-left:-12px}

/* ── Вікно вибору отримувача ── */
.sl-recpick{width:min(560px,100%);max-width:none}
.sl-rpl{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;
  max-height:52vh;overflow-y:auto;overflow-x:hidden}
/* Рядок — ціла кнопка: цілитись у радіо-кружечок збоку від імені нема за чим,
   вибирають саме людину. */
.sl-rpick{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font:inherit;color:var(--text);cursor:pointer}
.sl-rpick:hover{border-color:var(--green);background:#f0fdf4}
.sl-rpick.is-on{border-color:var(--green);background:#ecfdf5;box-shadow:inset 0 0 0 1px var(--green)}
.sl-rpick-n{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:700}
.sl-rpick-b{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.sl-rpick-x{font-size:.8rem;color:var(--muted);font-style:italic}
.sl-rpact{flex-wrap:wrap}
/* Отримувач ПІДСТАВЛЕНИЙ, а не збережений — і мовчати про це не можна: у базі
   доти стоїть нуль, і закріплює вибір лише «Зберегти». */
.sl-who-guess{font-size:.8rem;color:#92400e;background:#fef3c7;
  border-radius:8px;padding:5px 9px}
.sl-who-ttn{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted)}
.sl-who-ttn input{padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--text)}
/* Кнопка йде одразу за даними, а не притискається до низу колонки: рівняння по
   нижньому краю лишало під іменем клієнта порожню діру на півблоку, і вона
   читалась як «тут щось не завантажилось». */
.sl-who-act{padding-top:4px}
@media (max-width:760px){
  .sl-who-g{grid-template-columns:1fr;gap:14px}
  .sl-who-r{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:14px}
}

/* ── Картка замовлення: клієнт текстом ── */
/* Тут клієнта не правлять (для цього є його картка), тому це не форма, а два
   готові до вжитку рядки: номер і прізвище — обидва з копіюванням. */
.sl-cltxt{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:2px}
.sl-cltxt-r{display:flex;align-items:center;gap:8px;min-width:0}
.sl-cltxt-r .muted{font-size:.82rem}
.sl-cltxt-r b{font-size:1.02rem;overflow-wrap:anywhere}
/* Копіювання — спільний значок панелі (`.t2cp`, див. `t2_copy_btn()`). Тут він був
   підписом «копіювати», і підпис важив більше за саме значення; окрім того той самий
   значок стоїть у складі, тож дві різні кнопки на одну дію читались як різні дії. */
.sl-cltxt-r .t2cp{margin-left:0}
/* ── Чим із ним звʼязуватись ──
   Поле живе в картці КЛІЄНТА, а потрібне воно тут — там, де дзвонять і пишуть.
   Спосіб — дрібною пігулкою попереду номера: він уточнює, КУДИ писати, а не є
   окремою довідкою. Номер поруч читається тим самим кеглем, що телефон вище. */
.sl-who-comm{gap:6px}
.sl-commt{display:inline-block;padding:1px 8px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
/* ── Месенджер — у СВОЄМУ кольорі ──
   На таблетку дивляться рівно тоді, коли збираються писати, і питання одне:
   «куди саме». Фірмовий колір відповідає на нього, перш ніж око дочитає слово.
   Значення — офіційні бренд-кольори (Telegram #229ED9, Viber #7360F2); телефон
   лишається сірим навмисно — він не месенджер, і фарбувати його не було б у що.
   Клас ставить `sales_comm_pill()`. */
.sl-commt.is-telegram{background:#229ED9;border-color:#229ED9;color:#fff}
.sl-commt.is-viber{background:#7360F2;border-color:#7360F2;color:#fff}
/* ── Таблетка, з якої ПИШУТЬ ──
   Коли за нею стоїть `viber://` чи `tg://` (див. `sales_comm_url()`), вона вже не
   підпис, а дія — і мусить показувати це до кліку: курсор-рука й ледь помітний
   підйом на наведенні. Підкреслення знято навмисно: усередині кольорової пігулки
   воно читається як дефект фарби, а не як посилання. */
.sl-commt.is-lnk{text-decoration:none;cursor:pointer;
  transition:filter .12s ease,box-shadow .12s ease}
.sl-commt.is-lnk:hover{filter:brightness(1.08);box-shadow:0 1px 6px rgba(0,0,0,.18)}
.sl-who-comm b{font-size:.92rem}

/* ── Картка замовлення: рядок документа продажу ── */
/* Стоїть ПЕРЕД полями блоку: перше питання до замовлення — «чим воно продане»,
   і відповідь на нього не мусить лежати між «Коментарем» і кнопкою «Зберегти». */
.sl-docline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  margin:2px 0 12px;padding:9px 12px;border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:10px;background:var(--bg)}
.sl-docline b{font-size:1.02rem}
.sl-docline button.sl-invb{font-size:.95rem}
/* Записаний (непроведений) рахунок — бурштинова смужка збоку: поки він такий,
   замовлення закрити не можна, і рядок мусить казати про це сам, ще до того, як
   людина дійде до замкненого пункту в списку стадій. */
.sl-docline.is-draft{border-left-color:var(--amber);background:#fffbeb}
.sl-docline .sl-st{margin-top:0}
/* Документа продажу немає — це не «порожньо», а незакрита справа: далі по картці
   на цьому спотикається і закриття замовлення, і звірка оплати. */
.sl-nodoc{color:var(--danger);font-weight:700}
/* Дія-посилання всередині рядка («змінити», «привʼязати рахунок»): кнопка тут
   важила б як «Зберегти», хоч вона лише показує приховане поле. */
button.sl-lnk{padding:0;border:0;background:none;font:inherit;font-size:.84rem;
  color:var(--green-d);cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px}
button.sl-lnk:hover{color:var(--text)}

/* ── Привʼязка рахунку руками (офлайн-продаж) ── */
/* Таблетки — це РАХУНКИ цього телефону, тобто готові відповіді: номер, дата й
   сума в одному рядку дають упізнати документ, не відкриваючи його. Зайнятий
   іншим замовленням лишається видимим, але блідим і підписаним номером того
   замовлення: мовчки сховати його означало б лишити людину з питанням «а де ж
   мій рахунок». */
.sl-invpick{margin:0 0 12px}
.sl-pickl{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
.sl-pickb{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;
  border:1px dashed var(--line);border-radius:999px;background:var(--panel);
  font:inherit;font-size:.84rem;font-weight:700;color:var(--text);cursor:pointer}
.sl-pickb i{font-style:normal;font-weight:400;color:var(--muted);font-size:.79rem}
.sl-pickb em{font-style:normal;font-size:.72rem;font-weight:700;color:#92400e;
  background:#fef3c7;border-radius:6px;padding:1px 6px}
.sl-pickb:hover{border-style:solid;border-color:var(--green);background:#f0fdf4}
.sl-pickb.is-on{border-style:solid;border-color:var(--green);background:var(--green);color:#fff}
.sl-pickb.is-on i,.sl-pickb.is-on em{color:#fff;background:none}
.sl-pickb.is-busy{opacity:.62}

/* ── Оплата: одна відповідь, і вона в рахунку ── */
/* Блок став ОДНОКОЛОНКОВИМ (13.09.2026). Дві колонки тут порівнювали «обрав на
   сайті» з «записано в документі», але словники в них різні (рядок магазину проти
   ключа `WH_PAYS`), тож «розбіжність» спрацьовувала там, де все правильно. Правда
   одна — рахунок; намір показується лише доти, доки документа немає.
   Жовтою рамкою тепер підсвічується не «розбіжність», а НЕДОРОБКА: у рахунку не
   проставлені спосіб оплати чи організація. */
.sl-paybox{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.sl-paybox.is-diff{border-color:#fcd34d;background:#fffbeb}
.sl-payc{min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-payc span{font-size:.76rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.sl-payc b{font-size:.95rem;overflow-wrap:anywhere}
/* ФОП / режим переказу — другим рядком під способом: це уточнення до нього, а не
   ще одна відповідь. */
.sl-payc i{font-style:normal;font-size:.8rem;color:var(--muted)}
.sl-paywarn{margin-top:8px;font-size:.83rem;color:#92400e;font-weight:700}
/* ── Список стадій у картці замовлення (`.sl-stpick`) ──
   Той самий словник кольорів, що таблетки стадій у журналі (`.sl-st.sl-*`), тільки на
   `<select>`: стадію по всій панелі впізнають за кольором раніше, ніж прочитають слово,
   а рівно в тому місці, де її МІНЯЮТЬ, список був сірий — і «Відмова» обиралась так
   само буденно, як «Виконується».
   Колір стоїть і на пунктах, і на самому полі (клас поля переставляє JS при виборі):
   закритий список — це відповідь «яка зараз стадія», і сірою вона бути не може.
   Кольори дублюються значеннями, а не `@extend`-ом від `.sl-st`: ті правила прив'язані
   до таблетки (радіус, padding, розмір), і тягнути їх на поле вводу означало б зробити
   з нього таблетку. Правила важчі за `.grid-form select` (дві класи проти класу з
   елементом) — інакше біле тло форми перекрило б заливку.
   Клас СВІЙ, а не `.sl-stsel` зі смуги фільтрів журналу: там такий самий список, але
   він відповідає на інше питання («який зріз я дивлюсь»), і фарбувати його стадіями
   означало б обіцяти, що фільтр щось у замовленнях міняє. */
.sl-stpick{font-weight:700}
.sl-stpick option{font-weight:700}
.sl-stpick.sl-new,.sl-stpick option.sl-new{background:#ea580c;color:#fff;border-color:#ea580c}
.sl-stpick.sl-wait,.sl-stpick option.sl-wait{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.sl-stpick.sl-run,.sl-stpick option.sl-run{background:#dcfce7;color:var(--green-d);border-color:#86efac}
.sl-stpick.sl-off,.sl-stpick option.sl-off{background:#fee2e2;color:var(--danger);border-color:#fecaca}
.sl-stpick.sl-done,.sl-stpick option.sl-done{background:var(--green-d);color:#fff;border-color:var(--green-d)}
/* Замкнена стадія («Завершено» без проведеного рахунку) кольору стадії НЕ отримує:
   зелений пункт, який не можна обрати, читався б як доступний. Правило стоїть ПІСЛЯ
   кольорів навмисно — специфічність та сама, виграє останнє. */
.sl-stpick option:disabled{background:var(--bg);color:var(--muted);font-weight:600}
/* Чому «Завершено» замкнене — під самою формою, а не спливаючим повідомленням у
   момент кліку: людина мусить бачити причину ДО того, як спробує. */
.sl-donehint{font-size:.85rem;color:#92400e;background:#fffbeb;border-radius:9px;
  padding:8px 11px;margin-top:10px}

/* Стан декларації в картці — кнопка маршруту (та сама дія, що й на номері). Тло
   прозоре: читається рівно той самий рядок стану, що й раніше, просто по ньому
   тепер можна клацнути. */
button.sl-npst-b{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
button.sl-npst-b b{font-size:1.02rem}
button.sl-npst-b:hover b{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px}

/* Адреса відділення з НП — підпис під нашим рядком «місто, №», тож дрібніша
   за нього й без власного акценту. */
.sl-npaddr{font-size:.82rem;opacity:.85}