/* ═══════════════════════════════════════════════════════════════
   РЕДИЗАЙН 2026-10 «Обсидиан»: стеклянные панели-плиты на тёмном фоне
   с тёплой подсветкой, Wix Madefor, золото градиентом.
   Оболочка (меню слева) + раздел «Чаты». Подключается после style.css
   и перекрывает его. Остальные разделы пока в старой вёрстке — лежат
   на стеклянной плите и получают новые цвета и шрифт.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --black: #060607;  --dark: #0f0f12;  --card: #141417;
  --border: #25252b; --border-light: #2e2e35;
  --text: #f1f1f3;   --text2: #a7a9b2; --text3: #8b8e98;
  --gold: #f2c46d;   --gold-light: #ffd98f; --gold-dark: #9a6a1f;
  --danger: #ff5d52; --success: #5ad69a;
  --font: 'Wix Madefor Text', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --display: 'Wix Madefor Display', 'Wix Madefor Text', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #060607; --surface: #0f0f12; --surface2: #141417; --accent: #f2c46d; --accent3: #ffd98f;

  /* стекло */
  --ob-glass: linear-gradient(180deg, rgba(30,30,35,.66), rgba(14,14,17,.72));
  --ob-glass-sh: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.55);
  --ob-blur: blur(26px) saturate(160%);
  /* «колодец» — утопленное поле */
  --ob-well: rgba(0,0,0,.3);
  --ob-well-sh: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  /* кнопка-стекляшка */
  --ob-chip: rgba(255,255,255,.05);
  --ob-chip-sh: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.07);
  /* выбранный пункт */
  --ob-sel: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  --ob-sel-sh: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07);
  /* золото */
  --ob-gold: linear-gradient(180deg, #ffe2a3 0%, #f2c46d 45%, #d99a32 100%);
  --ob-gold-sh: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(242,180,80,.28);
  --ob-gold-ink: #1a1205;
  /* срочное */
  --ob-red: linear-gradient(180deg, #ff7a6e, #e5453a);
  --ob-red-sh: 0 4px 14px rgba(255,93,82,.45), inset 0 1px 0 rgba(255,255,255,.35);
  --rd-coral: #ff9a8f;

  --rd-bg: #060607; --rd-panel: #111114;
  --rd-s1: rgba(255,255,255,.035); --rd-s2: rgba(255,255,255,.05); --rd-s3: rgba(255,255,255,.065); --rd-s4: rgba(255,255,255,.09);
  --rd-line: rgba(255,255,255,.06); --rd-line2: rgba(255,255,255,.08);
  --ob-pop: #1a1a1f;   /* непрозрачный фон всплывающих меню */
  --sb-w: 236px;
  --ob-gap: 12px;
}
body { font-family: var(--font); background: var(--rd-bg); letter-spacing: -0.003em; }
/* Свет за стеклом и лёгкое зерно — под панелями */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(232,168,72,.24), rgba(232,168,72,0)) -260px -320px / 980px 900px no-repeat,
    radial-gradient(closest-side, rgba(84,120,210,.16), rgba(84,120,210,0)) calc(100% + 200px) calc(100% + 360px) / 1000px 900px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.035), rgba(255,255,255,0)) 55% 35% / 760px 520px no-repeat;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.14); background-clip: padding-box; }
::selection { background: rgba(242,196,109,.3); }

/* Стеклянная плита — общий вид панелей */
.sb, .main, .cx-list, .cx-conv, .cx-client, .cx-pipe {
  background: var(--ob-glass); -webkit-backdrop-filter: var(--ob-blur); backdrop-filter: var(--ob-blur);
  border-radius: 22px; box-shadow: var(--ob-glass-sh);
}

/* ── Каркас ─────────────────────────────────────────────────── */
.app { position: relative; display: flex; align-items: stretch; gap: var(--ob-gap); padding: var(--ob-gap); box-sizing: border-box; max-width: none; height: 100vh; height: 100dvh; }
.main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; padding: 26px 32px; box-sizing: border-box; }
.main:has(#page-chats.active) { padding: 0; overflow: hidden; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.mtop { display: none; }
.sb-scrim { display: none; }

/* ── Боковое меню ───────────────────────────────────────────── */
.sb {
  width: var(--sb-w); flex: none; height: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px; padding: 18px 12px 12px; box-sizing: border-box; border: 0;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 2px 18px 8px; }
.sb-logo { width: 32px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; cursor: default; user-select: none; }
.sb-logo img { width: 32px; height: auto; display: block; }
.sb-brand-name { flex: 1; min-width: 0; font: 700 13px var(--display); letter-spacing: .16em; white-space: nowrap; color: var(--text); }
.sb-brand-name span { background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-collapse { width: 30px; height: 30px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sb-collapse:hover { background: var(--ob-chip); color: var(--text); }

.sb .sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; background: none; border: 0; flex-wrap: nowrap; overflow: visible; }
.sb > * { flex-shrink: 0; }
.sb .tab {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; box-sizing: border-box;
  padding: 0 11px; margin: 0; border: 0; border-radius: 12px; background: transparent;
  color: var(--text2); font: 500 13.5px var(--font); letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sb .tab svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #7f828d; transition: color .18s ease; }
.sb .tab:hover:not(.active) { background: rgba(255,255,255,.04); color: var(--text); }
.sb .tab.active { background: var(--ob-sel); color: #fff; font-weight: 600; box-shadow: var(--ob-sel-sh); }
.sb .tab.active svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(242,196,109,.45)); }
.sb .sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Группы меню «Корея» и «Китай»: раскрываются по нажатию (js/shell.js), внутри — сайты и «В канале» */
.sb .sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb .sb-group-items { display: none; flex-direction: column; gap: 2px; }
.sb .sb-group.open > .sb-group-items { display: flex; }
.sb .tab-group .sb-caret { width: 14px; height: 14px; margin-left: auto; color: var(--text3); transition: transform .18s ease; }
.sb .sb-group.open > .tab-group .sb-caret { transform: rotate(90deg); }
.sb .sb-group.has-active > .tab-group { color: var(--text); }
.sb .sb-group.has-active > .tab-group svg:not(.sb-caret) { color: var(--gold); }
.sb .tab.tab-sub { height: 34px; padding-left: 30px; font-size: 13px; }
.sb .tab.tab-sub svg { width: 15px; height: 15px; }
body.sb-collapsed .sb .tab.tab-sub { padding-left: 0; }
body.sb-collapsed .sb .tab-group .sb-caret { display: none; }
body.sb-collapsed .sb .sb-group.open > .sb-group-items { background: rgba(255,255,255,.035); border-radius: 12px; }
.sb .tab-unread-badge, .sb .tab.active .tab-unread-badge {
  margin: 0; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--ob-red); box-shadow: var(--ob-red-sh); color: #fff; font: 500 11px var(--mono);
  display: inline-flex; align-items: center; justify-content: center; position: static;
}

/* Подменю раздела (у «Чатов»: вид, папки, каналы, менеджер) */
.sb-sub { display: none; padding-top: 14px; }
body:has(#page-chats.active) .sb-sub { display: block; }
.sb-seg { display: flex; margin: 4px 4px 6px; padding: 3px; border-radius: 13px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.sb-seg .sb-item { flex: 1; justify-content: center; height: 30px; padding: 0 6px; border-radius: 10px; color: #9c9ea8; font-weight: 500; }
.sb-seg .sb-item:hover { background: transparent; color: var(--text); }
.sb-seg .sb-item.on { background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 #fff; }
.sb-sub .sb-label {
  display: block; padding: 18px 11px 8px; font: 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7f828d;
}
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 11px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; color: var(--text2); font: 13.5px var(--font); text-align: left; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.sb-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sb-item.on { background: var(--ob-sel); color: #fff; font-weight: 600; box-shadow: var(--ob-sel-sh); }
.sb-item-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-count { font: 11px var(--mono); color: #7f828d; }
.sb-count.urgent { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--ob-red); box-shadow: var(--ob-red-sh); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.sb-av { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--font); font-style: normal; background: #232328; color: var(--text3); }

/* Подвал меню: пользователь */
.sb .sb-foot {
  margin-top: auto; position: sticky; bottom: -12px; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 10px; margin-left: 0; margin-right: 0; border-radius: 16px;
  background: linear-gradient(180deg, #1c1c21, #151518); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06), 0 -16px 22px rgba(16,16,19,.9);
}
.sb-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); font: 700 13px var(--display); display: inline-flex; align-items: center; justify-content: center; }
.sb .auth-user-email { flex: 1; min-width: 0; font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb .auth-user-email::before { content: attr(data-name); display: block; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.sb .auth-logout-btn { height: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text3); font: 500 12px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sb .auth-logout-btn:hover { background: var(--ob-chip); color: var(--text); }
.sb .sb-owner { color: var(--gold); }

/* Свёрнутое меню — только иконки */
body.sb-collapsed { --sb-w: 66px; }
body.sb-collapsed .sb { padding: 16px 9px 10px; }
body.sb-collapsed .sb-brand { flex-direction: column; padding: 0 0 14px; }
body.sb-collapsed .sb-brand-name,
body.sb-collapsed .sb .sb-label,
body.sb-collapsed .sb-sub,
body.sb-collapsed .sb .auth-user-email,
body.sb-collapsed .sb .sb-owner { display: none !important; }
body.sb-collapsed .sb .tab { justify-content: center; padding: 0; }
body.sb-collapsed .sb .tab-unread-badge { position: absolute; top: 4px; right: 4px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; }
body.sb-collapsed .sb .sb-foot { flex-direction: column; padding: 6px 0; background: none; box-shadow: none; }

/* ═══ ЧАТЫ ═══════════════════════════════════════════════════ */
#page-chats { padding: 0; margin: 0; position: relative; z-index: auto; }
#page-chats.active { display: flex; flex-direction: column; height: 100%; }
.cx-inbox-wrap, .cx-pipe { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-inbox { flex: 1; min-height: 0; display: flex; gap: var(--ob-gap); }
.cx-spacer { flex: 1; }
.cx-mono { font-family: var(--mono); }
.cx-c-bad { color: var(--rd-coral) !important; }

/* Поиск */
.cx-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; box-sizing: border-box; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--text3); transition: box-shadow .18s ease; }
.cx-search:focus-within { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5), 0 0 0 4px rgba(242,196,109,.08); }
.cx-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: 13px var(--font); padding: 0; }
.cx-search input::placeholder { color: var(--text3); }
.cx-search input::-webkit-search-cancel-button { filter: invert(.6); }
.cx-kbd { font: 10.5px var(--mono); color: var(--text3); padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.05); }

/* Список диалогов */
.cx-list { width: 340px; flex: none; display: flex; flex-direction: column; overflow: hidden; }
.cx-list-head { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 22px 16px 12px; }
.cx-list-title { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
.cx-list-title h2 { flex: 1; margin: 0; font: 600 24px var(--display); letter-spacing: -.02em; color: var(--text); }
.cx-list-title span { font: 12px var(--mono); color: var(--text3); }
.cx-chips { display: none; }
.cx-list-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.cx-row {
  width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 11px 12px; margin: 0 0 2px;
  border: 0; border-radius: 16px; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.cx-row:hover { background: rgba(255,255,255,.04); }
.cx-row.active { background: var(--ob-sel); box-shadow: var(--ob-sel-sh), 0 10px 26px rgba(0,0,0,.35); }
.cx-ava {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--font); color: var(--text);
  box-shadow: 0 0 0 2px rgba(18,18,21,.9);
}
.cx-row.unread .cx-ava { box-shadow: 0 0 0 2px #141417, 0 0 0 4px #f2c46d, 0 0 16px rgba(242,196,109,.35); }
.cx-ch { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2.5px #141417; }
.cx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-row-top { display: flex; align-items: center; gap: 6px; }
.cx-row-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #f4f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row.unread .cx-row-name { font-weight: 700; }
.cx-row-time { flex: none; font: 11px var(--mono); color: #7f828d; }
.cx-row.unread .cx-row-time { color: var(--gold); }
.cx-row-mid { display: flex; align-items: center; gap: 8px; }
.cx-row-prev { flex: 1; min-width: 0; font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row.unread .cx-row-prev { color: #d6d7dc; }
.cx-row-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3); min-width: 0; }
.cx-stage { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stage i { width: 6px; height: 6px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.cx-wait { flex: none; font: 11px var(--mono); color: var(--gold); }
.cx-wait.bad { color: var(--rd-coral); }
.cx-row-mgr { flex: none; font-size: 11.5px; }
.cx-tagdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cx-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); font: 500 11px var(--mono); display: inline-flex; align-items: center; justify-content: center;
}
/* Прочитано, но клиенту не ответили */
.cx-noreply {
  flex: none; height: 20px; padding: 0 8px; box-sizing: border-box; border-radius: 10px; display: inline-flex; align-items: center;
  background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.3); color: var(--rd-coral); font: 500 11px var(--font); white-space: nowrap;
}
.cx-empty, .cx-more-hint { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--text3); }

/* Диалог */
.cx-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; background: linear-gradient(180deg, rgba(22,22,26,.5), rgba(10,10,12,.62)); }
.cx-menu .cx-menu-req { display: none; }
@container (max-width: 760px) { .cx-head-actions .cx-hbtn { display: none; } .cx-menu .cx-menu-req { display: block; } }
@container (max-width: 660px) { .cx-head-actions .cx-pill:nth-of-type(2) { display: none; } }
@container (max-width: 620px) { .cx-hint { display: none; } }
@container (max-width: 520px) {
  .cx-conv .cx-head .chat-btn-sm.chat-btn-markread { width: 34px; padding: 0; font-size: 0; }
  .cx-conv .cx-head .chat-btn-sm.chat-btn-markread::before { content: '✓'; font-size: 15px; }
}
.cx-head { flex: none; height: 68px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 22px; border-bottom: 1px solid var(--rd-line); box-sizing: border-box; }
.cx-placeholder-head { color: var(--text3); font-size: 13px; }
.cx-back { display: none; width: 38px; height: 38px; flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
.cx-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-head-main { flex: 1 1 auto; min-width: 140px; }
.cx-head-name { display: flex; align-items: center; gap: 8px; font: 600 18px var(--display); letter-spacing: -.015em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-head-meta { margin-top: 2px; font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-flag { color: var(--gold); }
.cx-status { flex: none; font: 500 11px var(--font); padding: 3px 8px; border-radius: 8px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); }
.cx-status.bad { color: var(--rd-coral); background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.3); }
.cx-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; margin-left: 0; }
.cx-pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 0 0 12px; box-sizing: border-box;
  border-radius: 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text); font-size: 12.5px; cursor: pointer;
  transition: background .18s ease;
}
.cx-pill:hover { background: rgba(255,255,255,.08); }
.cx-pill > i { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.cx-pill-av { width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; flex: none; font: 700 10.5px var(--font); display: inline-flex; align-items: center; justify-content: center; background: #232328; color: var(--text3); }
.cx-pill select { field-sizing: content; max-width: 150px; text-overflow: ellipsis; }
.cx-pill select, .cx-inline-select {
  -webkit-appearance: none; appearance: none; height: 100%; border: 0; outline: none; background: transparent; color: inherit;
  font: inherit; padding: 0 26px 0 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.cx-pill select option, .cx-inline-select option, .cx-select option { background: var(--ob-pop); color: var(--text); }
.cx-hbtn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--ob-gold); box-shadow: var(--ob-gold-sh);
  color: var(--ob-gold-ink); font: 600 12.5px var(--font); white-space: nowrap; cursor: pointer; transition: filter .18s ease;
}
.cx-hbtn:hover { filter: brightness(1.06); }
.cx-head .chat-btn-markread, .cx-head .chat-btn-sm.chat-btn-markread {
  height: 34px; padding: 0 13px; border: 0; border-radius: 11px; background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113;
  font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 #fff;
}
.cx-head .chat-btn-markread:hover { background: #fff; }
.cx-head .cx-noreply-btn {
  height: 34px; padding: 0 13px; border: 0; border-radius: 11px; background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.35);
  color: var(--rd-coral); font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; flex: none;
}
.cx-head .cx-noreply-btn:hover { background: rgba(255,93,82,.18); }
.cx-icon-btn { width: 34px; height: 34px; flex: none; border: 0; border-radius: 11px; background: transparent; color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s ease, color .18s ease; }
.cx-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-icon-btn svg.cx-ic-fill { fill: currentColor; stroke: none; }
.cx-icon-btn:hover { background: var(--ob-chip); color: var(--text); }
.cx-icon-btn.active { color: var(--gold); background: var(--ob-chip); box-shadow: var(--ob-chip-sh); }
.cx-more { position: relative; }
.cx-menu {
  position: absolute; right: 0; top: 40px; z-index: 30; min-width: 230px; padding: 6px; display: flex; flex-direction: column;
  border-radius: 16px; background: rgba(26,26,31,.92); -webkit-backdrop-filter: var(--ob-blur); backdrop-filter: var(--ob-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px rgba(0,0,0,.6);
}
.cx-menu[hidden] { display: none; }
.cx-menu button { height: 34px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 13px var(--font); text-align: left; cursor: pointer; white-space: nowrap; }
.cx-menu button:hover { background: rgba(255,255,255,.07); }
.cx-menu button.danger { color: var(--rd-coral); }

/* Сообщения */
.cx-conv-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#page-chats .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 40px 12px; background: transparent; display: flex; flex-direction: column; gap: 5px; }
.cx-placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text3); font-size: 13px; }
.cx-placeholder svg { width: 34px; height: 34px; fill: none; stroke: #4a4a52; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#page-chats .chat-no-messages { margin: auto; color: var(--text3); font-size: 13px; }
#page-chats .chat-date-divider { margin: 16px 0 12px; display: flex; justify-content: center; }
#page-chats .chat-date-divider::before, #page-chats .chat-date-divider::after { display: none; }
#page-chats .chat-date-divider span {
  height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); color: #a7a9b2; font-size: 11.5px;
}
#page-chats .chat-message { max-width: 62%; margin-bottom: 3px; }
#page-chats .chat-msg-text {
  background: rgba(255,255,255,.065); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
  border: 0; border-radius: 18px 18px 18px 6px; padding: 11px 15px; font-size: 14px; line-height: 1.5; color: var(--text); font-weight: 400;
}
#page-chats .chat-message.out .chat-msg-text {
  background: linear-gradient(180deg, #ffffff, #e6e6ea); color: #0e0e10; border-radius: 18px 18px 6px 18px;
  box-shadow: 0 10px 30px rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.08); font-weight: 400;
}
#page-chats .chat-message.out.mgr-viktor .chat-msg-text { background: linear-gradient(180deg, #e6f6ec, #c9e8d5); color: #0b1a12; box-shadow: 0 10px 30px rgba(90,214,154,.07), inset 0 -1px 0 rgba(0,0,0,.08); }
#page-chats .chat-msg-time { font: 11px var(--mono); color: #7f828d; margin-top: 4px; padding: 0 6px; }
#page-chats .chat-message.out.mgr-viktor .chat-msg-time { color: #7f828d; }
#page-chats .chat-msg-sender { color: var(--text2); font-size: 11px; font-weight: 500; letter-spacing: 0; padding: 0 6px; }
#page-chats .chat-message.out.mgr-viktor .chat-msg-sender { color: var(--success); }
#page-chats .chat-msg-media-placeholder { color: var(--text3); }
#page-chats .chat-msg-img, #page-chats .chat-msg-video { border-radius: 16px; }
#page-chats .chat-msg-file { background: rgba(255,255,255,.065); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-radius: 16px; color: var(--text); }
#page-chats .chat-reply-context { background: rgba(255,255,255,.04); border-color: var(--rd-line2); color: var(--text3); }
#page-chats .chat-comment-reply-btn { color: var(--gold); background: rgba(242,196,109,.08); border-color: rgba(242,196,109,.25); }
#page-chats .chat-msg-failed { color: var(--rd-coral); }

/* Поле ввода */
.cx-input-wrap { flex: none; padding: 6px 28px 22px; }
#page-chats .chat-window-notice { margin: 0 0 8px; padding: 9px 13px; font-size: 12px; color: var(--gold); background: rgba(242,196,109,.08); border: 0; box-shadow: inset 0 0 0 1px rgba(242,196,109,.25); border-radius: 12px; }
#page-chats .chat-window-notice a { color: inherit; }
.cx-composer {
  display: flex; flex-direction: column; border-radius: 20px; padding: 14px 14px 10px 18px;
  background: linear-gradient(180deg, rgba(40,40,46,.7), rgba(22,22,26,.8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.5);
  transition: box-shadow .18s ease;
}
.cx-composer:focus-within { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(242,196,109,.4), 0 0 0 4px rgba(242,196,109,.06), 0 20px 50px rgba(0,0,0,.5); }
#page-chats .cx-composer .chat-input {
  width: 100%; min-height: 44px; max-height: 200px; box-sizing: border-box; resize: none; border: 0; border-radius: 0; outline: none;
  background: transparent; color: var(--text); font: 14px/1.5 var(--font); padding: 0; box-shadow: none;
}
#page-chats .cx-composer .chat-input::placeholder { color: var(--text3); }
.cx-composer-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cx-tool {
  white-space: nowrap; height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text3);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 12px var(--font); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.cx-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-tool:hover { background: var(--ob-chip); color: var(--text); }
.cx-tool.cx-tool-text { padding: 0 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: #c9cbd2; }
.cx-tool.cx-tool-text::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c46d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cx-tool:disabled { opacity: .5; cursor: wait; }
.cx-hint { margin-right: 8px; font: 10.5px var(--mono); color: #6f727c; }
.cx-send {
  height: 36px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink);
  font: 600 13px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: filter .18s ease, transform .12s ease;
}
.cx-send::after {
  content: ''; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1205' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cx-send:hover { filter: brightness(1.06); }
.cx-send:active { transform: translateY(1px); }
.cx-send:disabled { opacity: .6; cursor: wait; }
#page-chats .ai-suggestions { flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; background: none; border: 0; }
#page-chats .ai-suggestion-btn { background: var(--ob-chip); border: 0; box-shadow: var(--ob-chip-sh); color: var(--text); border-radius: 12px; padding: 9px 11px; font: 12.5px/1.4 var(--font); text-align: left; cursor: pointer; }
#page-chats .ai-suggestion-btn:hover { box-shadow: inset 0 0 0 1px rgba(242,196,109,.45); }
#page-chats .ai-suggestions-close { background: transparent; border: 0; color: var(--text3); cursor: pointer; }
#page-chats .chat-attach-preview { margin: 0 0 8px; background: var(--ob-well); border: 0; box-shadow: var(--ob-well-sh); border-radius: 14px; }

/* Карточка клиента */
.cx-client { width: 304px; flex: none; display: flex; flex-direction: column; overflow-y: auto; }
.cx-inbox.cp-hidden .cx-client, .cx-inbox:not(.has-active) .cx-client { display: none; }
.cx-client-grab { display: none; }
#cx-client-deal:empty { display: none; }
.cx-cp-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 22px 18px; }
.cx-ava-lg {
  width: 70px; height: 70px; font: 600 22px var(--display);
  box-shadow: 0 0 0 3px #151518, 0 0 0 5.5px var(--stc, #8b8e98), 0 0 42px -6px var(--stc, transparent);
}
.cx-cp-who { min-width: 0; max-width: 100%; }
.cx-cp-name { font: 600 19px var(--display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cp-sub { margin-top: 3px; font-size: 12px; color: var(--text3); }
.cx-cp-stage { margin: 0 14px; padding: 16px; border-radius: 16px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.cx-cp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text3); }
.cx-cp-row:first-child { margin-bottom: 10px; }
.cx-cp-row:last-child { margin-top: 12px; flex-wrap: wrap; }
.cx-cp-row b { font: 600 16px var(--display); }
.cx-segbars { display: flex; gap: 4px; }
.cx-segbar { flex: 1; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.08); cursor: pointer; transition: opacity .18s ease, background .18s ease; }
.cx-segbar:hover { background: rgba(255,255,255,.18); }
.cx-segbar.on:has(~ .cx-segbar.on) { opacity: .55; }
.cx-segbar.on:not(:has(~ .cx-segbar.on)) { box-shadow: 0 0 12px currentColor; }
.cx-segbar.on:hover { opacity: 1; filter: brightness(1.12); }
.cx-props { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 6px 0 0; padding: 10px 22px; }
.cx-props dt { height: 36px; display: flex; align-items: center; font-size: 12.5px; color: var(--text3); }
.cx-props dd { min-height: 36px; margin: 0; min-width: 0; display: flex; align-items: center; font-size: 13px; color: var(--text); }
.cx-inline {
  width: 100%; min-width: 0; height: 30px; box-sizing: border-box; margin-left: -9px; padding: 0 9px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font: 13px var(--font); outline: none; transition: background .18s ease;
}
.cx-inline:hover { background: rgba(255,255,255,.05); }
.cx-inline:focus { background: var(--ob-well); box-shadow: inset 0 0 0 1px rgba(242,196,109,.45); }
.cx-inline::placeholder { color: #5f626b; }
.cx-inline.cx-mono { font-family: var(--mono); }
.cx-inline::-webkit-inner-spin-button { -webkit-appearance: none; }
.cx-inline-select { padding-right: 26px; }
.cx-client .phone-disp-val { cursor: default; font-family: var(--mono); }
.cx-client .phone-disp-val.phone-empty { color: var(--gold); font-family: var(--font); }
.cx-client .phone-edit-icon { margin-left: 4px; font-size: 11px; opacity: .55; cursor: pointer; }
.cx-client .phone-edit-wrap { align-items: center; gap: 4px; width: 100%; }
.cx-cp-block { padding: 8px 22px 14px; }
.cx-cp-label { margin-bottom: 9px; font-size: 12px; color: var(--text3); }
.cx-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-client .country-btn, .cx-client .conv-tag-btn {
  height: 28px; padding: 0 11px; border: 0; border-radius: 9px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: var(--text2); font: 12px var(--font); cursor: pointer; transition: background .18s ease, color .18s ease;
}
.cx-client .country-btn:hover, .cx-client .conv-tag-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cx-client .country-btn.active { background: linear-gradient(180deg, rgba(242,196,109,.2), rgba(242,196,109,.08)); color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(242,196,109,.4); }
.cx-cp-sec { padding: 8px 22px 14px; }
.cx-cp-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 12px; color: var(--text3); }
.cx-link-btn { padding: 0; border: 0; background: transparent; color: var(--text2); font: 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.cx-link-btn:hover { color: var(--text); }
.cx-link-btn.gold { color: var(--gold); }
.cx-cp-title .cx-link-btn { color: var(--gold); font-size: 12px; }
.cx-cp-actions { margin-top: auto; display: flex; gap: 8px; padding: 12px 14px 14px; }
.cx-cp-actions:empty { display: none; }
.cx-cp-actions .cx-btn { flex: 1; height: 36px; border-radius: 12px; }

/* Кнопки и поля */
.cx-btn {
  height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh);
  color: var(--text2); font: 500 12.5px var(--font); white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease;
}
.cx-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
.cx-btn.active { color: var(--gold); background: rgba(255,255,255,.08); }
.cx-btn-primary { background: var(--ob-gold); color: var(--ob-gold-ink); box-shadow: var(--ob-gold-sh); }
.cx-btn-primary:hover { background: var(--ob-gold); color: var(--ob-gold-ink); filter: brightness(1.06); }
.cx-btn-danger { background: rgba(255,93,82,.08); color: var(--rd-coral); box-shadow: inset 0 0 0 1px rgba(255,93,82,.3); }
.cx-btn-danger:hover { background: rgba(255,93,82,.14); color: var(--rd-coral); }
.cx-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cx-form-row { display: flex; gap: 6px; }
.cx-form-row .cx-input { flex: 1; }
.cx-input, .cx-select {
  height: 34px; min-width: 0; box-sizing: border-box; padding: 0 11px; border: 0; border-radius: 10px; background: var(--ob-well);
  box-shadow: var(--ob-well-sh); color: var(--text); font: 13px var(--font); outline: none;
}
.cx-input:focus, .cx-select:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5); }
textarea.cx-input { height: auto; min-height: 72px; padding: 9px 11px; resize: vertical; line-height: 1.45; }

/* Задачи и заметки (разметку рисует старый код) */
.cx-client .task-empty { font-size: 13px; color: #6f727c; padding: 2px 0; }
.cx-client .task-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 6px; flex-wrap: wrap;
  background: rgba(255,255,255,.035); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.cx-client .task-done-btn { width: 18px; height: 18px; flex: none; margin-top: 1px; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1.5px #55555e; color: transparent; font-size: 11px; cursor: pointer; }
.cx-client .task-done-btn:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.cx-client .task-icon { font-size: 12px; line-height: 20px; }
.cx-client .task-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text); line-height: 20px; }
.cx-client .task-due { flex-basis: 100%; padding-left: 28px; font: 11px var(--mono); color: var(--gold); }
.cx-client .task-due.overdue, .cx-client .task-overdue .task-text { color: var(--rd-coral); }
.cx-client .task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.cx-client .task-item:hover .task-actions { opacity: 1; }
.cx-client .task-edit-btn, .cx-client .task-del-btn, .cx-client .note-edit-btn, .cx-client .note-del { border: 0; background: transparent; font-size: 11px; cursor: pointer; opacity: .7; color: var(--text3); padding: 2px 4px; }
.cx-client .task-item-done { background: none; box-shadow: none; padding: 4px 2px; }
.cx-client .task-item-done .task-text-done { flex: 1; color: var(--text3); text-decoration: line-through; font-size: 12.5px; }
.cx-client .task-done-mark { color: var(--success); font-size: 12px; }
.cx-client .task-more-btn { font-size: 12px; color: var(--text3); cursor: pointer; padding: 4px 0; }
.cx-client .task-done-section { border-top: 1px solid var(--rd-line); margin-top: 4px; padding-top: 4px; }
.cx-client .note-item { padding: 11px 13px; margin-bottom: 6px; border: 0; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.cx-client .note-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; color: var(--text3); }
.cx-client .note-author { font-weight: 600; color: var(--text2); }
.cx-client .note-time { flex: 1; }
.cx-client .note-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.cx-client .task-inline-edit, .cx-client .note-edit-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cx-client .task-edit-input, .cx-client .note-edit-input { height: 34px; padding: 0 11px; border: 0; border-radius: 10px; background: var(--ob-well); box-shadow: inset 0 0 0 1px rgba(242,196,109,.45); color: var(--text); font: 13px var(--font); outline: none; }
.cx-client .note-edit-input { height: 72px; padding: 9px 11px; resize: vertical; }
.cx-client .task-save-btn, .cx-client .task-cancel-btn { height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text); font: 500 12px var(--font); cursor: pointer; }
.cx-client .task-save-btn { background: var(--ob-gold); color: var(--ob-gold-ink); box-shadow: var(--ob-gold-sh); }
.cx-client .note-edit-actions { display: flex; gap: 6px; }

/* ── Воронка ────────────────────────────────────────────────── */
.cx-pipe { overflow: hidden; }
.cx-toolbar { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 14px 18px; border-bottom: 1px solid var(--rd-line); }
.cx-toolbar > * { flex-shrink: 0; }
.cx-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.cx-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: #9c9ea8; font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.cx-seg button:hover { color: var(--text); }
.cx-seg button.active { background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 #fff; }
.cx-toolbar .cx-search-sm { flex: 0 1 230px; width: auto; min-width: 140px; height: 34px; }
.cx-select { height: 34px; cursor: pointer; }
.cx-toolbar .cx-btn { height: 34px; }
.cx-toolbar .cx-stats { flex-shrink: 1; min-width: 0; overflow: hidden; }
@media (max-width: 1600px) { .cx-toolbar .cx-stats { display: none; } }   /* не влезает — те же цифры в папках слева */
.cx-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text3); white-space: nowrap; }
.cx-stats b { color: var(--text); font: 500 12px var(--mono); }
#page-chats .cx-board { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 10px; padding: 14px 16px 16px; overflow-x: auto; overflow-y: hidden; }
.cx-col { width: 256px; flex: none; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: rgba(0,0,0,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); }
.cx-col-head { display: flex; align-items: center; gap: 8px; padding: 13px 10px 4px 14px; }
.cx-col-head > i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.cx-col-name { flex: 1; min-width: 0; font: 600 13.5px var(--display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-col-count { font: 12px var(--mono); color: var(--text3); }
.cx-col-fold { width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--text3); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.cx-col:hover .cx-col-fold { opacity: 1; }
.cx-col-fold:hover { background: var(--ob-chip); color: var(--text); }
.cx-col-sum { padding: 0 14px 6px 30px; font: 12px var(--mono); color: var(--text3); }
.cx-col-body { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 4px 8px 10px; border-radius: 0 0 18px 18px; }
.cx-col-body.chats-col-dragover, .cx-col-thin.chats-col-dragover { background: rgba(242,196,109,.06); box-shadow: inset 0 0 0 1px rgba(242,196,109,.5); }
.cx-col-empty { padding: 14px 8px; text-align: center; font-size: 12px; color: #5f626b; }
.cx-col-more { flex: none; height: 32px; margin-top: 2px; border: 1px dashed rgba(255,255,255,.1); border-radius: 10px; background: transparent; color: var(--text2); font: 12px var(--font); cursor: pointer; }
.cx-col-more:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.cx-col-thin {
  width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 0; box-sizing: border-box;
  border-radius: 18px; background: rgba(0,0,0,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); color: var(--text3); cursor: pointer; user-select: none;
  transition: color .18s ease, background .18s ease;
}
.cx-col-thin:hover { background: rgba(255,255,255,.04); color: var(--text); }
.cx-col-thin > i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.cx-col-thin > b { font: 500 12px var(--mono); color: var(--text2); }
.cx-col-thin > span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; white-space: nowrap; }
.cx-card {
  padding: 11px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.25);
  cursor: grab; user-select: none; transition: box-shadow .18s ease;
}
.cx-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.35); }
.cx-card.hot { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(242,196,109,.4), 0 6px 18px rgba(242,180,80,.1); }
.cx-card-top { display: flex; align-items: center; gap: 8px; }
.cx-ava-sm { width: 26px; height: 26px; font-size: 10.5px; box-shadow: none; }
.cx-ava-sm .cx-ch { width: 10px; height: 10px; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px #1d1d22; }
.cx-card-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card-line { margin-top: 7px; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cx-card-time { font: 11px var(--mono); color: var(--text3); }
.cx-mgr-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 9.5px var(--font); background: #232328; color: var(--text3); }
.chats-kanban.compact .cx-card-line, .chats-kanban.compact .cx-card-foot { display: none; }
.chats-kanban.compact .cx-card { padding: 8px 10px; }
.chats-kanban.compact .cx-col { width: 214px; }

/* Окна чатов (аналитика, история клиента) — в тон */
#analytics-modal .analytics-modal-box, #client-history-modal > div { background: #141417; border: 0; box-shadow: var(--ob-glass-sh); border-radius: 20px; }

/* ── Средние экраны ─────────────────────────────────────────── */
@media (max-width: 1320px) {
  :root { --ob-gap: 10px; --sb-w: 224px; }
  .cx-list { width: 310px; }
  .cx-client { width: 288px; }
  #page-chats .chat-messages { padding: 20px 24px 10px; }
  .cx-input-wrap { padding: 4px 18px 16px; }
  .cx-hint { display: none; }
}
@media (max-width: 1100px) {
  .cx-head-actions .cx-hbtn { display: none; }
}

/* ── Телефон ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app { flex-direction: column; height: auto; min-height: 100dvh; padding: 0; gap: 0; }
  .mtop {
    display: flex; align-items: center; gap: 10px; height: 54px; flex: none; padding: 0 10px;
    position: sticky; top: 0; z-index: 50; background: rgba(14,14,17,.82); -webkit-backdrop-filter: var(--ob-blur); backdrop-filter: var(--ob-blur);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  }
  .mtop-burger { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .mtop-logo { height: 20px; width: auto; }
  .mtop-title { font: 700 13px var(--display); letter-spacing: .16em; color: var(--text); }
  .mtop-title b { color: var(--gold); font-weight: 700; }
  .sb {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1500; width: 288px; height: 100dvh; border-radius: 0 22px 22px 0;
    background: linear-gradient(180deg, rgba(28,28,33,.94), rgba(14,14,17,.96));
    transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: var(--ob-glass-sh);
  }
  body.sb-open .sb { transform: none; }
  body.sb-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .sb-collapse { display: none; }
  body.sb-collapsed { --sb-w: 288px; }
  body.sb-collapsed .sb .sb-label, body.sb-collapsed .sb-brand-name, body.sb-collapsed .sb .auth-user-email { display: block !important; }
  body.sb-collapsed .sb .tab { justify-content: flex-start; padding: 0 11px; }
  .sb .tab { height: 44px; font-size: 14.5px; }
  .sb-item { height: 42px; font-size: 14.5px; }
  .main { flex: none; height: auto; min-height: calc(100dvh - 54px); overflow: visible; padding: 16px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main:has(#page-chats.active) { height: calc(100dvh - 54px); min-height: 0; padding: 0; overflow: hidden; }

  .cx-inbox { gap: 0; }
  .cx-list, .cx-conv, .cx-pipe { border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
  .cx-list { width: 100%; }
  .cx-list-head { padding: 16px 14px 10px; }
  .cx-list-title h2 { font-size: 22px; }
  .cx-conv { display: none; }
  .cx-inbox.has-active .cx-list { display: none; }
  .cx-inbox.has-active .cx-conv { display: flex; }
  .cx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cx-chips::-webkit-scrollbar { display: none; }
  .cx-chip { flex: none; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); font: 500 13px var(--font); white-space: nowrap; }
  .cx-chip span { font-family: var(--mono); font-size: 11.5px; color: var(--text3); }
  .cx-chip span.urgent { color: var(--rd-coral); }
  .cx-chip.on { background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113; box-shadow: inset 0 1px 0 #fff; }
  .cx-chip.on span { color: #55585f; }
  .cx-chip.on span.urgent { color: #c2410c; }
  .cx-chip-select { flex: none; height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); font: 13px var(--font); }
  .cx-kbd { display: none; }
  .cx-row { padding: 12px 10px; }
  .cx-ava { width: 46px; height: 46px; font-size: 15px; }
  .cx-row-name { font-size: 15px; }
  .cx-row-prev { font-size: 14px; }

  .cx-back { display: inline-flex; }
  .cx-close-conv { display: none; }
  .cx-head { height: 58px; padding: 0 6px; gap: 6px; background: rgba(14,14,17,.6); }
  .cx-head-main { cursor: pointer; min-width: 0; }
  .cx-head-name { font-size: 16.5px; }
  .cx-head-actions .cx-pill, .cx-head-actions .chat-sidebar-toggle-btn { display: none; }
  .cx-pill select { max-width: 110px; }
  #page-chats .chat-messages { padding: 14px 12px; }
  #page-chats .chat-message { max-width: 84%; }
  #page-chats .chat-msg-text { font-size: 15px; }
  .cx-input-wrap { padding: 0 8px 8px; }
  .cx-composer { padding: 9px 9px 7px 13px; border-radius: 18px; }
  #page-chats .cx-composer .chat-input { min-height: 40px; font-size: 15px; }
  .cx-tool, .cx-send { height: 38px; }

  .cx-client {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1200; width: auto; max-height: 84dvh;
    border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(30,30,35,.96), rgba(14,14,17,.98));
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 -24px 60px rgba(0,0,0,.6);
  }
  .cx-inbox.cp-hidden .cx-client { display: flex; }
  .cx-client.mobile-open { transform: none; }
  .cx-client-grab { display: flex; justify-content: center; padding: 10px 0 2px; cursor: pointer; }
  .cx-client-grab span { width: 40px; height: 5px; border-radius: 3px; background: #3a3a42; }
  .cx-inline, .cx-input, .cx-select { font-size: 15px; }
  .cx-client .country-btn, .cx-client .conv-tag-btn { height: 36px; font-size: 13.5px; }

  .cx-toolbar { padding: 10px 12px; flex-wrap: wrap; }
  .cx-toolbar .cx-search-sm { flex: 1 1 100%; width: 100%; order: 5; }
  .cx-stats { display: none; }
  #page-chats .cx-board { padding: 12px; }
  .cx-col { width: 82vw; }
}

/* ═══ ОБЩИЕ ЭЛЕМЕНТЫ РАЗДЕЛОВ ════════════════════════════════
   Заголовок с действиями, панель фильтров, плитки цифр, кнопки,
   метки, пустое состояние. Используются всеми разделами. */
.ob-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 20px; }
.ob-head-text { min-width: 0; }
.ob-h1 { margin: 0; font: 600 30px/1.1 var(--display); letter-spacing: -.025em; color: var(--text); }
.ob-head-sub, .ob-head-sub.sf-count { margin-top: 7px; padding: 0; align-self: auto; font-size: 13px; color: var(--text3); white-space: nowrap; }
.ob-head-sub span { color: var(--text); font: 500 13px var(--mono); }
.ob-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-btn, .ob-btn.btn-add {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 12px;
  background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text); font: 600 13px var(--font);
  letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: background .18s ease, filter .18s ease, transform .12s ease;
}
.ob-btn svg, .ob-btn-ghost svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ob-btn:hover { background: rgba(255,255,255,.09); }
.ob-btn:active { transform: translateY(1px); }
.ob-btn-gold, .ob-btn-gold.btn-add { background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); }
.ob-btn-gold:hover, .ob-btn-gold.btn-add:hover { background: var(--ob-gold); filter: brightness(1.06); }
.ob-btn-ghost, .ob-btn-ghost.btn-reset {
  height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 12px; align-self: auto;
  background: transparent; color: var(--text3); font: 500 13px var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap;
}
.ob-btn-ghost svg { width: 14px; height: 14px; }
.ob-btn-ghost:hover { background: var(--ob-chip); color: var(--text); border: 0; }

/* Панель фильтров */
.ob-toolbar, .ob-toolbar.sales-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; background: none; border: 0; border-radius: 0; }
.ob-search, .ob-search.search-bar {
  flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 9px; height: 40px; margin: 0; padding: 0 6px 0 13px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--text3); transition: box-shadow .18s ease;
}
.ob-search:focus-within { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5), 0 0 0 4px rgba(242,196,109,.08); }
.ob-search > svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ob-search input, .ob-search .search-input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none; color: var(--text); font: 13.5px var(--font); }
.ob-search input::placeholder { color: var(--text3); }
.ob-search input::-webkit-search-cancel-button { display: none; }
.ob-search-clear, .ob-search .search-clear { width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ob-search-clear svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ob-search-clear:hover { background: var(--ob-chip); color: var(--text); border: 0; }
.ob-search:has(input:placeholder-shown) .ob-search-clear { visibility: hidden; }
.ob-search .search-count:empty { display: none; }
.ob-seg, .ob-seg.sf-mode { display: flex; gap: 0; padding: 3px; align-self: auto; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.ob-seg button, .ob-seg .sf-mode-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #9c9ea8;
  font: 500 13px var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; transition: color .18s ease;
}
.ob-seg button:hover { color: var(--text); }
.ob-seg button.active, .ob-seg .sf-mode-btn.active { background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 #fff; }
.ob-dates { align-items: center; gap: 8px; }
.ob-toolbar .sf-group { flex-direction: row; align-items: center; gap: 8px; }
.ob-toolbar .sf-label { font: 500 12.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.ob-toolbar .sf-sep { padding: 0; align-self: center; font-size: 13px; color: var(--text3); }
.ob-toolbar .sf-group input, .ob-select, .ob-toolbar .sf-group select {
  height: 40px; width: 124px; min-width: 0; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 12px; outline: none;
  background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--text); font: 13px var(--mono); color-scheme: dark;
}
.ob-toolbar .sf-group input:focus, .ob-select:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5); }
.ob-select, .ob-toolbar .sf-group select {
  width: auto; padding-right: 34px; font: 500 13px var(--font); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.ob-select option { background: var(--ob-pop); color: var(--text); }
.filter-group select.ob-select { padding: 0 34px 0 12px; }   /* style.css .filter-group select перебивал отступ — стрелка наезжала на текст */
.ob-select-wrap { display: flex; align-items: center; gap: 8px; margin: 0; }

/* Плитки цифр */
.ob-kpis, .ob-kpis.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.ob-kpi, .ob-kpi.stat-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 18px 20px; overflow: hidden; border: 0; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}
.ob-kpi:hover { border-color: transparent; }
.ob-kpi .stat-label { display: flex; align-items: center; gap: 7px; font: 500 12.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.ob-kpi .stat-label i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ob-kpi-denis .stat-label i { color: #f2c46d; }
.ob-kpi-viktor .stat-label i { color: #5ad69a; }
.ob-kpi .stat-value { font: 600 34px/1.05 var(--display); letter-spacing: -.03em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-kpi .stat-value small { font-size: 18px; font-weight: 500; color: var(--text3); letter-spacing: 0; }
.ob-kpi-gold .stat-value { background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-kpi-gold .stat-value small { -webkit-text-fill-color: var(--text3); }
.ob-kpi-gold::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 160px; pointer-events: none; background: radial-gradient(closest-side, rgba(242,196,109,.16), rgba(242,196,109,0)); }
.ob-kpi .stat-sub { font-size: 12px; color: #7f828d; }

/* Пустое состояние */
.ob-empty, .ob-empty.empty { padding: 72px 20px; text-align: center; color: var(--text3); font-size: 14px; }
.ob-empty .empty-icon {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--ob-chip); box-shadow: var(--ob-chip-sh);
}
.ob-empty .empty-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--text2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Кнопки-иконки и метки */
.ob-icon-btn { width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s ease, color .18s ease; }
.ob-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-icon-btn:hover { background: var(--ob-chip); color: var(--text); border: 0; }
.ob-icon-danger:hover { background: rgba(255,93,82,.12); color: var(--rd-coral); }
.ob-chip-btn { height: 32px; padding: 0 9px 0 12px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 10px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--gold); font: 600 12px var(--font); cursor: pointer; white-space: nowrap; transition: background .18s ease; }
.ob-chip-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-chip-btn:hover { background: rgba(255,255,255,.09); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; box-sizing: border-box; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: var(--text2); font: 500 11.5px var(--font); letter-spacing: 0; white-space: nowrap;
}
.badge-mgr i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 7px currentColor; }
.badge-denis { border: 0; color: #f2c46d; background: rgba(242,196,109,.1); box-shadow: inset 0 0 0 1px rgba(242,196,109,.28); }
.badge-viktor, .badge-andrey { border: 0; color: #5ad69a; background: rgba(90,214,154,.1); box-shadow: inset 0 0 0 1px rgba(90,214,154,.28); }
.badge-1, .badge-2, .badge-3, .badge-done { border: 0; color: var(--text2); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.badge-pre { border: 0; color: #b6bcff; background: rgba(143,150,255,.1); box-shadow: inset 0 0 0 1px rgba(143,150,255,.26); }
.badge-sto, .badge-no { border: 0; color: var(--rd-coral); background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.28); }
.badge-yes, .badge-active { border: 0; color: #5ad69a; background: rgba(90,214,154,.1); box-shadow: inset 0 0 0 1px rgba(90,214,154,.28); }
.badge-full, .badge-paused { border: 0; color: #f2c46d; background: rgba(242,196,109,.1); box-shadow: inset 0 0 0 1px rgba(242,196,109,.28); }

/* Раскрывающиеся блоки карточек (продажи, заявки) */
.sc-collapse-header { padding: 13px 18px; border-top: 1px solid var(--rd-line); cursor: pointer; transition: background .18s ease; }
.sc-collapse-header:hover { background: rgba(255,255,255,.025); }
.sc-collapse-title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 13px var(--font); color: var(--text2); text-transform: none; letter-spacing: 0; }
.sc-collapse-arrow { width: 16px; height: 16px; flex: none; display: inline-flex; color: var(--text3); font-size: 11px; transition: transform .22s ease; }
.sc-collapse-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-paid-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; display: inline-block; background: #4a4a52; }
.sc-paid-dot.on { background: #5ad69a; box-shadow: 0 0 8px #5ad69a; }

/* Файлы в карточках */
.files-section { border: 0; padding: 2px 0 4px; }
.files-section-title { min-height: 32px; font: 500 12.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.btn-upload-file { height: 30px; padding: 0 11px; border: 1px dashed rgba(255,255,255,.16); border-radius: 9px; background: transparent; color: var(--text2); font: 500 12px var(--font); }
.btn-upload-file:hover { border-color: rgba(242,196,109,.5); color: var(--gold); }
.btn-media-gallery, .btn-docs-gallery { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; font: 600 12px var(--font); letter-spacing: 0; text-transform: none; }
.btn-media-gallery { background: rgba(242,196,109,.1); box-shadow: inset 0 0 0 1px rgba(242,196,109,.28); color: #f2c46d; }
.btn-media-gallery:hover { background: rgba(242,196,109,.16); border: 0; }
.btn-docs-gallery { background: rgba(143,176,255,.1); box-shadow: inset 0 0 0 1px rgba(143,176,255,.28); color: #8fb0ff; }
.btn-docs-gallery:hover { background: rgba(143,176,255,.16); border: 0; }
.file-chip { border: 0; border-radius: 9px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }

/* ═══ ПРОДАЖИ ═══════════════════════════════════════════════ */
.ob-cards, .ob-cards.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 0; align-items: start; }
.sale-card {
  display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.28);
  transition: box-shadow .22s ease, transform .22s ease;
}
.sale-card:hover { border-color: transparent; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 44px rgba(0,0,0,.38); }
.sale-card .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 12px 18px; border: 0; }
.sale-card .sc-title { min-width: 0; }
.sale-card .sc-car { font: 600 17px/1.25 var(--display); letter-spacing: -.015em; color: var(--text); overflow-wrap: anywhere; }
.sale-card .sc-country { margin-top: 3px; font-size: 12.5px; color: var(--text3); letter-spacing: 0; }
.sale-card .sc-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.sale-card .sc-mid { height: auto; padding: 0 18px 14px; border: 0; gap: 6px; overflow: visible; align-content: flex-start; }
.sale-card .sc-info { margin: 0 12px; padding: 13px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; border: 0; border-radius: 14px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.sale-card .sc-info-item { gap: 3px; min-width: 0; }
.sale-card .sc-info-label { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.sale-card .sc-info-val { font-size: 13.5px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.sale-card .sc-client-item, .sale-card .sc-comment-item { grid-column: 1 / -1; }
.sale-card .sc-client-val { font-size: 14.5px; font-weight: 600; }
.sale-card .sc-phone-link { width: fit-content; font: 12.5px var(--mono); color: var(--gold); text-decoration: none; }
.sale-card .sc-phone-link:hover { text-decoration: underline; }
.sale-card .sc-comment-val { color: var(--text2); font-weight: 400; }
.sale-card .sc-comment-toggle { padding: 0; font: 500 11.5px var(--font); color: var(--gold); }
.sale-card .sc-bargain-row { margin: 12px 12px 0; padding: 10px 14px; gap: 10px; border: 0; border-radius: 12px; background: rgba(242,196,109,.06); box-shadow: inset 0 0 0 1px rgba(242,196,109,.16); }
.sale-card .sc-bargain-label { font: 600 12px var(--font); color: var(--gold); text-transform: none; letter-spacing: 0; }
.sale-card .sc-bargain-val { font-size: 12.5px; color: var(--text2); }
.sale-card .sc-info + .sc-collapse-header, .sale-card .sc-bargain-row + .sc-collapse-header { margin-top: 12px; }
.sale-card .sc-bottom { padding: 2px 18px 14px; gap: 10px; }
.sale-card .sc-bottom-label { font: 500 11.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.sale-card .sc-bottom-val { font-size: 12px; }
.sale-card .sc-pay-val { font: 600 19px var(--display); letter-spacing: -.01em; color: var(--gold); }
.sale-card .sc-rate-val { font: 600 17px var(--display); color: var(--text); }
.sale-card .sc-ins-val { font-size: 12.5px; }
.sale-card .sc-paid-badge, .sale-card .sc-unpaid-badge { height: 30px; padding: 0 12px; border: 0; border-radius: 10px; font: 600 12px var(--font); letter-spacing: 0; }
.sale-card .sc-paid-badge { background: rgba(90,214,154,.12); box-shadow: inset 0 0 0 1px rgba(90,214,154,.35); color: #5ad69a; }
.sale-card .sc-unpaid-badge { background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); }
.sale-card .sc-unpaid-badge:hover { color: #5ad69a; box-shadow: inset 0 0 0 1px rgba(90,214,154,.35); border: 0; }
.sale-card .sc-transfer { margin: 2px 12px 14px; padding: 13px 14px !important; border: 0; border-radius: 14px; background: rgba(242,196,109,.05); box-shadow: inset 0 0 0 1px rgba(242,196,109,.14); }
.sale-card .sc-transfer-label { font: 500 11.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.sale-card .stf-item { font: 600 13px var(--font); font-variant-numeric: tabular-nums; }
.sale-card .stf-item em { font-size: 11px; }
.sale-card .stf-item.stf-deduct, .sale-card .stf-op.stf-minus { color: #5ad69a; }
.sale-card .sc-transfer-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(242,196,109,.16); font: 600 21px var(--display); letter-spacing: -.015em; background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sale-card .sc-transfer input { height: 28px; border: 0 !important; border-radius: 8px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); font-family: var(--mono) !important; }
.sale-card .sc-extra-prepaid { margin: 0 12px 14px; padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(255,93,82,.07); box-shadow: inset 0 0 0 1px rgba(255,93,82,.22); }
.sale-card .sc-extra-label { color: var(--rd-coral); font-weight: 600; }
.sale-card .files-section { padding: 2px 18px 14px; }

/* ═══ ЗАЯВКИ И ОСМОТРЫ ═══════════════════════════════════════ */
.ob-kpis-5, .ob-kpis-5.req-stats-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ob-kpi-gold-dot .stat-label i { color: #f2c46d; }
.ob-kpi-bad .stat-label i { color: #ff5d52; }
.ob-kpi-bad .stat-value { color: var(--rd-coral); }
.ob-kpi:not(.ob-kpi-bad):not(.ob-kpi-denis):not(.ob-kpi-viktor):not(.ob-kpi-gold-dot) .stat-label i { color: #6f727c; box-shadow: none; }
.ob-cards.req-grid { padding: 0; }
.req-card {
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.28);
  transition: box-shadow .22s ease, transform .22s ease;
}
.req-card:hover { border-color: transparent; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 44px rgba(0,0,0,.38); }
/* Цвет статуса — тонкая светящаяся линия сверху вместо полосы слева */
.req-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: transparent; }
.req-status-active, .req-status-paused, .req-status-done, .req-card-success, .req-card-declined { border-left: 0; }
.req-status-active::before { background: linear-gradient(90deg, rgba(90,214,154,0), #5ad69a, rgba(90,214,154,0)); }
.req-status-paused::before { background: linear-gradient(90deg, rgba(242,196,109,0), #f2c46d, rgba(242,196,109,0)); }
.req-card-success::before { background: linear-gradient(90deg, rgba(90,214,154,0), rgba(90,214,154,.6), rgba(90,214,154,0)); }
.req-card-declined::before { background: linear-gradient(90deg, rgba(255,93,82,0), rgba(255,93,82,.6), rgba(255,93,82,0)); }
.req-card.overdue-card { border-left: 0 !important; background: linear-gradient(180deg, rgba(255,93,82,.07), rgba(255,255,255,.02)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,93,82,.22), 0 14px 34px rgba(0,0,0,.28); }
.req-card.overdue-card::before { background: linear-gradient(90deg, rgba(255,93,82,0), #ff5d52, rgba(255,93,82,0)); }
.req-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 16px 10px 18px; }
.req-top-main { min-width: 0; }
.req-client { font: 600 17px/1.25 var(--display); letter-spacing: -.015em; color: var(--text); overflow-wrap: anywhere; }
.req-date { margin-top: 4px; font-size: 12.5px; color: var(--text3); }
.req-phone { font-family: var(--mono); font-size: 12px; color: var(--gold); text-decoration: none; }
.req-phone:hover { text-decoration: underline; }
.req-top-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.req-card .overdue-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; height: 24px; margin: 0 18px 10px; padding: 0 9px; border: 0; border-radius: 8px; background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.3); color: var(--rd-coral); font: 500 11.5px var(--font); }
.req-card .overdue-badge i { width: 6px; height: 6px; border-radius: 50%; background: #ff5d52; box-shadow: 0 0 8px #ff5d52; }

/* Статус: переключатель + действия */
.req-status-switcher { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0 18px 14px; }
.req-state-seg { display: flex; padding: 3px; border-radius: 11px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.req-state-seg .status-btn { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #9c9ea8; font: 500 12px var(--font); letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.req-state-seg .status-btn:hover { color: var(--text); border: 0; }
.req-state-seg .status-btn.active-active { background: rgba(90,214,154,.16); color: #5ad69a; box-shadow: inset 0 0 0 1px rgba(90,214,154,.35); font-weight: 600; }
.req-state-seg .status-btn.active-paused { background: rgba(242,196,109,.14); color: #f2c46d; box-shadow: inset 0 0 0 1px rgba(242,196,109,.35); font-weight: 600; }
.req-outcome-btns { display: flex; gap: 4px; }
.req-outcome-btns .status-btn { height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text3); font: 500 12px var(--font); letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.req-outcome-btns .req-act-success:hover { background: rgba(90,214,154,.12); color: #5ad69a; border: 0; }
.req-outcome-btns .req-act-declined:hover { background: rgba(255,93,82,.12); color: var(--rd-coral); border: 0; }
.req-outcome-btns .req-act-other:hover { background: var(--ob-chip); color: var(--text); border: 0; }
.req-outcome { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px 14px; }
.outcome-badge-success, .outcome-badge-declined, .outcome-badge-other { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border: 0; border-radius: 9px; font: 600 12px var(--font); }
.outcome-badge-success i, .outcome-badge-declined i, .outcome-badge-other i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.outcome-badge-success { background: rgba(90,214,154,.12); box-shadow: inset 0 0 0 1px rgba(90,214,154,.3); color: #5ad69a; }
.outcome-badge-declined { background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.3); color: var(--rd-coral); }
.outcome-badge-other { background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); }
.btn-reopen { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); font: 500 12px var(--font); letter-spacing: 0; cursor: pointer; }
.btn-reopen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-reopen:hover { border: 0; background: rgba(255,255,255,.09); color: var(--text); }

/* Тело карточки */
.req-body { margin: 0 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 12px; border-radius: 14px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.req-card .insp-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 0; padding: 0; border: 0; }
.req-card .sc-info-item { gap: 5px; }
.req-card .sc-info-label, .req-section-label { font: 500 11.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.req-budget { font: 600 15px var(--display); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.req-indicators-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-height: 0; max-height: none; overflow: visible; }
.req-indicator { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 0; border-radius: 8px; font: 500 11.5px var(--font); white-space: nowrap; }
.req-indicator i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 7px currentColor; }
.ind-green { border: 0; background: rgba(90,214,154,.1); box-shadow: inset 0 0 0 1px rgba(90,214,154,.26); color: #5ad69a; }
.ind-yellow { border: 0; background: rgba(242,196,109,.1); box-shadow: inset 0 0 0 1px rgba(242,196,109,.26); color: #f2c46d; }
.ind-blue { border: 0; background: rgba(143,176,255,.1); box-shadow: inset 0 0 0 1px rgba(143,176,255,.26); color: #8fb0ff; }
.req-no-indicators { font-size: 12px; color: #6f727c; }
.req-prefs-row { margin: 0; padding: 0; border: 0; }
.req-prefs-row-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.req-prefs-toggle { padding: 0; border: 0; background: none; color: var(--gold); font: 500 11.5px var(--font); cursor: pointer; }
.req-card .req-prefs { padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.5; color: var(--text2); }
.req-card .req-prefs-fixed { max-height: 3em; }
.req-card .req-prefs-fixed.expanded { max-height: none; }
.req-notes-row { height: auto; font-size: 12.5px; color: var(--text3); font-style: italic; }

/* Осмотры внутри заявки */
.req-insp-section { margin-top: 12px; border-top: 1px solid var(--rd-line); }
.req-insp-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 12px 18px; cursor: pointer; transition: background .18s ease; }
.req-insp-header:hover { background: rgba(255,255,255,.025); }
.req-insp-header:hover .req-insp-title { color: var(--text); }
.req-insp-title-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.req-insp-title { font: 500 13px var(--font); color: var(--text2); text-transform: none; letter-spacing: 0; }
.insp-counters { display: flex; gap: 5px; flex-wrap: wrap; }
.req-insp-none { font-size: 12px; color: #6f727c; }
.req-insp-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.btn-insp-add { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 9px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--gold); font: 600 12px var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.btn-insp-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn-insp-add:hover { border: 0; background: rgba(255,255,255,.09); }
.req-insp-toggle { width: 16px; height: 16px; display: inline-flex; color: var(--text3); transition: transform .22s ease; }
.req-insp-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.req-insp-list { gap: 6px; padding: 0 12px 12px; }
.req-insp-item { align-items: center; gap: 8px; padding: 10px 8px 10px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.req-insp-item.type-full { box-shadow: inset 0 0 0 1px rgba(242,196,109,.16); }
.req-insp-item-car { font-size: 13px; font-weight: 600; color: var(--text); }
.req-insp-item-meta { align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; }
.req-insp-item-date { font: 12px var(--mono); color: var(--text3); }
.req-insp-item-meta .badge { height: 20px; padding: 0 7px; font-size: 11px; }
.req-insp-item-notes { margin-top: 5px; font-size: 12px; font-style: normal; color: var(--text2); }
.req-insp-item-actions { gap: 0; }
.req-insp-empty { padding: 10px; text-align: center; font-size: 12.5px; color: #6f727c; }
.req-card .files-section { padding: 2px 18px 12px; border-top: 1px solid var(--rd-line); }
.req-card .files-section-title { min-height: 40px; }

/* Завершённые */
.done-section, #page-requests .done-section { margin-top: 22px; padding: 0; }
.done-section-header {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 18px; box-sizing: border-box; cursor: pointer; text-align: left;
  border: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06);
  color: var(--text); font: inherit; transition: background .18s ease;
}
.done-section-header:hover { border: 0; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
.done-section-title { flex: 0 1 auto; font: 600 16px var(--display); letter-spacing: -.01em; color: var(--text); text-transform: none; }
.done-count-badge { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border: 0; border-radius: 7px; background: rgba(255,255,255,.07); color: var(--text2); font: 500 11.5px var(--mono); }
.done-success-badge, .done-declined-badge { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border: 0; border-radius: 8px; font: 500 11.5px var(--font); }
.done-success-badge { background: rgba(90,214,154,.1); box-shadow: inset 0 0 0 1px rgba(90,214,154,.26); color: #5ad69a; }
.done-declined-badge { background: rgba(255,93,82,.1); box-shadow: inset 0 0 0 1px rgba(255,93,82,.26); color: var(--rd-coral); }
.done-toggle-arrow { width: 18px; height: 18px; margin-left: auto; display: inline-flex; color: var(--text3); transition: transform .22s ease; }
.done-toggle-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.done-grid.visible { padding-top: 16px; }
.done-group { margin-bottom: 20px; }
.done-group-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 4px; font: 500 13px var(--font); color: var(--text2); text-transform: none; letter-spacing: 0; }
.done-group-label i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dg-success { color: #5ad69a; } .dg-declined { color: var(--rd-coral); } .dg-other { color: #b6bcff; }
.done-group-line { flex: 1; height: 1px; background: var(--rd-line); }
.done-group-grid { padding: 0; }

/* ═══ ENCAR ═══════════════════════════════════════════════════
   Модуль рисует свои классы enc-* (css/encar.css) — здесь только вид. */
.enc-toolbar.ob-head { margin: 2px 0 20px; gap: 16px; }
.enc-title.ob-h1 { display: flex; align-items: center; gap: 10px; font: 600 30px/1.1 var(--display); color: var(--text); }
.enc-h1-flag { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 8px; font: 600 11.5px var(--font); letter-spacing: 0; color: #8fb0ff; background: rgba(143,176,255,.1); box-shadow: inset 0 0 0 1px rgba(143,176,255,.28); }
.enc-tk-note.ob-head-sub { font-size: 13px; color: var(--text3); white-space: normal; }
.enc-link-wrap.ob-search { flex: 0 1 300px; width: 300px; }
.enc-link-wrap .enc-inp.enc-link { width: auto; flex: 1; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; font: 13.5px var(--font); }
.enc-rate { height: 40px; padding: 0 6px 0 13px; gap: 8px; border-radius: 12px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); font: 500 12.5px var(--font); color: var(--text3); }
.enc-rate input { width: 78px; height: 30px; padding: 0 9px; border: 0; border-radius: 9px; background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--gold); font: 600 13.5px var(--mono); }
.enc-rate input:focus { border: 0; box-shadow: inset 0 0 0 1px rgba(242,196,109,.5); }

.enc-filters { gap: 8px; margin-bottom: 14px; padding: 12px; border: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06); }
.enc-sel, .enc-inp { height: 38px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 11px; background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--text); font: 13px var(--font); }
.enc-sel:focus, .enc-inp:focus { border: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5); }
select.enc-sel { padding-right: 32px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; }
select.enc-sel option { background: var(--ob-pop); color: var(--text); }
.enc-inp::placeholder, .enc-sel::placeholder { color: var(--text3); }
.enc-chk { height: 38px; padding: 0 12px; border-radius: 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); font: 500 12.5px var(--font); color: var(--text2); }
.enc-chk:has(input:checked) { color: var(--gold-light); background: rgba(242,196,109,.1); box-shadow: inset 0 0 0 1px rgba(242,196,109,.35); }
.enc-chk input { accent-color: #f2c46d; }
.enc-combo-list { margin-top: 4px; padding: 6px; border: 0 !important; border-radius: 14px !important; background: rgba(26,26,31,.97) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px rgba(0,0,0,.6) !important; }
.enc-combo-opt { padding: 8px 10px; border-radius: 9px; font-size: 13px; }
.enc-combo-hi { background: rgba(255,255,255,.07); }
.enc-combo-hdr { font: 500 10.5px var(--mono); letter-spacing: .12em; }

.enc-btn { height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text); font: 600 12.5px var(--font); transition: background .18s ease, filter .18s ease; }
.enc-btn:hover { border: 0; background: rgba(255,255,255,.09); color: var(--text); }
.enc-btn.enc-btn-gold { border: 0; background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); }
.enc-btn.enc-btn-gold:hover { background: var(--ob-gold); color: var(--ob-gold-ink); filter: brightness(1.06); }
.enc-btn.enc-btn-tg { border: 0; background: rgba(42,171,238,.12); box-shadow: inset 0 0 0 1px rgba(42,171,238,.35); color: #6cc6f5; }
.enc-btn.enc-btn-tg:hover { background: rgba(42,171,238,.2); color: #8fd4f8; }
.enc-more { height: 42px; padding: 0 28px; }
.enc-status, .enc-found { color: var(--text3); }
.enc-found { font-size: 13.5px; }

/* Карточки машин */
.enc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.enc-card { border: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.28); transition: transform .22s ease, box-shadow .22s ease; }
.enc-card:hover { border-color: transparent; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.12), 0 22px 46px rgba(0,0,0,.42); }
.enc-photo { margin: 6px 6px 0; border-radius: 13px; overflow: hidden; }
.enc-photo img { transition: transform .4s ease; }
.enc-card:hover .enc-photo img { transform: scale(1.03); }
.enc-tag { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 7px; font: 600 11px var(--font); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.enc-tag-ok { background: rgba(20,60,40,.75); color: #7fe3b0; box-shadow: inset 0 0 0 1px rgba(90,214,154,.4); }
.enc-tag-warn { background: rgba(70,20,18,.75); color: #ffb0a7; box-shadow: inset 0 0 0 1px rgba(255,93,82,.4); }
.enc-body { padding: 12px 14px 14px; gap: 4px; }
.enc-name { font: 600 14.5px/1.3 var(--display); letter-spacing: -.01em; }
.enc-badge { font-size: 12px; }
.enc-meta { font-size: 12px; color: var(--text3); }
.enc-price { padding-top: 10px; margin-top: auto; border-top: 1px solid var(--rd-line); }
.enc-krw { font: 11.5px var(--mono); color: var(--text3); }
.enc-usd { font: 600 20px/1.2 var(--display); letter-spacing: -.015em; background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.enc-tk { font-size: 12.5px; color: var(--text2); }

/* Окно машины */
.enc-detail-overlay { background: rgba(4,4,6,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.enc-dlg { border: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(30,30,35,.98), rgba(16,16,20,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.7); }
.enc-dlg-head { padding: 18px 22px; border-bottom: 1px solid var(--rd-line); background: rgba(22,22,26,.92); -webkit-backdrop-filter: var(--ob-blur); backdrop-filter: var(--ob-blur); }
.enc-dlg-title { font: 600 22px/1.2 var(--display); letter-spacing: -.02em; }
.enc-dlg-sub { font-size: 13px; color: var(--text3); }
.enc-x { width: 38px; height: 38px; border-radius: 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text3); }
.enc-x:hover { color: var(--text); }
.enc-dlg-body { padding: 18px 22px 26px; }
.enc-anchors { margin: 14px -22px 0; padding: 0 16px; border-top: 1px solid var(--rd-line); }
.enc-anchors button { font: 500 13px var(--font); color: var(--text3); }
.enc-anchors button:hover { color: var(--text); border-bottom-color: #f2c46d; }
.enc-facts span { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border: 0; border-radius: 9px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); font-size: 12.5px; }
.enc-main { border-radius: 18px; }
.enc-thumb { border-radius: 10px; }
.enc-pc, .enc-verdict { border: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.35); }
.enc-pc { padding: 20px; }
.enc-pc-label { font: 500 12px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.enc-pc-usd { font: 600 34px/1.1 var(--display); letter-spacing: -.03em; background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.enc-pc-krw { font: 12px var(--mono); color: var(--text3); }
.enc-pc-tk { border: 0; border-radius: 14px; background: rgba(90,214,154,.08); box-shadow: inset 0 0 0 1px rgba(90,214,154,.28); }
.enc-pc-tk span { font: 500 12px var(--font); text-transform: none; letter-spacing: 0; color: #8fe3ba; }
.enc-pc-tk b { font: 600 28px/1.15 var(--display); letter-spacing: -.02em; color: #5ad69a; }
.enc-pc-more { border-top-color: var(--rd-line); }
.enc-pc-actions .enc-btn { height: 42px; border-radius: 12px; }
.enc-sec { border-top-color: var(--rd-line); }
.enc-sec h3 { font: 600 17px var(--display); letter-spacing: -.01em; color: var(--text); text-transform: none; }
.enc-kv { border-bottom-color: rgba(255,255,255,.05); }
.enc-chip { border: 0; border-radius: 8px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); }
.enc-breakdown, .enc-pack { border: 0; border-radius: 14px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.enc-bd-title { font: 500 12px var(--font); text-transform: none; letter-spacing: 0; color: var(--gold); }
.enc-table th, .enc-table td { border-color: var(--rd-line) !important; }

/* Окно публикации в канал */
.enc-post-ov { background: rgba(4,4,6,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.enc-post { border: 0 !important; border-radius: 24px !important; overflow: hidden; background: linear-gradient(180deg, rgba(30,30,35,.98), rgba(16,16,20,.99)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.7) !important; }
.enc-ps { border: 0; border-radius: 18px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.enc-psum > div:not(.enc-psum-op) { border: 0; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
.enc-psum > .enc-psum-total { background: rgba(242,196,109,.08); box-shadow: inset 0 0 0 1px rgba(242,196,109,.35); }
.enc-post-ta, .enc-post-in, .enc-post-sel { border: 0 !important; border-radius: 12px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); }

@media (max-width: 900px) {
  .enc-toolbar.ob-head .ob-head-actions { width: 100%; }
  .enc-link-wrap.ob-search { flex: 1 1 100%; width: auto; }
  .enc-rate { flex: 1; }
  .enc-filters { padding: 10px; }
  .enc-sel, .enc-inp, .enc-chk { height: 42px; font-size: 14px; }
  .enc-dlg { border-radius: 0; }
}

/* ═══ СВОДКА ═════════════════════════════════════════════════ */
.summary-filters.ob-toolbar { margin-bottom: 18px; padding: 0; background: none; border: 0; justify-content: flex-start; flex-direction: row; }
.ob-toolbar .filter-group { flex-direction: row; align-items: center; gap: 8px; }
.ob-toolbar .filter-group select, .ob-toolbar .filter-group input { min-width: 0; }
.ob-select.ob-year { width: 96px; padding-right: 12px; background-image: none; font-family: var(--mono); }
.summary-wrap { padding: 0; gap: 14px; }
.payout-box {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px;
  border: 0; border-radius: 22px; background: linear-gradient(135deg, rgba(242,196,109,.12), rgba(255,255,255,.03) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(242,196,109,.22), 0 20px 50px rgba(0,0,0,.35);
}
.payout-box::after { content: ''; position: absolute; left: -80px; top: -120px; width: 420px; height: 320px; pointer-events: none; background: radial-gradient(closest-side, rgba(242,196,109,.18), rgba(242,196,109,0)); }
.payout-main { position: relative; z-index: 1; min-width: 0; }
.payout-main .pl { margin-bottom: 8px; font: 500 13px var(--font); color: var(--text2); text-transform: none; letter-spacing: 0; }
.payout-main .pv { font: 600 54px/1 var(--display); letter-spacing: -.035em; background: linear-gradient(180deg, #fff0c9, #f2c46d 55%, #c98d2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.payout-main .pv small { font-size: 26px; -webkit-text-fill-color: var(--text3); }
.payout-main .pb { margin-top: 10px; font: 12.5px var(--mono); color: var(--text3); }
.payout-icon { position: relative; z-index: 1; flex: none; min-width: 170px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--ob-well); box-shadow: var(--ob-well-sh); font-size: 0; text-align: center; }
.payout-icon b { font: 600 38px/1 var(--display); letter-spacing: -.03em; color: var(--text); }
.payout-icon span { font: 600 13px var(--font); color: var(--text2); }
.payout-icon i { font: 400 11.5px var(--font); font-style: normal; color: var(--text3); }
.payout-lv-top span, .payout-lv-top b { color: #f2c46d; }
.payout-lv-bonus span { color: #5ad69a; }
.summary-cards { gap: 14px; }
.s-card { padding: 20px 22px; border: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
.s-card:hover { border-color: transparent; }
.s-card h3 { margin: 0 0 10px; font: 600 16px var(--display); letter-spacing: -.01em; color: var(--text); text-transform: none; }
.s-row { padding: 11px 0; border-bottom: 1px solid var(--rd-line); }
.s-row .sk { font-size: 13px; color: var(--text2); }
.s-row .sv { font: 600 15px var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.s-row-total { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
.s-row-total .sk { font-weight: 600; color: var(--text); }
.s-row-total .sv { font: 13px var(--mono); color: var(--text3); }
@media (max-width: 900px) {
  .payout-box { flex-direction: column; align-items: stretch; padding: 22px; }
  .payout-main .pv { font-size: 44px; }
  .summary-cards { grid-template-columns: 1fr; }
}

/* ═══ ВЫПЛАТЫ ════════════════════════════════════════════════ */
.payouts-filter.ob-toolbar { margin-bottom: 18px; }
.payouts-wrap { padding: 0; }
.ob-seg.po-view-toggle { border: 0; overflow: visible; align-self: auto; }
.ob-seg .po-view-btn { border: 0 !important; }
.ob-seg .po-view-btn.active { background: linear-gradient(180deg, #fafafa, #dcdce0); color: #111113; }
.ob-btn.btn-advance { border: 0; }
.payout-list { gap: 16px; }
.payout-manager-block { overflow: visible; border: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.25); }
.payout-sales-list { padding-right: 12px; }
.payout-manager-header { border-radius: 20px 20px 0 0; padding: 18px 22px; border-bottom: 1px solid var(--rd-line); background: rgba(255,255,255,.02); }
.payout-manager-name { font: 600 20px var(--display); letter-spacing: -.015em; color: var(--text); }
.payout-stat-label { font: 500 11.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.payout-stat-value { font: 600 20px var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.payout-stat-value.gold { color: #f2c46d; } .payout-stat-value.green { color: #5ad69a; } .payout-stat-value.red { color: var(--rd-coral); }
.payout-stat-divider { background: var(--rd-line); }
.payout-closed-badge { border: 0; border-radius: 8px; background: rgba(90,214,154,.1); box-shadow: inset 0 0 0 1px rgba(90,214,154,.28); color: #5ad69a; }
.payout-sale-row { border-bottom-color: var(--rd-line); font-size: 12.5px; transition: background .18s ease; }
.payout-sale-row:hover { background: rgba(255,255,255,.03); }
.payout-sale-row.is-paid { opacity: .5; }
.psr-salary-row, .psr-volbonus-row, .psr-markup-row, .psr-advance-row { border-left: 0; }
.psr-salary-row { background: rgba(242,196,109,.045); box-shadow: inset 3px 0 0 -1px rgba(242,196,109,.5); }
.psr-markup-row { background: rgba(242,196,109,.07); box-shadow: inset 3px 0 0 -1px rgba(242,196,109,.7); }
.psr-volbonus-row { background: rgba(90,214,154,.045); box-shadow: inset 3px 0 0 -1px rgba(90,214,154,.55); }
.psr-advance-row { background: rgba(255,154,143,.05); box-shadow: inset 3px 0 0 -1px rgba(255,154,143,.55); }
.psr-client { font-weight: 600; }
.psr-paid-amount-label { white-space: normal; line-height: 1.2; font-size: 10.5px !important; }
.psr-date-label, .psr-paid-amount-label { font: 500 11px var(--font); text-transform: none; letter-spacing: 0; color: var(--text3); }
.psr-amount { font: 600 15px var(--display); color: #f2c46d; }
.psr-paid-amount-input, .psr-paid-date-input { height: 30px; border: 0 !important; border-radius: 9px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); color: var(--text); font-family: var(--mono) !important; }
.psr-paid-amount-input:focus, .psr-paid-date-input:focus { box-shadow: inset 0 0 0 1px rgba(242,196,109,.5); }
.btn-paid-toggle { height: 30px; padding: 0 12px; border: 0 !important; border-radius: 9px; font: 600 12px var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; }
.btn-paid-toggle.unpaid { background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); }
.btn-paid-toggle.unpaid:hover { background: var(--ob-gold); filter: brightness(1.06); }
.btn-paid-toggle.paid { background: rgba(90,214,154,.12); box-shadow: inset 0 0 0 1px rgba(90,214,154,.35); color: #5ad69a; }
.payout-divider { border-top-color: var(--rd-line); }
/* История */
.ph-totals { border: 0 !important; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
.ph-total-label { font: 500 12px var(--font); text-transform: none; letter-spacing: 0; color: var(--text3); }
.ph-total-value { font: 600 22px var(--display); letter-spacing: -.02em; }
.ph-row { border: 0 !important; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ph-row:hover { background: rgba(255,255,255,.05); }
.ph-kind { border: 0; border-radius: 7px; font: 600 11px var(--font); text-transform: none; letter-spacing: 0; }
.ph-amount { font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.ph-amount.pos { color: #f2c46d; } .ph-amount.neg { color: #5ad69a; }
.ph-edit, .ph-del { border: 0 !important; border-radius: 9px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text3); }
.ph-edit:hover { color: var(--text); } .ph-del:hover { color: var(--rd-coral); background: rgba(255,93,82,.12); }
.ph-day-sep { font: 500 10.5px var(--mono); letter-spacing: .12em; color: #7f828d; }

/* ═══ ДОКУМЕНТАЦИЯ (статичная разметка со встроенными стилями) ═══ */
#page-docs .docs-wrap { max-width: 1100px; padding: 0; }
#page-docs .docs-list { display: flex; flex-direction: column; gap: 14px; }
#page-docs .owner-card { padding: 22px 24px !important; border: 0 !important; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
#page-docs .owner-card:first-child { background: linear-gradient(135deg, rgba(143,176,255,.12), rgba(255,255,255,.02) 60%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(143,176,255,.25); }
#page-docs .owner-section-title { margin-bottom: 14px; font: 600 19px var(--display) !important; letter-spacing: -.015em; color: var(--text) !important; text-transform: none !important; }
#page-docs [style*="background:var(--dark)"] { border: 0 !important; border-radius: 14px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); padding: 14px 16px !important; }
#page-docs [style*="rgba(239,68,68"] { box-shadow: inset 0 0 0 1px rgba(255,93,82,.3) !important; background: rgba(255,93,82,.06) !important; }
#page-docs [style*="font-size:18px;font-weight:800"], #page-docs [style*="font-size:16px;font-weight:800"], #page-docs [style*="font-size:20px;font-weight:800"] { font: 600 22px var(--display) !important; letter-spacing: -.02em; }
#page-docs [style*="text-transform:uppercase"] { font: 500 10.5px var(--mono) !important; letter-spacing: .14em !important; color: #7f828d !important; }
#page-docs a[download] { height: 42px; padding: 0 18px !important; border: 0 !important; border-radius: 12px !important; background: var(--ob-gold) !important; box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink) !important; font: 600 13px var(--font) !important; }
#page-docs .r-item { padding: 11px 0; border-bottom: 1px solid var(--rd-line); }
#page-docs .r-item .ri { font-size: 13px; color: var(--text2); }
#page-docs .r-item .rv { font: 600 14px var(--display); }
#page-docs table { border-collapse: collapse; }
#page-docs td, #page-docs th { border-color: var(--rd-line) !important; }
@media (max-width: 900px) {
  #page-docs [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  #page-docs .owner-card { padding: 18px !important; }
  #page-docs .owner-wrap, #page-docs .docs-list > * { min-width: 0; }
  #page-docs table { display: block; overflow-x: auto; }
}

/* ═══ ВЛАДЕЛЕЦ ═══════════════════════════════════════════════ */
#page-owner .owner-wrap { padding: 0 0 32px; }
#page-owner .ob-head-actions .sf-group { flex-direction: row; align-items: center; gap: 8px; }
#page-owner .ob-head-actions .sf-label { font: 500 12.5px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
#page-owner .ob-select { background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important; border: 0 !important; padding: 0 34px 0 12px !important; font: 500 13px var(--font) !important; }
.owner-rate-bar, #page-owner [id="owner-rate-bar"] { margin-bottom: 14px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--ob-well); box-shadow: var(--ob-well-sh); font-size: 13px; }
.owner-kpi-row { gap: 12px; margin-bottom: 16px; }
.owner-kpi { padding: 18px 20px; border: 0 !important; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
.owner-kpi-label { font: 500 12.5px var(--font) !important; color: var(--text3); text-transform: none !important; letter-spacing: 0 !important; }
.owner-kpi-value { font: 600 30px/1.1 var(--display) !important; letter-spacing: -.03em; }
.owner-kpi-sub { font-size: 12px; color: #7f828d; }
#page-owner .owner-card { padding: 20px 22px; border: 0 !important; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
#page-owner .owner-section-title { margin-bottom: 12px; font: 600 17px var(--display) !important; letter-spacing: -.01em; color: var(--text) !important; text-transform: none !important; }
#page-owner .owner-collapse-head { cursor: pointer; }
#page-owner .owner-two-col { gap: 14px; }
.owner-month-table th, #page-owner table th { padding: 10px 12px; border-bottom: 1px solid var(--rd-line) !important; background: transparent !important; font: 500 11.5px var(--font) !important; color: var(--text3) !important; text-transform: none !important; letter-spacing: 0 !important; }
.owner-month-table td, #page-owner table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04) !important; font-variant-numeric: tabular-nums; }
#page-owner table tr:hover td { background: rgba(255,255,255,.025); }
.owner-month-table .td-profit { color: #f2c46d; }
.owner-month-table .td-neg { color: var(--rd-coral); }
#page-owner .tbl-wrap { border: 0 !important; border-radius: 14px; background: var(--ob-well); box-shadow: var(--ob-well-sh); overflow-x: auto; }
#page-owner [style*="background:var(--dark)"] { border: 0 !important; border-radius: 14px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); }
#page-owner [style*="text-transform:uppercase"] { font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: .12em !important; }
#page-owner input:not([type=checkbox]):not([type=radio]), #page-owner select:not(.ob-select) { border: 0 !important; border-radius: 10px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); color: var(--text); }
#page-owner button:not(.ob-btn):not(.ob-icon-btn):not(.btn-close):not(.btn-cancel):not(.btn-save) { border-radius: 10px !important; }
.owner-await-row { border-bottom-color: var(--rd-line); }
@media (max-width: 900px) {
  #page-owner .ob-head-actions .sf-group { flex: 1 1 40%; }
  #page-owner .ob-head-actions .ob-select { flex: 1; width: 100%; }
  #page-owner .owner-two-col, #page-owner [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .owner-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #page-owner table { display: block; overflow-x: auto; }
}

/* ═══ ОКНА (общие для всех разделов) ═════════════════════════ */
.modal-overlay { background: rgba(4,4,6,.62); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.modal {
  overflow: hidden; border: 0; border-radius: 24px;
  background: linear-gradient(180deg, rgba(34,34,40,.97), rgba(18,18,22,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.7);
}
.modal-header { padding: 22px 24px 16px 26px; border-bottom: 1px solid var(--rd-line); }
.modal-title { font: 600 20px var(--display); letter-spacing: -.015em; text-transform: none; color: var(--text); }
.btn-close { width: 34px; height: 34px; border: 0; border-radius: 11px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text3); font-size: 19px; }
.btn-close:hover { border: 0; background: rgba(255,255,255,.09); color: var(--text); }
.modal-body { padding: 20px 26px; }
.form-grid { gap: 14px 16px; }
.form-group label { font: 500 12px var(--font); color: var(--text3); text-transform: none; letter-spacing: 0; }
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-group select, .form-group textarea {
  min-height: 40px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 11px; outline: none;
  background: var(--ob-well); box-shadow: var(--ob-well-sh); color: var(--text); font: 13.5px var(--font); transition: box-shadow .18s ease;
}
.form-group textarea { padding: 10px 12px; line-height: 1.45; }
.form-group select {
  padding-right: 34px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.form-group select option { background: var(--ob-pop); color: var(--text); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,196,109,.5), 0 0 0 4px rgba(242,196,109,.07); }
.form-section { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--rd-line); font: 500 10.5px var(--mono); letter-spacing: .14em; color: #7f828d; }
.rate-box { border: 0; border-radius: 14px; background: var(--ob-well); box-shadow: var(--ob-well-sh); padding: 12px 16px; }
.rate-row { border-bottom-color: rgba(255,255,255,.04); }
.rate-row .rl { font-size: 12.5px; }
.rate-row .rv { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rate-row.total .rv { font: 600 15px var(--display); color: var(--gold); }
.rate-inline-input, .rate-inline-select { height: 28px; border: 0; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: var(--ob-chip-sh); color: var(--text); font: 500 12.5px var(--font); }
.rate-inline-input:focus, .rate-inline-select:focus { border: 0; box-shadow: inset 0 0 0 1px rgba(242,196,109,.5); }
.sto-toggle-track { border: 0; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.sto-toggle-label input:checked + .sto-toggle-track { border: 0; background: rgba(242,196,109,.35); }
.sto-toggle-label input:checked + .sto-toggle-track::after { background: #ffe2a3; box-shadow: 0 0 8px rgba(242,196,109,.6); }
.modal-footer { padding: 16px 26px 22px; border-top: 1px solid var(--rd-line); }
.btn-cancel { height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); font: 600 13px var(--font); letter-spacing: 0; text-transform: none; }
.btn-cancel:hover { border: 0; background: rgba(255,255,255,.09); color: var(--text); }
.btn-save { height: 40px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--ob-gold); box-shadow: var(--ob-gold-sh); color: var(--ob-gold-ink); font: 600 13px var(--font); letter-spacing: 0; text-transform: none; }
.btn-save:hover { background: var(--ob-gold); filter: brightness(1.06); }

/* Календарь */
.flatpickr-calendar { background: rgba(26,26,31,.97) !important; border: 0 !important; border-radius: 16px !important; font-family: var(--font) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.6) !important; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none !important; }
.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent !important; }
span.flatpickr-weekday { color: #7f828d !important; font-weight: 500 !important; }
.flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text) !important; font-weight: 600 !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f2c46d !important; }
.flatpickr-day { color: var(--text) !important; border-radius: 10px !important; }
.flatpickr-day:hover { background: rgba(255,255,255,.08) !important; border-color: transparent !important; }
.flatpickr-day.today { border-color: rgba(242,196,109,.55) !important; }
.flatpickr-day.today:not(.selected) { color: #f2c46d !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: linear-gradient(180deg, #ffe2a3, #f2c46d 45%, #d99a32) !important; border-color: transparent !important; color: var(--ob-gold-ink) !important; font-weight: 600 !important; }
.flatpickr-day.inRange { background: rgba(242,196,109,.12) !important; border-color: transparent !important; box-shadow: none !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #55555e !important; }

/* Разделы на средних экранах и телефоне */
@media (max-width: 1400px) {
  .ob-kpis-5, .ob-kpis-5.req-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .ob-kpis, .ob-kpis.stats-row, .ob-kpis-5.req-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ob-head { margin-bottom: 16px; }
  .ob-h1 { font-size: 26px; }
  .ob-head-actions { width: 100%; }
  .ob-head-actions .ob-btn { flex: 1; justify-content: center; }
  .ob-search, .ob-search.search-bar { flex: 1 1 100%; max-width: none; height: 44px; }
  .ob-seg { flex: 1 1 100%; }
  .ob-seg button { flex: 1; height: 38px; }
  .ob-toolbar .sf-group input { height: 44px; width: 128px; font-size: 15px; }
  .ob-kpi .stat-value { font-size: 28px; }
  .ob-cards, .ob-cards.cards-grid, .ob-cards.req-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-toolbar .ob-select-wrap { flex: 1 1 40%; }
  .ob-toolbar .ob-select-wrap .ob-select { flex: 1; width: 100%; height: 44px; }
  .req-status-switcher { flex-direction: column; align-items: stretch; }
  .req-state-seg .status-btn { flex: 1; height: 34px; }
  .req-outcome-btns .status-btn { flex: 1; height: 36px; background: var(--ob-chip); }
  .modal { border-radius: 22px 22px 0 0; }
  .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-group select, .form-group textarea { min-height: 44px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ── Выплаты: строка начисления влезает в панель рядом с меню ──
   12 ячеек: клиент, авто, осмотр, предосм., СТО, дата договора, дата продажи, торг,
   сумма, «выплачено вручную», кнопка «Выплатить», дата выплаты.
   Раньше (сетка из style.css, min-width 1000px) кнопка уезжала за правый край до 1680px. */
.payout-sale-row {
  grid-template-columns: minmax(110px, 1.3fr) minmax(80px, 1fr) 66px 66px 52px 84px 84px minmax(60px, .8fr) 84px 118px 100px 88px;
  gap: 8px; padding: 10px 14px; min-width: 0;
}
.payout-sales-list { padding-right: 0; }
/* уже — в две строки: сверху сделка, снизу деньги и действия */
@media (max-width: 1500px) {
  .payout-sale-row { grid-template-columns: minmax(110px, 1.4fr) minmax(80px, 1fr) 66px 66px 56px 92px 104px; row-gap: 10px; }
  .payout-sale-row > .psr-bargain        { grid-column: 1 / 3; grid-row: 2; }
  .payout-sale-row > .psr-amount         { grid-column: 3 / 5; grid-row: 2; text-align: left; }
  .payout-sale-row > .psr-paid-amount-cell { grid-column: 5 / 7; grid-row: 2; }
  .payout-sale-row > .psr-action         { grid-column: 7; grid-row: 2; }
  .payout-sale-row > .psr-paid-date-cell { grid-column: 7; grid-row: 3; }
  .payout-sale-row > .psr-paid-date-cell:empty { display: none; }
}
/* телефон: строка — карточка в две колонки, пустые ячейки скрыты */
@media (max-width: 900px) {
  .payout-sales-list { overflow-x: visible; }
  .payout-sale-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; }
  .payout-sale-row > .psr-bargain, .payout-sale-row > .psr-amount, .payout-sale-row > .psr-paid-amount-cell,
  .payout-sale-row > .psr-action, .payout-sale-row > .psr-paid-date-cell { grid-column: auto; grid-row: auto; }
  .payout-sale-row > :empty { display: none; }
  .payout-sale-row > .psr-client { grid-column: 1 / -1; white-space: normal; }
  .payout-sale-row > .psr-amount { text-align: left; }
}

/* ══ Окна в стиле «Обсидиан»: калькулятор Кореи, таможня, аналитика воронки, история клиента ══
   Разметка этих окон — на инлайн-стилях (app.js / customs-calc.js / index.html), логику не трогаем:
   внутри окна переопределяем переменные цветов, а форму полей/кнопок — через !important. */
#korea-calc-overlay, #china-calc-overlay, #cc-overlay {
  --border: rgba(255,255,255,.07); --black: rgba(0,0,0,.3);
  background: rgba(4,4,6,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
}
#korea-calc-overlay > div, #china-calc-overlay > div, #cc-overlay > div {
  border: 0 !important; border-radius: 24px !important; overflow: hidden;
  background: linear-gradient(180deg, rgba(34,34,40,.97), rgba(18,18,22,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.7);
}
/* шапка: заголовок и крестик как у остальных окон */
#korea-calc-overlay > div > div:first-child, #china-calc-overlay > div > div:first-child, #cc-overlay > div > div:first-child { padding: 20px 22px 16px 24px !important; }
#korea-calc-overlay > div > div:first-child > span, #china-calc-overlay > div > div:first-child > span, #cc-overlay > div > div:first-child > span { font: 600 19px var(--display) !important; letter-spacing: -.015em; }
#korea-calc-overlay > div > div:first-child > button, #china-calc-overlay > div > div:first-child > button, #cc-overlay > div > div:first-child > button {
  width: 34px; height: 34px; padding: 0 !important; border-radius: 11px !important; background: var(--ob-chip) !important; box-shadow: var(--ob-chip-sh); font-size: 16px !important;
}
#korea-calc-overlay > div > div:not(:first-child), #china-calc-overlay > div > div:not(:first-child), #cc-overlay > div > div:not(:first-child) { padding-left: 24px !important; padding-right: 24px !important; }
/* подписи полей — как в формах CRM */
#korea-calc-overlay [style*="font-size:9px"], #china-calc-overlay [style*="font-size:9px"], #cc-overlay [style*="font-size:9px"], #rate-preview [style*="font-size:9px"],
.kc-customs-cell span { font: 500 11.5px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; }
/* поля ввода и списки */
#korea-calc-overlay input[type=number], #korea-calc-overlay select, #china-calc-overlay input[type=number], #china-calc-overlay select, #cc-overlay input[type=number], #rate-preview input[type=number] {
  min-height: 36px; border: 0 !important; border-radius: 10px !important; background-color: var(--ob-well) !important; box-shadow: var(--ob-well-sh);
}
#korea-calc-overlay select, #china-calc-overlay select {
  padding-right: 34px !important; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
}
#korea-calc-overlay select option, #china-calc-overlay select option { background: var(--ob-pop); }
#korea-calc-overlay input:focus, #korea-calc-overlay select:focus, #china-calc-overlay input:focus, #china-calc-overlay select:focus, #cc-overlay input:focus, #rate-preview input:focus { box-shadow: inset 0 0 0 1px rgba(242,196,109,.5), 0 0 0 4px rgba(242,196,109,.07) !important; }
#kc-price, #kci-price, #cpc-price { box-shadow: var(--ob-well-sh), inset 0 0 0 1px rgba(58,160,232,.35) !important; }
/* ячейки растаможки */
.kc-customs-cell { border: 0; border-radius: 12px; background: var(--ob-well); box-shadow: var(--ob-well-sh); }
#korea-calc-overlay .kc-customs-cell input, #china-calc-overlay .kc-customs-cell input, #rate-preview .kc-customs-cell input, .kc-customs-cell input { min-height: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--font) !important; }
/* итоги — цифры шрифтом заголовков */
#kc-total1, #kc-total2, #kc-total-final, #cpc-total1, #cpc-total2, #cpc-total-final { font-family: var(--display); }
/* кнопки «Рассчитать таможню» и «Применить» */
#korea-calc-overlay button[onclick^="openCustomsCalc"], #china-calc-overlay button[onclick^="openCustomsCalc"], #rate-preview button[onclick^="openCustomsCalc"] {
  height: 30px; border: 0 !important; border-radius: 9px !important; background: rgba(242,196,109,.1) !important; box-shadow: inset 0 0 0 1px rgba(242,196,109,.3); color: #f2c46d !important;
}
#cc-apply { height: 42px; border-radius: 12px !important; background: linear-gradient(180deg, #ffe2a3, #f2c46d 55%, #d9a443) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(242,196,109,.22); }
/* возраст авто — сегменты */
#cc-ages span[data-cc-age] { padding: 9px 4px !important; border-radius: 10px !important; }

/* Аналитика воронки */
#analytics-modal { background: rgba(4,4,6,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.analytics-modal-box, .ch-modal-box {
  border: 0 !important; border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(34,34,40,.97), rgba(18,18,22,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 100px rgba(0,0,0,.7) !important;
}
.analytics-modal-header, .ch-modal-header { padding: 20px 22px 16px 24px; border-bottom: 1px solid var(--rd-line); }
.analytics-modal-title, .ch-modal-title { font: 600 19px var(--display); letter-spacing: -.015em; }
.analytics-modal-controls select {
  height: 34px; padding: 0 32px 0 12px; border: 0; border-radius: 10px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--ob-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8e98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  box-shadow: var(--ob-well-sh); color: var(--text); font: 500 13px var(--font);
}
.analytics-modal-controls select option { background: var(--ob-pop); }
.analytics-modal-controls button, .analytics-close-btn {
  height: 34px; min-width: 34px; padding: 0 12px; border: 0 !important; border-radius: 10px; background: var(--ob-chip); box-shadow: var(--ob-chip-sh); color: var(--text2); font: 500 13px var(--font);
}
.analytics-close-btn { padding: 0; }
.analytics-close-btn:hover, .analytics-modal-controls button:hover { background: rgba(255,255,255,.09); color: var(--text); }
.analytics-modal-body { padding: 22px 24px; }
.a-stat, .kpi-row { border: 0 !important; border-radius: 16px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); }
.a-val, .kpi-val { font-family: var(--display); letter-spacing: -.02em; }
.a-lbl, .kpi-lbl { font: 500 11.5px var(--font); text-transform: none; letter-spacing: 0; }
.analytics-section-title { font: 500 10.5px var(--mono); letter-spacing: .14em; color: #7f828d; border-bottom-color: var(--rd-line); }
.funnel-bar-wrap, .kpi-bar-wrap { border-radius: 99px; background: rgba(255,255,255,.05); }
.funnel-bar, .kpi-bar { border-radius: 99px; background: linear-gradient(90deg, #d9a443, #f2c46d); }
.funnel-label, .kpi-name { font: 500 12.5px var(--font); color: var(--text2); }
.funnel-count, .kpi-cells { font-family: var(--mono); }

/* История клиента */
#client-history-modal { background: rgba(4,4,6,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
.ch-modal-body { padding: 18px 24px 22px; }
.ch-row { border: 0 !important; border-radius: 12px !important; background: var(--ob-well) !important; box-shadow: var(--ob-well-sh); }
.ch-row:hover { background: rgba(255,255,255,.05) !important; }
@media (max-width: 600px) {
  .analytics-modal-header { flex-wrap: wrap; gap: 12px; }
  .analytics-modal-title { flex: 1 1 100%; }
  .analytics-modal-controls { flex: 1 1 100%; }
  .analytics-modal-controls select { flex: 1; }
}
#decline-conv-overlay .form-group + .form-group { margin-top: 14px; }

/* Меню на телефоне: подпункты групп — крупнее, под палец */
@media (max-width: 900px) {
  .sb .tab.tab-sub { height: 42px; font-size: 14px; }
}