/* Каркас и прежние общие классы ЦРМ — перенесены из <style> в base.html
 * без изменений внешнего вида (фаза 1 редизайна). Новые компоненты —
 * в components.css с приставкой ui-; старые классы отсюда уходят в фазе 3,
 * по мере перевода страниц.
 */

* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); font-size:var(--fs); line-height:1.5; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text); transition:background .15s,color .15s; }
/* D1/D17 аудита 22.10: текст абзацев — не крупнее заголовков блоков (16 px браузера против 14 px), <small> — 12 px,
   а не 10–11 px вложенным уменьшением */
small { font-size:var(--fs-xs); }
/* ── каркас: меню слева и шапка (фаза 2, UI_REDESIGN_SPEC.md п. 3) ── */
.shell { display:flex; min-height:100vh; }
.shell-side { width:240px; flex:0 0 240px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border); z-index:30; overflow:hidden; transition:width .15s, flex-basis .15s; }
.shell-side__top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 12px 10px 16px; }
.logo-row { text-decoration:none; display:flex; flex-direction:column; min-width:0; }
.logo-row .logo { display:inline-flex; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; font-size:22px; line-height:1.15; color:var(--accent); }
.logo-row .sub { color:var(--muted); font-size:11px; margin-top:2px; letter-spacing:1px; }
.logo-row .logo { display:inline-flex; font-weight:800; text-transform:uppercase;
  letter-spacing:1.5px; font-size:24px; line-height:1.15; color:var(--accent); }
/* Логотип статичный (владелец, 21.10: «убери анимацию… оставь лёгкую подсветку, которая не отвлекает»):
   лёгкое свечение цветом акцента, без движения букв. */
.logo-row .logo { text-shadow:0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }
.logo-row .sub { color:var(--muted); font-size:11px; margin-top:3px; letter-spacing:1px; }
.shell-search { display:flex; align-items:center; gap:8px; margin:0 12px 8px; height:32px; padding:0 10px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font:400 var(--fs-sm)/1 var(--font); cursor:pointer; text-align:left; }
.shell-search:hover { color:var(--text-strong); border-color:var(--border-strong); }
.shell-search__text { flex:1; }
kbd { font:500 11px/1 var(--font); color:var(--faint); border:1px solid var(--border); border-radius:4px; padding:2px 5px; background:var(--surface); }
.shell-label { display:flex; align-items:center; gap:6px; padding:10px 12px 4px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.shell-pins { padding-bottom:4px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.shell-nav { flex:1; overflow-y:auto; padding:4px 0 12px; scrollbar-width:thin; }
.shell-side__bottom { border-top:1px solid var(--border); padding:6px 0; }
.nav-row { position:relative; display:flex; align-items:center; }
.nav-link, .nav-group__head { flex:1; display:flex; align-items:center; gap:10px; min-height:34px; margin:1px 8px; padding:0 10px;
  border-radius:var(--radius); color:var(--muted); text-decoration:none; font:500 var(--fs-sm)/1.2 var(--font);
  border:0; background:none; cursor:pointer; text-align:left; position:relative; min-width:0; }
.nav-link:hover, .nav-group__head:hover { background:var(--surface-3); color:var(--text-strong); }
.nav-link.is-active { background:var(--surface-3); color:var(--text-strong); }
.nav-link.is-active::before { content:""; position:absolute; left:-8px; top:7px; bottom:7px; width:2px; border-radius:2px; background:var(--accent); }
.nav-link__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-link--sub { padding-left:36px; min-height:30px; }
.nav-chevron { color:var(--faint); transition:transform .15s; }
.nav-group.is-open > .nav-group__head .nav-chevron { transform:rotate(90deg); }
.nav-group { display:flex; flex-direction:column; }   /* кнопка раздела — во всю ширину, как ссылка (25.10: в узком меню уезжала влево) */
.nav-group__items { display:none; }
.nav-group.is-open > .nav-group__items { display:block; }
.nav-badge { margin-left:auto; }
.nav-pin { position:absolute; right:12px; display:none; width:24px; height:24px; align-items:center; justify-content:center;
  border:0; border-radius:6px; background:var(--surface-3); color:var(--faint); cursor:pointer; }
.nav-row:hover .nav-pin, .nav-pin:focus-visible { display:inline-flex; }
.nav-pin.is-on { color:var(--accent); }
.nav-row:hover .nav-badge { visibility:hidden; }
.shell-scrim { display:none; }

.shell-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.shell-top { position:sticky; top:0; z-index:20; height:56px; display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-6); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); }
.shell-top .shell-burger { display:none; }
.shell-crumbs { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 120px; font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; overflow:hidden; }
.shell-crumbs a { color:var(--muted); text-decoration:none; }
.shell-crumbs a:hover { color:var(--text-strong); }
.shell-crumbs [aria-current] { color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; }
.shell-crumbs__sep { color:var(--faint); }
/* A-22 (UI-03): датчики сжимаются и прячутся, а не выталкивают меню пользователя за экран (1321–1459 px) */
.shell-status { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:var(--radius);
  border:1px solid transparent; background:none; color:var(--muted); font:500 var(--fs-xs)/1 var(--font); cursor:pointer; white-space:nowrap;
  min-width:0; flex:0 1 auto; }
.shell-user { flex:0 0 auto; }
.shell-status:hover, .shell-status[aria-expanded="true"] { background:var(--surface-3); color:var(--text-strong); }
/* D5 аудита 22.10: итог («Всё работает» / «Есть замечания») — текстом всегда, подписи сервисов — от 1600 px */
.shell-status__sum { display:inline-flex; align-items:center; gap:8px; }
/* ── датчики в шапке ─────────────────────────────────────────────── */
.hb { gap:10px; padding:0 6px; }
.hb-svcs, .hb-load { display:inline-flex; align-items:center; gap:4px; }
.hb-load { gap:10px; padding-right:10px; border-right:1px solid var(--border); }
.hb-svc { position:relative; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px 0 7px; border-radius:12px;
  font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border:1px solid var(--border); white-space:nowrap; transition:background .2s, color .2s; }
.hb-svc .icon { color:var(--faint); transition:color .2s; }
.hb-svc__dot { width:6px; height:6px; border-radius:50%; background:var(--faint); }
.hb-svc.is-ok { color:var(--text); }
.hb-svc.is-ok .icon { color:var(--success); }
.hb-svc.is-ok .hb-svc__dot { background:var(--success); box-shadow:0 0 0 0 var(--success); animation:hb-pulse 2.4s ease-out infinite; }
.hb-svc.is-bad { color:var(--danger); background:var(--danger-soft); border-color:transparent; font-weight:500; }
.hb-svc.is-bad .icon { color:var(--danger); }
.hb-svc.is-bad .hb-svc__dot { background:var(--danger); animation:hb-blink 1s steps(2, start) infinite; }
@keyframes hb-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent); } 70% { box-shadow:0 0 0 5px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes hb-blink { to { visibility:hidden; } }
.hb-gauge { position:relative; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); white-space:nowrap; }
.hb-gauge__label { font-weight:500; }
.hb-gauge__bar { width:34px; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.hb-gauge__bar i { display:block; height:100%; width:4%; border-radius:3px; background:var(--success); transition:width .6s ease, background .3s; }
.hb-gauge.is-mid .hb-gauge__bar i { background:var(--warning); }
.hb-gauge.is-high .hb-gauge__bar i { background:var(--danger); }
.hb-gauge b { min-width:28px; color:var(--text-strong); font-weight:600; font-variant-numeric:tabular-nums; }
.hb-gauge b.shell-warn { color:var(--warning); }
.hb-sync { position:relative; display:inline-flex; align-items:center; gap:4px; padding-left:10px; border-left:1px solid var(--border); font-size:11px; color:var(--faint); white-space:nowrap; }
.hb-sync--stale { color:var(--warning); }
/* подсказка по наведению — сразу, без задержки системного title */
.hb [data-tip]:hover::after { content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0; z-index:70; width:max-content; max-width:280px;
  padding:6px 10px; border-radius:var(--radius-sm); background:var(--surface); color:var(--text); box-shadow:var(--shadow-pop);
  font-size:var(--fs-xs); font-weight:400; line-height:1.4; white-space:normal; text-align:left; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .hb-svc__dot { animation:none !important; } }
/* Узко: сначала прячем подписи сервисов (остаются иконки), шкалы нагрузки уходят в выпадашку, потом всё — одна
   точка-сводка. Брейкпоинты рассчитаны со шкалами нагрузки (админ, тимлид), а не только с датчиками. */
@media (max-width:1600px) { .hb-svc__name { display:none; } .hb-svc { padding:0 7px; } }
@media (max-width:1500px) { .hb-load { display:none !important; } }
@media (max-width:1280px) { .hb-sync { display:none !important; } }
@media (max-width:1000px) {
  .hb-load, .hb-svcs, .hb-sync { display:none !important; }
  .shell-status__sum { display:inline-flex; }
}
.shell-sys { min-width:280px; }
.shell-sys__list { display:flex; flex-direction:column; gap:6px; }
.shell-sys__row { display:grid; grid-template-columns:10px auto 1fr; align-items:center; gap:8px; font-size:var(--fs-sm); }
.shell-sys__row small { color:var(--faint); font-size:11px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shell-sys__load { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.shell-sys__load > div { display:flex; flex-direction:column; gap:2px; font-size:var(--fs-xs); color:var(--muted); }
.shell-sys__load b { font-size:var(--fs-md); color:var(--text-strong); font-variant-numeric:tabular-nums; }
.shell-sys__load b.shell-warn { color:var(--warning); }
.shell-sys__sync { font-size:var(--fs-xs); color:var(--muted); margin-bottom:8px; }
.shell-sys__refresh { width:100%; }
.shell-user { border:0; background:none; padding:0; cursor:pointer; border-radius:50%; }
.shell-avatar { display:inline-flex; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--text-strong); font:600 12px/1 var(--font); border:1px solid var(--border-strong); }
.shell-user:hover .shell-avatar, .shell-user[aria-expanded="true"] .shell-avatar { border-color:var(--accent); }
.shell-user__who { display:flex; flex-direction:column; gap:2px; padding:6px 10px 4px; }
.shell-user__who span { font-size:var(--fs-xs); color:var(--muted); }
.ui-menu__item.is-active { color:var(--accent); }
.container { width:100%; padding:var(--sp-6); }
.shell-pagebar { display:flex; justify-content:flex-end; gap:var(--sp-2); margin:0 0 var(--sp-3); }

/* узкое меню: только иконки, подписи — в подсказках */
.shell-narrow .shell-side { width:64px; flex-basis:64px; }
.shell-narrow .shell-side .logo-row .sub, .shell-narrow .shell-side .nav-link__label, .shell-narrow .shell-side .nav-chevron,
.shell-narrow .shell-side .shell-search__text, .shell-narrow .shell-side kbd, .shell-narrow .shell-side .shell-label span,
.shell-narrow .shell-side .nav-pin, .shell-narrow .shell-side .nav-badge { display:none; }
.shell-narrow .shell-side__top { flex-direction:column; padding:12px 8px 8px; }
.shell-narrow .shell-side .logo-row .logo { font-size:0; }
.shell-narrow .shell-side .logo-row .logo span:first-child { font-size:20px; }
.shell-narrow .shell-search { margin:0 12px 8px; justify-content:center; padding:0; }
.shell-narrow .nav-link, .shell-narrow .nav-group__head { justify-content:center; padding:0; margin:1px 12px; }
.shell-narrow .nav-group__items { display:none !important; }

/* телефон и планшет: меню выезжает поверх по кнопке ☰ */
@media (max-width:900px) {
  .shell-side { position:fixed; left:0; top:0; bottom:0; height:100%; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-pop); }
  .shell-mobile-open .shell-side { transform:none; }
  .shell-narrow .shell-side { width:240px; }
  .shell-side .shell-collapse { display:none; }
  .shell-scrim { display:block; position:fixed; inset:0; background:var(--overlay); z-index:29; }
  .shell-scrim[hidden] { display:none; }
  .shell-top .shell-burger { display:inline-flex; margin-left:-6px; }
  .shell-top { padding:0 var(--sp-4); }
  .shell-status__text { display:none; }
  .container { padding:var(--sp-4); }
}
@media (max-width:640px) { .shell-crumbs > :not(:last-child) { display:none; } }
@media (prefers-reduced-motion:reduce) { .shell-side { transition:none; } }

.filters { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); align-items:center; }
.filters input, .filters select { height:34px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-strong); padding:0 10px; border-radius:var(--radius); font:400 var(--fs-sm)/1.3 var(--font); }
/* D3 аудита 22.10: ui-select в строке фильтров — по содержимому, а не во всю ширину */
.filters .ui-select { width:auto; min-width:140px; }
.filters input:focus, .filters select:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:var(--radius);
  text-decoration:none; font:500 var(--fs-sm)/1 var(--font); background:var(--accent-fill); color:var(--on-accent); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s; }
.btn:hover { background:var(--accent-fill-hover); }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent-fill); color:var(--on-accent); }
.btn-ghost, .btn-secondary { background:var(--surface-3); color:var(--text); border-color:var(--border); }
.btn-ghost:hover, .btn-secondary:hover { background:var(--surface-3); border-color:var(--border-strong); color:var(--text-strong); }
.btn-green { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:var(--danger); filter:brightness(1.08); }
.btn-sm { height:30px; padding:0 12px; font-size:var(--fs-xs); }
.btn-xs { height:26px; padding:0 10px; font-size:var(--fs-xs); }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5); }
.kpi .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4); }
.kpi .lbl { font-size:var(--fs-xs); color:var(--muted); }
.kpi .val { font-size:var(--fs-xl); font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.kpi .sub { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); scrollbar-width:thin; }
.table-wrap::-webkit-scrollbar { height:10px; }
.table-wrap::-webkit-scrollbar-track { background:var(--surface-2); }
.table-wrap::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid var(--surface-2); }
.scroll-hint { display:none; }
.scroll-hint::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--border),transparent); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
thead { background:var(--surface-2); }
/* Закреплённая шапка таблицы.
   Почему у контейнера появляется своя высота. Шапку можно приклеить
   только внутри того, что прокручивается. У .table-wrap стоит
   overflow-x:auto, а по правилам CSS второй оси тогда тоже назначается
   auto — то есть страница и таблица прокручиваются РАЗНЫМИ полосами, и
   при прокрутке страницы приклеенной шапке двигаться не относительно
   чего. Поэтому таблица получает собственную высоту и прокручивается
   внутри себя: тогда шапка держится на месте, а колонки остаются
   подписанными на любой глубине. */
.table-wrap.sticky-head { max-height:calc(100vh - 210px); overflow:auto; }
.table-wrap.sticky-head thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); }
/* Без этого нижняя граница шапки уезжает при прокрутке: у прилипшей
   ячейки border не рисуется. */
.table-wrap.sticky-head thead th::after { content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid var(--border); }
thead th { padding:0 12px; height:36px; text-align:left; font-weight:500; color:var(--muted); font-size:var(--fs-xs); white-space:nowrap; }
thead th.sortable a { color:inherit; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
thead th.sortable a:hover { color:var(--text-strong); }
thead th.sortable.sorted { color:var(--text-strong); }
.sort-arrow { font-size:var(--fs-xs); min-width:8px; }
tbody td { padding:10px 12px; border-top:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
tbody tr:hover { background:var(--surface-2); }
.tag { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:600; text-transform:uppercase; }
.tag-video { background:var(--accent-soft); color:var(--accent); }
.tag-banner, .tag-image { background:var(--info-soft); color:var(--info); }
.badge, .pill { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:11px; font-size:var(--fs-xs); font-weight:500; white-space:nowrap; }
.b-new, .b-auto, .pill-muted { background:var(--surface-3); color:var(--muted); }
.b-test, .b-loaded, .pill-info { background:var(--info-soft); color:var(--info); }
.b-scale, .pill-ok { background:var(--success-soft); color:var(--success); }
.b-stop, .pill-bad { background:var(--danger-soft); color:var(--danger); }
.b-rework, .pill-warn { background:var(--warning-soft); color:var(--warning); }
.pos { color:var(--success); font-weight:600; } .neg { color:var(--danger); font-weight:600; }
.priority-low { color:var(--muted); }
.priority-normal { color:var(--info); }
.priority-high { color:var(--accent); font-weight:800; }
.priority-urgent { color:var(--danger); font-weight:800; }
/* Длинный текст в ячейке (например, вставленная целиком ссылка) не
   имеет права растягивать таблицу и уводить остальные колонки вправо:
   показываем начало, полное значение — в подсказке. */
.ellipsis { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
code.sub { background:var(--surface-2); padding:2px 6px; border-radius:var(--radius-sm); font-size:var(--fs-xs); color:var(--text-strong); border:1px solid var(--border); }
.msg { padding:10px 14px; border-radius:var(--radius); margin-bottom:var(--sp-4); font-size:var(--fs-sm); }
.msg-success { background:var(--success-soft); }
.msg-error { background:var(--danger-soft); }
.msg-info { background:var(--info-soft); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-5); margin-bottom:var(--sp-4); }
.panel h3 { margin:0 0 var(--sp-3); color:var(--text-strong); font-size:var(--fs); font-weight:600; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.metric { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 15px; }
.metric .l { font-size:var(--fs-xs); color:var(--muted); }
.metric .v { font-size:var(--fs-lg); font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.metric .s { font-size:11px; color:var(--muted); margin-top:3px; }
.strip { display:flex; gap:3px; flex-wrap:wrap; margin-top:10px; }
.cell { width:26px; height:26px; border-radius:6px; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); color:var(--muted); position:relative; cursor:default; }
.cell.on { background:rgba(34,197,94,.75); color:var(--text-strong); font-weight:700; }
.cell.mid { background:rgba(249,115,22,.7); color:var(--text-strong); font-weight:700; }
.drop { border:2px dashed var(--border); border-radius:14px; padding:36px; text-align:center; background:var(--surface); cursor:pointer; position:relative; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--surface-2); }
.drop-input { opacity:0; position:absolute; pointer-events:none; }
.form-control { width:100%; min-height:34px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-strong); padding:7px 10px; border-radius:var(--radius); font:400 var(--fs-sm)/1.4 var(--font); }
.form-control:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
label { font-size:var(--fs-xs); color:var(--muted); display:block; margin:12px 0 6px; font-weight:500; }
.modal { display:none; position:fixed; inset:0; background:var(--overlay); z-index:50; align-items:center; justify-content:center; padding:30px; }
.modal.open { display:flex; }
.modal .box { max-width:900px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-5); max-height:90vh; overflow:auto; box-shadow:var(--shadow-pop); }
.modal video, .modal img { width:100%; max-height:65vh; border-radius:10px; background:#000; }
.vthumb { position:relative; display:inline-block; flex:0 0 auto; line-height:0; cursor:pointer; border-radius:var(--radius-sm); background:var(--surface-3); }
.vthumb::after { content:""; position:absolute; left:50%; top:50%; width:0; height:0; margin:-6px 0 0 -4px; border-style:solid;
  border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.8)); pointer-events:none; }
.thumb { width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm); vertical-align:middle; cursor:pointer; background:var(--surface-3); }
.flight { display:inline-block; background:var(--success-soft); color:var(--success); border-radius:var(--radius); padding:5px 12px; font-size:var(--fs-xs); margin:0 8px 8px 0; font-weight:500; }
.chart-toggle { display:inline-flex; align-items:center; gap:6px; margin:0 8px 8px 0; padding:6px 10px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius); cursor:pointer; font-size:var(--fs-xs); font-weight:500; transition:all .15s; user-select:none; }
.chart-toggle:hover { border-color:var(--accent); color:var(--text-strong); }
.chart-toggle input { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }
.chart-toggle:has(input:not(:checked)) { opacity:.48; border-color:var(--border); text-decoration:line-through; }
.chart-stage { position:relative; height:330px; min-height:260px; }
.chart-stage canvas { width:100% !important; height:100% !important; }
.chart-empty { min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); background:var(--surface-2); border:1px dashed var(--border); border-radius:10px; padding:24px; }
.chart-error { display:none; margin-top:10px; padding:10px 12px; color:var(--danger); background:var(--danger-soft); border-radius:var(--radius); font-size:var(--fs-xs); }
.chart-summary { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.chart-summary strong { font-size:24px; color:var(--text-strong); }
.month-card { margin-bottom:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px; }
.month-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; font-weight:700; }
.month-meta { font-size:12px; color:var(--muted); text-align:right; line-height:1.55; }
.calendar-weekdays, .calendar-days { display:grid; grid-template-columns:repeat(7, minmax(28px, 1fr)); gap:5px; max-width:420px; }
.calendar-weekdays { margin-bottom:5px; color:var(--muted); font-size:var(--fs-xs); text-align:center; text-transform:uppercase; }
.calendar-days .cell { width:100%; height:34px; font-size:var(--fs-xs); }
.top-row { background:linear-gradient(90deg,var(--accent-soft),transparent 28%); }
.top-row td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.leader-badge { display:inline-flex;align-items:center;gap:4px;margin:4px 5px 0 0;padding:2px 7px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;white-space:nowrap; }
.rank-badge { display:inline-flex;margin:4px 4px 0 0;padding:2px 6px;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--muted);font-size:var(--fs-xs);font-weight:600;white-space:nowrap; }
.cohort-note { display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:-4px 0 14px;padding:10px 14px;background:var(--info-soft);border-radius:var(--radius);font-size:var(--fs-xs);color:var(--text); }
.link-button { background:none; border:0; color:var(--muted); font:inherit; font-weight:600; padding:0; cursor:pointer; }
.link-button:hover { color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; }
.gcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-4); transition:border-color .15s; }
.gcard:hover { border-color:var(--border-strong); }
.gcard video, .gcard img { width:100%; border-radius:10px; max-height:300px; background:#000; }
.stat-line { display:flex; gap:14px; font-size:13px; margin-top:8px; color:var(--muted); }
.stat-line b { color:var(--text-strong); }
@media (max-width:900px) {
  .dashboard-charts { grid-template-columns:1fr !important; }
  .chart-stage { height:290px; }
  .month-head { display:block; }
  .month-meta { margin-top:6px; text-align:left; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }

/* «Один оранжевый» на старых экранах (аудит 07.10): кнопки в фильтрах и строках таблиц — серые;
   оранжевой остаётся главная кнопка страницы и явные .btn-primary. */
.filters .btn:not(.btn-primary):not(.btn-danger):not(.btn-green),
table .btn:not(.btn-primary):not(.btn-danger):not(.btn-green),
.table-wrap .btn:not(.btn-primary):not(.btn-danger):not(.btn-green) {
  background:var(--surface-3); color:var(--text); border-color:var(--border);
}
.filters .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover,
table .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover { border-color:var(--border-strong); color:var(--text-strong); }

/* UI-15: ссылки без своего класса — одного вида во всей ЦРМ (раньше — системный синий и фиолетовый «посещённой»).
   Ссылки-кнопки, пункты меню и чипы со своими классами этим правилом не задеваются. */
a:not([class]) { color:var(--text-strong); text-decoration:underline; text-decoration-color:var(--border-strong, var(--border));
  text-underline-offset:2px; }
a:not([class]):hover { color:var(--accent); text-decoration-color:currentColor; }
a:not([class]):visited { color:var(--text-strong); }
.val a:not([class]), .ui-kpi a:not([class]) { color:inherit; }

/* F7: колокольчик центра уведомлений — число непрочитанных */
.shell-bell { position:relative; }
.shell-bell__n { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--danger); color:var(--surface); font:600 10px/16px var(--font); text-align:center; }

/* D7 аудита 22.10: на телефоне ряды кнопок, фильтров и сегментов переносятся, а не уезжают за край экрана;
   длинная надпись кнопки — в две строки; сетки панелей — в одну колонку (в т.ч. с grid-template-columns в style). */
@media (max-width:640px) {
  .u-flex, .ui-seg { flex-wrap:wrap; }
  .ui-seg > * { flex:1 1 auto; text-align:center; }
  .grid { grid-template-columns:minmax(0,1fr) !important; }
  .btn { white-space:normal; height:auto; min-height:34px; padding-top:6px; padding-bottom:6px;
    line-height:1.25; text-align:center; max-width:100%; }            /* .ui-btn — в конце components.css (он грузится позже) */
  .ui-icon-btn { flex:none; }
  .arb-block > .ui-table, .panel > table { display:block; overflow-x:auto; max-width:100%; }
}