:root {
  /* Палітра з фірмового дизайну Ready2Recruit (Figma):
     синій — основна дія (CTA лендінгу), зелений — акцент логотипа, майже-чорний — текст. */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eff2f6;          /* світла секція (як низ лендінгу) */
  --fg: #0b0d0e;                 /* near-black, бренд */
  --muted: #5b6470;
  --accent: #0b71d9;             /* основна синя дія */
  --accent-strong: #0065d6;      /* hover/active */
  --accent-soft: #e7f1fe;        /* блакитний тінт */
  --accent-fg: #ffffff;
  --brand-green: #42b81c;        /* зелений акцент старого логотипа Ready2Recruit */
  /* Фіолет узято ПІПЕТКОЮ з логотипа MITTA (середина переходу), а не на око:
     бейдж «AI» стоїть упритул до знака, і будь-який інший тон читався б як
     чужий елемент. Права літера — #714ee6, ліва частина майже чорна. */
  --brand-violet: #5936db;
  --border: #e2e6eb;
  --border-strong: #d5d8dd;
  --error: #b42318;
  --ring: rgba(11, 113, 217, 0.35);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
  --radius: 12px;
  --radius-lg: 16px;
  --badge-reviewed-bg: #e7f6e3;
  --badge-reviewed-fg: #1a7f37;
  --badge-auto-bg: #fff4e5;
  --badge-auto-fg: #9a5b00;
  --badge-unreviewed-bg: #eef0f3;
  --badge-unreviewed-fg: #5b6470;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Смуга «ви в кабінеті клієнта». Липка під шапкою й бурштинова — це попередження,
   а не підпис: усередині доступ повний, разом із платними діями. */
.imp-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: #fef3c7;
  color: #7c2d12;
  border-bottom: 1px solid #fcd34d;
  position: sticky;
  top: 3.1rem;
  z-index: 9;
}
/* ⚠️ Без цього рядка смуга висить ПОРОЖНЬОЮ на кожному екрані, зокрема на вході
   (скарга власника 2026-10-01): `display: flex` вище перебиває вбудоване
   `display: none`, яким браузер ховає елементи з атрибутом `hidden`. */
.imp-bar[hidden] { display: none; }
.imp-bar .link-btn { color: #7c2d12; font-weight: 600; }

.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-ai {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--brand-violet);
  padding: 0.14rem 0.42rem;
  border-radius: 7px;
  line-height: 1;
}
.brand-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

/* Екрани-форми лишаються вузькими: читати довгий рядок через увесь монітор незручно.
   Ширина потрібна тільки таблицям (вакансії, результати) — у 1080px вісім колонок
   не вміщались, і остання («До дзвінків») обрізалась. */
#screen-login, #screen-register, #screen-prepare { max-width: 1080px; }

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4rem; color: var(--fg); }
h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.75rem; color: var(--fg); }

.muted { color: var(--muted); }
.error { color: var(--error); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.form { max-width: 380px; display: grid; gap: 0.85rem; }
.form-title { margin: 0; }

label { display: grid; gap: 0.3rem; font-size: 0.92rem; font-weight: 500; }

input, select, textarea {
  font: inherit;
  font-weight: 400;           /* не успадковувати medium від label */
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }

/* Кастомний шеврон у select — щоб керувати його позицією (нативний не зсунути). */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

textarea { min-height: 72px; resize: vertical; }

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  padding: 0.55rem 1rem;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.04s ease;
}

button:hover { border-color: #c2c7ce; }
button:active { transform: translateY(1px); }

button.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(11, 113, 217, 0.25);
}
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  padding: 0.25rem 0;
  font-weight: 600;
}
.link-btn:hover { color: var(--accent-strong); text-decoration: underline; }

/* Екран входу — бренд-блок + центрована форма */
#screen-login, #screen-register { max-width: 420px; margin: 1.5rem auto 0; }
.login-hero { text-align: center; margin-bottom: 1.4rem; }
.login-logo-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.login-hero .brand-logo { height: 38px; }
.brand-ai-lg { font-size: 0.95rem; padding: 0.2rem 0.5rem; border-radius: 9px; }
.login-hero .tagline { color: var(--muted); margin: 0.7rem 0 0; font-size: 1.02rem; }

/* Пошук вакансій розміром керує панель `.filters`, у якій він тепер живе. Власного
   правила тут більше немає: ID перебивав панель і додавав полю зайвий відступ
   знизу — через нього підпис «Пошук» висів на 12px вище за сусідні. */

.screen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Кнопки в шапці екрана: без явного проміжку вони зливаються в один рядок тексту. */
.screen-actions { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }

/* Зведена статистика акаунта */
.stats { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.stats:empty { display: none; }

/* Панель фільтрів (сторінка «Результати»): селекти + період + скидання */
/* Панель фільтрів — сітка рівних колонок, а не flex: у flex кожен select
   розтягувався під свій найдовший варіант (довга назва області робила «Регіон»
   у півтора раза ширшим за сусідів), і рядок «плив». */
.filters {
  /* Висота контроля: line-height 1.55 + padding 0.55rem×2 + рамка, зведені до rem,
     щоб поле дати не було на 2px вищим за select і не піднімало свій підпис. */
  --filter-control-h: 2.65rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.7rem 0.9rem; align-items: end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.75rem 0.95rem; margin: 0 0 1rem;
}
/* «Результати»: панель у два рядки замість однієї сітки. Верхній — два поля з
   пошуком у пропорції 70/30 (назви вакансій довгі й схожі, місто коротке), нижній
   — решта фільтрів рівними колонками. Сама `.filters` лишається сіткою для екрана
   вакансій, тож перемикаємо розкладку модифікатором, а не правкою базового класу. */
/* `align-items` перебиваємо явно: у базовій `.filters` він `end` для вирівнювання
   контролів по нижньому краю сітки, а у flex-колонці це поперечна вісь — рядки
   переставали розтягуватись і тулились до правого краю. */
.filters--stacked {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem;
}
.filters-row { display: grid; gap: 0.7rem 0.9rem; align-items: end; }
.filters-row--wide { grid-template-columns: 7fr 3fr; }
.filters-row--even { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
@media (max-width: 640px) {
  /* На вузькому 70/30 залишає вакансії менше місця, ніж на екрані вакансій, тож
     верхній рядок розкладаємо одне поле під одним. */
  .filters-row--wide { grid-template-columns: 1fr; }
  .filters-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Рядок «значення + хрестик» у таблиці кабінетів: кнопка притиснута до свого
   значення, а не до краю комірки, щоб було видно, що саме вона видаляє. */
.row-with-x { display: flex; align-items: baseline; gap: 0.4rem; }
.row-with-x + .row-with-x { margin-top: 0.2rem; }
.link-btn.danger {
  color: var(--error); font-size: 1.05rem; line-height: 1; padding: 0 0.2rem;
}
.link-btn.danger:disabled { opacity: 0.5; cursor: default; }

/* Меню кабінету в шапці: назва компанії, під нею баланс і вихід. Баланс жив карткою
   на екрані вакансій, але потрібен він на будь-якому екрані — тому переїхав сюди. */
.acct { position: relative; }
.acct-btn {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid transparent; background: none; color: var(--fg);
  font: inherit; font-weight: 600; padding: 0.3rem 0.5rem;
  border-radius: 999px; cursor: pointer; max-width: 22rem;
}
.acct-btn:hover { border-color: var(--border-strong); }
.acct-btn > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-avatar {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-size: 0.9rem;
}
.acct-caret { color: var(--muted); font-size: 0.75rem; }
/* На вузькому екрані назва компанії має ТИСНУТИСЬ, а не виштовхувати сторінку вбік.
   Багатоточка в назві вже стояла, але без `min-width: 0` флекс-елемент не стискається
   менше за свій вміст — і довга назва кабінету давала горизонтальну прокрутку на
   телефоні (сторінка 415px при екрані 375px). */
.topbar { gap: 0.5rem; }
.brand, .acct, .acct-btn { min-width: 0; }
@media (max-width: 560px) {
  .brand-tag { display: none; }        /* «адмінка» — підпис, а не дія: місце потрібніше назві */
  .acct-btn { max-width: 11rem; padding: 0.3rem 0.35rem; }
}
.acct-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20;
  min-width: 15rem; padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  text-align: center;
}
.acct-head { padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.acct-title { font-weight: 700; }
.acct-balance { padding: 0.8rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.6rem; }
.acct-num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

/* Назва компанії у звіті «Витрати» — клікабельна, під нею розгортається картка.
   Виглядає як звичайний текст комірки, а не як посилання: це не дія, а «показати
   більше», і синій колір у таблиці з цифрами тягнув би на себе увагу. */
.ue-name {
  border: none; background: none; padding: 0; text-align: left;
  color: var(--fg); font: inherit; font-weight: 600; cursor: pointer;
  border-bottom: 1px dashed var(--border-strong);
}
.ue-name:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ue-details td { background: var(--surface-2); }
.ue-card { display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline;
           padding: 0.3rem 0; font-size: 0.9rem; }
.ue-card b { display: block; font-size: 0.85rem; }

/* Вибір «куди надсилати підсумки». Раніше це були дві посилання-кнопки поспіль зі
   спільним поясненням під ними — і читалось як один рядок тексту, а не як вибір.
   Тепер у кожної свій контур, вони рознесені, і підпис стоїть під СВОЄЮ кнопкою.
   Ширина кнопок однакова (`min-width`): з різною рядок виглядає випадково нерівним,
   хоча варіанти рівноцінні. */
.tg-choices { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.7rem; }
.tg-option { max-width: 240px; }
.tg-choice {
  min-width: 10.5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
  padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.92rem; cursor: pointer;
}
.tg-choice:hover { border-color: var(--accent); color: var(--accent); }
.tg-hint { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* Живий перегляд фрази агента під полем. Виглядає як цитата, а не як ще одне
   поле: це не те, що вводять, а те, що з введеного вийде. */
.field-preview {
  margin: 0.35rem 0 0; padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft); color: var(--fg);
  font-size: 0.88rem; line-height: 1.45;
}

/* `.combo` — та сама комірка сітки, що й label: інпут із власною випадачкою. */
.filters label, .filters .combo {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.8rem; color: var(--muted); min-width: 0;
}
.filters .combo { position: relative; }

/* Багатовибір у фільтрах. Блок стоїть ПІСЛЯ `.filters label` свідомо: там задано
   колонку (підпис над контролем), і з однаковою вагою перемагає те правило, що
   нижче — інакше підпис у списку з'їжджає під галочку.
   Багатовибір: кнопка з підписом обраного + список чекбоксів.
   Виглядає як звичайний select (та сама висота й рамка), щоб рядок фільтрів не
   розʼїжджався, а всередині — прапорці: «передано рекрутеру» і «потрібен час»
   дивляться разом. */
.multi { position: relative; }
.multi-btn {
  width: 100%; height: var(--filter-control-h);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 0 0.6rem; font: inherit; font-size: 0.92rem; cursor: pointer;
}
.multi-btn.multi-any { color: var(--muted); }   /* «Усі» — не вибір, а його відсутність */
.multi-btn:hover { border-color: var(--accent); }
.multi-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin-top: 0.2rem; padding: 0.25rem; max-height: 16rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 0.92rem;
}
.multi-list label {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem; border-radius: 8px; font-weight: 400; cursor: pointer;
}
.multi-list label:hover { background: var(--accent-soft); }
.multi-list input { width: auto; height: auto; margin: 0; }


/* Випадачка фільтра з пошуком. Лежить над таблицею, тому z-index і власна тінь. */
.combo-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 0.2rem 0 0; padding: 0.25rem; list-style: none;
  max-height: 16rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  font-size: 0.92rem; color: var(--fg);
}
.combo-list li {
  padding: 0.4rem 0.5rem; border-radius: 8px; cursor: pointer;
}
.combo-list li:hover, .combo-list li[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent-strong);
}
/* «Нічого не знайдено» — не варіант вибору: ні курсора-пальця, ні підсвітки. */
.combo-list .combo-empty, .combo-list .combo-empty:hover {
  color: var(--muted); cursor: default; background: none;
}
/* Один кегль на всіх контролях. Раніше правило покривало select і input[type=date],
   але не пошук — той лишався дрібнішим, нижчим на 3px, і його підпис висів вище
   за сусідні. */
.filters select, .filters input:not([type="checkbox"]) {
  width: 100%; min-width: 0; font-size: 0.92rem; height: var(--filter-control-h);
}
/* Кнопка скидання йде наступною коміркою, а не відлітає в правий край рядка. */
.filters .link-btn { justify-self: start; align-self: end; padding-bottom: 0.55rem; }
@media (max-width: 640px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.95rem;
  min-width: 132px;
  box-shadow: var(--shadow-sm);
}
.stat b { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.stat span { font-size: 0.8rem; color: var(--muted); }

/* База пошукачів: рядок кандидата (у масовому режимі — без чекбокса) */
.cvdb-row { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
.cvdb-row.plain { padding-left: 0.1rem; }
.bulk-call { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; margin-top: 0.7rem; }
.bulk-call label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.bulk-call input[type="number"] { width: 7rem; }

/* Розгортка рядка «Результатів»: історія всіх дзвінків кандидата */
tr.row-expandable { cursor: pointer; }
tr.row-expandable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.row-chevron { display: inline-block; margin-right: 0.35rem; color: var(--muted); transition: transform 0.15s; }
tr.row-open .row-chevron { transform: rotate(90deg); }
tr.row-history > td { background: var(--surface); }
.history { list-style: none; margin: 0.25rem 0; padding: 0 0 0 1.4rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .row-chevron { transition: none; } }

/* Статус підключення Telegram */
.tg-status { display: inline-block; font-weight: 600; font-size: 0.85rem; padding: 0.18rem 0.65rem; border-radius: 999px; }
.tg-status.tg-ok { background: var(--badge-reviewed-bg); color: var(--badge-reviewed-fg); }
.tg-status.tg-off { background: var(--badge-unreviewed-bg); color: var(--badge-unreviewed-fg); }
.tg-relink { font-size: 0.8rem; color: var(--muted); margin-left: 0.5rem; }
.tg-relink:hover { color: var(--accent); }

/* Вибір сповіщень: окремим блоком під рядком стану, а не в ньому — рядок і так
   несе три дії, а галочки мають читатись як список, а не як ще одна кнопка. */
.tg-prefs { margin-top: 0.6rem; display: grid; gap: 0.4rem; justify-items: start; }
.tg-prefs .toggle { font-weight: 400; }
.tg-prefs p { margin: 0; }
/* «Відключити» відсунуте від галочок: це дія іншої ваги, а не третій пункт списку. */
.tg-prefs #tg-disconnect { margin-top: 0.2rem; }

/* Висновки з розмови в розгортці рядка «Результатів». */
.analysis { list-style: none; margin: 0.35rem 0 0; padding: 0 0 0 0.2rem;
  display: grid; gap: 0.2rem; font-size: 0.9rem; }

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Смуга прокрутки має бути ВИДИМОЮ: системна накладна зʼявляється лише під час
     прокрутки, тож обрізану праву колонку легко не помітити взагалі. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  overscroll-behavior-x: contain;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid var(--surface);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

table { width: 100%; border-collapse: collapse; background: var(--surface); }

/* Нижче цієї ширини колонки починають кришитися — краще горизонтальна прокрутка. */
#jobs-table { min-width: 1000px; }
/* Витрати: 12 колонок, і в контейнері вони стискаються так, що «3 752,52 ₴» ламається
   навпіл. Краще прокрутка, ніж гроші в два рядки — тому і мінімальна ширина, і заборона
   переносу в усіх колонках, крім назви компанії (вона одна довга й ламатись може). */
#ue-table { min-width: 1340px; }
#ue-table td + td { white-space: nowrap; }
#screen-results table { min-width: 900px; }

/* Тисяча рядків у DOM: даємо браузеру пропускати те, що за екраном. */
#jobs-tbody tr, #results-tbody tr { content-visibility: auto; contain-intrinsic-size: auto 52px; }

th, td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: #f8fafc; }

th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; background: var(--surface-2); }

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge.reviewed { background: var(--badge-reviewed-bg); color: var(--badge-reviewed-fg); }
.badge.auto { background: var(--badge-auto-bg); color: var(--badge-auto-fg); }
.badge.unreviewed { background: var(--badge-unreviewed-bg); color: var(--badge-unreviewed-fg); }

/* Рядок вимоги: назва | обов'язковість | уточнення | видалити. */
.kr-row { display: grid; grid-template-columns: 1.4fr auto 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.kr-row select[data-kr="Type"] { min-width: 8.5rem; }
.kr-del {
  min-width: 2.5rem; min-height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; border-radius: 8px;
}
.kr-del:hover { color: var(--error); background: #fbeae8; border-color: transparent; }

.row-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

.field-grid { display: grid; gap: 1.3rem; max-width: 720px; }
.form-intro { display: grid; gap: 0.25rem; }
.form-intro h2 { margin: 0; }
.hint-fineprint { font-size: 0.82rem; margin: 0; }

/* Секція полів: легенда-підзаголовок + сітка. Без важких рамок — групує відступом. */
fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: 1rem; color: var(--fg); padding: 0; margin-bottom: 0.7rem; }

/* Дві колонки для коротких полів; textarea-поля — на всю ширину. */
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.fields-grid .field-full { grid-column: 1 / -1; }
.field-hint { font-weight: 400; font-size: 0.8rem; color: var(--muted); }

details summary { cursor: pointer; font-weight: 600; }

/* Перемикач «Продзвонювати нові» — рядок: чекбокс + підпис */
.toggle { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 500; }
.toggle input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; flex: 0 0 auto; padding: 0; accent-color: var(--accent); }

.success { color: var(--badge-reviewed-fg); font-weight: 600; margin: 0 0 0.6rem; }

.readonly-block { background: var(--surface-2); border-radius: 10px; padding: 0.7rem 0.85rem; white-space: pre-wrap; }

/* Індикатор завантаження «ордера» (перше відкриття готує дані через AI) */
.loader { max-width: 440px; padding: 1.5rem 0; }
.loader-bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.loader-bar-fill {
  height: 100%; width: 40%; border-radius: 999px;
  background: var(--accent); animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.loader-msg { margin: 0.7rem 0 0.2rem; font-weight: 600; }
.loader-hint { font-size: 0.85rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .loader-bar-fill { animation: none; width: 100%; margin-left: 0; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .fields-grid { grid-template-columns: 1fr; }
  /* Кожна вимога — окрема картка: назва й обов'язковість на весь рядок,
     нижче — уточнення + ✕. */
  .kr-row {
    grid-template-columns: 1fr auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem;
    gap: 0.5rem;
  }
  .kr-row select { grid-column: 1 / -1; }
  .kr-row select[data-kr="Type"] { min-width: 0; }
  .container { padding: 1.25rem 1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Підсумок розмови в таблиці: один рядок, повний текст — у розгортці та в title. */
.outcome-text {
  display: inline-block; max-width: 34ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  color: var(--muted);
}

/* Клітинка з елементами керування: не переносити кнопку під поле. */
td.nowrap { white-space: nowrap; }

/* Межі обдзвону: три числові поля в ряд, на вузькому — стовпчиком. */
.pacing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 0.9rem; align-items: end;
}
.pacing-grid label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.8rem; color: var(--muted); min-width: 0;
}
.pacing-grid input { width: 100%; min-width: 0; }

/* Тиждень: день + два часи. Без рамок — це форма, не таблиця даних. */
.pacing-week { border-collapse: collapse; width: 100%; max-width: 32rem; }
.pacing-week td { padding: 0.15rem 0.7rem 0.15rem 0; border: 0; vertical-align: middle; }
.pacing-week td:first-child { width: 45%; }
.pacing-week td:last-child { padding-right: 0; }
/* Глобальний `label` — це grid, тож без власного правила чекбокс ставав НАД назвою дня. */
.pacing-day {
  display: flex; flex-direction: row; align-items: center; gap: 0.45rem;
  font-weight: 500; cursor: pointer;
}
.pacing-day input { width: auto; margin: 0; }
.pacing-week input[type="time"] { font-size: 0.92rem; width: 100%; min-width: 0; }
.pacing-week input[type="time"]:disabled { opacity: 0.45; }
@media (max-width: 640px) {
  /* Назва дня скорочується, щоб два поля часу лишались клікабельними. */
  .pacing-week td:first-child { width: 38%; }
  .pacing-week td { padding-right: 0.35rem; }
}

/* Заблокований кабінет: видно з рядка, але лишається читабельним. */
tr.row-blocked > td { opacity: 0.62; }
tr.row-blocked > td:first-child { opacity: 1; }

/* Дії з кабінетом (хвилини й пауза) — ЗАВЖДИ на очах. Таблиця кабінетів ширша за
   екран ноутбука, і остання колонка просто виїжджала за край: власник продукту не
   знайшов ні списання хвилин, ні паузи, хоча обидві кнопки були на місці
   (2026-09-18). Видимої смуги прокрутки виявилось замало, тож колонка липне до
   правого краю. Фон обовʼязковий — інакше під нею просвічує вміст, що проїжджає. */
#owner-table th.acts, #owner-table td.acts {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface); box-shadow: -1px 0 0 var(--border);
}
.acts-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.acts-row input { width: 4.5rem; }

/* Стенограма в розгортці рядка: репліки одна під одною, без таймкодів. */
.transcript {
  display: grid; gap: 0.15rem; margin: 0.3rem 0 0 0;
  padding: 0.5rem 0.7rem; background: var(--surface-alt, #f8fafc);
  border-left: 2px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere;
}
.transcript span { display: block; }

/* Довгі назви вакансій не мають розсувати таблицю. */
#jobs-tbody td:first-child { max-width: 22rem; overflow-wrap: anywhere; }

/* Екран підготовки: обидві картки однакової ширини. Верхня («дані з джерела»)
   тягнулась на всі 1080px, а форма нижче обмежена сіткою полів у 720px — різні
   краї читались як помилка верстки. Ширина під довгий опис і 2 колонки полів. */
#prepare-body > .card,
#prepare-body > form.card { max-width: 780px; }

/* Чекбокс у панелі фільтрів: підпис поруч, а не над полем, як у решти. */
.filters label.filter-check {
  flex-direction: row; align-items: center; gap: 0.45rem;
  align-self: end; padding-bottom: 0.5rem; font-weight: 500;
}
.filters label.filter-check input { width: auto; }

/* Юніт-економіка: період і підсумковий рядок */
.ue-controls { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.ue-controls label { display: block; }
tr.ue-total td { border-top: 2px solid var(--border, #d7dbe0); }

/* --- Екран «Дзвінки»: джерела згорнутими блоками, межі смугою зверху --- */
/* Стан джерела видно в заголовку, не розгортаючи; сам блок відкривається кліком.
   Ставимо після глобального `details summary`, щоб не сперечатись про специфічність. */
.acc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin: 0 0 .5rem; overflow: hidden;
}
.acc > summary {
  list-style: none; cursor: pointer; padding: .8rem 1rem;
  display: flex; align-items: center; gap: .7rem; font-weight: 400;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before {
  content: "▸"; color: var(--muted); font-size: .8rem; line-height: 1;
}
.acc[open] > summary::before { content: "▾"; }
.acc > summary:hover { background: var(--surface-2); }
.acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-name { font-weight: 700; }
.acc-state { color: var(--muted); font-size: .86rem; margin-left: auto; text-align: right; }
.acc[open] > summary { border-bottom: 1px solid var(--border); }
.acc-body { padding: 1rem; }

/* «Тестовий дзвінок» — НЕ джерело кандидатів, а інструмент: послухати агента на
   власному номері. Серед трьох однакових блоків джерел він губився (скарга власника
   2026-10-22). Виділяємо тим самим акцентом, що й смуга меж на ЦЬОМУ ж екрані —
   третього кольору в продукті немає, одна синя дія; відступ зверху відриває блок від
   групи джерел, бо він до неї не належить. */
.acc--test { border-color: var(--accent); margin-top: 1.1rem; }
.acc--test > summary { background: var(--accent-soft); }
/* Ховер НЕ висвітлює до сірого (`--surface-2`), як у джерел: на тінті це читалось би
   як «блок згас». Лишаємо той самий тінт, трохи глибший. */
.acc--test > summary:hover { background: #d9e9fd; }
.acc--test[open] > summary { border-bottom-color: var(--accent); }
.acc--test .acc-name { color: var(--accent-strong); }
/* Розмір іконці задає місце, де вона стоїть: сам `ICON()` малює лише viewBox, а
   висоту бере з CSS (як `.icon-btn svg` у рядку вакансії). Без цього svg виходить
   0×0 і блок виглядає так, ніби іконки немає зовсім. */
.acc-icon { flex: none; display: inline-flex; color: var(--accent-strong); }
.acc-icon svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Смуга меж: ті самі числа, що у формі, в один рядок і перед усіма джерелами. */
.limits-strip {
  display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .6rem .9rem; margin: 0 0 .9rem;
  font-size: .92rem;
}
.limits-strip .link-btn { margin-left: auto; }
.limits-open {
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: .9rem 1rem; margin: 0 0 .9rem;
}
.limits-head { margin: 0 0 .3rem; font-size: 1.02rem; }
/* Поля ліміту — одним рядком разом із кнопкою. Пояснення про розмови й набори
   прибрали (рішення власника 2026-09-18), тож тягнути поля на всю ширину картки
   більше нема чого: три коротких числа й «Зберегти» вкладаються в один рядок, а на
   вузькому екрані переносяться самі. Окремий клас, а не `.pacing-grid`: та сітка
   стоїть і в блоці бази пошукачів, де поля довші («За який час шукати профілі»). */
.limits-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem .8rem; }
/* Поля ДІЛЯТЬ вільну ширину, а не стоять фіксованими: інакше праворуч від кнопки
   лишалась порожнеча, а на вузькому екрані підказка «без обмеження» не вміщалась у
   поле. `flex-basis: 10rem` — це мінімум, від якого ряд переноситься; далі поля
   розтягуються рівно, скільком би їх не стало в рядку. */
/* Стеля ширини — щоб поле, яке лишилось у рядку саме, не роздувалось удвічі
   проти сусідів (на 620px так було з «Наборів на годину»). 17rem вибрано
   так, щоб на телефоні поле все одно займало рядок цілком. */
.limits-fields label { flex: 1 1 10rem; max-width: 17rem; min-width: 0;
                       display: block; margin: 0; }
.limits-fields input { width: 100%; }
.limits-fields button { flex: none; }
.limits-scope {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-strong); background: var(--surface);
  border: 1px solid var(--accent); padding: .1rem .45rem; border-radius: 999px;
  vertical-align: .1rem;
}
.limits-strip .limits-scope { background: var(--surface); margin-right: .2rem; }
/* На телефоні стан не тиснеться в той самий рядок, що й назва, — йде під нею. */
@media (max-width: 560px) {
  .acc > summary { flex-wrap: wrap; }
  .acc-name { flex: 1 1 0; min-width: 0; }
  .acc-state { flex: 1 1 100%; margin-left: 1.5rem; text-align: left; }
  .limits-strip { gap: .25rem .8rem; }
  .limits-strip .link-btn { margin-left: 0; }
}

/* Три дії в рядку вакансії: іконки-кнопки замість одного текстового посилання.
   Підпис дає `title` при наведенні — у комірці для трьох слів місця немає. */
.row-icons { white-space: nowrap; }
.icon-btn {
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0.3rem 0.35rem;
  border-radius: var(--radius); color: inherit;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn:disabled { opacity: 0.5; cursor: default; }
/* Один набір: та сама товщина лінії й колір тексту, тож у темній темі й на
   будь-якій системі іконки виглядають однаково (на відміну від емодзі). */
.icon-btn svg {
  width: 1.05rem; height: 1.05rem; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Фільтр агентів у «Незметчених витратах» — галочки, а не випадайка: агентів
   три-пʼять, тож усі варіанти мають бути на очах, і вибір двох це два кліки.
   Глобальне `label { display: grid }` розтягло б кожну на всю ширину картки. */
.agent-filter { margin: 0.25rem 0 0.75rem; }
.agent-filter label {
  display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem;
  font-weight: 400; font-size: 0.9rem; cursor: pointer;
  padding: 0.3rem 0.6rem; margin: 0 0.4rem 0.4rem 0; border-radius: 999px;
  border: 1px solid var(--border-strong);
}
.agent-filter label:hover { background: var(--accent-soft); }
.agent-filter input { width: auto; margin: 0; }

/* Вставлений текст умов у формі замовлення. Поза `label` текстове поле не розтягується
   (ширину там задає сітка), а читати опис вакансії в колонку на 20 символів неможливо. */
#order-raw { width: 100%; box-sizing: border-box; min-height: 9rem; }

/* Бриф у режимі «перевірте, а не заповнюйте»: читабельні картки замість полів. */
.bs-card { border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem;
           margin-bottom: .7rem; }
.bs-card header { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 1rem; margin-bottom: .5rem; }
.bs-card h3 { margin: 0; font-size: 1rem; }
.bs-row { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem;
          padding: .25rem 0; align-items: baseline; }
.bs-row.bs-full { grid-template-columns: 1fr; }
.bs-key { color: var(--muted); font-size: .9rem; }
.bs-empty span:last-child { color: var(--muted); font-style: italic; }
.bs-gaps, .bs-ok { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px; }
.bs-gaps { background: #fff4e5; }
.bs-ok { background: var(--accent-soft); }
.advanced-block { margin-top: 1rem; }
.advanced-block > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 640px) { .bs-row { grid-template-columns: 1fr; gap: .1rem; } }
/* Олівець у заголовку картки брифу стоїть на базовій лінії заголовка, а не поряд
   із текстом — інакше він «пливе» відносно h3. */
.bs-card header .icon-btn { align-self: center; flex: none; }

/* Підказка під літерою «i»: текст лишається повним, але не займає екран. Спливає
   ПРИ НАВЕДЕННІ та при фокусі з клавіатури; клік лишено для сенсорних екранів, де
   наведення не існує (`aria-expanded`). */
.hint { position: relative; display: inline-flex; vertical-align: middle; }
.hint-btn {
  width: 1.25rem; height: 1.25rem; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: none; color: var(--muted);
  font: 700 0.75rem/1 inherit; padding: 0; cursor: help;
}
.hint-btn:hover { background: var(--surface-2); color: var(--fg); }
.hint-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint-text {
  /* Прив'язка до ЛІВОГО краю кнопки, а не центру: підказки стоять близько до лівого
     краю картки, і центрована коробка на 26rem вилазила за межі й обрізалась. */
  position: absolute; top: calc(100% + 0.4rem); left: 0;
  z-index: 40; width: max-content; max-width: min(26rem, 80vw);
  padding: 0.6rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  color: var(--fg); font-size: 0.9rem; font-weight: 400; line-height: 1.45;
  text-align: left; white-space: normal;
  /* Не `display: none`: прихований через visibility текст лишається доступним
     екранним читачкам як `role="tooltip"` і не смикає розкладку при появі. */
  visibility: hidden; opacity: 0; transition: opacity .12s ease;
}
.hint:hover .hint-text,
.hint-btn:focus-visible + .hint-text,
.hint-btn[aria-expanded="true"] + .hint-text { visibility: visible; opacity: 1; }
/* Рядок «те, що пояснюємо» + «i». Галочку обгортаємо, бо кнопка всередині `label`
   перемикала б саму галочку. */
.hint-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* Рекомендовані синоніми під полем пошуку: підказка кліком, а не підстановка. */
.term-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
                margin: .1rem 0 .7rem; }
.term-chip {
  border: 1px dashed var(--border-strong); background: none; color: var(--fg);
  border-radius: 999px; padding: .2rem .6rem; font-size: .88rem; font-weight: 400;
  cursor: pointer;
}
.term-chip::before { content: "+ "; color: var(--muted); }
.term-chip:hover { background: var(--accent-soft); border-style: solid; }

/* --- Екран «Звіт клієнту» (роль superuser) --- */
/* Вакансій у кабінеті бувають десятки, тож список має бути компактним і прокручуваним:
   інакше вибір періоду й кнопка експорту їдуть за край екрана. */
.rep-actions { display: flex; gap: .8rem; margin: 0 0 .5rem; }
.rep-jobs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: .2rem .8rem; max-height: 16rem; overflow: auto;
}
.rep-job { display: flex; align-items: baseline; gap: .4rem; padding: .1rem 0; }
.rep-job span:first-of-type { flex: 1; }
.rep-head { margin: 1rem 0 .4rem; }
.rep-head p { margin: .1rem 0; }
.rep-table { width: 100%; }
.rep-table td:nth-child(2), .rep-table td:nth-child(3),
.rep-table th:nth-child(2), .rep-table th:nth-child(3) { text-align: right; width: 8rem; }
/* Рядок «Разом» відбиваємо лінією — так само, як у таблиці витрат. */
tr.rep-total td { border-top: 2px solid var(--border, #d7dbe0); font-weight: 600; }