/* Winners — панель нового поколения, дизайн-прототип.
   Принципиально другая палитра/типографика, чем у Линкоры (там тёплый
   графит + золото + Inter/Space Grotesk). Здесь: холодный графит (синеватый
   подтон, не коричневый) + один яркий "electric" акцент, системный
   San Francisco стек шрифтов (родной для iOS/Telegram liquid glass, а не
   Inter) — совпадений по ощущению нет, при этом сама идея "графит" как
   нейтральная тёмная подложка сохранена, как и просил пользователь. */

:root {
  --bg: #0B0D10;
  --surface: #14171C;
  --surface-2: #1B1F26;
  --glass: rgba(24, 27, 33, 0.62);
  --glass-strong: rgba(30, 34, 41, 0.78);
  --border: #262B33;
  --text: #EDEFF2;
  --muted: #8B93A1;
  --accent: #5B8DEF;
  --accent-2: #7C6CF0;
  --accent-text: #06101F;
  --green: #33C481;
  --red: #EF5B6B;
  --amber: #F0A83C;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(91, 141, 239, 0.22), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(124, 108, 240, 0.16), transparent 40%),
    var(--bg);
}

.mono { font-family: 'SF Mono', ui-monospace, 'Cascadia Code', monospace; }

/* ---------- Телефонный каркас (для оценки дизайна как на референсе) ---------- */

.phone-wrap {
  max-width: 430px;
  margin: 24px auto;
  padding: 0;
}

.phone-frame {
  position: relative;
  height: 100dvh;
  max-height: 900px;
  min-height: 760px;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 10px #000, 0 0 0 12px #2a2e35;
  display: flex;
  flex-direction: column;
}

/* ---------- Header / бренд ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(11, 13, 16, 0.92), rgba(11, 13, 16, 0.55) 80%, transparent);
  backdrop-filter: blur(14px);
}

/* Адаптация лого Winners (сейчас — чёрный шрифтовой логотип на белом,
   "прада"-стиль: жирный засечковый, плотный трекинг заглавных). Для тёмной
   liquid-glass панели — инверсия в светлый + акцентная точка вместо второй
   "N", чтобы был компактный узнаваемый знак (для фавиконки/сплеша), а не
   только полнотекстовый вариант. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Playfair Display', serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(91, 141, 239, 0.35);
}

.brand-word {
  font-family: Georgia, 'Playfair Display', serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 1.5px;
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

/* ---------- Контент ---------- */

.screen {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 110px;
  display: none;
}
.screen.active { display: block; }

/* Переключение экранов "как на айфоне" — мягкое всплытие+масштаб при
   появлении, а не мгновенная подмена display. Анимируется сам факт
   появления .active (класс уже переключается в JS), лишнего JS для
   самого перехода не нужно. */
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.screen.active, .d-screen.active {
  animation: screenEnter 0.32s cubic-bezier(0.25, 0.85, 0.35, 1);
}

.section-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin: 18px 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* KPI-карточки дашборда */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.kpi-card {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 16px;
}

.kpi-card .kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-card .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.kpi-card .kpi-delta { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.kpi-card .kpi-delta.up { color: var(--green); }
.kpi-card .kpi-delta.down { color: var(--red); }

.kpi-card.wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }

/* Список (звонки/клиенты) — стилистика как у Telegram-чатов на референсе:
   круглая иконка, жирный заголовок + время, серый превью-текст, бейдж. */
.list {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(16px);
}

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.li-body { flex: 1; min-width: 0; }
.li-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.li-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-time { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.li-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.li-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge.green { background: var(--green); }
.badge.red { background: var(--red); }
.badge.muted { background: var(--surface-2); color: var(--muted); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--green); }
.status-dot.fail { background: var(--red); }

/* ---------- Нижняя навигация — liquid glass ---------- */

.tabbar-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px 22px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tabbar {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 26px;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Скользящий индикатор активного таба — один элемент, JS двигает его
   left/width под активную кнопку (см. moveTabIndicator в app.js), вместо
   того чтобы каждая кнопка сама рисовала свою подсветку — так переход
   между пунктами меню плавно "едет", как в iOS, а не мгновенно скачет. */
.tab-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 60px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.28), rgba(124, 108, 240, 0.18));
  transition: left 0.32s cubic-bezier(0.34, 1.25, 0.4, 1), width 0.32s cubic-bezier(0.34, 1.25, 0.4, 1);
  z-index: 0;
  pointer-events: none;
}

.tab-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 18px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.6, 0.5, 1);
}

.tab-btn svg { width: 22px; height: 22px; transition: transform 0.25s cubic-bezier(0.34, 1.6, 0.5, 1); }

.tab-btn.active { color: var(--text); }
.tab-btn.active svg { color: var(--accent); transform: scale(1.1); }
.tab-btn:active { transform: scale(0.9); }

.tab-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #14171c;
}

/* ---------- Настройки ---------- */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
}

.switch {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch.on { background: var(--accent); }
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.switch.on .switch-knob { left: 21px; }

/* ---------- Полоска дизайн-заметок под каркасом (не часть UI панели) ---------- */

.design-note {
  max-width: 430px;
  margin: 0 auto 40px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.design-note b { color: var(--text); }

/* ===================== Десктоп-версия ===================== */
/* Тот же язык (холодный графит + акцент + liquid glass), но полноценный
   ПК-layout вместо телефонного каркаса, и низовое меню — широкий плавающий
   док на всю ширину контента, а не узкая мобильная пилюля на 4 пункта. */

.desktop-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.d-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 13, 16, 0.72);
  backdrop-filter: blur(16px);
}

.d-header .brand-word { font-size: 21px; }
.d-header .brand-mark { width: 38px; height: 38px; font-size: 19px; border-radius: 11px; }

.d-header-right { display: flex; align-items: center; gap: 12px; }

.d-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.d-main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 32px 150px;   /* запас под плавающим доком, чтобы карточки не уезжали под него */
}

.d-screen { display: none; }
.d-screen.active { display: block; }

.d-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.d-title { font-size: 24px; font-weight: 700; font-family: Georgia, 'Playfair Display', serif; }
.d-subtitle { color: var(--muted); font-size: 13px; }

.dgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgrid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.dcard {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 18px 20px;
  transition: border-color 0.15s, transform 0.1s;
}
.dcard.editable-row:hover { border-color: rgba(91, 141, 239, 0.4); }
.dcard.editable-row:active { transform: scale(0.99); }
.dcard.kpi-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}
.dcard-head .muted-note { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Данные-таблицы (Клиенты/Звонки/Поставщики/Тарифы) — на ПК места хватает
   на настоящую таблицу с колонками, а не список карточек как в мобильной
   версии. */
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th {
  text-align: left;
  padding: 10px 14px;
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
/* overflow-wrap:anywhere — длинные неразрывные строки (имена тарифов вида
   "Kara_Lexico_FIX(0.23)+MOB(0.20)+..." без пробелов, номера+провайдер в
   Звонках) раньше распирали таблицу и ломали карточку/страницу вместо
   переноса (см. чат 13.09: "в тарифах длинные названия ломаются",
   "в звонках текст вылетел"). */
.dtable td { padding: 12px 14px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.dtable tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background 0.15s; }
.dtable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.dtable .cell-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* Базовый класс — не только внутри .dtable: используется и как отдельный
   кликабельный аватар в шапке (открывает профиль). Раньше правило было
   вложено в .dtable .avatar-sm и вне таблицы аватар получал только
   background из инлайн-стиля — квадрат без скругления и центрирования. */
.avatar-sm {
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}
.dtable .avatar-sm { width: 30px; height: 30px; font-size: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}
.pill.green { background: rgba(51, 196, 129, 0.15); color: var(--green); }
.pill.red { background: rgba(239, 91, 107, 0.15); color: var(--red); }
.pill.muted { background: var(--surface-2); color: var(--muted); }
.pill.amber { background: rgba(240, 168, 60, 0.15); color: var(--amber); }

.empty-hint {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Плавающий док (десктоп) ---------- */

.d-dock-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
}

.d-dock {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px;
  border-radius: 22px;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Док тянется по содержимому и живёт в одну строку, пока хватает экрана;
     на вторую строку переносится только когда места действительно нет.
     Раньше здесь стоял max-width 760px «чтобы не резалось при сжатии» — из-за
     него пункты переносились даже на широком мониторе, где места вдоволь. */
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 48px);
  overflow-x: visible;
  scrollbar-width: none;
}
.d-dock::-webkit-scrollbar { display: none; }

.d-dock-arrow { display: none; }

/* ---------- Мобильный док: горизонтальный свайп вместо переноса строк —
   перенос на телефоне выглядел бы слишком высокой "стеной" из кнопок.
   Вместо этого — скролл + затухание по краям + стрелки + разовая
   демо-анимация при старте (см. initDockCarouselHint в app.js), чтобы
   было ЯВНО видно, что список можно листать (чат 13.09). ---------- */
@media (max-width: 640px) {
  .d-dock {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 76px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .d-dock-wrap { gap: 6px; }
  .d-dock-arrow {
    display: flex;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }
  .d-dock-arrow:active { transform: scale(0.9); }
}

/* Тот же скользящий индикатор, что и в мобильном tabbar — см. .tab-indicator. */
.d-dock-indicator {
  position: absolute;
  /* top/height задаются в JS (positionIndicator, ui-common.js) — под
     конкретную кнопку, не растянуто на весь контейнер: при переносе дока
     на 2 строки top:.. bottom:7px тянул индикатор через ОБЕ строки сразу
     (см. чат 13.09: "еще и забагало"). Тут — только запасной вид до
     первого JS-позиционирования. */
  top: 7px;
  height: 46px;
  left: 7px;
  width: 60px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.28), rgba(124, 108, 240, 0.18));
  transition: left 0.32s cubic-bezier(0.34, 1.25, 0.4, 1), width 0.32s cubic-bezier(0.34, 1.25, 0.4, 1), top 0.32s ease, height 0.32s ease;
  z-index: 0;
  pointer-events: none;
}

.d-dock-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 17px;
  border-radius: 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.d-dock-item svg { width: 25px; height: 25px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.34, 1.6, 0.5, 1); }

.d-dock-item.active { color: var(--text); }
.d-dock-item.active svg { color: var(--accent); transform: scale(1.1); }
.d-dock-item:active { transform: scale(0.92); }

.d-dock-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: var(--border);
  flex-shrink: 0;
}

.d-dock-badge {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Оверфлоу-панель "Ещё" (аналог "Крутые настройки" у Линкоры) — тот же
   glass-язык, всплывает над доком. */
.d-overflow-panel {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  min-width: 280px;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 31;
  display: none;
}
.d-overflow-panel.open { display: block; }

.d-overflow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.d-overflow-item:hover { background: rgba(255, 255, 255, 0.05); }
.d-overflow-item .muted-note { font-weight: 400; font-size: 11.5px; color: var(--muted); }

@media (max-width: 900px) {
  .dgrid-2, .dgrid-3, .dgrid-4 { grid-template-columns: 1fr; }
  .d-main { padding: 20px 16px 130px; }
  .d-header { padding: 14px 18px; }
  .d-search { display: none; }
}

/* ===================== Попапы (настройки/редактирование) ===================== */
/* Один общий компонент модалки для обеих версий — та же liquid-glass
   подложка, что и у дока/карточек. Локальный прототип: сохраняем правки
   только в памяти/localStorage (см. app.js/app-desktop.js), никакого
   реального MOR-бэкенда здесь нет. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 7, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

/* Более широкая модалка (сейчас — карточка клиента: учётка + устройства
   в две колонки, см. чат 13.09 — "сделай шире, столбик для учётки,
   столбик для устройств, красиво раздели"). ВАЖНО: .modal.modal-wide, не
   просто .modal-wide — та же специфичность, что и .modal {width:...}
   ниже, раньше проигрывала по порядку в файле (см. чат 13.09: "шире
   попап так и не сделал" — класс был в разметке, но CSS его игнорировал). */
.modal.modal-wide { width: min(680px, 100%); }
.modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 560px) { .modal-columns { grid-template-columns: 1fr; } }
.modal-col-head {
  font-size: 11.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; font-weight: 700; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

.device-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.device-row:last-child { border-bottom: none; }
.device-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.device-row-main .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-record-toggle {
  display: flex; align-items: center; gap: 5px; font-weight: 400;
  font-size: 12px; color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.device-record-toggle input { width: auto; margin: 0; }

.modal {
  width: min(400px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: scale(0.9) translateY(16px);
  transition: transform 0.3s cubic-bezier(0.25, 1.3, 0.35, 1);
}
.modal-backdrop.open .modal { transform: scale(1) translateY(0); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-title { font-family: Georgia, 'Playfair Display', serif; font-size: 19px; font-weight: 700; }
.modal-close {
  width: 30px; height: 30px; border-radius: 10px; border: none;
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal-close:hover { color: var(--text); }

.modal-field { margin-bottom: 14px; }
.modal-field label {
  display: block; font-size: 11.5px; color: var(--muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
/* select { ... } глобально, не только .modal-field select — за пределами
   модалок (напр. #rt-device в Трассировке) select иначе падал на голый
   браузерный вид, светлый и не в тему (см. чат 13.09: "в трасировке
   сломался дизайн" — про этот дропдаун). */
.modal-field input, .modal-field select, select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.modal-field input:focus, .modal-field select:focus, select:focus { border-color: var(--accent); }
.modal-field input:disabled { color: var(--muted); }

.modal-seg {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border-radius: 13px;
  padding: 4px;
}
.modal-seg button {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.modal-seg button.active { background: var(--accent); color: #fff; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.modal-btn {
  padding: 10px 18px;
  border-radius: 13px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.modal-btn:active { transform: scale(0.96); }
.modal-btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.modal-btn.ghost { background: var(--surface-2); color: var(--text); }
.modal-btn.danger { background: rgba(239, 91, 107, 0.15); color: var(--red); }

.modal-hint { font-size: 11.5px; color: var(--muted); margin-top: -6px; margin-bottom: 14px; line-height: 1.4; }

.editable-row { cursor: pointer; }
.editable-row:hover { background: rgba(255, 255, 255, 0.04); }
.edit-affordance { opacity: 0; color: var(--muted); transition: opacity 0.15s; margin-left: 6px; }
.editable-row:hover .edit-affordance { opacity: 1; }

/* Тост подтверждения сохранения — переиспользуем тот же стиль, что и toast
   в app.js. */
.wp-toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(20px);
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wp-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ===== 13.09 аудит: визуальные фиксы по скринам =====
   Числа/даты/пилюли не должны рваться посимвольно в узких колонках — таблица
   вместо этого скроллится внутри карточки. Длинное имя тарифа в заголовке
   модалки — переносится, а не вылезает за край. Заголовки KPI-карточек разной
   длины больше не сдвигают цифры по высоте. Мобильный док: center + overflow
   уводил первые пункты в недостижимую отрицательную зону — flex-start. */
.pill { white-space: nowrap; }
.dtable td.mono, .dtable td.muted-note.mono { white-space: nowrap; overflow-wrap: normal; }
.dcard { overflow-x: auto; }
.modal-head { gap: 10px; }
.modal-title { min-width: 0; overflow-wrap: anywhere; }
.dgrid-4 > .dcard > .dcard-head { min-height: 40px; align-items: flex-start; }
@media (max-width: 640px) { .d-dock { justify-content: flex-start; } }
@media (max-width: 980px) { .d-main { padding-bottom: 220px; } }

/* ===== Глобальный поиск в шапке (13.09) ===== */
.d-search-wrap { position: relative; flex: 1; max-width: 440px; }
.d-search-wrap .d-search { width: 100%; color: inherit; }
.d-search-wrap .d-search::placeholder { color: var(--muted); }
.d-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; display: none; z-index: 40;
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: 14px;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.d-search-results.open { display: block; }
.d-search-group { padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; }
.d-search-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.d-search-item:hover { background: rgba(255, 255, 255, 0.05); }
.d-search-item .muted-note { font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) { .d-search-wrap { display: none; } }

/* ===== Проигрыватель записи разговора (13.09) =====
   Полоса делится на две зоны: дозвон (гудки/автоответчик) и разговор —
   границу даёт billsec из CDR. Каналы записи разделены: левый — наш клиент,
   правый — абонент, поэтому у плеера есть переключатель «кого слушать». */
.cplayer { display: flex; flex-direction: column; gap: 8px; }
.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-controls { flex-wrap: wrap; }
.cp-btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px 10px; cursor: pointer; font-size: 12.5px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.cp-btn:hover { border-color: var(--accent); }
.cp-play { min-width: 38px; justify-content: center; font-size: 13px; }
.cp-bar {
  position: relative; flex: 1; height: 26px; cursor: pointer;
  background: var(--surface-2); border-radius: 8px; overflow: hidden;
}
.cp-ring { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, 0.07); }
.cp-played { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(122, 138, 255, 0.55), rgba(122, 138, 255, 0.3)); }
.cp-answer { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--green); opacity: 0.9; }
.cp-cursor { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--text); opacity: 0.75; }
.cp-time { font-size: 12px; color: var(--muted); min-width: 92px; text-align: right; }
.cp-seg { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 2px; }
.cp-seg button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 4px 10px; border-radius: 7px; font-size: 12.5px;
}
.cp-seg button.active { background: var(--accent); color: #fff; }
.cp-rate { padding: 4px 8px; font-size: 12.5px; width: auto; }
.cp-legend { display: flex; gap: 14px; font-size: 11.5px; }
.cp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cp-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cp-dot-ring { background: rgba(255, 255, 255, 0.16); }
.cp-dot-talk { background: rgba(122, 138, 255, 0.55); }