:root {
  --blue: #00a2ff; --ink: #17202a; --muted: #626e7b; --line: #e7ebef; --surface: #f5f7f9;
  --accent: var(--blue); --danger: #f24d48; --ok: #26a86f;
  --bg: var(--surface); --panel: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 14px/1.45 Manrope, Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink); background: var(--surface);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.375rem; letter-spacing: -.03em; margin: 0 0 16px; }
h2 { font-size: 1rem; font-weight: 800; margin: 20px 0 8px; }
h3 { font-size: .9375rem; font-weight: 800; margin: 0 0 10px; }
.muted { color: var(--muted); }
.dim { opacity: .5; }
.spacer { flex: 1; }

/* forms */
button {
  background: var(--blue); color: #fff; border: 0; border-radius: 9px;
  padding: 0 16px; height: 38px; cursor: pointer; font-size: .9375rem; font-weight: 750;
  box-shadow: 0 6px 16px rgba(0, 162, 255, .19);
}
button { transition: background .15s ease, box-shadow .15s ease, transform .08s ease; }
button:hover { background: #0096eb; }
button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(0, 162, 255, .19); }
button.link { background: none; box-shadow: none; color: var(--blue); padding: 2px 4px; height: auto; font-weight: 700; }
button.link:hover { background: none; text-decoration: underline; }
button.link:active { transform: none; box-shadow: none; }
button.danger, .danger { background: var(--danger); color: #fff; box-shadow: none; }
button.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
button.secondary:hover { background: #f5f8fa; border-color: #c9d2d9; }
input, select, textarea {
  font: inherit; padding: 0 12px; height: 38px; border: 1px solid #dfe5e9;
  border-radius: 9px; background: #fff; color: var(--ink); outline: 0;
}
textarea { height: auto; padding: 8px 12px; }
input:focus, select:focus, textarea:focus { border-color: #72caff; box-shadow: 0 0 0 3px #e6f6ff; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 750; color: #596573; }
label input, label select { color: var(--ink); font-weight: 400; }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }

/* shell: sidebar + workspace */
.crm-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: 208px; flex: 0 0 208px; height: 100vh; height: 100dvh; background: #fff;
  border-right: 1px solid var(--line); padding: 19px 14px 15px;
  display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start;
  overflow-y: auto; z-index: 5;
}
.sidebar > * { flex-shrink: 0; }
.brand-mark { height: 72px; display: flex; align-items: center; padding: 0 4px 12px; margin-bottom: 8px; border-bottom: 1px solid #f0f2f4; overflow: hidden; }
.brand-mark img { display: block; object-fit: contain; object-position: left center; width: 130px; height: 60px; }
.main-nav { display: grid; gap: 4px; }
.nav-item {
  position: relative; border: 0; background: transparent; min-height: 44px; border-radius: 10px;
  padding: 0 11px; display: flex; align-items: center; gap: 11px; cursor: pointer;
  color: #566171; font-size: .9375rem; font-weight: 650; text-align: left; box-shadow: none;
}
.nav-item { transition: background .15s ease, color .15s ease; }
.nav-item:hover { background: #f5f8fa; }
.nav-item:active { background: #eef1f4; }
.nav-item.active { color: #038ddc; background: #eaf7ff; }
.nav-item.active::before { content: ''; position: absolute; left: -14px; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--blue); }
.nav-icon { width: 22px; font-size: 1.125rem; text-align: center; font-weight: 500; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.admin-nav { padding-top: 12px; border-top: 1px solid var(--line); }
.profile-mini { border-top: 1px solid var(--line); padding: 15px 9px 0; display: flex; align-items: center; gap: 9px; }
.profile-mini div { min-width: 0; display: grid; }
.profile-mini b { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-mini small { color: var(--muted); font-size: .8125rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e7f6ff; color: #068bda; display: grid; place-items: center; font-weight: 750; font-size: .8125rem; flex: none; }
.logout-button { margin-left: auto; border: 0; background: transparent; box-shadow: none; color: #98a1aa; cursor: pointer; font-size: 1.0625rem; padding: 4px; height: auto; }
.logout-button:hover { background: none; color: #e54843; }

.workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar {
  height: 78px; flex: 0 0 78px; padding: 0 24px; background: #fff;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px;
}
.back-button {
  width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #dce4ea; border-radius: 10px;
  background: #fff; color: #445463; display: grid; place-items: center; font-size: 1.35rem;
  line-height: 1; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.back-button:hover, .back-button:focus-visible { border-color: #8acff4; background: #f0f9ff; color: #078dd8; text-decoration: none; outline: none; }
.back-button.disabled { opacity: .35; cursor: default; pointer-events: none; }
.topbar .title-block { min-width: 220px; }
.topbar .title-block p { margin: 0 0 2px; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.topbar .title-block h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.03em; }
.topbar .who { color: var(--muted); font-size: .8125rem; }
.wrap { padding: 28px; width: 100%; }

/* page header row inside content (title now lives in topbar) */
.section-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.summary-badge { border-radius: 16px; padding: 7px 11px; background: #e8f7ff; color: #078edb; font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* search box (pill, matches CRM Питер) */
.search-box { display: flex; align-items: center; gap: 8px; height: 40px; min-width: 220px; padding: 0 12px; border: 1px solid var(--line); background: #f9fafb; border-radius: 10px; color: #9aa3ad; }
.search-box input { border: 0; outline: 0; background: transparent; height: auto; padding: 0; flex: 1; font-size: .9375rem; color: var(--ink); }
.search-box > button[aria-label="Найти"] { flex: 0 0 auto; background: none; box-shadow: none; color: inherit; padding: 0; height: auto; font-size: 1rem; line-height: 1; cursor: pointer; }
.topbar-search { margin-left: auto; width: min(320px, 26vw); }
.search-clear {
  width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center;
  border-radius: 50%; background: #e8edf1; color: #52616e; font-size: 1.15rem; line-height: 1;
}
.search-clear:hover { background: #dce5eb; color: #17202a; text-decoration: none; }

/* back navigation on detail pages */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .875rem; font-weight: 700; margin-bottom: 14px; }
.back-link:hover { color: var(--ink); text-decoration: none; }

/* candidate profile header (detail page, вид как в CRM Питер) */
.contact-header-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.contact-avatar { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #078edb; background: #e5f6ff; font-size: 1.0625rem; font-weight: 800; }
.contact-header-info { flex: 1; min-width: 180px; display: grid; gap: 6px; }
.contact-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.status-pill { display: inline-block; color: #068bd5; background: #e9f7ff; border-radius: 12px; padding: 5px 9px; font-size: .8125rem; font-weight: 800; }
.contact-header-stage { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.contact-header-stage select { min-width: 190px; }
.contact-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.contact-actions a, .contact-actions button, .contact-actions span { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: inline-flex; align-items: center; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.contact-actions a:hover, .contact-actions button:hover { text-decoration: none; border-color: #a7dfff; }
.contact-actions .call-action { color: #fff; background: var(--blue); border-color: var(--blue); }
.contact-actions .call-action:hover { background: #0096eb; }
.contact-actions .disabled { color: #b7bfc7; cursor: default; }

/* card */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 16px 18px; margin-bottom: 14px;
}
.centered { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(145deg, #f7fbfe, #eef3f7); }
.login { width: min(390px, 100%); padding: 34px; border-radius: 18px; box-shadow: 0 24px 70px rgba(23, 53, 72, .10); }
.login .login-logo { display: block; width: 140px; height: auto; margin: 0 0 20px; }
.login label { margin-bottom: 14px; }
.login button { width: 100%; margin-top: 6px; }
.error { color: var(--danger); font-size: .8125rem; font-weight: 700; background: #ffefee; border-radius: 8px; padding: 9px 11px; }

/* tabs */
.tabs { display: flex; gap: 4px; margin: 0; flex-wrap: wrap; background: #eef1f4; border-radius: 8px; padding: 3px; width: fit-content; }
.tab { padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: #7d8794; font-size: .8125rem; font-weight: 700; box-shadow: none; height: auto; transition: background .15s ease, color .15s ease; }
.tab:hover { background: #e4e8eb; }
.tab.on { background: #fff; color: #27303a; box-shadow: 0 1px 3px rgba(20, 27, 34, .09); }

/* board */
.board-toolbar {
  min-height: 58px; margin: -28px -28px 17px; padding: 9px 28px; border-bottom: 1px solid var(--line);
  background: #fbfcfd; flex-wrap: wrap;
}
.board { display: flex; gap: 11px; overflow-x: auto; padding: 0 0 20px; align-items: flex-start; }
.col { flex: 0 0 280px; background: transparent; border: 0; border-radius: 0; padding: 0; }
.col h3 { display: flex; align-items: center; gap: 7px; min-height: 42px; margin: 0; padding: 0 6px; font-size: 1rem; line-height: 1.2; }
.col h3::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--stage-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color) 12%, white); flex: none;
}
.quick-stats { color: var(--muted); font-size: .9375rem; }
.quick-stats b { color: #29323d; }
.col .count { color: #7f8996; background: #e9edf0; min-width: 23px; height: 23px; border-radius: 12px; display: inline-grid; place-items: center; font-weight: 400; font-size: .9375rem; margin-left: auto; }
.col-body {
  min-height: calc(100vh - 210px); border-top: 2px solid var(--stage-color); display: flex;
  flex-direction: column; gap: 6px; padding: 6px 0 0;
}
.kcard {
  background: #fff; border: 1px solid #c9ced3; border-radius: 4px; padding: 8px 9px;
  cursor: grab; box-shadow: 0 1px 1px rgba(27, 38, 48, .04); transition: .15s ease;
}
.kcard:hover { border-color: #5caee0; box-shadow: 0 0 0 1px #cde9fa; transform: none; }
.kcard:active { transform: none; box-shadow: 0 1px 1px rgba(27, 38, 48, .04); }
.missed-call { color: #e54843 !important; font-weight: 800; }
.answered-call { color: #1a9c6b !important; font-weight: 800; }
.kcard-head { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.kcard-name { min-width: 0; font-weight: 600; color: #1769ad; font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; }
.kcard-name:hover { text-decoration: underline; color: #008bd9; }
.kcard-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.kcard-flag { color: #e54843; font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.kcard-arrow { color: #97a2ac; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.kcard-phone { display: block; margin-top: 2px; color: #465463; font-size: 1rem; line-height: 1.3; }
.kcard-meta { display: flex; gap: 3px; flex-wrap: wrap; color: var(--muted); font-size: .8125rem; margin-top: 5px; }
.pill { display: inline-block; font-size: .8125rem; font-weight: 500; padding: 1px 4px; border: 1px solid #dce1e5; border-radius: 3px; background: #fff; color: #606d79; }
.pill.danger { background: #ffebe9; color: #ea4742; }
.call-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: .75rem; font-weight: 750; line-height: 1.35; }
.call-badge-answered, .call-badge-incoming { color: #117a52; background: #e5f7ef; border: 1px solid #bce9d3; }
.call-badge-missed { color: #c63834; background: #ffebe9; border: 1px solid #f4c8c5; }
.call-badge-outbound { color: #3f50a5; background: #eef0ff; border: 1px solid #d2d7fa; }

/* grid table */
.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.grid th, .grid td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #eef1f3; }
.grid th { background: #f8fafb; font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a949f; }
.grid tbody tr:hover { background: #fbfdfe; }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: .875rem; }

/* detail: карточка кандидата в три колонки, как деталь сделки в CRM Питер */
.detail3 { display: grid; grid-template-columns: 250px 1fr 300px; gap: 18px; align-items: start; }
.detail-left .card, .detail-right .card { margin-bottom: 14px; }
.fields { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.fields dt { color: #8a949f; font-size: .8125rem; }
.fields dd { margin: 0; font-weight: 650; }
.feed { list-style: none; padding: 0; margin: 8px 0; }
.feed li { padding: 10px 0; border-bottom: 1px solid #f0f2f4; display: flex; gap: 8px; flex-wrap: wrap; }
.feed-kind { font-size: .8125rem; color: var(--muted); text-transform: uppercase; font-weight: 700; }

.panel-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.panel-tabs button { padding: 0 0 10px; border: 0; background: transparent; box-shadow: none; height: auto; color: #8b95a0; font-size: .8125rem; font-weight: 750; cursor: pointer; border-radius: 0; }
.panel-tabs button:hover { background: transparent; color: #45525f; }
.panel-tabs button.active { color: #188bd0; border-bottom: 2px solid var(--blue); }
.tab-panel[hidden] { display: none; }

.comment-box { display: flex; gap: 8px; margin-bottom: 14px; }
.comment-box input { flex: 1; }

.next-step { background: #e9f7ff; border: 1px solid #bfe6fb; border-radius: 13px; padding: 12px 14px; margin-bottom: 12px; }
.next-step b { display: block; font-size: .9375rem; }
.next-step time { color: #078edb; font-size: .8125rem; font-weight: 700; }
.next-step.overdue { background: #fff2f1; border-color: #f7cfcc; }
.next-step.overdue time { color: var(--danger); }

@media (max-width: 900px) {
  .detail3 { grid-template-columns: 1fr; }
  .crm-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-basis: auto; height: auto; position: static; overflow-y: visible; }
}

/* --- всплывашка звонков (нижний левый угол, как в CRM Питер) --- */
#callbar {
  position: fixed; left: 20px; bottom: 20px; z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(360px, calc(100vw - 40px));
}
.calltoast {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; width: 100%;
  background: var(--panel); border: 1px solid var(--blue); border-radius: 14px; padding: 12px 40px 12px 14px;
  box-shadow: 0 16px 46px rgba(0, 108, 173, .28); animation: toastIn .25s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.calltoast-icon {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.125rem;
}
.calltoast.ringing .calltoast-icon { animation: ring 1s ease-in-out infinite; }
@keyframes ring {
  0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); }
}
.calltoast-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; }
.calltoast-link:hover { text-decoration: none; }
.calltoast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calltoast-body b { font-size: .9375rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calltoast-body small { color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calltoast-badge {
  align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: #ffebe9; color: #ea4742; font-size: .75rem; font-weight: 800;
}
.calltoast-x {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center;
  background: none; color: var(--muted); border: 0; border-radius: 50%; box-shadow: none;
  font-size: 18px; line-height: 1; padding: 0; height: 22px; cursor: pointer;
}
.calltoast-x:hover { background: #f0f2f4; color: var(--danger); }
.calltoast-act { flex: 0 0 100%; padding-left: 52px; }
.calltoast-act .btnlink {
  display: inline-block; background: var(--blue); color: #fff; border: 0; box-shadow: none;
  border-radius: 8px; padding: 6px 12px; font-size: .8125rem; font-weight: 750; cursor: pointer; text-decoration: none;
}
.calltoast-act .btnlink:hover { background: #0096eb; text-decoration: none; }
@media (max-width: 600px) { #callbar { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* --- звонок: статус и плеер записи --- */
.call-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.call-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.call-answered { color: #1a9c6b; }
.call-answered .call-dot { background: #4fab80; }
.call-missed { color: #e54843; }
.call-missed .call-dot { background: #d1857e; }
.recording-player { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 480px; margin-top: 7px; flex-wrap: wrap; }
.recording-player audio { display: none; }
.recording-player button {
  border: 0; border-radius: 8px; background: #e8f7ff; color: #078edb; box-shadow: none;
  padding: 0 10px; height: 30px; font-size: .8125rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.recording-player button:hover { background: #d9f1fd; }
.recording-seek { order: 3; display: inline-flex; align-items: center; gap: 7px; min-width: 180px; flex: 1 1 100%; }
.recording-seek input { min-width: 110px; width: 100%; height: 20px; margin: 0; accent-color: #078edb; cursor: pointer; }
.recording-seek input:disabled { cursor: wait; opacity: .55; }
.recording-time { min-width: 72px; color: #667481; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.speed-switch button { border: 0; border-radius: 0; background: #fff; color: #667481; box-shadow: none; padding: 0 8px; height: 30px; font-size: .75rem; font-weight: 800; }
.speed-switch button + button { border-left: 1px solid var(--line); }
.speed-switch button.active { background: #078edb; color: #fff; }
.call-transcript { display: block; margin-top: 6px; }
.call-transcript button { border: 0; border-radius: 8px; background: #f0f3f5; color: #586372; padding: 7px 10px; font-size: .8125rem; font-weight: 800; cursor: pointer; }
.call-transcript button:hover { background: #e7ebee; }
.call-transcript button:disabled { cursor: default; opacity: .7; }
.transcript-note { margin: 6px 0 0; padding: 8px 10px; background: #f5f8fa; border-radius: 8px; color: #45525f; font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript-error { background: #fdeeee; color: #b3372c; }
.call-history { list-style: none; margin: 8px 0; padding: 0; }
.call-history li { padding: 10px 0; border-bottom: 1px solid #f0f2f4; }
.call-history li:last-child { border-bottom: 0; }
.call-history-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; }

/* --- модальные окна (как в CRM Питер) --- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1100; background: rgba(17, 27, 36, .35);
  backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  width: min(450px, 100%); background: #fff; border-radius: 16px; padding: 25px;
  box-shadow: 0 24px 80px rgba(17, 27, 36, .2); position: relative; animation: toastIn .18s ease-out;
}
.modal-close {
  position: absolute; right: 16px; top: 14px; border: 0; background: transparent; box-shadow: none;
  font-size: 1.5rem; line-height: 1; color: #8c96a2; cursor: pointer; padding: 2px 6px; height: auto;
}
.modal-close:hover { background: none; color: var(--ink); }
.modal-box .eyebrow { color: #078edb; font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; }
.modal-box h2 { margin: 0; font-size: 1.375rem; letter-spacing: -.03em; }
.modal-copy { margin: 5px 0 18px; color: var(--muted); font-size: .8125rem; }
.modal-box label { margin: 12px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* --- широкая карточка кандидата справа, как рабочая панель CRM СПБ --- */
.candidate-panel-layer { position: fixed; inset: 0; z-index: 1050; pointer-events: none; }
.candidate-panel-scrim {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: rgba(23, 32, 42, .14); box-shadow: none; pointer-events: auto; cursor: default;
}
.candidate-panel-scrim:hover { background: rgba(23, 32, 42, .14); }
.candidate-panel {
  position: absolute; inset: 0 0 0 auto; width: min(1120px, calc(100vw - 260px)); min-width: 760px;
  background: var(--surface); border-left: 1px solid #dfe5e9; box-shadow: -16px 0 45px rgba(31, 52, 68, .16);
  pointer-events: auto; animation: candidatePanelIn .2s ease-out;
}
@keyframes candidatePanelIn { from { opacity: .6; transform: translateX(32px); } }
.candidate-panel-close {
  position: absolute; z-index: 3; top: 18px; right: 18px; width: 38px; height: 38px; padding: 0;
  border: 1px solid #dfe5e9; border-radius: 9px; background: #fff; color: #7c8792; box-shadow: none;
  font-size: 1.45rem; line-height: 1; cursor: pointer;
}
.candidate-panel-close:hover { border-color: #8acff4; background: #f0f9ff; color: #078dd8; }
.candidate-panel-scroll { height: 100vh; overflow-y: auto; padding: 18px; }
.candidate-panel .contact-header { margin: 0 54px 14px 0; }
.candidate-panel .detail3 { min-height: calc(100vh - 205px); grid-template-columns: minmax(230px, 270px) minmax(360px, 1fr) minmax(230px, 280px); gap: 1px; align-items: stretch; background: #dfe5e9; border: 1px solid #dfe5e9; border-radius: 13px; overflow: hidden; }
.candidate-panel .detail3 > * { min-width: 0; }
.candidate-panel .detail-left, .candidate-panel .detail-center, .candidate-panel .detail-right { background: #fff; padding: 16px; }
.candidate-panel .detail-center { margin: 0; border: 0; border-radius: 0; background: #fbfcfd; }
.candidate-panel .detail-left .card, .candidate-panel .detail-right .card { margin-bottom: 12px; padding: 0; border: 0; border-radius: 0; }
.candidate-panel .detail-left .card + .card, .candidate-panel .detail-right .card + .card { padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 1050px) {
  .candidate-panel { width: calc(100vw - 68px); min-width: 0; }
  .candidate-panel .detail3 { grid-template-columns: 230px minmax(320px, 1fr); }
  .candidate-panel .detail-right { grid-column: 1 / -1; border-top: 1px solid #dfe5e9; }
}
@media (max-width: 760px) {
  .candidate-panel { width: 100vw; }
  .candidate-panel-scroll { padding: 10px; }
  .candidate-panel .contact-header { margin-right: 48px; }
  .candidate-panel .detail3 { grid-template-columns: 1fr; }
  .candidate-panel .detail-right { grid-column: auto; }
}

/* Панель кандидата: композиция рабочего пространства по образцу CRM СПБ. */
.candidate-panel { width: min(1520px, calc(100vw - 68px)); background: #fff; }
.candidate-panel-scroll { padding: 0; overflow: hidden; }
.candidate-panel-close { top: 12px; right: 12px; }
.candidate-workspace-header {
  min-height: 70px; display: flex; align-items: center; gap: 14px; padding: 9px 66px 9px 12px;
  border-bottom: 1px solid #dfe5e9; background: #fff;
}
.candidate-identity { min-width: 300px; display: flex; align-items: center; gap: 10px; }
.candidate-identity .contact-avatar { width: 42px; height: 42px; border-radius: 12px; }
.candidate-identity > div { min-width: 0; }
.candidate-identity h2 { margin: 0 0 2px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-identity a, .candidate-identity > div > span, .candidate-phone-link { color: #06945d; font-size: 1rem; text-decoration: none; }
.candidate-phone-link { height: auto; padding: 0; border: 0; background: none; font-weight: inherit; }
.candidate-phone-link:hover { text-decoration: underline; }
.candidate-stage-control { margin-left: auto; }
.candidate-stage-control select {
  width: 270px; height: 38px; border: 0; border-radius: 19px; padding: 0 34px 0 14px;
  background: #eaf7ff; color: #078bd3; font-size: .875rem; font-weight: 800; outline: none;
}
.candidate-header-actions { display: flex; align-items: center; gap: 7px; }
.candidate-action {
  height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d9e1e7;
  border-radius: 9px; background: #fff; color: #273746; font-size: .875rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.candidate-action:hover { border-color: #8acff4; background: #f0f9ff; color: #078dd8; text-decoration: none; }
.candidate-action.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.candidate-action.primary:hover { background: #0096eb; }
.candidate-action.is-disabled { color: #64717e; cursor: default; }

.candidate-workspace-grid {
  height: calc(100vh - 70px); display: grid; grid-template-columns: 282px minmax(470px, 1fr) 270px;
  gap: 1px; overflow: hidden; background: #dfe5e9;
}
.candidate-data-column, .candidate-history-column, .candidate-next-column { min-width: 0; overflow-y: auto; background: #fff; }
.candidate-data-column { padding: 18px 10px 22px; }
.candidate-history-column { padding: 18px; display: flex; flex-direction: column; overflow: hidden; background: #fbfcfd; container-type: inline-size; }
.candidate-next-column { padding: 18px; }
.candidate-column-heading { min-height: 34px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.candidate-column-heading h3, .candidate-history-heading h3 { margin: 0; font-size: 1rem; }
.candidate-edit-button {
  height: 34px; padding: 0 10px; border: 1px solid #b9daef; border-radius: 8px; background: #f4fbff;
  color: #078bd3; box-shadow: none; font-size: .8125rem; font-weight: 800;
}
.candidate-edit-button:hover { background: #eaf7ff; }
.candidate-field-stack { display: grid; gap: 9px; }
.candidate-field-stack label, .candidate-custom-fields label { display: grid; gap: 5px; color: #788592; font-size: .75rem; font-weight: 700; }
.candidate-field-stack label b, .candidate-custom-fields label b {
  min-height: 38px; display: flex; align-items: center; padding: 8px 11px; border-radius: 7px;
  background: #f1f4f6; color: #273746; font-size: .8125rem; font-weight: 650; overflow-wrap: anywhere;
}
.candidate-field-divider { display: flex; align-items: center; gap: 10px; margin: 15px 0 9px; color: #75828e; font-size: .75rem; font-weight: 800; }
.candidate-field-divider::after { content: ''; height: 1px; flex: 1; background: #dfe5e9; }
.candidate-accent-field { padding: 10px; border: 1px solid #d1e3d9; border-radius: 8px; background: #f5faf7; }
.candidate-accent-field > span { display: block; margin-bottom: 7px; color: #65736b; font-size: .8125rem; font-weight: 800; }
.candidate-accent-field b { height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 0 11px; border: 1px solid #abd3bc; border-radius: 7px; background: #fff; color: #3e7055; }
.candidate-accent-field small { font-size: .8125rem; font-weight: 600; }
.candidate-custom-fields { margin-top: 10px; padding: 10px; border: 1px solid #ccdeea; border-radius: 8px; display: grid; gap: 9px; }
.candidate-custom-fields h3 { margin: 0 0 1px; font-size: 1rem; font-weight: 500; }
.candidate-compact-row { margin-top: 10px; min-height: 52px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #d6e2ea; border-radius: 8px; background: #f8fbfd; }
.candidate-compact-row span { color: #7a8793; font-size: .8125rem; }
.candidate-compact-row b { padding: 7px 10px; border: 1px solid #c9d8e2; border-radius: 7px; background: #fff; font-size: .8125rem; }
.candidate-meta-list { margin: 11px 0; padding: 10px 0; border-top: 1px solid #e4e8eb; border-bottom: 1px solid #e4e8eb; display: grid; gap: 10px; }
.candidate-meta-list div { display: grid; grid-template-columns: 105px 1fr; gap: 8px; }
.candidate-meta-list dt { color: #84909b; font-size: .8125rem; }
.candidate-meta-list dd { margin: 0; color: #263746; font-size: .8125rem; font-weight: 750; overflow-wrap: anywhere; }
.candidate-summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 11px; border: 1px solid #bcdcf0; border-radius: 8px; background: #eff8fe; }
.candidate-summary-card div { display: grid; gap: 3px; }
.candidate-summary-card span { color: #70808d; font-size: .75rem; }
.candidate-summary-card b { font-size: 1rem; }

.candidate-history-heading p { margin: 5px 0 0; color: #7a8793; font-size: .8125rem; }
.candidate-history-tabs { margin: 12px 0 14px; gap: 28px; }
.candidate-history-tabs button { padding-bottom: 11px; font-size: 1rem; }
.candidate-history-panel { min-height: 0; flex: 1; overflow-y: auto; }
.candidate-history-panel#candidate-tab-all:not([hidden]) { display: flex; flex-direction: column; }
.candidate-channels { margin-bottom: 12px; padding: 10px; border: 1px solid #d7e1e8; border-radius: 11px; background: #fff; }
.candidate-channels-label { display: block; margin-bottom: 8px; color: #77838f; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.candidate-channel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.candidate-channel {
  --channel: #6d7b88; position: relative; min-height: 106px; overflow: hidden; padding: 13px 9px 9px;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 7px 5px;
  border: 1px solid #d5dfe7; border-radius: 8px; background: #fff; color: #17212b; text-decoration: none;
}
.candidate-channel::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--channel); }
.candidate-channel i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--channel); color: #fff; font-size: .7rem; font-style: normal; font-weight: 900; }
.candidate-channel b { align-self: center; font-size: .875rem; }
.candidate-channel small { grid-column: 2; color: #64717e; font-size: .75rem; overflow-wrap: anywhere; }
.candidate-channel:hover { border-color: var(--channel); background: color-mix(in srgb, var(--channel) 4%, white); text-decoration: none; }
.candidate-channel.email { --channel: #7768e8; }
.candidate-channel.sms, .candidate-event.sms-event { --channel: #149ae7; }
.candidate-channel.max, .candidate-event.max-event { --channel: #5d63ec; }
.candidate-channel.telegram, .candidate-event.telegram-event { --channel: #2babe2; }
.candidate-channel.whatsapp, .candidate-event.whatsapp-event { --channel: #17a55b; }
.candidate-timeline { min-height: 0; flex: 1; align-content: start; display: grid; gap: 10px; padding-bottom: 12px; overflow-y: auto; }
.candidate-event { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px; border: 1px solid #d9e1e7; border-radius: 12px; background: #fff; }
.candidate-event-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #eef3f6; color: #71818d; font-weight: 850; }
.candidate-event[data-history-kind="chat"] .candidate-event-icon,
.candidate-event[data-history-kind="avito_event"] .candidate-event-icon { background: var(--channel, #71818d); color: #fff; }
.candidate-event.call-event .candidate-event-icon { background: var(--channel); color: #fff; }
.candidate-event b { font-size: .9375rem; }
.candidate-event p { margin: 5px 0 0; color: #485867; font-size: .9375rem; line-height: 1.45; }
.candidate-event time { color: #71808d; font-size: .75rem; white-space: nowrap; }
.candidate-empty-history { padding: 42px 20px; border: 1px dashed #d8e0e6; border-radius: 10px; color: #89949e; text-align: center; }
.candidate-comment-box { position: relative; z-index: 2; display: flex; gap: 8px; padding: 11px; border: 1px solid #d9e1e7; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(41, 59, 72, .06); }
.candidate-comment-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; }
.candidate-comment-box button { height: 36px; }

.candidate-add-task { position: relative; }
.candidate-add-task summary { width: 34px; height: 34px; display: grid; place-items: center; list-style: none; border: 1px solid #b8d8ed; border-radius: 8px; background: #f4fbff; color: #078bd3; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.candidate-add-task summary::-webkit-details-marker { display: none; }
.candidate-add-task form { position: absolute; z-index: 3; top: 42px; right: 0; width: 250px; padding: 11px; display: grid; gap: 8px; border: 1px solid #d5dfe7; border-radius: 9px; background: #fff; box-shadow: 0 12px 34px rgba(37, 57, 72, .16); }
.candidate-add-task input { width: 100%; }
.candidate-next-task { padding: 13px; border: 1px solid #b9d9ed; border-left: 3px solid #00a2ff; border-radius: 8px; background: #f0f8fd; display: grid; gap: 8px; }
.candidate-next-task.overdue { border-color: #efb9b6; border-left-color: #ef4d47; background: #fff5f4; }
.candidate-next-task time { color: #078bd3; font-size: .8125rem; }
.candidate-next-task b { font-size: .9375rem; }
.candidate-next-task span { width: fit-content; padding: 6px 9px; border: 1px solid #bed8e9; border-radius: 6px; background: #fff; color: #415464; font-size: .8125rem; }
.candidate-no-task { color: #7d8993; font-size: .875rem; }
.candidate-completed { margin-top: 20px; }
.candidate-completed h4 { margin: 0 0 10px; color: #76838e; font-size: .8125rem; font-weight: 700; }
.candidate-completed > div { min-height: 56px; padding: 10px 0; display: flex; gap: 10px; border-bottom: 1px solid #e8ecef; }
.candidate-completed i { color: #16a36a; font-style: normal; font-weight: 900; }
.candidate-completed span { display: grid; gap: 3px; }
.candidate-completed b { font-size: .8125rem; }
.candidate-completed small, .candidate-completed p { color: #83909b; font-size: .75rem; }

@media (max-width: 1180px) {
  .candidate-panel { width: calc(100vw - 68px); }
  .candidate-workspace-grid { grid-template-columns: 250px minmax(430px, 1fr) 240px; }
  .candidate-identity { min-width: 240px; }
  .candidate-stage-control select { width: 210px; }
}
@media (max-width: 900px) {
  .candidate-panel { width: 100vw; }
  .candidate-workspace-header { flex-wrap: wrap; padding-right: 58px; }
  .candidate-stage-control { margin-left: 0; }
  .candidate-workspace-grid { height: calc(100vh - 112px); grid-template-columns: 240px minmax(430px, 1fr); overflow-x: auto; }
  .candidate-next-column { display: none; }
}

/* --- переписка Авито в карточке --- */
.avito-chat .avito-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding: 6px 0; }
.avito-thread { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8ed; }
.avito-thread:first-of-type { margin-top: 6px; }
.avito-thread-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.amsg { max-width: 80%; padding: 7px 10px; border-radius: 10px; font-size: .8125rem; }
.amsg.in { align-self: flex-start; background: #eef2f5; }
.amsg.out { align-self: flex-end; background: var(--blue); color: #fff; }
.amsg.out .amsg-time { color: rgba(255,255,255,.75); }
.amsg-time { font-size: .8125rem; margin-top: 2px; }
.avito-reply { display: flex; gap: 8px; margin-top: 8px; }
.avito-reply textarea { flex: 1; resize: vertical; }

/* --- подключение MAX --- */
.max-setup { max-width: 720px; display: grid; gap: 14px; }
.max-setup h2, .max-setup p { margin: 0; }
.max-setup .integration-status { width: fit-content; padding: 8px 12px; border-radius: 999px; background: #eef3ff; color: #4f57c7; font-weight: 800; }
.max-setup [data-max-account] { padding: 12px; border: 1px solid #d9e1e7; border-radius: 9px; background: #f8fafb; font-weight: 750; }
.max-setup [data-max-qr] { text-align: center; }
.max-setup [data-max-qr] img { display: block; margin: 0 auto 10px; border-radius: 10px; background: #fff; }
.max-setup [data-max-password] { max-width: 420px; display: grid; gap: 10px; }
.max-setup .integration-error { padding: 10px 12px; border-radius: 8px; background: #fff0ef; color: #b92e28; }

/* --- Telegram Web --- */
.telegram-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.telegram-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.telegram-account-head h3 { margin-bottom: 2px; }
.telegram-qr { display: block; width: min(280px, 100%); aspect-ratio: 1; margin: 16px auto; image-rendering: pixelated; }
.telegram-chat .telegram-msgs { display: flex; flex-direction: column; gap: 7px; max-height: 390px; overflow-y: auto; padding: 6px 0; }
.tmsg { max-width: 82%; padding: 8px 11px; border-radius: 11px; font-size: .8125rem; }
.tmsg.in { align-self: flex-start; background: #eef2f5; }
.tmsg.out { align-self: flex-end; background: var(--blue); color: #fff; }
.tmsg-time { font-size: .75rem; opacity: .72; margin-top: 4px; }
.tmsg.out .recording-player button { background: rgba(255,255,255,.92); }
.telegram-file { display: inline-block; margin-top: 5px; color: inherit; text-decoration: underline; }
.telegram-reply { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 10px; }
.telegram-reply textarea { resize: vertical; min-height: 58px; }
.telegram-attach { grid-column: 1; font-size: .75rem; }
.telegram-attach input { height: auto; padding: 6px; }
@media (max-width: 640px) { .telegram-reply { grid-template-columns: 1fr; } .telegram-reply button { width: 100%; } }

/* Общая история контактов кандидата */
.communication-filters { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.communication-filters button { box-shadow: none; background: none; border: 0; border-radius: 0; padding: 10px 0; color: var(--muted); border-bottom: 2px solid transparent; }
.communication-filters button.active { color: var(--accent); border-bottom-color: var(--accent); }
.communication-history .candidate-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 680px) {
  .communication-history .candidate-channel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .communication-history .candidate-channel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; justify-items: center; gap: 6px; padding: 10px 6px; }
  .communication-history .candidate-channel small { grid-column: 1; }
}
.candidate-channel.avito, .candidate-event.avito-event { --channel: #79b51c; }
.candidate-channel.call, .candidate-event.call-event { --channel: #009bea; }
.candidate-channel:disabled { opacity: 1; cursor: default; }
.candidate-channel:disabled b, .candidate-channel:disabled small { color: #87929d; }
.candidate-channel:disabled:hover { border-color: #d5dfe7; background: #fff; }
.communication-timeline .candidate-event p { white-space: pre-wrap; overflow-wrap: anywhere; }
.communication-timeline [hidden] { display: none; }
.communication-dialog { width: min(760px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; }
.candidate-history-column > .communication-history { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.candidate-history-column .communication-timeline { flex: 1; min-height: 0; overflow-y: auto; }

/* Ответ на обращение Авито: открытие карточки не снимает внимание. */
.kcard.avito-pending { background: #fff1f0; border-color: #ef7771; border-left: 4px solid #dc3932; }
.kcard.avito-working { background: #eefaf3; border-color: #76c79b; border-left: 4px solid #19965a; }
.avito-reply-badge { margin-top: 7px; font-size: .8125rem; font-weight: 750; }
.avito-pending .avito-reply-badge { color: #bd2923; }
.avito-working .avito-reply-badge { color: #157743; }

/* Задачи рядом с вкладками воронок. */
.board-task-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.board-task-tab { min-height: 36px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #bcdff5; border-radius: 8px; background: #eff8ff; color: #087fc4; font-size: .875rem; font-weight: 750; white-space: nowrap; }
.board-task-tab b { min-width: 24px; padding: 2px 7px; border-radius: 12px; background: #d7edfc; text-align: center; }
.board-task-tab:hover, .board-task-tab.on { background: #daf0ff; border-color: #078edb; text-decoration: none; }
.board-task-tab.overdue { color: #c43832; border-color: #f0c6c3; background: #fff3f2; }
.board-task-tab.overdue b { background: #fbdcda; }
.board-task-tab.overdue:hover, .board-task-tab.overdue.on { background: #ffe3e0; border-color: #da4941; }
.board-task-list { max-width: 1100px; }
.board-task-list h2 { margin: 0 0 8px; font-size: 1.25rem; }
.board-task-list h2 span { margin-left: 6px; color: var(--muted); }
.board-task-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 10px 0; padding: 15px 18px; border: 1px solid var(--line); border-left: 4px solid #159be6; border-radius: 9px; background: #fff; }
.board-task-row > div { display: grid; gap: 5px; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.board-task-row time { color: #536575; font-size: .875rem; white-space: nowrap; }
.board-task-row.is-overdue { border-left-color: #da4941; }
.board-task-late { color: #c43832; font-size: .8125rem; font-weight: 750; }
.board-task-empty { padding: 36px 20px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.board-toolbar { justify-content: flex-start; }
.board-toolbar .quick-stats { margin-left: auto; }

.kcard-contact-date { display: flex; flex-wrap: wrap; gap: 2px 5px; margin-top: 6px; color: #536575; font-size: .6875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kcard-contact-date span { color: #71808d; }
.kcard-contact-date time { white-space: nowrap; }

.avito-summary { margin: 12px; padding: 12px 16px; border-left: 4px solid #2798de; background: #edf7ff; border-radius: 8px; }
.avito-summary.application { border-color: #ba7a09; background: #fff6df; }
.avito-summary.phone_view { border-color: #8595a6; background: #f1f4f7; }
.avito-summary p { margin: 5px 0; }
.kcard.avito-interest { background: #f1f4f7; border-color: #bcc6d0; border-left: 4px solid #8595a6; }

.kcard.avito-pending.avito-application { background: #fff6df; border-color: #dcb970; border-left-color: #ba7a09; }
.kcard.avito-pending.avito-application .avito-reply-badge { color: #885b08; }

.candidate-event.call-incoming .candidate-event-icon { background: var(--channel); color: #fff; }
.candidate-event.call-incoming.call-missed .candidate-event-icon { background: #fff0ee; color: #d32f2f; }
.candidate-event.call-incoming.call-connected .candidate-event-icon { background: #e9f7f0; color: #168b60; }

/* Пропущенный звонок требует внимания даже после ответа в Авито. */
.kcard.call-needs-attention,
.kcard.avito-pending.call-needs-attention {
  background: #fff1f0;
  border-color: #ef7771;
  border-left: 4px solid #dc3932;
}

.candidate-edit-modal { max-height: 88vh; overflow-y: auto; }
.candidate-edit-modal form { display: grid; gap: 12px; }
.form-error { color: #b42318; background: #fff0ee; padding: 10px; border-radius: 8px; }
.task-complete-button { margin-top: 8px; background: #168b60; color: white; }
.task-history-tabs { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0; }
.task-history-tabs [aria-current] { font-weight: 750; border-bottom: 2px solid currentColor; }
.task-history-row { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 16px 0; }
.task-history-row p { margin: 6px 0; }
.candidate-next-task form { margin-top: 4px; }

/* Одна карточка для отдельной вкладки и панели на доске. */
.candidate-stage-control { display: flex; align-items: center; gap: 8px; }
.candidate-stage-submit { white-space: nowrap; }
.candidate-page-workspace { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.candidate-page-workspace .candidate-workspace-header { padding: 12px; flex-wrap: wrap; }
.candidate-page-workspace .candidate-workspace-grid { height: calc(100dvh - 220px); min-height: 500px; overflow-x: auto; grid-template-columns: 250px minmax(430px, 1fr) 260px; }
@media (max-width: 1000px) {
  .candidate-stage-control { margin-left: 0; }
  .candidate-page-workspace .candidate-workspace-grid { grid-template-columns: 230px minmax(400px, 1fr) 250px; }
}
.workspace-update-notice { margin: 0; padding: 10px 14px; color: #795b13; background: #fff6dc; border-bottom: 1px solid #ead495; font-size: .8125rem; }
.workspace-update-notice[hidden] { display: none; }

/* Единая доска задач по срокам. */
.tasks-kanban { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 18px; overflow-x: auto; padding: 10px 0 18px; }
.tasks-lane { min-width: 0; background: #f5f6f8; border-radius: 8px; padding: 12px; }
.tasks-lane > header { border-bottom: 3px solid #cbd0d7; text-align: center; padding: 4px 0 14px; margin-bottom: 12px; }
.tasks-lane > header h2 { font-size: .84rem; text-transform: uppercase; letter-spacing: .035em; margin: 0 0 7px; }
.tasks-lane > header span { color: #707984; font-size: 1rem; }
.tasks-lane-overdue > header { border-color: #d76767; }
.tasks-lane-today > header { border-color: #66bd9b; }
.tasks-lane-tomorrow > header { border-color: #81a7cf; }
.tasks-lane-cards { display: grid; gap: 10px; align-content: start; }
.tasks-kanban-card { display: grid; gap: 8px; padding: 13px; border: 1px solid #d0d5dc; border-radius: 7px; background: #fff; overflow-wrap: anywhere; }
.tasks-kanban-card b { font-size: .9rem; line-height: 1.45; }
.tasks-kanban-card time, .tasks-kanban-card small { font-size: .78rem; color: #73808e; line-height: 1.45; }
.tasks-candidate { color: #1676bd; font-weight: 650; }
.tasks-lane-overdue .tasks-kanban-card time { color: #b34646; }
.tasks-lane-empty { color: #808996; padding: 15px 0; text-align: center; font-size: .85rem; }
.tasks-lane-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .8rem; margin-top: 15px; }
.tasks-lane-cards { max-height: calc(100vh - 455px); min-height: 220px; overflow-y: auto; scrollbar-width: thin; }

/* Заметки видны отдельно от переписки; последние две — сразу справа. */
.candidate-comments { margin-bottom: 20px; padding: 14px; border: 1px solid #d6e4ed; border-radius: 12px; background: #f6faff; }
.candidate-comments > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.candidate-comments h3 { margin: 0; font-size: 1rem; }
.candidate-comments h3 span { color: var(--muted); font-size: .8rem; font-weight: 500; }
.candidate-comment-form { display: grid; gap: 8px; margin-bottom: 12px; }
.candidate-comment-form textarea { width: 100%; min-height: 68px; resize: vertical; font-weight: 400; }
.candidate-comment-form > button { justify-self: start; height: 32px; font-size: .8125rem; box-shadow: none; }
.candidate-comment { padding: 10px 0; border-top: 1px solid #dce6ee; overflow-wrap: anywhere; }
.candidate-comment p { margin: 0 0 8px; white-space: pre-wrap; }
.candidate-comment footer { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: .75rem; }
.candidate-comment footer b { font-weight: 600; }
.candidate-comments-tab { flex: 1; min-height: 0; overflow-y: auto; }
.candidate-comments-tab[hidden], .communication-history > [hidden] { display: none; }
.candidate-history-tabs { flex-wrap: wrap; gap: 8px 18px; }
.candidate-history-tabs button { font-size: .875rem; white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1180px) {
  .candidate-workspace-grid, .candidate-page-workspace .candidate-workspace-grid { grid-template-columns: 190px minmax(0, 1fr) 240px; overflow-x: hidden; }
  .candidate-next-column { display: block; padding: 12px; }
  .candidate-history-column { padding: 12px; }
}
@media (max-width: 760px) {
  .candidate-workspace-grid, .candidate-page-workspace .candidate-workspace-grid { display: flex; flex-direction: column; overflow-y: auto; }
  .candidate-data-column, .candidate-history-column, .candidate-next-column { flex-shrink: 0; overflow: visible; }
  .candidate-next-column { display: block; order: -1; }
  .candidate-history-column { min-height: 600px; }
  .candidate-history-column > .communication-history { min-height: 560px; }
}

/* Источник обращения — рядом с именем, независимо от этапа. */
.candidate-source-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 6px; padding: 5px 9px; border: 1px solid #d6c8ed; border-radius: 7px; color: #67439d; background: #f2edfb; font-size: .75rem; font-weight: 750; overflow-wrap: anywhere; }
.candidate-source-badge.unknown { color: #81611c; background: #fff7e4; border-color: #ecd8a9; }
.candidate-source-picker { position: relative; }
.candidate-source-picker > summary { cursor: pointer; list-style: none; }
.candidate-source-picker > summary::-webkit-details-marker { display: none; }
.candidate-source-form { position: absolute; top: calc(100% + 5px); left: 0; z-index: 25; width: 280px; max-width: calc(100vw - 90px); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px #17202a26; }
.candidate-source-form small { color: var(--muted); }
.candidate-source-form button { justify-self: start; height: 32px; font-size: .8125rem; }
.candidate-panel-scroll { display: flex; flex-direction: column; }
.candidate-panel-scroll > .candidate-workspace-header { flex-shrink: 0; }
.candidate-panel-scroll > .candidate-workspace-grid { flex: 1; height: auto; min-height: 0; }
.candidate-source-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.candidate-source-filter select { max-width: 100%; }
.source-analytics-note { margin: 12px 0; color: var(--muted); }

.candidate-profile-comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.candidate-multi-picker { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
.candidate-multi-picker > summary { cursor: pointer; color: #596573; font-weight: 750; }
.candidate-picker-options { max-height: 240px; overflow-y: auto; display: grid; gap: 8px; padding: 12px 0 4px; }
.candidate-picker-options label { flex-direction: row; align-items: center; font-weight: 400; overflow-wrap: anywhere; }
.candidate-picker-options input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; }
.tag-catalog-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }

.funnel-rename { margin: 6px; font-size: .8rem; }
.funnel-rename summary { cursor: pointer; color: var(--muted, #64748b); }
.funnel-rename form { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.funnel-rename input { min-width: 0; flex: 1; }

/* Отметка человека видна в любой воронке и при повторном обращении. */
.blacklist-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: #20252d; color: #fff; font-size: .75rem; font-weight: 800; line-height: 1.4; white-space: normal; }
.blacklist-card-reason { display: block; margin: 7px 0; color: var(--ink); font-size: .8rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.blacklist-banner { border: 1px solid #a6adb7; border-left: 5px solid #20252d; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: var(--panel); }
.blacklist-reason { font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 6px; }
.blacklist-guidance, .blacklist-banner small { color: var(--muted); font-size: .8rem; }
.blacklist-banner form { margin-top: 10px; }
.blacklist-banner textarea { display: block; width: 100%; margin: 6px 0; }
.calltoast-blacklist { animation: none; border: 2px solid #20252d; box-shadow: 0 8px 28px rgba(25, 30, 40, .2); }
.calltoast-blacklist .calltoast-icon { background: #20252d; color: #fff; animation: none; }
.calltoast-blacklist .blacklist-label { align-self: flex-start; margin: 5px 0; }
.blacklist-toast-reason { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; font-weight: 600; }
.blacklist-toast-guidance { font-size: .75rem; color: var(--muted); }
.blacklist-dialog { width: min(480px, calc(100vw - 32px)); border: 1px solid #a6adb7; border-radius: 14px; padding: 24px; color: var(--ink); background: var(--panel); }
.blacklist-dialog::backdrop { background: rgba(20, 26, 34, .45); }
.blacklist-dialog textarea { display: block; margin: 8px 0; width: 100%; }
.blacklist-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.blacklist-dialog-error { color: var(--danger); }

.archive-tabs { margin: 12px 0; }
.archive-tabs summary { cursor: pointer; font-weight: 700; }
.archive-tabs nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.board-archive-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.board-archive-toolbar small { flex-basis: 100%; color: var(--muted); }
.bulk-check, .bulk-card-check { flex-direction: row; align-items: center; gap: 8px; }
.bulk-check input, .bulk-card-check input, .stage-select { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
.bulk-card-check { margin-bottom: 6px; font-size: .75rem; }
.kcard:has([data-card-select]:checked) { outline: 2px solid var(--blue); outline-offset: 1px; }
.candidate-archive-notice { background: #edf6ff; padding: 12px 16px; border-radius: 9px; margin-bottom: 12px; }
.candidate-archive-notice p { margin: 5px 0 0; }
.candidate-archive-search { display: block; margin-top: 4px; color: var(--muted); }
.candidate-tag-filter { margin: 10px 0; width: min(300px, 100%); }

.message-send-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 1200;
  max-width: calc(100vw - 48px); padding: 14px 18px; border-radius: 10px;
  border: 1px solid #a8d9bb; background: #eefaf3; color: #205b37;
  box-shadow: 0 8px 28px rgba(25, 60, 40, .15); font-weight: 600;
  pointer-events: none;
}

/* Assigned candidate tags remain visible on every board card. */
.kcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.kcard-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; color: #77838c; }

.inline-profile-hint { margin: -4px 0 12px; font-size: .75rem; color: var(--muted); }
.inline-profile-field { margin: 0 0 2px; }
.inline-profile-label { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.candidate-custom-fields .inline-profile-field input:not([type=checkbox]), .candidate-custom-fields .inline-profile-field textarea { width: 100%; background: #f2f4f7; border: 1px solid transparent; color: #273746; font-weight: 600; }
.candidate-custom-fields .inline-profile-field input:focus, .candidate-custom-fields .inline-profile-field textarea:focus { border-color: #75b9e3; background: #fff; }
.inline-profile-picker { background: #f2f4f7; border-color: transparent; }
.inline-profile-picker > summary { display: flex; justify-content: space-between; gap: 8px; list-style: none; color: #273746; overflow-wrap: anywhere; }
.inline-profile-picker > summary::-webkit-details-marker { display: none; }
.inline-profile-status { display: block; min-height: 1em; margin-top: 3px; color: #168452; font-size: .6875rem; }
.inline-profile-status.error { color: #c63834; }

.candidate-custom-fields .inline-profile-picker .candidate-picker-options label { display: flex; gap: 8px; font-size: .8125rem; }

/* Keep every card selectable while deferring the layout of off-screen contents. */
@supports (content-visibility: auto) {
  .board .kcard { content-visibility: auto; contain-intrinsic-size: auto 150px; }
}
@media print {
  .board .kcard { content-visibility: visible; }
}

/* Короткий обязательный итог рядом с комментариями и задачами. */
.contact-result-card { padding: 16px; border: 1px solid var(--border, #dce4ed); border-radius: 14px; background: #fff; margin-bottom: 18px; scroll-margin-top: 20px; }
.contact-result-card.is-pending { border-color: #edbc67; background: #fffcf5; }
.contact-result-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.contact-result-card h3 { margin: 0; }
.contact-result-card .muted { font-size: 12px; line-height: 1.5; }
.contact-result-badge { display: inline-block; padding: 4px 8px; border-radius: 7px; background: #fff0ce; color: #815100; font-size: 11px; font-weight: 600; }
.candidate-contact-result-form { display: grid; gap: 10px; }
.candidate-contact-result-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.candidate-contact-result-form input, .candidate-contact-result-form select, .candidate-contact-result-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.contact-result-stage summary { font-size: 12px; cursor: pointer; color: #087ec0; margin-bottom: 8px; }
.contact-result-filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.contact-result-filters input[type=checkbox] { width: auto; }
.contact-result-filters label { display: block; }
.contact-result-content > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; }
.contact-result-content > summary h3 { font-size: 14px; }
.contact-result-content:not([open]) > summary::after { content: '＋ Записать'; color: #087ec0; font-size: 12px; margin-left: auto; }
.contact-result-next summary { font-size: 12px; cursor: pointer; color: #087ec0; margin-bottom: 8px; }
.contact-result-next label + label { margin-top: 10px; }

/* Role labels remain separate from call, source and attention indicators. */
.kcard-head { align-items: flex-start; }
.kcard-name { min-width: 0; overflow-wrap: anywhere; }
.kcard-head-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 55%; flex-shrink: 0; }
.candidate-role-badge { display: inline-block; padding: 3px 7px; border-radius: 6px; font-size: .6875rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; color: #5a6572; background: #f0f2f5; border: 1px solid #d8dee6; }
.candidate-role-cleaner { color: #125591; background: #e7f2ff; border-color: #99c7f2; }
.candidate-role-master { color: #713c9d; background: #f3eafa; border-color: #cda9e6; }
.candidate-custom-fields .inline-profile-field select { width: 100%; background: #f2f4f7; border: 1px solid transparent; color: #273746; font-weight: 600; }
.candidate-custom-fields .inline-profile-field select:focus { border-color: #75b9e3; background: #fff; }

/* Compact candidate workspace: preserve typography and all profile fields. */
.candidate-identity { min-width: 360px; }
@media (min-width: 1181px) and (max-width: 1450px) {
  .candidate-stage-control select { width: 220px; }
}
@media (max-width: 760px) {
  .candidate-identity { min-width: 0; max-width: 100%; }
}
.candidate-contact-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.candidate-contact-line .candidate-source-badge { margin-top: 0; }
.candidate-contact-line > span { flex-shrink: 0; }
.candidate-contact-line .candidate-source-picker { min-width: 0; max-width: 100%; }
.candidate-data-column { padding-top: 12px; }
.candidate-column-heading { margin-bottom: 8px; }
.candidate-field-stack { gap: 7px; }
.candidate-field-stack label { gap: 4px; }
.candidate-field-stack label b { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.candidate-field-divider { margin-top: 12px; margin-bottom: 7px; }
.candidate-custom-fields { margin-top: 7px; gap: 7px; }
.candidate-custom-fields .inline-profile-hint { margin-bottom: 5px; }
.inline-profile-status:empty { min-height: 0; margin-top: 0; }
.candidate-history-column, .candidate-next-column { padding-top: 12px; }
.candidate-history-tabs { margin-top: 8px; margin-bottom: 10px; }
.candidate-history-tabs button { padding-bottom: 8px; }
.candidate-channels { padding: 8px; margin-bottom: 10px; }
.candidate-channels-label { margin-bottom: 6px; }
.communication-history .candidate-channel { min-height: 68px; padding: 8px 6px; gap: 4px 5px; }
@container (min-width: 650px) {
  .communication-history .candidate-channel { grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; }
  .communication-history .candidate-channel small { grid-column: 1 / -1; }
}
.candidate-next-column .contact-result-card { padding: 12px; margin-bottom: 12px; }
.candidate-comments.is-compact { padding: 12px; margin-bottom: 12px; }
.candidate-comments.is-compact > header { margin-bottom: 8px; }
.candidate-note-compose { margin-bottom: 8px; }
.candidate-note-compose > summary { width: fit-content; color: #087ec0; cursor: pointer; font-size: .8125rem; }
.candidate-note-compose[open] > summary { margin-bottom: 8px; }

/* Каналы над историей, компактные кнопки без уменьшения размера текста. */
.communication-history .candidate-channels { flex-shrink: 0; padding: 0 0 12px; margin-bottom: 12px; border: 0; border-bottom: 1px solid #dce4eb; border-radius: 0; background: transparent; }
.communication-history .candidate-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.communication-history .candidate-channel { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 9px; gap: 6px; border-radius: 7px; }
@container (min-width: 700px) { .communication-history .candidate-channel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 330px) { .communication-history .candidate-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.communication-history .candidate-channel::before { display: none; }
.communication-history .candidate-channel i { flex: 0 0 22px; width: 22px; height: 22px; }
.communication-history .candidate-channel small { display: none; }
.candidate-history-heading, .candidate-history-tabs { flex-shrink: 0; }
.candidate-history-tabs { column-gap: 14px; row-gap: 2px; }
.candidate-history-tabs button { padding-bottom: 7px; }
.candidate-event.result-event { grid-template-columns: 32px minmax(0, 1fr); border-color: #b9d1e3; background: #f2f8fc; }
.result-event .candidate-event-icon { width: 30px; height: 30px; color: #23648d; background: #e0edf6; }
.contact-result-entry { min-width: 0; overflow-wrap: anywhere; }
.contact-result-title { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; line-height: 1.5; }
.contact-result-title strong { font-size: .9375rem; }
.result-outcome { padding: 2px 7px; border-radius: 6px; background: #e7edf3; color: #394f61; font-size: .875rem; }
.result-outcome.outcome-refusal { color: #9e3834; background: #fce8e6; }
.result-outcome.outcome-agreed { color: #206944; background: #def2e6; }
.result-outcome.outcome-thinking, .result-outcome.outcome-no_answer { color: #805a0d; background: #fff0cc; }
.contact-result-entry > p { margin: 8px 0; white-space: pre-wrap; line-height: 1.5; }
.contact-result-entry footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; color: #71808d; font-size: .75rem; }
.contact-result-entry .result-followup { color: #4c6577; font-size: .8125rem; }
.latest-contact-result { border: 1px solid #c7dbe9; border-left: 3px solid #397eaa; border-radius: 10px; padding: 12px; margin-bottom: 18px; background: #f5faff; }
.latest-contact-result h3 { margin: 0 0 10px; font-size: .875rem; color: #536e82; }
.result-edit, .result-move, .result-revisions { margin-top: 12px; font-size: .8125rem; }
.result-edit > summary, .result-move > summary, .result-revisions > summary { cursor: pointer; color: #186c9f; }
.result-edit form, .result-move form { display: grid; gap: 10px; margin-top: 10px; }
.result-edit label, .result-move label { display: grid; gap: 5px; }
.result-edit textarea, .result-edit select, .result-move select { width: 100%; min-width: 0; }
.result-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.result-edit-actions button, .result-move button { min-height: 34px; height: auto; white-space: normal; }
.result-revisions > div { padding-top: 10px; margin-top: 10px; border-top: 1px solid #d5e2eb; }
.result-revisions p { font-size: .8125rem; white-space: pre-wrap; }
.candidate-next-column .candidate-comments { margin-top: 18px; background: #fafbfc; border-color: #dfe5eb; }
.candidate-completed { margin: 16px 0; }
.candidate-completed > summary { cursor: pointer; color: #76838e; font-size: .8125rem; }
.candidate-custom-fields [data-picker-search] { width: 100%; margin-top: 10px; font-size: .875rem; font-weight: 400; }
.candidate-picker-options label[hidden], .picker-empty[hidden] { display: none !important; }
.candidate-search-match { display: block; margin-top: 6px; color: #536575; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-result-content:not([open]) > summary::after { content: '＋'; }

.candidate-call-picker { max-height: 85dvh; overflow-y: auto; }
.call-phone-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.call-phone-options legend { color: #64717e; font-size: .875rem; margin-bottom: 6px; }
.call-phone-options label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px; border: 1px solid #d5e0e8; border-radius: 8px; cursor: pointer; }
.call-phone-options label:has(input:checked) { border-color: #199be2; background: #eff8fe; }
.call-phone-options input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.call-phone-options span { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; }
.call-phone-status { color: #206944; background: #edf8f0; border-radius: 8px; padding: 10px; }
.call-phone-status[hidden] { display: none; }