/* ============================================================
   AS Дашборд — auto-scout.ua · v4
   Чистий мінімалізм: світла тема + темна (перемикач у шапці).
   Дизайн-мова успадкована від «Карти підбору»: білі картки,
   акуратні тіні, нейтральна палітра, Inter.
   ============================================================ */

:root {
  --bg: #e8ebf0;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --surface-muted: #eef1f5;
  --line: #e6e8eb;
  --line-soft: #eceef1;
  --line-bright: #d3d6db;
  --text: #0a0d12;
  --muted: #5f6368;
  --faint: #66707a;

  --accent: #111318;
  --accent-fg: #ffffff;
  --accent-hover: #2a2d33;
  --accent-soft: #eef0f3;

  /* Фірмовий акцент (легасі-назва --amber використовується в розмітці) */
  --amber: #d97706;
  --amber-soft: #fef3e2;
  --amber-glow: rgba(217, 119, 6, 0.10);
  --amber-glow-strong: rgba(217, 119, 6, 0.22);

  --green: #0f7a45;
  --green-glow: #e7f5ee;
  --red: #c0332b;
  --red-bg: #fbe9e8;
  --blue: #1a56c7;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, 0.16), 0 10px 20px -8px rgba(16, 24, 40, 0.07);

  --radius: 14px;
  --radius-sm: 10px;
  --font-display: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] {
  --bg: #08090b;
  --bg-2: #16181c;
  --panel: #171a1f;
  --panel-2: #16181c;
  --surface-muted: #1e2127;
  --line: #26292f;
  --line-soft: #202329;
  --line-bright: #3a3e46;
  --text: #f2f3f5;
  --muted: #a3a8b2;
  --faint: #858c98;

  --accent: #ffffff;
  --accent-fg: #0b0c0e;
  --accent-hover: #d9dbe0;
  --accent-soft: #22252b;

  --amber: #fbbf24;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --amber-glow: rgba(251, 191, 36, 0.12);
  --amber-glow-strong: rgba(251, 191, 36, 0.25);

  --green: #4ade80;
  --green-glow: rgba(34, 197, 94, 0.13);
  --red: #f87171;
  --red-bg: rgba(239, 68, 68, 0.13);
  --blue: #60a5fa;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 14.5px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

::selection { background: var(--accent); color: var(--accent-fg); }

/* ---------- Шапка ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 500;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.5px;
  color: var(--accent-fg);
  background: var(--accent);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: transform .2s var(--ease);
}

.brand:hover .brand-mark { transform: scale(1.06) rotate(-3deg); }

.brand-text {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.2px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}

.brand-dot { color: var(--amber); }

.brand-text small {
  font-weight: 500;
  font-size: 9.5px;
  color: var(--faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.mainnav { display: flex; gap: 2px; flex: 1; }

.mainnav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  padding: 7px 13px;
  border-radius: 9px;
  transition: color .15s, background .15s;
}

.mainnav a:hover { color: var(--text); background: var(--surface-muted); }

.mainnav a.active {
  color: var(--text);
  background: var(--accent-soft);
  font-weight: 600;
}

/* ── Пункт меню з підменю («Сервіси») ────────────────────────────────
   На комп'ютері меню розкривається при наведенні, на телефоні — по дотику
   (обробник у layout.php). Прозорий верхній бордер тримає «місток» між
   пунктом і меню: якщо зробити відступ, курсор проходить крізь щілину
   і меню закривається на півдорозі. */
.navdrop { position: relative; display: flex; }

.navdrop-top { display: inline-flex; align-items: center; gap: 5px; }
.navdrop-top svg { opacity: .55; transition: transform .15s; }
.navdrop:hover .navdrop-top svg,
.navdrop.open .navdrop-top svg { transform: rotate(180deg); opacity: .9; }

.navdrop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 268px;
  padding: 6px;
  border: 1px solid var(--line);
  border-top: 7px solid transparent;   /* видимий відступ, але курсор не втрачається */
  background: var(--panel);
  background-clip: padding-box;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
}

.navdrop:hover .navdrop-menu,
.navdrop:focus-within .navdrop-menu,
.navdrop.open .navdrop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mainnav .navdrop-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: normal;
}
.mainnav .navdrop-menu a b { display: block; font-weight: 600; color: var(--text); }
.mainnav .navdrop-menu a small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.mainnav .navdrop-menu a:hover { background: var(--surface-muted); }
.mainnav .navdrop-menu a.is-here { background: var(--accent-soft); }
.mainnav .navdrop-menu a.is-here b { color: var(--accent); }

/* Шестерня налаштувань: помітна тільки тому, хто має до них доступ */
.icon-btn.is-here { background: var(--accent-soft); color: var(--accent); }

.userbox { display: flex; align-items: center; gap: 8px; }

/* Кнопка швидкої задачі в шапці */
.quick-task-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.quick-task-btn svg { flex: 0 0 auto; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.user-chip:hover { border-color: var(--accent); background: var(--surface); }

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.user-name { font-weight: 600; font-size: 13px; }

.user-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.icon-btn:hover { background: var(--surface-muted); color: var(--text); }

.theme-float {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 600;
  background: var(--bg-2);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

/* Іконка теми: у світлій показуємо місяць, у темній — сонце */
.ic-sun { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }

/* ---------- Контент ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.content > * { animation: fadeUp .4s var(--ease) both; }
.content > *:nth-child(2) { animation-delay: .05s; }
.content > *:nth-child(3) { animation-delay: .10s; }
.content > *:nth-child(4) { animation-delay: .15s; }
.content > *:nth-child(5) { animation-delay: .20s; }
.content > *:nth-child(6) { animation-delay: .25s; }

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

/* Широкий режим — CRM: канбан і таблиці мають дихати на всю ширину монітора,
   але з тими самими відступами, що й решта сторінок (на відміну від fullbleed карти). */
body.wide .content { max-width: none; padding-left: 22px; padding-right: 22px; }

body.fullbleed .content {
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body.fullbleed .content > * { animation: none; }

/* Вхід має власний viewport-макет: без подвійних відступів і зайвого скролу від autofocus. */
body.auth-page .content { max-width: none; padding: 0; display: flex; }
body.auth-page .login-wrap { min-height: 100dvh; flex: 1; }
body.auth-page .footer { display: none; }

.footer {
  text-align: center;
  padding: 16px;
  color: var(--faint);
  font-size: 12px;
  border-top: 1px solid var(--line);
}

body.fullbleed .footer { display: none; }

/* ---------- Типографіка ---------- */
h1.page-title {
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: -0.03em;
  margin-bottom: 5px;
}

.page-sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; max-width: 720px; }

.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.text-sm { font-size: 12.5px; }
.text-xs { font-size: 11.5px; }
.stack { display: flex; flex-direction: column; }

/* ---------- Hero (головна) ---------- */
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 65% 130% at 8% -20%, var(--amber-glow), transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.hero-greet {
  font-weight: 800;
  font-size: clamp(21px, 3vw, 29px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.hero-greet em { font-style: normal; color: var(--amber); }

.hero-sub { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

.hero-time { text-align: right; flex-shrink: 0; }

.hero-clock {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.hero-clock .sec { font-size: .55em; color: var(--faint); }

.hero-date { font-size: 12.5px; color: var(--muted); margin-top: 1px; text-transform: capitalize; }

/* ---------- Швидкі дії ---------- */
.quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.quick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .2s, transform .18s var(--ease);
}

.quick-card::after {
  content: '→';
  margin-left: auto;
  color: var(--faint);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .18s var(--ease);
}

.quick-card:hover {
  border-color: var(--line-bright);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.quick-card:hover::after { opacity: 1; transform: none; }

.quick-ic {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.quick-card b { display: block; font-size: 13.5px; font-weight: 600; }
.quick-card small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* ---------- Сітка дашборда ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 18px;
  align-items: start;
}

/* ---------- Панелі ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel-pad { --pp-x: 22px; --pp-y: 22px; padding: var(--pp-y) var(--pp-x); }

/* ---------- Плитки ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .2s, transform .18s var(--ease);
}

.tile:hover {
  border-color: var(--line-bright);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.tile-icon {
  font-size: 21px;
  margin-bottom: 11px;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  transition: transform .2s var(--ease);
}

.tile:hover .tile-icon { transform: scale(1.07); }

.tile-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 4px; }

.tile-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.tile-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-muted);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 26px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label:first-child { margin-top: 0; }

.section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- План роботи ---------- */
.todo-panel { position: sticky; top: 78px; overflow: hidden; }

.todo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line);
}

.todo-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }

.todo-progress { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.todo-bar { height: 3px; background: var(--line-soft); overflow: hidden; }

.todo-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width .4s var(--ease);
}

.todo-add { display: flex; gap: 8px; padding: 13px 14px 9px; }
.todo-add input { flex: 1; }
.todo-add .btn { padding: 9px 14px; font-size: 16px; line-height: 1; }

.todo-list { padding: 5px 8px 12px; max-height: 460px; overflow-y: auto; }

.todo-empty { text-align: center; color: var(--faint); font-size: 13px; padding: 26px 16px; }
.todo-empty span { font-size: 25px; display: block; margin-bottom: 8px; }

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background .13s;
  animation: fadeUp .25s var(--ease) both;
}

.todo-item:hover { background: var(--surface-muted); }

.todo-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--line-bright);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  transition: all .16s var(--ease);
}

.todo-check:hover { border-color: var(--green); }

.todo-item.done .todo-check {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.todo-text { flex: 1; font-size: 13.5px; line-height: 1.45; word-break: break-word; }

.todo-item.done .todo-text { color: var(--faint); text-decoration: line-through; }

.todo-meta { font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); margin-top: 2px; }

.todo-del {
  opacity: 0;
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all .13s;
  flex-shrink: 0;
}

.todo-item:hover .todo-del { opacity: 1; }
.todo-del:hover { color: var(--red); background: var(--red-bg); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent-fg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s var(--ease), box-shadow .15s;
}

.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.98); }

.btn-ghost {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn-ghost:hover { background: var(--surface-muted); border-color: var(--line-bright); box-shadow: none; }

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid transparent;
}

.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; box-shadow: none; }

.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* ---------- Форми ---------- */
label.field { display: block; margin-bottom: 13px; }

label.field span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type=text], input[type=password], input[type=url], input[type=number],
select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

input::placeholder, textarea::placeholder { color: var(--faint); }

select option { background: var(--bg-2); color: var(--text); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.checks { display: flex; gap: 16px; flex-wrap: wrap; }
.checks label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }

input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Повідомлення ---------- */
.alert {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid;
  animation: fadeUp .25s var(--ease) both;
}

.alert-error { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); background: var(--red-bg); }
.alert-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); background: var(--green-glow); }

/* ---------- Розділювач ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 12px;
  margin: 16px 0;
}

.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- Таблиці ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }

table.data th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-muted); }

.badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-on { color: var(--green); background: var(--green-glow); }
.badge-off { color: var(--muted); background: var(--surface-muted); border: 1px solid var(--line); }
.badge-role { color: var(--amber); background: var(--amber-soft); }
.badge:not([class*="badge-"]) { color: var(--amber); background: var(--amber-soft); }

/* ---------- CRM: канбан-дошка угод ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-col { flex: 0 0 250px; background: var(--surface-muted); border-radius: var(--radius); padding: 10px; }
.kanban-col-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 4px 6px 10px; display: flex; justify-content: space-between; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kanban-card { display: block; color: inherit; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.kanban-card-title { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }

/* ---------- CRM: сторінка однієї угоди (lead.php) ---------- */
.back-link { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.back-link:hover { color: var(--text); }

.deal-hero { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.deal-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.deal-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.deal-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.deal-remind-btn { display: inline-flex; align-items: center; gap: 6px; }
.deal-remind-btn svg { flex: 0 0 auto; color: var(--amber); }

/* Пайплайн етапів — «шеврони», як картка процесу в OneBox. Скролиться по горизонталі. */
.pipeline { display: flex; overflow-x: auto; padding: 2px 0 18px; }
.pipe-step {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  padding: 11px 18px 11px 28px;
  margin-right: -10px;
  background: var(--surface-muted);
  color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pipe-step:first-child { padding-left: 18px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.pipe-step:last-child { margin-right: 0; }
.pipe-step:hover:not(.current) { background: var(--accent-soft); color: var(--text); }
.pipe-step.done { background: var(--amber-soft); color: var(--amber); }
.pipe-step.current { background: var(--accent); color: var(--accent-fg); }
.pipe-step:disabled { opacity: .55; cursor: default; }

.deal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.deal-col { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px) { .deal-grid { grid-template-columns: 1fr; } }

.section-head { display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.sec-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--muted); }
.sec-ic .ic-accent { color: var(--amber); }
.panel:hover .sec-ic { background: var(--amber-soft); color: var(--amber); }

.info-list { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 11px 16px; margin: 0; }
.info-list dt { font-size: 12px; color: var(--muted); }
.info-list dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
/* Для полів з CRM: назви бувають довгі («Х-ки підібраного автомобіля (рік, мотор…)») */
.info-list-wide { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 9px 16px; }
.info-list-wide dt { line-height: 1.35; }
@media (max-width: 620px) { .info-list, .info-list-wide { grid-template-columns: 1fr; gap: 3px 0; }
  .info-list dd { margin-bottom: 8px; } }

.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 16px; }
.money-cell { background: var(--surface-muted); border-radius: var(--radius-sm); padding: 10px 12px; }
.money-cell span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.money-cell b { font-family: var(--font-mono); font-size: 13px; }

/* Блок «Пошук на майданчиках»: перейшов → відфільтрував → вставив посилання → відкриваєш одним кліком */
.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.site-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
/* Стан посилання видно з першого погляду: зелене = робочий пошук із фільтрами,
   червоне/жовте = потребує уваги, сіре = ще не задано */
.site-row.st-ok { border-color: var(--green); background: var(--green-glow); }
.site-row.st-wrong_site { border-color: var(--red); background: var(--red-bg); }
.site-row.st-no_filters { border-color: var(--amber); background: var(--amber-soft); }
.site-status { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; }
.st-ok .site-status { color: var(--green); }
.st-wrong_site .site-status { color: var(--red); }
.st-no_filters .site-status { color: var(--amber); }
.st-empty .site-status { color: var(--faint); font-weight: 600; }
.site-title { font-weight: 700; }
.site-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-open { flex: 0 0 auto; white-space: nowrap; }
.site-name { display: flex; flex-direction: column; line-height: 1.25; }

.site-actions { display: flex; gap: 3px; flex: 0 0 auto; }
.site-edit { flex: 1 0 100%; display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.site-edit .site-input { flex: 1 1 200px; min-width: 0; }

/* Супутні процеси (Логістика / Сервіс / Повернення штоєра) */
.sub-list { display: flex; flex-direction: column; gap: 8px; }
.sub-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sub-item:hover { background: var(--surface-muted); }
.sub-wf { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--muted); }
.sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sub-main b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-main small { font-size: 11px; }

/* Платежі */
.pay-list { display: flex; flex-direction: column; }
.pay-item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.pay-item:last-child { border-bottom: none; }
.pay-sum { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--green); flex: 0 0 auto; }
.pay-meta { display: flex; flex-direction: column; min-width: 0; }
.pay-meta small { font-size: 11.5px; }

/* Таймлайн історії з CRM */
.timeline { max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; }
.tl-item { position: relative; padding: 10px 0 10px 16px; border-bottom: 1px solid var(--line-soft); }
.tl-item:last-child { border-bottom: none; }
.tl-item::before { content: ''; position: absolute; left: 0; top: 15px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--line-bright); }
.tl-item.k-change::before { background: var(--blue); }
.tl-item.k-pay::before { background: var(--green); }
.tl-item.k-doc::before { background: var(--amber); }
.tl-item.k-warn::before { background: var(--red); }
.tl-item.k-form::before { background: #8b5cf6; }
.tl-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.tl-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tl-body { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- CRM: кольори етапів, аватарки, обкладинки ---------- */
/* Бейдж етапу заливається РЕАЛЬНИМ кольором статусу з OneBox (колір тексту рахується по яскравості) */
.stage-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 99px; white-space: nowrap; }

/* Кольорова аватарка-ініціал: колір детермінований від імені */
.mini-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; font-weight: 700; flex: 0 0 auto; line-height: 1; }

/* Крапка кольору етапу в заголовку колонки канбану */
.stage-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* Колонка канбану: тонка кольорова смужка згори — видно етап периферійним зором */
.kanban-col { border-top: 3px solid var(--stage-color, var(--line)); }
.kanban-col-head { align-items: center; gap: 7px; }
.kanban-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Картка: обкладинка-фото авто + кольорова ліва межа етапу */
.kanban-card { padding: 0; overflow: hidden; border-left: 3px solid var(--stage-color, transparent); }
.card-cover { height: 92px; background: var(--surface-muted); overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--line-bright); }
.card-cover-empty svg { width: 40px; height: 40px; }
.card-body { padding: 9px 11px 10px; }
.card-vin { color: var(--muted); font-size: 11px; }
.card-budget { color: var(--amber); font-weight: 600; }
.card-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.chip-onebox { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--amber-soft); color: var(--amber); }

/* Стрічка: мініатюра авто + кольорова межа етапу */
.feed-item { border-left: 3px solid var(--stage-color, var(--line)); }
.feed-thumb { flex: 0 0 auto; width: 64px; height: 46px; border-radius: 8px; overflow: hidden;
  background: var(--surface-muted); margin-right: 12px; }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--line-bright); }
.feed-thumb-empty svg { width: 26px; height: 26px; }
.feed-mgr { display: inline-flex; align-items: center; gap: 6px; }

/* Перемикач виглядів CRM: канбан / стрічка / таблиця */
.view-switch { display: inline-flex; background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.view-switch button { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.view-switch button:hover { color: var(--text); }
.view-switch button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-xs); }

/* Вигляд «Стрічка» */
.feed-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; }
.feed-item:hover { box-shadow: var(--shadow-sm); }
.feed-main { min-width: 0; }
.feed-title { font-weight: 600; font-size: 14px; }
.feed-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) { .feed-item { flex-direction: column; align-items: flex-start; } .feed-side { justify-content: flex-start; } }

/* Вигляд «Таблиця»: рядок клікабельний */
table.data tr.row-link { cursor: pointer; }

/* Галерея фото угоди (завантажені з CRM) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.gallery-item { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-muted); transition: box-shadow .15s, transform .15s; }
.gallery-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.gallery-item img { display: block; width: 100%; height: 96px; object-fit: cover; background: var(--surface-muted); }
.gallery-item span { display: block; padding: 6px 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Документи (PDF тощо) */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc-item:hover { background: var(--surface-muted); }
.doc-ext { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 5px 8px; border-radius: 6px; background: var(--amber-soft); color: var(--amber); }
.doc-meta { display: flex; flex-direction: column; min-width: 0; }
.doc-meta b { font-size: 13px; }
.doc-meta small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Інлайн-редагування полів угоди */
.field-cell { position: relative; padding-right: 66px; }
.field-actions { position: absolute; top: -2px; right: 0; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.field-cell:hover .field-actions, .field-cell:focus-within .field-actions { opacity: 1; }
.field-btn { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; width: 22px; height: 22px; line-height: 1; font-size: 11px; cursor: pointer; padding: 0; }
.field-btn:hover { color: var(--text); border-color: var(--line-bright); }
.field-edit { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; flex-wrap: wrap; }
.field-edit .field-input { flex: 1 1 180px; min-width: 0; }
.field-cell.is-empty .field-value { color: var(--faint); }
.field-cell.is-empty { opacity: .85; }

.note-compose { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.note-compose textarea { resize: vertical; }
.note-compose .btn { align-self: flex-start; }
.notes-feed { max-height: 540px; overflow-y: auto; }
.note-item { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.note-item:last-child { border-bottom: none; }
.note-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.note-body { font-size: 13.5px; line-height: 1.55; }

/* ---------- Рядок деталей угоди (Аналітика авто: редагування сум) ---------- */
tr.deal-row td.act-toggle-row { color: var(--muted); }
tr.detail-row td { background: var(--surface-muted); border-bottom: 1px solid var(--line-soft); padding: 14px 20px; }
.detail-panel { display: flex; flex-direction: column; gap: 8px; }
.edit-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.edit-field .edit-label { min-width: 160px; color: var(--muted); font-size: 12px; }
.edit-field .edit-display { min-width: 100px; }

/* ---------- Сторінка входу ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 15%, var(--amber-glow), transparent 45%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 50%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 410px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 32px 30px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .4s var(--ease) both;
}

.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }

.login-brand .brand-mark { width: 46px; height: 46px; font-size: 19px; border-radius: 13px; }

.login-title { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }

.login-title small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0;
}

.login-note { margin-top: 18px; font-size: 12px; color: var(--faint); text-align: center; }

/* ---------- Карта ---------- */
.map-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 57px);
}

.map-side {
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.map-side-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }

.map-side-head h1 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }

/* Пошук найближчого */
.nearest-box {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-muted);
}

.nearest-box-main { flex: 1; border-bottom: none; overflow-y: auto; }

.nearest-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nearest-label svg { color: var(--amber); flex-shrink: 0; }

.nearest-row { display: flex; gap: 8px; }
.nearest-row input { flex: 1; background: var(--bg-2); }

.nearest-result { margin-top: 12px; }

.nearest-lead {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 4px;
}

.nearest-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.nearest-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }

.nearest-stats { display: flex; gap: 8px; margin-bottom: 11px; }

.nearest-stats > div {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.nearest-stats .stat-num { display: block; font-family: var(--font-mono); font-weight: 600; }
.nearest-stats .stat-label { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }

.nearest-top5 { display: flex; flex-direction: column; }

.nearest-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  border-top: 1px solid var(--line-soft);
  transition: background .12s;
}

.nearest-row-item:first-child { border-top: none; }
.nearest-row-item:hover { background: var(--bg-2); }

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 19px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.rank-badge.rank-top {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.nearest-km { font-size: 11.5px; font-weight: 700; color: var(--green); white-space: nowrap; }

/* Варіанти маршруту до найближчого підборщика (як у Google Maps) */
.route-alts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }

.route-alt-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.route-alt-btn:hover { background: var(--surface-muted); }

.route-alt-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.route-alt-nums { font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--muted); }

.route-alt-btn.active { border-color: var(--amber); background: var(--amber-soft); }
.route-alt-btn.active .route-alt-label,
.route-alt-btn.active .route-alt-nums { color: var(--amber); }

#map { height: 100%; min-height: 400px; background: var(--surface-muted); }

/* Leaflet: приглушені тайли у світлій, інверсія у темній */
.leaflet-tile-pane { filter: grayscale(45%); }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.75) invert(1) contrast(0.9) hue-rotate(190deg) saturate(0.35) brightness(0.9); }
.leaflet-container { background: var(--surface-muted); font-family: var(--font-body); }
[data-theme="dark"] .leaflet-container { background: #0a0c0e; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-content { margin: 13px 16px; font-size: 13.5px; }
.leaflet-popup-content b { font-size: 15px; }
.leaflet-popup-content a { color: var(--amber); }
.leaflet-bar a { background: var(--bg-2); color: var(--text); border-color: var(--line); }
.leaflet-bar a:hover { background: var(--surface-muted); }

/* Фірмові SVG-піни на карті */
.pin-ill {
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  transition: transform .15s var(--ease);
  transform-origin: 50% 100%;
}

.leaflet-marker-icon:hover .pin-ill { transform: scale(1.08); }

/* ---------- Модальне вікно ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 18, 0.5);
  backdrop-filter: blur(5px);
  z-index: 900;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 20px 20px;
  overflow-y: auto;
}

[data-theme="dark"] .modal-back { background: rgba(0, 0, 0, 0.65); }

.modal-back.open { display: flex; }

.modal {
  width: 100%;
  max-width: 550px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  animation: fadeUp .3s var(--ease) both;
  box-shadow: var(--shadow-lg);
}

.modal h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.hint { font-size: 12px; color: var(--faint); margin-top: 4px; }

/* ---------- Вбудований сервіс ---------- */
.embed-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.embed-bar h1 { font-size: 14.5px; font-weight: 700; flex: 1; }

.embed-frame { flex: 1; border: none; width: 100%; min-height: 0; background: #fff; }

/* ---------- Статистика ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .2s;
}

.stat:hover { border-color: var(--line-bright); box-shadow: var(--shadow-sm); }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover .stat-num { color: var(--sec, var(--amber)); }

.stat .stat-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat .stat-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-weight: 600;
}

/* ---------- Швидкі контакти (дзвінок / Telegram / WhatsApp / Viber) ---------- */
.contact-links { display: inline-flex; gap: 6px; align-items: center; }

.cl {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  transition: transform .15s var(--ease), filter .15s, box-shadow .15s;
}

.cl svg { width: 13px; height: 13px; display: block; }
.cl:hover { transform: translateY(-1px) scale(1.1); filter: brightness(1.1); box-shadow: var(--shadow-sm); }

.cl-call { background: var(--accent); color: var(--accent-fg); }
.cl-tg { background: #229ed9; color: #fff; }
.cl-wa { background: #25d366; color: #fff; }
.cl-vb { background: #7360f2; color: #fff; }

/* ---------- Картка підборщика (попап карти / список найближчих / таблиця налаштувань) ---------- */
.scout-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.scout-avatar-sm { width: 27px; height: 27px; font-size: 12px; }

.scout-card { min-width: 230px; }

.scout-card-head { display: flex; align-items: center; gap: 10px; }

.scout-head-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.scout-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.scout-city { font-size: 12px; font-weight: 600; color: var(--amber); }

.scout-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.4;
}

.scout-row svg { flex-shrink: 0; margin-top: 2px; color: var(--faint); }
.scout-row.scout-phone { color: var(--text); font-weight: 600; }

.scout-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.scout-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--muted);
}

.scout-card-links { margin-top: 10px; }

.scout-note {
  margin-top: 9px;
  padding: 8px 10px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.scout-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--amber);
}

/* Список "5 найближчих" — компактний варіант тієї ж мови */
.nearest-row-item .scout-avatar-sm { margin-right: 1px; }

/* Таблиця налаштувань карти — той самий стиль аватарки й тегів */
table.data .scout-cell { display: flex; align-items: center; gap: 10px; }
table.data .scout-tags { margin-top: 4px; }

/* ---------- Сховище доступів ---------- */
.cred-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.cred-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.cred-main { min-width: 0; flex: 1; }

.cred-title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }

.cred-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.cred-pass { letter-spacing: 0.03em; }

.cred-note { font-size: 12.5px; color: var(--muted); margin-top: 5px; max-width: 520px; }

.cred-lastview { font-size: 10.5px; color: var(--faint); margin-top: 6px; }

.cred-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 260px;
}

.icon-mini {
  width: 22px;
  height: 22px;
  border: none;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.icon-mini:hover { background: var(--accent); color: var(--accent-fg); }
.icon-mini svg { width: 12px; height: 12px; }

@media (max-width: 720px) {
  .cred-row { flex-direction: column; }
  .cred-actions { max-width: none; justify-content: flex-start; }
}

/* ---------- Ілюстрації ---------- */
.ic-accent { stroke: var(--amber); }

.quick-ic svg, .tile-icon svg { display: block; color: var(--muted); }
.quick-card:hover .quick-ic svg, .tile:hover .tile-icon svg { color: var(--text); }

.todo-empty span svg { color: var(--faint); }

.hero-art {
  flex: 0 1 230px;
  align-self: center;
  color: var(--faint);
  min-width: 0;
}

.hero-art svg { width: 100%; height: auto; display: block; }

/* ---------- Налаштування карти ---------- */
.settings-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.coords-block {
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius-sm);
  padding: 13px 14px 11px;
  background: var(--surface-muted);
}

.coords-block .hint { display: block; margin-top: 8px; }

/* ---------- Мито: панель налаштувань ---------- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.settings-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}

.settings-val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
}

@media (max-width: 640px) {
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Скролбари ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---------- Адаптивність ---------- */
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .todo-panel { position: static; }
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .mainnav { order: 3; width: 100%; overflow: visible; }
  .content { padding: 20px 14px 46px; }
  .hero { flex-direction: column; align-items: flex-start; padding: 22px 20px 18px; }
  .hero-time { text-align: left; }
  .hero-art { display: none; }
  .map-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: auto; }
  .map-side { order: 2; border-right: none; border-top: 1px solid var(--line); max-height: 60vh; }
  #map { min-height: 55vh; }
  .form-row { grid-template-columns: 1fr; }
  .user-name, .user-role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Акценти: щоб важливе одразу впадало в око ---------- */
.money-cell b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.money-cell span { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
/* Значення ключових полів у «Основне» — помітніші за решту */
.deal-col .panel:nth-of-type(2) .info-list-wide dd { font-weight: 600; }
.pay-sum { font-size: 15px; font-weight: 700; }
/* Збережений пошук виразно відрізняється від «ще не налаштовано» */
.site-row.st-ok { border-width: 1.5px; }
.tl-kind { font-weight: 800; }
.deal-title { font-size: 27px; }

/* ---------- Тематичні кольори блоків ---------- */
/* Кожен блок має свій колір: гроші — зелені, пошук — фіолетовий, ПДВ — червоний тощо.
   Використовуємо як заливку іконки, смужку згори панелі й колір відбивки заголовка. */
.th-blue   { --sec: #2563eb; --sec-bg: #e8efff; }
.th-amber  { --sec: #d97706; --sec-bg: #fef3e2; }
.th-green  { --sec: #0f7a45; --sec-bg: #e7f5ee; }
.th-violet { --sec: #7c3aed; --sec-bg: #f1e9fe; }
.th-cyan   { --sec: #0891b2; --sec-bg: #e2f6fb; }
.th-orange { --sec: #ea580c; --sec-bg: #ffeee4; }
.th-pink   { --sec: #db2777; --sec-bg: #fde8f2; }
.th-indigo { --sec: #4f46e5; --sec-bg: #eaeaff; }
.th-red    { --sec: #c0332b; --sec-bg: #fbe9e8; }
.th-slate  { --sec: #5f6368; --sec-bg: #eef0f3; }
/* Синій прапора США — для розділу з американськими аукціонами */
.th-usa    { --sec: #3c3b6e; --sec-bg: #e9ebf7; --sec-on: #ffffff; }

[data-theme="dark"] .th-blue   { --sec: #7aa5ff; --sec-bg: rgba(37,99,235,.16); }
[data-theme="dark"] .th-amber  { --sec: #fbbf24; --sec-bg: rgba(245,158,11,.16); }
[data-theme="dark"] .th-green  { --sec: #4ade80; --sec-bg: rgba(34,197,94,.16); }
[data-theme="dark"] .th-violet { --sec: #b794fb; --sec-bg: rgba(124,58,237,.20); }
[data-theme="dark"] .th-cyan   { --sec: #4dd0e8; --sec-bg: rgba(8,145,178,.18); }
[data-theme="dark"] .th-orange { --sec: #fb923c; --sec-bg: rgba(234,88,12,.18); }
[data-theme="dark"] .th-pink   { --sec: #f472b6; --sec-bg: rgba(219,39,119,.18); }
[data-theme="dark"] .th-indigo { --sec: #a5b4fc; --sec-bg: rgba(79,70,229,.20); }
[data-theme="dark"] .th-red    { --sec: #f87171; --sec-bg: rgba(239,68,68,.16); }
[data-theme="dark"] .th-slate  { --sec: #a3a8b2; --sec-bg: rgba(160,165,175,.14); }
[data-theme="dark"] .th-usa    { --sec: #a9a8e0; --sec-bg: rgba(60,59,110,.34); --sec-on: #171a1f; }

/* Кольорова смужка згори панелі + іконка й заголовок у тон теми */
.panel[class*="th-"] { border-top: 3px solid var(--sec); }
.panel[class*="th-"] .sec-ic { background: var(--sec-bg); color: var(--sec); }
.panel[class*="th-"] .sec-ic .ic-accent { color: var(--sec); }
.panel[class*="th-"]:hover .sec-ic { background: var(--sec); color: #fff; }
.panel[class*="th-"]:hover .sec-ic .ic-accent { color: #fff; }
.panel[class*="th-"] .section-head { border-bottom-color: var(--sec-bg); }

/* ---------- Поля: щоб не зливались у суцільний список ---------- */
.info-list dt, .info-list dd { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.info-list dt { padding-left: 10px; border-left: 2px solid transparent; }
.info-list dd { padding-right: 4px; }
/* Останній рядок — без лінії */
.info-list dt:nth-last-of-type(1), .info-list dd:nth-last-of-type(1) { border-bottom: none; }
/* Наведення підсвічує ВЕСЬ рядок (мітку й значення разом) */
.info-list dt:hover, .info-list dt:hover + dd,
.info-list dd:hover, .info-list dt:has(+ dd:hover) {
  background: var(--sec-bg, var(--surface-muted));
}
.info-list dt:hover, .info-list dt:has(+ dd:hover) { border-left-color: var(--sec, var(--line-bright)); }
/* Мітка приглушена, значення — контрастне: пара «що» / «яке саме» читається з першого погляду */
.info-list dt { color: var(--muted); font-weight: 500; }
.info-list dd { color: var(--text); font-weight: 500; }
.info-list dd .muted { font-weight: 400; }

/* ---------- Воронка «Штоєр (ПДВ)» ---------- */
.col-sum { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--sec, var(--amber));
  padding: 0 6px 8px; }
.sh-card .card-body { padding: 10px 12px 11px; }
.sh-amount { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--green); margin-top: 3px; }
.sh-card .card-foot { flex-wrap: wrap; gap: 6px; }
.stat .stat-num b { font-family: var(--font-mono); }

/* ---------- Підменю підсистеми CRM ---------- */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 20px;
  padding: 4px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius); }
.subnav a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px;
  transition: background .15s, color .15s; }
.subnav a:hover { color: var(--text); background: var(--panel); }
.subnav a.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-xs); }
.subnav a.active .ic-accent { color: var(--amber); }
.subnav-group { align-self: center; padding: 0 5px 0 9px; color: var(--faint); font-size: 9.5px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.subnav-group:not(:first-child) { margin-left: 5px; border-left: 1px solid var(--line-bright); }


/* ---------- Задачі в CRM ---------- */
.task-list { display: flex; flex-direction: column; }
.task-item { display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: 13.5px; }
.task-item:last-child { border-bottom: none; }
.task-item.is-done .task-title { text-decoration: line-through; color: var(--faint); }
.task-item .field-btn { opacity: 0; }
.task-item:hover .field-btn { opacity: 1; }

/* ---------- Горизонтальні стовпчики (де зараз угоди) ---------- */
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bar-label { flex: 0 0 40%; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 8px; background: var(--surface-muted); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; }
.bar-num { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12.5px; min-width: 24px; text-align: right; }
.bar-row:hover .bar-label { color: var(--amber); }

/* Операційний центр CRM: що потребує дії сьогодні. */
.attention-intro { margin: 0 0 10px; }
.attention-list { display: flex; flex-direction: column; gap: 7px; }
.attention-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: inherit;
  text-decoration: none; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel); transition: border-color .15s, transform .15s var(--ease); }
.attention-row:hover { border-color: var(--amber); transform: translateX(2px); }
.attention-status { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft); }
.attention-row.is-critical .attention-status { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.attention-reason { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.attention-reason b { color: var(--red); font-size: 10.5px; }
.attention-reason small { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
@media (max-width: 620px) {
  .attention-row { align-items: flex-start; }
  .attention-reason { text-align: left; }
}

/* ---------- Документи: конструктор і бланки ---------- */
.alert-warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); background: var(--amber-soft); }

/* Сітка шаблонів */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.tpl-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--amber), color-mix(in srgb, var(--amber) 20%, transparent));
}
.tpl-card.is-off { opacity: .55; }
.tpl-card.is-off::before { background: var(--line); }
.tpl-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.tpl-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; }
.tpl-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
a.tpl-pick { text-decoration: none; color: inherit; transition: transform .15s var(--ease), border-color .15s var(--ease); }
a.tpl-pick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

/* Каталог плейсхолдерів у конструкторі */
.ph-group + .ph-group { margin-top: 14px; }
.ph-group-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ph-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 10px; margin-bottom: 5px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: inherit;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.ph-chip:hover { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.ph-label { font-size: 12.5px; }
.ph-chip code { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ph-chip:hover code { color: var(--amber); }

/* Панель дій над документом */
.doc-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.doc-tpl-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.doc-warn-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-warn-list span {
  font-size: 11.5px; padding: 3px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
}
.doc-ext-own { background: color-mix(in srgb, var(--indigo, #6366f1) 16%, transparent); color: var(--indigo, #6366f1); }

/* Сам бланк — навмисно «папір»: білий, чорний текст, як у роздруку */
.doc-paper {
  background: #fff; color: #111; max-width: 820px; margin: 0 auto;
  padding: 46px 54px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.doc-paper h1, .doc-paper h2, .doc-paper h3 { font-family: Georgia, 'Times New Roman', serif; color: #111; margin: 0 0 12px; }
.doc-paper h1 { font-size: 19px; text-align: center; }
.doc-paper h2 { font-size: 16px; }
.doc-paper p { margin: 0 0 10px; }
.doc-paper table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.doc-paper td, .doc-paper th { border: 1px solid #999; padding: 6px 9px; font-size: 13px; vertical-align: top; }
.doc-paper hr { border: 0; border-top: 1px solid #bbb; margin: 16px 0; }
.doc-editable:focus { outline: 2px solid var(--amber); outline-offset: 3px; }
.doc-missing { background: #ffe0dd; color: #b3261e; padding: 0 3px; border-radius: 3px; }
.doc-empty { color: #888; letter-spacing: .06em; }

@media print {
  .no-print, .topbar, .footer, .subnav, .theme-float, .page-title, .page-sub, .doc-toolbar, .alert, .hint { display: none !important; }
  body, .content { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .doc-paper { border: 0; box-shadow: none; max-width: none; padding: 0; margin: 0; }
  .doc-empty { color: #000; }
  .doc-missing { background: transparent; color: #000; }
}

/* Завантаження бланка з Word */
.doc-import-panel { margin-bottom: 16px; }
.doc-import { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.doc-import input[type=text] { flex: 1; min-width: 150px; }
.doc-import input[type=file] { font-size: 12.5px; max-width: 100%; }
.doc-import input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; padding: 6px 11px; margin-right: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); color: inherit;
}
.doc-import input[type=file]::file-selector-button:hover { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.doc-import-inline { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.doc-import-ic { display: inline-flex; color: var(--muted); }

/* ---------- CRM: колонка фільтрів зліва ---------- */
.crm-layout { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 18px; align-items: start; }
.crm-side { position: sticky; top: 14px; }
.crm-main { min-width: 0; }
.crm-main-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.crm-filters {
  --pp-x: 15px; --pp-y: 14px;
  padding: var(--pp-y) var(--pp-x);
  border-left: 3px solid var(--line); transition: border-left-color .18s var(--ease);
}
.crm-filters.has-active { border-left-color: var(--amber); }

.side-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 11px; margin-bottom: 13px; border-bottom: 1px solid var(--line);
}
.side-head span { flex: 1; }
.side-head .btn { padding: 3px 9px; font-size: 11px; }
.side-foot {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line);
}

.f-item { display: flex; flex-direction: column; gap: 5px; margin: 0 0 13px; }
.f-item > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.f-item select, .f-item input { margin: 0; width: 100%; }

/* Випадайка всередині підпису — «Ціна закупівлі / продажу» одним рядком */
.f-inline {
  display: inline-block; width: auto !important; min-width: 0; margin: 0 0 0 2px; padding: 0 17px 0 3px;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--amber); background-color: transparent; border: 0; border-bottom: 1px dashed currentColor;
  border-radius: 0; height: auto; cursor: pointer;
}
.f-price-row { display: flex; align-items: center; gap: 6px; }
.f-price-row input { min-width: 0; flex: 1; }
.f-cur { margin-top: 6px !important; }
.f-dash { color: var(--faint); flex: 0 0 auto; }

.f-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; margin: 0; }
.f-saved { font-size: 11px; color: var(--green); }

.filter-note {
  margin-top: 13px; padding: 8px 10px; font-size: 12px; line-height: 1.45;
  border-radius: var(--radius-sm); background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
}

/* Ціни на картках і в списках */
.card-budget { color: var(--green); font-weight: 600; }
.price-sale { color: var(--amber); }
.feed-price { font-family: var(--font-mono); font-size: 12px; color: var(--green); font-weight: 600; margin-top: 2px; }
.table-price { display: flex; gap: 6px; white-space: nowrap; color: var(--green); font-weight: 600; }

/* На вузькому екрані фільтри повертаються нагору звичайним блоком */
@media (max-width: 1000px) {
  .crm-layout { grid-template-columns: 1fr; }
  .crm-side { position: static; }
  .crm-filters { margin-bottom: 4px; }
}

/* На дуже широких моніторах картка угоди й конструктор документів обмежуються —
   рядок тексту довжиною в пів екрана нечитабельний. Канбан і таблиці лишаються на всю ширину. */
body.wide .deal-grid { max-width: 1700px; }


/* ---------- Задачі з нагадуваннями ---------- */
.task-item { align-items: flex-start; }
.task-check { margin-top: 3px; flex: 0 0 auto; }
.task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.task-title { font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }

.task-due { font-weight: 600; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.task-due-overdue { color: #fff; background: var(--red); }
.task-due-today { color: #fff; background: var(--amber); }
.task-due-soon { color: var(--amber); background: var(--amber-soft); }
.task-due-later { color: var(--muted); background: var(--surface-muted); }
.task-item.is-overdue { background: var(--red-bg); margin: 0 -8px; padding: 8px; border-radius: var(--radius-sm); border-bottom-color: transparent; }
.task-item.is-done .task-due { opacity: .45; }

.task-bell { color: var(--muted); white-space: nowrap; }
.task-bell-ok { color: var(--green); }
.task-bell-bad { color: var(--red); }
.task-lead { color: var(--amber); text-decoration: none; }
.task-lead:hover { text-decoration: underline; }
.task-from { color: var(--faint); }
.task-count-bad { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--red); padding: 2px 8px; border-radius: 99px; }

/* Форма додавання задачі */
.task-add { margin-bottom: 13px; }
.task-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-add-row input[type=text] { flex: 1; min-width: 150px; margin: 0; }
.task-add-opts { margin-top: 8px; gap: 12px; }
.task-opt { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.task-opt input, .task-opt select { margin: 0; width: auto; font-size: 12.5px;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.task-opt-check { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; cursor: pointer; }
.task-quick { display: flex; gap: 5px; }
.chip-btn {
  font: inherit; font-size: 11.5px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted);
}
.chip-btn:hover { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); }

.task-tg-warn {
  margin-bottom: 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  border-radius: var(--radius-sm); background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
}
.task-tg-warn a { color: var(--amber); font-weight: 600; }
.task-tg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* ============================================================
   Дизайн-прохід по блоках: колір, глибина, однакова мова
   ============================================================ */

/* ---- Панелі: м'якша глибина й тонший верхній акцент ---- */
.panel { transition: box-shadow .22s var(--ease), border-color .18s var(--ease); }
.panel:hover { box-shadow: var(--shadow-sm); }
.panel[class*="th-"] {
  border-top-width: 0;
  position: relative;
  overflow: hidden;
}
/* Акцент — окремим шаром: не з'їдає верхній радіус і не зсуває вміст */
.panel[class*="th-"]::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 35%, transparent));
  pointer-events: none;
}

/* ---- Заголовок блоку ---- */
.section-head { font-size: 13.5px; letter-spacing: -0.015em; }
.sec-ic { width: 30px; height: 30px; border-radius: 10px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.panel:hover .sec-ic { transform: scale(1.06); }

/* ---- Плитки модулів: колір теми в іконці й на наведенні ---- */
.tile { overflow: hidden; }
.tile[class*="th-"]::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 30%, transparent));
  opacity: 0; transition: opacity .2s var(--ease);
}
.tile[class*="th-"]:hover::after { opacity: 1; }
.tile[class*="th-"] .tile-icon {
  background: var(--sec-bg); border-color: color-mix(in srgb, var(--sec) 18%, transparent); color: var(--sec);
}
.tile[class*="th-"] .tile-icon .ic-accent { color: var(--sec); }
.tile[class*="th-"]:hover { border-color: color-mix(in srgb, var(--sec) 38%, transparent); }
.tile[class*="th-"]:hover .tile-icon { background: var(--sec); color: #fff; }
.tile[class*="th-"]:hover .tile-icon .ic-accent { color: #fff; }

/* Плитка калькулятора США: замість однотонної смужки — прапор (синє поле + смуги),
   і видно його завжди, а не лише при наведенні: це впізнавальний знак розділу */
.tile.th-usa::after {
  opacity: 1;
  height: 6px;
  background:
    linear-gradient(90deg, #3c3b6e 0 26%, transparent 26%),
    repeating-linear-gradient(180deg, #b22234 0 2px, #fff 2px 4px);
}
/* Синій прапора темніший за решту кольорів плиток, тож при наведенні значок
   на ньому має бути світлим (а в темній темі, де плашка світла, — навпаки).
   Колір задає --sec-on: стандартне правило фарбує значок у колір тексту,
   і на темно-синьому він би злився */
.tile.th-usa:hover .tile-icon svg { color: var(--sec-on); }
.tile.th-usa:hover .tile-icon .ic-accent { stroke: var(--sec-on); }
.tile-tag { background: transparent; }

/* ---- Статистичні плитки: колір + іконка ---- */
.stat { position: relative; overflow: hidden; padding-top: 17px; }
.stat[class*="th-"] { border-top: 0; }
.stat[class*="th-"]::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 30%, transparent));
}
.stat-ic {
  position: absolute; top: 13px; right: 13px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--sec-bg, var(--surface-muted)); color: var(--sec, var(--faint));
  transition: transform .2s var(--ease);
}
.stat:hover .stat-ic { transform: scale(1.08); }
.stat-ic .ic-accent { color: currentColor; }
.stat .stat-num { position: relative; z-index: 1; }

/* ---- Порожні стани: один вигляд на весь дашборд ---- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--line-bright); border-radius: var(--radius-sm); background: var(--surface-muted);
}
.empty-state svg { width: 34px; height: 34px; color: var(--faint); }
.empty-state b { color: var(--text); font-size: 13.5px; }

/* ---- Картка канбану: обкладинка без фото — тонка кольорова смужка, а не сіра пляма ---- */
.card-cover-empty {
  height: 30px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--stage-color, var(--line-bright)) 16%, transparent),
    color-mix(in srgb, var(--stage-color, var(--line-bright)) 4%, transparent));
  color: color-mix(in srgb, var(--stage-color, var(--faint)) 62%, transparent);
}
.card-cover-empty svg { width: 22px; height: 22px; }
.kanban-card { overflow: hidden; transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.kanban-card:hover { border-color: color-mix(in srgb, var(--stage-color) 45%, transparent); }
.kanban-col { background: color-mix(in srgb, var(--stage-color) 5%, var(--surface-muted)); }
/* Колір етапу приглушуємо текстом теми — інакше світло-жовті стадії на білому не читаються */
.kanban-col-head { color: color-mix(in srgb, var(--stage-color) 65%, var(--text)); }
.kanban-col-head .muted { color: var(--muted); }

/* ---- Поля вводу: однакові скрізь, включно з датою ---- */
input[type="datetime-local"], input[type="date"], input[type="time"] {
  font-family: var(--font-body); color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--amber) 55%, transparent); outline-offset: 1px;
}

/* ---- Підменю CRM ---- */
.subnav a { transition: background .15s var(--ease), color .15s var(--ease); }

/* ---- Заголовок «План роботи» на головній ---- */
.todo-head h2 { display: flex; align-items: center; gap: 9px; }

/* Опції задачі у вузькій колонці «План роботи» — окремим рядком, не тиснуться */
.todo-opts { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
.todo-opts .task-opt { justify-content: space-between; }
.todo-opts input[type="datetime-local"] { flex: 1; max-width: 190px; }
.todo-list .empty-state { margin: 6px; }

/* Швидкі картки на головній — іконка в тон модуля */
.quick-card[class*="th-"] .quick-ic { background: var(--sec-bg); color: var(--sec); }
.quick-card[class*="th-"] .quick-ic .ic-accent { color: var(--sec); }
.quick-card[class*="th-"]:hover { border-color: color-mix(in srgb, var(--sec) 38%, transparent); }
.quick-card[class*="th-"]:hover .quick-ic { background: var(--sec); color: #fff; }
.quick-card[class*="th-"]:hover .quick-ic .ic-accent { color: #fff; }

/* ---- Пошук на майданчиках: назва не має перекриватися кнопкою ---- */
/* У вузькій колонці назва + «Відкрити пошук» + 3 іконки не вміщались в один рядок,
   і назву обрізало. Тепер назва завжди своїм рядком, дії — під нею. */
.site-row { align-items: center; }
.site-name { flex: 1 1 100%; min-width: 0; }
.site-name > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-open { flex: 1 1 auto; text-align: center; }
.site-actions { margin-left: auto; }
.site-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ============================================================
   Поля дати й часу — сучасний вигляд замість системного
   ============================================================ */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  padding-right: 8px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
input[type="date"]:hover, input[type="time"]:hover,
input[type="datetime-local"]:hover, input[type="month"]:hover {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: var(--amber-soft);
}
/* Власна іконка календаря замість системної */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  width: 17px; height: 17px; padding: 0; margin-left: 4px; cursor: pointer;
  opacity: .5; transition: opacity .15s var(--ease), transform .15s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-size: 17px; background-repeat: no-repeat; background-position: center;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; transform: scale(1.08); }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
/* Порожнє поле дати — приглушене, заповнене — контрастне */
input[type="datetime-local"]:not(:focus):invalid,
input[type="date"]:not(:focus):invalid { color: var(--faint); }

/* Швидкі підказки часу біля поля дати */
.date-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.date-quick .chip-btn { padding: 4px 9px; font-size: 11px; }
.date-quick .chip-btn.is-active { background: var(--amber); border-color: var(--amber); color: #fff; }

/* Поле дати з підписом — компактний блок */
.date-field { display: inline-flex; align-items: center; gap: 7px; }
.date-field > label { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
/* Плитка, забарвлена кольором етапу CRM (штоєр) */
.stat-stage { border-top: 0; position: relative; overflow: hidden; }
.stat-stage::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 30%, transparent)); }

/* Нативні елементи (календар, випадайки, смуги прокрутки) мають слухатись теми —
   інакше в темній темі поле дати й сам календар лишаються білими плямами. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Картки бланків — колір смужки за категорією документа */
.tpl-card[data-cat="Договір"]    { --sec: #2563eb; }
.tpl-card[data-cat="Рахунок"]    { --sec: #0f7a45; }
.tpl-card[data-cat="Акт"]        { --sec: #7c3aed; }
.tpl-card[data-cat="Розрахунок"] { --sec: #ea580c; }
.tpl-card::before { background: linear-gradient(180deg, var(--sec, var(--amber)),
  color-mix(in srgb, var(--sec, var(--amber)) 20%, transparent)); }
.tpl-cat { color: var(--sec, var(--amber)); }
a.tpl-pick:hover { border-color: color-mix(in srgb, var(--sec, var(--amber)) 45%, transparent); }
/* Чекбокс «нагадати в Telegram» — підпис поруч із галочкою, а не притиснутий до краю */
.todo-opts .task-opt-check { justify-content: flex-start; gap: 8px; }
/* Підказка про сумісність із розміткою OneBox */
.ph-note {
  margin-bottom: 14px; padding: 9px 11px; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  border-radius: var(--radius-sm); background: var(--surface-muted); border: 1px solid var(--line);
}
.ph-note code { font-family: var(--font-mono); font-size: 10.5px; color: var(--amber); }
/* Зображення в бланку (логотип) не мають вилазити за поля аркуша */
.doc-paper img { max-width: 100%; height: auto; }
/* Розрив сторінки в документі: на екрані — помітна межа аркушів, на друку — новий аркуш */
.doc-paper .page-break {
  height: 0; margin: 30px -54px; border-top: 2px dashed var(--line-bright);
  position: relative;
}
.doc-paper .page-break::after {
  content: 'новий аркуш'; position: absolute; top: -8px; left: 54px;
  padding: 0 8px; font-family: var(--font-body); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa0a6; background: #fff;
}
@media print {
  .doc-paper .page-break { break-before: page; page-break-before: always; border: 0; margin: 0; height: 0; }
  .doc-paper .page-break::after { display: none; }
}

/* ---------- ФОПи та каси ---------- */
.row-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row-fields .field { flex: 1; min-width: 150px; }

.fop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fop-card { display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--amber); }
.fop-card.is-off { opacity: .6; border-left-color: var(--line); }
.fop-head { display: flex; align-items: center; gap: 11px; }
.fop-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 62%, #000));
}
.fop-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.fop-req { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: 12.5px; }
.fop-req dt { color: var(--muted); }
.fop-req dd { margin: 0; overflow-wrap: anywhere; }
.fop-req dd.mono { font-family: var(--font-mono); font-size: 11.5px; }

.fop-cash { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.fop-cash-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.fop-bal { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--green); }
.fop-bal.is-neg { color: var(--red); }
.fop-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.cash-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cash-sum { font-weight: 600; color: var(--green); white-space: nowrap; }
.cash-sum.is-out { color: var(--red); }

/* Сторони документа над бланком */
.doc-parties { margin-bottom: 12px; padding: 12px 15px;
  border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius-sm);
  background: var(--panel); }
.doc-parties-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.doc-party { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--muted); text-decoration: none; }
a.doc-party:hover { color: var(--amber); }
@media print { .doc-parties { display: none !important; } }
/* Готовність даних клієнта до договору */
.chip-ok { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
  color: var(--green); background: var(--green-glow); white-space: nowrap; }
.chip-gap { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px;
  color: var(--amber); background: var(--amber-soft); }
/* Розпізнавання документа клієнта */
.modal-ocr { max-width: 720px; }
.ocr-bar { height: 6px; border-radius: 99px; background: var(--surface-muted); overflow: hidden; margin-bottom: 12px; }
.ocr-bar span { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; }
.ocr-table td { vertical-align: middle; }
.ocr-table input[type="text"] { margin: 0; padding: 5px 8px; font-size: 13px; width: 100%; }
.ocr-val.ocr-ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.ocr-val.ocr-weak { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.ocr-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--amber);
  cursor: pointer; text-decoration: underline; }
.ocr-btn:hover { color: var(--text); }

/* Обведення потрібного рядка на документі */
.ocr-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; line-height: 1.45; }
.ocr-canvas { position: relative; display: block; max-height: 48vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted);
  cursor: crosshair; touch-action: none; }
.ocr-canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ocr-sel { position: absolute; border: 2px solid var(--amber); pointer-events: none;
  background: color-mix(in srgb, var(--amber) 14%, transparent); }
.ocr-manual { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-muted); font-size: 13px; }
.ocr-manual-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ocr-manual-row select { margin: 0; flex: 0 0 auto; }
.ocr-manual-row input { margin: 0; flex: 1 1 160px; min-width: 0; }

@media (max-width: 620px) {
  .modal-ocr { max-width: 100%; }
  .ocr-table th:nth-child(4), .ocr-table td:nth-child(4) { display: none; }
  .ocr-canvas { max-height: 40vh; }
}

/* Застряглі угоди на огляді CRM */
.stuck-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  transition: background .15s; }
.stuck-row:hover { background: var(--surface-muted); }
.stuck-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.stuck-main b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stuck-main small { font-size: 11.5px; }
.stuck-days { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--amber); background: var(--amber-soft); padding: 3px 9px; border-radius: 99px; }

/* Валюту в CRM не вказали — рахували за замовчуванням, суму варто перевірити */
.cur-guess { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
  border-radius: 50%; font-size: 10px; cursor: help;
  color: var(--amber); background: var(--amber-soft); }
/* Набір позначок в один рядок з переносом (напр. невпізнані імена з CRM) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip-gap { font-size: 12px; padding: 3px 10px; }
/* Горизонтальна панель фільтрів над списком (на відміну від бічної .crm-filters у CRM) */
.list-filters { margin-bottom: 16px; padding: 13px 16px; border-left: 3px solid var(--line); }
.list-filters-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.lf-item { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.lf-item > span { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.lf-item input, .lf-item select { margin: 0; min-width: 170px; }
.lf-grow { flex: 1; min-width: 220px; }
.lf-grow input { width: 100%; }

/* Пакет документів: договір + рахунок + акт разом */
.pack-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; }
.pack-sep { height: 26px; }
.pack-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* На друку кожен документ пакета — з нового аркуша */
@media print {
  .doc-paper + .doc-paper,
  .pack-sep + .doc-paper { break-before: page; page-break-before: always; }
  .pack-label, .pack-links, .pack-sep { display: none !important; }
}

/* ---------- Витрати ---------- */
.exp-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.exp-form .lf-item input, .exp-form .lf-item select { min-width: 130px; }
.task-opt-check.is-disabled { opacity: .4; cursor: not-allowed; }

.exp-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.exp-sum-item { flex: 1; min-width: 120px; padding: 9px 11px;
  border-radius: var(--radius-sm); background: var(--surface-muted); }
.exp-sum-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.exp-sum-val { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
.exp-sum-val.is-out { color: var(--red); }
.exp-sum-val.is-due { color: var(--amber); }
.exp-sum-val.is-ok  { color: var(--green); }

.exp-list { display: flex; flex-direction: column; }
.exp-item { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.exp-item:last-child { border-bottom: 0; }
.exp-date { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.exp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exp-main b { font-weight: 600; }
.exp-main small { font-size: 11px; }
.exp-amount { flex: 0 0 auto; font-weight: 600; white-space: nowrap; color: var(--green); }
.exp-amount.is-out { color: var(--red); }

.type-list { display: flex; gap: 8px; flex-wrap: wrap; }
.type-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; background: var(--panel); }
.type-chip.is-off { opacity: .5; }
.type-chip i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--amber); }
.type-chip i.own { color: var(--muted); }
.type-chip a { color: var(--muted); text-decoration: none; padding: 0 2px; }
.type-chip a:hover { color: var(--amber); }

/* ---------- Каси власників (3 валюти в кожного) ---------- */
.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cash-card { display: flex; flex-direction: column; gap: 11px; border-left: 3px solid var(--amber); }
.cash-card.is-user { border-left-color: var(--blue); }
.cash-head { display: flex; align-items: center; gap: 10px; }
.cash-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 60%, #000)); }
.cash-card.is-user .cash-avatar {
  background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 60%, #000)); }
.cash-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.25; }

.cash-cur-list { display: flex; flex-direction: column; gap: 4px; }
.cash-cur { display: grid; grid-template-columns: 42px minmax(0, 1fr) 54px; align-items: baseline; gap: 8px;
  padding: 6px 9px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.cash-cur-code { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.cash-cur-val { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; text-align: right;
  color: var(--faint); }
.cash-cur-val.is-pos { color: var(--green); }
.cash-cur-val.is-neg { color: var(--red); }
.cash-cur-ops { font-size: 10.5px; color: var(--faint); text-align: right; }

/* ---------- Кабінет сервісу авто (garage.php) ---------- */
/* Залишок у власній касі — перше, що має бачити сервіс, бо платить зі своїх */
.svc-balance { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); }
.svc-balance-label { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.svc-balance-item { display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.svc-balance-more { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: none; }
.svc-balance-more:hover { color: var(--accent); }
@media (max-width: 640px) {
  .svc-balance { gap: 7px; padding: 9px 11px; }
  .svc-balance-more { margin-left: 0; width: 100%; }
}

.alert-info { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, transparent); display: flex; align-items: center; gap: 8px; }
.alert-info svg, .alert-warn svg { flex: 0 0 auto; }
.alert-warn { display: flex; align-items: center; gap: 8px; }
.alert-warn a, .alert-info a { color: inherit; font-weight: 700; }

.svc-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.svc-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; }
.svc-title .ic-accent { color: var(--amber); }
.svc-sub { color: var(--muted); font-size: 13px; max-width: 66ch; margin: 0; line-height: 1.55; }

.svc-search { position: relative; display: flex; align-items: center; }
.svc-search svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.svc-search input { padding-left: 34px; padding-right: 30px; min-width: 250px; margin: 0; }
.svc-search-clear { position: absolute; right: 10px; color: var(--muted); text-decoration: none; font-size: 13px; }
.svc-search-clear:hover { color: var(--text); }

/* Вкладки: перша — та, з якої сервіс починає день */
.svc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.svc-tabs a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 9px 15px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 13.5px; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s; }
.svc-tabs a:hover { color: var(--text); border-color: var(--line-bright); }
.svc-tabs a b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px; background: var(--surface-muted); color: var(--muted); }
.svc-tabs a.active { background: var(--text); color: var(--panel); border-color: var(--text); }
.svc-tabs a.active b { background: color-mix(in srgb, var(--panel) 24%, transparent); color: var(--panel); }

.svc-totals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.svc-tot { flex: 1; min-width: 180px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); }
.svc-tot span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.svc-tot b { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; }
.svc-tot.is-due { border-color: color-mix(in srgb, var(--amber) 34%, transparent); background: var(--amber-soft); }
.svc-tot.is-due b { color: var(--amber); }
.svc-tot.is-ask { border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  background: color-mix(in srgb, var(--blue) 7%, transparent); }
.svc-tot.is-ask b { color: var(--blue); }

/* Сітка карток авто */
.svc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px 14px; box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, border-color .18s; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--svc-color); }
.svc-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-bright); }
.svc-card:target { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }

.svc-card-top { display: flex; gap: 12px; align-items: flex-start; }
.svc-photo { flex: 0 0 auto; width: 78px; height: 58px; border-radius: 10px; overflow: hidden;
  background: var(--surface-muted); display: flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid var(--line); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-ident { flex: 1; min-width: 0; }
.svc-name { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text); text-decoration: none; line-height: 1.25; }
.svc-name:hover { color: var(--amber); }
.svc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px;
  font-size: 12px; color: var(--muted); }
.svc-vin { margin-top: 4px; font-size: 11px; color: var(--muted);
  letter-spacing: .02em; word-break: break-all; }
.svc-badges { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.svc-status-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 99px; color: var(--svc-color);
  background: color-mix(in srgb, var(--svc-color) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--svc-color) 32%, transparent); }

.svc-people { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 11px 0 0;
  padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
.svc-people span { display: inline-flex; align-items: center; gap: 5px; }
.svc-people a { color: var(--text); text-decoration: none; font-weight: 600; }
.svc-people a:hover { color: var(--amber); }

.svc-money { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.svc-money > div { flex: 1; min-width: 110px; padding: 7px 10px; border-radius: 9px;
  background: var(--surface-muted); border: 1px solid var(--line-soft); }
.svc-money span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.svc-money b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.svc-money .is-due b { color: var(--amber); }
.svc-money .is-own b { color: var(--muted); }
.svc-money .is-ask { border-color: color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 7%, transparent); }
.svc-money .is-ask b { color: var(--blue); }

/* Дії: акордеони, щоб картка лишалась компактною */
.svc-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.svc-fold { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.svc-fold[open] { border-color: var(--line-bright); }
.svc-fold-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text);
  border-radius: var(--radius-sm); user-select: none; }
.svc-fold-btn::-webkit-details-marker { display: none; }
.svc-fold-btn:hover { background: var(--surface-muted); }
.svc-fold-btn b { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 99px; background: var(--surface-muted); color: var(--muted); }
.svc-fold-btn.is-primary { color: var(--amber); }
.svc-fold-btn.is-primary .ic-accent { color: var(--amber); }
.svc-fold-btn.has-alert { color: var(--blue); }
.svc-alert { font-style: normal; font-size: 11px; font-weight: 700; margin-left: auto;
  padding: 1px 8px; border-radius: 99px; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, transparent); }

.svc-exp-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 4px 12px 13px; align-items: end; }
.svc-exp-form .lf-item { min-width: 0; }
.svc-exp-form .lf-item input, .svc-exp-form .lf-item select { min-width: 0; width: 100%; }
.svc-exp-form .lf-wide { grid-column: span 2; }
.svc-exp-form .lf-owner { grid-column: span 3; }
.svc-exp-form .lf-full { grid-column: 1 / -1; }
@media (max-width: 620px) { .svc-exp-form .lf-owner { grid-column: 1 / -1; } }
.svc-save { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 620px) { .svc-exp-form { grid-template-columns: repeat(2, 1fr); } }

.svc-bill { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; border: 0;
  padding: 0; margin: 2px 0 0; }
.svc-bill legend { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.svc-bill label { flex: 1; min-width: 128px; margin: 0; cursor: pointer; }
.svc-bill input { position: absolute; opacity: 0; pointer-events: none; }
.svc-bill span { display: block; text-align: center; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.svc-bill label:hover span { border-color: var(--line-bright); color: var(--text); }
.svc-bill input:checked + span { border-color: var(--amber); color: var(--amber);
  background: var(--amber-soft); }
.svc-bill input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.svc-status-form { padding: 4px 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.svc-status-form textarea { margin: 0; width: 100%; }
.svc-status-form .btn { align-self: flex-start; }
.svc-status-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.svc-st-opt { flex: 1; min-width: 96px; margin: 0; cursor: pointer; }
.svc-st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.svc-st-opt span { display: block; text-align: center; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: border-color .15s, color .15s, background .15s; }
.svc-st-opt:hover span { border-color: var(--line-bright); color: var(--text); }
.svc-st-opt input:checked + span { border-color: var(--c); color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); }

.svc-exp-list { padding: 0 12px 8px; display: flex; flex-direction: column; }
.svc-exp { display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; flex-wrap: wrap; }
.svc-exp:last-child { border-bottom: 0; }
.svc-exp.is-ask { background: color-mix(in srgb, var(--blue) 5%, transparent);
  margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.svc-exp-date { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.svc-exp-main { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.svc-exp-main b { font-weight: 600; }
.svc-exp-main small { font-size: 11px; color: var(--muted); }
.svc-exp-sum { flex: 0 0 auto; font-weight: 600; white-space: nowrap; color: var(--green); }
.svc-exp-sum.is-out { color: var(--red); }
.svc-exp-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.svc-exp-tag.is-cli { color: var(--amber); background: var(--amber-soft); }
.svc-exp-tag.is-own { color: var(--muted); background: var(--surface-muted); }
.svc-exp-tag.is-ask { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }

/* Перемикач «хто платить» — рішення менеджера в один клік */
.svc-bill-switch { flex: 0 0 auto; display: inline-flex; gap: 0; border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden; background: var(--panel); }
.svc-bill-switch .sw { border: 0; background: transparent; cursor: pointer; padding: 4px 10px;
  font-size: 11px; font-weight: 700; color: var(--muted); font-family: inherit;
  transition: background .15s, color .15s; }
.svc-bill-switch .sw + .sw { border-left: 1px solid var(--line); }
.svc-bill-switch .sw:hover { background: var(--surface-muted); color: var(--text); }
.svc-bill-switch .sw-yes.on { background: var(--amber); color: #fff; }
.svc-bill-switch .sw-no.on { background: var(--muted); color: var(--panel); }
.svc-bill-switch .sw-ask { color: var(--blue); }

.svc-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--text); }
.svc-note svg { flex: 0 0 auto; color: var(--muted); margin-top: 2px; }
.svc-note span { flex: 1; }
.svc-note i { flex: 0 0 auto; font-style: normal; font-size: 11px; color: var(--muted); }
.exp-sum-item.is-ask { border-color: color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 7%, transparent); }
.exp-sum-val.is-ask { color: var(--blue); }
.exp-item .svc-bill-switch { flex: 0 0 auto; }
a.svc-exp-tag { text-decoration: none; }
a.svc-exp-tag:hover { filter: brightness(.92); }

/* ---------- Обов'язкові поля по етапах (stage-rules.php) ---------- */
.rules-grid { display: flex; flex-direction: column; gap: 22px; }
.rules-process-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-size: 14px; font-weight: 800; letter-spacing: .01em; margin: 0 0 10px; color: var(--muted);
  text-transform: uppercase; }
.rules-process-name .ic-accent { color: var(--amber); }
.rules-process > .rule-card { margin-bottom: 8px; }

.rule-card { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; overflow: hidden; }
.rule-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--stage-color); opacity: .35; }
.rule-card.has-rules::before { opacity: 1; }
.rule-card:target { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.rule-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-head b { font-size: 13.5px; font-weight: 700; }
.rule-count { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.rule-gap { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px;
  color: var(--amber); background: var(--amber-soft); }
.rule-empty { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }

.rule-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; }
.rule-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px 3px 10px;
  border-radius: 99px; font-size: 12px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--stage-color) 38%, transparent);
  background: color-mix(in srgb, var(--stage-color) 11%, transparent); }
.rule-chip form { display: inline-flex; margin: 0; }
.rule-chip button { border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 99px; }
.rule-chip button:hover { color: var(--red); background: var(--red-bg); }

.rule-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rule-actions form { margin: 0; }
.rule-actions select { margin: 0; font-size: 12px; padding: 5px 9px; min-width: 0; max-width: 210px; }
.btn-link-danger { border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 12px; font-weight: 600; font-family: inherit; padding: 0; }
.btn-link-danger:hover { color: var(--red); text-decoration: underline; }

/* Модалка вибору полів */
.modal-fields { max-width: 560px; }
.modal-fields #fieldSearch { width: 100%; margin: 0 0 10px; }
.field-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 12px; }
.field-group > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.field-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px;
  border-radius: 8px; cursor: pointer; font-size: 13px; }
.field-opt:hover { background: var(--surface-muted); }
.field-opt input { margin: 0; }

/* Канбан: перетягування угод */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.is-dragging { opacity: .45; cursor: grabbing; }
/* Поки тягнемо — колонки стають високими й однаковими, щоб не треба було цілитись
   у стосик карток: попасти можна будь-куди по колонці. */
.kanban.is-dragging { align-items: stretch; }
.kanban.is-dragging .kanban-col { min-height: 260px; transition: background .12s, box-shadow .12s; }
.kanban.is-dragging .kanban-cards { flex: 1; min-height: 60px; }
.kanban-col.drop-hint { background: color-mix(in srgb, var(--stage-color) 16%, var(--surface-muted));
  box-shadow: inset 0 0 0 2px var(--stage-color); }
.kanban-col.drop-hint .kanban-col-head { color: var(--text); }
.col-req { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; cursor: help;
  color: var(--muted); background: var(--surface-muted); white-space: nowrap; }

/* Що заважає перевести угоду далі */
.modal-block { max-width: 460px; }
.need-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.need-list li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 9px;
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: 13px; }
.need-list li b { font-weight: 600; }
.need-list li span { font-size: 11.5px; color: var(--muted); }

/* ---------- Своє фонове зображення CRM ---------- */
body.has-crm-bg { background: var(--bg); }
body.has-crm-bg::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Шар затемнення кольором теми — щоб фон не з'їдав текст і працював у світлій і темній */
body.has-crm-bg::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg); opacity: var(--crm-bg-dim, .6);
}
/* Панелі трохи прозорі з розмиттям — фон видно, а читати не заважає */
body.has-crm-bg .panel,
body.has-crm-bg .kanban-col,
body.has-crm-bg .subnav,
body.has-crm-bg .svc-card,
body.has-crm-bg .rule-card,
body.has-crm-bg .topbar {
  background-color: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.has-crm-bg .kanban-col {
  background-color: color-mix(in srgb, var(--surface-muted) 84%, transparent);
}
body.has-crm-bg .kanban-card { background-color: color-mix(in srgb, var(--panel) 94%, transparent); }
/* Заголовки й підписи лежать прямо на фоні — легка тінь кольором теми тримає їх читабельними
   навіть на світлій картинці. Усередині панелей і кнопок тінь не потрібна. */
body.has-crm-bg { text-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 82%, transparent); }
body.has-crm-bg .panel, body.has-crm-bg .kanban-col, body.has-crm-bg .modal,
body.has-crm-bg .topbar, body.has-crm-bg .subnav, body.has-crm-bg .btn,
body.has-crm-bg .alert, body.has-crm-bg .rule-card, body.has-crm-bg .svc-card,
body.has-crm-bg .view-switch { text-shadow: none; }

.subnav-bg { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px;
  transition: background .15s, color .15s; }
.subnav-bg:hover { color: var(--text); background: var(--panel); }

.modal-bg { max-width: 460px; }
.bg-preview { height: 130px; border-radius: var(--radius-sm); background-size: cover;
  background-position: center; border: 1px solid var(--line); position: relative;
  display: flex; align-items: flex-end; padding: 8px 10px; margin-bottom: 12px; }
.bg-preview span { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px;
  border-radius: 99px; background: rgba(0,0,0,.55); }
.bg-dim { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bg-dim label { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.bg-dim label > span { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.bg-dim input[type=range] { width: 100%; margin: 0; accent-color: var(--amber); }
.bg-dim b { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.bg-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  padding: 22px 16px; border: 2px dashed var(--line-bright); border-radius: var(--radius-sm);
  text-align: center; margin: 0 0 14px; transition: border-color .15s, background .15s; }
.bg-drop:hover { border-color: var(--amber); background: var(--amber-soft); }
.bg-drop input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.bg-drop svg { color: var(--muted); }
.bg-drop b { font-size: 13.5px; font-weight: 600; }
.bg-drop span { font-size: 11.5px; color: var(--muted); }

/* ============================================================
   Розділення блоків: щоб сторінка не читалась як суцільне полотно
   ============================================================
   Проблема була в тому, що білий блок на майже білому тлі не мав видимого
   початку й кінця, а заголовок блоку важив стільки ж, скільки звичайний текст.
   Рішення: у кожного блоку — залита шапка в його кольорі теми, яка доходить
   до самих країв панелі. Око одразу бачить, де блок починається. */

.panel-pad > .section-head {
  margin: calc(var(--pp-y, 22px) * -1) calc(var(--pp-x, 22px) * -1) 16px;
  padding: 13px calc(var(--pp-x, 22px) - 2px);
  background: var(--sec-bg, var(--surface-muted));
  border-bottom: 1px solid color-mix(in srgb, var(--sec, var(--line-bright)) 22%, transparent);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--sec, var(--text));
}
/* Тематична смужка згори тепер зайва — шапка вже кольорова */
.panel[class*="th-"] { border-top-width: 1px; }
.panel[class*="th-"] > .section-head { border-top: 3px solid var(--sec);
  margin-top: calc((var(--pp-y, 22px) + 1px) * -1); }
/* Іконка блоку на кольоровій шапці: біла на заливці кольору теми */
.panel-pad > .section-head .sec-ic { background: var(--panel); color: var(--sec, var(--muted)); }
.panel:hover .panel-pad > .section-head .sec-ic,
.panel[class*="th-"]:hover > .section-head .sec-ic { background: var(--sec); color: #fff; }
.panel[class*="th-"]:hover > .section-head .sec-ic .ic-accent { color: #fff; }
/* Дрібні підписи в шапці (лічильники, «· 3») не мають кричати кольором блоку */
.panel-pad > .section-head .muted { color: var(--muted); font-weight: 600; }
/* Кнопки в шапці лишаються на світлому тлі панелі */
.panel-pad > .section-head .btn { background: var(--panel); }

/* Рядки полів: мітка і значення мають різну вагу, лінії між рядками помітніші */
.info-list dt, .info-list dd { border-bottom-color: var(--line); }
.info-list dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.info-list dd { font-weight: 600; }
.info-list dd .muted, .info-list dd small { font-weight: 400; }

/* Вкладені картки всередині блоку: сірий фон замість білого на білому */
.site-row:not([class*="st-"]), .site-row.st-empty {
  background: var(--surface-muted); border-color: var(--line);
}
.exp-item, .svc-exp { border-bottom-color: var(--line); }

/* Панель зі своїм фоном CRM: шапка блоку лишається щільною, щоб не просвічувала */
body.has-crm-bg .panel-pad > .section-head {
  background: color-mix(in srgb, var(--sec-bg, var(--surface-muted)) 92%, var(--panel));
}

/* Бічні панелі (фільтри CRM, довідки) — така сама залита шапка, як у блоків */
.panel-pad > .side-head {
  margin: calc(var(--pp-y, 22px) * -1) calc(var(--pp-x, 22px) * -1) 16px;
  padding: 12px calc(var(--pp-x, 22px) - 2px);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* Канбан: колонка — така сама «панель із кольоровою шапкою», як інші блоки.
   Раніше колонка була майже того ж кольору, що й сторінка, і межі воронки не було видно. */
.kanban-col {
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--stage-color, var(--line));
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.kanban-col-head {
  margin: 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--stage-color) 13%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--stage-color) 24%, transparent);
  font-size: 11.5px;
}
.kanban-cards { padding: 10px; }
.kanban.is-dragging .kanban-cards { padding-bottom: 16px; }
/* Картка на світлій колонці тримається на чіткішій межі, а не на різниці фонів */
.kanban-card { border-color: var(--line-bright); }
.kanban-card:hover { box-shadow: var(--shadow); }
.kanban-col.drop-hint { background: color-mix(in srgb, var(--stage-color) 10%, var(--panel)); }

/* Картка авто в сервісі: довгий етап («Прибув в Україну (Проходить сервіс)») з'їдав
   ширину назви, і назва ламалась на 5 рядків. Виносимо мітки окремим рядком угору. */
.svc-card-top { flex-wrap: wrap; }
.svc-badges { order: -1; flex: 1 0 100%; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: 6px; margin-bottom: 2px; }
.svc-ident { flex: 1 1 180px; }
.svc-name { font-size: 15px; }

/* ---------- Скани документів клієнта (contact.php) ---------- */
/* 172 px — щоб «Розпізнати» і «Завантажити» стали в один рядок, а «Видалити» під ними */
.cdoc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  margin-bottom: 14px; }
.cdoc { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.cdoc:hover { border-color: var(--line-bright); box-shadow: var(--shadow-sm); }
.cdoc-view { display: block; height: 118px; background: var(--surface-muted); }
.cdoc-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdoc-ph { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 100%; color: var(--muted); }
.cdoc-ph b { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cdoc-info { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.cdoc-kind { font-size: 12.5px; font-weight: 700; }
.cdoc-note { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.cdoc-info small { font-size: 10.5px; }
/* Дій три (Розпізнати / Завантажити / Видалити), а картка буває вузька —
   без перенесення остання дія ховається за краєм: у .cdoc стоїть overflow: hidden */
.cdoc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; }
.cdoc-actions form { margin: 0; }
.cdoc-actions a, .cdoc-actions button { font-size: 11px; font-weight: 600; color: var(--muted);
  text-decoration: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; padding: 0; }
.cdoc-actions a:hover { color: var(--amber); }
.cdoc-actions button:hover { color: var(--red); }

.cdoc-add { border-top: 1px solid var(--line); padding-top: 14px; }
.cdoc-drop { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 16px; border: 2px dashed var(--line-bright); border-radius: var(--radius-sm);
  text-align: center; margin: 0 0 12px; transition: border-color .15s, background .15s; }
.cdoc-drop:hover { border-color: var(--amber); background: var(--amber-soft); }
.cdoc-drop input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.cdoc-drop svg { color: var(--muted); }
.cdoc-drop b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cdoc-drop span { font-size: 11.5px; color: var(--muted); }
/* Вікно швидкої задачі */
.modal-qt { max-width: 480px; }
.qt-when { margin-top: 12px; }
.qt-when-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.qt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qt-chips .chip-btn { padding: 4px 9px; font-size: 11.5px; }
.qt-when input[type="datetime-local"] { width: 100%; margin: 0; }
.qt-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.qt-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.qt-check input { margin: 0; }
.qt-who { flex: 1 1 160px; min-width: 0; }
.qt-who select { width: 100%; margin: 0; }
@media (max-width: 620px) {
  .modal-qt { max-width: 100%; }
  .quick-task-btn span { display: none; }
  .quick-task-btn { padding-left: 9px; padding-right: 9px; }
}

.cdoc-tip { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 10px; }
.cdoc-tip b { color: var(--text); font-weight: 600; }
.cdoc-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cdoc-add-row .lf-item input, .cdoc-add-row .lf-item select { min-width: 0; width: 100%; }
.cdoc-add-row .lf-grow { flex: 1; min-width: 180px; }

/* ---------- Розділи картки угоди ---------- */
.deal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.deal-tabs button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-family: inherit;
  font-size: 13.5px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.deal-tabs button:hover { color: var(--text); border-color: var(--line-bright); }
.deal-tabs button b { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px; background: var(--surface-muted); color: var(--muted); }
.deal-tabs button.active { background: var(--text); color: var(--panel); border-color: var(--text); }
.deal-tabs button.active b { background: color-mix(in srgb, var(--panel) 24%, transparent); color: var(--panel); }
.deal-tabs button.active .ic-accent { color: var(--amber); }
.deal-grid.one-col { grid-template-columns: minmax(0, 1fr); }

/* ---------- Викуплений автомобіль у картці угоди ---------- */
.purchased-flash { margin: -4px 0 16px; }
.purchased-panel { min-width: 0; }
.purchased-intro { margin: -5px 0 15px; line-height: 1.5; }
.purchased-subtitle { margin: 17px 0 9px; padding-top: 13px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.purchased-subtitle:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.purchased-fields { display: grid; gap: 10px; }
.purchased-fields.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchased-fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.purchased-fields .lf-item { min-width: 0; margin: 0; }
.purchased-fields .lf-item input, .purchased-fields .lf-item select,
.purchased-fields .lf-item textarea { width: 100%; min-width: 0; }
.purchased-fields .span-2 { grid-column: span 2; }
.purchased-fields .span-all { grid-column: 1 / -1; }
.purchased-save { display: flex; justify-content: flex-end; margin-top: 14px; }
.dealer-linked { margin-left: auto; padding: 2px 7px; border-radius: 99px; color: var(--violet, #7c3aed);
  background: var(--sec-bg); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }

.dealer-suggestions { margin-top: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: var(--radius-sm); background: var(--panel); }
.dealer-suggest-head, .dealer-picked { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  background: var(--amber-soft); }
.dealer-suggest-head b, .dealer-picked b { color: var(--text); font-size: 12px; }
.dealer-suggest-head span, .dealer-picked span { color: var(--muted); font-size: 11px; }
.dealer-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; border-top: 1px solid var(--line-soft); background: transparent;
  color: inherit; cursor: pointer; font-family: inherit; text-align: left; }
.dealer-suggest-item:hover { background: var(--surface-muted); }
.dealer-suggest-item > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dealer-suggest-item b { font-size: 12.5px; }
.dealer-suggest-item small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; }
.dealer-suggest-side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; }
.dealer-suggest-side strong { color: var(--amber); font-size: 10px; }
.dealer-new, .dealer-picked button { width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--line-soft);
  background: var(--surface-muted); color: var(--muted); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 650; }
.dealer-picked button { margin: 6px -12px -10px; width: calc(100% + 24px); }
.dealer-new:hover, .dealer-picked button:hover { color: var(--text); }
.dealer-no-match { padding: 10px 12px; color: var(--muted); font-size: 11.5px; }

.photo-bulk-form { margin-bottom: 9px; }
.photo-bulk-toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-muted); }
.photo-selection-count { flex: 1 1 auto; min-width: 92px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.photo-bulk-toolbar .btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.purchased-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; margin-bottom: 12px; }
.purchased-photo { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-muted); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.purchased-photo.is-selected { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 32%, transparent); transform: translateY(-1px); }
.purchased-photo > a { display: block; color: inherit; text-decoration: none; }
.purchased-photo img { display: block; width: 100%; height: 112px; object-fit: cover; }
.purchased-photo a > span:not(.dealer-card-pdf) { display: block; overflow: hidden; padding: 6px 8px;
  color: var(--muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.photo-select { position: absolute; z-index: 2; top: 5px; left: 5px; display: grid; place-items: center;
  width: 29px; height: 29px; margin: 0; border: 1px solid #ffffffaa; border-radius: 50%;
  background: #111318c7; color: transparent; cursor: pointer; user-select: none; }
.photo-select:hover { background: #111318eb; }
.photo-select input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-select span { font-size: 16px; font-weight: 900; line-height: 1; }
.photo-select:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--amber) 60%, transparent); outline-offset: 2px; }
.photo-select:has(input:checked) { border-color: var(--amber); background: var(--amber); color: #17120a; }
.purchased-photo > form { position: absolute; top: 5px; right: 5px; }
.purchased-photo > form button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0;
  border: 1px solid #ffffff66; border-radius: 50%; background: #111318bb; color: #fff; cursor: pointer; font-size: 16px; }
.dealer-card-pdf { display: grid; place-items: center; height: 112px; color: var(--red); font-family: var(--font-mono);
  font-size: 18px; font-weight: 800; }
.purchased-docs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.purchased-doc { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); }
.purchased-doc-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.purchased-doc-main b { font-size: 12px; }
.purchased-doc-main small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.purchased-doc > a, .purchased-doc form button { border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 650; text-decoration: none; }
.purchased-doc > a:hover { color: var(--amber); }
.purchased-doc form button:hover { color: var(--red); }
.purchased-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 82px;
  margin-bottom: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 11.5px; text-align: center; }
.purchased-empty svg { color: var(--faint); }
.purchased-upload { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.purchased-upload .cdoc-drop { margin-bottom: 10px; }
.purchased-upload-row { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.purchased-upload-row .lf-item { flex: 0 1 190px; margin: 0; }
.purchased-upload-row .grow { flex: 1 1 220px; }
.purchased-upload-row input, .purchased-upload-row select { width: 100%; min-width: 0; }

.dealer-history-list { display: flex; flex-direction: column; gap: 7px; }
.dealer-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.dealer-history-item:hover { border-color: var(--amber); }
.dealer-history-car { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dealer-history-car b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.dealer-history-car small { color: var(--muted); font-size: 10px; }
.dealer-history-side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px;
  color: var(--muted); font-size: 10px; }
.dealer-history-side b { color: var(--text); font-family: var(--font-mono); font-size: 10.5px; }

/* ---------- Розрахунок вартості авто ---------- */
/* ───────── Розрахунок в угоді ─────────
   Сітка з семи колонок: назва тягнеться, решта фіксовані. Одна й та сама сітка
   в шапці й у рядках — інакше підписи не збігаються зі значеннями. */
.calc-head, .calc-row { display: grid; align-items: center; gap: 6px;
  grid-template-columns: minmax(0,1fr) 58px 118px 92px 76px minmax(96px,auto) 104px; }
.calc-head { padding: 0 2px 6px; }
.calc-head span { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.calc-head span:nth-child(2), .calc-head span:nth-child(3),
.calc-head span:nth-child(4), .calc-head span:nth-child(6) { text-align: right; }
.calc-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.calc-row input, .calc-row select { margin: 0; min-width: 0; }
.calc-row .num { text-align: right; font-family: var(--font-mono); font-size: 13px; }
.calc-row.is-new { animation: calcIn .18s ease-out; }
@keyframes calcIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.calc-sum { text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-row.is-minus .calc-sum { color: var(--red); }
.calc-tools { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.calc-minus { margin: 0; cursor: pointer; flex: 0 0 auto; }
.calc-minus input { position: absolute; opacity: 0; pointer-events: none; }
.calc-minus span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
  font-weight: 800; font-size: 15px; transition: all .15s; }
.calc-minus:hover span { border-color: var(--line-bright); color: var(--text); }
.calc-minus input:checked + span { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.calc-up, .calc-del { width: 30px; height: 30px; padding: 0; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; transition: all .15s; }
.calc-up:hover { border-color: var(--line-bright); color: var(--text); }
.calc-del:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.calc-addbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  padding-top: 10px; border-top: 1px dashed var(--line-bright); }
.calc-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.calc-quick .chip-btn { padding: 4px 9px; font-size: 11px; }

.calc-rates { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.calc-rates .lf-item { flex: 1; min-width: 150px; position: relative; }
.calc-rates input { width: 100%; min-width: 0; }
.calc-userate { display: block; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--amber); text-decoration: underline; text-align: left; }
.calc-userate:hover { color: var(--text); }

.calc-total { border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-muted); padding: 10px 14px; margin-bottom: 14px; }
.calc-total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 0; }
.calc-total-line span { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.calc-total-line b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.calc-total-line.is-main { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.calc-total-line.is-main b { font-size: 18px; font-weight: 700; color: var(--green); }
.calc-warn { margin: 6px 0 0; font-size: 11.5px; color: var(--amber); }
.calc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.calc-dirty { font-size: 11.5px; color: var(--amber); font-weight: 600; }

/* На вузькому екрані сітка розсипається на дві колонки: назва зверху, решта під нею */
@media (max-width: 760px) {
  .calc-head { display: none; }
  .calc-row { grid-template-columns: repeat(4, 1fr); gap: 5px;
    padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .calc-title { grid-column: 1 / -1; }
  .calc-sum { grid-column: 1 / 3; text-align: left; font-size: 14px; }
  .calc-tools { grid-column: 3 / -1; }
}

/* Головна дія у формі — бурштинова, щоб не губилась серед звичайних кнопок */
.btn-primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--amber) 86%, #000);
  border-color: color-mix(in srgb, var(--amber) 86%, #000); }
/* Блок поза вибраним розділом угоди. !important — бо інші скрипти теж керують display */
.deal-grid .tab-off { display: none !important; }

/* ============================================================
   Мобільна версія: телефон — це повноцінне робоче місце
   ============================================================
   Менеджер дивиться угоди з телефона в дорозі, сервіс вносить витрати
   прямо в боксі. Тому все має працювати пальцем: жодного горизонтального
   скролу сторінки, кнопки не менші за 40px, ряди полів у стовпчик. */

@media (max-width: 900px) {
  /* Шапка: логотип і кнопки в один ряд, меню — окремим рядом із прокруткою */
  .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; }
  .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  .userbox { order: 2; margin-left: auto; gap: 8px; }
  .mainnav { order: 3; width: 100%; flex: 1 0 100%; flex-wrap: wrap;
    overflow: visible; padding-bottom: 2px; }
  .mainnav > a, .mainnav .navdrop { flex: 0 0 auto; }
  .mainnav > a, .navdrop-top { white-space: nowrap; }
  /* На телефоні підменю прив'язане не до пункту, а до всього ряду меню:
     інакше воно починається посеред екрана й правий край обрізається */
  .mainnav { position: relative; }
  .navdrop { position: static; }
  .navdrop-menu { left: 0; right: 0; min-width: 0; border-top-width: 6px; }
}

@media (max-width: 620px) {
  .brand-text small { display: none; }        /* «внутрішній дашборд» — і так зрозуміло */
  .brand-mark { width: 32px; height: 32px; }
  .content { padding: 16px 12px 40px; }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 12.5px; }

  /* Підменю CRM: підписи лишаються (самі іконки незрозумілі), ряд прокручується */
  .subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a, .subnav-bg { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 12.5px; }
  .subnav-group { flex: 0 0 auto; position: sticky; left: 0; z-index: 1; background: var(--surface-muted); }
  .subnav-bg { margin-left: 0; }

  /* Панелі: менші поля, але шапка блоку рахується від них і не вилазить */
  .panel-pad { --pp-x: 15px; --pp-y: 16px; }
  .panel { border-radius: 12px; }

  /* Пари «назва — значення» стають у стовпчик */
  .info-list, .info-list-wide { grid-template-columns: 1fr; gap: 0; }
  .info-list dt { padding-bottom: 2px; border-bottom: 0; }
  .info-list dd { padding-top: 0; padding-bottom: 10px; }

  /* Форми: жодних фіксованих ширин, які виносять сторінку за екран */
  .lf-item, .lf-item input, .lf-item select, .field input, .field select, .field textarea,
  .task-add input, .task-add select { min-width: 0; width: 100%; }
  .lf-item { flex: 1 1 100%; }
  /* <16px — iOS зумить сторінку на фокусі. !important обовʼязковий: специфічніші
     правила («.field input» тощо) інакше перебивають цей захист, і половина форм
     дашборда лишалася з 14px — заміряно ревізією на 15 сторінках */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important;
  }
  .btn { font-size: 16px; min-height: 40px; }
  .btn-sm { min-height: 36px; }
  /* Дрібні кнопки-чіпи (швидкий час задачі, перемикач вигляду) — до зручної
     висоти пальця; шрифт лишаємо, більшає лише ціль дотику */
  .chip-btn, .view-switch button { min-height: 34px; }
  .calc-tools .btn { min-height: 34px; min-width: 34px; }

  /* Модалки на весь екран, з прокруткою всередині */
  .modal { width: calc(100vw - 20px); max-width: none; max-height: 88vh; overflow-y: auto; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn, .modal-actions a.btn { flex: 1 1 auto; justify-content: center; }

  /* Таблиці гортаються всередині свого блоку, а не тягнуть сторінку */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data { min-width: 620px; }

  /* Ключові робочі списки на телефоні стають картками замість горизонтальної таблиці. */
  .mobile-card-wrap { overflow: visible; }
  table.data.mobile-cards { min-width: 0; display: block; background: transparent; }
  table.data.mobile-cards tbody { display: grid; gap: 10px; }
  table.data.mobile-cards tr:first-child { display: none; }
  table.data.mobile-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
  table.data.mobile-cards td { display: flex; flex-direction: column; gap: 2px; padding: 0;
    border: 0; background: transparent !important; min-width: 0; overflow-wrap: anywhere; }
  table.data.mobile-cards td::before { content: attr(data-label); color: var(--faint); font-size: 9.5px;
    font-family: var(--font-body); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  table.data.mobile-cards td:first-child { grid-column: 1 / -1; font-size: 15px; }

  /* Шапка угоди та кнопки */
  .deal-hero { gap: 10px; }
  .deal-title { font-size: 20px; }
  .deal-hero .btn { flex: 1 1 auto; justify-content: center; }
  .deal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .deal-tabs::-webkit-scrollbar { display: none; }
  .deal-tabs button { flex: 0 0 auto; padding: 9px 14px; }

  .purchased-fields.cols-2, .purchased-fields.cols-3 { grid-template-columns: 1fr; }
  .purchased-fields .span-2, .purchased-fields .span-all { grid-column: auto; }
  .purchased-save .btn { width: 100%; justify-content: center; }
  .photo-bulk-toolbar .photo-selection-count { order: -1; flex-basis: 100%; }
  .photo-bulk-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .photo-bulk-toolbar .btn-danger { flex-basis: 100%; }
  .purchased-upload-row .lf-item, .purchased-upload-row .grow { flex: 1 1 100%; }
  .purchased-upload-row .btn { width: 100%; justify-content: center; }
  .purchased-doc { align-items: flex-start; flex-wrap: wrap; }
  .purchased-doc-main { flex-basis: calc(100% - 52px); }
  .dealer-suggest-item { align-items: flex-start; }
  .dealer-suggest-side { align-items: flex-end; }
  .dealer-history-item { align-items: flex-start; }
  .dealer-history-car b { white-space: normal; }

  /* Розрахунок: рядок у два поверхи, щоб суму й валюту було видно повністю */
  .calc-row { flex-wrap: wrap; gap: 6px 6px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft); }
  .calc-title { flex: 1 1 100%; }
  .calc-amount { flex: 1 1 auto; }
  .calc-cur { flex: 0 0 92px; }
  .calc-actions .btn { flex: 1 1 100%; justify-content: center; }

  /* Каси, картки авто, скани — по одній колонці */
  .svc-grid, .cdoc-grid { grid-template-columns: 1fr; }
  .cdoc-view { height: 150px; }
  .cash-grid, .fop-grid { grid-template-columns: 1fr !important; }

  /* Блок «Пошук на майданчиках» */
  .site-list { grid-template-columns: 1fr !important; }
}

/* Канбан на телефоні: колонка майже на весь екран, наступна визирає збоку */
@media (max-width: 700px) {
  .kanban { gap: 10px; scroll-snap-type: x mandatory; }
  .kanban-col { flex: 0 0 84vw; scroll-snap-align: start; }
  .crm-main-head { gap: 8px; }
  .crm-main-head .btn { flex: 1 1 auto; justify-content: center; }
  .view-switch { width: 100%; }
  .view-switch button { flex: 1; }
}

/* Фільтри CRM на телефоні згорнуті — інакше до дошки треба гортати пів екрана */
.crm-filters .side-head { cursor: default; }
@media (max-width: 1000px) {
  .crm-filters .side-head { cursor: pointer; }
  .crm-filters .side-head::after { content: '▾'; margin-left: auto; font-size: 13px;
    transition: transform .18s var(--ease); }
  .crm-filters.is-collapsed .side-head::after { transform: rotate(-90deg); }
  .crm-filters.is-collapsed > *:not(.side-head) { display: none; }
  .crm-filters.is-collapsed > .side-head { margin-bottom: calc(var(--pp-y, 14px) * -1); }
}

/* Кнопка «перевести на інший етап» — з'являється лише на тач-екранах,
   бо там перетягування картки не працює в принципі */
.kanban-card { position: relative; }
.card-move { position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-bright); background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted); font-size: 15px; line-height: 1; backdrop-filter: blur(6px); }
.card-move:active { background: var(--accent); color: var(--accent-fg); }

.modal-stages { max-width: 420px; }
.stage-pick-list { display: flex; flex-direction: column; gap: 5px;
  max-height: 58vh; overflow-y: auto; }
.stage-pick { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-family: inherit; font-size: 13.5px;
  font-weight: 600; text-align: left; }
.stage-pick:hover { border-color: var(--stage-color); background: color-mix(in srgb, var(--stage-color) 8%, transparent); }
.stage-pick span:nth-child(2) { flex: 1; }
.stage-pick i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.stage-pick.current { background: var(--surface-muted); cursor: default; opacity: .75; }

/* ---- Мобільні виправлення переповнення ----
   Сітки з треком 1fr мають неявний min-width:auto — тому широкий вміст (поля форм,
   довгі рядки) розпирав колонку понад ширину екрана. minmax(0,1fr) це знімає. */
@media (max-width: 1000px) {
  .crm-layout { grid-template-columns: minmax(0, 1fr); }
  .crm-side, .crm-main { min-width: 0; }
}
@media (max-width: 980px) {
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .deal-col { min-width: 0; }
  .deal-col > .panel { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  /* Стрічка лідів: у стовпчик текст має займати всю ширину і переноситись, а не тягнути сторінку */
  .feed-item { align-items: stretch; }
  .feed-main { width: 100%; }
  .feed-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .feed-side { width: 100%; }
  .row-fields .field { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 620px) {
  /* Сума й валюта в розрахунку мають лишатись в одному рядку під назвою */
  .calc-amount { flex: 1 1 90px; min-width: 0; width: auto; }
  .calc-cur { flex: 0 0 88px; }
  /* Порожня обкладинка картки на телефоні тільки з'їдає екран */
  .card-cover-empty { height: 44px; }
  .card-cover { height: auto; }
  .card-cover img { height: 92px; }
}
.chip-wish { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px;
  font-weight: 600; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }

/* ---------- Сповіщення: дзвіночок у шапці ---------- */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell { position: relative; }
.notif-bell.has-new { color: var(--amber); }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--bg-2); }

.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(380px, calc(100vw - 24px)); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: fadeUp .16s var(--ease) both; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.notif-head b { font-size: 13px; }
.notif-readall { border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0; }
.notif-readall:hover { color: var(--amber); text-decoration: underline; }
.notif-list { max-height: min(60vh, 460px); overflow-y: auto; }
.notif-empty { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--muted); }

.notif-item { display: flex; gap: 10px; padding: 11px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-soft); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-muted); }
.notif-item.is-new { background: color-mix(in srgb, var(--amber) 7%, transparent); }
.notif-item.is-new:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.notif-item-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 99px;
  background: var(--muted); margin-top: 5px; }
.notif-item-dot.k-reminder, .notif-item-dot.k-task { background: var(--amber); }
.notif-item-dot.k-expense { background: var(--red); }
.notif-item-dot.k-stage, .notif-item-dot.k-deal { background: var(--blue); }
.notif-item-dot.k-doc { background: var(--green); }
.notif-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-main b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.notif-item-main small { font-size: 11.5px; color: var(--muted); }
.notif-item-main i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.notif-center-link { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--line); color: var(--text); text-decoration: none;
  background: var(--surface-muted); font-size: 12px; font-weight: 700; }
.notif-center-link:hover { color: var(--amber); }
.notif-center-link span { flex: 1; }

/* ---------- Центр уваги ---------- */
.center-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.center-title-row .page-sub { margin-bottom: 14px; }
.center-total { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
  border-radius: 99px; color: var(--muted); background: var(--amber-soft); font-size: 12px; }
.center-total b { color: var(--amber); font-family: var(--font-mono); font-size: 14px; }
.center-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 3px; }
.center-filters a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel);
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 650; }
.center-filters a:hover { color: var(--text); border-color: var(--line-bright); }
.center-filters a.active { color: var(--text); border-color: var(--amber); background: var(--amber-soft); }
.center-filters b { min-width: 18px; padding: 1px 5px; border-radius: 99px; text-align: center;
  background: var(--surface-muted); color: var(--text); font-family: var(--font-mono); font-size: 10.5px; }
.center-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.center-section { min-width: 0; }
.center-section .section-head { gap: 8px; }
.center-section .section-head > span:nth-child(2) { font-weight: 750; }
.center-count { margin-left: auto; padding: 2px 7px; border-radius: 99px; background: var(--sec-bg);
  color: var(--sec); font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; }
.center-section .section-head .btn { margin-left: 2px; }
.center-intro { margin: 0 0 10px; }
.center-list { display: flex; flex-direction: column; gap: 7px; }
.center-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel);
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s var(--ease), opacity .15s; }
.center-item:hover { border-color: var(--sec, var(--amber)); transform: translateX(2px); }
.center-item.is-resolved { opacity: 0; transform: translateX(8px); }
.center-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sec, var(--amber)); box-shadow: 0 0 0 4px var(--sec-bg, var(--amber-soft)); }
.center-item.is-critical .center-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.center-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.center-main b { overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; }
.center-main small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.center-item time { flex: 0 0 auto; color: var(--faint); font-size: 10.5px; }
.center-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.center-reason { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; text-align: right; }
.center-reason b { color: var(--sec, var(--text)); font-size: 10.5px; }
.center-reason small { color: var(--faint); font-size: 10px; }
.center-event.is-new { border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
  background: color-mix(in srgb, var(--blue) 6%, var(--panel)); }
.center-event .center-dot.k-reminder, .center-event .center-dot.k-task { background: var(--amber); }
.center-event .center-dot.k-expense { background: var(--red); }
.center-event .center-dot.k-stage, .center-event .center-dot.k-deal { background: var(--blue); }
.center-event .center-dot.k-doc { background: var(--green); }
.center-empty { display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 82px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 12px; text-align: center; }
.center-empty svg { color: var(--green); }
.center-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px;
  padding: 8px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none;
  background: var(--surface-muted); font-size: 11.5px; font-weight: 650; }
.center-more:hover { color: var(--sec, var(--amber)); }
.center-more b { font-family: var(--font-mono); }
.center-back { margin: 14px 0 0; font-size: 12px; }

@media (max-width: 980px) {
  .center-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .center-title-row { flex-direction: column; gap: 0; }
  .center-total { margin: 0 0 14px; }
  .center-filters { margin-right: -14px; padding-right: 14px; }
  .center-item { align-items: flex-start; flex-wrap: wrap; }
  .center-main { min-width: calc(100% - 24px); }
  .center-actions, .center-reason, .center-item time { width: 100%; margin-left: 19px; }
  .center-reason { text-align: left; }
  .center-actions .btn { flex: 1 1 auto; justify-content: center; }
  .center-section .section-head { flex-wrap: wrap; }
  .center-section .section-head .btn { margin-left: auto; }
}

/* ---------- Спливашка посеред екрана ---------- */
.notif-pop-back { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, #05070c 62%, transparent);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s var(--ease); }
.notif-pop-back.open { opacity: 1; }
/* Клас із display:flex перебиває стандартне правило [hidden] — без цього прозорий
   шар лишався поверх сторінки й перехоплював усі кліки після закриття спливашки. */
.notif-pop-back[hidden] { display: none; }
.notif-pop-back:not(.open) { pointer-events: none; }
.notif-pop-back.open { pointer-events: auto; }
.notif-pop { position: relative; width: min(420px, 100%); text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px 20px; box-shadow: var(--shadow-lg);
  transform: scale(.94); transition: transform .2s var(--ease); }
.notif-pop-back.open .notif-pop { transform: scale(1); }
.notif-pop-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-soft); color: var(--amber);
  animation: notifRing 1.1s var(--ease) 2; }
.notif-pop-ic::before { content: '🔔'; font-size: 24px; line-height: 1; }
@keyframes notifRing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-13deg); } 40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }  80% { transform: rotate(5deg); }
}
.notif-pop-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.notif-pop-title { font-family: var(--font-display); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.25; }
.notif-pop-body { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.notif-pop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.notif-pop-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
.notif-pop-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 4px; }
.notif-pop-close:hover { color: var(--text); }
.notif-pop-more { margin-top: 12px; font-size: 11.5px; color: var(--faint); }

@media (max-width: 620px) {
  .notif-panel { position: fixed; top: auto; right: 12px; left: 12px; width: auto; }
  .notif-pop { padding: 22px 18px 18px; }
  .notif-pop-title { font-size: 17px; }
  .notif-pop-actions .btn { flex: 1 1 100%; }
}
.kanban.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
.f-check small { margin-left: 4px; font-size: 11px; }

/* ---------- Панель фільтрів CRM: згортається вбік ---------- */
.crm-layout.filters-hidden { grid-template-columns: minmax(0, 1fr); }
.crm-layout.filters-hidden .crm-side { display: none; }
.filters-toggle { display: inline-flex; align-items: center; gap: 7px; }
.filters-toggle.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.filters-toggle.active .ic-accent { color: var(--amber); }
.filters-toggle b { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 99px; background: var(--amber); color: #fff; }

/* ---------- Глобальний пошук у шапці ---------- */
.gsearch { position: relative; flex: 0 1 260px; min-width: 0; }
.gsearch-input { width: 100%; margin: 0; padding: 7px 30px 7px 32px; font-size: 13px;
  border-radius: 99px; background: var(--surface-muted); border-color: transparent; }
.gsearch-input:focus { background: var(--panel); border-color: var(--line-bright); }
.gsearch svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; }
.gsearch-clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 13px;
  line-height: 1; padding: 2px; }
.gsearch-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: min(460px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); animation: fadeUp .14s var(--ease) both; }
.gs-group { padding: 7px 14px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--surface-muted);
  border-bottom: 1px solid var(--line-soft); }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none;
  color: inherit; border-bottom: 1px solid var(--line-soft); }
.gs-item:last-child { border-bottom: 0; }
.gs-item:hover, .gs-item.is-active { background: var(--surface-muted); }
.gs-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; background: var(--accent-soft); color: var(--muted); }
.gs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-main b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-main small { font-size: 11.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gs-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: var(--surface-muted); color: var(--muted); }
.gs-empty, .gs-hint { padding: 20px 16px; text-align: center; font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) {
  .gsearch { order: 4; flex: 1 0 100%; }
  .gsearch-panel { left: 0; right: 0; width: auto; }
  /* На вузькому екрані меню і пошук — окремі рядки під логотипом */
  .mainnav { order: 3; }
}

/* ---------- Звіти по грошах ---------- */
.rep-tab { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 13.5px; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s; }
.rep-tab:hover { color: var(--text); border-color: var(--line-bright); }
.rep-tab.active { background: var(--text); color: var(--panel); border-color: var(--text); }
.rep-tab.active .ic-accent { color: var(--amber); }

.rep-stats .stat { padding: 13px 15px; }
.rep-sum { font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: 1.4;
  margin-top: 3px; overflow-wrap: anywhere; }
.rep-hint { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

.rep-table td { vertical-align: top; }
.rep-table .mono { font-size: 12.5px; white-space: nowrap; }
.rep-in { color: var(--green); }
.rep-out { color: var(--red); }
.rep-left { color: var(--amber); font-weight: 600; }
@media (max-width: 620px) { .rep-table { min-width: 720px; } }
.rep-mixed { font-size: 11px; color: var(--amber); font-family: var(--font-body); cursor: help; }
.calc-qty { flex: 0 0 62px; text-align: center; font-family: var(--font-mono); font-size: 12.5px; }
.calc-disc { flex: 0 0 96px; text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--green); }
@media (max-width: 620px) {
  .calc-qty { flex: 0 0 54px; }
  .calc-disc { flex: 1 1 80px; }
}
.extension-connect-grid{align-items:start}.extension-steps{margin:0;padding-left:22px;display:grid;gap:12px;color:var(--muted)}
.extension-steps li::marker{font-weight:800;color:var(--amber)}.extension-key-row{display:flex;gap:10px;align-items:center}
.extension-key-row code{flex:1;min-width:0;padding:12px 14px;border-radius:9px;background:var(--surface-muted);border:1px solid var(--line);overflow:auto;white-space:nowrap}
.extension-device{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.extension-device:last-child{border-bottom:0}.extension-device div{display:flex;min-width:0;flex-direction:column;gap:3px}.extension-device small{color:var(--muted);line-height:1.5}
.purchased-source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 15px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--amber) 9%,var(--panel))}
.purchased-source span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:750}.purchased-source small{color:var(--muted);font-size:11px}.purchased-source a{margin-left:auto;font-size:12px;font-weight:750;color:var(--amber)}
@media(max-width:640px){.extension-key-row{align-items:stretch;flex-direction:column}.extension-device{align-items:flex-start}.purchased-source a{margin-left:0;width:100%}}

/* Налаштування розпізнавання документів */
.ai-settings-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start; }
.ai-settings-grid .lf-item small { margin-top: 4px; }

/* Сторінка налаштувань розпізнавання */
.ai-row-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ai-row-btns form { margin: 0; }
.ai-opt { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
.ai-opt:first-of-type { border-top: 0; padding-top: 0; }
.ai-opt b { display: block; font-size: 13px; font-weight: 600; }
.ai-opt small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.ai-opt-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ai-opt-check input { margin: 3px 0 0; flex: 0 0 auto; }
.ai-opt-inline { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.ai-opt-inline input { margin: 0; flex: 0 1 260px; min-width: 0; }
.ai-fieldset { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.ai-fieldset label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ai-fieldset input { margin: 0; }
.ai-prompt { width: 100%; margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
.ai-result table { margin-top: 6px; }
.ai-ok { color: var(--green); }
.ai-bad { color: var(--red); }
@media (max-width: 620px) { .ai-opt-inline input { flex: 1 1 100%; } }

/* Хаб налаштувань */
.set-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.set-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; text-decoration: none;
  color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.set-card:hover { border-color: var(--line-bright); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.set-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.set-body { flex: 1 1 auto; min-width: 0; }
.set-body b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.set-body small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.set-state { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px;
  background: var(--surface-muted); color: var(--muted); }
.set-go { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1; }
.set-card:hover .set-go { color: var(--amber); }

/* Підключені сервіси */
.integ-list { display: grid; gap: 12px; }
.integ-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.integ-head b { font-size: 14px; }
.integ-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.integ-dot.is-on { background: var(--green); }
.integ-dot.is-off { background: var(--muted); }
.integ-state { font-size: 11px; color: var(--muted); }
.integ-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.integ-facts span { display: flex; flex-direction: column; gap: 1px; }
.integ-facts i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.integ-facts b { font-size: 12.5px; font-weight: 600; }
.integ-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.integ-actions form { margin: 0; }

/* ───────── Конструктор форм ───────── */
.fb-newrow, .fb-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.fb-newrow input, .fb-addrow select { margin: 0; flex: 1 1 240px; min-width: 0; }
.fb-list { display: grid; gap: 12px; }
.fb-item.is-off { opacity: .6; }
.fb-head { display: flex; align-items: center; gap: 8px; }
.fb-head b { font-size: 14px; }
.fb-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px;
  background: var(--surface-muted); color: var(--muted); }
.fb-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 0; }
.fb-facts span { display: flex; flex-direction: column; gap: 1px; }
.fb-facts i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.fb-facts b { font-size: 12.5px; font-weight: 600; }
.fb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.fb-actions form { margin: 0; }
.fb-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fb-row .lf-item { flex: 1 1 220px; min-width: 0; }
.fb-checks { display: flex; flex-direction: column; gap: 8px; }
.fb-checks label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fb-checks input { margin: 0; }
.fb-field { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.fb-field-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-type { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: var(--surface-muted); color: var(--muted); }
.fb-sort { width: 68px; margin: 0; }
.fb-req { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fb-req input { margin: 0; }
.fb-field-body { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-field-body .lf-item { flex: 1 1 200px; min-width: 0; }
.fb-field-body .lf-grow { flex: 1 1 100%; }
.fb-dels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.fb-dels form { margin: 0; }

/* ───────── Заявки ───────── */
.fe-list { display: grid; gap: 12px; }
.fe-item.is-new { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.fe-head { display: flex; align-items: center; gap: 8px; }
.fe-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--amber); color: #fff; }
.fe-data { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 10px 0 0; }
.fe-data dt { font-size: 11.5px; color: var(--muted); }
.fe-data dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.fe-files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fe-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px;
  text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fe-file:hover { border-color: var(--amber); color: var(--amber); }
@media (max-width: 620px) { .fe-data { grid-template-columns: 1fr; gap: 2px 0; }
  .fe-data dd { margin-bottom: 8px; } }

/* ───────── Публічна сторінка форми ───────── */
body.form-public { background: var(--surface-muted); padding: 0; }
.fp-wrap { max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; }
.fp-brand { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; color: var(--text); }
.fp-card h1 { font-size: 20px; margin: 0 0 8px; }
.fp-intro { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.fp-field { margin-bottom: 16px; }
.fp-field > label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.fp-field > label i { color: var(--red); font-style: normal; }
.fp-field input[type=text], .fp-field input[type=tel], .fp-field input[type=email],
.fp-field input[type=number], .fp-field input[type=date], .fp-field select,
.fp-field textarea, .fp-field input[type=file] { width: 100%; margin: 0; }
.fp-field small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.fp-field.has-err input, .fp-field.has-err textarea, .fp-field.has-err select { border-color: var(--red); }
.fp-err { display: block; font-size: 11.5px; color: var(--red); margin-top: 5px; font-weight: 600; }
.fp-opts { display: flex; flex-direction: column; gap: 8px; }
.fp-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.fp-opt input { margin: 2px 0 0; flex: 0 0 auto; }
.fp-consent { font-size: 12.5px; color: var(--muted); }
.fp-send { width: 100%; margin-top: 6px; padding: 11px; font-size: 14px; }
.fp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fp-msg { text-align: center; padding: 12px 0; }
.fp-msg b { display: block; font-size: 17px; margin-bottom: 8px; }
.fp-msg p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.fp-ok b { color: var(--green); }
.fp-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 16px; }

/* ═══ Калькулятор авто зі США (usa-calc.php) ═════════════════════════
   Розмітка й id збігаються з розширенням для Chrome — той самий app.js
   обслуговує обидва. Тут лише вигляд: кольори й відступи дашборда. */

.uc-top { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.uc-top-main { flex: 1 1 380px; min-width: 0; }
.uc-top-main b { font-size: 14px; }
.uc-top-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.uc-how { margin-top: 10px; font-size: 12.5px; }
.uc-how summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.uc-how ol { margin: 8px 0 0 18px; color: var(--muted); line-height: 1.7; }
.uc-how code { font-family: var(--font-mono); font-size: 11.5px;
  background: var(--surface-muted); padding: 1px 5px; border-radius: 5px; color: var(--text); }
/* Значок розширення поруч із кнопкою: людина впізнає його в панелі Chrome */
.uc-plugin-id { display: flex; align-items: center; gap: 10px; font-size: 11.5px;
  line-height: 1.35; color: var(--muted); }
.uc-plugin-id img { border-radius: 9px; flex: 0 0 auto; }
.uc-rate { display: flex; flex-direction: column; gap: 6px; }
.uc-rate .field { margin: 0; }
.uc-rate input { max-width: 140px; }

.usa-calc .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.usa-calc .card { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; }
.usa-calc .card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700;
  margin-bottom: 14px; }

.usa-calc .field { margin-bottom: 12px; }
.usa-calc .field-label { display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px; }
.usa-calc .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.usa-calc .input, .usa-calc .select { width: 100%; padding: 9px 11px; background: var(--bg-2);
  border: 1px solid var(--line-bright); border-radius: var(--radius-sm); color: var(--text);
  font-size: 13.5px; font-family: inherit; }
.usa-calc .input:focus, .usa-calc .select:focus { outline: none; border-color: var(--accent); }
/* Поле, яке система заповнила сама, підсвічене: видно, що перевірити першим */
.usa-calc .auto-filled { border-color: var(--blue); background: var(--surface-muted); }
.usa-calc .auto-badge { font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: var(--blue); background: var(--surface-muted); padding: 1px 5px; border-radius: 4px; }

.usa-calc .segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.usa-calc .segments.seg-2 { grid-template-columns: 1fr 1fr; }
.usa-calc .segment { padding: 9px 6px; background: var(--bg-2); border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm); text-align: center; cursor: pointer; font-size: 12.5px;
  font-weight: 600; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.usa-calc .segment:hover { color: var(--text); }
.usa-calc .segment.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.uc-dealer { padding: 12px; background: var(--surface-muted); border-radius: var(--radius-sm);
  margin-bottom: 16px; }
.uc-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--muted); cursor: pointer; }
.uc-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.uc-url { padding: 12px; background: var(--surface-muted); border-radius: var(--radius-sm);
  margin-bottom: 16px; }
.uc-url .url-row { display: flex; gap: 8px; }
.uc-url .url-row .input { flex: 1; min-width: 0; }
.uc-url .hint { margin: 6px 0 0; }
.usa-calc .parse-result { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  display: none; font-size: 12px; line-height: 1.5; }
.usa-calc .parse-result.success { background: var(--green-glow); color: var(--green); }
.usa-calc .parse-result.warning { background: var(--amber-soft); color: var(--amber); }
.usa-calc .parse-result.error { background: var(--red-bg); color: var(--red); }
.usa-calc .parse-result .item { display: inline-block; margin: 2px 10px 0 0;
  font-family: var(--font-mono); font-size: 11px; }
.uc-scrape { margin-bottom: 10px; }
.uc-status:empty { display: none; }
.uc-go { width: 100%; margin-top: 6px; }

.usa-calc .results-empty { padding: 24px 4px; }
.usa-calc .result-section { margin-bottom: 14px; }
.usa-calc .result-section-title { font-size: 10.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.usa-calc .result-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.usa-calc .result-row:last-child { border-bottom: none; }
.usa-calc .result-label { color: var(--muted); }
.usa-calc .result-value { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.uc-dim { font-size: 11px; color: var(--faint); }

.uc-total { margin-top: 16px; padding: 16px; background: var(--accent); color: var(--accent-fg);
  border-radius: var(--radius); }
.uc-total-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .75; margin-bottom: 6px; }
.uc-total-value { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; }
.uc-total-uah { font-family: var(--font-mono); font-size: 12.5px; opacity: .8; margin-top: 6px; }
.uc-total-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* Плашка підсумку залита кольором --accent, а він протилежний у темній темі
   (чорний / білий). Тому кнопки на ній — нейтральний сірий: він видимий на обох */
.uc-total-actions .btn { background: transparent; border-color: rgba(128,128,128,.55);
  color: var(--accent-fg); }
.uc-total-actions .btn:hover { background: rgba(128,128,128,.28); color: var(--accent-fg); }
.uc-foot { margin-top: 14px; }

@media (max-width: 900px) {
  .usa-calc .grid { grid-template-columns: 1fr; }
  .uc-top-side { width: 100%; }
}
@media (max-width: 620px) {
  .usa-calc .field-row { grid-template-columns: 1fr; }
  .usa-calc .segments { grid-template-columns: 1fr; }
  .uc-url .url-row { flex-wrap: wrap; }
  .uc-url .url-row .input { flex: 1 1 100%; }
  .uc-total-value { font-size: 28px; }
}

/* Друк: на папір іде лише розрахунок, без меню й полів вводу */
@media print {
  .topbar, .uc-top, .usa-calc .card:first-child, .uc-total-actions, .uc-foot, .gsearch { display: none !important; }
  .usa-calc .grid { display: block; }
  .uc-total { background: none; color: var(--text); border: 1px solid var(--line); }
}

/* ── Пагінація списків (rawleads.php) ── */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 18px 0 6px; }
.pager-info { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Дні народження (birthdays.php) ─────────────────────────────────── */
/* minmax(0,…): без нього колонка ґріда відмовляється стискатись вужче за
   найширший рядок усередині (довге імʼя, textarea) і на телефоні зʼявляється
   горизонтальний скрол усієї сторінки */
.bd-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px; align-items: start; }
.bd-col { min-width: 0; }
.bd-h { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; margin-bottom: 14px; }
.bd-field { margin-bottom: 14px; }
.bd-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

/* Перемикач: великий, зручний пальцем — стан видно здалеку */
.bd-switch-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; margin-bottom: 4px; }
.bd-switch { position: relative; flex: 0 0 auto; margin-top: 1px; }
.bd-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bd-switch i { display: block; width: 42px; height: 24px; border-radius: 99px;
  background: var(--line-bright); transition: background .18s; }
.bd-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
/* Вимкнений трек ледь темніший за лінію: інакше зливається з панеллю
   і стан перемикача не зчитується здалеку */
.bd-switch i { background: color-mix(in srgb, var(--muted) 32%, var(--line-bright)); }
.bd-switch input:checked + i { background: var(--green); }
.bd-switch input:checked + i::after { transform: translateX(18px); }
.bd-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-switch-text b { font-size: 13.5px; }
.bd-switch-text small { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Перегляд привітання: як його побачить менеджер у сповіщенні */
.bd-preview { margin: 2px 0 14px; }
.bd-preview-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.bd-bubble { background: var(--surface-muted); border: 1px solid var(--line-soft);
  border-radius: 14px; border-top-left-radius: 4px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
  overflow-wrap: anywhere; }   /* довге посилання у привітанні не розпирає сторінку */
.bd-bubble b { display: block; margin-bottom: 6px; }
.bd-bubble p { margin: 0 0 4px; color: var(--muted); }
.bd-bubble-msg { white-space: pre-wrap; color: var(--text) !important; }
.bd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Дати співробітників */
.bd-staff { display: flex; flex-direction: column; }
.bd-staff-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); }
.bd-staff-row:last-child { border-bottom: none; }
.bd-savedmark { color: var(--green); font-weight: 700; flex: 0 0 auto; }
.bd-staff-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-staff-name b { font-size: 13.5px; }
.bd-staff-name small { font-size: 11.5px; color: var(--faint); }
.bd-staff-row input[type="date"] { width: auto; padding: 7px 10px; font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; }

/* Стрічка найближчих: квадратик дати + хто + коли */
.bd-feed { display: flex; flex-direction: column; gap: 8px; }
.bd-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; background: var(--panel); }
a.bd-item:hover { border-color: var(--line-bright); box-shadow: var(--shadow-xs); }
.bd-day { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-muted); line-height: 1.05; }
.bd-day b { font-family: var(--font-display); font-size: 16.5px; font-variant-numeric: tabular-nums; }
.bd-day small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bd-item.is-today .bd-day { background: var(--amber-soft); }
/* Чистий бурштин на світлій плашці дає лише 2.9:1 — підмішуємо темного з тексту,
   і напис стає читабельним в обох темах, лишаючись «святковим» */
.bd-item.is-today .bd-day b, .bd-item.is-today .bd-day small {
  color: color-mix(in srgb, var(--amber) 62%, var(--text)); }
.bd-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bd-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-who small { font-size: 11.5px; color: var(--muted); }
.bd-when { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-muted); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.bd-item.is-today .bd-when { background: var(--amber-soft);
  color: color-mix(in srgb, var(--amber) 62%, var(--text)); }

@media (max-width: 900px) {
  .bd-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bd-staff-row { flex-wrap: wrap; }
  /* 16px обовʼязково: менший шрифт у полі змушує iPhone зумити сторінку
     на фокусі, і зʼявляється горизонтальний скрол. 44px — зручна ціль пальця */
  .bd-staff-row input[type="date"] { width: 100%; font-size: 16px; min-height: 44px; }
}

/* ── Стан системи (health.php) ───────────────────────────────────────── */
.hc-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius); margin-bottom: 16px;
  border: 1px solid var(--line); background: var(--panel); }
.hc-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hc-hero-main b { display: block; font-family: var(--font-display); font-size: 17px; }
.hc-hero-main small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Крапка-світлофор: колір несе сенс, тому дублюємо його словом у бейджі */
.hc-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.hc-ok    .hc-dot { background: var(--green); }
.hc-warn  .hc-dot { background: var(--amber); }
.hc-fail  .hc-dot { background: var(--red); }
.hc-ok    { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.hc-warn  { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); }
.hc-fail  { border-color: color-mix(in srgb, var(--red) 34%, var(--line)); }

.hc-list { display: flex; flex-direction: column; gap: 8px; }
.hc-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hc-item .hc-dot { margin-top: 5px; }
.hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-body b { font-size: 14px; }
.hc-value { font-size: 13px; color: var(--muted); }
.hc-hint { font-size: 12px; color: var(--faint); line-height: 1.5; margin-top: 3px; }
.hc-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px; background: var(--surface-muted); color: var(--muted); }
.hc-ok   .hc-badge { background: var(--green-glow); color: var(--green); }
.hc-warn .hc-badge { background: var(--amber-soft); color: color-mix(in srgb, var(--amber) 65%, var(--text)); }
.hc-fail .hc-badge { background: var(--red-bg); color: var(--red); }

@media (max-width: 620px) {
  .hc-hero { flex-direction: column; align-items: stretch; }
  .hc-hero .btn { width: 100%; justify-content: center; }
  .hc-item { flex-wrap: wrap; }
  .hc-badge { margin-left: 24px; }
}