:root {
  --bg: #0f1219;
  --bg2: #161b26;
  --bg3: #1d2433;
  --border: #2a3347;
  --text: #e7ecf5;
  --muted: #8a94a8;
  --accent: #a78bfa;
  --accent-text: #170b2e;
  --green: #3ddc84;
  --red: #ff5c5c;
  --buyer: #222a3a;          /* входящие — нейтральный сине-серый */
  --seller: #342c55;         /* наши — фиолетовый в тон акценту */
  --seller-author: #c4b3ff;  /* подпись автора на нашем сообщении */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
/* тост — мгновенная отдача на действие (снизу по центру) */
#toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1000;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg3); color: var(--text); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 10px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: var(--green); }
.error { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px; }
code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.secret { word-break: break-all; }

button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 400;
}
button.danger { background: transparent; color: var(--red); border: 1px solid var(--red); }

input, textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); }

/* ---------- login ---------- */
#login-screen, .modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 50;
}
.modal { background: rgba(10, 12, 18, 0.85); }
.login-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  width: 320px;
  max-height: 90vh; overflow-y: auto;   /* высокие формы прокручиваются, кнопки достижимы */
  display: flex; flex-direction: column; gap: 12px;
}
/* всегда видимый крестик закрытия (прилипает к верху скроллящейся карточки) */
.modal-x {
  position: sticky; top: 0; align-self: flex-end;
  margin: -20px -20px -14px 0; padding: 2px 10px;
  background: none; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 3;
}
.modal-x:hover { color: var(--text); }
/* поля внутри модалок не вылезают за карточку (в т.ч. input[type=file]) */
.modal .login-card input, .modal .login-card select, .modal .login-card textarea { max-width: 100%; box-sizing: border-box; }
.modal .login-card input[type=file] { width: 100%; }
.login-card h1 { margin: 0; font-size: 24px; }
.login-card h1::after { content: "CRM"; color: var(--accent); }
.login-card h2 { margin: 0 0 4px; font-size: 18px; }
.login-card p { margin: 0 0 8px; }

/* ---------- layout ---------- */
/* 100dvh — динамическая высота: на iOS не уезжает под адресную строку */
#app-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
header {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
body { overflow-x: hidden; }   /* страница не уезжает вбок — скроллит сам блок */
/* единый стиль для своих SVG-иконок (вместо эмодзи) */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: 0 0 auto; }
button .ic { pointer-events: none; }
.brand { font-size: 18px; font-weight: 700; flex: 0 0 auto; }
.brand span { color: var(--accent); }
/* вкладки прокручиваются ВНУТРИ хедера (min-width:0!), а не расталкивают страницу */
nav#tabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: thin; }
nav#tabs::-webkit-scrollbar { height: 4px; }
.brand, #shift-box, .user-box { flex-shrink: 0; }
.tab {
  background: transparent; color: var(--muted);
  border-radius: 8px; font-weight: 500; white-space: nowrap;
}
.tab.active { background: var(--bg3); color: var(--text); }
.user-box { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#user-label b { color: var(--accent); }

.tab-pane { flex: 1; min-height: 0; display: flex; }

/* пейволл: заблокированная тарифом вкладка (только владелец видит превью+замок) */
.tab-locked { opacity: .8; }
.tab-locked::after {
  content: ""; display: inline-block; width: 11px; height: 11px;
  margin-left: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tab-pane.locked { position: relative; }
.tab-pane.locked > *:not(.lock-overlay) { filter: blur(2px); pointer-events: none; user-select: none; }
.lock-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
/* полупрозрачная подложка — цвет фона темы + прозрачность (без color-mix,
   работает во всех браузерах); карточка сверху остаётся непрозрачной */
.lock-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg); opacity: .82;
}
.lock-card { position: relative; z-index: 1; }
.lock-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 28px; max-width: 440px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.lock-card .lock-ico { line-height: 0; margin-bottom: 4px; }
.lock-card .lock-ico .ic { width: 34px; height: 34px; color: var(--muted); }
.lock-card h3 { margin: 8px 0; font-size: 16px; }
.lock-card .lock-upgrade, #plan-upgrade {
  margin-top: 12px; background: var(--accent); color: #fff; border: none;
  padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: 14px;
}
#plan-box h2 { margin-top: 0; }

/* редактор прибыли заказа: правка переменных для одного заказа */
#profit-edit-modal .login-card.wide { max-width: 560px; }
#profit-edit-modal code { font-size: 12px; opacity: .85; }
.pe-vars { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.pe-vars td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pe-vars .pe-name { font-size: 13px; }
.pe-vars .pe-val { width: 130px; }
.pe-vars .pe-ovcell { white-space: nowrap; font-size: 12px; }
.pe-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.pe-tag.warn { border-color: #c9852a; color: #e0a542; }
.pe-tag.ok { border-color: #2e9e5b; color: #3fbb74; }
/* «потрачено» под остатком расходника */
.cons-spent { font-size: 11px; color: var(--muted); margin-top: 2px; cursor: help; }
/* список расходников-кандидатов в модалке прибыли — скролл, если их много */
.pf-cands { max-height: 46vh; overflow-y: auto; margin: 4px 0 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.pf-cands .row-check { display: block; padding: 3px 0; }
/* напоминание «включи лоты FP» — баннер сверху. Это ПЕРВЫЙ flex-ребёнок #app-screen
   (flex-shrink:0), поэтому flex сам резервирует высоту и баннер не перекрывает шапку/
   чат. z-index — на случай мобильных фикс-панелей (их дополнительно сдвигаем ниже). */
.fp-lots-banner { flex: 0 0 auto; position: relative; z-index: 200; cursor: pointer;
  background: #7a2e2e; color: #fff; padding: 9px 14px; text-align: center;
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.fp-lots-banner u { text-underline-offset: 2px; }
.fp-lots-banner .ic { width: 15px; height: 15px; vertical-align: -3px; }
/* плашка «нет связи» — плавающая пилюля сверху по центру, поверх всего */
.conn-lost {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 10000;
  display: flex; align-items: center; gap: 6px; max-width: 92vw;
  background: #b3261e; color: #fff; padding: 7px 14px; border-radius: 20px;
  font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.conn-lost .ic { width: 15px; height: 15px; flex: 0 0 auto; }
/* фильтры «Заказов»: статус площадки + выдан ли товар */
.ord-filter-sel { font-size: 12px; color: var(--muted); display: inline-flex;
  align-items: center; gap: 4px; margin-left: 10px; }
.ord-filter-sel select { font-size: 12px; padding: 3px 6px; border-radius: 7px; }
.ord-deliv-yes { font-size: 11px; color: #3fbb74; margin-left: 4px; white-space: nowrap; }
.ord-deliv-yes .ic { width: 12px; height: 12px; vertical-align: -2px; }
.ord-deliv-no { font-size: 11px; margin-left: 4px; }

/* ---------- chats ---------- */
#chat-list-pane {
  width: 320px; min-width: 260px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--bg2);
}
#chat-search { margin: 10px; }
#chat-list { overflow-y: auto; flex: 1; }
.chat-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.chat-item:hover { background: var(--bg3); }
.chat-item.active { background: var(--bg3); border-left: 3px solid var(--accent); padding-left: 11px; }
.chat-item .top { display: flex; align-items: center; gap: 6px; }
.chat-item .email { flex: 1; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-ico { font-size: 13px; flex-shrink: 0; cursor: default; }
.status-ico.st-wait { filter: grayscale(0.4); opacity: 0.8; }
.chat-item .badge {
  background: var(--accent); color: var(--accent-text);
  border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.chat-item .preview {
  color: var(--muted); font-size: 12px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-item .meta { color: var(--muted); font-size: 11px; margin-top: 3px; }

/* Автопауза 2.0: чат без ответа — красным */
.chat-item.chat-alert { border-left: 3px solid var(--danger, #e5484d); padding-left: 11px; background: rgba(229, 72, 77, 0.08); }
.chat-item.chat-alert.active { background: rgba(229, 72, 77, 0.16); }

#chat-alert-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 6px;
  background: rgba(229, 72, 77, 0.12);
  border: 1px solid var(--danger, #e5484d);
  border-radius: 8px;
}
#chat-alert-bar.hidden { display: none; }
#chat-alert-bar #cab-text { flex: 1; font-weight: 600; color: var(--danger, #e5484d); font-size: 13px; }
#chat-alert-bar.active #cab-text { color: var(--danger, #e5484d); }
#chat-alert-bar:not(.active) #cab-text { color: var(--muted); font-weight: 500; }
#chat-alert-bar button, #chat-alert-bar select {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
}
#chat-alert-bar .hidden { display: none; }

/* снятая тревога: нейтральный цвет интерфейса, свёрнуто в маленькую кнопку «✓» */
#chat-alert-bar.dismissed {
  background: var(--bg2); border-color: var(--border);
  padding: 4px 8px; gap: 6px;
}
#chat-alert-bar #cab-toggle {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--green, #46a758);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
#chat-alert-bar #cab-toggle.hidden { display: none; }

#chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
#chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chat-header-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
#chat-header { flex: 1; font-size: 14px; min-width: 0; }
#chat-header b { color: var(--accent); }
#btn-delivered { white-space: nowrap; }
.delivered-mark { color: var(--green); font-size: 14px; white-space: nowrap; }
#order-info {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  font-size: 13px;
}
.order-line { margin-bottom: 4px; }
.order-options { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.order-opt { display: flex; align-items: center; gap: 6px; }
.order-opt .opt-name { color: var(--muted); }
.order-opt .opt-val { color: var(--text); word-break: break-word; }
.copy-btn { padding: 1px 7px; font-size: 12px; line-height: 1.4; flex: 0 0 auto; }
.order-opt-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* сворачиваемая шторка параметров заказа (стрелка в шапке) */
.order-opt-toggle { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 2px 2px 0; flex: 0 0 auto; }
.order-opt-head .order-opt-title { cursor: pointer; user-select: none; }
.order-options.collapsed .order-opt { display: none; }
.login-card.wide { width: 460px; }
.login-card textarea { resize: vertical; }
#messages {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.msg {
  max-width: 70%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
/* кнопки-инструменты (копировать / по словам) — в служебной строке ПОД текстом,
   больше не перекрывают сам пузырь сообщения */
.msg-tools { display: inline-flex; gap: 4px; margin-left: auto; padding-left: 10px; }
.msg-tool {
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 5px; cursor: pointer;
  background: rgba(127, 127, 127, .18); color: inherit;
  opacity: .5; transition: opacity .12s, background .12s;
}
.msg:hover .msg-tool { opacity: .9; }
.msg-tool:hover { opacity: 1; background: rgba(127, 127, 127, .38); }
.msg-tool.active { background: var(--accent); color: #fff; opacity: 1; }
.msg-tool .ic { width: 13px; height: 13px; }
@media (hover: none) { .msg-tool { opacity: .6; } }   /* на тачах — всегда видно */
/* «слово-чипы»: каждое слово кликабельно и копируется отдельно */
.word-chip { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .1s; }
.word-chip:hover { background: rgba(127, 127, 127, .38); text-decoration: underline; }
.word-chip.copied { background: var(--accent); color: #fff; }
.copy-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.msg.buyer { background: var(--buyer); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.seller { background: var(--seller); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.funpay {
  align-self: center; background: transparent;
  border: 1px dashed var(--border); color: var(--muted);
  font-size: 13px; text-align: center;
}
.msg.support {
  align-self: flex-start; background: transparent;
  border: 1px solid var(--accent); border-left: 3px solid var(--accent);
}
.msg .author-fp { color: var(--accent); font-weight: 600; }
.msg .author-support { color: var(--accent); font-weight: 600; }
.msg .info { color: var(--muted); font-size: 11px; margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.msg.temp { opacity: 0.6; }
.chat-load-more { display: block; width: calc(100% - 16px); margin: 8px; padding: 8px; font-size: 13px; }
.msg .author { color: var(--seller-author); }
.msg a { color: var(--accent); }
.msg img.preview-img { max-width: 240px; border-radius: 8px; display: block; margin-top: 6px; }

#reply-form {
  display: flex; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
#reply-text { flex: 1; resize: none; }
#reply-attach { padding: 9px 12px; font-size: 16px; line-height: 1; align-self: stretch; }

/* ---------- templates pane ---------- */
#templates-pane {
  width: 260px; min-width: 220px;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 12px;
  gap: 12px;
}
#templates-pane h3 { margin: 0; font-size: 14px; }
.tpl-section { display: flex; flex-direction: column; gap: 6px; }
.tpl-head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
}
.tpl-add { padding: 2px 10px; font-size: 16px; line-height: 1; }
.tpl-form { display: flex; flex-direction: column; gap: 6px; }
.tpl-form textarea { font-size: 13px; resize: vertical; }
.tpl-form .row { margin: 0; }
.tpl-form button { padding: 6px 10px; font-size: 12px; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-src-row { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.tpl-src-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tpl-target { font-size: 12px; margin: 2px 0; }
.tpl-target > summary { cursor: pointer; color: var(--muted); }
.tpl-target-body { padding: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.tpl-tgt-cats { width: 100%; font-size: 12px; }
.tpl-tgt-hint { font-size: 11px; }
.tpl-assign-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tpl-assign-tbl th, .tpl-assign-tbl td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.tpl-assign-tbl label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tpl-img-row { display: flex; align-items: center; gap: 8px; }
.tpl-img-row .tpl-img-btn { padding: 4px 8px; font-size: 12px; }
.tpl-img-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-item {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 8px 8px 10px;
  font-size: 12px;
  cursor: pointer;
}
.tpl-item:hover { border-color: var(--accent); }
/* мгновенная отправка: зелёная вспышка строки + «улетающий» самолётик */
.tpl-item.tpl-sent { animation: tplSent .75s cubic-bezier(.3,.8,.3,1); }
@keyframes tplSent {
  0%   { background: rgba(58,166,117,.55); border-color: #3aa675; transform: scale(1.03); box-shadow: 0 0 0 3px rgba(58,166,117,.35); }
  55%  { background: rgba(58,166,117,.20); border-color: #3aa675; transform: scale(1); box-shadow: 0 0 0 3px rgba(58,166,117,0); }
  100% { background: var(--bg3); border-color: var(--border); transform: scale(1); box-shadow: none; }
}
.tpl-item.tpl-sent .tpl-send .ic { animation: tplSendFly .55s ease; }
@keyframes tplSendFly {
  0%   { transform: translate(0,0); opacity: 1; }
  45%  { transform: translate(10px,-10px); opacity: 0; }
  46%  { transform: translate(-7px,5px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 1; }
}
.tpl-text {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap; word-break: break-word; font-weight: 600;
}
/* кнопки действий шаблона — компактный ряд справа */
.tpl-send, .tpl-move, .tpl-edit, .tpl-del {
  flex-shrink: 0; background: transparent; color: var(--muted);
  border: none; padding: 0 3px; font-size: 13px; cursor: pointer; line-height: 1;
}
.tpl-send { color: var(--accent); font-size: 14px; }
.tpl-move:disabled { opacity: 0.25; cursor: default; }
.tpl-move, .tpl-edit, .tpl-del { opacity: 0; transition: opacity 0.15s; }
.tpl-item:hover .tpl-move, .tpl-item:hover .tpl-edit, .tpl-item:hover .tpl-del { opacity: 1; }
/* № позиции шаблона — по умолчанию СКРЫТ, показывается в режиме порядка
   (кнопка «№» в шапке панели включает класс .reorder-on) */
.tpl-pos {
  flex-shrink: 0; align-self: flex-start; display: none;
  background: var(--bg2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 2px 1px 2px 4px; cursor: pointer;
}
.tpl-pos:hover { border-color: var(--accent); color: var(--accent); }
#templates-pane.reorder-on .tpl-pos { display: inline-block; }
/* кнопка-переключатель режима порядка — активна = подсвечена */
#btn-tpl-reorder { font-weight: 700; }
#btn-tpl-reorder.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* № порядка параметра GGsel */
.opt-pos-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.opt-pos { background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; font-weight: 700; padding: 2px 4px; cursor: pointer; }
.opt-pos:hover { border-color: var(--accent); }
/* индикатор загрузки сообщений чата */
.chat-loading, .chat-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 13px; padding: 32px 0; min-height: 120px;
}
.spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* мини-кнопка «открыть товар на GGsel» в шапке чата */
.hdr-prod-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 2px; vertical-align: middle;
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--accent); text-decoration: none; font-size: 12px; line-height: 1;
}
.hdr-prod-link:hover { border-color: var(--accent); background: var(--bg3); }
/* статистика по товарам */
.prod-stats-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.prod-stats-table th, .prod-stats-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prod-stats-table th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.prod-stats-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-stats-table td.prod-name { max-width: 360px; word-break: break-word; }
.prod-stats-table tbody tr:hover { background: var(--bg3); }
/* раскрываемые строки категорий (клик → товары внутри) */
.prod-stats-table tr.cat-row { cursor: pointer; }
.cat-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }
.prod-stats-table tr.cat-detail:hover { background: transparent; }
.prod-stats-table tr.cat-detail > td { padding: 0 8px 8px 22px; }
.cat-detail-box { display: flex; flex-direction: column; gap: 2px; }
.cat-detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px;
  padding: 2px 0; border-bottom: 1px dashed var(--border); }
.cat-detail-row:last-child { border-bottom: none; }
#stats-prod-search { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg3); color: var(--fg); }
.tpl-edit:hover { color: var(--accent); }
.tpl-del:hover { color: var(--red); }
/* предпросмотр при наведении — fixed, чтобы не обрезался прокруткой панели */
.tpl-preview {
  display: none;
  position: fixed; z-index: 60;
  width: 250px; max-height: 320px; overflow: auto;
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: 8px; padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;   /* превью не должно перехватывать клик по шаблону */
}
.tpl-item:hover .tpl-preview { display: block; }
.tpl-preview-text { font-size: 12px; white-space: pre-wrap; word-break: break-word; font-weight: 400; }
.tpl-preview-img { max-width: 100%; border-radius: 6px; margin-top: 6px; display: block; }
.tpl-preview-src { margin-top: 6px; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.tpl-empty { font-size: 12px; }
/* на тач-устройствах (iPad и пр.) hover не работает: превью «залипает» при тапе и
   налезает на кнопки шаблона (▲▼✎× ➤). Там оно не нужно — отключаем. */
@media (hover: none) { .tpl-preview { display: none !important; } }
.tpl-hint { margin-top: auto; font-size: 11px; }

/* ---------- panels ---------- */
.panel {
  max-width: 640px;
  margin: 24px auto;
  padding: 0 20px;
  width: 100%;
  overflow-y: auto;
}
.panel h2 { margin: 18px 0 8px; font-size: 18px; }
.panel h3 { margin: 14px 0 6px; font-size: 14px; color: var(--muted); }
.notify-row { margin: 4px 0; font-size: 12px; word-break: break-all; }
.row { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
#settings-form { display: flex; flex-direction: column; gap: 10px; }
#settings-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
.panel-wide { max-width: 1100px; }
.table-scroll { overflow-x: auto; }
#stats-table th, #stats-table td { padding: 8px 6px; white-space: nowrap; }
#stats-table td:not(:first-child) { text-align: center; }
#stats-table th { text-align: center; }
#stats-table th:first-child { text-align: left; }
.stats-me td { background: rgba(167, 139, 250, 0.05); }
.pub-badge { font-size: 12px; }
.src-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  flex-shrink: 0; font-weight: 600;
}
.src-gg { background: rgba(167, 139, 250, 0.15); color: var(--accent); }
.src-fp { background: rgba(64, 156, 255, 0.15); color: #4da3ff; }
.src-pl { background: rgba(52, 199, 130, 0.15); color: #34c782; }

/* ---------- shift widget ---------- */
#shift-box {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; white-space: nowrap;
}
#shift-box button { padding: 4px 8px; font-size: 12px; }
.day-marked td { background: rgba(167, 139, 250, 0.08); }
#hours-table { max-width: 560px; }
#hours-controls, #marks-controls { margin-top: 10px; align-items: center; gap: 8px; }
#marks-controls input { flex: 1; }

.pw-value { font-family: ui-monospace, Consolas, monospace; cursor: pointer; user-select: all; }
#btn-tg { display: flex; align-items: center; padding: 7px 10px; }
#btn-tg:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- светлая тема ---------- */
body.light {
  --bg: #f3f5f9;
  --bg2: #ffffff;
  --bg3: #e9edf4;
  --border: #d5dbe7;
  --text: #1c2333;
  --muted: #5b6679;
  --accent: #7c5cf0;
  --accent-text: #ffffff;
  --green: #189e5f;
  --red: #d83a3a;
  --buyer: #e8ecf4;          /* входящие — серо-голубой */
  --seller: #e7defb;         /* наши — светло-фиолетовый */
  --seller-author: #6f4fd6;  /* подпись автора (тёмный, читается на светлом) */
}
body.light .modal { background: rgba(178, 188, 207, 0.55); }
body.light .src-fp { background: rgba(35, 110, 200, 0.12); color: #2272c8; }

/* ---------- скроллбары / селекты ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
select:hover { border-color: var(--accent); }
select:focus { border-color: var(--accent); }

.icon-btn { padding: 7px 9px; font-size: 15px; line-height: 1; }
.fp-offers-hidden { color: var(--red); border-color: var(--red); }
.idle-input { width: 80px; padding: 6px 8px; font-size: 13px; }

/* ---------- расходники ---------- */
#cons-cat-manage { margin-bottom: 14px; }
.cons-cat-head { font-size: 12px; margin-bottom: 6px; }
#cons-cat-list, #stop-words-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#settings-form label.row-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
#settings-form label.row-check input { width: auto; }
.stats-emp-manage { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.stats-emp-manage .muted { font-size: 13px; }
.stats-emp-add { gap: 8px; }
#stats-emp-new { flex: 1; min-width: 140px; }
#stats-emp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 14px; padding: 3px 6px 3px 12px; font-size: 13px;
}
.chip-x { background: transparent; border: none; padding: 0 4px; font-size: 15px; cursor: pointer; color: var(--muted); }
.chip-x:hover { color: var(--red); }
.stop-words-block { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.stop-words-block .muted { font-size: 13px; }
.stop-words-add { gap: 8px; }
#stop-word-new { flex: 1; min-width: 140px; }
.cons-cat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 14px; padding: 3px 6px 3px 12px; font-size: 13px;
}
.cons-cat-chip button { background: transparent; border: none; padding: 0 4px; font-size: 13px; cursor: pointer; }
.cons-cat-chip button.ghost { color: var(--muted); }
.cons-cat-chip button.danger { color: var(--red); }
.cons-cat-chip button.ghost:hover { color: var(--accent); }
#cons-cat-form { gap: 8px; }
#cons-cat-new { min-width: 220px; }
#cons-form { align-items: center; }
#cons-form input { flex: 1; min-width: 220px; }
.cons-data {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  white-space: pre-wrap;
  max-width: 380px;
  user-select: all;        /* клик выделяет всё поле — удобно копировать */
  cursor: text;
}
.cons-remaining { width: 150px; padding: 6px 8px; font-size: 13px; }
#cons-table button.danger { padding: 4px 10px; font-size: 12px; }

/* ---------- инструкции + заметки ---------- */
.pane-head { display: flex; align-items: center; justify-content: space-between; }
.pane-head h3 { margin: 0; }
#btn-templates-close { padding: 2px 9px; font-size: 14px; line-height: 1; }
.ins-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ins-form input, .ins-form textarea { width: 100%; }
.ins-form textarea { resize: vertical; }
#ins-add, #note-add { margin: 8px 0; }
.ins-item, .note-item {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ins-title { font-weight: 600; margin-bottom: 4px; padding-right: 60px; }
.ins-content { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--text); }
.ins-edit, .ins-del { position: absolute; top: 8px; padding: 2px 8px; font-size: 13px; }
.ins-edit { right: 44px; }
.ins-del { right: 10px; }
.note-head { font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-type-inp { margin-left: auto; width: 160px; max-width: 45%; padding: 3px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--text); }
.note-type-inp[readonly] { opacity: .7; }
.notes-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.notes-toolbar select { padding: 4px 8px; }
.cnote-open { color: var(--accent); text-decoration: none; font-weight: 600; }
.cnote-open:hover { text-decoration: underline; }
/* автоответы на события */
.ev-vars { margin: 6px 0 14px; line-height: 2; }
.ev-var { background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 12px; cursor: pointer; }
.ev-var:hover { border-color: var(--accent); }
.ev-vars-title { margin: 4px 0 6px; }
.ev-vars-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px 16px; margin-bottom: 14px; }
.ev-var-row { font-size: 12.5px; }
.ev-var-desc { color: var(--text); }
.ev-var-where { font-size: 11px; }
.ev-img { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ev-img-btn { padding: 2px 8px; font-size: 12px; }
.ev-img-name { font-size: 12px; color: var(--muted); }
.ev-img-del { padding: 0 7px; font-size: 13px; }
.ev-plat { margin: 18px 0 6px; }
/* выпадающее чекбокс-меню (площадка в статистике) */
.dd-wrap { position: relative; display: inline-block; }
.dd-btn { padding: 4px 10px; font-size: 13px; }
.dd-menu { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: nowrap; }
.dd-menu.hidden { display: none; }
.dd-menu .cb { display: flex; align-items: center; gap: 6px; padding: 3px 2px; font-size: 13px; }
.cat-events-cell { background: var(--bg2); padding: 12px 16px !important; }
.cat-events-cell .ev-plat { margin: 10px 0 6px; font-size: 14px; }
.cat-events-cell .ev-plat:first-child { margin-top: 0; }
.ev-scope-hint { margin-bottom: 10px; }
.ev-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg2); }
.ev-group-title { font-weight: 600; margin-bottom: 8px; }
.ev-slot { margin-bottom: 8px; }
.ev-slot-head { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 3px; }
.ev-text { width: 100%; resize: vertical; font-size: 13px; }
.note-item textarea { width: 100%; resize: vertical; font-size: 13px; }
.note-item textarea[readonly] { opacity: 0.85; cursor: default; }
.note-del { margin-top: 6px; padding: 4px 10px; font-size: 12px; }
.cons-dataedit { width: 100%; min-width: 200px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 6px 8px; resize: both; overflow: auto; min-height: 32px; line-height: 1.4; vertical-align: top; }
/* выпадающие списки: читаемый фон опций в обеих темах (раньше был белый фон) */
select option { background: var(--bg2); color: var(--text); }
.cons-assign-multi { min-width: 130px; }
.cons-assign-multi option { background: var(--bg2); color: var(--text); }
/* «кому выдан» — кнопка-дропдаун с чекбоксами (открывается, можно несколько) */
.cons-assign { position: relative; display: inline-block; }
.cons-assign-btn { min-width: 110px; max-width: 200px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cons-assign-menu { position: fixed; z-index: 50;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; min-width: 150px; max-height: 240px; overflow-y: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.cons-assign-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  font-size: 13px; cursor: pointer; white-space: nowrap; border-radius: 6px; }
.cons-assign-item:hover { background: var(--bg3); }
.cons-assign-item input { width: auto; margin: 0; }
/* автоответы */
.autoreply-rules { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.autoreply-rule { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg2); }
.autoreply-rule.off { opacity: .6; }
.autoreply-rule .ar-text { font-size: 13px; color: var(--muted); margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.autoreply-rule .ar-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.autoreply-rule .ar-acts button { padding: 3px 10px; font-size: 12px; }
/* «Видно» — кнопка-дропдаун со списком чекбоксов */
.dropdown-check { position: relative; display: inline-block; }
.dropdown-btn {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropdown-btn:hover { border-color: var(--accent); }
.dropdown-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 220px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.dropdown-panel.hidden { display: none; }
.dropdown-panel label.cb {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; width: 100%; white-space: nowrap; font-size: 13px; cursor: pointer;
  text-align: left;
}
/* #cons-form — это ID, перебиваем его правило #cons-form input{flex:1;min-width:220px}
   тем же ID + !important, иначе чекбокс растягивается на всю ширину */
#cons-form .dropdown-panel label.cb input[type="checkbox"] {
  flex: 0 0 auto !important; width: 16px !important; height: 16px;
  min-width: 0 !important; margin: 0;
}
/* ячейка данных: вид + кнопка «изменить» справа */
.cons-data-cell { display: flex; align-items: flex-start; gap: 6px; min-width: 220px; }
/* min-width на флекс-детях обязателен: иначе при малом числе строк (фильтр «в
   работе у меня») колонка схлопывается и длинные данные (email) переносятся по
   одному символу вертикально */
.cons-data-cell .cons-datarich, .cons-data-cell .cons-dataedit { flex: 1 1 auto; min-width: 200px; }
.cons-edit-btn { flex: 0 0 auto; padding: 4px 8px; }
.cons-edit-btns { gap: 8px; margin-top: 6px; }
/* колонка «В работе» */
.cons-work-cb { white-space: nowrap; cursor: pointer; }
.cons-inwork-on { color: var(--accent); font-size: 13px; white-space: nowrap; }
#cons-filter-row { align-items: center; }
#hours-add-controls { align-items: center; }
.manual-hours { width: 72px; padding: 4px 6px; font-size: 13px; }

/* ---------- логин/роль слева от таймера смены ---------- */
.header-user { font-size: 14px; white-space: nowrap; }
.header-user b { color: var(--accent); }

/* ---------- шаблоны ниже в той же панели ---------- */
#templates-pane .tpl-section:first-of-type { margin-top: 28px; }

/* ---------- автоподнятие лотов ---------- */
.raise-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; }
#raise-table { font-size: 13px; }

/* ---------- FunPay «смотрит» в правом верхнем углу ---------- */
#fp-looking {
  font-size: 12px; color: var(--muted); margin-left: auto;
  max-width: 55%; text-align: right; word-break: break-word; cursor: default;
}
#fp-looking .fp-look-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#fp-looking .fp-look-net { font-size: 11px; margin-top: 2px; }
#fp-looking b { color: var(--text); font-weight: 600; }
#fp-looking a { color: var(--accent); text-decoration: none; }

/* ---------- FunPay: оплаченные (ожидают выдачи), видны сразу ---------- */
#fp-pending {
  padding: 8px 18px; border-bottom: 1px solid var(--border); background: var(--bg2);
  display: flex; flex-direction: column; gap: 6px;
}
.fp-pend-head { font-size: 12px; }

/* ---------- заказы FunPay в чате ---------- */
#fp-orders {
  padding: 6px 18px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
#fp-ord-toggle { padding: 4px 10px; font-size: 13px; }
#fp-ord-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.fp-ord-item {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.fp-ord-info { flex: 1; min-width: 0; word-break: break-word; }
.fp-ord-status { font-size: 11px; padding: 1px 7px; border-radius: 8px; margin-left: 4px; }
.fp-ord-status.st-wait { background: rgba(255,180,60,.15); color: #e0a032; }
.fp-ord-status.st-done { background: rgba(61,220,132,.15); color: var(--green); }
.fp-ord-status.st-refund { background: rgba(255,92,92,.15); color: var(--red); }
.fp-ord-deliv { display: flex; align-items: center; gap: 6px; }
.fp-ord-deliv button { padding: 4px 10px; font-size: 12px; }
.fp-ord-by { padding: 4px 6px; font-size: 12px; }

/* ---------- заметки о клиенте (per-chat) ---------- */
#chat-notes {
  padding: 8px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg2); font-size: 13px;
}
.cn-head { display: flex; align-items: center; justify-content: space-between; }
.fm-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.fm-item:last-child { border-bottom: none; }
.fm-pat { flex: 1; word-break: break-word; font-size: 13px; }
.fm-meta { font-size: 11px; white-space: nowrap; }
.cn-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.cn-caret { transition: transform .15s; }
#chat-notes.cn-collapsed .cn-caret { transform: rotate(-90deg); }
#chat-notes.cn-collapsed #cn-list, #chat-notes.cn-collapsed #cn-form { display: none; }
#cn-add-btn { padding: 3px 10px; font-size: 12px; }
#cn-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
#cn-form textarea { resize: vertical; font-size: 13px; }
.cn-form-row { margin: 0; align-items: center; gap: 8px; }
.cn-form-row button { padding: 5px 10px; font-size: 12px; }
.cn-item {
  position: relative; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 44px 7px 10px; margin-top: 6px;
}
.cn-meta { font-size: 11px; margin-bottom: 3px; }
.cn-text { white-space: pre-wrap; word-break: break-word; }
.cn-edit, .cn-del {
  position: absolute; top: 5px; background: transparent; border: none;
  padding: 0 5px; font-size: 14px; color: var(--muted); cursor: pointer;
}
.cn-edit { right: 26px; }
.cn-del { right: 6px; }
.cn-edit:hover { color: var(--accent); }
.cn-del:hover { color: var(--red); }

/* ---------- каталог товаров ---------- */
#cat-plat-bar { display: flex; gap: 6px; margin-bottom: 8px; }
#cat-plat-bar.hidden { display: none; }
#catalog-table td { vertical-align: middle; }
.cat-price { width: 100px; padding: 5px 7px; font-size: 13px; }
.cat-vis {
  padding: 4px 12px; border-radius: 12px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
}
.cat-vis.on { color: var(--green, #46a758); border-color: var(--green, #46a758); }
.cat-vis.off { color: var(--text); border-color: var(--danger, #e5484d); }
.cat-auto.on { color: var(--accent); border-color: var(--accent); }
.bulk-auto { background: var(--accent); color: var(--accent-text); border: none; }
.show-auto { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); margin: 6px 2px; cursor: pointer; }
.show-auto input { width: auto; margin: 0; }
#catalog-pager button { padding: 5px 12px; font-size: 13px; }
#catalog-search { flex: 1; min-width: 160px; }

/* лайтбокс изображения */
#img-lightbox .lightbox-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 92vw; max-height: 92vh;
}
#lightbox-img {
  max-width: 90vw; max-height: 80vh; border-radius: 8px;
  object-fit: contain; background: var(--bg2);
}
.lightbox-bar { display: flex; gap: 14px; align-items: center; }
#lightbox-orig { color: var(--accent); text-decoration: none; font-size: 14px; }

/* индикатор онлайна сотрудника */
.emp-dot { font-size: 11px; }
.emp-dot.on { color: var(--green, #46a758); }
.emp-dot.pause { color: #e0a23b; }
.emp-dot.off { color: var(--muted); }

/* статистика заказов */
#orders-stats { padding: 8px 0 12px; }
#orders-stats.hidden { display: none; }
#orders-stats select[multiple] { min-width: 140px; vertical-align: middle; }
.stats-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.stat-card {
  min-width: 120px; padding: 10px 14px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--border);
}
.stat-val { font-size: 20px; font-weight: 700; }
.stat-lbl { font-size: 12px; margin-top: 2px; }
.stat-card.stat-wide { min-width: 220px; }
label.cb { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.stats-emp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.stats-emp-box { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.ord-reward { white-space: nowrap; }

/* графики статистики */
.stats-charts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.stats-charts:empty { display: none; }
/* диаграмма сравнения сотрудников — SVG всегда вписывается по ширине */
#stats-chart { max-width: 100%; overflow-x: auto; }
#stats-chart svg { max-width: 100%; height: auto; display: block; }
.chart-card {
  flex: 1 1 320px; min-width: 280px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--border);
}
.chart-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* ФИКСИРОВАННАЯ высота: у SVG с viewBox + height:auto Safari ИГНОРИРУЕТ max-height,
   и когда карточка растягивается на всю ширину (одна в ряду), высота = ширина/3.5 →
   столбики уезжают за карточку. preserveAspectRatio="xMidYMid meet" впишет содержимое
   в эту высоту без переполнения. */
.chart-svg { width: 100%; height: 150px; display: block; }
.chart-lbl { font-size: 10px; fill: var(--muted); }
/* круговые диаграммы */
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut-svg { width: 150px; height: 150px; flex: 0 0 auto; }
.donut-total { font-size: 22px; font-weight: 700; fill: var(--text); }
.donut-legend { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.donut-leg { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.donut-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* плавающий тултип графиков */
.chart-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--bg2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.chart-tip.hidden { display: none; }
.chart-svg .bar-hit { cursor: pointer; }

/* список отзывов */
.stats-reviews { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.stats-reviews.hidden { display: none; }
.review-row { padding: 8px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.review-stars { color: #e0a83a; font-size: 14px; letter-spacing: 1px; }
.review-emp { margin-left: auto; padding: 1px 8px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; }
.review-text { margin-top: 4px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.review-prod { margin-top: 3px; font-size: 12px; }

/* форматирование текста (инструкции/расходники) */
.fmt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.fmt-toolbar:empty { display: none; }
.fmt-btn {
  padding: 2px 9px; font-size: 13px; border-radius: 7px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
}
.fmt-btn:hover { border-color: var(--accent); }
.fmt-hint { font-size: 11px; }
.copy-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 1px 7px; border-radius: 7px; background: var(--bg2);
  border: 1px solid var(--border); color: var(--text); transition: background .15s;
}
.copy-chip:hover { border-color: var(--accent); }
.copy-chip.copied { background: #3aa675; color: #fff; border-color: #3aa675; }
.copy-chip-ic { font-size: 11px; opacity: .7; }
.cons-data-wrap { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 200px; }
.cons-datarich { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* индикатор активной смены вместо 🟢 */
.dot-live {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #3aa675; box-shadow: 0 0 0 0 rgba(58, 166, 117, .5);
  animation: dot-pulse 1.8s infinite; vertical-align: middle;
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(58, 166, 117, .5); }
  70% { box-shadow: 0 0 0 6px rgba(58, 166, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 166, 117, 0); }
}
/* svg-иконки внутри инлайновых меток (статусы/кнопки с текстом) */
.delivered-mark .ic, .author-support .ic,
.cn-meta .ic, #cab-text .ic, .status-ico .ic { vertical-align: -2px; }

/* заказы (вкладка) */
#orders-plat-bar { display: flex; gap: 6px; margin-bottom: 8px; }
#orders-plat-bar.hidden { display: none; }
#orders-status-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#orders-search { flex: 1; min-width: 180px; }
#orders-table td { vertical-align: middle; }
.ord-status {
  font-size: 12px; padding: 1px 8px; border-radius: 8px;
  border: 1px solid var(--border);
}
.ord-status.st-wait { color: #e0a23b; border-color: #e0a23b; }
.ord-status.st-done { color: var(--green, #46a758); border-color: var(--green, #46a758); }
.ord-status.st-refund { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }
.ord-params td { background: var(--bg2); font-size: 12px; }

/* массовые операции каталога */
#catalog-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 4px 0 10px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
}
#catalog-bulk.hidden { display: none; }
#catalog-price-val { width: 130px; }
#catalog-addcat-wrap.hidden { display: none; }
.bulk-vis { border-color: var(--green, #46a758); color: var(--green, #46a758); }
.bulk-vis.off { border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); }
button.ghost.off { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }
.ord-afk-btn { margin-left: 6px; }
.ord-afk-btn.on { color: var(--green, #46a758); border-color: var(--green, #46a758); }

/* формат отображения каталога */
#cat-format-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fmt-chip {
  padding: 5px 12px; border-radius: 14px; font-size: 13px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer;
}
.fmt-chip:hover { color: var(--text); }
.fmt-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* управление кастомными категориями каталога */
#cat-custom-manage {
  padding: 8px 10px; margin-bottom: 8px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
}
#cat-custom-manage.hidden { display: none; }
.cat-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-manage-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 8px; border-radius: 12px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border);
}
.cc-mini {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 0 2px; font-size: 12px;
}
.cc-mini:hover { color: var(--text); }

/* группы каталога */
tr.cat-group td {
  background: var(--bg2); font-weight: 600;
  padding: 6px 8px; border-top: 1px solid var(--border);
}
.cat-grp-toggle {
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 0 6px;
}
.cat-grp-act { font-size: 12px; padding: 2px 8px; margin-left: 6px; font-weight: 400; }

/* параметры товара GGsel (просмотр) */
tr.cat-opts.hidden { display: none; }
tr.cat-opts td { background: var(--bg2); padding: 8px 12px; }
.opt-tools { margin-bottom: 8px; }
.opt-grp { margin-bottom: 10px; }
.opt-grp-act { display: flex; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.opt-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, rgba(127,127,127,.2)); }
.opt-add-var { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.opt-add-name { flex: 1; min-width: 120px; padding: 4px 7px; font-size: 13px; }
.opt-grp > b { display: block; margin-bottom: 4px; }
.opt-var {
  display: inline-block; margin: 2px 10px 2px 0; font-size: 13px; color: var(--text);
}
.opt-var-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 12px;
}
.opt-var-name { flex: 1; font-size: 13px; }
.opt-var-price { width: 110px; padding: 4px 7px; font-size: 13px; }
/* редактируемые названия параметра/варианта (обводка появляется при наведении) */
.opt-title-inp { width: 100%; margin-bottom: 4px; font-weight: 600; font-size: 14px;
  padding: 4px 7px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text); }
.opt-var-name-inp { flex: 1; min-width: 90px; font-size: 13px; padding: 3px 6px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); }
.opt-title-inp:hover, .opt-title-inp:focus,
.opt-var-name-inp:hover, .opt-var-name-inp:focus { border-color: var(--border); background: var(--bg2); }
.opt-var-impact { font-size: 12px; flex: 0 0 auto; }
.opt-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
}
.opt-bulk.hidden { display: none; }
.opt-bulk-val { width: 130px; }

/* поиск лота в чате (попап над полем ввода) */
#lot-search-pop {
  position: relative; margin: 0 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px;
}
#lot-search-pop.hidden { display: none; }
#lot-search-input { width: 100%; box-sizing: border-box; }
#lot-search-results { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.lot-result {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px; border-radius: 6px; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.lot-result:last-child { border-bottom: none; }
.lr-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  cursor: pointer;
}
.lr-head:hover .lr-title { text-decoration: underline; }
.lr-price { white-space: nowrap; }
.lr-net { font-size: 11px; }
.lr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lr-actions button { padding: 2px 8px; font-size: 11px; }

/* ---------- надкатегории-платформы ---------- */
#platform-bar {
  display: flex; gap: 6px; padding: 8px 10px 2px;
}
#platform-bar.hidden { display: none; }
.plat-chip {
  flex: 1; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
  background: var(--bg2); color: var(--muted);
}
.plat-chip:hover { color: var(--text); }
.plat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* действия в открытом чате (был возврат / арбитраж) — в тон с блоками/чипами рядом */
.cc-action {
  padding: 3px 10px; border-radius: 12px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
}
.cc-action:hover { background: var(--bg3); color: var(--text); }
.cc-action.on { color: var(--green, #46a758); border-color: var(--green, #46a758); }
.cc-action.arb { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }

/* ---------- категории чатов ---------- */
#cat-bar {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 2px;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 14px; cursor: pointer;
  font-size: 12px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--muted);
}
.cat-chip:hover { color: var(--text); }
.cat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-chip .cat-count {
  font-size: 10px; padding: 0 5px; border-radius: 8px; font-weight: 700;
  background: rgba(0,0,0,0.18);
}
.cat-chip.active .cat-count { background: rgba(255,255,255,0.25); }
.cat-chip.cat-add { font-weight: 700; padding: 3px 11px; }

#chat-cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg2);   /* как у соседних блоков (шапка/заказы), единый фон */
}
#chat-cats.hidden { display: none; }
#chat-cats .cc-label { font-size: 13px; }
.cc-tag {
  padding: 2px 9px; border-radius: 12px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
}
.cc-tag.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-vis-opt { display: block; margin: 4px 0; font-size: 14px; }
#cat-vis-users {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0 22px;
}
.cat-vis-user { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- мобильная версия ---------- */
.mobile-only { display: none; }

/* до 1024px включительно — адаптивная раскладка (телефоны и планшеты/iPad
   в портрете): одна колонка + выезжающие панели. Раньше порог был 768px,
   из-за чего iPad портрет (820–1024px) попадал в тесную 3-колоночную версию */
@media (max-width: 1024px) {
  .mobile-only { display: inline-flex; }

  header {
    flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px;
  }
  .brand { font-size: 16px; order: 1; }
  .user-box { order: 2; margin-left: auto; }
  nav#tabs {
    order: 3; flex: 1 0 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab { white-space: nowrap; padding: 7px 12px; }
  #shift-box { order: 4; flex: 1 0 100%; font-size: 12px; }

  /* три колонки -> одна; чат и шаблоны выезжают поверх */
  #chat-list-pane {
    width: 100%; min-width: 0;
    border-right: none;
  }
  #chat-pane {
    position: fixed; inset: 0; z-index: 40;
    height: 100vh; height: 100dvh;  /* iOS: панель чата на всю высоту экрана */
    background: var(--bg);
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  body.chat-open #chat-pane { transform: translateX(0); }

  #templates-pane {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
    height: 100vh; height: 100dvh;
    width: 280px; max-width: 85vw;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    border-left: 1px solid var(--border);
  }

  /* когда сверху висит баннer «включи лоты FP» — сдвигаем фикс-панели вниз на его
     высоту (--fpb-h ставит JS), иначе баннер (z-index:200) перекрывает их верх */
  body.fpb-on #chat-pane,
  body.fpb-on #templates-pane {
    top: var(--fpb-h, 0px);
    height: calc(100dvh - var(--fpb-h, 0px));
  }
  #templates-pane.open { transform: translateX(0); }

  .msg { max-width: 85%; }
  .tpl-preview { right: auto; left: 0; top: 100%; width: 220px; }

  /* модалки и карточки на всю ширину */
  .login-card, .login-card.wide { width: 92vw; max-width: 360px; }
  .panel { padding: 0 12px; margin: 14px auto; }
  #order-info, #chat-header-row, #reply-form { padding-left: 12px; padding-right: 12px; }

  #btn-chat-back { font-size: 22px; padding: 2px 10px; line-height: 1; }
  #btn-templates-toggle { font-size: 16px; }

  #templates-pane { overflow-y: auto; }

  /* формы расходников/часов/инструкций — в столбик, ничего не вылезает */
  #cons-form, #cons-form .row, #hours-add-controls, #marks-controls, #employee-form {
    flex-direction: column; align-items: stretch;
  }
  #cons-form select, #cons-form input, #cons-form button,
  #hours-add-controls input, #hours-add-controls button { width: 100%; }
  #cons-form input, #cons-data { min-width: 0; }
  /* поле данных расходника — крупнее, чтобы было удобно читать/копировать/править
     (раньше схлопывалось до неюзабельной ширины внутри прокручиваемой таблицы) */
  .cons-dataedit { min-width: 240px; min-height: 64px; font-size: 15px; }
  #cons-data { min-height: 48px; }
  #hadd-hours { width: 100% !important; }
  /* таблицы прокручиваются по горизонтали, кнопки не обрезаются */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  #employee-table, #cons-table, #stats-table { min-width: 640px; }
  .panel-wide, .panel { overflow-x: hidden; }

  /* «Статистика»: две панели не рядом, а в столбик на всю ширину — иначе блоки
     сжимаются/обрезаются по краям, а диаграмма сравнения выходит крошечной */
  #tab-stats { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* панели НЕ скроллят каждая по отдельности (иначе в колонке они делят высоту и
     «Статистика заказов» сжимается в узкую полоску) — скроллит весь таб целиком */
  #tab-stats > .panel { width: 100%; max-width: 100%; margin: 14px 0; overflow: visible; flex: 0 0 auto; }

  /* ---- вкладка «Статистика» на мобиле: всё читаемо, ничего не вылезает ---- */
  /* карточки в 2 колонки вместо узкой ленты */
  .stats-cards { gap: 8px; }
  .stat-card { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 8px 10px; }
  .stat-card.stat-wide { flex-basis: 100%; }
  .stat-val { font-size: 17px; }
  /* графики и диаграммы — по одному в ряд на всю ширину */
  .stats-charts { flex-direction: column; gap: 12px; }
  .chart-card { flex: 1 1 100%; min-width: 0; }
  .donut-wrap { justify-content: center; }
  /* фильтры периода/площадки/сотрудников — в столбик, переносятся */
  #order-stats-panel .row { flex-direction: column; align-items: stretch; gap: 8px; }
  #order-stats-panel select { width: 100%; }
  .stats-emp-row, .stats-emp-box { width: 100%; }
  .stats-emp-box { gap: 6px 12px; }
  /* список отзывов — на всю ширину, перенос длинного текста */
  .stats-reviews { width: 100%; }
  .review-row { padding: 8px 10px; }
  .review-text { font-size: 14px; }

  /* iOS Safari: поля с шрифтом <16px заставляют экран резко зумиться при
     фокусе. Принудительно 16px на мобиле — ввод больше не «прыгает». */
  input, select, textarea { font-size: 16px; }

  /* учитываем «чёлку»/нижнюю плашку iPhone (safe-area), чтобы шапка и поле
     ввода не залезали под системные элементы */
  header { padding-top: calc(8px + env(safe-area-inset-top)); }
  #reply-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  /* кнопка «Отправить» — нормальный тап-таргет, не сжимается текстовым полем */
  #reply-send { min-width: 76px; min-height: 44px; padding: 9px 14px; flex: 0 0 auto;
    align-self: stretch; font-weight: 600; }
  #reply-attach, #reply-lot-search { min-width: 44px; min-height: 44px; flex: 0 0 auto;
    align-self: stretch; }
  #reply-text { min-height: 44px; }
}

@media (min-width: 1025px) {
  /* на десктопе панель чата всегда видна, классы мобайла не влияют */
  #chat-pane { transform: none !important; }
}

/* ---- формулы прибыли + переменные расходников ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form-grid .row { grid-column: 1 / -1; }
#pvar-table code, #pform-table code { background: var(--bg2, rgba(127,127,127,.12)); padding: 1px 5px; border-radius: 4px; }
#pform-table tbody tr, #pvar-table tbody tr { cursor: pointer; }
#pform-table tbody tr:hover, #pvar-table tbody tr:hover { background: rgba(127,127,127,.08); }
.cons-vars-cell { line-height: 2; max-width: 260px; }
label.cons-var { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); margin-right: 10px; white-space: nowrap; }
.cons-var-input { width: 64px; }
button.ghost.danger { color: var(--red); border-color: transparent; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
.profit-cons { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
#profit-modal label { display: block; margin: 6px 0; }
.ord-profit-btn { font-size: 11px; padding: 2px 7px; margin-left: 6px; opacity: .8; }
.ord-profit-btn.manual { color: var(--accent, #4a90d9); border-color: currentColor; }
.cat-temp.on { color: var(--accent, #4a90d9); border-color: currentColor; font-weight: 600; }
#temp-modal .login-card { max-width: 460px; }
/* активная кнопка-переключатель (напр. «Формулу выберу вручную») */
button.ghost.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* FunPay: сумма после комиссии под ценой лота в каталоге */
.cat-net { font-size: 11px; margin-top: 2px; white-space: nowrap; }

/* ---- внутренний чат сотрудников ---- */
#tab-team { flex: 1; min-height: 0; }
#team-channels { width: 240px; min-width: 200px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; }
.team-ch-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; font-size: 14px; }
#team-channel-list { display: flex; flex-direction: column; }
.dms-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.dms-item { text-align: left; background: transparent; border: none; color: var(--text);
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.dms-item:hover { background: rgba(127,127,127,.12); }
.team-sec { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.team-ch-name .ic { width: 13px; height: 13px; opacity: .6; vertical-align: -2px; }
.team-ch { display: flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer;
  border-left: 3px solid transparent; }
.team-ch:hover { background: rgba(127,127,127,.08); }
.team-ch.active { background: rgba(127,127,127,.12); border-left-color: var(--accent); }
.team-ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-ch .badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; }
.team-ch-edit { opacity: 0; }
.team-ch:hover .team-ch-edit { opacity: 1; }
#team-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* обёртка чата должна занимать всю высоту, чтобы поле ввода уходило вниз */
#team-view { flex: 1; min-height: 0; flex-direction: column; }
#team-view:not(.hidden) { display: flex; }
#team-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-mute { font-size: 12px; white-space: nowrap; }
.team-mute .ic { width: 15px; height: 15px; }
#team-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
/* прижимаем сообщения к низу (к полю ввода), но без обрезки прокрутки при переполнении */
#team-messages::before { content: ""; margin-top: auto; }
.team-msg { max-width: 76%; align-self: flex-start; background: var(--bg2);
  border-radius: 10px; padding: 6px 10px; }
.team-msg.mine { align-self: flex-end; background: var(--seller, rgba(167,139,250,.18)); }
.team-msg.special { border: 1px solid var(--accent); }
.team-msg-head { font-size: 12px; margin-bottom: 2px; }
.team-msg-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.team-mention { color: var(--accent); font-weight: 600; }
#team-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px;
  border-top: 1px solid var(--border); }
#team-input { flex: 1; min-width: 0; resize: vertical; min-height: 40px; }
#team-send, .team-sendbtn { flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 8px; }
.team-sendbtn { background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.team-sendbtn:hover { color: var(--accent); border-color: var(--accent); }
#team-send .ic, .team-sendbtn .ic { width: 18px; height: 18px; }
/* фильтр списка: Вместе / Каналы / Личные */
.team-filter { display: flex; gap: 4px; padding: 4px 10px 8px; }
.team-filter button { flex: 1; padding: 5px 6px; font-size: 12px; border-radius: 7px;
  border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.team-filter button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tch-access { max-height: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.tch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px; }
.tch-row select { width: auto; }
/* кнопка «назад» к списку — только на узком экране */
.team-back { display: none; }
@media (max-width: 760px) {
  #team-channels { width: 100%; min-width: 0; border-right: none; }
  .team-back { display: inline-flex; }
  /* мастер-деталь: виден либо список, либо открытый чат (не оба разом) */
  #team-main { display: none; }
  body.team-open #team-channels { display: none; }
  body.team-open #team-main { display: flex; }
}

/* ---- роли (RBAC) ---- */
.role-chip { display: inline-block; background: var(--accent); color: #fff; border-radius: 10px;
  padding: 1px 8px; margin: 1px 3px 1px 0; font-size: .82em; }
.emp-roles-cell { position: relative; }
.dropdown-panel.role-assign { position: absolute; z-index: 30; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 190px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.dropdown-panel.role-assign .cb { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.role-assign-save { margin-top: 6px; width: 100%; }
.role-form { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.role-matrix, .role-list-table { border-collapse: collapse; margin: 10px 0; }
.role-matrix th, .role-matrix td { border: 1px solid var(--border); padding: 4px 8px; text-align: center; }
.role-matrix td:first-child { text-align: left; }
.role-list-table th, .role-list-table td { border: 1px solid var(--border); padding: 4px 7px;
  font-size: .85em; text-align: center; white-space: nowrap; }
.role-list-table td:first-child { text-align: left; }
.role-actions { display: flex; gap: 3px; }
#profit-modal .profit-formulas label.row-check,
#profit-modal .pf-block label.row-check { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
#profit-modal .pf-block { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; }
#temp-modal label.row-check { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
#temp-modal input:not([type=checkbox]):not([type=radio]), #temp-modal textarea, #temp-modal select { width: 100%; }
#temp-modal .row { display: flex; gap: 8px; align-items: center; }
#temp-modal .row select, #temp-modal .row input { width: auto; }
.temp-panel { border: 1px solid var(--border, #444); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.temp-panel-head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 6px; }
.temp-panel-head button { margin-left: auto; }
.temp-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-top: 1px solid var(--border, rgba(127,127,127,.2)); }
.temp-row .temp-name { flex: 1 1 40%; }
.temp-row .temp-what { flex: 0 0 auto; }
.temp-row .temp-left { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.temp-row .temp-left.soon { color: var(--red); font-weight: 600; }
.temp-row button { margin-left: auto; }
#buyer-modal .login-card { max-width: 480px; }
#buyer-modal label { display: block; margin: 10px 0 2px; }
#buyer-modal input, #buyer-modal select { width: 100%; }
#buyer-info { margin: 6px 0 10px; line-height: 1.5; }
.buyer-est { margin-left: 8px; font-size: 12px; white-space: nowrap; }
#buyer-modal .row { display: flex; gap: 8px; align-items: center; }
#buyer-modal .row select, #buyer-modal .row input { width: auto; }
#catalog-table.hide-buyer .col-buyer { display: none; }
.buyer-price-inp { width: 90px; }
.col-buyer input { text-align: right; }
.cat-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-actions button { margin: 0; }
.vars-help { margin: 8px 0 4px; }
.vars-help summary { cursor: pointer; color: var(--accent); font-size: 13px; user-select: none; }
.vars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 10px 0; }
.vars-grid h4 { margin: 6px 0 4px; }
.vars-table { width: 100%; border-collapse: collapse; }
.vars-table td { padding: 3px 10px 3px 0; vertical-align: top; font-size: 13px; }
.vars-table td:first-child { white-space: nowrap; }
@media (max-width: 760px) { .vars-grid { grid-template-columns: 1fr; } }
.texts-card { max-width: 740px; }
#texts-modal .login-card.wide.texts-card { width: 900px; max-width: 94vw; }
.texts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.texts-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.texts-row textarea, .texts-row input { width: 100%; }
/* заголовок — растягиваемое поле (можно увеличить высоту/размер) */
.texts-title-area { resize: vertical; min-height: 38px; font-size: 16px; line-height: 1.35; font-weight: 600; font-family: inherit; }
/* редактор цены внутри окна редактирования */
.texts-price-sec { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.texts-price-sec > b { font-size: 13px; display: block; margin-bottom: 2px; }
.texts-price-sec input { max-width: 220px; }
@media (max-width: 700px) { .texts-row { grid-template-columns: 1fr; } }
.cl-crumbs { margin: 4px 0 8px; font-size: 13px; }
.cl-crumbs a { color: var(--accent); cursor: pointer; }
.cl-cats { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; }
.cl-cat { text-align: left; background: transparent; color: var(--text); border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 6px; padding: 7px 10px; cursor: pointer; font-size: 14px; }
.cl-cat:hover { background: rgba(127,127,127,.08); }
.cl-filters { margin: 10px 0; }
.cl-filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cl-filters-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
#confirm-modal .login-card.wide.texts-card { width: 1080px; max-width: 96vw; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-table th, .cf-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cf-table .cf-sel { min-width: 130px; }
.tpl-cvars-block { margin: 10px 0; }
.cv-row { display: flex; gap: 6px; margin-top: 5px; align-items: center; }
.cv-row .cv-name { flex: 0 0 34%; }
.cv-row .cv-val { flex: 1 1 auto; }
.cv-row .cv-del { flex: 0 0 auto; padding: 4px 9px; }
.tpl-vars { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.tpl-vars-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tpl-chip { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text); cursor: pointer; }
.tpl-chip:hover { border-color: var(--accent); color: var(--accent); }
#create-lot-modal label { display: block; margin: 8px 0 2px; }
#create-lot-modal .texts-card { max-width: 780px; }
@media (max-width: 700px) { .cl-filters-grid { grid-template-columns: 1fr; } }
/* глаз «Показывать лоты»: зелёный = показаны, красный = скрыты */
#btn-fp-offers { color: var(--green, #46a758); }
#btn-fp-offers.fp-offers-hidden { color: var(--red); }
.tpl-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border, rgba(127,127,127,.2)); }
.tpl-item b { flex: 1; }
.cl-cvars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.cl-cvars-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
#tpl-editor label, #templates-modal label { display: block; margin: 6px 0 2px; }
@media (max-width: 700px) { .cl-cvars-grid { grid-template-columns: 1fr; } }

/* отзыв покупателя в чате */
#chat-review { margin: 6px 10px 2px; display: flex; flex-direction: column; gap: 6px; }
.review-card { border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 8px 10px; background: rgba(124,92,246,.10); margin: 6px 0; }
.rev-stars { color: #f5a623; letter-spacing: 1px; }
.rev-text { margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.rev-reply-row { display: flex; gap: 6px; margin-top: 7px; }
.rev-reply-inp { flex: 1; }
.rev-answer { margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(90,140,255,.10); font-size: 13px; }