/* Сдержанный деловой интерфейс без лишней анимации (ТЗ 27).
   Палитра — по ТЗ «Визуальное обновление интерфейса»:
   сайдбар #10213D, акцент #2563EB, фон #F5F7FB, карточки #FFFFFF,
   границы #DDE4EE, текст #172033 / #667085 / #98A2B3.
   Системные: успех #15803D, предупреждение #D97706, ошибка #DC2626,
   дополнительный #7C3AED, нейтральный #667085. */

/* Inter (variable) — локально, без CDN; файлы в static/fonts/ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: #172033;
  background: #F5F7FB;
}
a { color: #2563EB; text-decoration: none; }
a:hover { text-decoration: underline; color: #1D4ED8; }
h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0 0 14px; }
h3 { font-size: 14.5px; margin: 0 0 8px; }

/* --- Каркас --- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex-shrink: 0;
  background: #10213D; color: rgba(255, 255, 255, 0.75);
  display: flex; flex-direction: column;
}
.sidebar-brand { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 16px; }
/* значок и заголовок в одну линию: две строки заголовка (15px/1.25)
   визуально совпадают с высотой значка 38px */
.sidebar-brand .brand-row { display: flex; gap: 10px; align-items: center; }
.sidebar-brand .logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-brand b { color: #fff; display: block; font-size: 15px; line-height: 1.25; }
.sidebar-brand small { color: rgba(255, 255, 255, 0.55); display: block; font-size: 11px; line-height: 1.5; }
.sidebar nav { flex: 1; padding: 4px 0 8px; overflow-y: auto; }
.nav-label {
  display: block; padding: 16px 26px 5px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38);
}
.sidebar nav a {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 14px; margin: 3px 10px; border-radius: 9px;
  color: rgba(255, 255, 255, 0.75); font-size: 14px;
  transition: background .12s, color .12s;
}
.sidebar nav a svg { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.9; }
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: #2457E6; color: #fff; }
.sidebar nav a.active svg { opacity: 1; }
/* плашка вошедшего сотрудника под заголовком: имя + должность (ссылка в профиль) */
.brand-user {
  display: block; margin-top: 2px; padding: 8px 10px; border-radius: 10px;
  background: rgba(46, 204, 138, 0.30); border: 1px solid rgba(72, 226, 160, 0.75);
  color: inherit;
}
.brand-user:hover { background: rgba(46, 204, 138, 0.42); text-decoration: none; }
.brand-user b { color: #fff; display: block; font-size: 12.5px; line-height: 1.35; }
.brand-user small { color: #A9F5CE; font-size: 11px; line-height: 1.4; }
/* низ сайдбара: кнопка выхода */
.sidebar-user { border-top: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.14); padding: 8px 10px; }
.sidebar-user form { margin: 0; }
.sidebar-user .logout {
  width: 100%; background: none; border: none; color: rgba(255, 255, 255, 0.65); cursor: pointer;
  padding: 8px 12px; border-radius: 8px; display: flex; gap: 10px; align-items: center; font-size: 13px;
}
.sidebar-user .logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.content { flex: 1; min-width: 0; padding: 26px 30px; }

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .content { padding: 18px 16px; }
}

/* --- Компоненты --- */
.card {
  background: #FFFFFF; border: 1px solid #DDE4EE; border-radius: 12px;
  padding: 22px; margin-bottom: 18px;
}
.card.tight { padding: 0; overflow-x: auto; }

.btn, button.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; background: #2563EB; color: #fff; line-height: 1.45;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #1D4ED8; text-decoration: none; color: #fff; }
.btn.secondary { background: #fff; color: #344054; border-color: #CBD5E1; }
.btn.secondary:hover { background: #EEF2F8; color: #344054; }
.btn.danger { background: #DC2626; }
.btn.danger:hover { background: #B91C1C; }
.btn.success { background: #15803D; }
.btn.success:hover { background: #166534; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }

.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid #CBD5E1; border-radius: 8px; background: #fff;
  font-family: inherit; color: #172033;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus {
  outline: none; border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}
.input[disabled], .input[readonly] { background: #F5F7FB; color: #667085; }
label.label {
  display: block; font-size: 12.5px; font-weight: 500;
  color: #667085; margin-bottom: 5px;
}
.field { margin-bottom: 14px; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

/* --- Таблицы --- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 13px; color: #667085; font-weight: 500;
  padding: 12px 14px;
  border-bottom: 1px solid #DDE4EE; white-space: nowrap;
}
.tbl td { padding: 13px 14px; font-size: 14px; border-bottom: 1px solid #EEF1F5; vertical-align: top; transition: background .12s; }
.tbl tr:hover td { background: #F5F8FD; }
.tbl td a { color: #2563EB; }

/* --- Бейджи (статусы с текстом, не только цветом — ТЗ 27) --- */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; line-height: 1.4;
}
.badge-new    { background: #EAF2FF; color: #2563EB; }  /* новая */
.badge-blue   { background: #E8F0FF; color: #1D4ED8; }  /* в работе */
.badge-yellow { background: #FFF4D8; color: #B76E00; }  /* на согласовании / внимание */
.badge-purple { background: #F3E8FF; color: #7C3AED; }  /* ожидается ответ клиента */
.badge-green  { background: #E8F8EF; color: #15803D; }  /* завершена / успех */
.badge-red    { background: #FEECEC; color: #DC2626; }  /* просрочка / ошибка */
.badge-gray   { background: #EEF1F5; color: #667085; }  /* архив, приостановлено */
.badge-slate  { background: #F2F4F7; color: #475467; }  /* ожидает исполнителя, нейтральный */

/* --- Метки сроков (ТЗ §10) --- */
.due-lbl {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.due-lbl.ok    { background: #E8F8EF; color: #15803D; }  /* больше 5 дней   */
.due-lbl.warn  { background: #FFF4D8; color: #D97706; }  /* от 1 до 5 дней  */
.due-lbl.today { background: #FFEDD5; color: #EA580C; }  /* срок сегодня    */
.due-lbl.over  { background: #FEECEC; color: #DC2626; }  /* просрочено      */

.dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  background: #DC2626; color: #fff; border-radius: 999px; font-size: 10px;
  text-align: center; padding: 0 4px; vertical-align: middle; }

/* --- Сообщения чата --- */
.msg { border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; max-width: 85%; font-size: 14px; }
.msg .meta { font-size: 11.5px; color: #667085; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg.client { background: #FFF9EB; border: 1px solid #F3E3B3; }
.msg.staff { background: #EFF4FF; border: 1px solid #C9DAF8; margin-left: auto; }
.msg.mine { background: #EFF4FF; border: 1px solid #C9DAF8; margin-left: auto; }
.msg.other { background: #F7F9FC; border: 1px solid #DDE4EE; }
.tick { font-size: 12px; font-weight: 700; color: #98A2B3; letter-spacing: -2px; }
.tick.read { color: #2563EB; }
/* галочка внизу сообщения, справа (как в мессенджерах) */
.msg .tickline { text-align: right; margin-top: 3px; line-height: 1; }

/* --- Уведомления Django messages --- */
.flash { padding: 11px 15px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash.success { background: #E8F8EF; border: 1px solid #B7E4C7; color: #15803D; }
.flash.error { background: #FEECEC; border: 1px solid #F5C2C2; color: #DC2626; }
.flash.info { background: #EAF2FF; border: 1px solid #C9DAF8; color: #1D4ED8; }
.flash.warn { background: #FFF7E0; border: 1px solid #F3E3B3; color: #92600A; }

/* --- Разное --- */
.muted { color: #667085; font-size: 13px; }
.small { font-size: 12.5px; }
.mono { font-family: Consolas, monospace; font-size: 12px; word-break: break-all; }
.stat { text-align: center; padding: 16px 14px; }
.stat b { display: block; font-size: 28px; letter-spacing: -0.01em; }
.stat span { font-size: 12.5px; color: #667085; }
.stat.alert b { color: #DC2626; }
.stat.alert { background: #FEF2F2; border-color: #F5C2C2; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .actions { display: flex; gap: 8px; }

/* Вкладки: активная подчёркивается синей линией (ТЗ §12.3) */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid #DDE4EE; margin-bottom: 18px; flex-wrap: wrap; }
.tabs a {
  padding: 11px 2px; font-size: 14px; color: #667085; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.active { color: #2457E6; border-color: #2457E6; }
.tabs a:hover { text-decoration: none; color: #172033; }

.pager { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.pager a, .pager span {
  padding: 5px 11px; border: 1px solid #CBD5E1; border-radius: 6px;
  font-size: 13px; background: #fff; color: #344054;
}
.pager span.cur { background: #2563EB; color: #fff; border-color: #2563EB; }
dl.props { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
dl.props dt { color: #667085; }
dl.props dd { margin: 0; color: #172033; }
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #F5F7FB; }
.center-card { width: 100%; max-width: 420px; }
hr.sep { border: none; border-top: 1px solid #EEF1F5; margin: 14px 0; }
details.tpl { margin-bottom: 10px; }
details.tpl summary { cursor: pointer; font-weight: 500; font-size: 14px; padding: 4px 0; }

/* --- Рабочий стол (дашборд) --- */
.dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-search { flex: 1; max-width: 440px; min-width: 200px; }
.bell {
  position: relative; display: inline-flex; padding: 9px;
  border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; color: #344054;
}
.bell:hover { background: #EEF2F8; text-decoration: none; }
.bell .dot { position: absolute; top: -7px; right: -7px; }

.dash-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.dash-layout.with-panel { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1100px) { .dash-layout.with-panel { grid-template-columns: 1fr; } }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.tile {
  --accent: #475467;
  position: relative; overflow: hidden;
  display: flex; gap: 13px; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px; margin-bottom: 0; color: inherit; min-width: 0; min-height: 108px;
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* мягкое цветное свечение в углу плитки */
.tile::before {
  content: ""; position: absolute; top: -46px; right: -34px;
  width: 132px; height: 132px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%);
  opacity: .55; transition: opacity .18s ease;
}
.tile:hover {
  text-decoration: none; color: inherit; transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 42%, #DDE4EE);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 38%, transparent);
}
.tile:hover::before { opacity: 1; }
.tile-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; order: 2;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tile:hover .tile-icon {
  background: var(--accent); color: #fff; transform: scale(1.06);
  box-shadow: 0 6px 14px -3px color-mix(in srgb, var(--accent) 50%, transparent);
}
.tile-icon svg { width: 20px; height: 20px; }
.tile.plain .tl { color: #667085; font-size: 12.5px; }
.tile b {
  display: block; font-size: 32px; line-height: 1.04; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: #10213D;
}
.tile .tl { display: block; font-size: 13px; font-weight: 600; color: #344256; margin-top: 6px; }
.tile small { display: block; font-size: 11.5px; color: #98A2B3; margin-top: 2px; }

.dash-tabs { display: flex; gap: 22px; border-bottom: 1px solid #DDE4EE; flex-wrap: wrap; }
.dash-tabs a {
  padding: 11px 2px; font-size: 14px; color: #667085;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dash-tabs a.active { color: #2457E6; border-color: #2457E6; font-weight: 500; }
.dash-tabs a:hover { color: #172033; text-decoration: none; }

.avatar {
  width: 28px; height: 28px; border-radius: 999px; background: #DDE4EE; color: #475467;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; vertical-align: middle; margin-right: 8px;
}

.dash-tbl td { vertical-align: middle; }
.dash-tbl input[type="checkbox"] { width: 15px; height: 15px; accent-color: #2563EB; }
.rowmenu { position: relative; display: inline-block; }
.rowmenu summary {
  list-style: none; cursor: pointer; padding: 2px 9px; border-radius: 6px;
  color: #667085; font-weight: 700; font-size: 15px; user-select: none;
}
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu summary:hover, .rowmenu[open] summary { background: #EEF2F8; color: #172033; }
.rowmenu .menu {
  position: absolute; right: 0; top: calc(100% + 4px); background: #fff;
  border: 1px solid #DDE4EE; border-radius: 10px; min-width: 210px; z-index: 20;
  padding: 4px; box-shadow: 0 8px 20px rgba(16, 33, 61, 0.12); text-align: left;
}
.rowmenu .menu a { display: block; padding: 8px 10px; border-radius: 6px; color: #172033; font-size: 13px; }
.rowmenu .menu a:hover { background: #EEF2F8; text-decoration: none; }
.rowmenu .menu form { margin: 0; }
.rowmenu .menu .menu-danger {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  background: none; border: none; cursor: pointer; color: #DC2626; font-size: 13px;
}
.rowmenu .menu .menu-danger:hover { background: #FEE2E2; }
.pager .dis { color: #CBD5E1; }

.charts { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
@media (max-width: 1000px) { .charts { grid-template-columns: 1fr; } }
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.tick { font-size: 10px; fill: #98A2B3; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: #667085; margin-bottom: 6px; flex-wrap: wrap; }
.chart-legend i, .donut-legend i {
  width: 9px; height: 9px; border-radius: 999px; display: inline-block;
  margin-right: 6px; vertical-align: -1px;
}
.chart-tip {
  position: absolute; background: #fff; border: 1px solid #DDE4EE; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; min-width: 150px; z-index: 5; pointer-events: none;
  box-shadow: 0 4px 12px rgba(16, 33, 61, 0.10);
}
.chart-tip div { margin-top: 4px; }
.chart-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

.donut-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { width: 168px; flex-shrink: 0; }
.donut-num { font-size: 26px; font-weight: 600; fill: #172033; }
.donut-sub { font-size: 11px; fill: #667085; }
.donut-legend { flex: 1; min-width: 180px; font-size: 13px; }
.donut-legend > div { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.donut-legend b { margin-left: auto; font-weight: 500; white-space: nowrap; }

.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.panel-close { font-size: 22px; color: #667085; line-height: 1; }
.panel-close:hover { color: #172033; text-decoration: none; }
.panel-tabs { display: flex; gap: 16px; border-bottom: 1px solid #DDE4EE; margin: 14px 0 10px; }
.panel-tabs button {
  background: none; border: none; padding: 9px 2px; font-size: 13px; color: #667085;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.panel-tabs button.active { color: #2457E6; border-color: #2457E6; font-weight: 500; }
.panel-chat { max-height: 300px; overflow-y: auto; }
.chatline { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.chatline .send {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px; border: none;
  background: #2563EB; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chatline .send:hover { background: #1D4ED8; }

/* --- Линия статусов в карточке: степпер (кружки + линия) --- */
.pipeline { display: flex; max-width: 860px; margin: 2px auto 20px; counter-reset: step; }
.pipe-item { flex: 1; display: flex; min-width: 0; margin: 0; position: relative; }
.pipe-item + .pipe-item::before {
  content: ""; position: absolute; top: 16px; left: calc(-50% + 17px);
  width: calc(100% - 34px); height: 3px; border-radius: 2px; background: #B9C6DD;
}
/* пройденная часть линии — зелёная (до текущего этапа включительно) */
.pipe-item.done::before, .pipe-item.cur::before, .pipe-item.green::before { background: #15803D; }
.pipe-seg {
  width: 100%; border: none; background: none; font-family: inherit;
  font-size: 14px; font-weight: 500; color: #667085; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0 4px; text-align: center; line-height: 1.25;
  position: relative; z-index: 1; transition: color .12s;
}
.pipe-seg::before {
  counter-increment: step; content: counter(step);
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: #fff; color: #667085; border: 2px solid #B9C6DD;
  box-sizing: border-box; transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.pipe-seg.done { color: #15803D; }
.pipe-seg.done::before { content: "✓"; background: #15803D; border-color: #15803D; color: #fff; }
.pipe-seg.green { color: #15803D; font-weight: 600; }
.pipe-seg.green::before { content: "✓"; background: #15803D; border-color: #15803D; color: #fff; }
.pipe-seg.cur { color: #10213D; font-weight: 700; font-size: 14.5px; }
.pipe-seg.cur::before {
  width: 38px; height: 38px; margin-top: -3px; font-size: 15px;
  background: #2563EB; border-color: #2563EB; color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.pipe-now {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
  color: #2563EB; letter-spacing: .01em;
}
.pipe-note { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: #98A2B3; }

/* --- Клиентская страница заявки --- */
.client-pipe { max-width: 100%; margin: 0; }
.client-pipe .pipe-seg { font-size: 12.5px; white-space: normal; }
.client-pipe .pipe-seg.cur { font-size: 13px; }
.chat-list { display: flex; flex-direction: column; }
.chat-input { border-top: 1px solid #EEF1F5; margin-top: 12px; padding-top: 12px; }
.attach {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13.5px; color: #475467; padding: 6px 10px; border-radius: 8px;
  border: 1px dashed #CBD5E1; transition: border-color .12s, color .12s;
}
.attach:hover { border-color: #2563EB; color: #2563EB; }
.dropzone {
  border: 2px dashed #CBD5E1; border-radius: 10px; padding: 22px;
  text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.over { border-color: #2563EB; background: #F5F8FF; }
.doc-tbl { margin-bottom: 4px; }
.doc-tbl th { font-size: 12px; }
.doc-tbl td { font-size: 13.5px; }
.hist-row { padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid #EEF1F5; }
.hist-row:last-child { border-bottom: none; }
.pipe-seg.static { cursor: default; }
button.pipe-seg:hover { color: #10213D; }
button.pipe-seg:hover::before { border-color: #2563EB; }
button.pipe-seg.done:hover::before, button.pipe-seg.cur:hover::before { border-color: transparent; filter: brightness(0.92); }
@media (max-width: 900px) {
  .pipe-seg { font-size: 12px; }
  .pipe-seg::before { width: 28px; height: 28px; font-size: 12.5px; }
  .pipe-seg.cur::before { width: 33px; height: 33px; }
  .pipe-item + .pipe-item::before { top: 14px; }
}

/* --- Шапка карточки заявки (только оформление, состав/логика не менялись) --- */
.app-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.app-head-main { min-width: 0; }
.app-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-num {
  margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700;
  color: #10213D; letter-spacing: -0.02em;
}
.app-head-row .badge { font-size: 13px; padding: 5px 11px; }
.app-head-row .due-lbl { font-size: 12.5px; padding: 5px 10px; border-radius: 6px; }
.app-subject { margin-top: 8px; font-size: 15px; font-weight: 500; color: #172033; line-height: 1.4; }
.app-meta { margin-top: 5px; font-size: 12.5px; color: #667085; }
.app-back { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.app-back svg { margin-left: -2px; }

/* --- Вкладки карточки заявки (усиленные, scoped) --- */
.card-tabs { gap: 26px; border-bottom-width: 2px; margin-bottom: 20px; }
.card-tabs a {
  padding: 12px 2px; font-size: 14.5px; font-weight: 600; color: #667085;
  border-bottom-width: 3px; margin-bottom: -2px;
}
.card-tabs a.active { color: #2563EB; border-color: #2563EB; }
.card-tabs a:hover { color: #172033; }

/* --- Реестр заявок: карточный вид --- */
.view-toggle { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.view-toggle a {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
  border: 1px solid #CBD5E1; background: #fff; color: #344054;
}
.view-toggle a:hover { background: #EEF2F8; text-decoration: none; color: #344054; }
.view-toggle a.active { background: #2563EB; border-color: #2563EB; color: #fff; }

.app-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px; margin-bottom: 18px;
}
.app-card { margin-bottom: 0; padding: 18px 20px; display: flex; flex-direction: column; }
.ac-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ac-num { font-size: 16px; font-weight: 700; }
.ac-actions { display: flex; gap: 4px; align-items: center; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid #DDE4EE; border-radius: 8px;
  color: #475467; background: #fff; cursor: pointer; font-weight: 700;
}
.iconbtn:hover { background: #EEF2F8; text-decoration: none; }
.rowmenu summary.iconbtn { padding: 0; font-size: 14px; color: #475467; }
.ac-subject { display: block; margin: 10px 0 12px; font-weight: 700; color: #172033; font-size: 15px; }
.ac-subject:hover { color: #2563EB; text-decoration: none; }
.ac-row { border-top: 1px solid #EEF1F5; padding-top: 10px; margin-top: auto; font-size: 13px; }
.ac-row + .ac-row { margin-top: 10px; }
.ac-row.c3 { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 8px; }
.ac-label { display: block; font-size: 11.5px; color: #98A2B3; margin-bottom: 3px; }
.ac-row .badge { margin-left: 4px; font-size: 11.5px; padding: 2px 8px; }
.pdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-right: 6px; vertical-align: 1px;
}
.p-red { background: #DC2626; } .p-blue { background: #2563EB; }
.p-yellow { background: #D97706; } .p-green { background: #15803D; } .p-gray { background: #98A2B3; }
.ac-flag {
  font-size: 12px; font-weight: 600; color: #DC2626;
  border: 1px solid #F5C2C2; background: #FEF2F2; border-radius: 6px; padding: 3px 10px;
}

.workrow { display: grid; grid-template-columns: 2fr 3fr; gap: 18px; margin-bottom: 18px; align-items: start; }
@media (max-width: 1000px) { .workrow { grid-template-columns: 1fr; } }
/* строка заголовка «Текущая работа»: заголовок слева, кнопка «Копировать отчёт»
   справа у правого края ЛЕВОГО блока (та же сетка 2fr/3fr, что и у карточек) */
.workhead { display: grid; grid-template-columns: 2fr 3fr; gap: 18px; margin: 2px 0 12px; align-items: center; }
.workhead .wh-act { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
@media (max-width: 1000px) { .workhead { grid-template-columns: 1fr; } }
.d-neg { color: #DC2626; font-weight: 600; }
.d-zero { color: #EA580C; font-weight: 600; }
.d-pos { color: #15803D; font-weight: 600; }

/* --- шапка карточки-блока с шестерёнкой --- */
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 14px;
}
.gearbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid #DDE4EE; background: #fff; color: #667085; cursor: pointer;
  transition: color .15s, border-color .15s, transform .25s;
}
.gearbtn:hover { color: #2563EB; border-color: #C9DAF8; }
.gearbtn.on { color: #2563EB; border-color: #C9DAF8; background: #EAF2FF; transform: rotate(90deg); }

/* --- документы от клиента --- */
.cdoc {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #DDE4EE; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.cdoc + .cdoc { margin-top: 8px; }
.cdoc:hover { border-color: #C9DAF8; background: #F7F9FC; }
.cdoc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: #EAF2FF; color: #2563EB;
}
.cdoc-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cdoc-name { font-weight: 600; color: #2563EB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdoc-ext {
  margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: #667085; background: #EEF1F5; border-radius: 6px; padding: 3px 7px;
}

[hidden] { display: none !important; }

.iconbtn.del:hover { color: #DC2626; border-color: #F5C2C2; background: #FEF2F2; }

/* --- опасная зона (ТЗ §12.7) --- */
.card.danger-zone { background: #FEF2F2; border-color: #F5C2C2; }
.card.danger-zone h2 { color: #DC2626; }

/* --- активность клиента по месяцам --- */
.mgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 7px 28px; max-height: 320px; overflow-y: auto; padding-right: 4px;
}
.mrow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mlabel { width: 110px; flex-shrink: 0; color: #475467; }
.mbar {
  flex: 1; height: 8px; background: #EEF1F5; border-radius: 999px; overflow: hidden;
}
.mbar span { display: block; height: 100%; background: #2563EB; border-radius: 999px; }
.mnum { width: 24px; text-align: right; }
.mrow.zero .mlabel, .mrow.zero .mnum { color: #98A2B3; font-weight: 400; }

/* --- строки статистики: подпись ... значение --- */
.props.statline { grid-template-columns: 1fr auto; }
.props.statline dt { display: flex; align-items: baseline; min-width: 0; }
.props.statline dt span { flex-shrink: 0; }
.props.statline dt::after {
  content: ""; flex: 1; margin: 0 8px;
  border-bottom: 1px dotted #CBD5E1; transform: translateY(-4px);
}
.props.statline dd { text-align: right; font-weight: 600; }

/* --- общая аналитика по клиентам --- */
.trend { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.trend-up { color: #15803D; }
.trend-down { color: #DC2626; }
.trend-flat { color: #667085; }
.dyn-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.dyn-label { width: 92px; flex-shrink: 0; color: #475467; }
.dyn-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dyn-bar { display: block; height: 7px; background: #EEF1F5; border-radius: 999px; overflow: hidden; }
.dyn-bar .bi { display: block; height: 100%; background: #2563EB; border-radius: 999px; }
.dyn-bar .bd { display: block; height: 100%; background: #15803D; border-radius: 999px; }
.dyn-nums { width: 56px; text-align: right; font-weight: 600; flex-shrink: 0; }

/* --- «Общая работа по заявкам за период» (Аналитика) --- */
.asec { margin: 22px 0 12px; font-size: 17px; }
.stat .stat-sub { display: block; font-size: 11.5px; color: #98A2B3; margin-top: 2px; }
.wx-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid #EEF1F5; font-size: 13.5px;
}
.wx-row:last-child { border-bottom: none; }
.wx-row b { white-space: nowrap; }
.p-violet { background: #7C3AED; }
.dyn-bar .bl { display: block; height: 100%; background: #A78BFA; border-radius: 999px; }
.dyn-tgl { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#dynBox.hide-i .dyn-bar.row-i, #dynBox.hide-d .dyn-bar.row-d,
#dynBox.hide-l .dyn-bar.row-l { display: none; }
.dist-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.dist-label { width: 150px; flex-shrink: 0; color: #475467; }
.dist-bar { flex: 1; height: 8px; background: #EEF1F5; border-radius: 999px; overflow: hidden; }
.dist-bar .df { display: block; height: 100%; background: #2563EB; border-radius: 999px; }
.dist-bar .df.late { background: #DC2626; }
.dist-nums { flex-shrink: 0; font-weight: 600; white-space: nowrap; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid #EEF1F5; font-size: 13.5px;
}
.rank-row:first-of-type { border-top: 0; }
.rank-n { width: 20px; color: #98A2B3; flex-shrink: 0; }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-row .trend { margin: 0; width: 34px; text-align: right; }
.attn-row { padding: 9px 0; border-top: 1px solid #EEF1F5; }
.attn-row:first-of-type { border-top: 0; }
.sticky-wrap { overflow-x: auto; }
.sticky-tbl th:first-child, .sticky-tbl td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 1;
  box-shadow: 2px 0 0 #EEF1F5;
}
.sticky-tbl thead th { white-space: nowrap; }
.sticky-tbl thead th a { color: inherit; }
.sticky-tbl thead th:first-child { background: #fff; }

/* --- сворачиваемые фильтры реестра + чипы активных фильтров --- */
.filters-wrap { margin-bottom: 14px; }
.filters-wrap summary { list-style: none; cursor: pointer; user-select: none; }
.filters-wrap summary::-webkit-details-marker { display: none; }
.filters-wrap[open] > summary { background: #EEF2F8; }
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar:empty { display: none; }
.filter-toggle { display: inline-flex; gap: 7px; align-items: center; }
.filter-toggle .cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #2563EB; color: #fff; font-size: 11.5px; font-weight: 600;
}
.fchip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 5px 6px 5px 11px; border-radius: 999px; font-size: 12.5px;
  background: #EAF2FF; color: #1D4ED8; font-weight: 500; white-space: nowrap;
}
.fchip b { font-weight: 600; }
.fchip button {
  border: none; background: none; cursor: pointer; padding: 0; margin: 0;
  width: 17px; height: 17px; border-radius: 999px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1D4ED8; font-size: 13px; transition: background .12s;
}
.fchip button:hover { background: rgba(37, 99, 235, 0.15); }

/* --- страница входа --- */
.login-brand { text-align: center; margin-bottom: 18px; }
.login-brand .logo {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
  background: #10213D; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.login-brand b { display: block; font-size: 19px; letter-spacing: -0.01em; }
.login-brand small { color: #667085; font-size: 13px; }

/* --- Личный кабинет клиента (ТЗ «ЛК клиента», июль 2026) --- */
.portal-body { background: #F5F7FB; margin: 0; }
.pnav {
  position: sticky; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid #DDE4EE;
}
.pnav-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pnav-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; color: #10213D; white-space: nowrap;
}
.pnav-brand:hover { text-decoration: none; color: #10213D; }
.pnav-logo {
  width: 30px; height: 30px; border-radius: 9px; background: #10213D; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.pnav-menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.pnav-menu a {
  padding: 7px 9px; border-radius: 8px; font-size: 13px; color: #475467;
  white-space: nowrap;
}
.pnav-menu a:hover { background: #F5F7FB; color: #172033; text-decoration: none; }
.pnav-menu a.on { background: #EBF0FE; color: #2457E6; font-weight: 600; }
.pnav-user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pnav-who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.pnav-who b { font-size: 13px; color: #172033; }
.pmain { max-width: 1160px; margin: 0 auto; padding: 22px 18px 48px; }

.ptiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.ptiles .tile { min-height: 96px; display: block; }
.tile-num {
  font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: #10213D;
}
.tile-cap { font-size: 12.5px; font-weight: 600; color: #344256; margin-top: 6px; }

.pcols { grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr; } }

.pmsg { display: block; padding: 9px 2px; border-bottom: 1px solid #EDF1F7; color: inherit; }
.pmsg:last-of-type { border-bottom: 0; }
.pmsg:hover { text-decoration: none; background: #F8FAFD; }
.pmsg-top { display: flex; justify-content: space-between; gap: 10px; }
.pdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 99px;
  background: #2563EB; margin-left: 6px; vertical-align: middle;
}

.pfilters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.seg { display: inline-flex; border: 1px solid #DDE4EE; border-radius: 9px; overflow: hidden; background: #fff; }
.seg a { padding: 7px 13px; font-size: 13px; color: #475467; }
.seg a:hover { text-decoration: none; background: #F5F7FB; }
.seg a.on { background: #2563EB; color: #fff; font-weight: 600; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pcard { display: block; color: inherit; margin-bottom: 0; }
.pcard:hover { text-decoration: none; border-color: #B9C6DD; box-shadow: 0 8px 20px -10px rgba(16,33,61,.25); }
.pcard-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
.pcard-subj { font-weight: 600; margin-bottom: 4px; color: #172033; }
.pcard-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.pflag {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px;
  background: #F1F4F9; color: #475467; font-weight: 600;
}
.pflag.warn { background: #FEF3E2; color: #B45309; }
.pflag.blue { background: #EBF0FE; color: #2457E6; }
.pflag.green { background: #E8F7EE; color: #15803D; }

.plim-bar {
  height: 10px; border-radius: 99px; background: #EDF1F7; overflow: hidden;
}
.plim-bar span { display: block; height: 100%; background: #2563EB; border-radius: 99px; }

.btn.ghost { background: transparent; border: 1px solid #DDE4EE; color: #475467; }
.btn.ghost:hover { background: #F5F7FB; }

.pmenu { position: relative; display: inline-block; }
.pmenu summary { list-style: none; cursor: pointer; }
.pmenu summary::-webkit-details-marker { display: none; }
.pmenu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 260px; padding: 14px; text-align: left;
  box-shadow: 0 12px 28px -8px rgba(16,33,61,.28);
}
@media (max-width: 700px) {
  .pnav-user .pnav-who { display: none; }
  .pmenu-pop { position: fixed; left: 12px; right: 12px; width: auto; top: 20vh; }
}

/* --- Архив заявок и заключений (ТЗ «Архив», июль 2026) --- */
.arch-frag { color: #344256; background: #F8FAFD; border-left: 3px solid #DDE4EE; padding: 6px 10px; border-radius: 0 6px 6px 0; }
.arch-frag mark, .card mark { background: #FEF08A; color: #713F12; padding: 0 2px; border-radius: 3px; font-weight: 600; }
a.pflag:hover { text-decoration: none; background: #E4E9F2; }

/* --- Рабочее пространство юриста (ТЗ «Моя работа», июль 2026) --- */
.nav-dot {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px;
  border-radius: 9px; background: #DC2626; color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 16px;
}
.su-link { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; color: inherit; }
.su-link:hover { text-decoration: none; opacity: .85; }

.work-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.work-tiles .tile b { font-size: 24px; }
.work-tiles .tile .tl { font-size: 12px; margin-top: 4px; }
.tile-danger { background: #FEF2F2; border-color: #F5C2C2; }
.tile-danger b { color: #DC2626; }

.att {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.att-1 { background: #FEE2E2; color: #B91C1C; }
.att-2 { background: #FEF3E2; color: #B45309; }
.att-3 { background: #EEF2F8; color: #475467; }

.take-line {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid #EAEFF6; margin-top: 10px; padding-top: 10px;
}

/* календарь сроков */
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.cal-grid th {
  padding: 8px; font-size: 11.5px; font-weight: 600; color: #667085;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #DDE4EE;
}
.cal-day { vertical-align: top; border: 1px solid #EAEFF6; padding: 5px 6px; height: 86px; }
.cal-out { background: #FAFBFD; }
.cal-out .cal-num { color: #C2CAD6; }
.cal-today { background: #EFF4FF; }
.cal-num { font-size: 12px; font-weight: 600; color: #475467; margin-bottom: 3px; }
.cal-chip {
  display: block; margin-bottom: 3px; padding: 2px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: #1D4ED8; background: #EBF0FE;
}
.cal-chip:hover { text-decoration: none; filter: brightness(.96); }
.cal-chip.c-over { background: #FEE2E2; color: #B91C1C; }
.cal-chip.c-today { background: #FEF3E2; color: #B45309; }
.cal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cal-col { padding: 0 0 8px; }
.cal-col-head {
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: #475467;
  border-bottom: 1px solid #EAEFF6; margin-bottom: 6px;
}
.cal-col.cal-today .cal-col-head { color: #1D4ED8; }
.cal-item { display: block; padding: 7px 12px; color: inherit; border-radius: 8px; }
.cal-item:hover { background: #F5F7FB; text-decoration: none; }

/* центр уведомлений */
.ntf {
  display: flex; gap: 12px; align-items: baseline; padding: 11px 16px;
  border-bottom: 1px solid #EAEFF6; color: inherit; flex-wrap: wrap;
}
.ntf:last-child { border-bottom: none; }
.ntf:hover { background: #F5F7FB; text-decoration: none; }
.ntf-unread { background: #F0F6FF; }
.ntf-unread .ntf-text { font-weight: 600; }
.ntf-type {
  flex-shrink: 0; width: 150px; font-size: 11.5px; font-weight: 600;
  color: #475467;
}
.ntf-type.t-OVERDUE, .ntf-type.t-RETURNED { color: #B91C1C; }
.ntf-type.t-DUE_TODAY { color: #B45309; }
.ntf-type.t-APPROVED { color: #15803D; }
.ntf-type.t-MENTION { color: #6D28D9; }
.ntf-text { flex: 1; min-width: 220px; font-size: 13.5px; }
.ntf-when { flex-shrink: 0; white-space: nowrap; }

/* моя статистика */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.stat-tile { margin-bottom: 0; padding: 14px 16px; }
.stat-tile b { display: block; font-size: 24px; letter-spacing: -0.01em; }
.stat-tile span { display: block; font-size: 12.5px; color: #667085; margin-top: 3px; }
.stat-tile small { display: block; margin-top: 2px; }

/* похожие заключения в карточке */
.sim-row {
  display: flex; gap: 12px; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid #EAEFF6;
}
.sim-row:last-child { border-bottom: none; }
.sim-pct {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #EBF0FE; color: #1D4ED8; font-size: 11.5px; font-weight: 700;
}