/* Кабинет колл-центра — единый визуальный язык по макетам design/mockups.
   Общие классы: .card, .grid, .table, .btn, .badge, .tip, .stat. Без внешних ресурсов и скриптов. */

:root {
  --bg: #f4f5f3;
  --paper: #fff;
  --ink: #24352f;
  --muted: #718079;
  --line: #dfe5df;
  --green: #24624c;
  --soft: #eaf3ed;
  --amber: #946017;
  --amberbg: #fff4df;
  --red: #a3433e;
  --redbg: #fbefed;
  --blue: #426784;
  --bluebg: #edf3f8;
  --radius: 8px;
  --border: 1px solid #ccd7cf;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none }
h1, h2, h3, p { margin: 0 }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.7px; font-weight: 650 }
h2 { font-size: 16px; letter-spacing: -.25px }
h3 { font-size: 14px }
small, .small { font-size: 12px }
.muted { color: var(--muted) }
.mt { margin-top: 12px }
.wide { width: 100% }
.note { font-size: 12px; color: var(--muted); line-height: 1.6 }

.eyebrow {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* --- шапка и каркас --------------------------------------------------------- */

.top {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: white;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}

.brand {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mark {
  background: var(--green);
  color: white;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

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

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9eee8;
  font-size: 11px;
  font-weight: 700;
}

.shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}

.shell.single { grid-template-columns: minmax(0, 1fr) }

.side {
  background: #fafbf9;
  border-right: 1px solid var(--line);
  padding: 27px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.side .eyebrow { padding: 0 12px; margin-bottom: 12px }

.nav {
  padding: 10px 12px;
  color: #65746c;
  border-radius: 6px;
  font-size: 13px;
}

.nav.active, .nav:hover { background: #e7efe8; color: var(--green); font-weight: 650 }

.side-bottom { margin-top: auto; padding: 36px 12px 0; font-size: 11px; color: var(--muted) }

main { padding: 27px 30px 40px; min-width: 0; max-width: 1600px; width: 100%; margin: auto }

.pagehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}

.subtitle { color: var(--muted); margin-top: 6px; font-size: 12px }

.footnote { margin-top: 18px; font-size: 11px; color: var(--muted) }

.row { display: flex; align-items: center; gap: 10px }
.row.wrap { flex-wrap: wrap }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.divider { border: 0; border-top: 1px solid var(--line); margin: 15px 0 }

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

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card + .card { margin-top: 16px }
.card > .pad { padding: 18px }
.card-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr }
.stack { display: grid; gap: 16px; align-content: start }

.callout {
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--soft);
  border-left: 3px solid #548c6f;
}

.callout p + p { margin-top: 6px }
.callout.warn { background: var(--amberbg); border-left-color: #c99a45 }

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

.tablewrap { overflow: auto }

.table, table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left;
}

.table th, table th {
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 600;
  background: #fafbf9;
  white-space: nowrap;
}

.table th, .table td, table th, table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table tr:last-child td, table tr:last-child td { border-bottom: 0 }
.table td strong, table td strong { font-weight: 600 }
.table td .muted, table td .muted { font-size: 11px; margin-top: 3px }
.table .money, .money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }

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

.btn, button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  background: white;
  border: var(--border);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover, button:hover, .button:hover { background: var(--soft) }

.btn-primary, button.primary, .button.primary {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.btn-primary:hover, button.primary:hover, .button.primary:hover { background: #1d4f3d }

.btn-danger, button.danger, .button.danger { color: var(--red); border-color: #e7c8c4 }
.btn-danger:hover, button.danger:hover, .button.danger:hover { background: var(--redbg) }

.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); padding: 4px 8px }
.btn-quiet:hover { background: #f0f2ef; color: var(--ink) }

.btn:disabled, button:disabled { opacity: .45; cursor: default }

.btn + .btn { margin-left: 8px }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #85b4a1;
  outline-offset: 3px;
}

input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: var(--border);
  border-radius: 5px;
  background: white;
  color: var(--ink);
  font: inherit;
}

textarea { resize: vertical; min-height: 70px }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px }

/* --- статусы и бейджи ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 4px;
  background: #f0f2ef;
  color: #66746c;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block }

.badge.green { color: var(--green); background: var(--soft) }
.badge.amber { color: var(--amber); background: var(--amberbg) }
.badge.red { color: var(--red); background: var(--redbg) }
.badge.blue { color: var(--blue); background: var(--bluebg) }

/* Статусы лида: тот же вид, те же цвета, что на макетах. */
.badge.on_review { color: var(--amber); background: var(--amberbg) }
.badge.handed_over { color: var(--green); background: var(--soft) }
.badge.contacted { color: var(--blue); background: var(--bluebg) }
.badge.not_reached { color: var(--amber); background: var(--amberbg) }
.badge.declined { color: var(--red); background: var(--redbg) }
.badge.already_client { color: #66746c; background: #f0f2ef }
.badge.ordered { color: var(--green); background: var(--soft) }
.badge.rejected { color: var(--red); background: var(--redbg) }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.status.on_review { color: var(--amber); background: var(--amberbg) }
.status.handed_over, .status.ordered { color: var(--green); background: var(--soft) }
.status.contacted { color: var(--blue); background: var(--bluebg) }
.status.not_reached { color: var(--amber); background: var(--amberbg) }
.status.declined, .status.rejected { color: var(--red); background: var(--redbg) }
.status.already_client { color: #66746c; background: #f0f2ef }

/* --- советы оператору и показатели ----------------------------------------- */

.tip {
  padding: 13px 15px;
  border-radius: 6px;
  background: var(--soft);
  border-left: 3px solid #548c6f;
  font-size: 13px;
}

.tip + .tip { margin-top: 10px }
.tip .tip-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px }
.tip p + p { margin-top: 6px }
.tip .tip-meta { color: var(--muted); font-size: 11px; margin-top: 8px }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  margin-bottom: 20px;
}

.stat { padding: 14px 19px; border-right: 1px solid var(--line) }
.stat:last-child { border: 0 }
.stat strong { font-size: 27px; font-weight: 650; letter-spacing: -1px; display: block; line-height: 1.2; margin-top: 4px }
.stat .small { color: var(--muted) }

/* --- сообщения и вход ------------------------------------------------------- */

.flash-list { display: grid; gap: 8px; margin-bottom: 18px }

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}

.flash.danger, .flash.error { background: var(--redbg); color: var(--red) }
.flash.warning { background: var(--amberbg); color: var(--amber) }

.login-wrap { display: flex; justify-content: center; padding: 24px 0 }
.login-card { width: 100%; max-width: 380px; padding: 26px }
.login-card .subtitle { margin: 6px 0 18px }
.login-card label + input, .login-card input + label { margin-top: 12px }
.login-card .btn { margin-top: 18px }

/* --- списки и мелочи -------------------------------------------------------- */

.listitem { padding: 13px 17px; border-bottom: 1px solid var(--line) }
.listitem:last-child { border: 0 }
.meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted) }
.quote { font-size: 15px; line-height: 1.6 }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 18px; font-size: 13px }
.tab { padding: 0 0 12px; color: var(--muted) }
.tab.active { color: var(--green); font-weight: 650; border-bottom: 2px solid var(--green) }
details summary { cursor: pointer }
details p { margin-top: 8px }

@media (max-width: 1200px) {
  .shell { grid-template-columns: 150px minmax(0, 1fr) }
  .top { padding: 0 20px }
  main { padding: 22px 20px }
}

@media (max-width: 900px) {
  .shell, .shell.single { grid-template-columns: 1fr }
  .side { display: none }
  .stats { margin-bottom: 16px }
}

@media (max-width: 620px) {
  body { font-size: 13px }
  .top { height: 54px; padding: 0 16px }
  .brand { font-size: 16px }
  main { padding: 20px 14px }
  .pagehead { align-items: flex-start; flex-wrap: wrap; margin-bottom: 17px }
  h1 { font-size: 24px }
  .grid-2 { grid-template-columns: 1fr }
  .stats { grid-template-columns: 1fr 1fr }
  .stat { padding: 12px 14px }
  .stat:nth-child(2) { border-right: 0 }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line) }
  .stat strong { font-size: 24px }
  .btn, button { min-height: 40px }
}

@media print {
  .side, .top, .btn, button { display: none }
  .shell { display: block }
  main { padding: 0 }
  .card { break-inside: avoid }
}

/* --- экран оператора --------------------------------------------------------- */
/* Сетка и блоки этапов скрипта — по макету design/mockups/operator.html.
   Общие .card/.card-head/.listitem/.stack/.stats описаны выше. */

.operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: start;
}

.operator-grid > .stack { align-content: start }

.shift-controls { margin-bottom: 16px }
.shift-controls form { margin: 0 }

.script-step { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.script-step:last-child { border: 0 }
.script-step p { margin-top: 4px; color: #65746c; font-size: 12px }
.script-step .num { font-size: 11px; font-weight: 650; color: var(--muted); width: 22px; flex-shrink: 0 }

ul.signals { margin: 8px 0 0; padding-left: 18px }
ul.signals li + li { margin-top: 3px }

.quote { font-size: 15px; line-height: 1.6 }

@media (max-width: 900px) {
  .operator-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 800px) {
  .operator-grid { grid-template-columns: 1fr }
}

/* --- экраны бюро: менеджер и владелец --------------------------------------- */
/* Сетки, поля карточки и блок акта — по макетам design/mockups/manager.html
   и design/mockups/owner.html. Общие .card/.card-head/.stack/.stats выше. */

.manager-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start }
.owner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start }
.manager-grid > .stack, .owner-grid > .stack { align-content: start }

/* Поля карточки: подпись слева, значение справа. */
.kv { display: grid; gap: 9px }
.kv-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline }
.kv-row > span:first-child { color: var(--muted); font-size: 12px }
.kv-row > span:last-child { overflow-wrap: anywhere }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.fields label { margin-bottom: 4px }
.wide { width: 100% }
.mt { margin-top: 12px }

.code { font-size: 22px; font-weight: 650; letter-spacing: 1px; font-variant-numeric: tabular-nums }

.letter { min-height: 130px; font-size: 12px; line-height: 1.55 }

.player { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.player audio { flex: 1 1 260px; min-width: 0 }

/* Срок отметки «уже наш клиент». */
.timer { padding: 12px 14px; border-radius: 6px; background: var(--amberbg); border-left: 3px solid #d0a04a }
.timer p + p, .timer .note { margin-top: 6px }
.timer.red { background: var(--redbg); border-left-color: #c98a84 }
.timer form { margin: 0 }

/* Акт владельца: строки и итог. */
.receipt-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px }
.receipt-line strong { font-variant-numeric: tabular-nums }

.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.total strong { font-size: 24px; font-weight: 650; letter-spacing: -.6px; font-variant-numeric: tabular-nums }

.month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.month-nav form { display: flex; align-items: center; gap: 8px; margin: 0 }
.month-nav select { width: auto }
.month-nav .month-name { min-width: 160px; text-align: center; font-weight: 650 }
.month-nav label { margin: 0 }

/* Вид заказа в акте: первый, повторный, не засчитан. */
.badge.first { color: var(--green); background: var(--soft) }
.badge.repeat { color: var(--blue); background: var(--bluebg) }
.badge.none { color: #66746c; background: #f0f2ef }

@media (max-width: 1200px) {
  .manager-grid, .owner-grid { grid-template-columns: minmax(0, 1fr) 280px }
}

@media (max-width: 900px) {
  .manager-grid, .owner-grid { grid-template-columns: 1fr }
}

@media (max-width: 620px) {
  .fields, .kv-row { grid-template-columns: 1fr }
  .kv-row { gap: 2px }
  .month-nav .month-name { min-width: 0; flex: 1 1 auto }
}

/* --- экраны руководителя ----------------------------------------------------- */

.stats a.stat { display: block; color: inherit }
.stats a.stat:hover { background: var(--soft) }

/* Проверка лида: карточка слева, оценка и решение справа. */
.review-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}
.review-check { position: sticky; top: 16px }

.fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr }
.fields.three { grid-template-columns: 1fr 1fr 1fr }
.fields p { word-break: break-word }

.player {
  padding: 12px 14px;
  border-radius: 6px;
  background: #f7f9f6;
  border: 1px solid var(--line);
}
.player audio { width: 100%; margin-top: 8px }
.upload-row { margin-top: 12px }
.upload-row input[type="file"] {
  max-width: 260px;
  padding: 6px;
  background: white;
}
.upload-row .note { margin: 0 }

.transcript { display: grid; gap: 8px }
.tr-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fafbf9;
  border-left: 2px solid var(--line);
  font-size: 13px;
}
.tr-line time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums }
.tr-line strong { display: block; font-size: 11px; letter-spacing: .3px; text-transform: uppercase }
.tr-line p { word-break: break-word }

.stage-list { display: grid; gap: 10px }
.stage { padding-bottom: 10px; border-bottom: 1px solid var(--line) }
.stage:last-child { border-bottom: 0; padding-bottom: 0 }
.stage p { margin-top: 5px }
.stage .between { gap: 12px }

/* Оценка по чек-листу. */
.qa-list { display: grid; gap: 6px; margin-bottom: 12px }
.qa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbf9;
  font-size: 12px;
}
.qa-item { line-height: 1.35 }
.score-pick { display: flex; gap: 4px; flex-shrink: 0 }
.score { margin: 0; cursor: pointer }
.score input { position: absolute; opacity: 0; width: 0; height: 0 }
.score span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--border);
  border-radius: 5px;
  background: white;
  font-size: 12px;
  font-weight: 600;
}
.score:hover span { background: var(--soft) }
.score.on span { background: var(--green); border-color: var(--green); color: white }
.score input:focus-visible + span { outline: 3px solid #85b4a1; outline-offset: 2px }

.check { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; margin: 0 }
.check input { width: 16px; height: 16px; accent-color: var(--green) }

/* Согласия клиента: что разрешено и что нужно для передачи. */
.consent-list { display: grid; gap: 6px }
.consent-list .check {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbf9;
}
.note.danger { color: var(--red) }

/* Предложения правок. */
.proposal .diff { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 12px }
.proposal .before, .proposal .after {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.proposal .before { background: var(--redbg); border-left: 3px solid #cf8b85 }
.proposal .after { background: var(--soft); border-left: 3px solid #548c6f }
.proposal .diff p { margin-top: 6px }
.proposal-actions { margin-top: 14px }
.second-opinion { margin-top: 12px }
.second-opinion.warn { background: var(--amberbg); border-left-color: #c99a45 }
.second-opinion p + p { margin-top: 5px }

/* Сборка версии скрипта. */
.stage-edit { padding-top: 12px; border-top: 1px solid var(--line) }
.stage-edit:first-of-type { border-top: 0; padding-top: 0 }
.stage-edit input { margin-bottom: 6px }

/* Фильтры отчётов и экономика. */
.filters { align-items: flex-end }
.filters > div { width: 170px }
.filters > button { margin-bottom: 1px }
.econ { display: grid; gap: 12px; grid-template-columns: 1fr 1fr }
.econ > div { display: grid; gap: 3px }
.econ strong { font-size: 19px; font-weight: 650; letter-spacing: -.4px }

.tabs { margin-top: 20px }

@media (max-width: 1200px) {
  .review-grid { grid-template-columns: minmax(0, 1fr) }
  .review-check { position: static }
}

@media (max-width: 620px) {
  .fields, .fields.three, .proposal .diff, .econ { grid-template-columns: 1fr }
  .qa-row { flex-wrap: wrap }
  .filters > div { width: 100% }
}

/* Деньги и независимые разделы настроек. */
.settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px }
.settings-nav a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 12px }
.settings-nav a:hover, .settings-nav a:focus-visible { background: var(--soft); color: var(--green) }
.settings-stack { display: grid; gap: 18px }
.settings-section { scroll-margin-top: 18px; min-width: 0 }
.settings-pair { align-items: start }
.settings-save { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px }
.settings-section .fields .note { margin-top: 5px }
.terms-summary { font-size: 21px; font-weight: 650; line-height: 1.5; letter-spacing: -.4px; color: var(--green); font-variant-numeric: tabular-nums }
.money-example { padding: 14px 16px; background: var(--soft); border-left: 3px solid var(--green); border-radius: 6px }
.money-example p { margin-top: 6px }
.terms-history th { white-space: normal }
.terms-current td { background: var(--soft) }
.terms-current td:first-child { box-shadow: inset 3px 0 var(--green); font-weight: 650 }
.email-preview { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 150px; padding: 14px; margin-top: 8px; border: 1px solid var(--line); background: #fafbf9; border-radius: 6px; font-size: 13px }
.earnings-card { margin-bottom: 18px; border-left: 3px solid var(--green) }
.earnings-total { display: block; margin: 6px 0; font-size: 28px; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -.6px }
@media (max-width: 620px) {
  .terms-summary { font-size: 18px }
  .settings-save { align-items: stretch; flex-direction: column }
  .settings-nav a { flex: 1 1 auto; text-align: center }
}