/* KZTM CRM — оформление. Токены — как на сайте kztm.kz (:root в index.html). */
:root {
  --bg-deep: #F4F4F0;
  --bg-primary: #FBFBF8;
  --bg-card: #FFFFFF;
  --border-thin: #E8E8E0;
  --border-medium: #D5D5CB;
  --text-primary: #0F1B2D;
  --text-secondary: #4A5568;
  --text-muted: #8B96A8;
  --on-accent: #FFFFFF;
  --accent: #C8392E;
  --accent-hover: #A52E25;
  --navy: #0F1B2D;
  --warn-bg: #FFF4D6;
  --warn-text: #7A5300;
  --ok: #2F7D4F;
  --error-bg: #FBEAE8;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --radius: 8px;
  --nav-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* --- общие --- */
.view--center { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border-thin); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__name { font: 700 22px/1 var(--font-display); letter-spacing: 1.2px; }
.brand__crm {
  font: 500 11px/1 var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 4px 6px;
}
.brand--lg .brand__mark { width: 44px; height: 44px; }
.brand--lg .brand__name { font-size: 30px; }

.btn {
  font: 500 14px/1 var(--font-body); cursor: pointer; border-radius: 6px;
  padding: 10px 16px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  min-height: 40px;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-medium); }
.btn--ghost:hover { background: var(--bg-deep); border-color: var(--border-medium); color: var(--text-primary); }
.btn--small { padding: 8px 12px; min-height: 34px; font-size: 13px; }

.alert { border-radius: 6px; padding: 10px 12px; font-size: 14px; margin: 16px 0 0; }
.alert--error { background: var(--error-bg); color: var(--accent-hover); }
.alert .dups { margin: 6px 0 8px; padding-left: 18px; }

/* --- справочники --- */
.dicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dict .card__head { align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.dict__list { list-style: none; margin: 8px 0 12px; padding: 0; }
.dict__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-thin); }
.dict__val { overflow-wrap: anywhere; }
.dict__btns { display: flex; gap: 2px; }
.dict__add { display: flex; gap: 8px; align-items: center; }
.dict__add .input { flex: 1; min-width: 0; }
.icon-btn--sm { width: 28px; height: 28px; font-size: 14px; }
.icon-btn--confirm { width: auto; padding: 0 8px; color: var(--accent); border-color: var(--accent); font-size: 12px; }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* --- клиенты --- */
.filters--clients { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)); }
.leads__head.clients__head, .lead.client { grid-template-columns: minmax(0, 2fr) 116px 130px 128px 100px 118px; }
.client__bin, .client__phone, .client__leads, .client__deals { font-size: 13px; }
.client__bin .due { margin-left: 4px; }
.pill--quiet { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-thin); }
.pill--warn { background: var(--warn-bg); color: var(--warn-text); }
.mergebox { margin: 0 0 16px; }
.mergebox ul { margin: 6px 0 10px; padding-left: 18px; }
.unlinked { display: grid; }
.unl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px 20px; padding: 12px 16px; border-bottom: 1px solid var(--border-thin); }
.unl:last-child { border-bottom: 0; }
.unl__name { font-weight: 600; margin: 4px 0 2px; overflow-wrap: anywhere; }
.unl__act { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.unl__btns, .linkbox__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-leads { display: grid; gap: 6px; margin: 6px 0 4px; }
.mini-lead { display: grid; grid-template-columns: 96px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border-thin); border-radius: 6px; color: inherit; text-decoration: none; font-size: 13px; }
.mini-lead:hover { background: var(--bg-primary); }
.mini-lead__req { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.link-btn { background: none; border: 0; padding: 0 0 0 6px; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.linkbox { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--border-thin); border-radius: 6px; background: var(--bg-primary); }
.linkbox .alert { margin: 0; }
.alert .dups li { margin: 2px 0; }
.alert .dups a { color: inherit; font-weight: 600; }
.alert p { margin: 4px 0 0; }

/* --- вход --- */
.login-card {
  width: 100%; max-width: 400px; background: var(--bg-card);
  border: 1px solid var(--border-thin); border-radius: 12px; padding: 32px 28px;
  text-align: center; box-shadow: 0 1px 2px rgba(15, 27, 45, .04);
}
.login-card__title { font: 600 22px/1.3 var(--font-display); margin: 24px 0 8px; }
.login-card__text { color: var(--text-secondary); margin: 0 0 24px; font-size: 14px; }
.login-card__google { display: flex; justify-content: center; min-height: 44px; }
.env-note { margin: 20px 0 0; font-size: 12px; color: var(--warn-text); background: var(--warn-bg); border-radius: 6px; padding: 8px 10px; }

/* --- рабочая область --- */
.app { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-thin);
  position: sticky; top: 0; z-index: 10;
}
.topbar__spacer { flex: 1; }
.env-badge {
  font: 500 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase;
  background: var(--warn-bg); color: var(--warn-text); border-radius: 4px; padding: 6px 8px;
}
.user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 0; }
.user__name { font-weight: 500; font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user__role { font: 400 11px/1.4 var(--font-mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }

.nav { padding: 16px 12px; border-right: 1px solid var(--border-thin); background: var(--bg-primary); display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px;
  color: var(--text-secondary); text-decoration: none; font-weight: 500;
}
.nav__item.is-active { background: var(--bg-deep); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--accent); }
.nav__item.is-soon { opacity: .45; cursor: default; }
.nav__item.is-soon::after { content: 'скоро'; margin-left: auto; font: 400 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; }
.nav__icon { width: 18px; text-align: center; font-size: 15px; }

.content { padding: 32px 40px 48px; max-width: 960px; width: 100%; min-width: 0; }
.page-title { font: 600 28px/1.25 var(--font-display); margin: 0 0 8px; }
.page-lead { color: var(--text-secondary); margin: 0 0 28px; max-width: 640px; }

.card { background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius); padding: 20px 22px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__title { font: 600 17px/1.3 var(--font-body); margin: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.status-ok { color: var(--ok); }

/* --- общие мелочи --- */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.spinner--sm { width: 18px; height: 18px; border-width: 2px; display: inline-block; }
.no-scroll { overflow: hidden; }
.input {
  font: 400 14px/1.2 var(--font-body); color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-medium); border-radius: 6px; padding: 9px 10px; min-height: 40px; min-width: 0;
}
.input:focus { outline: 2px solid var(--accent-line, rgba(200,57,46,.4)); outline-offset: 0; border-color: var(--accent); }
.icon-btn {
  border: 0; background: transparent; font-size: 26px; line-height: 1; width: 40px; height: 40px;
  border-radius: 6px; cursor: pointer; color: var(--text-secondary); flex: none;
}
.icon-btn:hover { background: var(--bg-deep); color: var(--text-primary); }

/* --- заявки --- */
.content:has(#page-leads:not([hidden])) { max-width: 1320px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .page-title { margin: 0; }
.page-head__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font: 500 14px/1 var(--font-body); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border-thin); background: var(--bg-card); color: var(--text-secondary);
  border-radius: 999px; padding: 9px 14px; min-height: 38px;
}
.tab:hover { border-color: var(--border-medium); color: var(--text-primary); }
.tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab__n { font: 500 12px/1 var(--font-mono); opacity: .7; margin-left: 4px; }
.tab--alert:not(.is-active) .tab__n { color: var(--accent); opacity: 1; }

.filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(140px, 1fr)) auto; gap: 8px; margin-bottom: 10px; }
.summary { font-size: 13px; color: var(--text-muted); margin: 4px 0 10px; }

.leads { background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius); overflow: hidden; }
.leads__head, .lead {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 112px minmax(160px, 1.3fr) minmax(160px, 1.6fr) 150px 130px 150px 90px;
  padding: 10px 16px;
}
.leads__head {
  font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
  background: var(--bg-primary); border-bottom: 1px solid var(--border-thin);
}
.lead { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-thin); font-size: 14px; }
.lead:last-child { border-bottom: 0; }
.lead:hover { background: var(--bg-primary); }
.lead.is-overdue { box-shadow: inset 3px 0 0 var(--accent); }
.lead.is-closed { color: var(--text-secondary); }
.lead > span { min-width: 0; }
.lead__id, .lead__who, .lead__next { display: flex; flex-direction: column; gap: 2px; }
.lead__id .muted { font-size: 12px; }
.lead__who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead__who .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead__req { color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead__stage { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lead__step { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead__src { font-size: 13px; }

.pill { display: inline-block; font: 500 12px/1 var(--font-body); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.ai { display: inline-block; font: 500 11px/1 var(--font-mono); padding: 4px 6px; border-radius: 4px; background: var(--bg-deep); color: var(--text-secondary); }
.ai--hi { background: #e6f4ea; color: #137333; }
.ai--mid { background: #fef7e0; color: #b06000; }
.ai--lo { background: #f1f3f4; color: #80868b; }
.due { font-weight: 500; font-size: 13px; }
.due--over { color: var(--accent); }
.due--today { color: #b06000; }
.due--none { color: var(--warn-text); background: var(--warn-bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; align-self: flex-start; }

.empty { text-align: center; padding: 48px 16px; color: var(--text-secondary); display: grid; justify-items: center; gap: 4px; }
.empty p { margin: 0; }

/* --- карточка заявки --- */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 27, 45, .35); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg-card);
  box-shadow: -8px 0 32px rgba(15, 27, 45, .15); overflow-y: auto; display: flex; flex-direction: column;
}
.drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--border-thin); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.drawer__head h2 { font: 600 22px/1.25 var(--font-display); margin: 4px 0 8px; }
.drawer__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--border-thin); }
.drawer__actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.drawer__body { padding: 8px 22px 32px; }
.section-title { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin: 20px 0 10px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.field dt { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.field dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.field--wide { grid-column: 1 / -1; }
.note { margin: 28px 0 0; font-size: 13px; color: var(--text-secondary); background: var(--bg-deep); border-radius: 6px; padding: 10px 12px; }

/* --- правка заявки --- */
.small { font-size: 12px; }
.banner { font-size: 13px; background: var(--bg-deep); border-radius: 6px; padding: 10px 12px; margin: 12px 0 0; }
.banner--warn { background: var(--warn-bg); color: var(--warn-text); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-field__label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.form-field .req { display: none; color: var(--accent); margin-left: 2px; }
.form-field.is-required .req { display: inline; }
.form-field.has-error .input { border-color: var(--accent); background: var(--error-bg); }
.form-field__hint { font-size: 12px; color: var(--text-muted); }
textarea.input { resize: vertical; line-height: 1.45; font-family: var(--font-body); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.chip { font: 500 12px/1 var(--font-body); border: 1px solid var(--border-medium); background: var(--bg-card); color: var(--text-secondary); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
/* Новая заявка: шаг 1 — найти клиента, шаг 2 — контакт или новый клиент */
.step { border: 1px solid var(--border-thin); border-radius: var(--radius); padding: 12px; margin: 0 0 12px; background: var(--bg-card); }
.step__title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 10px; }
.step__n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--on-accent); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
/* «Кто обратился» в новой заявке: поиск клиента до создания */
.who__results { display: grid; gap: 6px; margin-top: 6px; }
.who__results:empty { display: none; }
.who__head { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.who__item { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; }
.who__item:hover, .who__item:focus-visible { border-color: var(--accent); outline: none; }
.who__name { font-weight: 600; overflow-wrap: anywhere; }
.who__meta { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.who__why { font-size: 12px; color: var(--ok); }
.who__contact { font-size: 13px; color: var(--text-secondary); background: var(--bg-deep); border-radius: var(--radius); padding: 8px 10px; overflow-wrap: anywhere; }
.who__contact a { color: inherit; font-weight: 600; }
.who__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.who__card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ok); background: #F1F8F3; border-radius: var(--radius); }
.who__card--new, .who__card--none { border-color: var(--border-medium); background: var(--bg-deep); }
.who__card .link-btn { flex: none; padding: 0; }
.form-actions { margin-top: 20px; position: sticky; bottom: 0; background: var(--bg-card); padding: 12px 0 4px; border-top: 1px solid var(--border-thin); }
.form-actions__buttons { display: flex; gap: 8px; }
.form-actions .alert { margin: 0 0 10px; }

.comment { display: grid; gap: 8px; }
.comment__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.history { display: grid; gap: 2px; }
.history__item { padding: 10px 0 10px 12px; border-left: 2px solid var(--border-thin); font-size: 13px; }
.history__item--stage { border-left-color: var(--accent); }
.history__item p { margin: 4px 0 0; overflow-wrap: anywhere; }
.history__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; }
.history__comment { white-space: pre-line; background: var(--bg-primary); border-radius: 6px; padding: 8px 10px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 100;
  background: var(--navy); color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 27, 45, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast__link { color: #fff; font-weight: 600; text-decoration: underline; }

/* --- тендеры --- */
.page-lead--tight { margin-bottom: 16px; font-size: 14px; }
.filters--tenders { grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(180px, 1fr); }
.tenders { display: grid; gap: 8px; }
.tender { background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius); overflow: hidden; }
.tender.is-urgent { box-shadow: inset 3px 0 0 var(--accent); }
.tender.is-open { border-color: var(--border-medium); box-shadow: 0 4px 16px rgba(15, 27, 45, .06); }
.tender.is-open.is-urgent { box-shadow: inset 3px 0 0 var(--accent), 0 4px 16px rgba(15, 27, 45, .06); }
.tender__head {
  width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 16px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.tender__head:hover { background: var(--bg-primary); }
.tender__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tender__name { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tender.is-open .tender__name { -webkit-line-clamp: unset; }
.tender__meta { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tender__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.tender__sum { font-weight: 600; font-size: 14px; white-space: nowrap; }
.tender__body { padding: 4px 16px 16px 82px; border-top: 1px solid var(--border-thin); }
.tender__body .fields { margin-top: 12px; }
.tender__links, .tender__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.tender__links .btn, .tender__actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.tender__body .alert { margin-top: 10px; }
.verdicts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--on:hover { color: #fff; border-color: var(--navy); }
.chip--clear { border-style: dashed; }
.chip:disabled { opacity: .5; cursor: default; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--warn-bg); color: var(--warn-text); padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.score {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 600 16px/1 var(--font-mono); background: var(--bg-deep); color: var(--text-secondary);
}
.score--hi { background: #e6f4ea; color: #137333; }
.score--mid { background: #fef7e0; color: #b06000; }
.score--lo { background: #f1f3f4; color: #80868b; }
.score--none { font-size: 14px; }
.pill--lead { background: #e6f4ea; color: #137333; }
.pill--verdict { background: var(--bg-deep); color: var(--text-secondary); }
.due--past { color: var(--text-muted); text-decoration: line-through; font-size: 13px; }

/* --- воронка --- */
.content:has(#page-funnel:not([hidden])), .content:has(#page-summary:not([hidden])) { max-width: none; }
.input--compact { min-height: 34px; padding: 6px 8px; font-size: 13px; }
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.board__col {
  flex: 0 0 260px; width: 260px; min-width: 0; background: var(--bg-deep); border-radius: var(--radius); padding: 10px; scroll-snap-align: start;
  border: 2px solid transparent; transition: border-color .15s, background .15s; max-height: calc(100vh - 220px); display: flex; flex-direction: column;
}
.board__col--drop { flex-basis: 180px; width: 180px; background: transparent; border: 2px dashed var(--border-medium); }
.board.is-dragging .board__col { border-color: var(--border-medium); }
.board__col.is-over { border-color: var(--accent); background: #fff6f4; }
.board__head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; }
.board__n { font: 500 12px/1 var(--font-mono); color: var(--text-secondary); }
.board__sum { margin-left: auto; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.board__cards { display: grid; gap: 8px; overflow-y: auto; min-height: 60px; }
.board__empty { margin: 8px 4px; font-size: 13px; color: var(--text-muted); text-align: center; }
.fcard {
  background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: 6px; padding: 10px; cursor: pointer;
  display: grid; gap: 6px; font-size: 13px; outline: none; min-width: 0;
}
.fcard__top, .fcard__foot { min-width: 0; }
.fcard[draggable="true"] { cursor: grab; }
.fcard:hover, .fcard:focus-visible { border-color: var(--border-medium); box-shadow: 0 2px 8px rgba(15, 27, 45, .08); }
.fcard.is-overdue { box-shadow: inset 3px 0 0 var(--accent); }
.fcard.is-dragging { opacity: .4; }
.fcard.is-saving { opacity: .6; cursor: progress; }
.fcard__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fcard__top strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard__req { margin: 0; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fcard__meta { display: flex; align-items: center; gap: 6px; }
.fcard__sum { font-weight: 600; font-size: 12px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 10px/24px var(--font-body); text-align: center; flex: none; }

/* --- сводка --- */
.seg { display: inline-flex; border: 1px solid var(--border-medium); border-radius: 6px; overflow: hidden; }
.seg button { font: 500 13px/1 var(--font-body); border: 0; background: var(--bg-card); color: var(--text-secondary); padding: 8px 12px; cursor: pointer; min-height: 34px; }
.seg button + button { border-left: 1px solid var(--border-medium); }
.seg button.is-on { background: var(--navy); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi__label { font-size: 12px; color: var(--text-secondary); }
.kpi__value { font: 600 28px/1.1 var(--font-display); color: var(--text-primary); }
.kpi__sub { font-size: 12px; color: var(--text-muted); }
.kpi--critical { border-color: #f1b7b7; }
.kpi--critical .kpi__value { color: #b42f2f; }
.kpi--warning { border-color: #f5d9a0; }
.viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.viz--wide { grid-column: 1 / -1; }
.viz .card__title { margin-bottom: 4px; }
.viz__note { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.hbar { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; position: relative; }
.hbar__label { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 12px; }
.hbar__fill { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; min-width: 0; }
.hbar__value { font: 500 13px/1 var(--font-mono); color: var(--text-primary); white-space: nowrap; }
.vbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 180px; align-items: end; }
.vbar { display: grid; grid-template-rows: 18px 1fr 18px; height: 100%; text-align: center; position: relative; }
.vbar__value { font: 500 12px/18px var(--font-mono); color: var(--text-primary); }
.vbar__track { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border-medium); }
.vbar__fill { width: min(100%, 28px); background: #2a78d6; border-radius: 4px 4px 0 0; }
.vbar__label { font: 400 11px/18px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  background: var(--navy); color: #fff; font: 400 12px/1.3 var(--font-body); padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
}
.hbar:hover .hbar__fill, .vbar:hover .vbar__fill { filter: brightness(.9); }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-thin); text-align: right; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.tbl tbody th { font-weight: 500; }
.cell--bad { color: #b42f2f; font-weight: 600; }
.cell--warn { color: var(--warn-text); font-weight: 600; }

/* --- сотрудники --- */
.roles-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.roles-help div { background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: 6px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; }
.roles-help span { color: var(--text-secondary); }
.staff-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr) auto auto; gap: 10px; align-items: end; }
.staff-add__owner { padding-bottom: 10px; }
.staff { margin-top: 14px; }
.staff__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) 160px auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-thin); }
.staff__row:last-child { border-bottom: 0; }
.staff__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.staff__who .muted { font-size: 13px; overflow-wrap: anywhere; }
.staff__err { grid-column: 1 / -1; margin: 0; }

@media (max-width: 1180px) {
  .leads__head, .lead { grid-template-columns: 104px minmax(150px, 1.2fr) minmax(140px, 1.4fr) 140px 150px; }
  .leads__head span:nth-child(5), .lead__owner, .leads__head span:nth-child(7), .lead__src { display: none; }
  .filters { grid-template-columns: 1fr 1fr 1fr; }
  .filters__search { grid-column: 1 / -1; }
  .leads__head.clients__head, .lead.client { grid-template-columns: minmax(0, 1.6fr) 116px 128px 118px; }
  .clients__head span:nth-child(3), .client__phone, .clients__head span:nth-child(5), .client__deals { display: none; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- телефон и планшет --- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .topbar { padding: 10px 16px; gap: 8px; }
  .brand__name { font-size: 18px; }
  .brand__mark { width: 28px; height: 28px; }
  .user__name { max-width: 120px; font-size: 13px; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; flex-direction: row; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--border-thin);
    background: var(--bg-card); height: auto;
  }
  .nav__item { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 11px; flex: 1; text-align: center; }
  .nav__item.is-active { box-shadow: inset 0 3px 0 var(--accent); }
  .nav__item.is-soon::after { display: none; }
  .nav__item[data-route="status"], .nav__item[data-route="dicts"] { display: none !important; } /* служебная страница: в нижнем меню 7 пунктов не помещаются */
  .nav__icon { font-size: 18px; width: auto; }
  .content { padding: 20px 16px 32px; }
  .page-title { font-size: 22px; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leads { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 8px; }
  .leads__head { display: none; }
  .lead {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who stage" "req req" "next next" "id owner";
    gap: 6px 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius);
  }
  .lead:last-child { border-bottom: 1px solid var(--border-thin); }
  .lead__who { grid-area: who; }
  .lead__stage { grid-area: stage; justify-content: flex-end; align-self: start; }
  .lead__req { grid-area: req; font-size: 13px; }
  .lead__req:empty { display: none; }
  .lead__next { grid-area: next; flex-direction: row; gap: 8px; align-items: baseline; }
  .lead__id { grid-area: id; flex-direction: row; gap: 8px; align-items: baseline; }
  .lead__owner { grid-area: owner; display: block !important; font-size: 12px; color: var(--text-secondary); text-align: right; }
  .lead__src { display: none !important; }
  .lead.client { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "bin leads"; }
  .client .lead__who { grid-area: who; }
  .client__status { grid-area: status; justify-self: end; align-self: start; }
  .client__bin { grid-area: bin; display: block !important; }
  .client__leads { grid-area: leads; display: block !important; text-align: right; }
  .client__phone, .client__deals { display: none !important; }
  .filters--clients { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dicts { grid-template-columns: minmax(0, 1fr); }
  .unl { grid-template-columns: minmax(0, 1fr); background: var(--bg-card); border: 1px solid var(--border-thin); border-radius: var(--radius); }
  .unlinked { gap: 8px; }
  .mini-lead { grid-template-columns: auto auto minmax(0, 1fr); }
  .mini-lead > .muted { display: none; }
  .drawer__panel { width: 100%; }
  .drawer__head, .drawer__actions, .drawer__body { padding-left: 16px; padding-right: 16px; }
  .fields { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .filters--tenders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .board__col { flex-basis: 82vw; width: 82vw; max-height: none; }
  .board__col--drop { flex-basis: 60vw; width: 60vw; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__value { font-size: 24px; }
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
  .roles-help { grid-template-columns: minmax(0, 1fr); }
  .staff-add { grid-template-columns: minmax(0, 1fr); }
  .staff__row { grid-template-columns: minmax(0, 1fr) auto; }
  .staff__row [data-staff-email] { grid-column: 1 / -1; }
  .staff__who { grid-column: 1 / -1; }
  .nav__item span:last-child { font-size: 10px; }
  .vbars { height: 150px; gap: 3px; }
  .page-head__meta { width: 100%; justify-content: space-between; }
  .tender__head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .tender__side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; text-align: left; }
  .score { width: 40px; height: 40px; font-size: 15px; }
  .tender__body { padding: 4px 12px 14px; }
  .toast { bottom: calc(var(--nav-h) + 16px); }
}
@media (max-width: 420px) {
  .user { display: none; }
  .login-card { padding: 28px 20px; }
}