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

   Палитра данных проверена валидатором из гайда по визуализации на этой самой
   поверхности (#0e1a24, тёмный режим): яркость в допустимой полосе, разделимость
   при дальтонизме ΔE 12,8 при пороге 8, контраст к фону выше 3:1.
   Статусные цвета взяты фиксированными из гайда и никогда не несут смысл
   в одиночку — рядом всегда число или подпись. */

:root {
  color-scheme: dark;

  /* поверхности: от глубины к отмели */
  --глубина:      #08131c;
  --вода:         #0e1a24;
  --отмель:       #14232f;
  --пена:         #1c2f3d;

  /* текст */
  --текст:        #e8f0f4;
  --текст-2:      #93a8b5;
  --текст-3:      #5d7382;

  /* данные */
  --навыки:       #0f9b8e;   /* морская бирюза — навыки продаж */
  --эи:           #c98500;   /* латунь — эмоциональный интеллект */
  --третий:       #3987e5;

  /* статусы (фиксированы гайдом, всегда с подписью) */
  --хорошо:       #0ca30c;
  --внимание:     #fab219;
  --плохо:        #d03b3b;

  --линия:        #23394a;
  --сетка:        rgba(147, 168, 181, 0.14);

  --скругление:   14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 15px/1.55 "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, #10293a 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 0%, #0d2430 0%, transparent 55%),
    var(--глубина);
  background-attachment: fixed;
  color: var(--текст);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─────────── шапка ─────────── */

.шапка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 34px 20px;
  border-bottom: 1px solid var(--линия);
}

.лого {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}

/* маяк: отметка живой системы */
.лого::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--навыки);
  box-shadow: 0 0 0 4px rgba(15, 155, 142, .16);
  animation: маяк 3.6s ease-in-out infinite;
}
@keyframes маяк {
  0%, 100% { box-shadow: 0 0 0 4px rgba(15,155,142,.16); }
  50%      { box-shadow: 0 0 0 9px rgba(15,155,142,.04); }
}

.жк { color: var(--текст-3); font-size: 13.5px; letter-spacing: .2px; }

/* ─────────── вкладки ─────────── */

.вкладки {
  display: flex;
  gap: 2px;
  padding: 0 34px;
  border-bottom: 1px solid var(--линия);
  background: rgba(8, 19, 28, .72);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
}

.вкладка {
  background: none; border: none;
  padding: 15px 20px 13px;
  font: inherit; font-size: 14.5px;
  color: var(--текст-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.вкладка:hover { color: var(--текст-2); }
.вкладка.активная { color: var(--текст); border-bottom-color: var(--навыки); }

main { padding: 28px 34px 60px; max-width: 1480px; }

/* ─────────── плитки ─────────── */

.плитки {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.плитка {
  background: linear-gradient(160deg, var(--отмель), var(--вода));
  border: 1px solid var(--линия);
  border-radius: var(--скругление);
  padding: 18px 20px 20px;
  position: relative;
  overflow: hidden;
}
.плитка::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,155,142,.5), transparent);
}
.плитка .подпись {
  color: var(--текст-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}
.плитка .число {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.плитка .хвост { color: var(--текст-3); font-size: 14px; font-weight: 400; letter-spacing: 0; }

/* ─────────── карточки ─────────── */

.карточка {
  background: var(--вода);
  border: 1px solid var(--линия);
  border-radius: var(--скругление);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.карточка h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--текст-3);
  margin-bottom: 18px;
}
/* заголовок разбора несёт имена людей — капс тут неуместен */
.карточка h2.разбор {
  font-size: 17px;
  text-transform: none;
  letter-spacing: -0.2px;
  color: var(--текст);
  font-weight: 500;
}

.полоса-карточек { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }

/* ─────────── менеджеры ─────────── */

.менеджер {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--линия);
}
.менеджер:last-child { border-bottom: none; }
.менеджер .имя { font-size: 16px; font-weight: 500; }
.менеджер .мелко { color: var(--текст-3); font-size: 13px; margin-top: 3px; }

.шкалы { display: grid; gap: 7px; min-width: 230px; }
.шкала { display: grid; grid-template-columns: 30px 1fr 34px; gap: 9px; align-items: center; font-size: 12px; }
.шкала .метка-ш { color: var(--текст-3); }
.шкала .жёлоб { height: 7px; background: var(--пена); border-radius: 4px; overflow: hidden; }
.шкала .заливка { height: 100%; border-radius: 4px; }
.шкала .цифра { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ─────────── звонки ─────────── */

.звонок {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--линия);
  border-radius: 11px;
  margin-bottom: 9px;
  cursor: pointer;
  background: var(--вода);
  transition: border-color .15s, transform .15s, background .15s;
}
.звонок:hover { border-color: var(--навыки); transform: translateX(3px); background: var(--отмель); }

.звонок .время { color: var(--текст-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.звонок .время b { display: block; color: var(--текст-2); font-size: 15px; font-weight: 500; }
.звонок .кто { font-size: 15px; }
.звонок .кто .клиент { color: var(--текст-3); font-size: 13px; margin-top: 2px; }
.звонок .оценки { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* оценка: цвет плюс всегда число — цвет никогда не единственный носитель смысла */
.балл {
  min-width: 46px; text-align: center;
  padding: 5px 9px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.балл.хорошо  { background: rgba(12,163,12,.14);  color: #4ade4a; border-color: rgba(12,163,12,.34); }
.балл.средне  { background: rgba(250,178,25,.13); color: #fbc85a; border-color: rgba(250,178,25,.3); }
.балл.плохо   { background: rgba(208,59,59,.14);  color: #f08585; border-color: rgba(208,59,59,.34); }

.метка {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--линия);
  color: var(--текст-2);
  white-space: nowrap;
}
.метка.успешный   { border-color: rgba(12,163,12,.4);  color: #4ade4a; }
.метка.неуспешный { border-color: rgba(208,59,59,.4);  color: #f08585; }
.метка.горячий    { border-color: rgba(208,59,59,.45); color: #f08585; }
.метка.тёплый     { border-color: rgba(250,178,25,.4); color: #fbc85a; }
.метка.холодный   { border-color: rgba(57,135,229,.4); color: #7fb3f0; }

/* ─────────── радар ─────────── */

.радар-блок { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 980px) { .радар-блок { grid-template-columns: 1fr; } }

.легенда { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.легенда span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--текст-2); }
.легенда i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* точные значения рядом с радаром: глазомер по лепесткам ненадёжен */
.навык-строка {
  display: grid; grid-template-columns: 1fr 46px;
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(35,57,74,.55);
  font-size: 13.5px;
}
.навык-строка:last-child { border-bottom: none; }
.навык-строка .знач { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────── детали разбора ─────────── */

.навык {
  display: grid; grid-template-columns: 210px 56px 1fr;
  gap: 16px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid rgba(35,57,74,.5);
}
.навык:last-child { border-bottom: none; }
.навык .имя { font-size: 14px; }
.навык .обоснование { color: var(--текст-2); font-size: 13.5px; }
.навык .цитата {
  color: var(--текст-3); font-size: 13px; font-style: italic;
  margin-top: 5px; padding-left: 11px; border-left: 2px solid var(--линия);
}

.поля { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 11px; }
.поле { background: var(--отмель); border: 1px solid var(--линия); border-radius: 10px; padding: 12px 14px; }
.поле .подпись { color: var(--текст-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.поле .значение { font-size: 14px; }
.поле.пусто { border-style: dashed; }
.поле.пусто .значение { color: var(--текст-3); }

.список { list-style: none; }
.список li {
  padding: 10px 0 10px 26px; position: relative;
  border-bottom: 1px solid rgba(35,57,74,.5); font-size: 14px;
}
.список li:last-child { border-bottom: none; }
.список li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--навыки);
}

.расшифровка { max-height: 440px; overflow-y: auto; padding-right: 6px; }
.реплика { display: grid; grid-template-columns: 52px 1fr; gap: 14px; margin-bottom: 13px; font-size: 14px; }
.реплика .время { color: var(--текст-3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 10px; }
.реплика .текст { padding: 9px 13px; border-radius: 10px; }
.реплика.менеджер .текст { background: rgba(15,155,142,.1);  border-left: 2px solid var(--навыки); }
.реплика.клиент .текст   { background: rgba(147,168,181,.07); border-left: 2px solid var(--текст-3); }

.назад {
  background: none; border: 1px solid var(--линия); border-radius: 9px;
  padding: 8px 15px; cursor: pointer; margin-bottom: 18px;
  font: inherit; font-size: 13.5px; color: var(--текст-2);
}
.назад:hover { border-color: var(--навыки); color: var(--текст); }

.заглушка {
  color: var(--текст-3); font-size: 14px; padding: 34px;
  text-align: center; background: var(--отмель);
  border: 1px dashed var(--линия); border-radius: 11px;
  line-height: 1.7;
}

.плеер { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--отмель); border: 1px solid var(--линия); border-radius: 11px; margin-bottom: 16px; }
.плеер audio { width: 100%; height: 34px; }

.сводка { font-size: 15px; line-height: 1.65; }
.шапка-разбора { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }

/* всплывающая подсказка графиков */
.подсказка {
  position: fixed; pointer-events: none; z-index: 100;
  background: var(--пена); border: 1px solid var(--линия);
  border-radius: 9px; padding: 9px 12px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .12s;
}
.подсказка.видна { opacity: 1; }
.подсказка .т-имя { color: var(--текст-2); margin-bottom: 4px; }
.подсказка .т-знач { font-weight: 600; font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--глубина); }
::-webkit-scrollbar-thumb { background: var(--пена); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #26404f; }