/* ============================================================
   SIMARIUM - графит, северное сияние, разрежённая типографика.
   Шрифты системные: ни одного внешнего запроса со страницы.
   ============================================================ */

/* ---- WHITE-LABEL RESKIN (voip.management): светлая тема, фиолетовый +
   коралловый акцент вместо фирменного зелёно-бирюзового — сделано так,
   чтобы визуально не читалось как ещё одна копия наших же панелей. ---- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg:          #f6f5fb;
  --bg-2:        #ffffff;
  --frame:       #ffffff;
  --panel:       #ffffff;
  --panel-2:     #f0eef9;
  --line:        rgba(30, 20, 60, .09);
  --line-2:      rgba(30, 20, 60, .16);

  --txt:         #18142b;
  --txt-dim:     #605a78;
  --txt-faint:   #9a93b0;

  --acc:         #5b47e0;
  --acc-hi:      #8f7ef5;
  --acc-teal:    #ff7a59;
  --acc-glow:    rgba(91, 71, 224, .14);

  --danger:      #d1483f;
  --warn:        #c98a1f;

  --r:      14px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  --maxw: 1180px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: Manrope, "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* разрежённые заглавные — фирменный приём макета */
  --track: .22em;
}

/* белые карточки на светлом фоне держатся мягкой тенью, а не рамкой-сиянием
   (см. reskin ниже) — так по-другому читается объём, не просто перекрас */
body { box-shadow: none; }


* { box-sizing: border-box; }

/* Собственный display (например grid) перебивает браузерное правило для
   [hidden], и элемент не прячется. Поэтому правило нужно своё и сильнее. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- фон: северное сияние ----------
   Тяжёлый блюр стоит на статичных слоях, покадрово меняется только
   transform — браузер кэширует размытую текстуру и просто двигает её.
   Поэтому анимация почти ничего не стоит даже на слабых ноутбуках. */

.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.au {
  position: absolute;
  border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%;
  filter: blur(90px);
  will-change: transform;
  mix-blend-mode: screen;
  animation: flow 60s var(--ease) infinite alternate;
}

.au.a {
  width: 62vw; height: 46vw;
  top: -8vw; left: -6vw;
  background: radial-gradient(closest-side, rgba(91, 71, 224, .50), transparent 72%);
  animation-duration: 58s;
}
.au.b {
  width: 54vw; height: 42vw;
  top: 16vw; right: -12vw;
  background: radial-gradient(closest-side, rgba(255, 122, 89, .40), transparent 72%);
  animation-duration: 72s; animation-delay: -18s;
}
.au.c {
  width: 46vw; height: 38vw;
  bottom: -14vw; left: 22vw;
  background: radial-gradient(closest-side, rgba(74, 159, 216, .28), transparent 72%);
  animation-duration: 66s; animation-delay: -34s;
}
.au.d {
  width: 30vw; height: 26vw;
  bottom: 4vw; right: 16vw;
  background: radial-gradient(closest-side, rgba(168, 85, 201, .20), transparent 70%);
  animation-duration: 84s; animation-delay: -9s;
}

@keyframes flow {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(5vw, -4vw, 0) rotate(26deg) scale(1.2); }
}

/* треугольные грани поверх сияния — еле заметный каркас */
.tri {
  position: absolute;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: 0;
  opacity: .5;
  will-change: transform;
  animation: drift 74s linear infinite alternate;
}
.tri.t1 {
  width: 34vw; height: 30vw; top: 6vh; right: 8vw;
  background: linear-gradient(160deg, rgba(91, 71, 224, .05), transparent 62%);
}
.tri.t2 {
  width: 26vw; height: 24vw; bottom: 10vh; left: 5vw;
  background: linear-gradient(20deg, rgba(255, 122, 89, .045), transparent 60%);
  animation-duration: 92s; animation-delay: -30s;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(-6deg); }
  to   { transform: translate3d(-3vw, 3vh, 0) rotate(8deg); }
}

/* затемняющая виньетка, чтобы текст всегда читался */
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 20%, rgba(11, 13, 12, .72) 78%),
    linear-gradient(180deg, rgba(11, 13, 12, .55) 0%, transparent 30%, rgba(11, 13, 12, .70) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .au, .tri { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- навигация ----------
   Без «пилюли» и рамок: только разрежённые заглавные, как в макете. */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(11, 13, 12, .82) 0%, rgba(11, 13, 12, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 26px;
}
/* См. комментарий в shell.html: длинное меню admin/supervisor не влезает
   в узкий --maxw и наезжает на .nav-right без этого. */
.nav.nav-wide { max-width: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--txt);
  text-decoration: none;
  white-space: nowrap;
}
.brand .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 12px var(--acc);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex: 1;
  min-width: 0;
  /* Пункты меню не сжимаются (white-space: nowrap), поэтому когда их
     не хватает по ширине (длинное меню admin/supervisor в шапке с
     max-width: 1180px), даём им уходить в горизонтальный скролл, а не
     наезжать на .nav-right — раньше тут стоял overflow: visible, и
     лишние пункты просто рисовались поверх имени/кнопки «Выйти». */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--txt-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--txt); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.on { color: var(--acc-hi); }
.nav-links a.on::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.who { text-align: right; line-height: 1.25; }
.who b { display: block; font-size: 12px; font-weight: 500; }
/* Логин — моноширинным: его читают и диктуют посимвольно. */
.who b.lg { font-family: var(--mono); font-size: 12.5px; letter-spacing: .01em; }
.who span {
  font-size: 9.5px; color: var(--txt-faint);
  letter-spacing: .16em; text-transform: uppercase;
}
/* Строка с логином не должна уходить в верхний регистр — логин
   регистрозависим, и «ADM-R5A8NS» человек введёт неправильно. */
.who span.who-l {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: .02em;
  font-size: 10px;
  color: var(--txt-dim);
}

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(20, 20, 40, .04);
  color: var(--txt);
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .25s var(--ease);
}
.btn:hover {
  border-color: rgba(91, 71, 224, .45);
  color: var(--acc-hi);
  background: var(--acc-glow);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-p {
  border-color: rgba(91, 71, 224, .5);
  background: rgba(91, 71, 224, .12);
  color: var(--acc-hi);
}
.btn-p:hover {
  background: rgba(91, 71, 224, .2);
  border-color: var(--acc);
  box-shadow: 0 0 26px rgba(91, 71, 224, .18);
}

.btn-d { border-color: rgba(226, 114, 106, .35); color: #eda49e; }
.btn-d:hover { border-color: var(--danger); background: rgba(226, 114, 106, .12); color: #f5bdb8; }

.btn-sm { padding: 8px 16px; font-size: 9.5px; letter-spacing: .16em; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--txt-dim); }
.btn-ghost:hover { border-color: var(--line); background: var(--panel-2); color: var(--txt); }

/* ---------- каркас страницы ---------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 26px 90px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sub { margin: 9px 0 0; color: var(--txt-dim); font-size: 13px; letter-spacing: .01em; }

h2 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--txt);
}

.eyebrow {
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acc);
  font-weight: 500;
  margin-bottom: 12px;
}

/* компактная шапка: «Панель управления» в строку с заголовком, меньше по
   высоте — интерфейс (и лента чата) поднимается выше */
.page-head.ph-compact { margin-bottom: 16px; align-items: center; }
.ph-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ph-title .eyebrow { margin-bottom: 0; }
.ph-title h1 { margin: 0; line-height: 1.1; }
.page-head.ph-compact .sub { margin-top: 5px; }

/* ---------- карточки / вложенные рамки ---------- */

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(23, 26, 25, .55);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  padding: 26px 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(20, 20, 40, .03);
}
.card + .card { margin-top: 18px; }
/* ...но в колоночных сетках карточки стоят В РЯД, а не стопкой — там этот
   отступ сдвигал вторую колонку вниз (баг выравнивания «список/переписка»). */
.grid > .card + .card { margin-top: 0; }
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.card-h h2 { margin: 0; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* Узкая форма слева, широкий список справа — списку нужнее ширина. */
.g-side { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .g-side { grid-template-columns: 1fr; } }
.g3 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); }

.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(23, 26, 25, .45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px 22px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.stat:hover { border-color: var(--line-2); transform: translateY(-3px); }
.stat .k {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-faint); font-weight: 500;
}
.stat .v {
  font-size: 32px; font-weight: 250; margin-top: 10px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.stat .v.acc { color: var(--acc-hi); }

/* ---------- формы ---------- */

.field { margin-bottom: 17px; }
.field label {
  display: block;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 9px;
  font-weight: 500;
}

.inp {
  width: 100%;
  padding: 13px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .3);
  color: var(--txt);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.inp::placeholder { color: var(--txt-faint); }
.inp:focus {
  outline: none;
  border-color: rgba(91, 71, 224, .55);
  background: rgba(0, 0, 0, .42);
  box-shadow: 0 0 0 3px var(--acc-glow);
}
.inp.bad { border-color: var(--danger); }
textarea.inp { resize: vertical; min-height: 84px; border-radius: var(--r-lg); }
select.inp { cursor: pointer; }

.hint { font-size: 11px; color: var(--txt-faint); margin-top: 8px; padding-left: 4px; }

/* ---------- вход / регистрация ---------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; }

.auth-box {
  width: 100%;
  max-width: 410px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(23, 26, 25, .58);
  backdrop-filter: blur(30px) saturate(130%);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(20, 20, 40, .04);
}
.auth-box.wide { max-width: 490px; }

.auth-logo {
  display: flex; align-items: center; gap: 11px;
  font-weight: 500; letter-spacing: var(--track); font-size: 12px;
  text-transform: uppercase; color: var(--txt-dim);
}
.auth-logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }

.auth-title {
  font-size: 20px; font-weight: 300; margin: 24px 0 6px;
  letter-spacing: .14em; text-transform: uppercase;
}
.auth-sub { color: var(--txt-dim); font-size: 12.5px; margin-bottom: 28px; line-height: 1.6; }

.auth-foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--txt-dim); text-align: center;
}
.auth-foot a { color: var(--acc); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.cap-row { display: flex; gap: 12px; align-items: stretch; }
.cap-img {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #0a0f0c;
  flex: 0 0 auto;
  line-height: 0;
}
.cap-img svg { display: block; }
.cap-reload {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt-dim);
  cursor: pointer;
  padding: 0 13px;
  font-size: 15px;
  transition: all .25s var(--ease);
}
.cap-reload:hover { border-color: var(--acc); color: var(--acc); }

/* honeypot - вне экрана, но не display:none (боты такое пропускают) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- сообщения ---------- */

.msg {
  padding: 13px 17px;
  border-radius: var(--r-lg);
  font-size: 12.5px;
  margin-bottom: 18px;
  border: 1px solid;
  display: flex; gap: 10px; align-items: flex-start;
  line-height: 1.55;
}
.msg.err { background: rgba(226, 114, 106, .09); border-color: rgba(226, 114, 106, .3); color: #eda49e; }
.msg.ok  { background: var(--acc-glow); border-color: rgba(91, 71, 224, .32); color: var(--acc-hi); }
.msg.info{ background: var(--panel-2); border-color: var(--line); color: var(--txt-dim); }

/* ---------- таблицы ---------- */

/* Прокрутка нужна, но полосы уродуют карточку. Задание overflow-x
   автоматически включает и вертикальную ось — поэтому прячем обе. */
.tbl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -28px;
  padding: 0 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tbl-scroll::-webkit-scrollbar { display: none; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left;
  padding: 0 15px 13px;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tbl td { padding: 15px; border-bottom: 1px solid rgba(160, 200, 180, .055); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .2s var(--ease); }
table.tbl tbody tr:hover { background: var(--panel-2); }
.mono { font-family: var(--mono); font-size: 12px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--txt-dim);
  white-space: nowrap;
}
.tag.ok { color: var(--acc-hi); border-color: rgba(91, 71, 224, .35); background: var(--acc-glow); }
.tag.wait { color: var(--warn); border-color: rgba(217, 164, 65, .35); background: rgba(217, 164, 65, .09); }
.tag.no { color: #eda49e; border-color: rgba(226, 114, 106, .35); background: rgba(226, 114, 106, .09); }

.empty { text-align: center; padding: 62px 20px; color: var(--txt-faint); }
.empty .ic { font-size: 26px; opacity: .4; margin-bottom: 14px; letter-spacing: .3em; }
.empty div:last-child { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.dim { color: var(--txt-dim); }
.faint { color: var(--txt-faint); }
.nowrap { white-space: nowrap; }

/* ---------- всплывающие сообщения ---------- */

#toasts {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  min-width: 210px; max-width: 340px;
  padding: 13px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: rgba(23, 26, 25, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 12.5px;
  color: var(--txt);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  animation: toastin .3s var(--ease);
}
.toast.ok  { border-color: rgba(91, 71, 224, .4); color: var(--acc-hi); }
.toast.err { border-color: rgba(226, 114, 106, .4); color: #eda49e; }
.toast.out { animation: toastout .25s var(--ease) forwards; }

@keyframes toastin  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toastout { to   { opacity: 0; transform: translateY(8px); } }

@media (max-width: 760px) {
  .nav { gap: 18px; padding: 0 18px; height: 62px; }
  .nav-links { gap: 20px; }
  .brand span.txt { display: none; }
  .who { display: none; }
  .wrap { padding: 20px 18px 70px; }
  h1 { font-size: 20px; }
  .card { padding: 22px 20px; border-radius: var(--r-lg); }
  .tbl-scroll { margin: 0 -20px; padding: 0 20px; }
}

/* ---------- появление и переходы ----------
   Только opacity/transform: композитятся на GPU, вёрстка не пересчитывается. */

.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.rise.shown { opacity: 1; transform: none; }

table.tbl tbody tr.rise { transform: translateY(8px); transition-duration: .4s; }

body.page-in { animation: pagein .34s var(--ease); }
body.page-out { opacity: 0; transition: opacity .17s var(--ease); }

@keyframes pagein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* мягкое свечение под курсором на кнопке-акценте */
.btn-p { position: relative; overflow: hidden; }
.btn-p::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(91, 71, 224, .35), transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.btn-p:hover::before { opacity: 1; transform: scale(1); }
.btn-p > * { position: relative; z-index: 1; }

/* пульс у точки логотипа - признак живой системы */
.brand .dot, .auth-logo .dot { animation: pulse 3.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px var(--acc); opacity: .85; }
  50%      { box-shadow: 0 0 20px var(--acc); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .brand .dot, .auth-logo .dot { animation: none; }
  body.page-in { animation: none; }
}

/* ============================================================
   Публичная главная
   ============================================================ */

.hero {
  min-height: 82vh;
  display: grid;
  place-items: center;
  padding: 60px 26px 80px;
}
.hero-in { max-width: 780px; text-align: center; }

.hero-t {
  margin: 6px 0 0;
  font-size: clamp(38px, 8.6vw, 104px);
  font-weight: 200;
  letter-spacing: .26em;
  /* Трекинг добавляет пустоту ПОСЛЕ последней буквы и уводит строку влево
     от настоящего центра. Убираем этот хвост из раскладки, иначе при
     центрировании последняя буква выезжает за край. */
  margin-right: -.26em;
  line-height: 1.05;
  background: linear-gradient(96deg, #d3dcd6 0%, var(--acc-hi) 42%, var(--acc-teal) 70%, #9fb3c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-s {
  margin: 26px auto 0;
  max-width: 560px;
  color: var(--txt-dim);
  font-size: 15px;
  line-height: 1.75;
}

.hero-cta { justify-content: center; margin-top: 36px; }
.hero-cta .btn { padding: 14px 32px; font-size: 11px; }

/* разделы */

.sect { padding: 76px 26px; }
.sect-in { max-width: var(--maxw); margin: 0 auto; }
.sect-in.narrow { max-width: 760px; }

.sect-t {
  font-size: clamp(21px, 3.2vw, 31px);
  font-weight: 250;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 40px;
  color: var(--txt);
}

/* карточки возможностей */

/* Пять карточек: при 3 колонках ложатся 3+2, при 4 был бы кривой 4+1. */
.feats {
  margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.feat {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(23, 26, 25, .42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 28px 26px 30px;
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              background .35s var(--ease);
}
.feat:hover {
  border-color: rgba(91, 71, 224, .3);
  background: rgba(23, 26, 25, .62);
  transform: translateY(-4px);
}
.feat-i {
  font-size: 20px;
  color: var(--acc);
  margin-bottom: 18px;
  opacity: .85;
}
.feat h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt);
}
.feat p { margin: 0; color: var(--txt-dim); font-size: 13.5px; line-height: 1.7; }

/* шаги */

.step {
  border-left: 1px solid var(--line);
  padding: 4px 22px 4px 26px;
}
.step-n {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--acc);
  font-weight: 500;
  margin-bottom: 16px;
}
.step h3 {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.step p { margin: 0; color: var(--txt-dim); font-size: 13.5px; line-height: 1.7; }

/* вопросы */

.qa {
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--txt);
  text-transform: none;
}
.qa p { margin: 0; color: var(--txt-dim); font-size: 13.5px; line-height: 1.75; }

/* подвал */

.foot {
  border-top: 1px solid var(--line);
  padding: 34px 26px 46px;
  background: rgba(11, 13, 12, .5);
}
.foot-in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a {
  color: var(--txt-dim);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .25s var(--ease);
}
.foot-links a:hover { color: var(--acc-hi); }

@media (max-width: 760px) {
  .hero { min-height: 74vh; padding: 40px 18px 60px; }
  .hero-t { letter-spacing: .18em; margin-right: -.18em; }
  .sect { padding: 54px 18px; }
  .step { border-left: none; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

/* ---------- модальные окна ---------- */

.mod-back {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 7, 6, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s var(--ease);
}
.mod-back.open { opacity: 1; visibility: visible; }

.mod {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(20, 23, 22, .96);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  padding: 28px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(20, 20, 40, .04);
  transform: translateY(14px) scale(.98);
  transition: transform .26s var(--ease);
  scrollbar-width: none;
}
.mod::-webkit-scrollbar { display: none; }
.mod-back.open .mod { transform: none; }
.mod.wide { max-width: 640px; }

.mod-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mod-h h3 {
  margin: 0;
  font-size: 13px; font-weight: 500;
  letter-spacing: var(--track); text-transform: uppercase;
}
.mod-h p { margin: 8px 0 0; font-size: 12px; color: var(--txt-dim); line-height: 1.55; }

.mod-x {
  border: 0; background: none; cursor: pointer;
  color: var(--txt-faint); font-size: 20px; line-height: 1;
  padding: 0 2px; transition: color .2s var(--ease);
}
.mod-x:hover { color: var(--danger); }

.mod-f {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mod-f .spacer { flex: 1; }

/* поля в две колонки внутри диалога */
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .f2 { grid-template-columns: 1fr; } }

/* строка действий в таблице */
.acts { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- ряд разделов внутри панели управления ---------- */

.subnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -6px 0 26px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(23, 26, 25, .45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  width: fit-content;
  max-width: 100%;
}

.subnav a {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: var(--txt-dim);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.subnav a:hover { color: var(--txt); background: var(--panel-2); }
.subnav a.on {
  color: var(--acc-hi);
  background: var(--acc-glow);
  box-shadow: inset 0 0 0 1px rgba(91, 71, 224, .28);
}

@media (max-width: 620px) {
  .subnav { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
}

/* ---------- сетка карточек линий ---------- */

.slots {
  display: grid;
  /* Ровно 8 в ряд: полка из 32 линий укладывается в четыре строки. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.slot-c {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 2px solid var(--txt-faint);
  border-radius: var(--r-lg);
  background: rgba(23, 26, 25, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 11px 11px;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              background .25s var(--ease);
}
.slot-c:hover { transform: translateY(-2px); background: rgba(23, 26, 25, .72); }


.slot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.slot-ext {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
}
.slot-no { font-size: 9.5px; color: var(--txt-faint); letter-spacing: .12em; text-transform: uppercase; }

/* Логин рабочего места: по нему человека и зовут, поэтому он рядом со
   слотом, а не спрятан в строках. */
.slot-login {
  margin-top: 4px;
  font-size: 10.5px; color: var(--txt-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.slot-rows { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.slot-r {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 10.5px; line-height: 1.7;
  min-width: 0;
}
.slot-r span { color: var(--txt-faint); flex: 0 0 auto; }
.slot-r b {
  font-weight: 500; color: var(--txt-dim);
  font-family: var(--mono); font-size: 10px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-r b.acc { color: var(--acc-hi); }
.slot-r b.team { font-family: var(--font); font-size: 11.5px; color: var(--txt); }

.slot-why {
  margin-top: 8px; font-size: 10.5px; line-height: 1.5;
  color: #eda49e; opacity: .85;
}

.slot-acts { display: flex; gap: 5px; margin-top: 11px; }
.slot-acts .btn {
  flex: 1; min-width: 0;
  padding: 5px 4px; font-size: 8.5px; letter-spacing: .06em;
}

/* переключатель вида */
.viewsw { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line);
          border-radius: var(--r-pill); background: rgba(0, 0, 0, .25); }
.viewsw button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 14px; border-radius: var(--r-pill);
  color: var(--txt-faint); font: inherit; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: all .22s var(--ease);
}
.viewsw button:hover { color: var(--txt-dim); }
.viewsw button.on { background: var(--acc-glow); color: var(--acc-hi); }

@media (max-width: 520px) {
  .slots { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
}

/* ---------- компактный вид линий ----------
   Одна строка на линию: номер слева, команда справа. Больше в «кратко»
   ничего и не нужно, зато на экран влезает вся полка целиком. */

.slots.compact {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.slots.compact .slot-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r);
  border-left-width: 2px;
}
.slots.compact .slot-top { padding: 0; }
.slots.compact .slot-ext { font-size: 13px; }
.slots.compact .slot-no,
.slots.compact .slot-rows,
.slots.compact .slot-acts { display: none; }
.slots.compact .slot-login {
  flex: 1 1 auto; margin: 0; text-align: right; font-size: 10px;
}
.slots.compact .slot-team {
  display: block;
  margin: 0;
  font-size: 10.5px;
  color: var(--txt-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  min-width: 0;
}

/* в подробном виде строка команды не нужна — она есть в списке полей */
.slots:not(.compact) .slot-team { display: none; }

/* На узких экранах 8 колонок не читаются — понижаем ступенями. */
@media (max-width: 1180px) {
  .slots, .slots.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .slots, .slots.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- выбор линий для команды ----------
   Чекбоксов не видно: выбор показывается подсветкой самой ячейки.
   Сам input остаётся в разметке — на нём держится состояние формы и
   доступность с клавиатуры, поэтому прячем его, а не удаляем.

   Селекторы намеренно с префиксом .pickgrid: в диалоге создания сетка
   лежит внутри .field, а `.field label` специфичнее голого `.pickcell`
   и навязывал ячейкам display:block и верхний регистр. */

.pickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.pickgrid .pickcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  user-select: none;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease);
}
.pickgrid .pickcell:hover { border-color: var(--line-2); background: var(--panel-2); }

.pickgrid .pickcell input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.pickgrid .pickcell b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-dim);
  transition: color .18s var(--ease);
}
.pickgrid .pickcell i {
  font-style: normal;
  font-size: 9px;
  color: var(--warn);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* выбранная ячейка */
.pickgrid .pickcell:has(input:checked) {
  border-color: var(--acc);
  background: var(--acc-glow);
  box-shadow: inset 0 0 0 1px rgba(91, 71, 224, .3);
}
.pickgrid .pickcell:has(input:checked) b { color: var(--acc-hi); }

/* видимый фокус для клавиатуры — иначе без чекбокса не понять, где ты */
.pickgrid .pickcell:has(input:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Линия занята другой командой — показываем, но выбрать нельзя. */
.pickgrid .pickcell.taken {
  opacity: .4;
  cursor: not-allowed;
  border-style: dashed;
  background: transparent;
}
.pickgrid .pickcell.taken:hover { border-color: var(--line); background: transparent; }

/* ---------- цвета команд ----------
   В базе хранится индекс, сюда приходит только имя класса — подставить
   произвольный CSS через данные нельзя. Оттенки подобраны так, чтобы
   все читались на тёмном фоне и различались между собой.

   !important здесь по делу: это утилита-опознаватель, она обязана
   перебивать любые местные правила цвета текста (например .slot-r b.team,
   которое специфичнее одиночного класса). Без него цвет команды молча
   терялся бы в части мест — что и произошло при первой сборке. */

.tc0  { color: #8f7ef5 !important; }
.tc1  { color: #ff7a59 !important; }
.tc2  { color: #58b6f5 !important; }
.tc3  { color: #8f9ef8 !important; }
.tc4  { color: #b98cf5 !important; }
.tc5  { color: #e58fd8 !important; }
.tc6  { color: #f2908f !important; }
.tc7  { color: #f0a860 !important; }
.tc8  { color: #e3c95c !important; }
.tc9  { color: #b3dc5e !important; }
.tc10 { color: #5ce0a0 !important; }
.tc11 { color: #5cd2e0 !important; }
.tc12 { color: #7fb0e8 !important; }
.tc13 { color: #d79bf0 !important; }
.tc14 { color: #f0b894 !important; }
.tc15 { color: #9adf86 !important; }

/* точка-метка команды: там, где имя не помещается */
.tdot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  box-shadow: 0 0 8px currentColor;
}

/* ---------- выбор цвета команды ---------- */

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.swatches label {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  /* Фон берём из currentColor: цвет задаёт та же палитра .tcN, отдельный
     список фонов не нужен и не сможет с ней разъехаться. */
  background: currentColor;
  opacity: .5;
  margin: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.swatches label:hover { opacity: .85; transform: scale(1.08); }
.swatches label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches label:has(input:checked) {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor;
}
.swatches label:has(input:focus-visible) { outline: 2px solid var(--txt); outline-offset: 3px; }

/* ---------- строка с кнопкой копирования ---------- */

.copyrow { display: flex; gap: 8px; align-items: stretch; }
.copyrow .inp { flex: 1; min-width: 0; }
.copyrow .btn { flex: 0 0 auto; padding: 0 14px; }

/* ============================================================
   Звонилка
   ============================================================ */

.phone-wrap {
  display: grid;
  /* Первая колонка — не фиксированные 340px, а «сколько займёт контент»:
     туда входят и звонилка, и саундпад рядом с ней (.phone-group), и
     ширина колонки сама растёт, когда саундпад раскрывается — вторая
     колонка (вкладки) при этом просто ужимается, отдавая ему место. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) { .phone-wrap { grid-template-columns: 1fr; } }

/* выход — форма-кнопка, встроена как прежняя ссылка */
.logout-form { display: inline; margin: 0; }

/* звонилка и саундпад — впритык, как единый блок, без зазора между ними */
.phone-group { display: flex; align-items: start; gap: 0; min-width: 0; }
@media (max-width: 860px) { .phone-group { flex-wrap: wrap; } .phone-group .sb-dock { margin-bottom: 18px; } }

/* левая колонка: звонилка и памятка «Как пользоваться» под ней */
.phone-col { display: flex; flex-direction: column; gap: 18px; width: 340px; flex: 0 0 340px; }
/* памятка без рамки карточки — просто заголовок и текст на фоне */
.how-to {
  margin: 0; border: 0; background: none; box-shadow: none;
  padding: 4px 6px;
}

.dialer {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(23, 26, 25, .55);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  padding: 22px 20px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}
/* левый край слит с саундпадом (.sb-dock) — общая граница на двоих, без
   двойной линии и скругления в месте стыка. */
.phone-group .dialer { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
@media (max-width: 860px) {
  .phone-group .dialer {
    border-left: 1px solid var(--line);
    border-top-left-radius: var(--r-xl); border-bottom-left-radius: var(--r-xl);
  }
}

/* строка состояния регистрации + пинг */
.reg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 16px;
}
.reg {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-faint);
}
.reg-ping {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--txt-faint); white-space: nowrap;
}
.reg-ping.good { color: var(--acc); }
.reg-ping.mid  { color: var(--warn); }
.reg-ping.bad  { color: var(--danger); }
.reg::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--txt-faint); flex: 0 0 auto;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.reg.on { color: var(--acc-hi); }
.reg.on::before { background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.reg.err { color: #eda49e; }
.reg.err::before { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

/* поле номера */
.num {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, .34);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: .04em;
  text-align: center;
  padding: 15px 44px 15px 14px;
  transition: border-color .2s var(--ease);
}
.num:focus { outline: none; border-color: rgba(91, 71, 224, .5); }
.num::placeholder { color: var(--txt-faint); font-size: 17px; letter-spacing: .1em; }

/* ---------- история наборов и записи ---------- */

.filters {
  gap: 8px; flex-wrap: wrap;
  padding: 0 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.filters .inp { width: auto; min-width: 130px; padding: 8px 11px; font-size: 13px; }
.filters .inp[name="q"] { min-width: 120px; }

.calls { display: flex; flex-direction: column; }
.callrow {
  display: grid;
  grid-template-columns: 92px 58px 1fr 1.1fr 56px 92px 74px;
  align-items: center; gap: 10px;
  padding: 8px 0; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.callrow:last-child { border-bottom: 0; }
.c-at, .c-secs { color: var(--txt-dim); font-size: 12px; }
.c-ext { color: var(--acc); }
.c-num { font-size: 14px; }
.c-num.pick { cursor: pointer; }
.c-num.pick:hover { color: var(--acc); }
.c-who { color: var(--txt-dim); font-size: 12px; overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.c-who i { font-style: normal; }
.c-res { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.c-res.r-ok       { color: var(--acc); }
.c-res.r-skip     { color: var(--warn); }
.c-res.r-busy     { color: var(--warn); }
.c-res.r-noanswer { color: var(--txt-faint); }
.c-rec { display: flex; gap: 4px; justify-content: flex-end; }
.c-rec .btn { padding: 4px 9px; }

/* В звонилке оператора колонок меньше: линия и команда там одни и те же. */
/* Последняя колонка шире обычной: кроме ▶ и ⤓ там живёт «!» — жалоба на
   этот самый набор. В 74px три кнопки не помещаются. */
#hist .callrow { grid-template-columns: 92px 1fr 52px 88px 104px; }
#hist.with-ext .callrow { grid-template-columns: 92px 52px 1fr 52px 88px 104px; }

.player {
  position: sticky; bottom: 16px; z-index: 40;
  margin-top: 16px; padding: 12px 14px;
  background: rgba(23, 26, 25, .92);
  backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.pl-h { display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 8px; }
.pl-t { font-size: 12.5px; color: var(--txt-dim); }
.pl-x { background: none; border: 0; color: var(--txt-dim); cursor: pointer;
        font-size: 20px; line-height: 1; padding: 0 4px; }
.pl-x:hover { color: var(--txt); }
.player audio { width: 100%; height: 34px; }

@media (max-width: 900px) {
  .callrow { grid-template-columns: 80px 1fr 84px 70px; }
  .c-ext, .c-who, .c-secs { display: none; }
}

/* ---------- живая статистика команды ---------- */

.stats { display: flex; flex-direction: column; }
.strow {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr repeat(4, 82px) 1.7fr;
  align-items: center; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.strow:last-child { border-bottom: 0; }
.strow.on { background: rgba(91, 71, 224, .05); }

.s-who b { font-size: 13px; display: block; }
.s-who i { font-style: normal; font-size: 11px; color: var(--txt-faint);
           letter-spacing: .05em; text-transform: uppercase; }
.s-st { font-size: 12.5px; color: var(--txt-dim); display: flex;
        align-items: center; gap: 7px; }
.s-st b { color: var(--txt); font-size: 12.5px; }
.s-n { text-align: center; }
.s-n b { display: block; font-size: 15px; }
.s-n i { font-style: normal; font-size: 10px; color: var(--txt-faint);
         letter-spacing: .05em; text-transform: uppercase; }
.s-last { font-size: 12px; color: var(--txt-dim); text-align: right;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-last .dim { color: var(--txt-faint); }

.st-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.st-live { background: var(--acc); box-shadow: 0 0 0 0 var(--acc-glow);
           animation: stpulse 1.4s infinite; }
.st-on   { background: var(--acc-teal); }
.st-off  { background: var(--txt-faint); }

@keyframes stpulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 71, 224, .55); }
  100% { box-shadow: 0 0 0 8px rgba(91, 71, 224, 0); }
}

@media (max-width: 1000px) {
  .strow { grid-template-columns: 1.4fr 1.2fr 74px 74px; }
  .s-n:nth-of-type(4), .s-n:nth-of-type(5), .s-last { display: none; }
}

/* ---------- операторы команды ---------- */

.oplist { display: flex; flex-direction: column; }
.oprow {
  display: grid;
  /* слот · логин · пароль · номер/сеть · действия */
  grid-template-columns: minmax(180px, 210px) minmax(120px, 1fr)
                         minmax(120px, 1fr) minmax(150px, 1.2fr) auto;
  align-items: center; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.oprow:last-child { border-bottom: 0; }
.op-slot { min-width: 0; }
.op-slot .slotsel {
  width: 100%; padding: 8px 10px; font-size: 13px;
  font-family: var(--mono);
}
.op-ext {
  font-family: var(--mono); font-size: 15px; color: var(--acc);
  letter-spacing: .04em;
}
.op-when { font-size: 12px; color: var(--txt-dim); min-width: 0; }
.op-when b { display: block; font-size: 12.5px; color: var(--txt); font-weight: 400; }
.op-when i { font-style: normal; font-size: 10.5px; color: var(--txt-faint); }
.op-num b { display: block; font-size: 12.5px; color: var(--txt); font-weight: 400; }
.op-num i { font-style: normal; font-size: 10.5px; color: var(--txt-faint); }
.op-cred { font-size: 13px; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.op-acts { display: flex; gap: 6px; justify-content: flex-end; }
.oprow .dim { color: var(--txt-faint); }

@media (max-width: 900px) {
  .oprow { grid-template-columns: minmax(150px, 180px) 1fr auto; }
  .op-cred + .op-cred, .op-when { display: none; }
}

/* Маршрут выбранной линии: шлюз/телефония, слот, команда, номер. */
.line-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -4px 0 12px;
}
.line-meta .lm {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px;
  white-space: nowrap;
}
.line-meta .lm-tel  { color: #7fd1ff; border-color: rgba(127,209,255,.35); }
.line-meta .lm-gw   { color: var(--acc); border-color: rgba(60,220,150,.35); }
.line-meta .lm-none { color: var(--warn); border-color: rgba(217,164,65,.35); }
.line-meta .lm-dim  { color: var(--txt-dim); }

.num-box { position: relative; }
.num-del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  color: var(--txt-faint); font-size: 19px; padding: 6px 8px;
  transition: color .2s var(--ease);
}
.num-del:hover { color: var(--danger); }

/* клавиатура */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 16px;
}
.pad button {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(20, 20, 40, .028);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 500;
  padding: 13px 0 9px;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease),
              transform .08s var(--ease);
}
.pad button:hover { background: var(--panel-2); border-color: var(--line-2); }
.pad button:active { transform: scale(.95); background: var(--acc-glow); border-color: var(--acc); }
.pad button i {
  display: block;
  font-style: normal;
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--txt-faint);
  margin-top: 3px;
  min-height: 10px;
}

/* кнопки вызова */
.callbar { display: flex; gap: 9px; margin-top: 16px; }
.callbar .btn { flex: 1; padding: 14px 10px; font-size: 10.5px; }

.btn-call {
  border-color: rgba(91, 71, 224, .5);
  background: rgba(91, 71, 224, .14);
  color: var(--acc-hi);
}
.btn-call:hover { background: rgba(91, 71, 224, .24); border-color: var(--acc); }
.btn-hang {
  border-color: rgba(226, 114, 106, .5);
  background: rgba(226, 114, 106, .14);
  color: #f0a89f;
}
.btn-hang:hover { background: rgba(226, 114, 106, .24); border-color: var(--danger); }

/* состояние вызова */
.callstate {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--line);
  text-align: center;
  min-height: 62px;
}
.callstate .st {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim);
}
.callstate.live .st { color: var(--acc-hi); }
.callstate .tm {
  font-family: var(--mono);
  font-size: 25px; font-weight: 300;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--txt-faint);
}
.callstate.live .tm { color: var(--txt); }

/* индикатор уровня микрофона */
.vu {
  height: 3px; border-radius: 2px; margin-top: 12px;
  background: rgba(20, 20, 40, .06);
  overflow: hidden;
}
.vu span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acc), var(--acc-teal));
  transition: width .08s linear;
}

/* набор: вставка и скрытие клавиатуры */
.dial-tools { display: flex; gap: 8px; margin-top: 10px; }
.dial-tools .btn { flex: 1; }
.dial-tools .btn.off { color: var(--txt-faint); border-color: transparent; }
.softphone-pop { width: 100%; margin-top: 8px; color: var(--txt-faint); }
.softphone-pop:hover { color: var(--acc-hi); }
/* стрелка у «Клавиатуры»: вниз — панель раскрыта, вверх — свёрнута */
#padtog { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tgl-cv {
  font-style: normal; font-size: 14px; line-height: 1;
  transform: translateY(-1px) rotate(180deg);
  transition: transform .18s var(--ease);
}
#padtog.off .tgl-cv { transform: translateY(-1px) rotate(0deg); }

/* управление звуком в разговоре */
.incall {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.incall .btn.off {
  color: #f0a89f; border-color: rgba(226, 114, 106, .5);
  background: rgba(226, 114, 106, .12);
}
.vol {
  display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-dim);
}

/* саундпад — узкая несворачиваемая полоска МЕЖДУ звонилкой и вкладками
   (см. .phone-group). Постоянная ширина, ничего никуда не раздвигает —
   кубики просто список внутри неё. */
.sb-dock {
  flex: 0 0 64px; width: 64px;
  /* Не stretch: пустая/короткая полоска не должна тянуться на всю высоту
     звонилки — размер по контенту, растёт вместе с числом кубиков (у
     .sb-strip ниже свой max-height, дальше — скролл). */
  align-self: flex-start;
  /* Свой блюр — своя стек-группа (см. ниже про подсказку); z-index держим
     выше соседней колонки вкладок (у её карточек тоже blur-фон и без
     явного z-index она в разметке позже — иначе перекрывала бы подсказку
     «i», а не наоборот). */
  position: relative; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  /* Правая сторона слита со звонилкой (см. .phone-group .dialer ниже) —
     без своей границы и скругления там, одна общая линия на двоих. */
  border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
  background: rgba(23, 26, 25, .55);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}
@media (max-width: 860px) {
  /* на телефоне полоска в своей строке НАД звонилкой — граница нужна со всех сторон */
  .phone-group .sb-dock {
    border-right: 1px solid var(--line);
    border-top-right-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl);
  }
}

/* «i» — без неё полоска голых кубиков непонятна тому, кто видит её
   впервые. Всплывашка чисто CSS, наводить и на кружок, и на неё саму. */
.sb-info { position: relative; flex: 0 0 auto; }
.sb-info-ic {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--txt-dim);
  font-size: 11px; font-style: italic; font-family: Georgia, serif;
  cursor: help;
}
.sb-info-pop {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: 220px; z-index: 30;
  padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: rgba(17, 21, 20, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  font-size: 11.5px; line-height: 1.55; color: var(--txt-dim);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease);
}
.sb-info-pop b { color: var(--txt); }
.sb-info:hover .sb-info-pop, .sb-info:focus .sb-info-pop,
.sb-info:focus-within .sb-info-pop { opacity: 1; visibility: visible; }

.sb-strip {
  /* Не flex:1 (тот тянул бы полоску на всю высоту звонилки и при 0-1
     кубике) — высота по контенту, а сверх этого предела уже скролл, а не
     бесконечный рост поверх соседей. */
  flex: 0 1 auto; width: 100%; max-height: 380px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 6px;
}
/* пока кубиков нет — сама полоска и подписывает себя, без лишней высоты */
.sb-empty-label {
  padding: 6px 0; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
  color: var(--txt-faint);
}

/* кубик — вся плитка кликабельна (играть/пауза), мелкие ⏹/✕ по углам
   вылезают только при наведении: оператору в разговоре не до прицела. */
.sb-cube {
  position: relative; width: 100%; aspect-ratio: 1;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease);
}
.sb-cube:hover { border-color: var(--line-2); }
.sb-cube:active { transform: scale(.94); }
.sb-cube.playing { border-color: var(--acc); background: var(--acc-glow); }
.sb-cube.paused { border-color: var(--acc-teal); }
.sb-cube-icon { font-size: 13px; color: var(--acc-hi); line-height: 1; }
.sb-cube-name {
  position: relative;
  font-size: 8.5px; text-align: center; color: var(--txt); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; max-width: 100%;
}
.sb-cube-name[contenteditable] { cursor: text; }
.sb-cube-name[contenteditable]:hover { text-decoration: underline dashed; }
.sb-cube-del, .sb-cube-stop {
  /* Кубик крошечный — навести точно на угол и не соскочить с hover
     нереально, кнопка мигала и пряталась прямо под курсором. Видны
     всегда, а не по наведению. */
  position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; line-height: 1; border: 1px solid var(--line);
  background: rgba(17, 21, 20, .9); color: var(--txt-dim);
}
.sb-cube-del { right: 2px; }
.sb-cube-del:hover { color: var(--danger); border-color: var(--danger); }
.sb-cube-stop { left: 2px; }
.sb-cube-stop:hover { color: var(--acc-hi); border-color: var(--acc); }
.sb-cube[data-state="idle"] .sb-cube-stop { display: none; }

/* кнопка добавления — тот же кубик, но пунктиром и всегда внизу полоски */
.sb-add {
  position: relative;
  flex: 0 0 auto; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--acc-hi);
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: transparent; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.sb-add:hover { border-color: var(--acc); background: var(--acc-glow); }
.sb-add:disabled { opacity: .5; cursor: default; }

/* самодельные подсказки вместо браузерного title — тот на тёмной панели
   выглядит чужеродно (жёлтая системная плашка) и не стилизуется вовсе */
.sb-dock [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap; z-index: 50;
  padding: 4px 8px; border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: rgba(17, 21, 20, .97);
  font-size: 10.5px; line-height: 1.3; color: var(--txt-dim);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease);
}
.sb-dock [data-tip]:hover::after, .sb-dock [data-tip]:focus::after {
  opacity: 1; visibility: visible;
}
.vol input[type="range"] { width: 100%; accent-color: var(--acc); }
.vol input[type="range"]:disabled { opacity: .4; }

.mic-ask { width: 100%; margin-top: 10px; color: var(--txt-faint); }

/* первый вход: окно про микрофон */
.mic-gate {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 5, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mic-card {
  max-width: 440px; width: 100%; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: var(--frame);
  padding: 34px 30px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.mic-card .mic-ic { font-size: 40px; line-height: 1; }
.mic-card h2 { margin: 16px 0 10px; font-size: 20px; }
.mic-card p { color: var(--txt-dim); font-size: 13.5px; margin: 0 0 20px; }
.mic-card .btn-p { width: 100%; }
.mic-timer {
  margin-top: 16px; font-size: 11px; letter-spacing: .1em;
  color: var(--txt-faint);
}
.mic-timer b { color: var(--txt-dim); font-family: var(--mono); }

/* ============================================================
   Блокнот оператора — выдвижная панель слева
   ============================================================ */
.notes-dock { position: fixed; left: 0; top: 0; bottom: 0; width: 0; z-index: 120; }

/* язычок-ручка на левом краю; едет вместе с панелью */
.notes-tab {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--acc); border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(180deg, rgba(61,219,139,.16), rgba(23,26,25,.94));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--acc-hi); cursor: pointer;
  padding: 26px 11px;
  box-shadow: 6px 0 22px rgba(0, 0, 0, .4);
  transition: left .28s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.notes-tab:hover { background: rgba(91, 71, 224, .28); }
.notes-tab span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 12.5px; letter-spacing: .22em; font-weight: 700;
}
/* мигающие стрелки: показывают, что панель выдвигается */
.notes-arrows { font-style: normal; font-size: 16px; line-height: 1; color: var(--acc); }
@keyframes notesPulse {
  0%, 100% { opacity: .2; transform: translateX(0); }
  50%      { opacity: 1; transform: translateX(3px); }
}
.notes-dock[data-open="0"] .notes-arrows { animation: notesPulse 1.05s var(--ease) infinite; }
/* открыта — стрелки смотрят внутрь (закрыть), без мигания */
.notes-dock[data-open="1"] .notes-arrows { transform: rotate(180deg); opacity: .6; }
.notes-dock[data-open="1"] .notes-tab { left: 340px; }

/* крупные призрачные стрелки в пустоте справа от язычка */
.notes-hint {
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px; pointer-events: none;
  color: var(--acc); font-size: 46px; line-height: 1; font-weight: 300;
}
.notes-hint span { opacity: 0; animation: notesHint 1.6s var(--ease) infinite; }
.notes-hint span:nth-child(2) { animation-delay: .18s; }
.notes-hint span:nth-child(3) { animation-delay: .36s; }
@keyframes notesHint {
  0%   { opacity: 0;   transform: translateX(-6px); }
  40%  { opacity: .22; }
  70%  { opacity: .14; }
  100% { opacity: 0;   transform: translateX(10px); }
}
/* открыта — подсказка не нужна */
.notes-dock[data-open="1"] .notes-hint { display: none; }

.notes-panel {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 340px; max-width: 88vw;
  display: flex; flex-direction: column;
  background: rgba(17, 21, 20, .97);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border-right: 1px solid var(--line-2);
  box-shadow: 18px 0 50px rgba(0, 0, 0, .5);
  transform: translateX(-100%);
  transition: transform .28s var(--ease);
  padding: 16px 16px 12px;
}
.notes-dock[data-open="1"] .notes-panel { transform: translateX(0); }

.notes-head { display: flex; align-items: center; justify-content: space-between; }
.notes-head h2 { margin: 0; font-size: 16px; letter-spacing: .04em; }
.notes-head-acts { display: flex; gap: 6px; }
#notes-pin.on { color: var(--acc-hi); border-color: var(--acc); }

.notes-editor { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.note-numbox { position: relative; }
.note-numbox .inp { width: 100%; padding-right: 82px; }
.note-fill {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 5px 10px; font-size: 11px; border-radius: var(--r);
  border: 1px solid var(--acc); color: var(--acc-hi);
  background: rgba(91, 71, 224, .16); cursor: pointer; white-space: nowrap;
}
.note-fill:hover { background: rgba(91, 71, 224, .28); }
#note-body { resize: vertical; min-height: 96px; font-family: var(--font); }
.notes-editor-acts { display: flex; align-items: center; gap: 8px; }
.notes-editor-acts .hint { margin-left: auto; }

.notes-list-h {
  margin: 18px 0 8px; font-size: 10px; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--txt-faint);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.notes-list { flex: 1; overflow-y: auto; scrollbar-width: thin;
              display: flex; flex-direction: column; gap: 6px; }
.note-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 10px; transition: border-color .15s var(--ease);
}
.note-row:hover { border-color: var(--line-2); }
.note-row.on { border-color: var(--acc); background: var(--acc-glow); }
.note-main { flex: 1; min-width: 0; cursor: pointer; }
.note-top { display: flex; align-items: baseline; gap: 8px; }
.note-num { color: var(--acc); font-size: 12.5px; }
.note-when { color: var(--txt-faint); font-size: 10px; margin-left: auto; }
.note-prev {
  color: var(--txt-dim); font-size: 12px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-acts { display: flex; gap: 4px; }
.note-acts .btn { padding: 5px 8px; }
.note-dl { display: inline-flex; align-items: center; justify-content: center; }
.note-dl:hover { color: var(--acc-hi); border-color: var(--acc); }
.note-dl svg { display: block; }
.note-del:hover { color: var(--danger); border-color: var(--danger); }

@media (max-width: 640px) {
  .notes-dock[data-open="1"] .notes-tab { left: 88vw; }
}

/* журнал набора */
.loglist { max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.logrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(160, 200, 180, .06);
  font-size: 12.5px;
}
.logrow:last-child { border-bottom: none; }
.logrow .t { color: var(--txt-faint); font-family: var(--mono); font-size: 11px; }
.logrow .n { font-family: var(--mono); flex: 1; min-width: 0; }
.logrow .r { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.logrow .r.ok { color: var(--acc-hi); }
.logrow .r.no { color: #eda49e; }

/* ============================================================
   Поиск по своей базе
   ============================================================ */

/* Колонок меньше, чем у звонков, и они другие — своя сетка, иначе
   строка разъезжается по чужому шаблону. */
.slogrow { grid-template-columns: 92px 110px 1fr 70px 110px; }
.s-q { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
       white-space: nowrap; color: var(--txt); }

.sbase { margin-top: 18px; }
.sbase:first-child { margin-top: 4px; }
.sbase-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.sbase-h h3 {
  margin: 0; font-size: 12px; font-weight: 500;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--acc-hi);
}
.sbase-h .cnt { font-size: 11px; color: var(--txt-faint); white-space: nowrap; }
.sbase > .hint { margin: 8px 0 0; }

/* Одна найденная запись. Набор колонок у каждой базы свой, поэтому это
   пары «поле — значение», а не таблица с общей шапкой. */
.srec {
  position: relative;
  margin-top: 10px; padding: 11px 42px 11px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.srec:hover { border-color: var(--line-2); }
.skv {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 10px; padding: 3px 0;
  font-size: 13px;
}
.skv .k {
  color: var(--txt-faint); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding-top: 2px;
}
.skv .v { color: var(--txt); word-break: break-word; }

.s-copy {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 8px; opacity: 0; transition: opacity .16s var(--ease);
}
.srec:hover .s-copy, .s-copy:focus { opacity: 1; }

/* Строка поиска на рабочем месте оператора: та же разметка результатов,
   но колонка узкая — подписи полей поджимаем, иначе значение остаётся
   без места и переносится по букве. */
.sbar .row { gap: 8px; align-items: stretch; }
.sbar .row .inp { flex: 1; min-width: 0; }
.sbar .skv { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 8px; }
.sbar .srec { padding: 9px 34px 9px 11px; }
.sbar .sbase { margin-top: 14px; }
.sbar .empty { padding: 26px 10px; }
.sres-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--txt-dim);
}

/* ---------- помощник: вопрос и короткий ответ ----------
   Вопрос повторяем над ответом: во вкладке оператора поле остаётся
   заполненным, но в журнале разговора глазами держат именно пару
   «спросил — ответили». */
.ask-q {
  color: var(--txt-dim); font-size: 13px;
  padding: 12px 0 10px; border-bottom: 1px solid var(--line);
}
.ask-q::before { content: "— "; color: var(--txt-faint); }
.ask-a { padding: 12px 0 2px; }
.ask-a p { margin: 0 0 10px; }
.ask-a p:last-child { margin-bottom: 0; }
.ask-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ask-foot .hint { margin: 0; }
/* Кончившийся лимит — единственное, что стоит подсветить: остальное
   в этой строке справочное. */
#askquota.out { color: var(--warn); }

/* Рабочее место без слота: звонилки нет, вкладки занимают всю ширину. */
.phone-wrap.solo { grid-template-columns: minmax(0, 1fr); }

/* Логотип в шапке. Занимает место точки — размер тот же, чтобы строка
   бренда не поехала, когда файл появится. */
/* Знак в шапке — крупно и в самом левом углу окна, это ссылка на главную.
   Ради него шапка на главной идёт во всю ширину: колонка контента
   центрирована, и знак внутри неё упирался бы не в край экрана, а в её
   поле. Внутренние страницы остаются в колонке. */
.brand-logo {
  width: 24px; height: 24px;
  object-fit: contain;
  flex: none;
}

/* Пробив и СМС вписаны в само описание, отдельных плашек под ним нет:
   строка над кнопками перебивала призыв к действию. */

/* Знак на главной — ПОДЛОЖКОЙ под надписью, не над ней. Приглушён и
   слегка размыт: он держит центр экрана, но не спорит с текстом, который
   идёт поверх. Сам заголовок не трогаем — градиент и шрифт его. */
.hero-mark-wrap { position: relative; }
.hero-mark {
  position: absolute;
  left: 50%; top: 50%;
  /* Приподнят: центрированный по надписи знак хвостом наползал на
     описание под ней и мешал его читать. */
  transform: translate(-50%, -58%);
  width: min(50vw, 430px);
  height: auto;
  opacity: .3;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.hero-mark-wrap .hero-t { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .hero-mark { width: 72vw; opacity: .24; }
  .brand-logo { width: 30px; height: 30px; }
}

/* ============================================================
   Вкладки рабочего места оператора
   ============================================================ */

.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.tabs button {
  position: relative;
  flex: 1; min-width: 84px;
  padding: 9px 14px;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--txt-dim); cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.tabs button:hover { color: var(--txt); }
.tabs button.on {
  color: var(--acc-hi);
  background: rgba(91, 71, 224, .12);
  box-shadow: inset 0 0 0 1px rgba(91, 71, 224, .28);
}

/* Значок «есть новое». Числом, а не точкой: три сообщения и тридцать —
   разные поводы переключиться. */
.tbadge {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  background: var(--acc); color: #06120c;
  border-radius: var(--r-pill);
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; vertical-align: 1px;
}
/* «!» — не число, а требование внимания: тёплый цвет и лёгкая пульсация. */
.tbadge.badge-mark {
  background: var(--warn); color: #1a1205;
  min-width: 16px; text-align: center; padding: 1px 5px;
  animation: badgePulse 1.3s var(--ease) infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); }
  60%      { box-shadow: 0 0 0 5px rgba(217, 164, 65, 0); }
}

/* подвкладки внутри карточки (Команда / Менеджер) */
.subtabs {
  display: flex; gap: 4px; margin-bottom: 12px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.subtabs button {
  flex: 1; padding: 8px 12px;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--txt-dim); cursor: pointer;
  font-family: inherit; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.subtabs button:hover { color: var(--txt); }
.subtabs button.on {
  color: var(--acc-hi); background: rgba(91, 71, 224, .12);
  box-shadow: inset 0 0 0 1px rgba(91, 71, 224, .28);
}

/* кнопка звука уведомлений в шапке */
.notify-toggle { padding: 6px 9px; font-size: 15px; line-height: 1; }
.notify-toggle.off { opacity: .5; }

/* список операторов в чатах менеджера */
.mc-ops { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* лимиты пробива */
.lim-h {
  font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--txt-faint); margin: 4px 0 10px;
}
.lim-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 84px;
  align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(160, 200, 180, .06);
}
.lim-row:last-child { border-bottom: 0; }
.lim-n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
         white-space: nowrap; }
.lim-n i { font-style: normal; margin-left: 6px; font-size: 11.5px; }
.lim-u { font-size: 11px; color: var(--txt-faint); white-space: nowrap; }
.lim-row .inp { padding: 6px 10px; font-size: 13px; text-align: center; }

/* остаток пробивов у оператора */
#squota.out { color: var(--warn); }

/* Кнопка «сообщить об ошибке» в строке звонка — там же, где ▶ и ⤓.
   Жалуются на конкретный набор, поэтому она в строке, а не у поля ввода. */
.js-err {
  font-family: var(--mono); font-weight: 700;
  color: var(--txt-faint);
}
.js-err:hover { color: var(--warn); border-color: var(--warn); }

/* ============================================================
   Переписка
   ============================================================ */

.chat { display: flex; flex-direction: column; min-height: 0; }
.chat-log {
  /* Высота от экрана, а не фиксированная: иначе на невысоком окне лента
     раздвигает карточку и поле ввода уезжает за нижний край. */
  max-height: 42vh; min-height: 160px;
  overflow-y: auto; scrollbar-width: thin;
  padding-right: 4px;
}
/* Большой чат (страницы «Ошибки»/«Чаты»): высота = ОСТАТОК экрана под
   шапкой, чтобы форма ввода всегда была видна, а не уезжала вниз. Лента
   тянется и скроллится внутри, форма прижата снизу. */
.chat-lg {
  /* Оставляем заметный запас снизу, чтобы форма не упиралась в край и
     страница не скроллилась; потолок скромный — не «простыня» сообщений. */
  height: calc(100vh - 385px);
  min-height: 260px; max-height: 480px;
}
.chat-lg .chat-log { flex: 1 1 auto; max-height: none; min-height: 0; }

.msg-row {
  padding: 9px 12px; margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-left: 2px solid var(--line-2);
}
/* Свои реплики — по правому краю и другим кантом: в ленте на четверых
   иначе не видно, где кончается свой текст и начинается чужой. */
.msg-row.mine {
  border-left-color: var(--acc);
  background: rgba(91, 71, 224, .07);
}
.msg-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.msg-h b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
           color: var(--txt-dim); }
.msg-row.mine .msg-h b { color: var(--acc-hi); }
.msg-at { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); }
.msg-ctx {
  display: inline-block; margin-bottom: 5px; padding: 1px 8px;
  background: rgba(217, 164, 65, .12);
  border-radius: var(--r-pill);
  font-size: 11.5px; color: var(--warn);
}
.msg-b { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
/* реакции и статус под сообщением — всегда слева, в один ряд */
.msg-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 7px;
}
.msg-react { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: rgba(20, 20, 40, .03);
  border-radius: var(--r-pill); padding: 2px 8px; cursor: pointer;
  font-size: 13px; line-height: 1.2;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rx-chip:hover { border-color: var(--line-2); }
.rx-chip.on { border-color: var(--acc); background: var(--acc-glow); }
.rx-chip .rx-n {
  font-size: 11px; font-family: var(--mono); color: var(--txt-dim);
}
.rx-add {
  border: 1px dashed var(--line-2); background: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 2px 8px;
  color: var(--txt-faint); font-size: 13px; line-height: 1.2;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.rx-add:hover { color: var(--acc-hi); border-color: var(--acc); }
.msg-read {
  font-size: 10px; letter-spacing: .04em; color: var(--txt-faint);
  margin-left: 2px;
}
.msg-read.on { color: var(--acc); }

/* всплывающий выбор эмодзи */
.rx-pop {
  position: absolute; z-index: 300;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 6px; width: 218px;
  background: var(--frame); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.rx-opt {
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 6px; border-radius: var(--r);
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.rx-opt:hover { background: var(--panel-2); transform: scale(1.15); }

.chat-send { display: flex; gap: 8px; margin-top: 12px; }
.chat-send .inp { flex: 1; min-width: 0; }

/* список разборов у управляющего */
.iss-list { max-height: calc(100vh - 360px); min-height: 240px;
            overflow-y: auto; scrollbar-width: thin; }
.iss-row {
  padding: 10px 12px; margin-bottom: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.iss-row:hover { border-color: var(--line-2); }
.iss-row.on { border-color: var(--acc); background: rgba(91, 71, 224, .08); }
/* Ждёт ответа = последним писал оператор. Именно это управляющий и ищет
   глазами, открывая страницу. */
.iss-row.wait { border-left: 2px solid var(--warn); }
.iss-h { display: flex; align-items: baseline; justify-content: space-between;
         gap: 8px; }
.iss-h b { font-size: 12.5px; }
/* кнопка «заглушить уведомления» в строке списка */
.iss-mute {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; opacity: .35;
  transition: opacity .15s var(--ease);
}
.iss-row:hover .iss-mute { opacity: .8; }
.iss-mute:hover { opacity: 1; }
.iss-row.muted { opacity: .55; }
.iss-row.muted.wait { border-left-color: var(--txt-faint); }
/* маркер непросмотренного сообщения — точка слева от строки */
.iss-row { position: relative; }
.iss-dot {
  position: absolute; left: 4px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc);
  animation: issDot 1.2s var(--ease) infinite;
}
/* уступаем место точке, чтобы она не липла к тексту */
.iss-row.unseen { border-color: var(--line-2); padding-left: 18px; }
.iss-row.unseen b { color: var(--acc-hi); }
@keyframes issDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 71, 224, .5); }
  60%      { box-shadow: 0 0 0 6px rgba(91, 71, 224, 0); }
}
.iss-at { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); }
.iss-meta { display: flex; gap: 8px; margin: 3px 0 5px;
            font-size: 11px; color: var(--txt-faint); }
.iss-meta i { font-style: normal; }
.iss-last { font-size: 12px; color: var(--txt-dim);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Найденный номер подставляется в звонилку кликом. */
.skv .v.pick { cursor: pointer; border-bottom: 1px dashed var(--line-2); }
.skv .v.pick:hover { color: var(--acc-hi); border-bottom-color: var(--acc); }

@media (max-width: 900px) {
  .slogrow { grid-template-columns: 78px 1fr 88px; }
  .slogrow .c-secs, .slogrow .c-who { display: none; }
  .skv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .s-copy { opacity: 1; }
}

/* ---- плашка «смотрю чужой кабинет» ----
   Липнет к верху и намеренно яркая: перепутать чужой кабинет со своим —
   дорогая ошибка, человек должен видеть это постоянно, а не один раз. */
.acting {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  background: linear-gradient(90deg, rgba(217, 164, 65, .18), rgba(217, 164, 65, .07));
  border-bottom: 1px solid rgba(217, 164, 65, .35);
  color: #f0dcb0;
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.acting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .2);
  flex: none;
}
.acting-txt { flex: 1; min-width: 0; }
.acting b { color: #ffe9bd; }
.acting .btn { flex: none; }

/* ---- карточки команд ---- */
.tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  transition: border-color .15s, transform .15s;
}
.tcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tcard.off { opacity: .62; }
.tcard-h { display: flex; align-items: flex-start; gap: 10px; }
.tcard-h .nm { font-size: 17px; font-weight: 600; line-height: 1.2; }
.tcard-h .sp { flex: 1; }
.tcard .slug { font-size: 12px; color: var(--txt-faint); }
.tcard-rows { display: grid; gap: 7px; font-size: 13px; }
.tcard-row { display: flex; gap: 10px; align-items: baseline; }
.tcard-row .k { color: var(--txt-faint); min-width: 92px; }
.tcard-row .v { color: var(--txt); min-width: 0; overflow-wrap: anywhere; }
.tcard-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.tnum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  min-width: 74px;
}
.tnum .n { font-size: 18px; font-weight: 600; line-height: 1; }
.tnum .n.acc { color: var(--acc-hi); }
.tnum .l { font-size: 10.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .06em; }
.tcard-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* ---- раздача линий: слоты по шлюзам, каналы по транкам ---- */
.pgroup + .pgroup { margin-top: 16px; }
.pgroup-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--txt-dim);
}
.pgroup-h b { color: var(--txt); font-size: 14px; }
.psep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--txt-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.psep::before, .psep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.trow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.trow + .trow { margin-top: 8px; }
.trow-i { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.trow-i b { font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.stepper input {
  width: 68px;
  text-align: center;
  padding: 7px 6px;
}
/* Стрелки браузера тут только мешают: шаг задают кнопки. */
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; }

/* ---- каналы транков в разделе «Линии» ----
   Свёрнуто видно главное — сколько каналов и сколько роздано; разворот
   показывает, кому именно они ушли. Плитками их рисовать незачем:
   каналы одинаковые, разглядывать в них нечего. */
.chrow {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.chrow + .chrow { margin-top: 8px; }
.chrow > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.chrow > summary::-webkit-details-marker { display: none; }
.chrow > summary::before {
  content: "▸";
  color: var(--txt-faint);
  transition: transform .15s;
}
.chrow[open] > summary::before { transform: rotate(90deg); }
.chrow > summary:hover { background: var(--panel-2); border-radius: var(--r); }
.chnums { font-size: 12.5px; color: var(--txt-faint); }
.chnums i { font-style: normal; color: var(--txt); font-weight: 600; }
.chnums i.acc { color: var(--acc-hi); }
.chbody { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.chteams { display: grid; gap: 8px; margin-top: 10px; }
.chteam {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 13px;
}
.chteam .dim { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---- сворачиваемая секция шлюза в разделе «Линии» ---- */
.gwsec > .gwsec-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.gwsec > .gwsec-h::-webkit-details-marker { display: none; }
.gwsec > .gwsec-h::before {
  content: "▸";
  color: var(--txt-faint);
  transition: transform .15s;
  align-self: center;
}
.gwsec[open] > .gwsec-h::before { transform: rotate(90deg); }
.gwsec > .gwsec-h h2 { margin: 0; }
.gwsec > .gwsec-h .hint { flex: 1; min-width: 0; }
/* Свёрнутая секция не должна тянуть за собой отступ содержимого. */
.gwsec:not([open]) > .gwsec-h { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }

/* ---- видимая кнопка «свернуть/развернуть» ----
   Была голая стрелка цветом --txt-faint: на тёмном фоне её физически не
   видно. Делаем настоящую кнопку с рамкой и акцентным цветом, одинаковую
   и у шлюзов, и у транков. */
.gwsec > .gwsec-h::before,
.chrow > summary::before {
  content: "▾";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--acc);
  font-size: 12px;
  line-height: 1;
  transform: rotate(-90deg);          /* свёрнуто — стрелка вправо */
  transition: transform .15s ease, border-color .15s, background .15s, color .15s;
}
.gwsec[open] > .gwsec-h::before,
.chrow[open] > summary::before { transform: rotate(0); }

.gwsec > .gwsec-h:hover::before,
.chrow > summary:hover::before {
  border-color: var(--acc);
  background: var(--acc-glow);
  color: var(--acc-hi);
}
/* Заголовок целиком кликабельный — подсказываем это курсором и подсветкой. */
.gwsec > .gwsec-h:hover h2 { color: var(--acc-hi); }
.chrow > summary:hover b { color: var(--acc-hi); }

/* ---- вкладки «Шлюзы» / «Белая» в разделе «Линии» ----
   Тот же сегментный переключатель, что и у видов, но с счётчиком: сколько
   рабочих мест за каждой вкладкой, чтобы не открывать ради пустоты. */
.linetabs button { display: inline-flex; align-items: center; gap: 7px; }
.linetabs button i {
  font-style: normal;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--txt-faint);
}
.linetabs button.on i { background: var(--acc-glow); color: var(--acc-hi); }

/* Транк, который не зарегистрирован: видно, но раздать нельзя. */
.trow.dead { opacity: .72; border-style: dashed; }
.trow.dead .stepper input[disabled],
.trow.dead .stepper button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- крупные вкладки раздела «Линии» ----
   Прежние были размером с переключатель вида и терялись среди него же:
   человек не понимал, что это главный переключатель страницы. Делаем
   большими, по центру и с явным активным состоянием. */
.bigtabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 22px auto 18px;
  flex-wrap: wrap;
}
.bigtabs button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--txt-dim);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.bigtabs button:hover {
  color: var(--txt);
  border-color: var(--acc);
  transform: translateY(-1px);
}
.bigtabs button.on {
  color: #071510;
  background: linear-gradient(180deg, var(--acc-hi), var(--acc));
  border-color: var(--acc-hi);
  box-shadow: 0 0 0 4px var(--acc-glow);
}
.bigtabs button i {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--txt-faint);
}
.bigtabs button.on i { background: rgba(7, 21, 16, .22); color: #071510; }

@media (max-width: 560px) {
  .bigtabs button { padding: 13px 24px; font-size: 13.5px; }
}

/* ---- форма пополнения прямо на странице ----
   Раньше она пряталась за кнопкой в модалке: лишний клик на действии,
   которое делают по десять раз подряд. */
.payform {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .8fr 1.6fr auto;
  gap: 14px;
  align-items: end;
}
.payform .field { margin: 0; }
.payform-go .btn { width: 100%; padding: 11px 26px; }
@media (max-width: 900px) {
  .payform { grid-template-columns: 1fr 1fr; }
  .payform-go { grid-column: 1 / -1; }
}

/* ---- строки «здоровья» и «кто в панели» на обзоре ---- */
.hlist { display: grid; gap: 2px; }
.hrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.hrow:last-child { border-bottom: none; }
.hdot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: none;
  background: var(--txt-faint);
}
.hdot.ok   { background: var(--acc);   box-shadow: 0 0 0 3px var(--acc-glow); }
.hdot.warn { background: var(--warn);  box-shadow: 0 0 0 3px rgba(217,164,65,.18); }
.hdot.bad  { background: var(--danger);box-shadow: 0 0 0 3px rgba(226,114,106,.18); }

/* Кратко подсвечиваем строку, которую только что поменяли: без этого
   непонятно, к кому применилось — строки без своих лимитов выглядят
   одинаково, и правка одной читалась как правка всех. */
@keyframes rowflash {
  from { background: var(--acc-glow); }
  to   { background: transparent; }
}
tr.flash > td { animation: rowflash 1.1s ease-out; }

/* ---- заметные кнопки звонилки ----
   «Вставить», «Клавиатура» и «Включить микрофон» были призрачными
   (btn-ghost): на тёмной панели их почти не видно, а нажимают их постоянно.
   Приводим к виду кнопки вызова — та же рамка и заливка акцентом. */
.btn-act {
  border-color: rgba(91, 71, 224, .5);
  background: rgba(91, 71, 224, .12);
  color: var(--acc-hi);
  padding: 12px 14px;
  font-size: 11px;
}
.btn-act:hover {
  background: rgba(91, 71, 224, .22);
  border-color: var(--acc);
}
/* Выключенная клавиатура — приглушённая, но всё ещё различимая. */
.dial-tools .btn-act.off {
  background: var(--panel-2);
  border-color: var(--line-2);
  color: var(--txt-dim);
}
.mic-ask.btn-act { width: 100%; margin-top: 12px; }

/* Выключенный микрофон в разговоре — красным, а не просто «потухшим».
   Забыть, что ты в мьюте, дороже, чем любая другая ошибка в звонилке:
   человек говорит в пустоту и не понимает, почему его не слышат. */
#mute.btn-act.off {
  border-color: rgba(226, 114, 106, .55);
  background: rgba(226, 114, 106, .16);
  color: #f0a89f;
}
#mute.btn-act.off:hover {
  background: rgba(226, 114, 106, .26);
  border-color: var(--danger);
}

/* ---- полосы нагрузки сервера на обзоре ---- */
.bars { display: grid; gap: 14px; }
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.bar-n { color: var(--txt-dim); }
.bar-t {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar-t i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  transition: width .45s ease, background .3s;
  background: var(--acc);
}
.bar-t i.warn { background: var(--warn); }
.bar-t i.bad  { background: var(--danger); }
.bar-v { color: var(--txt); font-family: ui-monospace, monospace; font-size: 12px; }
@media (max-width: 620px) {
  .bar-row { grid-template-columns: 84px 1fr; }
  .bar-v { grid-column: 2; text-align: right; }
}