/* «Модульный деловой» (Intercom-адаптация): monochrome chrome, color only in
   data. Flat surfaces separated by 1px borders and hairlines; shadows are
   reserved for floating elements (menus, popovers, modals, tooltips). */
:root {
  --bg: #ffffff;
  --bg-soft: #fbfaf8;
  --bg-deep: #f4f2ec;
  /* Оливково-кремовый тинт шапок: заголовки таблиц и секционные шапки
     (карточки целей OKR, thead, шапка Ганта, колонки списка задач). */
  --bg-head: #e8e8d2;
  --border: #e9e7e1;
  --border-strong: #d9d5ca;
  --hair: #f1efeb;
  --rail-bg: #f6f4ef;
  --text: #1d1b18;
  --text-secondary: #5d594f;
  --text-muted: #8f8a7d;
  --accent: #1d1b18;
  --accent-link: #2563b8;
  --accent-soft: #f4f3ef;
  --red: #c14a34; --amber: #c07d0a; --green: #2e9e5b; --blue: #2563b8; --gray: #8f8a7d;
  --accent-border: rgba(37, 99, 184, 0.18);
  --shadow-border: rgba(28, 27, 26, 0.08) 0px 0px 0px 1px;
  --shadow-card: rgba(28, 27, 26, 0.05) 0px 1px 2px, rgba(28, 27, 26, 0.08) 0px 10px 28px -14px;
  --shadow-lift: rgba(28, 27, 26, 0.1) 0px 16px 32px -16px;
  /* Дизайн-ревью (Radix-мокап): мягкая тень для рядовых карточек — тоньше
     shadow-card, который остаётся за «геройскими» карточками (цель OKR). */
  --shadow-xs: rgba(28, 27, 26, 0.05) 0px 1px 2px, rgba(28, 27, 26, 0.04) 0px 4px 10px;
  --shadow-btn: rgba(28, 27, 26, 0.16) 0px 1px 2px;
  /* Единое кольцо фокуса для клавиатурной навигации — см. глобальный :focus-visible ниже. */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-link);
  --radius: 12px;
  --radius-lg: 18px;
  --brand-ring: #abb48a;
  --brand-wave: #4f5b38;
  --brand-flow: #707c3f;
  /* Стеклянный бейдж-иконка (сквиркл): подложка-градиент + знак поверх. */
  --brand-badge-a: #c3cba2;
  --brand-badge-b: #77835a;
  --brand-badge-ring: #fbfbf3;
  --brand-badge-wave: #31401e;
  /* Пастельная палитра инфографики Главной (CVD-валидирована; серый «Бэклог» —
     осознанный нейтральный, сегменты всегда подписаны легендой). */
  --hm-done: #5fbd88;
  --hm-prog: #6fa9ec;
  --hm-block: #dea254;
  --hm-over: #dd8172;
  --hm-back: #b3ac9b;
  --hm-other: #c9c4b8;
  --hm-good-ink: #2e9e5b;
  --hm-bad-ink: #c14a34;
  /* Шкала ежедневного опроса 1–5: пастель от красного к зелёному. */
  --svr-1: #dd8172;
  --svr-2: #e09a63;
  --svr-3: #d9bb66;
  --svr-4: #a7c97e;
  --svr-5: #5fbd88;
  color-scheme: light;
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #201e1b;
  --bg-soft: #1a1816;
  --bg-deep: #131211;
  --bg-head: #33322a;
  --border: #34312c;
  --border-strong: #423e37;
  --hair: #2a2723;
  --rail-bg: #171513;
  --text: #ededed;
  --text-secondary: #b5b0a6;
  --text-muted: #8a857b;
  --accent: #ededed;
  --accent-link: #7fa9dd;
  --accent-soft: #2b2925;
  --red: #e08573; --amber: #e0b45a; --green: #6fcf97; --blue: #7fa9dd; --gray: #a49d8c;
  --accent-border: rgba(127, 169, 221, 0.22);
  --shadow-border: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
  --shadow-card: rgba(0, 0, 0, 0.25) 0px 1px 2px, rgba(0, 0, 0, 0.4) 0px 10px 28px -14px;
  --shadow-lift: rgba(0, 0, 0, 0.45) 0px 16px 32px -16px;
  --shadow-xs: rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(0, 0, 0, 0.22) 0px 4px 10px;
  --shadow-btn: rgba(0, 0, 0, 0.45) 0px 1px 2px;
  --brand-ring: #b9c29a;
  --brand-wave: #eeecdd;
  --brand-flow: #a8b378;
  --brand-badge-a: #aeb884;
  --brand-badge-b: #56613b;
  --brand-badge-ring: #f5f4e9;
  --brand-badge-wave: #2a331a;
  /* Пастель Главной на тёмной поверхности — чуть глубже (валидирована отдельно). */
  --hm-done: #57b07e;
  --hm-prog: #639de4;
  --hm-block: #d1954a;
  --hm-over: #d17264;
  --hm-back: #a49d8c;
  --hm-other: #7d7869;
  --hm-good-ink: #6fcf97;
  --hm-bad-ink: #e08573;
  --svr-1: #d17264;
  --svr-2: #d18b52;
  --svr-3: #c9a952;
  --svr-4: #93b968;
  --svr-5: #57b07e;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Единое кольцо фокуса для клавиатурной навигации (дизайн-ревью, Radix-мокап):
   базовый слой для ВСЕХ фокусируемых элементов. Точечные компонентные правила
   ниже (tmodal/OKR/поповеры), которые меняют только border-color на :focus-visible,
   не конфликтуют — box-shadow здесь ими не перекрывается. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Поля ввода: убрать синее кольцо фокуса (--focus-ring на --accent-link) —
   по просьбе. Аффорданс остаётся: нейтральная рамка --accent (+ свой фон/рамка
   у контейнеров вроде .search-box). Компонентные :focus-visible-правила ниже
   специфичнее и переопределяют это. Доступность: видимая индикация сохранена. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
  box-shadow: none;
  border-color: var(--accent);
}

/* Общая база для админ/отчётных таблиц (дизайн-ревью): шапка --bg-head,
   разделители строк --hair, hover-строка, табличные цифры. Конкретные
   таблицы (.settings-users-table, .lrn-results-table, .okr-table…) держат
   только свои отличия (отступы, ширины колонок) поверх этой базы — заводить
   новую таблицу с нуля больше не нужно. */
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  background: var(--bg-head);
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 8px 12px;
}
.data-table td {
  padding: 8px 12px;
  border-top: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr:hover { background: var(--bg-soft); }

body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
}

/* ---------- Login page (OliFlow, pastel-olive brand tone) ---------- */

.login-page {
  --login-accent: #707c3f;
  --login-accent-hover: #5c6634;
  --login-logo-ring: #abb48a;
  --login-logo-wave: #4f5b38;
  --login-bg-1: #f2f1e1;
  --login-bg-2: #dcdcb4;
  --login-blob-1: #c2c88a;
  --login-blob-2: #a9b46a;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--login-bg-1), var(--login-bg-2));
}

:root[data-theme="dark"] .login-page {
  --login-accent: #a8b378;
  --login-accent-hover: #b9c48c;
  --login-logo-ring: #b9c29a;
  --login-logo-wave: #eeecdd;
  --login-bg-1: #23241a;
  --login-bg-2: #15160f;
  --login-blob-1: #4b5030;
  --login-blob-2: #383c22;
}

.login-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
}

.login-blob-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -100px;
  background: var(--login-blob-1);
}

.login-blob-2 {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -120px;
  background: var(--login-blob-2);
}

.login-card {
  position: relative;
  z-index: 1;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: rgba(15, 23, 42, 0.12) 0px 20px 50px -12px, rgba(15, 23, 42, 0.06) 0px 0px 0px 1px;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-logo b {
  font-weight: 600;
  color: var(--login-accent);
}

.login-logo-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
}

.login-logo-icon svg {
  width: 100%;
  height: 100%;
}

.login-tagline {
  color: var(--login-accent);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}

/* Название проекта под логотипом OliFlow (Настройки → Проект). */
.login-project {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.login-card p.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 28px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-field {
  position: relative;
  display: flex;
  align-items: center;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}

.login-field-icon svg {
  width: 100%;
  height: 100%;
}

.login-field input {
  width: 100%;
  height: 52px;
  padding: 0 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--bg-soft);
  font-size: 14px;
}

.login-field input:focus {
  border-color: var(--login-accent);
  background: var(--bg);
}

.login-field-toggle {
  position: absolute;
  right: 12px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login-field-toggle svg {
  width: 100%;
  height: 100%;
}

.login-field-toggle.active {
  color: var(--login-accent);
}

.login-submit {
  height: 52px;
  margin-top: 4px;
  background: var(--login-accent);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

.login-submit:hover {
  background: var(--login-accent-hover);
}

.login-error {
  color: #d0342c;
  font-size: 13px;
  min-height: 18px;
}

/* ---------- App shell ---------- */

.app {
  display: grid;
  grid-template-columns: 58px var(--sidebar-width, 236px) 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  transition: grid-template-columns 0.15s ease;
}

.app.sidebar-collapsed {
  grid-template-columns: 58px 0 1fr;
}

.app.sidebar-collapsed .sidebar {
  padding: 0;
  overflow: hidden;
  border-right: none;
}

.app.home-mode {
  grid-template-columns: 58px 0 1fr;
}

/* Not display:none — that removes .sidebar from CSS Grid's auto-placement
   entirely, which shifts .content (the next auto-placed item) into the
   now-vacant first column instead of the second, squashing it to 0 width.
   The 0-width column already hides the sidebar visually; just clip it. */
.app.home-mode .sidebar {
  padding: 0;
  overflow: hidden;
  border-right: none;
}

/* ---------- Module rail (icon column, Intercom-style) ---------- */

.app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  /* Tooltips flow out to the right — the rail must not clip them and must
     stack above the context panel. */
  overflow: visible;
  position: relative;
  z-index: 30;
}

.app-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 10px;
}

.app-brand svg {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Спиннер OliFlow — «дышащая волна»: знак в движении (волна пульсирует по высоте). */
.oli-spinner {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: none;
  vertical-align: middle;
}
.oli-spinner svg { width: 100%; height: 100%; overflow: visible; display: block; }
.oli-spinner .os-ring { stroke: var(--brand-ring); }
.oli-spinner .os-wave {
  stroke: var(--brand-wave);
  transform-box: fill-box;
  transform-origin: center;
  animation: oli-breathe 1.4s ease-in-out infinite;
}
.oli-spinner--sm { width: 20px; height: 20px; }
.oli-spinner--lg { width: 56px; height: 56px; }
@keyframes oli-breathe {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .oli-spinner .os-wave { animation: none; }
}

/* Блок состояния загрузки: спиннер + подпись по центру панели. */
.oli-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.rail-modules {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Визуальная пауза между смысловыми группами модулей рейла: Главная / Задачи+OKR /
   Статьи+Знания / Обучение+Команды — см. CLAUDE.md, раздел «Design system». */
.rail-group-sep {
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  background: var(--border-strong);
  margin: 3px 0;
}

.main-tab {
  position: relative;
  border: none;
  background: none;
  color: var(--text-secondary);
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-tab .icon {
  width: 18px;
  height: 18px;
  display: flex;
}

.main-tab:hover {
  background: var(--bg-deep);
  color: var(--text);
}

/* Hover tooltip with the module name (rail is icon-only) */
.main-tab::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

.main-tab:hover::after {
  opacity: 1;
}

.main-tab.active {
  background: var(--accent);
  color: var(--bg);
}

.main-tab.locked {
  color: var(--text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.main-tab .module-lock {
  display: inline-flex;
  position: absolute;
  top: 3px;
  right: 5px;
}

.main-tab .module-lock .icon {
  width: 10px;
  height: 10px;
}

/* Счётчик просроченных «моих» задач — тихое напоминание, видимое из любого
   модуля, не только из Задач. */
.rail-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c14a34;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid var(--rail-bg);
  font-variant-numeric: tabular-nums;
}

.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rail-foot .user-badge-name,
.rail-foot .user-badge-role {
  display: none;
}

.icon-btn {
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  padding: 0;
}

.icon-btn:hover {
  background: var(--accent-soft);
}

.icon-btn.active {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}

#sidebar-toggle-btn .icon {
  transition: transform 0.15s;
}

#sidebar-toggle-btn.active .icon {
  transform: scaleX(-1);
}

/* Inline line-icon set (replaces emoji throughout the app) */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-btn .icon {
  width: 16px;
  height: 16px;
}

.sidebar-search {
  flex-shrink: 0;
  padding: 10px 10px 4px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 4px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.search-box:focus-within {
  border-color: var(--accent);
  background: var(--bg);
}

.search-box-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-box input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 5px 8px 5px 0;
  border: none;
  outline: none;
  background: none;
  font-size: 11.5px;
}

.user-badge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.user-badge-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-badge-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-badge-btn:hover {
  box-shadow: 0 0 0 3px var(--bg-deep);
}

.user-badge-name,
.user-badge-role {
  display: none;
}

/* ---------- Personal cabinet ---------- */

.cabinet-modal {
  width: 640px !important;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

/* ---------- Article access modal ("Доступы") ---------- */

.access-modal {
  width: 480px !important;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.access-everyone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.access-section {
  margin-bottom: 14px;
  min-height: 0;
}

.access-section-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

/* Nested Department -> Users tree: the header carries the department name
   and the "grant to everyone in the department" bulk checkbox, the users
   below it are the individual per-user rows it cascades into. */
.access-dept-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

.access-dept-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 6px;
}

.access-dept-users {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.access-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
}

.access-row-check:has(input:disabled) {
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.access-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-row-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.access-row-bulk {
  color: var(--accent-link);
}

.access-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px;
}

.cabinet-modal #cabinet-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cabinet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.cabinet-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.cabinet-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.cabinet-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.cabinet-section .field-row {
  display: flex;
  gap: 12px;
}

.cabinet-section .field-row .field {
  flex: 1;
}

.cabinet-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* ЛК: аватар + кадрирование + последние входы */

.cabinet-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.cabinet-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cabinet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cabinet-avatar-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.cabinet-avatar-actions .cabinet-hint {
  margin: 0;
}

.avatar-crop-modal {
  width: 340px !important;
}

.avatar-crop-viewport {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.avatar-crop-viewport:active {
  cursor: grabbing;
}

.avatar-crop-viewport img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* Круглая «линза»: затемняем всё вне будущего аватара. */
.avatar-crop-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 200px rgba(20, 18, 14, 0.45);
  pointer-events: none;
}

.avatar-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}

.avatar-crop-zoom-label {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.avatar-crop-zoom-row input[type='range'] {
  flex: 1;
}

.cabinet-logins {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.cabinet-logins-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}

.login-history-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.login-history-row:last-child {
  border-bottom: none;
}

.login-history-when {
  color: var(--text);
  font-weight: 600;
}

.login-history-device,
.login-history-place {
  color: var(--text-muted);
}

.perm-matrix {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.perm-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.perm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}

.perm-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.perm-row-master {
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.perm-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.perm-group-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

/* Multiselect of top-level OKR nodes inside the OKR permission group */
.perm-okr-departments {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.perm-okr-departments-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.perm-okr-departments-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.perm-row-sub {
  padding: 2px 0;
}

.user-register-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.user-register-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-border);
  overflow: hidden;
}

.user-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}

.user-row-header:hover {
  background: var(--accent-soft);
}

.user-row-header .caret {
  width: 12px;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.15s;
}

.user-row-header .caret.collapsed {
  transform: rotate(-90deg);
}

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

.user-row-login {
  color: var(--text-muted);
  font-size: 12px;
}

.user-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.user-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.user-status-dot.online {
  background: rgb(62, 207, 142);
}

.user-status-dot.online::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(62, 207, 142);
  animation: statusPulse 1.8s ease-out infinite;
}

.user-status-dot.blocked {
  background: #d0342c;
}

@keyframes statusPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.user-badge.admin {
  background: var(--accent-soft);
  color: var(--text);
}

.user-badge.blocked {
  background: rgba(193, 74, 52, 0.14);
  color: #c14a34;
}

.user-badge.role-manager {
  background: rgba(37, 99, 184, 0.14);
  color: var(--accent-link);
}

.user-badge.role-employee {
  background: var(--bg-deep);
  color: var(--text-muted);
}

.user-row-details {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.user-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn {
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}

.btn:active {
  transform: scale(0.97);
}

.btn:hover {
  background: var(--accent-soft);
}

.btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}

.btn.primary:hover {
  background: var(--accent);
  opacity: 0.88;
}

.btn.small {
  padding: 3px 9px;
  font-size: 11.5px;
}

.btn.danger {
  color: #d0342c;
  border-color: rgba(220, 80, 70, 0.4);
}

.btn.danger:hover {
  background: rgba(220, 80, 70, 0.14);
}

/* Иерархия действий (дизайн-ревью, Radix-мокап): вместо одинаковых .btn.small
   в каждой строке — явный вес по важности действия. */
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn.ghost:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.btn.soft {
  background: color-mix(in srgb, var(--accent-link) 12%, var(--bg));
  border-color: transparent;
  color: var(--accent-link);
}

.btn.soft:hover {
  background: color-mix(in srgb, var(--accent-link) 20%, var(--bg));
}

/* .btn.danger (контур/текст) — для обратимых опасных действий (Уволить).
   .btn.danger-solid — для редких необратимых (Удалить, с ввод-подтверждением):
   заметно тяжелее контурного, чтобы не перепутать по весу с обратимым. */
.btn.danger-solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn.danger-solid:hover {
  background: color-mix(in srgb, var(--red) 88%, black);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: relative;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 3;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.active {
  background: var(--accent-link);
  opacity: 0.4;
}

.app.sidebar-collapsed .sidebar-resize-handle,
.app.home-mode .sidebar-resize-handle {
  display: none;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 14px 8px;
  flex-shrink: 0;
}

#tree-root {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .sidebar-header-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .btn.small {
  width: 100%;
}

.sidebar-header span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Context-panel profile block (mockup: avatar + name + role above the rail edge) */
.sidebar-profile {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-top: 1px solid var(--hair);
  background: none;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
}

.sidebar-profile:hover {
  background: var(--bg-soft);
}

.sidebar-profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
}

.sidebar-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-profile-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-role {
  font-size: 11px;
  color: var(--text-muted);
}

/* Context-panel section label («Представления», «Списки») */
.tree-sec {
  margin: 14px 8px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section label + inline «+» action on the same row (e.g. «Списки» → создать список);
   .tree-sec-row is combined with .tree-sec itself, not a wrapper around it. */
.tree-sec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tree-sec-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
}

.tree-sec-add-btn:hover {
  background: var(--bg-deep);
  color: var(--text);
}

.tree-sec-add-btn .icon {
  width: 14px;
  height: 14px;
}

/* Кликабельный заголовок секции (Проекты → все задачи, привязанные к проекту).
   Выглядит как ярлык секции, но реагирует на наведение и подсвечивается активным. */
.tree-sec-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-muted);
  cursor: pointer;
}
.tree-sec-link:hover { color: var(--text); }
.tree-sec-link.active { color: var(--accent-link); }

.task-list-count.bad {
  color: #c14a34;
  font-weight: 600;
}

.rail-btn {
  border: none;
  background: none;
  color: var(--text-secondary);
}

.rail-btn:hover {
  background: var(--bg-deep);
  color: var(--text);
}

.tree-node {
  margin-bottom: 1px;
}

.tree-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  color: var(--text);
  border: 2px solid transparent;
}

.tree-node-row:hover {
  background: var(--accent-soft);
}

.tree-node-row.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.tree-node-row .caret {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.15s;
}

.tree-node-row .caret.collapsed {
  transform: rotate(-90deg);
}

.tree-node-row .caret.spacer {
  visibility: hidden;
}

.tree-node-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.tree-children {
  margin-left: 16px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.tree-node-row.drag-over-inside {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tree-node-row.drag-over-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.tree-node-row.drag-over-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tree-node-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
}

.tree-node-row:hover .tree-node-menu-btn,
.tree-node-menu-btn.active {
  display: flex;
}

.tree-node-menu-btn:hover {
  background: var(--border);
  color: var(--text);
}

.tree-node-menu-btn .icon {
  width: 13px;
  height: 13px;
}

.tree-node-menu {
  position: fixed;
  z-index: 60;
  min-width: 152px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.tree-node-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.tree-node-menu button:hover {
  background: var(--accent-soft);
}

.tree-node-menu button.danger {
  color: #d0342c;
}

.tree-node-menu button.danger:hover {
  background: rgba(220, 80, 70, 0.14);
}

.tree-node-menu .icon {
  width: 14px;
  height: 14px;
}

/* ---------- OKR tree ---------- */

.okr-node {
  margin-bottom: 2px;
}

.okr-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
}

.okr-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.okr-row:hover {
  background: var(--accent-soft);
}

.okr-row.active {
  background: var(--accent-soft);
}

.okr-row.active .okr-title {
  font-weight: 600;
}

.okr-row .caret {
  width: 12px;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.okr-row .caret.collapsed {
  transform: rotate(-90deg);
}

.okr-row .caret.spacer {
  visibility: hidden;
}

.okr-title {
  font-weight: 400;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.okr-title .icon.okr-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  color: var(--text-muted);
  vertical-align: -0.2em;
}

h1 .icon.okr-icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  color: var(--text-muted);
  vertical-align: -0.2em;
}

.tasks-content-title .icon.okr-icon {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  color: var(--text-muted);
  vertical-align: -0.15em;
}

/* Ответственный OKR — нейтральный чип с аватаром (монохромный хром) */
.okr-owner-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-deep);
  border-radius: 999px;
  padding: 3px 12px 3px 4px;
  white-space: nowrap;
}

.okr-owner-chip .avatar-chip {
  border-color: transparent;
}

.okr-head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.okr-owner-badge-tree {
  align-self: flex-start;
  font-size: 9.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}

.okr-children {
  margin-left: 16px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

/* Переключатель «Только с OKR» над деревом OKR — обёртка задаёт отступ, сам
   контрол — общий компонент .switch (см. ниже). */
.okr-tree-filter {
  margin-bottom: 10px;
}

/* Универсальный бинарный переключатель (Switch) — часть дизайн-системы:
   монохромная заливка --accent во вкл. состоянии (та же логика инверсии, что
   у .main-tab.active/.fchip-btn.on), белый/--bg кружок для контраста в обеих
   темах. Единственный компонент для on/off-настроек — не заводить вместо него
   пары кнопок-сегментов (.seg-mini-btn и т.п.). */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 19px;
  border-radius: 999px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}

.switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s;
}

.switch-input:checked + .switch-track {
  background: var(--accent);
  border-color: var(--accent);
}

.switch-input:checked + .switch-track .switch-thumb {
  transform: translateX(13px);
}

.switch-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.switch-input:checked ~ .switch-text {
  color: var(--text);
}

/* ---------- OKR period tabs + table ---------- */

.okr-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 4px 0 20px;
}

.period-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.period-pill:hover {
  background: var(--accent-soft);
}

.period-pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* «+ Период» — пунктирная ghost-пилюля в конце ряда */
.period-pill-add {
  border-style: dashed;
  color: var(--text-muted);
}

.period-pill-add:hover {
  color: var(--text);
}

/* Компактная строка периода над карточками (итог · детали · обновлено ·
   кнопка редактирования) */
.okr-page-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.okr-page-head-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.okr-page-head-muted {
  color: var(--text-muted);
  margin-left: auto;
}

/* Ссылка-кнопка без рамки (переключатель деталей расчёта) */
.okr-ghost-btn {
  border: none;
  background: none;
  color: var(--accent-link);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}

.okr-ghost-btn:hover {
  text-decoration: underline;
}

/* Иконка-переключатель «Детали расчёта»: инвертируется в активном состоянии */
.okr-details-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
}

.okr-details-toggle-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.okr-details-toggle-btn .icon {
  width: 15px;
  height: 15px;
}

.okr-details-toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Метрика KR в просмотре: «текущее → целевое»; просроченная — красным */
.okr-metric-cell {
  white-space: nowrap;
}

.okr-metric-arrow {
  color: var(--text-muted);
}

.okr-metric-stale,
.okr-metric-stale .okr-metric-arrow {
  color: var(--red);
  font-weight: 600;
}

/* Пилюля «…» — открывает модалку выбора периода при 4+ периодах */
.period-pill-more {
  font-weight: 700;
  letter-spacing: 1px;
}

/* Иконка отдела в дереве/шапке (заменяет прежний цветной кружок) */
.okr-tree-icon {
  display: inline-flex;
  align-items: center;
}

/* Редактор периода OKR (квартал/год выбираются внутри редактора) */
.okr-period-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.okr-period-editor-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Combo-кнопки OKR-редактора (дизайн-система вместо нативных select).
   .okr-combo — как поле (период квартал/год); .okr-combo-plain — невидимая до
   hover (в таблице KR: подход, родитель, ответственный). */
.combo-btn.okr-combo {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  padding: 6px 10px;
}

.combo-btn.okr-combo:hover {
  background: var(--bg-soft);
}

.combo-btn.okr-combo.okr-combo-plain {
  border-color: transparent;
  background: none;
  padding: 4px 6px;
}

.combo-btn.okr-combo.okr-combo-plain:hover {
  border-color: var(--border);
  background: var(--bg-soft);
}

/* Статус инициативы — цветной чип-кнопка (init-st-* даёт цвет), поповер вместо
   нативного select. */
.okr-init-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 8px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.okr-init-status-btn svg {
  width: 12px;
  height: 12px;
}

.okr-init-status-btn .combo-caret {
  font-size: 9px;
  opacity: 0.7;
}

/* Агрегат OKR верхнеуровневого отдела: секции по отделам поддерева */
.okr-agg-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.okr-agg-dept-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-head);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.okr-agg-dept-head:hover {
  background: var(--bg-soft);
}

.okr-agg-dept-progress {
  margin-left: auto;
}

.okr-agg-dept-open {
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-link);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
}

.okr-agg-dept-open:hover {
  background: var(--bg-soft);
}

/* Сворачивание отдела (агрегат) и цели (O): каретка + скрытие содержимого */
.okr-obj-head-toggle {
  cursor: pointer;
}

.okr-collapse-caret {
  display: inline-flex;
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.15s ease;
}

.okr-obj-collapsed .okr-collapse-caret,
.okr-agg-collapsed .okr-collapse-caret {
  transform: rotate(-90deg);
}

.okr-obj-collapsed .okr-kr-scroll,
.okr-obj-collapsed .okr-obj-empty {
  display: none;
}

.okr-agg-collapsed > .okr-cards {
  display: none;
}

/* Модалка выбора периода */
.okr-pp-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.okr-pp-year {
  display: flex;
  align-items: center;
  gap: 12px;
}

.okr-pp-year-label {
  min-width: 48px;
  font-weight: 700;
  color: var(--text-secondary);
}

.okr-pp-quarters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.okr-pp-pill {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

.okr-pp-pill:hover {
  background: var(--bg-soft);
}

.okr-pp-pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.okr-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.okr-table th {
  background: var(--bg-head);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  line-height: 1.3;
  vertical-align: bottom;
  word-break: break-word;
  max-height: 54px;
}

.okr-table td {
  border: none;
  border-top: 1px solid var(--hair);
  padding: 10px 10px;
  vertical-align: middle;
  overflow-wrap: break-word;
  font-size: 13px;
}

.okr-table:not(.details-expanded) .okr-detail-col {
  display: none;
}

/* С развёрнутыми деталями расчёта колонок больше, чем влезает — таблица
   скроллится внутри карточки, не сжимая колонку KR до нечитаемости. */
.okr-kr-scroll {
  overflow-x: auto;
}

.okr-kr-table.details-expanded {
  min-width: 1080px;
}

/* ---- Просмотр: карточка на цель, внутри таблица её KR ---- */
.okr-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.okr-obj-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(28, 27, 26, 0.05);
  overflow: hidden;
}

.okr-obj-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--bg-head);
  border-bottom: 1px solid var(--border);
}

.okr-obj-head-progress {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.okr-obj-empty {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Колонки KR-таблицы: «Ключевые результаты» и «Инициативы» — самые широкие
   (проценты, а не фикс), числовые колонки — компактные. */
.okr-kr-table th:nth-child(1),
.okr-kr-table td:nth-child(1) {
  width: 33%;
}

.okr-kr-table th:nth-child(2),
.okr-kr-table td:nth-child(2) {
  width: 108px;
}

/* Достаточно места под 10 делений + %-подпись (progressTicksHtml) —
   раньше здесь была короткая колонка под простой процентный бейдж. */
.okr-kr-table th:nth-child(3),
.okr-kr-table td:nth-child(3) {
  width: 178px;
}

.okr-kr-table th:nth-child(4),
.okr-kr-table td:nth-child(4) {
  width: 34%;
}

.okr-kr-table th:nth-child(5),
.okr-kr-table td:nth-child(5),
.okr-kr-table th:nth-child(6),
.okr-kr-table td:nth-child(6) {
  width: 90px;
}

.okr-kr-table th:nth-child(7),
.okr-kr-table td:nth-child(7) {
  width: 140px;
}

.okr-kr-table thead th {
  border-bottom: 1px solid var(--hair);
  padding-top: 9px;
  padding-bottom: 7px;
}

.okr-kr-table tbody tr:first-child td {
  border-top: none;
}

.okr-kr-table th:first-child,
.okr-kr-table td:first-child {
  padding-left: 16px;
}

/* В карточке вложенность уже показывает чип KR — доп. отступ редактора
   (.okr-kr-indent 20px !important) здесь не нужен. */
.okr-kr-table .okr-kr-indent {
  padding-left: 16px !important;
}

.okr-kr-table th:last-child,
.okr-kr-table td:last-child {
  padding-right: 16px;
}

/* Маркеры иерархии: цель — тёмный чип «O1», KR — серый «KR1.1» с отступом.
   Дают мгновенное различение уровней, которого не хватало одному фону. */
.okr-o-chip {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 6px;
  padding: 2px 7px;
  margin-right: 10px;
  vertical-align: 1.5px;
}

.okr-kr-chip {
  display: inline-block;
  background: var(--bg-deep);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.okr-objective-text {
  font-size: 14px;
  font-weight: 600;
}

.okr-kr-text {
  font-size: 13px;
}

/* Родительский уровень — контурный чип в строке цели (в просмотре) */
.okr-parent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: 1.5px;
  white-space: nowrap;
}

.okr-parent-chip .icon.okr-icon {
  width: 12px;
  height: 12px;
  margin: 0;
}

/* ---- Редактор: карточки целей как в просмотре ---- */

/* Инлайн-заголовок цели в оливковой шапке карточки */
.okr-obj-head .okr-edit-obj-title {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 7px;
  resize: none;
}

/* Селект родительского уровня — внутри контурного чипа */
.okr-parent-chip-edit {
  padding: 2px 4px 2px 9px;
}

.okr-parent-chip-edit select {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  max-width: 180px;
  padding: 0;
}

.okr-parent-chip-edit select:focus {
  outline: none;
}

/* Малые иконки-кнопки удаления (цель, KR): приглушены, hover — data-красный */
.okr-icon-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.okr-icon-btn:hover {
  color: #c14a34;
  background: var(--bg-soft);
}

.okr-icon-btn .icon {
  width: 14px;
  height: 14px;
  margin: 0;
}

.okr-kr-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.okr-kr-title-row .okr-kr-chip {
  margin-top: 7px;
}

/* Кнопка удаления KR видна только при наведении на строку */
.okr-row-kr .remove-kr-btn {
  opacity: 0;
  margin-top: 3px;
}

.okr-row-kr:hover .remove-kr-btn,
.okr-row-kr .remove-kr-btn:focus-visible {
  opacity: 1;
}

/* «+ Ключевой результат» — hairline-строка внизу карточки */
.okr-card-add-kr {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-top: 1px solid var(--hair);
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
}

.okr-card-add-kr:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--text);
}

.okr-card-add-kr:disabled {
  opacity: 0.5;
  cursor: default;
}

/* «+ Добавить цель (O)» — пунктирная ghost-карточка на всю ширину */
.okr-add-obj-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
}

.okr-add-obj-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.okr-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.okr-editor-sp {
  flex: 1;
}

/* KR — обычные строки с hairline-разделителями, без зебры и пунктира */
.okr-row-kr {
  background: var(--bg);
}

.okr-row-kr td {
  border-top: 1px solid var(--hair);
}

.okr-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 7px;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
}

.okr-input:hover {
  border-color: var(--border);
}

.okr-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.okr-input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea.okr-input {
  resize: both;
  overflow: hidden;
  min-height: 32px;
  line-height: 1.4;
  width: 100%;
  white-space: pre-wrap;
}

input.okr-kr-value {
  width: 64px;
  min-width: 64px;
  text-align: center;
  flex: none;
  font-weight: 600;
  border-radius: 8px;
}

/* Прогресс-чип: плоский тинт data-цвета (фон/текст ставит JS по порогам) */
.okr-value-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.okr-value-badge strong {
  font-weight: 600;
}

.okr-approach-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.okr-approach-cell select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 4px;
  font-size: 11px;
  background: var(--bg);
}

.okr-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.initiative-view-item {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}

.initiative-view-item + .initiative-view-item {
  margin-top: 10px;
}

.initiative-view-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.initiative-text {
  white-space: pre-line;
  margin-bottom: 4px;
  font-size: 12px;
}

.initiative-status-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Статусы инициатив — та же палитра, что и статус-чипы задач (blocked —
   янтарный); классы вместо инлайн-цветов ради тёмной темы. */
.init-st-not_started { background: var(--bg-deep); color: var(--text-secondary); }
.init-st-in_progress { background: #e3edfa; color: #2563b8; }
.init-st-done { background: #e0f1e5; color: #2e7d4f; }
.init-st-blocked { background: #faf0d7; color: #9c6d10; }
.init-st-cancelled { background: var(--bg-deep); color: var(--text-muted); }

:root[data-theme='dark'] .init-st-in_progress { background: #2a3d5c; color: #9dbdf0; }
:root[data-theme='dark'] .init-st-done { background: #244631; color: #7fcf9e; }
:root[data-theme='dark'] .init-st-blocked { background: #4d3d1e; color: #e3bd66; }

.initiatives-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.initiative-item {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.initiative-text-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.initiative-bullet {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  padding-top: 6px;
}

.initiative-text-row .initiative-text-input {
  flex: 1;
  font-size: 11px;
}

.initiative-item:last-of-type {
  border-bottom: none;
}

.initiative-item-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.initiative-status-select {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
}

.initiative-item-footer button.remove {
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
}

.initiative-item-footer button.remove:hover {
  color: #d0342c;
}

.add-initiative-btn {
  align-self: flex-start;
  font-size: 11px;
  padding: 3px 10px;
}

.okr-metric-note-view {
  white-space: pre-line;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.okr-responsibles-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.responsible-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #a9cdf0;
  color: var(--accent-link);
  border-radius: 20px;
  padding: 2px 4px 2px 10px;
  font-size: 11px;
  background: #f3f8fd;
}

.responsible-chip .responsible-input,
.responsible-chip .responsible-select {
  border: none;
  background: transparent;
  color: var(--accent-link);
  font-size: 11px;
  max-width: 110px;
  padding: 2px 0;
}

.responsible-chip .responsible-input:focus,
.responsible-chip .responsible-select:focus {
  outline: none;
}

.responsible-chip button.remove {
  border: none;
  background: none;
  color: var(--accent-link);
  opacity: 0.6;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
}

.responsible-chip button.remove:hover {
  opacity: 1;
}

.add-responsible-btn {
  font-size: 11px;
  padding: 3px 10px;
}

.okr-cell-disabled {
  color: var(--text-muted);
  text-align: center;
}

.tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
  /* A single very long tag name must truncate, not overflow its container. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.tag-chip .tag-dot {
  width: 8px;
  height: 8px;
}

/* ---------- Content ---------- */

.content {
  overflow-y: auto;
  padding: 32px 48px;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content.view-fade-in > * {
  animation: viewFadeIn 0.18s ease;
}

.content.okr-mode,
.content.editor-mode {
  padding: 20px 16px;
}

/* Читабельная колонка (Notion-подобная): фиксированный max-width вместо
   процентных полей — на широких мониторах строка не растягивается. Просмотр
   и редактор делят правило, чтобы переключение режимов не меняло ширину.
   Scoped away from .okr-mode: the OKR page reuses .article-view for its own
   (wide-table) layout. */
.content:not(.okr-mode) .article-view,
.editor {
  max-width: 780px;
  margin: 0 auto;
}

.article-view h1 {
  margin: 0 0 8px;
  font-size: 18px;
}

.article-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.article-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.article-icon-inline {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
}

.article-icon-inline .icon {
  width: 100%;
  height: 100%;
}

/* Cover banner: shared by the read view and the editor's live preview. Image
   covers use an inline background-image (set in JS); gradient covers pick
   up one of the 12 .cover-gradient-<key> presets below. In the read view the
   title sits inside the banner (see .article-cover .article-head below); the
   editor's standalone preview never nests a head, so it stays a plain strip. */
.article-cover {
  position: relative;
  height: 180px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Light scrim at the bottom so the (always-dark) title text stays legible
   over an arbitrary uploaded photo, not just the pastel gradient presets. */
.article-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.article-cover .article-head {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 14px 20px;
  color: #2c2a25;
}

.article-cover .article-head h1,
.article-cover .article-icon-inline {
  color: inherit;
}

/* 12 soft pastel presets — same tone in both themes (small decorative
   accents, not surface colors), matching the hero-card convention. */
.cover-gradient-peach { background: linear-gradient(135deg, #ffe3cf, #ffcfab); }
.cover-gradient-rose { background: linear-gradient(135deg, #ffe1e6, #ffc7d2); }
.cover-gradient-butter { background: linear-gradient(135deg, #fff2cf, #ffe49c); }
.cover-gradient-sage { background: linear-gradient(135deg, #e8f3dd, #cee6b8); }
.cover-gradient-mint { background: linear-gradient(135deg, #dcf5ea, #bce9d7); }
.cover-gradient-sky { background: linear-gradient(135deg, #dcf0f7, #b9e2f0); }
.cover-gradient-powder { background: linear-gradient(135deg, #e1ecfc, #c6dcf8); }
.cover-gradient-lavender { background: linear-gradient(135deg, #eae5fb, #d6cbf5); }
.cover-gradient-lilac { background: linear-gradient(135deg, #f3e2f8, #e6c4f0); }
.cover-gradient-blush { background: linear-gradient(135deg, #fbe1ef, #f5bfdc); }
.cover-gradient-sand { background: linear-gradient(135deg, #f1e7d9, #e3d1b4); }
.cover-gradient-olive { background: linear-gradient(135deg, #eaeedd, #d3dab8); }

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.article-status-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-left: 6px;
}

.tree-status-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Nested-articles counter on parent rows — soft pastel-blue outline chip.
   Fixed hues (not theme tokens): small saturated accent, same in both themes,
   matching the pastel-tile convention. */
.tree-count-badge {
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 9999px;
  border: 1px solid #a9c6ea;
  color: #5b7fb0;
  background: rgba(111, 159, 224, 0.08);
}

.article-tags {
  display: flex;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.article-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.article-view .article-body.ql-editor {
  font-size: 14px;
  line-height: 1.75;
  padding: 0;
}

.article-body img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
  cursor: zoom-in;
}

/* ---------- KB tables (quill-table-better) ----------
   The CDN stylesheets load after style.css, so these overrides carry a
   `body` prefix to outrank them. Tables themselves get the design system's
   hairline grid instead of the default hard-black borders. */

body .ql-editor .ql-table-better {
  border-collapse: collapse;
  margin: 12px 0;
}

body .ql-editor .ql-table-better td,
body .ql-editor .ql-table-better th {
  border: 1px solid var(--border);
  padding: 6px 10px;
  vertical-align: top;
}

/* Row striping (olive header + white/gray zebra) is defined once on
   the #quill-editor-container / .article-body selectors below — it covers
   both the editor and view mode and outranks the CDN stylesheet. */
body .ql-editor .ql-table-better th,
body .ql-editor .ql-table-better tr.ql-table-row-header td {
  background: var(--bg-head);
  font-weight: 600;
}

/* Floating table-operations panel: a small white card, matching the
   meta-popover look — soft shadow, generous radius, no hard border. */
body .ql-table-menus-container {
  border: none;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.12) 0px 8px 24px -8px;
  height: 42px;
  padding: 5px;
  gap: 2px;
}

body .ql-table-dropdown,
body .ql-table-dropdown-properties {
  border-radius: 8px;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--text);
}

body .ql-table-dropdown:hover,
body .ql-table-dropdown-properties:hover {
  background: var(--bg-soft);
}

body .ql-table-dropdown-list,
body .ql-table-dropdown-properties-list {
  border: none;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.12) 0px 8px 24px -8px;
  padding: 4px;
  width: 200px;
}

body .ql-table-dropdown-list li,
body .ql-table-dropdown-properties-list li {
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 28px;
  color: var(--text);
}

body .ql-table-dropdown-list li:hover,
body .ql-table-dropdown-properties-list li:hover {
  background-color: var(--bg-soft);
}

body .ql-table-divider {
  background: var(--border);
}

/* «Свойства таблицы» — the border/outline editor dialog: restyled from the
   library's default grey-boxed form into the app's card look. */
body .ql-table-properties-form {
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.14) 0px 12px 32px -8px;
  color: var(--text);
  overflow: hidden;
}

body .ql-table-properties-form .properties-form-header {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

body .ql-table-properties-form .property-input,
body .ql-table-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}

body .ql-table-properties-form .ql-table-dropdown-selected,
body .ql-table-properties-form .ql-table-color-selected,
body .ql-table-input:focus,
body .ql-table-properties-form .property-input:focus {
  border: 1px solid var(--accent-link);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

body .ql-table-properties-form .properties-form-row .ql-table-check-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* ---------- Image resize handle (editor) ---------- */

#quill-editor-container .ql-editor img {
  cursor: pointer;
}

.img-resize-handles {
  position: fixed;
  border: 1.5px dashed var(--accent-link);
  pointer-events: none;
  z-index: 40;
}

.img-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 11px;
  height: 11px;
  background: var(--accent-link);
  border: 1.5px solid var(--bg);
  border-radius: 3px;
  cursor: se-resize;
  pointer-events: auto;
}

/* ---------- Image lightbox (article view) ---------- */

.image-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 200;
  cursor: zoom-out;
  animation: lightboxFadeIn 0.15s ease;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px;
}

.article-body a {
  color: var(--accent-link);
}

/* ---------- Rich content: shared between editor and article view ---------- */

/* Заголовки внутри контента — своя явная шкала (браузерные em-размеры от
   базовых 14px дают слишком крупный h1, крупнее заголовка самой статьи). */
#quill-editor-container .ql-editor h1,
.article-body h1 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin: 26px 0 8px;
}

#quill-editor-container .ql-editor h2,
.article-body h2 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 22px 0 6px;
}

#quill-editor-container .ql-editor h3,
.article-body h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 18px 0 4px;
}

#quill-editor-container .ql-editor h1:first-child,
#quill-editor-container .ql-editor h2:first-child,
#quill-editor-container .ql-editor h3:first-child,
.article-body h1:first-child,
.article-body h2:first-child,
.article-body h3:first-child {
  margin-top: 0;
}

/* Списки: небольшой воздух между пунктами */
#quill-editor-container .ql-editor li,
.article-body li {
  margin: 3px 0;
}

/* Code block — Quill 2.x renders this as .ql-code-block-container > .ql-code-block
   (one div per line), NOT <pre class="ql-syntax"> (that markup only appears with the
   optional syntax/hljs module, which isn't registered here). quill.snow.css's own
   background/radius for this is also scoped to ".ql-snow .ql-editor", an ancestor
   the article view never has, so it needs its own theme-independent rule too. */
#quill-editor-container .ql-editor .ql-code-block-container,
.article-body .ql-code-block-container {
  background: #1e1e24;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
}

#quill-editor-container .ql-editor .ql-code-block,
.article-body .ql-code-block {
  color: #e4e4e8;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Inline code — the article view isn't nested inside .ql-snow, so quill.snow.css's
   own (hardcoded light-mode) rule for this never applies there; style it ourselves
   so it also works in dark mode. */
#quill-editor-container .ql-editor code,
.article-body code {
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 90%;
}

/* Blockquote — same story: quill.snow.css's border/spacing is scoped to
   ".ql-snow .ql-editor blockquote", which the article view lacks. */
#quill-editor-container .ql-editor blockquote,
.article-body blockquote {
  margin: 14px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
  font-style: italic;
}

/* Adjacent sibling margins collapse to the larger of the two (14px, not the
   sum) — so consecutive quotes read as one continuous block. Give this exact
   case its own explicit gap so several quotes in a row stay visually distinct. */
#quill-editor-container .ql-editor blockquote + blockquote,
.article-body blockquote + blockquote {
  margin-top: 28px;
}

#quill-editor-container .ql-editor hr,
.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

#quill-editor-container .ql-editor table,
.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 12.5px;
}

#quill-editor-container .ql-editor table td,
#quill-editor-container .ql-editor table th,
.article-body table td,
.article-body table th {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

#quill-editor-container .ql-editor table th,
.article-body table th {
  background: var(--bg-head);
  font-weight: 600;
  text-align: left;
}

/* Шапка таблицы — оливковый тинт шапок (--bg-head, дизайн-система): thead
   целиком, а в таблицах без thead — первая строка. Ровно одна строка-шапка:
   раньше tr:first-child красил и строку thead, и первую строку tbody —
   получалась «двойная шапка» из двух строк. */
#quill-editor-container .ql-editor table thead th,
#quill-editor-container .ql-editor table thead td,
.article-body table thead th,
.article-body table thead td,
#quill-editor-container .ql-editor table:not(:has(thead)) tr:first-child td,
#quill-editor-container .ql-editor table:not(:has(thead)) tr:first-child th,
.article-body table:not(:has(thead)) tr:first-child td,
.article-body table:not(:has(thead)) tr:first-child th {
  background: var(--bg-head);
  font-weight: 600;
}

/* Данные: чередование «стандартный → серый». В таблице с thead счёт идёт по
   tbody с первой строки; без thead первая строка tbody — уже шапка, поэтому
   чётность сдвинута на единицу. */
#quill-editor-container .ql-editor table:has(thead) tbody tr:nth-child(odd) td,
.article-body table:has(thead) tbody tr:nth-child(odd) td,
#quill-editor-container .ql-editor table:not(:has(thead)) tbody tr:nth-child(even) td,
.article-body table:not(:has(thead)) tbody tr:nth-child(even) td {
  background: var(--bg);
}

#quill-editor-container .ql-editor table:has(thead) tbody tr:nth-child(even) td,
.article-body table:has(thead) tbody tr:nth-child(even) td,
#quill-editor-container .ql-editor table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) td,
.article-body table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) td {
  background: var(--bg-deep);
}

/* ---------- Примечания (kb-callout) и Кат (kb-cut) ----------
   Одна разметка в редакторе и просмотре: контейнер + строка-заголовок +
   строки тела (см. блоты в app.js). Цвет примечания — фикс. data-цвета
   (небольшие насыщенные акценты, одинаковые в обеих темах). */

.kb-callout {
  position: relative;
  margin: 10px 0;
  padding: 12px 16px 12px 46px;
  border-radius: 10px;
}

.kb-callout::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 14px;
  width: 20px;
  height: 20px;
  background: var(--kb-callout-accent, #2563b8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kb-callout-info { --kb-callout-accent: #2563b8; background: rgba(37, 99, 184, 0.09); }
.kb-callout-success { --kb-callout-accent: #2e9e5b; background: rgba(46, 158, 91, 0.10); }
.kb-callout-warning { --kb-callout-accent: #c07d0a; background: rgba(192, 125, 10, 0.10); }
.kb-callout-danger { --kb-callout-accent: #c14a34; background: rgba(193, 74, 52, 0.09); }

.kb-callout-title {
  font-weight: 600;
  margin-bottom: 2px;
}

/* Цветная иконка типа в выпадающем меню тулбара редактора. */
.kb-callout-dd-ic {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.kb-callout-dd-ic .icon,
.kb-callout-dd-ic svg {
  width: 100%;
  height: 100%;
}

.kb-cut {
  margin: 10px 0;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.kb-cut-title {
  position: relative;
  padding-left: 24px;
  font-weight: 600;
}

.kb-cut-title::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}

/* Просмотр: кат по умолчанию свёрнут, заголовок — тумблер. */
.article-body .kb-cut-title {
  cursor: pointer;
}

.article-body .kb-cut:not(.kb-cut-open) > .kb-cut-line {
  display: none;
}

.article-body .kb-cut:not(.kb-cut-open) > .kb-cut-title::before {
  transform: rotate(-90deg);
}

/* Плейсхолдеры пустых строк — только в редакторе. Абсолютные, потому что в
   потоке ::after встал бы ПОСЛЕ <br> пустой строки (вторая строка), а
   ::before у ката занят шевроном. */
#quill-editor-container .kb-callout-title:has(> br:only-child),
#quill-editor-container .kb-callout-title + .kb-callout-line:last-child:has(> br:only-child),
#quill-editor-container .kb-cut-title:has(> br:only-child),
#quill-editor-container .kb-cut-title + .kb-cut-line:last-child:has(> br:only-child) {
  position: relative;
}

#quill-editor-container .kb-callout-title:has(> br:only-child)::after,
#quill-editor-container .kb-callout-title + .kb-callout-line:last-child:has(> br:only-child)::after,
#quill-editor-container .kb-cut-title:has(> br:only-child)::after,
#quill-editor-container .kb-cut-title + .kb-cut-line:last-child:has(> br:only-child)::after {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  color: var(--text-muted);
  font-weight: 400;
}

#quill-editor-container .kb-callout-title:has(> br:only-child)::after {
  content: 'Заголовок примечания';
}

#quill-editor-container .kb-callout-title + .kb-callout-line:last-child:has(> br:only-child)::after {
  content: 'Добавьте содержание для примечания';
}

#quill-editor-container .kb-cut-title:has(> br:only-child)::after {
  content: 'Название ката';
  left: 24px;
}

#quill-editor-container .kb-cut-title + .kb-cut-line:last-child:has(> br:only-child)::after {
  content: 'Свёрнутый текст — в просмотре виден после клика по названию';
}

/* Плавающий тулбар блока в редакторе: цвета примечания + удаление. */
.kb-block-toolbar {
  position: fixed;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.16) 0px 10px 26px -10px;
}

.kb-block-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: inherit;
}

.kb-block-toolbar button:hover {
  background: var(--bg-soft);
}

.kb-block-toolbar button .icon {
  width: 16px;
  height: 16px;
}

.kb-block-toolbar button .icon svg {
  width: 100%;
  height: 100%;
}

.kb-block-toolbar .kb-block-type.active {
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--border);
}

.kb-block-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--hair);
  margin: 0 4px;
  flex-shrink: 0;
}

.kb-block-toolbar .kb-block-delete {
  color: #c14a34;
}

/* ---------- Макет статьи: контент + правая колонка (оценки, оглавление) ----------
   Макет на всю ширину контента: колонка прижата к правому краю, статья
   центрируется в оставшемся месте своим max-width/margin auto. */

.article-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.article-layout .article-view {
  flex: 1;
  min-width: 0;
}

.article-aside {
  width: 224px;
  flex-shrink: 0;
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1100px) {
  .article-aside {
    display: none;
  }
}

.article-reactions {
  display: flex;
  gap: 8px;
}

.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.reaction-btn .icon {
  width: 15px;
  height: 15px;
}

.reaction-btn .icon svg {
  width: 100%;
  height: 100%;
}

.reaction-btn:hover {
  background: var(--bg-soft);
}

.reaction-btn.active {
  border-color: var(--accent-link);
  color: var(--accent-link);
  background: rgba(37, 99, 184, 0.08);
}

.reaction-btn.dislike.active {
  border-color: #c14a34;
  color: #c14a34;
  background: rgba(193, 74, 52, 0.08);
}

/* Свёрнутое оглавление: колонка ужимается, остаётся иконка-таб у правого края. */
.article-aside.toc-collapsed {
  width: auto;
  align-items: flex-end;
}

.article-aside.toc-collapsed .article-toc {
  display: none;
}

.article-toc-tab {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
}

.article-aside.toc-collapsed.has-toc .article-toc-tab {
  display: inline-flex;
}

.article-toc-tab:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.article-toc-tab .icon {
  width: 16px;
  height: 16px;
}

.article-toc-tab .icon svg {
  width: 100%;
  height: 100%;
}

.article-toc-title {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
  cursor: pointer;
}

.article-toc-title:hover {
  color: var(--text);
}

.article-toc-list {
  display: flex;
  flex-direction: column;
}

.article-toc-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  border: none;
  border-left: 2px solid var(--hair);
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.article-toc-item:hover {
  color: var(--text);
  background: var(--bg-soft);
}

.article-toc-item.active {
  border-left-color: var(--accent-link);
  color: var(--accent-link);
}

.article-toc-item.lvl-2 {
  padding-left: 22px;
}

.article-toc-item.lvl-3 {
  padding-left: 34px;
}

.article-readtime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--text-muted);
}

.article-readtime .icon {
  width: 13px;
  height: 13px;
}

.article-readtime .icon svg {
  width: 100%;
  height: 100%;
}

/* Quill 2.x stores checklist/bullet/ordered state as li[data-list=...], not
   the old Quill 1.x li[data-checked]; the checkbox glyph itself comes from
   quill.snow.css's built-in li[data-list] > .ql-ui:before rule, so this only
   needs to add our own accent color + strikethrough on top of it. */
#quill-editor-container .ql-editor li[data-list="checked"],
.article-body li[data-list="checked"] {
  text-decoration: line-through;
  color: var(--text-muted);
}

#quill-editor-container .ql-editor li[data-list="checked"] > .ql-ui,
#quill-editor-container .ql-editor li[data-list="unchecked"] > .ql-ui,
.article-body li[data-list="checked"] > .ql-ui,
.article-body li[data-list="unchecked"] > .ql-ui {
  color: var(--accent-link);
}

.footnote-ref {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0 1px;
}

.footnotes-list {
  margin-top: 32px;
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 20px;
}

.footnotes-list li {
  margin-bottom: 6px;
}

.footnote-backref {
  color: var(--accent);
  text-decoration: none;
  margin-left: 2px;
}

.attachments-block {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.attachments-title {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}

.attachment-chip:hover {
  background: var(--accent-soft);
}

.attachment-size {
  color: var(--text-muted);
  font-size: 11px;
}

.attachment-chip button.remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0;
  margin-left: 2px;
  line-height: 1;
}

.attachment-chip .icon {
  width: 14px;
  height: 14px;
}

button.remove .icon {
  width: 10px;
  height: 10px;
}

.attachment-chip button.remove:hover {
  color: #d0342c;
}

.attachments-editor {
  margin-top: 20px;
  margin-bottom: 8px;
}

.markdown-preview {
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.markdown-preview p:first-child { margin-top: 0; }
.markdown-preview p:last-child { margin-bottom: 0; }

/* Project modal: linked tasks */
.project-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.project-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
  cursor: pointer;
}

.project-task-row:hover {
  background: var(--accent-soft);
}

.project-task-row-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Project modal: links */
.project-links-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
}

.project-link-row a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent-link);
  font-size: 12.5px;
  text-decoration: none;
}

.project-link-row a:hover {
  text-decoration: underline;
}

.project-link-row a .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Project modal: comments + @mentions */
.project-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.project-comment {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
}

.project-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.project-comment-author {
  font-size: 12px;
  font-weight: 600;
}

.project-comment-time {
  font-size: 10.5px;
  color: var(--text-muted);
}

.project-comment-text {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.project-comment-text .mention {
  color: var(--accent-link);
  font-weight: 600;
}

.project-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}

.project-history-row {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.project-comment-composer {
  position: relative;
}

.project-comment-composer textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 8px;
}

.project-comment-mentions {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  margin-top: -4px;
  min-width: 160px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.project-comment-mentions button {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.project-comment-mentions button:hover {
  background: var(--accent-soft);
}

.editor-cover-area {
  display: none;
  margin-bottom: 14px;
}

.editor-cover-area .article-cover {
  margin-bottom: 0;
}

.editor-header-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  margin-bottom: 14px;
}

.editor-meta-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.editor-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.editor-meta-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.editor-meta-btn .icon {
  width: 14px;
  height: 14px;
}

.editor-meta-btn.ghost {
  color: var(--text-muted);
  background: none;
  border-color: transparent;
}

.editor-meta-btn.ghost:hover {
  color: #d0342c;
  background: rgba(220, 80, 70, 0.1);
}

.meta-popover {
  position: fixed;
  z-index: 60;
  width: 260px;
  padding: 12px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.meta-popover .icon-palette {
  max-height: 200px;
  overflow-y: auto;
}

.sprint-popover .sprint-select-all {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.sprint-popover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.meta-popover-remove {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}

.meta-popover-remove:hover {
  color: #d0342c;
}

.cover-popover-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.cover-popover-title:first-child {
  margin-top: 0;
}

.cover-upload-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.cover-gradient-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.cover-gradient-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0;
}

.cover-gradient-swatch:hover {
  box-shadow: 0 0 0 2px var(--accent-link);
}

.editor-header-card .field-row {
  margin-bottom: 0;
}

.editor textarea.title-input {
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin-bottom: 16px;
  outline: none;
  resize: none;
  background: none;
  color: var(--text);
}

/* No overflow:hidden here — an ancestor with non-visible overflow becomes the
   sticky positioning context per spec, and since this card itself never
   scrolls internally, that silently neutered .kb-toolbar's sticky-to-top
   (verified: it just scrolled away with the page instead of pinning). The
   corner rounding it used to provide via clipping is applied directly on the
   toolbar (top corners) and the editor container (bottom corners) instead. */
.quill-card {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}

/* ---------- Custom editor toolbar (own markup; Quill's toolbar module is disabled) ---------- */

.kb-toolbar {
  position: sticky;
  top: 0;
  /* Kept below .modal-backdrop (z-index: 50) on purpose — a plain z-index:100
     here would make this sticky (non-modal) strip render on top of any modal
     opened while the editor is behind it (e.g. "+ Тег" in the sidebar while
     editing), poking through the dimmed overlay. 45 is still comfortably
     above ordinary page content. */
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
}

.kb-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.kb-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border);
}

.kb-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
}

.kb-toolbar-btn .icon {
  width: 15px;
  height: 15px;
}

.kb-toolbar-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.kb-toolbar-btn.active {
  background: var(--accent-soft);
  color: var(--accent-link);
}

.kb-toolbar-btn-wide {
  width: auto;
  min-width: 132px;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg);
}

.kb-toolbar-caret {
  width: 10px !important;
  height: 10px !important;
  transform: rotate(90deg);
}

.kb-toolbar-dropdown {
  position: relative;
}

.kb-toolbar-dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 4px;
  min-width: 170px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.kb-toolbar-dropdown.open .kb-toolbar-dd-menu {
  display: block;
}

.kb-toolbar-dd-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}

.kb-toolbar-dd-menu button:hover {
  background: var(--accent-soft);
}

.kb-toolbar-dd-menu .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kb-toolbar-heading-1 {
  font-size: 16px;
  font-weight: 600;
}

.kb-toolbar-heading-2 {
  font-size: 14.5px;
  font-weight: 600;
}

.kb-toolbar-heading-3 {
  font-size: 13px;
  font-weight: 600;
}

.kb-toolbar-swatches {
  flex-wrap: wrap;
  gap: 6px;
  min-width: 140px;
  padding: 8px;
}

/* .kb-toolbar-swatches carries the same specificity as the base
   .kb-toolbar-dd-menu{display:none} rule and comes after it in the
   stylesheet, so a plain `display: flex` here would always win and the
   dropdown would never close. Only flip to flex once .open actually applies. */
.kb-toolbar-dropdown.open .kb-toolbar-dd-menu.kb-toolbar-swatches {
  display: flex;
}

.kb-toolbar-swatches button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}

.kb-toolbar-swatch-none {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-muted);
}

.kb-toolbar-swatch-none .icon {
  width: 11px;
  height: 11px;
}

/* Размер шрифта и межстрочный — те же, что в просмотре статьи (WYSIWYG) */
#quill-editor-container .ql-container.ql-snow {
  border: none;
  border-radius: 0 0 14px 14px;
  font-size: 14px;
}

#quill-editor-container .ql-editor {
  min-height: 320px;
  line-height: 1.75;
  padding: 20px 24px;
}

#quill-editor-container .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
  left: 24px;
}

/* Quill's snow theme ships light-mode colors; repaint for the dark theme. */
#quill-editor-container .ql-snow .ql-stroke {
  stroke: currentColor;
}

#quill-editor-container .ql-snow .ql-fill {
  fill: currentColor;
}

#quill-editor-container .ql-snow .ql-tooltip {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

#quill-editor-container .ql-snow .ql-tooltip input[type="text"] {
  background: var(--bg-deep);
  border-color: var(--border);
  color: var(--text);
}

/* ---------- Callout blocks (врезки), inserted via the toolbar or slash menu ---------- */

.callout {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.6;
}

.callout-info {
  background: var(--accent-soft);
  color: var(--text);
}

.callout-warning {
  background: #faf1d8;
  color: #8a5a07;
}

.callout-danger {
  background: rgba(220, 80, 70, 0.14);
  color: #b23a2f;
}

/* ---------- Tag editor (recent tags + search-to-add, used in the article editor) ---------- */

.tag-editor-field {
  flex: 1 1 220px;
  /* Shrinkable: without min-width:0 a long chip row pushes past the header
     card's edge on narrow screens instead of wrapping. */
  min-width: 0;
  max-width: 100%;
}

/* Selected tags, "often used" suggestions, and the search box all live on one
   wrapping line — the wrapper divs collapse via display:contents so their
   chips join this flex row directly instead of stacking as separate blocks. */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tag-editor-selected,
.tag-editor-recent {
  display: contents;
}

.tag-editor-empty {
  font-size: 11.5px;
  color: var(--text-muted);
}

.tag-remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0;
  margin-left: 2px;
  line-height: 1;
}

.tag-remove .icon {
  width: 9px;
  height: 9px;
}

.tag-remove:hover {
  color: #d0342c;
}

.tag-chip-suggest {
  cursor: pointer;
  border: 1px dashed var(--border-strong);
  background: none;
  color: var(--text-muted);
  font: inherit;
}

.tag-chip-suggest:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.tag-editor-search {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.tag-editor-search input {
  width: 15ch;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
}

.tag-editor-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 15;
  width: max(220px, 100%);
  /* Never wider than the viewport allows — the dropdown used to spill past
     the editor card on narrow screens. */
  max-width: min(320px, 70vw);
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.tag-editor-results.open {
  display: block;
}

.tag-editor-result {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  font-size: 12px;
  text-align: left;
  color: var(--text);
}

.tag-editor-result:hover {
  background: var(--accent-soft);
}

/* ---------- Slash ("/") command menu ---------- */

.slash-menu {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-border), rgba(0, 0, 0, 0.08) 0px 8px 24px;
  padding: 6px;
}

.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.slash-menu-item .icon {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.slash-menu-item.active,
.slash-menu-item:hover {
  background: var(--accent-soft);
}

.slash-menu-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.editor .field-row {
  display: flex;
  flex-wrap: wrap; /* narrow screens: columns stack instead of overflowing the card */
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.editor .field-row > div {
  min-width: 0;
}

.editor label.field-label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.field-hint {
  font-size: 11px;
  color: #d0342c;
  margin-top: 4px;
}

.editor select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Замена confirm(): та же .modal-backdrop, узкая карточка вместо .modal
   (дизайн-ревью — сначала Настройки, остальные модули отдельными партиями). */
.confirm-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 18px 20px;
  width: 340px;
}
.confirm-modal-text {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Замена alert(): временные тосты в правом нижнем углу, вместо блокирующего
   системного диалога — themed, темизируются как остальной интерфейс. */
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.toast {
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}
.toast.show {
  opacity: 1;
  transform: none;
}
.toast-error {
  background: var(--red);
  color: #fff;
}
.toast-success {
  background: var(--green);
  color: #fff;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 20px;
  width: 360px;
  /* A modal taller than the viewport (e.g. a project with tasks, comments
     and history) scrolls inside itself instead of clipping its bottom. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

/* ---- Task modal: property sheet — крупный инлайн-заголовок, сетка свойств
   «иконка → значение» с невидимыми контролами, hairline-секции. ---- */

.modal.tmodal {
  width: 720px;
  padding: 24px 28px 16px;
}

.tmodal-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tmodal-title {
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  padding: 3px 0 14px;
  outline: none;
}

.tmodal-title::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}

.tmodal-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.tmodal-prop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  min-width: 0;
}

.tmodal-key {
  width: 128px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.tmodal-key svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.tmodal-val {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tmodal-val select,
.tmodal-val input {
  border: 1px solid transparent;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  border-radius: 8px;
  padding: 5px 8px;
  max-width: 100%;
}

.tmodal-val select:hover,
.tmodal-val input:hover {
  background: var(--bg-soft);
}

.tmodal-val select:focus-visible,
.tmodal-val input:focus-visible {
  outline: none;
  border-color: var(--accent-link);
  background: var(--bg-soft);
}

/* Статус — цветная пилюля; JS вешает класс st-<key> по выбранному значению,
   кастомные статусы словаря красятся инлайн из их цвета. */
.tmodal-val select.tmodal-status {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 13px;
}

/* Цвета статус-пилюли и приоритета заданы в позднем tmodal-блоке (после
   отмены «кнопочных» стилей) — иначе их перебивает сброс background/color. */

.tmodal-dates { flex-wrap: nowrap; }
.tmodal-arrow { color: var(--text-muted); font-size: 12px; padding: 0 2px; }
#task-start-date-field { display: inline-flex; align-items: center; gap: 4px; }

.tmodal-resp { flex: 1; }

.tmodal-sec {
  border-bottom: 1px solid var(--hair);
  padding: 2px 0 12px;
}

.tmodal-desc {
  width: 100%;
  border: none;
  background: none;
  resize: vertical;
  min-height: 76px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  padding: 12px 0 2px;
  outline: none;
}

.tmodal-desc::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}

.tmodal-sec-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 12px 0 10px;
}

.tmodal-sec-title svg {
  width: 14px;
  height: 14px;
}

.tmodal .modal-actions {
  margin-top: 12px;
}

@media (max-width: 820px) {
  .tmodal-props { grid-template-columns: 1fr; }
}

/* The task modal can be opened from inside the project modal ("+ Создать
   задачу", clicking a task row) — it sits earlier in the DOM, so without an
   explicit raise it would paint underneath. */
#task-modal {
  z-index: 55;
}

.modal h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal .field {
  margin-bottom: 14px;
}

.modal label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

/* Every date/time picker gets the same rounded skin as a plain text input —
   browsers otherwise render type="date"/"datetime-local" with their own
   unstyled chrome, which used to only get fixed inside .task-modal-wide. */
.modal input[type="text"],
.modal input[type="date"],
.modal input[type="datetime-local"],
.modal input[type="number"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.modal input[type="color"] {
  width: 48px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
}

.modal select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

/* Project modal's view mode: name/priority stay in place but read as plain
   text rather than editable controls. Scoped to text/select fields only —
   a blanket `.modal input:disabled` would also catch disabled checkboxes
   elsewhere (permission matrix, OKR fields) and, worse, appearance:none
   would make those render as an invisible box with no visible checkmark. */
.modal input[type="text"]:disabled,
.modal select:disabled {
  background: none;
  border-color: transparent;
  padding-left: 0;
  color: var(--text);
  cursor: default;
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  appearance: none;
}

.project-link-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.project-link-add-row input {
  flex: 1;
  min-width: 0;
}

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

.cabinet-modal-actions {
  justify-content: space-between;
}

.icon-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  margin-bottom: 10px;
}

.icon-preview-box .icon {
  width: 20px;
  height: 20px;
}

.icon-preview-placeholder {
  color: var(--text-muted);
}

.icon-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.icon-palette-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  padding: 0;
}

.icon-palette-btn .icon {
  width: 16px;
  height: 16px;
}

.icon-palette-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.icon-palette-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.tag-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.tag-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-soft);
}

.tag-manage-row.tag-tree-add-row,
.tag-manage-row.tag-manage-add-row {
  background: transparent;
  padding: 0;
}

.tag-manage-row input[type="text"] {
  flex: 1;
}

.tag-tree-row .caret,
.tag-tree-add-row .caret {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}

.tag-tree-row .caret.collapsed {
  transform: rotate(-90deg);
}

.tag-tree-row .caret.spacer,
.tag-tree-add-row .caret.spacer {
  visibility: hidden;
  cursor: default;
}

.tag-tree-add-row {
  margin-top: 4px;
}

/* ---------- Tasks module ---------- */

.tasks-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.tasks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  min-height: 0;
  flex: 1;
}

.tasks-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tasks-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 980px) {
  .tasks-grid { grid-template-columns: 1fr; }
}

.tasks-filter-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tasks-filter-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.tasks-filter-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.tasks-filter-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.tasks-mini-filter {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
  outline: none;
}

/* Task list sidebar item — та же плотность, что и .tree-node-row (Статьи, эталон
   левых меню): 11.5px, отступ 4×6, скругление 9px — см. CLAUDE.md/Design system. */
.task-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text);
  user-select: none;
}

.task-list-item:hover {
  background: var(--accent-soft);
}

.task-list-item.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.task-list-item .task-list-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.task-list-item .task-list-icon .icon {
  width: 14px;
  height: 14px;
}

.task-list-item .task-list-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list-item .task-list-count {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.task-list-item:hover .tree-node-menu-btn {
  display: flex;
}

/* Проекты sidebar: projects grouped by Выполнены/В процессе/Без задач. */
.project-sidebar-group {
  margin-bottom: 10px;
}

.project-sidebar-group-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 8px;
}

.project-task-count-chip {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* The project's icon+color identity chip — sidebar rows, Gantt group rows
   and the modal title all render the same element. Its background comes from
   the shared .cover-gradient-<key> pastel classes. */
.project-icon-chip {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.project-icon-chip .icon {
  width: 13px;
  height: 13px;
}

/* Pastel chip backgrounds are the same in both themes (see the cover-gradient
   convention), so the icon on them needs a fixed dark ink — the theme-aware
   --text-secondary goes light in dark mode and would wash out on pastel. */
.project-icon-chip[class*="cover-gradient-"] {
  color: #4b463d;
}

.modal h2 .project-icon-chip {
  margin-right: 8px;
}

.project-meta-bar {
  margin: -6px 0 12px;
}

/* Swatch preview inside the "Цвет" button of the project meta bar. */
.project-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.cover-gradient-swatch.active {
  box-shadow: 0 0 0 2px var(--accent-link);
}

.sidebar-empty-cta {
  margin-top: 10px;
}

/* "Создать задачу" button + "Привязать существующую" select in the project
   modal's tasks section: two equal halves spanning the modal's full width. */
#project-attach-existing-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

#project-attach-existing-wrap > * {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}

/* Tasks content area */
.tasks-content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tasks-content-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.tasks-add-btn-main {
  margin-left: auto;
}

/* Проекты header: year/month/sprint filter + at-a-glance stat tiles. */
.period-filter {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Фильтры периода — серые чипы-пилюли, как .fchip-select в Задачах */
.period-filter .btn.small {
  border-radius: 999px;
  border-color: transparent;
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-weight: 600;
}

.period-filter .btn.small:hover {
  border-color: var(--border);
  background: var(--bg-deep);
}

.projects-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 760px) {
  .projects-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* Progress bar */
.tasks-progress-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.tasks-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9, #2e7d32);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.tasks-progress-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Task rows: one bordered card holds hairline-separated rows (list view). */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tasks-list.kanban-mode {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.task-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 46px;
  border-top: 1px solid var(--hair);
  background-color: var(--bg);
  /* Приоритет (П.5): градиент цвета слева направо с быстрым затуханием —
     к ~3-й букве названия он уже прозрачный. Цвет — из словаря приоритетов
     (--prio-tint задаётся в buildTaskCard). */
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--prio-tint, transparent) 24%, transparent) 0, transparent 240px);
  cursor: pointer;
}

.task-card:hover {
  background-color: var(--bg-soft);
}

.tasks-list > .task-card:first-child,
.tcols-h + .task-card {
  border-top: none;
}

/* Выделенная кружком строка (массовые действия) */
.task-card.selected,
.task-card.selected:hover {
  background-color: var(--sel-bg);
}
/* Выполненные — приглушаем подсветку приоритета, чтобы завершёнка не пестрила */
.task-card.done { background-image: none; }

/* Подзадача: колонки НЕ съезжают — строка выровнена с родителем (чек/ID/тип/
   статус/даты в тех же позициях). Иерархию показываем ТОЛЬКО в колонке
   «Название»: направляющая-веточка дерева + отступ заголовка. Идущие подряд
   подзадачи дают непрерывную вертикаль слева — читается как группа; у последней
   вертикаль обрывается на середине (уголок «└»). */
.task-card.task-subrow .tcol-name {
  padding-left: 26px;
  position: relative;
}
.task-card.task-subrow .tcol-name::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  border-left: 1.5px solid var(--border-strong);
}
.task-card.task-subrow.task-sublast .tcol-name::before { bottom: 50%; }
.task-card.task-subrow .tcol-name::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 11px;
  border-top: 1.5px solid var(--border-strong);
}

/* Вложенные пункты чек-листа под строкой задачи */
.task-checkrows {
  background: var(--bg);
  padding: 2px 16px 8px 58px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-checkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.task-checkrow input[type='checkbox'] {
  accent-color: var(--accent-link);
  margin: 0;
}
.task-checkrow.done span {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* «Компактно»: плотные строки, вложенность не рендерится */
.tasks-list.compact .task-card {
  min-height: 34px;
}

/* Плавающий бар массовых действий — чёрная пилюля (инверсия через --accent:
   в тёмной теме становится светлой, как primary-кнопки). Тень разрешена —
   плавающий элемент. */
.task-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}
.task-bulk-count {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.task-bulk-bar .btn.small {
  background: transparent;
  border-color: color-mix(in srgb, var(--bg) 30%, transparent);
  color: var(--bg);
}
.task-bulk-bar .btn.small:hover {
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  border-color: color-mix(in srgb, var(--bg) 45%, transparent);
}
.task-bulk-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--bg) 70%, transparent);
  cursor: pointer;
}
.task-bulk-close:hover {
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  color: var(--bg);
}
.task-bulk-close .icon {
  width: 13px;
  height: 13px;
}

/* Подпись «базовый» у неудаляемых типов в Настройках */
.tag-builtin-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 6px;
  flex: none;
}

/* Column layout shared by header row and task rows (mockup: Название/Статус/
   Исполнитель/Проект/Срок). */
.tcols-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 34px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--bg-head);
  border-bottom: 1px solid var(--border);
}

/* Заголовки колонок центрируем по ширине столбца (просьба Сергея): flex-ячейки
   (Название/Исполнитель) — justify-content, текстовые — text-align. Данные строк
   при этом остаются как есть (имя/тип/исполнитель слева, даты/ID — по центру). */
.tcols-h > span { justify-content: center; text-align: center; }

.tcol-check { width: 18px; flex: none; }
.tcol-id { width: 42px; flex: none; text-align: center; }
.tcol-type { width: 92px; flex: none; overflow: hidden; white-space: nowrap; }
.tcol-type-empty { color: var(--text-muted); }
.tcol-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tcol-st { width: 110px; flex: none; }
.tcol-who { width: 88px; flex: none; display: flex; align-items: center; }
.tcol-start { width: 88px; flex: none; text-align: center; white-space: nowrap; }
.tcol-due { width: 108px; flex: none; text-align: center; white-space: nowrap; }
.tcol-due.late { color: #c14a34; font-weight: 600; }
.tcol-actions { width: 52px; flex: none; display: flex; gap: 4px; justify-content: flex-end; }

/* Колонок немало (ID + 2 даты) — на узких экранах строка не должна ужимать имя в
   ноль: держим минимальную ширину строки/шапки и включаем горизонтальный скролл
   списка (шапка и строки уезжают вместе, т.к. лежат в одном #tasks-list). */
.tcols-h, .task-card { min-width: 820px; }
.tasks-list:not(.kanban-mode) { overflow-x: auto; }

/* Сортировка кликом по шапке колонки */
.tcols-h [data-sort] { cursor: pointer; user-select: none; }
.tcols-h [data-sort]:hover { color: var(--text); }
.tcol-sort-arrow { color: var(--accent-link); font-size: 9px; margin-left: 3px; }

.task-card .tcol-name .task-card-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 13px;
}

.task-flag {
  flex: none;
  display: inline-flex;
  color: #c14a34;
}

.task-flag .icon,
.task-flag svg { width: 12px; height: 12px; }

.task-subcnt {
  flex: none;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-deep);
  border-radius: 6px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

.task-card .tcol-actions .task-action-btn {
  opacity: 0;
}

.task-card:hover .tcol-actions .task-action-btn {
  opacity: 1;
}

/* Табы видов вверху сайдбара (Задачи: Список/Доска/Календарь/Проекты; Команды:
   Структура/График/Команда) — иконки без подписей (см. CLAUDE.md/Design system:
   любой новый набор табов этого паттерна тоже делаем icon-only сразу).
   Активный — чёрная пилюля; подпись доступна как нативный title-тултип. */
.tasks-view-tabs {
  display: flex;
  gap: 5px;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.tasks-view-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.tasks-view-tab .tvt-label {
  display: none;
}

.tasks-view-tab .tvt-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}
.tasks-view-tab .tvt-icon svg {
  width: 100%;
  height: 100%;
}

.tasks-view-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.tasks-view-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.tasks-head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex: none;
}

/* Search + gray filter chips row (mockup .searchrow) */
.tasks-searchrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* Поиск задач в сайдбаре — над списками; переиспользует .search-box. */
.tasks-side-search {
  padding: 0 12px 10px;
}

.fchip-select {
  border: none;
  background: var(--bg-deep);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  outline: none;
  cursor: pointer;
}

.fchip-select:hover {
  color: var(--text);
}

.tasks-countrow {
  font-size: 13px;
  margin-bottom: 6px;
}

.tasks-countrow b { font-weight: 600; }
.tasks-countrow span { color: var(--text-muted); font-size: 12.5px; margin-left: 6px; }

.task-card.done {
  opacity: 0.55;
}

.task-card.done .task-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.15s;
  position: relative;
}

.task-check:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.task-check.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.task-check.checked::after {
  content: '✓';
  font-size: 11px;
  font-weight: 600;
  color: var(--bg);
}

/* Частичное выделение (select-all в шапке, когда выделены не все строки) */
.task-check.indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.task-check.indeterminate::after {
  content: '';
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--bg);
}

/* Значок «эта задача блокирует другие» (П.8): ID заблокированной в оранжевой
   (--amber) окантовке + счётчик остальных. Одиночный бейдж справа от названия. */
.task-block-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--amber);
  border: 1px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  white-space: nowrap;
}
.task-block-badge-more { opacity: 0.75; font-size: 9.5px; }

/* Значок повторяющейся задачи (П.8) */
.task-repeat-mark {
  flex: none;
  display: inline-flex;
  color: var(--text-muted);
}
.task-repeat-mark svg { width: 13px; height: 13px; }

/* Значок «есть подзадачи» (компактный режим): иконка + число, справа от названия */
.task-subtasks-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.task-subtasks-mark svg { width: 13px; height: 13px; }

.task-card-body {
  flex: 1;
  min-width: 0;
}

.task-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.4;
  word-break: break-word;
}

.task-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: pre-line;
  line-height: 1.4;
}

.task-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.task-priority-badge.priority-low {
  background: #e8f0fd;
  color: #2a5fc2;
}

.task-priority-badge.priority-normal {
  background: #fef9e7;
  color: #a07a00;
}

.task-priority-badge.priority-high {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

.task-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
}

.task-status-badge.status-backlog {
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.task-status-badge.status-in_progress {
  background: rgba(37, 99, 184, 0.12);
  color: var(--accent-link);
}

/* Заблокирована — янтарная (как init-st-blocked в OKR), красный — только
   у просроченных. */
.task-status-badge.status-blocked {
  background: rgba(192, 125, 10, 0.14);
  color: #c07d0a;
}

.task-status-badge.status-overdue {
  background: rgba(193, 74, 52, 0.13);
  color: #c14a34;
}

.task-status-badge.status-done {
  background: rgba(46, 158, 91, 0.14);
  color: #2e9e5b;
}

.task-status-badge.status-cancelled {
  background: var(--bg-deep);
  color: var(--text-muted);
}

.task-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.task-due-badge .icon {
  width: 11px;
  height: 11px;
}

.task-due-badge.overdue {
  color: #d0342c;
  border-color: rgba(220, 80, 70, 0.4);
  background: rgba(220, 80, 70, 0.14);
}

/* Deadline urgency strip */
.task-deadline-bar {
  height: 3px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin: 6px 0;
  max-width: 220px;
}

.task-deadline-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.task-deadline-bar.level-plenty .task-deadline-bar-fill { background: #4caf6d; }
.task-deadline-bar.level-later .task-deadline-bar-fill { background: #8bc34a; }
.task-deadline-bar.level-upcoming .task-deadline-bar-fill { background: #e0a940; }
.task-deadline-bar.level-soon .task-deadline-bar-fill { background: #e08a3c; }
.task-deadline-bar.level-urgent .task-deadline-bar-fill,
.task-deadline-bar.level-overdue .task-deadline-bar-fill { background: #ff5b4f; }

/* Checklist progress */
.task-checklist-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.task-checklist-progress-bar {
  flex: 1;
  max-width: 220px;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.task-checklist-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.task-checklist-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Checklist items checkable right on the card, no need to open the task
   modal — see checklistInlineHtml/wireChecklistInlineToggles. */
.task-checklist-inline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 6px;
}

.task-checklist-inline-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
}

.task-checklist-inline-item.done span {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Assignee chips */
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-border);
}

.task-assignee-chip .icon {
  width: 10px;
  height: 10px;
}

.task-assignee-chip.editable {
  font-size: 12px;
  padding: 4px 10px;
}

.task-assignee-chip button.remove {
  border: none;
  background: none;
  padding: 0 0 0 2px;
  color: var(--text-muted);
  display: inline-flex;
  cursor: pointer;
}

.task-responsibles-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.task-assignee-add-select {
  padding: 4px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 9999px;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  outline: none;
}

/* Checklist editor (task modal) */
.task-checklist-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.task-checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.task-checklist-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.task-checklist-row input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  font-size: 13px;
}

/* Kanban board */
.tasks-list.kanban-mode {
  overflow-x: auto;
}

.kanban-board {
  display: grid;
  /* Column count is dynamic (custom statuses add columns) — set from JS. */
  grid-template-columns: repeat(var(--kanban-cols, 5), minmax(200px, 1fr));
  gap: 12px;
  align-items: start;
}

.kanban-column {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  min-height: 200px;
}

.kanban-column.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}

.kanban-column-tile {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.kanban-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s;
}

/* ---------- Задачи — вид «Календарь» ---------- */

.month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.month-nav-label {
  font-size: 13px;
  font-weight: 600;
  min-width: 108px;
  text-align: center;
}

.month-nav .icon-btn {
  width: 26px;
  height: 26px;
}

.month-nav .icon-btn .icon {
  width: 13px;
  height: 13px;
}

.cal-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-head);
  border-bottom: 1px solid var(--border);
}

.cal-weekdays span {
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cal-weekdays span.weekend {
  color: var(--text-muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  height: 158px;
  overflow: hidden;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-grid .cal-day:nth-child(7n) {
  border-right: none;
}

.cal-day.out {
  background: var(--bg-soft);
}

.cal-day.out .cal-day-num {
  color: var(--text-muted);
  opacity: 0.55;
}

.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cal-day.today {
  background: var(--accent-soft);
}

.cal-day.today .cal-day-num {
  background: var(--accent-link);
  color: #fff;
}

.cal-chip {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.cal-chip-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day-count-tile {
  width: 100%;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: none;
  border-radius: 6px;
  padding: 3px 7px;
}

.cal-day-count-tile:hover {
  background: var(--border);
  color: var(--text);
}

.kanban-card:hover {
  border-color: var(--border-strong);
}

.kanban-card.done .task-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.kanban-card .task-card-meta {
  margin-top: 6px;
}

.task-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.task-card:hover .task-card-actions {
  opacity: 1;
}

.task-action-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}

.task-action-btn .icon {
  width: 14px;
  height: 14px;
}

.task-action-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.task-action-btn.danger:hover {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

/* Empty tasks state */
.tasks-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.tasks-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.tasks-empty-icon .icon {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
}

.tasks-empty-text {
  font-size: 13px;
}

/* Task modal */
.task-modal-wide {
  width: 560px !important;
  max-width: calc(100vw - 40px);
}

.task-modal-wide textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
}

.task-modal-wide .field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.task-modal-wide .field-row > div {
  flex: 1;
  min-width: 150px;
}

.task-modal-wide select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
}

/* Task modal (property sheet) — отменяем «кнопочный» вид контролов из общих
   .modal/.task-modal-wide правил выше: значения читаются как текст, рамка и
   фон появляются только на hover/focus. Идёт после конкурентов по каскаду. */
.task-modal-wide.tmodal {
  width: 760px !important;
}

.tmodal .tmodal-val select,
.tmodal .tmodal-val input[type="date"],
.tmodal .tmodal-val input[type="datetime-local"] {
  width: auto;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--text);
}

.tmodal .tmodal-val input[type="datetime-local"] { min-width: 190px; }

.tmodal .tmodal-val select.tmodal-status {
  border-radius: 999px;
  padding: 4px 13px;
  width: auto;
  /* Текст внутри цветного контура — строго по центру; для select выбранное
     значение центрует именно text-align-last. */
  text-align: center;
  text-align-last: center;
}

.tmodal .tmodal-val select:hover,
.tmodal .tmodal-val input:hover {
  background: var(--bg-soft);
}

.tmodal .tmodal-val select:focus-visible,
.tmodal .tmodal-val input:focus-visible {
  outline: none;
  border-color: var(--accent-link);
  background: var(--bg-soft);
}

.tmodal textarea.tmodal-desc {
  border: none;
  background: none;
  border-radius: 0;
  padding: 12px 0 2px;
  font-size: 13.5px;
  line-height: 1.5;
}

.tmodal-prop.full { grid-column: 1 / -1; }

.tmodal input.tmodal-title {
  border: none;
  background: none;
  border-radius: 0;
  width: 100%;
  padding: 3px 0 14px;
  font-size: 21px;
  font-weight: 600;
}

/* Чек-лист: строки с нижней hairline вместо «кнопочных» инпутов */
.tmodal .task-checklist-editor input[type="text"] {
  border: none;
  background: none;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 6px 2px;
}

.tmodal .task-checklist-editor input[type="text"]:focus-visible {
  outline: none;
  border-bottom-color: var(--accent-link);
}

/* Модалка задачи занимает 60% экрана — функционал будет расти. */
.modal.task-modal-wide.tmodal {
  width: 60vw !important;
  min-width: 720px;
  max-width: 1080px;
}

/* Чип типа в строке списка задач (цвет — из словаря типов) */
.task-type-chip {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.tmodal-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.tmodal-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ---- Поповер с поиском (комбо-селекты, люди, задачи) ---- */
.combo-pop {
  position: fixed;
  z-index: 80;
  width: 288px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 6px;
}

.combo-pop-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 4px;
}

.combo-pop-search-wrap .icon { width: 13px; height: 13px; color: var(--text-muted); }

.combo-pop-search {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  padding: 4px 0;
}

.combo-pop-list { max-height: 240px; overflow-y: auto; }

.combo-pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.combo-pop-item:hover { background: var(--bg-soft); }
.combo-pop-item.selected { font-weight: 600; }
.combo-pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-pop-hint { font-size: 11px; color: var(--text-muted); flex: none; }
.combo-pop-check { color: var(--accent-link); font-weight: 600; flex: none; }
.combo-pop-empty { padding: 12px; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.combo-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Кнопка-значение поверх скрытого селекта */
select.combo-hidden { display: none !important; }

.combo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
}

.combo-btn:hover { background: var(--bg-soft); }
.combo-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-caret { color: var(--text-muted); font-size: 10px; }
.combo-btn.combo-add { color: var(--text-muted); }
.combo-btn.combo-add:hover { color: var(--text); }

/* ---- Связи блокировок ---- */
.tmodal-links { display: flex; flex-wrap: wrap; gap: 6px; }

.task-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  background: var(--bg);
}

.task-link-chip .task-link-kind { color: var(--text-muted); }
.task-link-chip .task-link-title { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-link-chip .remove { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; }
.task-link-chip .remove:hover { color: #c14a34; }
.task-link-chip .remove .icon { width: 11px; height: 11px; }

.link-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.link-dot.blocks { background: #c14a34; }
.link-dot.blockedby { background: #c07d0a; }
.btn .link-dot { margin-right: 6px; }

/* ---- Подзадачи ---- */
.task-subtask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}

.task-subtask-row:last-child { border-bottom: none; }
.task-subtask-row .task-subtask-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-subtask-row .remove { border: none; background: none; color: var(--text-muted); cursor: pointer; display: inline-flex; padding: 2px; }
.task-subtask-row .remove:hover { color: #c14a34; }

/* ---- Кнопка диапазона дат + поповер-календарь ---- */
.drange-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.drange-btn:hover { background: var(--bg-soft); }
.drange-btn .icon { width: 14px; height: 14px; color: var(--text-muted); }

.combo-pop.drange-pop { width: 548px; padding: 0; overflow: hidden; }
.combo-pop.sdate-pop { width: 280px; padding: 0; overflow: hidden; }

/* Кнопка-триггер одиночной даты — визуально повторяет .modal
   input[type="text"] (та же рамка/паддинг/радиус), но это <button>,
   открывающий openSingleDatePop вместо нативного календаря браузера. */
.field-date-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
}
.field-date-btn:hover { border-color: var(--border-strong); }
.field-date-btn .icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* Ручной ввод даты (ДД.ММ.ГГГГ) рядом с кнопкой-пикером */
.field-date-combo { display: flex; gap: 6px; align-items: stretch; }
.field-date-combo .field-date-text { flex: 1; min-width: 0; }
.field-date-combo .field-date-btn { width: auto; flex-shrink: 0; padding: 7px 10px; }
.field-date-combo .field-date-btn .field-date-btn-val { display: none; }

/* Поле соц-профиля со ссылкой-«↗» перехода */
.field-social-combo { display: flex; gap: 6px; align-items: center; }
.field-social-combo input { flex: 1; min-width: 0; }
.field-social-link {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px;
  color: var(--accent-link); text-decoration: none; font-size: 15px; line-height: 1;
}
.field-social-link:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.field-social-link.is-empty { opacity: .35; pointer-events: none; }

/* Настройки → Отделы: имя руководителя в строке отдела */
.department-row-manager { margin-left: auto; margin-right: 10px; font-size: 12px; white-space: nowrap; }

/* ЛК → Интеграции: подключённые календари */
.integration-add { margin-bottom: 8px; }
.integration-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--hair);
}
.integration-row:last-child { border-bottom: none; }
.integration-name { font-size: 13px; font-weight: 600; }
.integration-provider { font-size: 12px; margin-left: 4px; }
.integration-row .task-action-btn { margin-left: auto; }

/* Плашка «не удалось обновить календарь» */
.cal-load-notice {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft); font-size: 12.5px; color: var(--data-amber, #c07d0a);
}
.cal-load-notice > * { display: flex; align-items: center; gap: 6px; }
.cal-load-notice .icon { width: 14px; height: 14px; flex-shrink: 0; }

/* Внешние события в календаре задач */
.cal-ext-chip { display: inline-flex; align-items: center; gap: 4px; }
.cal-ext-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-event-pop { padding: 10px 12px; max-width: 260px; }
.cal-event-pop-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cal-event-pop-when { font-size: 12px; }
.cal-event-pop-src { font-size: 11px; margin-top: 6px; }

.sdate-head-selects { display: flex; gap: 4px; width: 100%; }
.sdate-head-select {
  border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; padding: 3px 4px; border-radius: 6px;
}
.sdate-head-select:hover { background: var(--bg-soft); }
.sdate-head-select.sdate-year { flex: none; }
.sdate-head-select.sdate-month { flex: 1; }

.dr-wrap { display: flex; }

.dr-presets {
  width: 178px;
  flex: none;
  border-right: 1px solid var(--hair);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dr-preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.dr-preset:hover { background: var(--bg-soft); }
.dr-preset-hint { font-size: 11.5px; color: var(--text-muted); }

.dr-cal { flex: 1; padding: 12px 14px 10px; }

.dr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13.5px;
}

.dr-nav { display: inline-flex; align-items: center; gap: 2px; }

.dr-nav button {
  border: none;
  background: none;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.dr-nav button:hover { background: var(--bg-soft); color: var(--text); }
.dr-today-btn { font-size: 12px !important; }

.dr-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2px;
}

.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.dr-day {
  border: none;
  background: none;
  height: 32px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  position: relative;
}

.dr-day:hover { background: var(--bg-soft); border-radius: 8px; }
.dr-day.out { color: var(--text-muted); opacity: 0.45; }

.dr-day.range { background: var(--bg-deep); border-radius: 0; }

/* «Сегодня» и границы диапазона побеждают заливку диапазона (идут ниже) */
.dr-day.today {
  background: #c14a34;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}

.dr-day.edge {
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
}

.dr-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--hair);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.dr-foot label { display: inline-flex; align-items: center; gap: 7px; }

.dr-time-wrap { position: relative; }

.dr-time-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.dr-time-btn:hover { border-color: var(--border-strong); }

/* Свой список времени вместо нативного пикера — открывается вверх,
   внутри поповера дат */
.dr-time-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 96px;
  max-height: 216px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 4px;
  z-index: 5;
}

.dr-time-menu button {
  display: block;
  width: 100%;
  border: none;
  background: none;
  border-radius: 7px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dr-time-menu button:hover { background: var(--bg-soft); }

.dr-time-menu button.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.dr-foot-sp { flex: 1; }

/* ---- Описание: мини-Quill без рамок, hairline под тулбаром ---- */
.tmodal .tmodal-quill { padding-top: 4px; }

.tmodal .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--hair);
  padding: 6px 0;
  font-family: inherit;
}

.tmodal .ql-container.ql-snow {
  border: none;
  font-family: inherit;
  font-size: 13.5px;
}

.tmodal .ql-editor {
  padding: 10px 0 4px;
  min-height: 84px;
  line-height: 1.5;
}

.tmodal .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
  left: 0;
  right: 0;
  opacity: 0.75;
}

/* Комбо: пустое значение — серый placeholder, как ключи слева */
.combo-btn.placeholder .combo-btn-label {
  color: var(--text-muted);
  font-weight: 400;
}

/* Секции-действия: заголовок — обычная строка-кнопка без выделений,
   тап открывает мини-меню/добавляет содержимое (как в референсе). */
.tmodal-sec-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 9px 6px;
  margin: 2px 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.tmodal-sec-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.tmodal-sec-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.sec-fold {
  width: 12px;
  flex: none;
  font-size: 9px;
  color: var(--text-muted);
}

/* Тулбар описания — дизайн редактора статей, но плоский внутри модалки */
.tmodal .tmodal-desc-toolbar {
  position: static;
  z-index: auto;
  background: none;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 4px 0 8px;
}

.tmodal .tmodal-desc-toolbar .kb-toolbar-btn.ql-active {
  background: var(--accent-soft);
  color: var(--accent-link);
}

/* ---- Зависимости: заголовок с «+», группы с мини-таблицей ---- */
.deps-head { align-items: center; }
.deps-sp { flex: 1; }

.deps-add-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-secondary);
  cursor: pointer;
}

.deps-add-btn:hover { border-color: var(--border-strong); color: var(--text); }

.combo-pop.deps-menu { width: 260px; }

.dep-group { margin-bottom: 12px; }
.dep-group:last-child { margin-bottom: 0; }

/* Заголовок группы — мелкий uppercase, как секционные подписи в панелях;
   строки задач при этом остаются обычным текстом и не сливаются с ним. */
.dep-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 0 2px;
}

.dep-group-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dep-group-cols,
.dep-row {
  display: grid;
  grid-template-columns: 1fr 110px 110px 28px;
  gap: 10px;
  align-items: center;
}

.dep-group-cols {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--hair);
}

.dep-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
}

.dep-row:last-child { border-bottom: none; }

.dep-row-title {
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
}

.dep-row-title:hover { color: var(--accent-link); }
.dep-dash { color: var(--text-muted); font-size: 12px; }
.dep-row .remove {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 2px;
}
.dep-row .remove:hover { color: #c14a34; }

/* ---- Модалка проекта (property sheet, тот же язык, что и задача) ---- */
.pmodal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* input-селектор — чтобы перебить `.tmodal input.tmodal-title` (padding-bottom
   14px), иначе текст съезжает вниз относительно иконки. */
.pmodal-title-row input.tmodal-title {
  flex: 1;
  padding: 3px 0;
}

/* Кнопка иконки/цвета слева от заголовка: пунктир-заглушка, пока оформление
   не выбрано; с выбранным цветом фон даёт .cover-gradient-<key>. */
.pmodal-style-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}

.pmodal-style-btn:hover { border-color: var(--text-muted); color: var(--text); }

.pmodal-style-btn.has-style {
  border-style: solid;
  border-color: transparent;
  background: var(--bg-deep);
  color: var(--text);
}

.pmodal-style-btn:disabled { pointer-events: none; }

.pmodal-style-btn .icon,
.pmodal-style-btn svg {
  width: 17px;
  height: 17px;
}

/* В просмотре заголовок и приоритет остаются читаемыми, а не «выключенными». */
.tmodal input.tmodal-title:disabled {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}

.tmodal .tmodal-val select:disabled { opacity: 1; cursor: default; }

/* Мини-таблица задач проекта — колонки Название/Статус/отвязать */
.ptask-grid { grid-template-columns: 1fr 150px 28px; }

/* Ссылки проекта: hairline-строки Название/URL/удалить */
.plink-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
}

.plink-row:last-child { border-bottom: none; }

.plink-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--accent-link);
  font-size: 13px;
  text-decoration: none;
}

.plink-row a:hover { text-decoration: underline; }

.plink-row a .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

.plink-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plink-url {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plink-row .remove {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 2px;
}

.plink-row .remove:hover { color: #c14a34; }

/* Мини-форма добавления ссылки в поповере */
.combo-pop.link-pop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.link-pop-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.link-pop-input:focus { border-color: var(--accent-link); }

.link-pop-add { align-self: flex-end; }

/* Описание проекта в просмотре — отрендеренный HTML мини-редактора */
.pmodal-desc-view {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 2px 2px;
}

.pmodal-desc-view p { margin: 0 0 6px; }
.pmodal-desc-view ol,
.pmodal-desc-view ul { margin: 0 0 6px; padding-left: 20px; }
.pmodal-desc-view a { color: var(--accent-link); }

/* Комментарии в property-sheet: плоские, с hairline-разделителями,
   композер без «кнопочной» рамки — подчёркивание, как у чек-листа. */
.tmodal .project-comments {
  gap: 0;
  margin-bottom: 4px;
  max-height: 240px;
}

.tmodal .project-comment {
  background: none;
  border-radius: 0;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hair);
}

.tmodal .project-comment:last-child { border-bottom: none; }

.tmodal .project-comment-composer textarea {
  border: none;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: none;
  padding: 8px 2px;
  margin-bottom: 8px;
  resize: none;
  color: var(--text);
}

.tmodal .project-comment-composer textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--accent-link);
}

/* ---- Режим просмотра задачи (.tmodal-view): контент читается, интерактив
   скрыт или инертен; выход — primary-кнопка «Редактировать». ---- */
.tmodal-view input.tmodal-title:disabled {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}

.tmodal-view .tmodal-props .combo-btn,
.tmodal-view .drange-btn,
.tmodal-view .tmodal-sec-btn,
.tmodal-view .task-checklist-row input {
  pointer-events: none;
}

.tmodal-view .tmodal-props .combo-caret,
.tmodal-view .task-assignee-chip .remove,
.tmodal-view .combo-add,
.tmodal-view .task-checklist-row .task-action-btn,
.tmodal-view .task-checklist-editor > .btn,
.tmodal-view .dep-row .remove,
.tmodal-view .attachment-chip .remove {
  display: none;
}

/* Статус-чип в списках — контрол быстрой смены статуса */
.tcol-st .task-status-badge,
.gantt-col-status .task-status-badge {
  cursor: pointer;
}

/* Цвета статус-пилюли: специфичность выше сброса background/color выше. */
.tmodal .tmodal-val select.st-backlog { background: var(--bg-deep); color: var(--text-secondary); }
.tmodal .tmodal-val select.st-in_progress { background: #e3edfa; color: #2563b8; }
.tmodal .tmodal-val select.st-blocked { background: #faf0d7; color: #9c6d10; }
.tmodal .tmodal-val select.st-cancelled { background: var(--bg-deep); color: var(--text-muted); }
.tmodal .tmodal-val select.st-done { background: #e0f1e5; color: #2e7d4f; }

:root[data-theme='dark'] .tmodal .tmodal-val select.st-in_progress { background: #2a3d5c; color: #9dbdf0; }
:root[data-theme='dark'] .tmodal .tmodal-val select.st-blocked { background: #4d3d1e; color: #e3bd66; }
:root[data-theme='dark'] .tmodal .tmodal-val select.st-done { background: #244631; color: #7fcf9e; }

.tmodal .tmodal-val select.pr-high { color: #c14a34; font-weight: 500; }
.tmodal .tmodal-val select.pr-normal { color: #9c6d10; font-weight: 500; }
.tmodal .tmodal-val select.pr-low { color: var(--text-muted); font-weight: 600; }

:root[data-theme='dark'] .tmodal .tmodal-val select.pr-high { color: #e08a76; }
:root[data-theme='dark'] .tmodal .tmodal-val select.pr-normal { color: #e3bd66; }

/* All tasks view */
.tasks-all-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.tasks-all-section-title:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ---------- Home (Главная) ---------- */

/* Ширина — как у Задач (.tasks-layout): без max-width, во всю ширину
   .content. Внутренние сетки (.hm-two/.cal-grid/.week-cols repeat(N,1fr))
   уже фракционные — растягиваются симметрично сами, без искажений. */
.home-view {
  width: 100%;
}

.home-subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
}

/* --- Home header --- */

.home-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.home-head h1 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 0 0 3px;
}

/* Пилюльный переключатель периода (Сегодня/Неделя/Месяц) */
.hm-seg {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-left: auto;
  flex: none;
}

.hm-seg button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.hm-seg button.on {
  background: var(--accent);
  color: var(--bg);
  font-weight: 550;
}

/* --- Карточки-секции Главной --- */

.hm-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.hm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-head);
  padding: 9px 16px;
}

.hm-card-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hm-card-note {
  font-size: 11.5px;
  color: var(--text-muted);
}

.hm-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--accent-link);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* --- Компактный OKR текущего квартала --- */

.hm-okr-node {
  padding: 9px 16px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 500;
}

.hm-okr-obj {
  padding: 11px 16px 4px;
}

.hm-okr-obj + .hm-okr-obj {
  border-top: 1px solid var(--hair);
}

.hm-okr-obj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.hm-ochip {
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.02em;
  flex: none;
}

.hm-okr-obj-title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.hm-kr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 7px 6px;
  border-top: 1px solid var(--hair);
}

.hm-kr-chip {
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  flex: none;
}

.hm-kr-title {
  flex: 1;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-kr-metric {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hm-stale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--hm-bad-ink);
  background: color-mix(in srgb, var(--hm-block) 18%, var(--bg));
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.hm-stale .icon {
  width: 11px;
  height: 11px;
}

/* --- Низ: курсы + опрос --- */

.hm-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.hm-bottom .hm-card {
  margin-bottom: 0;
}

.hm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
}

.hm-row:first-of-type {
  border-top: 0;
}

.hm-row:hover {
  background: var(--bg-soft);
}

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

.hm-row-title {
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-row-meta {
  font-size: 11.5px;
  color: var(--text-muted);
}

.hm-due {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.hm-due-red {
  color: var(--hm-bad-ink);
  background: color-mix(in srgb, var(--hm-over) 22%, var(--bg));
}

.hm-due-amber {
  color: #a06a10;
  background: color-mix(in srgb, var(--hm-block) 24%, var(--bg));
}

:root[data-theme="dark"] .hm-due-amber {
  color: #e3b077;
}

.hm-due-ok {
  color: var(--text-secondary);
  background: var(--bg-deep);
}

.hm-mini-btn {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.hm-mini-btn:hover {
  background: var(--bg-soft);
}

/* --- Главная: KPI-плитки задач (Всего / период / Просрочено / Выполнено) --- */
.hm-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.hm-tile {
  --tile-c: var(--hm-prog);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  /* пастельный градиент-затухание в прозрачность (как обложки статей) поверх фона */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tile-c) 30%, transparent), transparent 66%),
    var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.hm-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.hm-tile.t-total { --tile-c: var(--hm-prog); }
.hm-tile.t-period { --tile-c: var(--hm-block); }
.hm-tile.t-overdue { --tile-c: var(--hm-over); }
.hm-tile.t-done { --tile-c: var(--hm-done); }
.hm-tile-val { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-tile.t-overdue .hm-tile-val { color: var(--hm-bad-ink); }
.hm-tile.t-done .hm-tile-val { color: var(--hm-good-ink); }
.hm-tile-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 550; }
.hm-tile-delta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hm-tile-delta.good { color: var(--hm-good-ink); font-weight: 600; }
.hm-tile-delta.bad { color: var(--hm-bad-ink); font-weight: 600; }

/* --- Главная: инлайн-срок «осталось N дней» (строка проекта) --- */
.hm-daysleft { font-weight: 650; color: var(--text-secondary); }
.hm-daysleft.ok { color: var(--green); }
.hm-daysleft.warn { color: var(--amber); }
.hm-daysleft.over { color: var(--red); }

/* --- Главная: две колонки (OKR+Проекты, Курсы+Опрос), равная высота --- */
.hm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.hm-two > .hm-card,
.hm-two > .hm-okr { margin-bottom: 0; height: 100%; }

/* --- Главная: строки проекта / плана / курса с прогресс-тиками --- */
.hm-proj-row, .hm-plan-row, .hm-course-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
}
.hm-proj-row:first-of-type,
.hm-plan-row:first-of-type,
.hm-course-row:first-of-type { border-top: 0; }
.hm-proj-row:hover, .hm-plan-row:hover, .hm-course-row:hover { background: var(--bg-soft); }
.hm-proj-main, .hm-plan-main, .hm-course-main { flex: 1; min-width: 0; }
.hm-proj-name, .hm-plan-title, .hm-course-title {
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-proj-meta, .hm-plan-meta, .hm-course-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hm-course-meta .icon { width: 13px; height: 13px; }
.hm-proj-prog, .hm-plan-prog { flex: none; white-space: nowrap; }
.hm-course-new { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

/* --- Главная: блок «Команда» (дни рождения + отсутствия) --- */
/* Колонки без горизонтального паддинга — строки заливаются во всю ширину колонки
   (hover доезжает до краёв карточки); разделитель между колонками — хайрлайн. */
.hm-team-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 0;
  padding: 6px 0 12px;
}
.hm-team-cols > div:first-child { border-right: 1px solid var(--hair); }
.hm-team-subh {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 8px 0 2px;
  padding: 0 16px;
}
.hm-bd-row, .hm-abs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
}
.hm-bd-row:hover, .hm-abs-row:hover { background: var(--bg-soft); }
.hm-bd-main, .hm-abs-main { flex: 1; min-width: 0; }
.hm-bd-name, .hm-abs-name {
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-bd-sub, .hm-abs-rel { font-size: 11.5px; color: var(--text-muted); }
.hm-bd-when {
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
}
.hm-bd-when.today { color: #fff; background: var(--brand-flow); }
.hm-bd-when.soon { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--bg)); }
.hm-bd-when.later { color: var(--text-secondary); background: var(--bg-deep); }
.hm-abs-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.hm-abs-dot.vacation { background: #ccdcf3; }
.hm-abs-dot.sick { background: #f2cfc6; }
.hm-abs-dot.dayoff { background: #f0e0bd; }
:root[data-theme="dark"] .hm-abs-dot.vacation { background: #2a3d5c; }
:root[data-theme="dark"] .hm-abs-dot.sick { background: #4e2a22; }
:root[data-theme="dark"] .hm-abs-dot.dayoff { background: #4d3d1e; }
.hm-abs-type { font-size: 12px; font-weight: 550; color: var(--text-secondary); white-space: nowrap; }
.hm-rel-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
.hm-rel-mgr { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--bg)); }
.hm-rel-team { color: var(--brand-wave); background: color-mix(in srgb, var(--brand-flow) 15%, var(--bg)); }
.hm-rel-dep { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--bg)); }

/* --- Главная: мотивирующая фраза опроса (после прохождения) --- */
.hm-sv-phrase {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
}
.hm-sv-em {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-sv-phrase-head { font-size: 14px; font-weight: 650; }
.hm-sv-phrase-nuance { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.hm-sv-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 16px;
}
.hm-sv-recap span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
}
.hm-sv-recap i { width: 8px; height: 8px; border-radius: 50%; }

/* --- Ежедневный опрос: шкалы-иконки 1–5 (пастель красный→зелёный) --- */

.hm-survey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--hair);
}

.hm-survey-row:first-of-type {
  border-top: 0;
}

.hm-survey-q {
  font-size: 13px;
  font-weight: 550;
}

.hm-rate {
  display: flex;
  gap: 5px;
}

.hm-rate-btn {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
}

.hm-rate-btn:hover {
  background: var(--bg-soft);
}

.hm-rate-btn svg {
  width: 21px;
  height: 21px;
}

.hm-ric {
  stroke: var(--border-strong);
  fill: none;
  stroke-width: 1.6;
}

.hm-reye {
  fill: var(--text-muted);
}

.hm-rmouth {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hm-rate-btn.on .hm-ric {
  stroke: var(--rc);
  fill: color-mix(in srgb, var(--rc) 30%, transparent);
}

.hm-rate-btn.on .hm-reye {
  fill: var(--text-secondary);
}

.hm-rate-btn.on .hm-rmouth {
  stroke: var(--text-secondary);
}

.hm-survey-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--hair);
}

.hm-survey-done {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.hm-survey-done b {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}

.home-empty-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 10px 16px;
}

/* --- Настройки → Опрос: средние и таблица ответов --- */

.svr-avgs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.svr-avg {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 108px;
}

.svr-avg-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.svr-avg-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.svr-of {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.svr-chip {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--rc) 32%, var(--bg));
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.svr-chip-empty {
  background: var(--bg-deep);
  color: var(--text-muted);
}

.svr-table-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.svr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.svr-table th {
  background: var(--bg-head);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 8px 14px;
}

.svr-table td {
  padding: 7px 14px;
  border-top: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}

.svr-table tbody tr:hover {
  background: var(--bg-soft);
}

@media (max-width: 900px) {
  .home-head {
    flex-wrap: wrap;
  }

  .hm-bottom,
  .hm-two,
  .hm-team-cols {
    grid-template-columns: 1fr;
  }

  .hm-team-cols > div:first-child { border-right: 0; }

  .hm-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Donut */

.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.donut {
  --pct: 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-link) 0deg calc(var(--pct) * 3.6deg), var(--accent-soft) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.donut::before {
  content: '';
  position: absolute;
  inset: 16px;
  background: var(--bg);
  border-radius: 50%;
}

.donut-center { position: relative; text-align: center; }

.donut-center .n {
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: block;
  letter-spacing: -0.02em;
}

.donut-center .l {
  font-size: 10.5px;
  color: var(--text-muted);
}

.donut-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.donut-legend span { display: flex; align-items: center; gap: 5px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-link); }
.donut-legend i.b { background: var(--accent-soft); border: 1px solid var(--border); }

/* Multi-segment status donut (Задачник side panel) — the conic-gradient is
   computed inline in JS (see statusDonutGradient), this just wraps the
   legend so more than 2 entries can wrap onto multiple lines. */
.donut.multi {
  background: var(--accent-soft);
}

.donut-legend.wrap {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
}

/* Stat tiles (Проекты header): flat bordered cards, color lives in the value */

.home-stat-tiles { display: flex; flex-direction: column; gap: 8px; }

.stat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
}

/* Значения — только data-палитра системы (синий/янтарный/зелёный) */
.stat-tile.lavender .stat-tile-value { color: #2563b8; }
.stat-tile.peach .stat-tile-value { color: #c07d0a; }
.stat-tile.mint .stat-tile-value { color: #2e9e5b; }
.stat-tile.coral .stat-tile-value { color: #c14a34; }
:root[data-theme='dark'] .stat-tile.coral .stat-tile-value { color: #d97a66; }

.stat-tile-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.stat-tile-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Promo card */

@media (max-width: 860px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ---------- Gantt (Гант) ---------- */

.gantt-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.gantt-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  flex: 1;
}

.gantt-chart {
  display: inline-block;
  min-width: 100%;
  position: relative;
}

/* Corner rounding comes from .gantt-scroll (overflow: auto + border-radius).
   No overflow: hidden here — it breaks position: sticky on the month row's
   label spacer, letting month names slide over the frozen task table. */

.gantt-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.gantt-row:last-child {
  border-bottom: none;
}

.gantt-row:not(.gantt-header-row):not(.gantt-month-row):hover {
  background: var(--bg-soft);
}

.gantt-row.done .gantt-col-task-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Project rows read as section headers over their own task rows below —
   a soft tint instead of another hard rule to tell the two apart. */
.gantt-group-row,
.gantt-group-row .gantt-row-label {
  background: var(--bg-soft);
}

.gantt-row-label {
  flex: 0 0 660px; /* keep in sync with GANTT_LABEL_WIDTH in app.js */
  position: sticky;
  left: 0;
  background: var(--bg);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
  /* A soft shadow — not a rule line — marks where the frozen label column
     ends and the scrollable day-grid begins. */
  box-shadow: 1px 0 0 0 var(--border);
}

.gantt-header-row .gantt-row-label,
.gantt-month-row .gantt-row-label {
  background: var(--bg-head);
}

/* Thin priority stripe on the left edge of a row's label — same hues as the
   task-card left borders, so priority reads at scroll speed without having
   to parse the text badge. Applied to both project and task rows. */
.priority-stripe-low::before,
.priority-stripe-normal::before,
.priority-stripe-high::before,
.priority-stripe-custom::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
}

.priority-stripe-high::before { background: #c25a4e; }
.priority-stripe-normal::before { background: #d8b45a; }
.priority-stripe-low::before { background: #5b7fb0; }
/* Custom dictionary priorities: color comes from --stripe-color set inline. */
.priority-stripe-custom::before { background: var(--stripe-color, #8a94a6); }

/* Solid mid-tones of the 12 pastel palette — deep enough to read on a 3px
   stripe or the project's summary bar, where the soft gradients would wash
   out. Set as a custom property so one class colors both uses. */
.project-color-peach { --project-color: #e8965f; }
.project-color-rose { --project-color: #e57d95; }
.project-color-butter { --project-color: #dfb54e; }
.project-color-sage { --project-color: #8fbf6a; }
.project-color-mint { --project-color: #5fbf95; }
.project-color-sky { --project-color: #58aed0; }
.project-color-powder { --project-color: #6f9fe0; }
.project-color-lavender { --project-color: #8e7bd8; }
.project-color-lilac { --project-color: #b56fd0; }
.project-color-blush { --project-color: #d96aab; }
.project-color-sand { --project-color: #c2a267; }
.project-color-olive { --project-color: #9aa860; }

/* Project row's left stripe in the project's own color (replaces the
   priority stripe when the project has a color — see the group-row builder). */
.project-stripe::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
  background: var(--project-color);
}

/* Leaf task row: 5-column mini table matching the header. */
.gantt-task-label {
  display: grid;
  grid-template-columns: 230px 110px 110px 120px 90px;
  align-items: center;
}

.gantt-col-dept {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Columns are separated by spacing, not rule lines — a full row/column grid
   of borders is what makes a timeline read as a spreadsheet; dropping the
   vertical lines here keeps the alignment without the "table" look. */
.gantt-col {
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
}

.gantt-col-task {
  font-weight: 500;
  gap: 6px;
}

.gantt-col-task-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-header-row .gantt-col {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Fixed-width disclosure gutter, shared by group rows (real caret) and leaf
   rows (invisible spacer), so task-title first letters always line up. */
.gantt-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.15s;
}

.gantt-caret .icon {
  width: 12px;
  height: 12px;
}

.gantt-caret.expanded {
  transform: rotate(90deg);
}

.gantt-caret.spacer {
  visibility: hidden;
  cursor: default;
}

/* Shared assignee-avatar chip, used by the Gantt table and task cards. */
.assignee-empty {
  color: var(--text-muted);
  font-size: 11px;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  margin-left: -6px;
  flex-shrink: 0;
}

.avatar-chip:first-child {
  margin-left: 0;
}

.avatar-chip-photo {
  overflow: hidden;
  background: var(--bg-soft);
}

.avatar-chip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-more {
  margin-left: 2px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Group row: a project — name + progress bar in the task column, plus a
   summary bar spanning the range of its tasks on the timeline. */
.gantt-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

.gantt-group-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gantt-group-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-project-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.gantt-project-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-link);
}

.gantt-group-range {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.gantt-group-bar {
  height: 8px;
  border-radius: 6px;
  /* Falls back to the accent when the project has no color of its own. */
  background: var(--project-color, var(--accent-link));
  opacity: 0.4;
  cursor: pointer;
}

.gantt-group-bar[class*="project-color-"] {
  opacity: 0.85;
}

.gantt-row-track {
  display: grid;
  position: relative;
  align-items: center;
}

.gantt-header-track,
.gantt-month-track {
  background: var(--bg-head);
}

/* No vertical rule per month/day — the sprint and "today" full-height lines
   already mark the meaningful boundaries; a line on every single cell is
   exactly the spreadsheet look this view is trying to avoid. */
.gantt-month-cell {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  padding: 8px 0;
  text-transform: capitalize;
}

.gantt-day-cell {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 9px 0;
}

.gantt-day-cell.today {
  background: var(--accent-soft);
  color: var(--accent-link);
  font-weight: 600;
  border-radius: 6px;
  margin: 6px 3px;
  padding: 3px 0;
}

.gantt-bar {
  height: 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* One square per day; a status change only recolors the days from that
   point on, so a task's run can show several colors across its lifetime. */
.gantt-day-square {
  height: 22px;
  margin: 2px 1px;
  border-radius: 8px;
  cursor: pointer;
  background: #efece6;
  transition: opacity 0.1s, transform 0.1s;
}

.gantt-day-square:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Flat tints of the shared data colors (blue/amber/green/red) — same hues as
   status chips and the home donut, no decorative gradients. */
.gantt-day-square.status-in_progress { background: #ccdcf3; }
.gantt-day-square.status-blocked { background: #f0e0bd; }
.gantt-day-square.status-done { background: #cbe7d6; }
.gantt-day-square.status-overdue { background: #f2cfc6; }
.gantt-day-square.status-cancelled { background: #dedbd4; }

:root[data-theme='dark'] .gantt-day-square { background: #2a2825; }
:root[data-theme='dark'] .gantt-day-square.status-in_progress { background: #2a3d5c; }
:root[data-theme='dark'] .gantt-day-square.status-blocked { background: #4d3d1e; }
:root[data-theme='dark'] .gantt-day-square.status-done { background: #244631; }
:root[data-theme='dark'] .gantt-day-square.status-overdue { background: #4e2a22; }
:root[data-theme='dark'] .gantt-day-square.status-cancelled { background: #3a3733; }

/* Compact mode: half-height rows for boards with many projects — tighter
   paddings, smaller squares/avatars, and the per-project progress bar is
   dropped (the day-squares already carry the status story). */
.gantt-chart.compact .gantt-col {
  padding: 3px 10px;
}

.gantt-chart.compact .gantt-group-label {
  padding: 4px 12px;
}

.gantt-chart.compact .gantt-project-progress {
  display: none;
}

.gantt-chart.compact .gantt-day-square {
  height: 13px;
  margin: 1px;
  border-radius: 5px;
}

.gantt-chart.compact .avatar-chip {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

.gantt-chart.compact .task-priority-badge,
.gantt-chart.compact .task-status-badge {
  padding: 1px 6px;
  font-size: 10px;
}

.gantt-chart.compact .project-icon-chip {
  width: 18px;
  height: 18px;
}

/* Pressed state for small toggle buttons (e.g. the "Компактно" switch). */
.btn.small.toggle-on {
  background: var(--accent-soft);
  color: var(--accent-link);
}

.gantt-compact-btn .icon {
  width: 13px;
  height: 13px;
}

/* Transparent overlay on top of a task's day-squares — captures the drag
   gesture (see attachTaskBarDrag) without hiding the per-day status colors
   underneath. */
.gantt-bar-drag-overlay {
  align-self: stretch;
  margin: 2px 1px;
  border-radius: 8px;
  cursor: grab;
}

.gantt-bar-drag-overlay:hover {
  box-shadow: inset 0 0 0 2px var(--accent-link);
}

.gantt-bar-drag-overlay:active {
  cursor: grabbing;
}

/* Sprint boundary: a subtle rule at the start of each 2-week sprint in the
   date header, plus a full-height line (below) spanning the whole chart. */
/* Спринт — скруглённый прямоугольник-подложка под числами дат шапки;
   зазор между прямоугольниками (фон --bg-head) читается как граница. */
.gantt-sprint-pill {
  align-self: stretch;
  margin: 4px 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}

.gantt-day-cell {
  position: relative;
  z-index: 1;
}

.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c25a4e;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.gantt-today-label {
  position: sticky;
  top: 0;
  display: inline-block;
  transform: translateX(-50%);
  background: #c25a4e;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.task-status-badge.status-done {
  background: rgba(62, 207, 142, 0.16);
  color: rgb(20, 130, 85);
}

.priority-dot.priority-low {
  color: #2a5fc2;
}

.priority-dot.priority-normal {
  color: #a07a00;
}

.priority-dot.priority-high {
  color: #d0342c;
}


/* ---------------- Settings page (Настройки, admin only) ---------------- */

.settings-view {
  max-width: 1180px;
}

.settings-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

/* Система: every dictionary as its own card on one screen. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Подписи групп карточек (дизайн-ревью): растёт список справочников —
   растёт и стена форм, группировка возвращает читаемость без новых вкладок. */
.settings-group-title {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 6px 2px -6px;
}
.settings-group-title:first-child {
  margin-top: 0;
}

.settings-card-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

/* Настройки → Проект: шкалы лимитов (использовано / лимит + прогресс-бар по
   дизайн-системе — трек --bg-deep, заливка --accent, порог/превышение
   янтарным/красным data-цветом). */
.muted { color: var(--text-muted); }

.limit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Строка лимита: подпись — короткая шкала 10 делений (.okr-ticks) —
   значение «использовано / лимит», всё на одной линии. */
.limit-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.limit-row-label {
  flex: 0 0 160px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.limit-ticks {
  flex-shrink: 0;
}

.limit-row-value {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.limit-row-value b {
  color: var(--text);
  font-weight: 600;
}

.limit-input {
  width: 64px;
  padding: 2px 6px;
  font-size: 12px;
  text-align: right;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
}

/* Inside the settings cards the lists grow with their content — the 240px
   scroll cap only makes sense inside the small modals. */
.settings-card .tag-manage-list {
  max-height: none;
  overflow: visible;
  margin-bottom: 8px;
}

/* Rounded, design-system controls for everything inside the settings cards —
   outside a .modal these inputs/selects would otherwise render with the
   browser's default square chrome. */
.settings-card input[type="text"],
.settings-card input[type="password"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

.settings-card input[type="color"] {
  width: 34px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  background: var(--bg);
  flex-shrink: 0;
}

.settings-card select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

.settings-row-actions {
  white-space: nowrap;
}

.settings-row-actions .btn + .btn {
  margin-left: 6px;
}

.settings-table-wrap {
  overflow-x: auto;
}

/* База — .data-table (общие правила); здесь только отличие: чуть уже
   горизонтальные отступы, т.к. в таблице много колонок с действиями. */
.settings-users-table th,
.settings-users-table td {
  padding: 8px 10px;
}

.settings-user-perm-row td {
  background: var(--bg-soft);
  border-radius: 10px;
}

.settings-perm-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-activity-cell {
  text-align: center;
}

/* Activity dot: green — online now, red — logged in before but away,
   grey — never logged in. */
.activity-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.activity-dot.online { background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.18); }
.activity-dot.offline { background: #c14a34; }
.activity-dot.never { background: var(--border-strong, #c9c4ba); }

.dictionary-builtin-note {
  font-size: 10.5px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------------- Знания ---------------- */
.kn-layout { padding: 24px 28px; max-width: 1080px; margin: 0 auto; }
/* Экраны Плана развития тянутся на всю ширину (как Задачи) — отступы даёт сам
   .content (32px 48px), внутренняя обёртка без max-width и доп. паддинга. */
.content.dp-mode .kn-layout { max-width: none; margin: 0; padding: 0; }
.kn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kn-head h1 { margin: 0; font-size: 22px; }
.kn-head-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }
.kn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.kn-id-search { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.kn-id-search .icon svg { width: 14px; height: 14px; color: var(--text-muted); }
.kn-id-search input { border: none; outline: none; background: transparent; width: 110px; font: inherit; font-size: 13px; color: var(--text); }
.fchip-btn { background: var(--bg-deep); border: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.fchip-btn:hover { background: var(--border); }
/* Включённый переключатель-чип (Проект: с/без, Назначенные мне) */
.fchip-btn.on { background: var(--accent); color: var(--bg); }
.fchip-btn.on:hover { background: var(--accent); opacity: 0.88; }
.kn-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; box-shadow: var(--shadow-xs); }
.kn-group-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-head); font-size: 13px; font-weight: 600; }
.kn-group-count { color: var(--text-secondary); font-weight: 400; }
.kn-topic-chip { display: inline-flex; align-items: center; gap: 7px; }
.kn-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 130px 118px 30px 74px 30px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--hair); cursor: pointer; }
.kn-row:hover { background: var(--bg-soft); }
.kn-id { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-muted); }
.kn-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.kn-prod { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-badge { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; justify-self: start; }
.kn-date { font-size: 12px; color: var(--text-muted); }
.kn-row .task-action-btn { visibility: hidden; }
.kn-row:hover .task-action-btn { visibility: visible; }
/* Сайдбар Знаний: каретка сворачивания ветки тематики (стрелка — только у
   родителей; spacer выравнивает листья). */
.task-list-item .caret { width: 12px; flex-shrink: 0; color: var(--text-muted); font-size: 10px; cursor: pointer; transition: transform 0.15s; }
.task-list-item .caret.collapsed { transform: rotate(-90deg); }
.task-list-item .caret.spacer { visibility: hidden; cursor: default; }

/* Модалка знания (#kn-modal) — весь язык наследуется от tmodal (сетка свойств,
   секции, Quill); ниже только специфичные для знания элементы. */
.kn-modal-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.kn-modal-problem { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.kn-modal-problem:hover, .kn-modal-problem:focus { border-color: var(--border); background: var(--bg); outline: none; }
.kn-problem-view { white-space: pre-wrap; font-size: 14px; }
.kn-combo-wrap { position: relative; display: block; }
.kn-combo-wrap .combo-btn { max-width: 100%; }
#kn-modal .combo-btn:disabled { cursor: default; }
#kn-modal .combo-btn:disabled .combo-caret { visibility: hidden; }
.kn-ticket-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.kn-ticket-row input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.kn-ticket-row input[data-url] { flex: 2; }
.kn-ticket-row input[data-label] { flex: 1; }
.kn-ticket-view { margin-bottom: 5px; font-size: 14px; }
.kn-ticket-view a, .kn-article-link { color: var(--accent-link); }
.kn-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kn-modal-actions .kn-modal-actions-sp { flex: 1; }
.kn-delete-error { color: #c14a34; font-size: 12px; margin-top: 6px; }
/* Подтверждение удаления открывается ПОВЕРХ модалки знания. */
#kn-delete-modal { z-index: 60; }

/* ============================================================
   Патч дизайн-ревью 07.2026 (решения 01–07). Позже по каскаду —
   переопределяет базовые правила выше.
   ============================================================ */

/* --- 05: оливковое выделение (токены — в оба блока тем) --- */
:root {
  --sel-bg: #f2f1e1;
  --sel-mark: #707c3f;
}
:root[data-theme="dark"] {
  --sel-bg: #2e2d22;
  --sel-mark: #a8b378;
}

/* Активные пункты деревьев/списков сайдбара вместо нейтрального
   --accent-soft: оливковый фон + левая метка. */
.tree-node-row.active,
.okr-row.active,
.task-list-item.active {
  background: var(--sel-bg);
  box-shadow: inset 2px 0 0 var(--sel-mark);
  color: var(--text);
  font-weight: 600;
}

/* --- 02: знаковые статусы --- */
.task-status-badge .status-mark {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  display: inline-block;
}
.initiative-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.initiative-status-badge .status-mark {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  display: inline-block;
}

/* --- 03: прогресс OKR — 10 делений --- */
.okr-ticks {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.okr-ticks i {
  width: 11px;
  height: 6px;
  border-radius: 2px;
  background: var(--bg-deep);
}
.okr-ticks i.on { background: currentColor; }
.okr-tick-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  margin-left: 8px;
}

/* --- 04: «гроссбух» — моно для машинного --- */
.mono-id {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.kb-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--sel-mark);
  flex-shrink: 0;
}
/* В крупном заголовке статьи номер чуть крупнее и с отступом. */
.article-head h1 .kb-num {
  font-size: 15px;
  margin-right: 6px;
}


/* --- 06: пустые состояния с волной --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state .es-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --- 07: одна сигнатура движения --- */
@keyframes of-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .of-enter { animation: of-enter 160ms cubic-bezier(0.16, 1, 0.3, 1); }
}

/* ---------------- Обучение (learning): курсы, конструктор, раннер ---------------- */

/* Список курсов — ряд в kn-card: чип источника, название+мета, статус,
   аватар, дата, действия. */
.lrn-row { grid-template-columns: 56px minmax(0, 1fr) auto auto 30px 74px auto; }
.lrn-row-inprogram { opacity: 0.82; }
/* Табы Все/Доступные/Завершённые — сегментированный контрол дизайн-системы. */
.lrn-tests-seg { margin: 4px 0 14px; }
.lrn-tests-seg .lrn-seg-count { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.6; font-weight: 600; }
.lrn-tests-seg button.on .lrn-seg-count { opacity: 0.85; }
/* Иконка-чип повтора: остаток попыток. */
.lrn-retry {
  display: inline-flex; align-items: center; gap: 3px; justify-self: start; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--accent-link);
  background: rgba(37, 99, 184, 0.10); border-radius: 999px; padding: 2px 8px;
}
.lrn-retry svg { width: 12px; height: 12px; }
/* Метка «Курс» у теста, входящего в курс. */
.lrn-course-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle;
  font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-deep); border-radius: 6px; padding: 1px 7px;
}
.lrn-course-tag svg { width: 11px; height: 11px; }
.lrn-row-assign { margin-top: 2px; }
.lrn-assign-sum { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.lrn-assign-sum svg { width: 12px; height: 12px; }
.lrn-done-badge { color: #2e7d4f; background: rgba(46, 158, 91, 0.14); }

/* ============ Опросы (Обучение → Опросы) ============ */
.poll-group { margin-bottom: 16px; }
.poll-group-title { padding-left: 2px; }
/* Строка опроса в kn-card. */
.poll-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--hair); cursor: pointer; }
.poll-row:first-child { border-top: none; }
.poll-row:hover { background: var(--bg-soft); }
.poll-row .row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.poll-row .row-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.poll-row .row-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-row .row-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.poll-row .btn[data-edit], .poll-row .btn[data-assign] { visibility: hidden; }
.poll-row:hover .btn[data-edit], .poll-row:hover .btn[data-assign] { visibility: visible; }
.poll-row .btn[data-assign]:disabled { visibility: hidden; }
/* Тип-чипы опросов (данные-цвет). */
.poll-type-chip { flex: none; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.poll-type-general { background: rgba(143, 138, 125, 0.16); color: var(--text-secondary); }
.poll-type-enps { background: rgba(37, 99, 184, 0.13); color: var(--accent-link); }
.poll-type-r360 { background: rgba(46, 158, 91, 0.15); color: #2e7d4f; }
.poll-type-self { background: rgba(192, 125, 10, 0.15); color: #9c6d10; }
:root[data-theme="dark"] .poll-type-r360 { color: #7fcf9e; }
:root[data-theme="dark"] .poll-type-self { color: #e3bd66; }
.poll-link-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--accent-link); background: rgba(37, 99, 184, 0.09); border-radius: 6px; padding: 1px 7px; }
.poll-link-badge svg { width: 11px; height: 11px; }

/* ---- Модалка выбора типа ---- */
.poll-type-modal-inner { width: 480px; }
.poll-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.poll-type-card { text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-family: inherit; }
.poll-type-card:hover { border-color: var(--accent-link); background: var(--bg-soft); }
.poll-type-card b { font-size: 14px; }
.poll-type-card small { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.poll-type-card .poll-type-chip { align-self: flex-start; }

/* ---- Редактор опроса ---- */
.poll-editor { width: 680px; max-width: 100%; max-height: 88vh; overflow-y: auto; }
.poll-desc-val { flex-direction: column; align-items: stretch; }
.poll-charcount { font-size: 11px; color: var(--text-muted); text-align: right; }
.poll-props .switch { margin: 0; }
.poll-link-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; font-weight: 500;
  color: var(--accent-link); background: rgba(37, 99, 184, 0.08); border: 1px dashed rgba(37, 99, 184, 0.35);
  border-radius: 8px; padding: 8px 11px; margin: 8px 0 2px; }
.poll-link-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.poll-add-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.poll-add-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--accent-link); background: none; border: none; cursor: pointer; padding: 4px 0; font-family: inherit; }
.poll-add-link svg { width: 13px; height: 13px; }
.poll-add-link:hover { text-decoration: underline; }
.poll-empty-hint { font-size: 12.5px; color: var(--text-muted); padding: 10px 0; }

.poll-qblock { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); padding: 12px 14px; margin-top: 10px; }
.poll-qhead { display: flex; align-items: center; gap: 8px; }
.poll-qnum { flex: none; font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.poll-qtext { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 13px; padding: 5px 9px; }
.poll-kind-select { flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 12px; padding: 5px 8px; color: var(--text-secondary); }
.poll-qbody { margin-top: 8px; }
.poll-answer-hint { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.poll-opt-row { display: flex; align-items: center; gap: 8px; }
.poll-opt-text { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 12.5px; padding: 5px 9px; }
.poll-opt-score { flex: none; width: 66px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 12.5px; padding: 5px 8px; text-align: center; }
.poll-opt-x { flex: none; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.poll-opt-x:hover { color: var(--red); }

.poll-section { border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg-deep); padding: 12px 14px; margin-top: 12px; }
.poll-section-head { display: flex; align-items: center; gap: 8px; }
.poll-section-tag { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); }
.poll-section-title { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 13px; font-weight: 600; padding: 5px 9px; }
.poll-section-desc { width: 100%; border: 1px solid transparent; border-radius: 8px; background: none;
  font: inherit; font-size: 12px; color: var(--text-secondary); padding: 5px 0; margin-top: 6px; }
.poll-section-desc:hover, .poll-section-desc:focus-visible { border-color: var(--border); background: var(--bg); outline: none; }
.poll-section-questions { }
.poll-add-in-section { margin-top: 8px; }

/* ---- Просмотр / прохождение опроса ---- */
.poll-view { padding: 24px 28px; max-width: 760px; margin: 0 auto; }
.poll-view-hero { padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.poll-view-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.poll-view-hero h1 { font-size: 22px; letter-spacing: -0.02em; margin: 8px 0 6px; }
.poll-view-hero p { color: var(--text-secondary); font-size: 13.5px; }
.poll-view-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.poll-view-chip { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: var(--bg-deep); border-radius: 999px; padding: 3px 11px; }
.poll-view-sec { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); padding: 18px 0 6px; display: flex; flex-direction: column; gap: 3px; }
.poll-view-sec-desc { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-secondary); }
.poll-view-q { padding: 14px 0; border-top: 1px solid var(--hair); }
.poll-view-q h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.poll-view-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.poll-view-opt { font-size: 12.5px; color: var(--text-secondary); background: var(--bg-deep); border-radius: 8px; padding: 5px 11px; }

/* Шкала eNPS 0–10 */
.poll-scale10 { display: flex; gap: 5px; flex-wrap: wrap; }
.poll-scale-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
.poll-scale-btn.crit { border-color: rgba(193, 74, 52, 0.4); }
.poll-scale-btn.neu { border-color: rgba(192, 125, 10, 0.4); }
.poll-scale-btn.prom { border-color: rgba(46, 158, 91, 0.4); }
.poll-scale-btn.sel { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.poll-scale10.preview .poll-scale-btn { width: 28px; height: 28px; font-size: 11px; cursor: default; }
.poll-scale-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* Шкала Ликерта 1–5 + NA */
.poll-likert { display: flex; gap: 6px; flex-wrap: wrap; }
.poll-lk { border: 1px solid var(--border); border-radius: 9px; background: var(--bg); padding: 7px 12px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; min-width: 64px; font-family: inherit; }
.poll-lk b { font-size: 14px; font-weight: 600; color: var(--text); }
.poll-lk small { font-size: 9.5px; color: var(--text-muted); text-align: center; line-height: 1.2; }
.poll-lk.na { background: var(--bg-deep); }
.poll-lk.sel { border-color: var(--accent-link); background: rgba(37, 99, 184, 0.08); }
.poll-likert.preview .poll-lk { min-width: 34px; padding: 6px 9px; cursor: default; }

/* Прохождение */
.poll-run-subject { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.poll-run-q { padding: 16px 0; border-top: 1px solid var(--hair); }
.poll-run-qnum { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.poll-run-qtext { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.poll-run-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-run-opt { text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  padding: 10px 14px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--text); }
.poll-run-opt:hover { background: var(--bg-soft); }
.poll-run-opt.sel { border-color: var(--accent-link); background: rgba(37, 99, 184, 0.07); }
.poll-run-text { width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); font: inherit; font-size: 13px; padding: 10px 12px; resize: vertical; }
.poll-run-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.poll-run-progress { font-size: 12.5px; color: var(--text-muted); }
.poll-run-foot .btn.primary { margin-left: auto; }
.poll-run-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; }
.poll-run-done-ic { color: var(--green); }
.poll-run-done-ic svg { width: 44px; height: 44px; }
.poll-run-done b { font-size: 17px; }

.poll-assign { width: 480px; max-width: 100%; }

/* ---- Результаты опроса ---- */
:root { --poll-self: #e0559f; --poll-peers: #3bb371;
  --joh-open: #8fd6ad; --joh-blind: #f4e2b4; --joh-hidden: #f3d59a; --joh-unknown: #f2bcd2; }
:root[data-theme="dark"] { --poll-self: #e56fae; --poll-peers: #5cc48c;
  --joh-open: #3f6f54; --joh-blind: #5c5230; --joh-hidden: #5c4c2a; --joh-unknown: #5c3648; }

.poll-view-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.poll-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.poll-results-grid.single { grid-template-columns: minmax(0, 460px); }
@media (max-width: 900px) { .poll-results-grid { grid-template-columns: 1fr; } }
.poll-results .panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.poll-results .panel-head { padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 600; }
.poll-results .panel-body { padding: 16px; }
.poll-results .pct { display: inline-flex; align-items: center; font-weight: 600; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.poll-results .pct.lo { background: rgba(193, 74, 52, 0.14); color: var(--red); }
.poll-results .pct.mid { background: rgba(192, 125, 10, 0.15); color: var(--amber); }
.poll-results .pct.hi { background: rgba(46, 158, 91, 0.15); color: var(--green); }

.poll-radar-legend { display: flex; gap: 18px; justify-content: center; margin-top: 6px; font-size: 12px; flex-wrap: wrap; }
.poll-radar-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.poll-radar-legend i { width: 11px; height: 11px; border-radius: 50%; }

.poll-enps-big { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.poll-enps-score { font-size: 20px; }
.poll-enps-sub { color: var(--text-muted); font-size: 13px; }
.poll-enps-bars { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.poll-enps-barrow, .poll-gen-barrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.poll-enps-barlabel { width: 150px; flex: none; color: var(--text-secondary); }
.poll-enps-bartrack, .poll-gen-bartrack { flex: 1; height: 14px; background: var(--bg-deep); border-radius: 6px; overflow: hidden; }
.poll-enps-barfill, .poll-gen-barfill { display: block; height: 100%; border-radius: 6px; }
.poll-gen-barfill { background: var(--accent-link); }
.poll-enps-barrow b, .poll-gen-barrow b { width: 66px; text-align: right; font-variant-numeric: tabular-nums; }

.poll-gen-bars { display: flex; flex-direction: column; gap: 8px; }
.poll-gen-barlabel { width: 170px; flex: none; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-gen-texts { display: flex; flex-direction: column; gap: 6px; }
.poll-gen-text { font-size: 12.5px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 11px; }

.poll-subject-picker { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.poll-subject-card { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); padding: 10px 14px; cursor: pointer; font-family: inherit; font-size: 13px; }
.poll-subject-card:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.poll-subject-card span { flex: 1; font-weight: 600; }
.poll-subject-card svg { width: 15px; height: 15px; color: var(--text-muted); }

/* Окно Джохари */
.johari { display: grid; grid-template-columns: 96px 1fr 1fr; gap: 0; }
.joh-corner { }
.joh-colh { text-align: center; font-size: 12px; font-weight: 600; padding: 8px; }
.joh-rowh { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 6px; color: var(--text-secondary); }
.joh-cell { padding: 14px; min-height: 108px; border: 2px solid var(--bg); }
.joh-cell h4 { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; color: #23324a; }
.joh-cell p { font-size: 10.5px; opacity: 0.85; color: #23324a; }
.joh-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.joh-tag { font-size: 10.5px; font-weight: 600; background: rgba(255, 255, 255, 0.7); color: #23324a; border-radius: 6px; padding: 2px 7px; }
.joh-open { background: var(--joh-open); }
.joh-blind { background: var(--joh-blind); }
.joh-hidden { background: var(--joh-hidden); }
.joh-unknown { background: var(--joh-unknown); }
:root[data-theme="dark"] .joh-cell h4, :root[data-theme="dark"] .joh-cell p { color: #eaeaea; }
:root[data-theme="dark"] .joh-tag { background: rgba(0, 0, 0, 0.28); color: #eaeaea; }

/* ============ Курсы (наборы тестов) ============ */
.program-tests { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.program-test-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--hair); }
.program-test-row:first-child { border-top: none; }
.program-test-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-deep);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.program-test-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.program-test-title { font-size: 13.5px; font-weight: 600; }
.program-test-meta { font-size: 12px; color: var(--text-muted); }
.program-test-row .chip { flex: none; }

.program-editor { width: 600px; max-width: 100%; max-height: 88vh; overflow-y: auto; }
.program-test-picker { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.program-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.program-pick-row:hover { background: var(--bg-soft); }
.program-pick-row input { flex: none; }
.program-pick-title { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-pick-meta { flex: none; font-size: 11.5px; color: var(--text-muted); }

/* ============ План развития ============ */
.dp-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.dp-goal { display: flex; gap: 12px; padding: 14px; border-top: 1px solid var(--hair); align-items: flex-start; }
.dp-goal:first-child { border-top: none; }
.dp-check { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 6px; border: 2px solid var(--border-strong);
  background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.dp-check.done { background: var(--green); border-color: var(--green); }
.dp-check svg { width: 14px; height: 14px; }
.dp-goal-main { flex: 1; min-width: 0; }
.dp-goal-title { font-size: 14px; font-weight: 600; }
.dp-goal-title.done { text-decoration: line-through; color: var(--text-muted); }
.dp-goal-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }
.dp-link { font-weight: 600; color: var(--accent-link); background: rgba(37, 99, 184, 0.09); border-radius: 6px; padding: 2px 8px; }
.dp-bar { height: 6px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; margin-top: 9px; max-width: 260px; }
.dp-bar i { display: block; height: 100%; background: var(--accent-link); border-radius: 999px; }
.dp-goal-actions { display: flex; gap: 4px; flex: none; }
.devgoal-editor { width: 520px; max-width: 100%; }
.devgoal-editor input[type="range"] { accent-color: var(--accent-link); }

/* ============ Обзор (дашборд обучения) ============ */
/* Прогресс-чип общего назначения (порог: <40 красный, <70 янтарь, ≥70 зелёный). */
.pct { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; font-variant-numeric: tabular-nums; }
.pct.lo { background: rgba(193, 74, 52, 0.14); color: var(--red); }
.pct.mid { background: rgba(192, 125, 10, 0.15); color: var(--amber); }
.pct.hi { background: rgba(46, 158, 91, 0.15); color: var(--green); }
.lrn-ov-seg { margin-left: auto; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ov-kpi { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 14px 16px; }
.ov-kpi-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.ov-kpi-val { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ov-kpi-val.bad { color: var(--red); }
.ov-kpi-of { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.ov-kpi-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; margin-bottom: 16px; }
.ov-panel-head { padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 600; }
.ov-panel-body { padding: 10px 16px 14px; }
.ov-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.ov-row:first-child { border-top: none; }
.ov-row-title { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row-meta { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ov-bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12.5px; }
.ov-bar-name { width: 140px; flex: none; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-bar-track { flex: 1; height: 14px; background: var(--bg-deep); border-radius: 6px; overflow: hidden; }
.ov-bar-fill { display: block; height: 100%; border-radius: 6px; }
.ov-bar-row b { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.ov-team-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 70px 70px 70px 60px 90px; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--hair); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ov-team-row:first-child { border-top: none; }
.ov-team-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.ov-team-name { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-overdue { color: var(--red); font-weight: 600; }

/* ============ Каскадные переопределения для форм опросов/курсов/целей ============
   Глобальные `.modal input/select/label` (специфичность выше одиночного класса)
   перебивают лёгкие стили — эти правила поднимают специфичность через `.tmodal`
   и живут ПОЗЖЕ по каскаду. Без них: .switch ломается в display:block, инпуты и
   селекты растягиваются на всю ширину и «разъезжают» окно (см. CLAUDE.md). */
.tmodal input.tmodal-titlefield {
  width: 100%; border: none; border-bottom: 1px solid var(--hair); background: none; border-radius: 0;
  padding: 3px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--text);
}
.tmodal input.tmodal-titlefield:focus-visible { outline: none; border-bottom-color: var(--accent-link); }
/* Switch (label) — глобальный .modal label делает display:block и добавляет margin. */
.tmodal .switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; width: auto; }
.tmodal .switch-text { display: inline; margin: 0; font-size: 11.5px; color: var(--text-secondary); }
.tmodal .switch.on .switch-text { color: var(--text); }
/* Вкл-состояние для class-driven switch (в формах опросов/целей нет скрытого
   <input>, поэтому нужны правила на .switch.on — базовые заточены под :checked). */
.switch.on .switch-track { background: var(--accent); border-color: var(--accent); }
.switch.on .switch-track .switch-thumb { transform: translateX(13px); }
/* Инпуты конструктора вопросов. */
.tmodal textarea.poll-qtext { flex: 1 1 auto; min-width: 0; width: auto; border: 1px solid var(--border);
  background: var(--bg); border-radius: 8px; padding: 6px 9px; font-size: 13px; font-family: inherit;
  line-height: 1.45; resize: vertical; min-height: 34px; }
.tmodal textarea.poll-section-desc { width: 100%; border: 1px solid transparent; background: none; border-radius: 8px;
  padding: 5px 0; margin-top: 6px; font-size: 12px; font-family: inherit; color: var(--text-secondary); resize: vertical; min-height: 26px; }
.tmodal textarea.poll-section-desc:hover, .tmodal textarea.poll-section-desc:focus-visible {
  border-color: var(--border); background: var(--bg); padding: 5px 8px; outline: none; }
.tmodal input.poll-section-title { flex: 1; min-width: 0; width: auto; border: 1px solid var(--border);
  background: var(--bg); border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 600; }
.tmodal input.poll-opt-text { flex: 1; min-width: 0; width: auto; border: 1px solid var(--border);
  background: var(--bg); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; }
.tmodal input.poll-opt-score { width: 64px; flex: none; border: 1px solid var(--border);
  background: var(--bg); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; text-align: center; }
.tmodal input.poll-section-desc { width: 100%; border: 1px solid transparent; background: none;
  border-radius: 8px; padding: 5px 0; font-size: 12px; color: var(--text-secondary); }
.tmodal input.poll-section-desc:hover, .tmodal input.poll-section-desc:focus-visible {
  border-color: var(--border); background: var(--bg); padding-left: 8px; outline: none; }
.tmodal select.poll-kind-select { width: auto; flex: none; max-width: 160px; border: 1px solid var(--border);
  background: var(--bg); border-radius: 8px; padding: 5px 8px; font-size: 12px; color: var(--text-secondary); }
/* Лёгкие «линейные» контролы (селект периода, привязка цели). */
.tmodal select.tmodal-input, .tmodal input.tmodal-input { width: auto; }
.tmodal select.tmodal-input.line, .tmodal input.tmodal-input.line {
  border: 1px solid var(--border); background: var(--bg); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
/* Строки чекбоксов выбора тестов (программа) — .modal label ломает в block. */
.tmodal label.program-pick-row { display: flex; margin: 0; font-size: inherit; color: inherit; }
.tmodal .program-test-picker input[type="checkbox"] { width: auto; flex: none; }
/* Combo-кнопки в tmodal (аудитория, период, дата) — стиль дизайн-системы
   `.combo-btn`: безрамочные, фон/рамка только на hover (как свойства в модалке
   задачи). Раньше .selpill не имел базового CSS → рендерился дефолтной серой
   кнопкой «не по дизайн-системе». */
.tmodal .selpill {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  background: none; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px;
  color: var(--text); cursor: pointer; max-width: 100%;
}
.tmodal .selpill:hover { background: var(--bg-soft); }
.tmodal .selpill:focus-visible { outline: none; border-color: var(--accent-link); background: var(--bg-soft); }
.tmodal .selpill svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.tmodal .selpill.pill-date .field-date-btn-val .muted, .tmodal .selpill .muted { color: var(--text-muted); }
/* Подпись-подсказка рядом с контролами («включительно») — серая, как названия. */
.mini-hint { font-size: 11.5px; color: var(--text-muted); }
.lrn-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lrn-row-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrn-src-chip {
  display: inline-block; justify-self: start; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--bg-deep);
  color: var(--text-secondary); white-space: nowrap;
}
.lrn-src-chip.lrn-src-ai { color: #2563b8; background: rgba(37, 99, 184, 0.12); }
.lrn-draft-badge { color: #8f8a7d; background: rgba(143, 138, 125, 0.16); }
.lrn-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lrn-row .btn[data-take] { visibility: hidden; }
.lrn-row:hover .btn[data-take] { visibility: visible; }
.lrn-no-attempts { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Конструктор: таймер/попытки — селект + число в одной строке. */
.lrn-timer-val { display: flex; align-items: center; gap: 8px; }
.lrn-timer-value { display: inline-flex; align-items: center; gap: 5px; }
.lrn-timer-value input[type="number"] { width: 64px; }
.lrn-timer-unit { font-size: 12px; color: var(--text-muted); }

/* Список вопросов в конструкторе. */
.lrn-questions-list { display: flex; flex-direction: column; }
.lrn-question-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 28px 28px 28px;
  gap: 8px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--hair);
}
.lrn-question-row:first-child { border-top: none; }
.lrn-q-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: var(--bg-deep);
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
}
.lrn-q-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.lrn-q-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lrn-question-row .task-action-btn { visibility: hidden; }
.lrn-question-row:hover .task-action-btn { visibility: visible; }

/* Модалка вопроса — поверх конструктора курса (backdrop z-index 50). */
.lrn-question-backdrop { z-index: 60; }
.modal.tmodal.lrn-question-modal { width: 540px; }
.lrn-question-text {
  width: 100%; border: none; outline: none; resize: vertical; background: transparent;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text);
  padding: 4px 0 10px; border-bottom: 1px solid var(--hair); margin-bottom: 10px;
}
.lrn-multiple-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text-secondary); margin-bottom: 12px; cursor: pointer;
}
.lrn-options-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 0 2px 4px;
}
.lrn-options-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lrn-option-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; gap: 8px; align-items: center; }
.lrn-opt-score { text-align: center; }

/* AI-модалка: выбранные статьи и счётчик вопросов. */
.lrn-ai-articles { display: flex; flex-direction: column; }
.lrn-ai-article-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px;
  align-items: center; padding: 6px 2px; border-top: 1px solid var(--hair);
}
.lrn-ai-article-row:first-child { border-top: none; }
.lrn-ai-article-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.lrn-ai-article-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.lrn-ai-article-count input { width: 58px; text-align: center; }
.lrn-ai-total { font-size: 12.5px; color: var(--text-secondary); padding: 8px 2px 0; font-weight: 600; }
.lrn-ai-total-over { color: #c14a34; }
.lrn-ai-status {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-soft); font-size: 13px;
  color: var(--text-secondary);
}

/* Раннер прохождения — в контент-зоне. */
.lrn-runner { padding: 28px; max-width: 760px; margin: 0 auto; }
.lrn-runner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.lrn-runner-progress { margin: 4px 0 0; font-size: 21px; }
.lrn-timer-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 500;
}
.lrn-timer-chip .icon svg { width: 16px; height: 16px; }
.lrn-timer-low { color: #c14a34; border-color: rgba(193, 74, 52, 0.45); }
.lrn-runner-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); padding: 22px 24px; margin-bottom: 16px;
}
.lrn-runner-question { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.lrn-runner-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.lrn-runner-options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.lrn-option {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
}
.lrn-option:hover { background: var(--bg-soft); }
.lrn-option.selected { border-color: #2563b8; background: rgba(37, 99, 184, 0.07); }
.lrn-option-mark {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 1.6px solid var(--border-strong, var(--border)); background: var(--bg);
}
.lrn-option-mark.square { border-radius: 5px; }
.lrn-option.selected .lrn-option-mark,
.lrn-option-mark.checked { border-color: #2563b8; background: #2563b8; box-shadow: inset 0 0 0 3px var(--bg); }
.lrn-runner-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Экран итогов. */
.lrn-result-head { text-align: center; padding: 18px 0 26px; }
.lrn-result-head h1 { margin: 6px 0 14px; font-size: 21px; }
.lrn-result-score { font-size: 42px; font-weight: 500; font-family: 'Geist Mono', monospace; margin-top: 14px; }
.lrn-result-score .icon svg { width: 46px; height: 46px; color: #2e9e5b; }
.lrn-result-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 14px; }
.lrn-result-expired { color: #c07d0a; }
.lrn-breakdown-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); padding: 14px 16px; margin-bottom: 10px;
}
.lrn-breakdown-q {
  display: flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: 14px; margin-bottom: 10px;
}
.lrn-breakdown-gained { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 13px; }
.lrn-breakdown-opt {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: 8px; font-size: 13.5px; color: var(--text-secondary);
}
.lrn-breakdown-opt.correct { background: rgba(46, 158, 91, 0.09); color: var(--text); }
.lrn-breakdown-opt.wrong { background: rgba(193, 74, 52, 0.09); }
.lrn-breakdown-score { margin-left: auto; font-size: 12px; font-weight: 600; color: #2e9e5b; }

/* Таблица результатов. */
/* База — .data-table; здесь только отличия: крупнее шрифт и шире отступы. */
.lrn-results-table { font-size: 13.5px; }
.lrn-results-table th { padding: 8px 14px; }
.lrn-results-table td { padding: 9px 14px; }
.lrn-results-user { display: flex; align-items: center; gap: 8px; }
.lrn-hidden-score { color: var(--text-muted); font-size: 12.5px; }
.lrn-expired-chip { color: #c07d0a; }
.lrn-results-empty { text-align: center; color: var(--text-muted); padding: 22px 14px; }

/* Настройки → Обучение (AI): подписи полей ключей провайдеров. */
.settings-ai-key-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; color: var(--text-muted); margin: 10px 0 4px;
}

/* Диапазон «от–до» вариантов ответа в AI-модалке. */
.lrn-range-val { display: flex; align-items: center; gap: 6px; }
.lrn-range-label { font-size: 12px; color: var(--text-muted); }

/* Кнопка «Кому назначен» — невидимый контроль в сетке свойств tmodal. */
.lrn-assign-btn {
  font: inherit; font-size: 13.5px; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 4px 8px;
  cursor: pointer; text-align: left;
}
.lrn-assign-btn:hover { border-color: var(--border); background: var(--bg-soft); }

/* Перегенерация AI-вопроса: вращение иконки на время запроса. */
@keyframes lrn-spin { to { transform: rotate(360deg); } }
.lrn-regen-spin { visibility: visible !important; }
.lrn-regen-spin .icon svg { animation: lrn-spin 0.9s linear infinite; }

/* Экран курса (интро перед прохождением). */
.lrn-back-link {
  font: inherit; font-size: 13px; color: var(--text-muted); background: none;
  border: none; padding: 0; margin-bottom: 14px; cursor: pointer;
}
.lrn-back-link:hover { color: var(--accent-link); }
.lrn-intro-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); padding: 22px 24px; margin-bottom: 14px;
}
.lrn-intro-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lrn-intro-author { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.lrn-intro-title { margin: 0 0 6px; font-size: 22px; }
.lrn-intro-desc { margin: 0 0 14px; color: var(--text-secondary); font-size: 14px; white-space: pre-wrap; }
.lrn-intro-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.lrn-intro-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-deep); color: var(--text-secondary); white-space: nowrap;
}
.lrn-intro-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lrn-attempts-left { font-size: 12.5px; color: var(--text-muted); }
.lrn-intro-history-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.lrn-intro-attempt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px;
  color: var(--text-secondary);
}

/* ==================== Команды → Структура ==================== */

.dept-color-dot {
  width: 10px; height: 10px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1); flex-shrink: 0;
}

.team-dept-count { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* Настройки → Департаменты: вложенный список с карандашом на строке. */
.department-row-name { flex: 1; font-size: 13px; }

.dept-band {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-head); border-radius: 10px 10px 0 0; padding: 10px 16px;
  border: 1px solid var(--border); border-bottom: none;
}
.dept-band-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.dept-band-cnt { font-size: 12px; color: var(--text-secondary); }

.org-wrap { border: 1px solid var(--border); border-radius: 0 0 10px 10px; background: var(--bg); overflow-x: auto; }
.org-canvas-flow { position: relative; padding: 24px; }

/* Пирамида: классический CSS-tree (вложенные ul/li, table/table-cell) —
   центрирование и симметрия получаются из самой раскладки, коннекторы —
   псевдоэлементы, а не JS-позиционирование. Соседние узлы делят одну
   горизонтальную «шину» (li::before/::after), от родителя до неё идёт
   вертикальный штрих (ul::before). Единственный ребёнок — без коннекторов
   (:only-child), т.к. рисовать нечего соединять. */
.team-org-tree, .team-org-tree ul {
  display: table; margin: 0 auto; padding: 0; list-style: none; border-collapse: separate; position: relative;
}
.team-org-tree li {
  display: table-cell; vertical-align: top; text-align: center; padding: 0 12px; position: relative;
}
.team-org-tree > li { padding-top: 0; }
.team-org-tree ul { padding-top: 28px; }
.team-org-tree li > .org-card,
.team-org-tree li > .org-card-placeholder { margin: 0 auto; }
/* li::before/after — «шина» между соседями + короткий штрих вниз к каждой
   карточке. li.top совпадает с верхом самой карточки (весь 28px-отступ —
   это padding-top родительского ul, не самой li), поэтому блок нужно поднять
   НАД li (top: -14px), а не растянуть вниз от неё — иначе штрих уходит на
   28px внутрь карточки и виден сквозь её полупрозрачную заливку. Заканчивается
   строго на границе карточки (0 внахлёст), не залезая на неё. */
.team-org-tree li::before,
.team-org-tree li::after {
  content: ''; position: absolute; top: -14px; width: 50%; height: 14px;
  border-top: 1px solid var(--border-strong);
}
.team-org-tree li::before { right: 50%; }
.team-org-tree li::after { left: 50%; border-left: 1px solid var(--border-strong); }
.team-org-tree li:only-child { padding-top: 0; }
.team-org-tree li:only-child::before,
.team-org-tree li:only-child::after { display: none; }
.team-org-tree li:first-child::before,
.team-org-tree li:last-child::after { border-top: none; }
.team-org-tree li:last-child::before { border-right: 1px solid var(--border-strong); border-radius: 0 6px 0 0; }
.team-org-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* Штрих от родителя до «шины» — вторая половина того же 28px-отступа
   (см. выше), заканчивается точно там, где начинается li::before/::after. */
.team-org-tree ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 1px solid var(--border-strong); width: 0; height: 14px;
}
.team-org-reports { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.org-card-placeholder { color: var(--text-muted); }
.org-card-placeholder-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--text-muted);
}
.org-card-placeholder-icon svg { width: 16px; height: 16px; }

.org-card {
  position: relative; z-index: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  padding: 9px 10px; display: flex; align-items: center; gap: 9px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); width: 220px; flex-shrink: 0;
}
.org-card:hover { border-color: var(--border-strong); }
.org-card.lead { border-color: var(--border-strong); }
.org-card.has-color { padding-left: 8px; }
.org-card .oc-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.org-card .oc-pos { font-size: 11px; color: var(--text-muted); }
.oc-sub-badge {
  position: absolute; right: -8px; bottom: -8px; background: var(--bg);
  border: 1px solid var(--border-strong); color: var(--text-secondary);
  border-radius: 999px; font-size: 9.5px; font-weight: 600; padding: 2px 6px;
}
.dept-tag { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-top: 3px; }
.dept-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ---- карточка сотрудника (поп-ап) ---- */

.emp-card-modal { width: 320px; padding: 0; overflow: hidden; }
.modal-close-x {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  border-radius: 8px; border: none; background: transparent; color: var(--text-muted);
  font-size: 14px; line-height: 1; cursor: pointer; z-index: 1;
}
.modal-close-x:hover { background: var(--bg-deep); color: var(--text); }
.emp-card-top {
  padding: 26px 20px 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center; border-bottom: 1px solid var(--hair);
}
.emp-card-name { font-size: 16.5px; font-weight: 600; margin-top: 10px; }
.emp-card-pos { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.emp-card-dept { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.emp-status { margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  font-weight: 600; padding: 3px 9px; border-radius: 8px;
}
.chip.st-work { background: rgba(46, 158, 91, 0.14); color: var(--green); }
.chip.st-vac { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.chip.st-sick { background: rgba(193, 74, 52, 0.13); color: var(--red); }
.chip.st-off { background: rgba(192, 125, 10, 0.14); color: var(--amber); }
.emp-card-body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 11px; }
.emp-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.emp-row .muted { color: var(--text-muted); }
.emp-row b { font-weight: 600; }
.emp-row .icon { width: 14px; height: 14px; color: var(--text-muted); }
.emp-sat { display: flex; gap: 14px; padding-top: 10px; border-top: 1px dashed var(--hair); margin-top: 4px; }
.emp-sat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.emp-sat-item svg { width: 17px; height: 17px; }
.emp-sat-item .hm-ric { stroke: var(--accent-link); fill: color-mix(in srgb, var(--accent-link) 22%, transparent); }
.emp-sat-item .hm-reye { fill: var(--accent-link); }
.emp-sat-item .hm-rmouth { stroke: var(--accent-link); }
.emp-sat-item b { font-size: 13px; }
.emp-sat-item span { font-size: 9.5px; color: var(--text-muted); text-align: center; }
.emp-sat-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; margin-top: 2px; }
.emp-sat-scope { font-size: 11.5px; color: var(--text-muted); text-align: center; padding-top: 8px; border-top: 1px dashed var(--hair); margin-top: 4px;
}

/* ---------------- Команды → График ---------------- */

.sched-month-nav { display: flex; align-items: center; gap: 6px; }
.sched-month-label { font-size: 13px; font-weight: 600; min-width: 130px; text-align: center; text-transform: capitalize; }
.sched-month-nav .btn.icon-only { padding: 3px 7px; display: inline-flex; align-items: center; justify-content: center; }
.sched-month-nav .btn.icon-only .icon svg { width: 13px; height: 13px; }
.sched-nav-prev .icon svg { transform: rotate(180deg); }

.sched-row-label {
  flex: 0 0 240px; /* уже, чем 660px у .gantt-task-label — тут только аватар+имя+чип */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.sched-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sched-pattern-chip {
  flex: none;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.sched-pattern-chip:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.sched-pattern-chip:disabled { cursor: default; opacity: 0.7; }

/* Тинты — та же палитра данных, что у .gantt-day-square.status-* (Проекты). */
.gantt-day-square.sched-work { background: var(--bg); border: 1px solid var(--hair); }
.gantt-day-square.sched-off { background: #efece6; }
.gantt-day-square.sched-vacation { background: #ccdcf3; }
.gantt-day-square.sched-sick { background: #f2cfc6; }
.gantt-day-square.sched-dayoff { background: #f0e0bd; }

:root[data-theme='dark'] .gantt-day-square.sched-work { background: var(--bg); border-color: var(--border); }
:root[data-theme='dark'] .gantt-day-square.sched-off { background: #2a2825; }
:root[data-theme='dark'] .gantt-day-square.sched-vacation { background: #2a3d5c; }
:root[data-theme='dark'] .gantt-day-square.sched-sick { background: #4e2a22; }
:root[data-theme='dark'] .gantt-day-square.sched-dayoff { background: #4d3d1e; }

/* Карточка сотрудника: «выходной» по паттерну — отдельно от «отгула»
   (.chip.st-off, уже занят амбером), нейтральный серый. */
.chip.st-weekend { background: rgba(143, 138, 125, 0.16); color: var(--text-secondary); }

/* Поповер бронирования отпуска/больничного/отгула и смены паттерна —
   .combo-pop даёт позиционирование/рамку/тень, здесь только раскладка. */
.sched-pop { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.sched-pop-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.sched-pop-row { display: flex; align-items: center; gap: 8px; }
.sched-pop-row label { font-size: 11.5px; color: var(--text-muted); flex: none; }
.sched-pop-row select,
.sched-pop-row input[type='date'] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
  background: var(--bg);
  color: var(--text);
}
.sched-pop-hint { font-size: 11px; color: var(--text-muted); }
.sched-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------------- Команды → Команда ---------------- */

.team-stat-table { min-width: 100%; }
.team-stat-row {
  display: grid;
  grid-template-columns: 240px 100px 130px 140px 90px 90px 150px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.team-stat-row:last-child { border-bottom: none; }
.team-stat-row:not(.team-stat-header):hover { background: var(--bg-soft); cursor: pointer; }
.team-stat-header {
  background: var(--bg-head);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.team-stat-col { font-size: 12.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.team-stat-col-person { gap: 9px; }
.team-stat-person-text { display: flex; flex-direction: column; min-width: 0; }
.team-stat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-stat-pos { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-stat-sat svg { width: 17px; height: 17px; }
.team-stat-sat .hm-ric { stroke: var(--accent-link); fill: color-mix(in srgb, var(--accent-link) 22%, transparent); }
.team-stat-sat .hm-reye { fill: var(--accent-link); }
.team-stat-sat .hm-rmouth { stroke: var(--accent-link); }
.team-stat-overdue { color: #c14a34; font-weight: 600; }
.team-stat-col .muted { color: var(--text-muted); }

/* ============ Обучение → Результаты ============ */
/* Иконка-кнопка (дублирование опроса) в ряду действий строки. */
.btn.small.icon-only { padding: 5px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.btn.small.icon-only svg { width: 15px; height: 15px; }

/* Антидубль частоты в модалке назначения. */
.assign-warn { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; border-radius: 11px; padding: 11px 14px; margin: 10px 0 2px; }
.assign-warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.assign-warn.err { background: rgba(193, 74, 52, 0.10); border: 1px solid rgba(193, 74, 52, 0.30); color: var(--red); }
.assign-warn.warn { background: rgba(192, 125, 10, 0.10); border: 1px solid rgba(192, 125, 10, 0.30); color: var(--amber); }
.assign-warn b { display: block; margin-bottom: 2px; }
.assign-warn span { display: block; color: var(--text-secondary); }
.assign-warn-names { margin-top: 4px; font-size: 11.5px; color: var(--text-muted) !important; }

/* Утилиты раздела. */
.res-hub .mut, .res-detail .mut { color: var(--text-muted); }
.res-hub .tnum, .res-detail .tnum { font-variant-numeric: tabular-nums; }

/* Сегмент-переключатель типов результатов. */
.res-seg { display: flex; gap: 4px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 12px; padding: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.res-seg button { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border: 0; background: transparent; border-radius: 9px; padding: 8px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.res-seg button svg { width: 15px; height: 15px; }
.res-seg button.on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-card); }

/* Табы Все/Активные/Завершённые. */
.res-tabs { display: inline-flex; gap: 2px; background: var(--bg-deep); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.res-tabs button { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); border: 0; background: transparent; border-radius: 8px; padding: 6px 13px; cursor: pointer; }
.res-tabs button.on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-card); }

/* Фильтр-чипы (период/сегмент/сотрудник). */
.res-fbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.res-fchip { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.res-fchip .lbl { color: var(--text-muted); }
.res-fchip svg { width: 13px; height: 13px; color: var(--text-muted); }
.res-fchip:hover { border-color: var(--border-strong); }
.res-fchip.locked { cursor: default; opacity: 0.85; }
.res-fspace { flex: 1; }

/* Карточка-список результатов. */
.res-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.res-thead { display: grid; padding: 9px 16px; background: var(--bg-head); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.res-row { display: grid; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--hair); font-size: 13px; cursor: pointer; }
.res-row:last-child { border-bottom: 0; }
.res-row:hover { background: var(--bg-soft); }
.res-nm { font-weight: 600; display: flex; align-items: center; gap: 9px; min-width: 0; }
.res-nm .res-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-nm .mut { font-weight: 500; }
.res-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-deep); }
.res-chip.mut { color: var(--text-muted); }
.res-caret { width: 14px; height: 14px; flex: none; color: var(--text-muted); transition: transform 0.15s; display: inline-flex; }
.res-caret svg { width: 14px; height: 14px; }
.res-caret.open { transform: rotate(90deg); }
.res-row-act { justify-self: end; }
.res-score { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Кнопка «Завершён» / «Вернуть». */
.res-donebtn { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--green); background: rgba(46, 158, 91, 0.10); border: 1px solid rgba(46, 158, 91, 0.30); border-radius: 999px; padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.res-donebtn svg { width: 12px; height: 12px; }
.res-donebtn.returned { color: var(--text-secondary); background: var(--bg-deep); border-color: var(--border); }
.res-donebtn:disabled { opacity: 0.5; cursor: default; }

/* Раскрытие уровней. */
.res-detail { background: var(--bg-soft); border-bottom: 1px solid var(--hair); }
.res-detail-loading, .res-l2-empty { padding: 12px 16px 12px 40px; font-size: 12.5px; color: var(--text-muted); }
.res-l2 { display: grid; padding: 10px 16px 10px 36px; align-items: center; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.res-l2:last-child { border-bottom: 0; }
.res-l2-click { cursor: pointer; }
.res-l2-click:hover { background: var(--bg-deep); }
.res-l3 { background: var(--bg-deep); padding: 4px 16px 8px 44px; }
.res-l3-eval { display: grid; grid-template-columns: 1fr 70px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.res-l3-eval:last-child { border-bottom: 0; }
.res-l3-eval .res-score { justify-self: end; }
.res-l3-click { cursor: pointer; }
.res-l4 { padding: 4px 0 8px 22px; }
.res-qa { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.res-qa:last-child { border-bottom: 0; }
.res-qa .res-q { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
.res-qa .res-a { font-size: 12.5px; color: var(--text); font-weight: 500; }
.res-qa-total .res-a b { font-variant-numeric: tabular-nums; }

/* eNPS. */
.res-anon { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; margin-bottom: 14px; }
.res-anon svg { width: 14px; height: 14px; color: var(--text-muted); }
.res-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res-grid2.wide { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 900px) { .res-grid2, .res-grid2.wide { grid-template-columns: 1fr; } }
.res-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.res-panel-h { padding: 11px 16px; border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 600; }
.res-panel-h .mut { font-weight: 500; color: var(--text-muted); }
.res-panel-b { padding: 16px; }
.res-enps-big { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.res-enps-num { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.res-enps-num.good { color: var(--green); } .res-enps-num.mid { color: var(--amber); } .res-enps-num.bad { color: var(--red); }
.res-enps-tag { font-size: 12px; color: var(--text-muted); }
.res-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-secondary); flex-wrap: wrap; }
.res-legend span { display: inline-flex; align-items: center; gap: 6px; }
.res-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sg-prom { background: var(--green); } .sg-pass { background: var(--gray); } .sg-crit { background: var(--red); }
.res-seg-row { display: flex; align-items: center; gap: 12px; font-size: 12.5px; padding: 7px 0; }
.res-seg-lab { width: 150px; flex: none; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-seg-track { flex: 1; height: 16px; background: var(--bg-deep); border-radius: 6px; overflow: hidden; display: flex; }
.res-seg-track i { display: block; height: 100%; }
.res-seg-val { width: 54px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.res-seg-val.good { color: var(--green); } .res-seg-val.mid { color: var(--amber); } .res-seg-val.bad { color: var(--red); }
.res-spark { width: 100%; height: 130px; }

/* 360 и self-review. */
.res-kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 700px) { .res-kpis3 { grid-template-columns: 1fr; } }
.res-kpi { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 14px 16px; }
.res-kpi .k { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.res-kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.res-kpi .v.good { color: var(--green); }
.res-kpi .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.res-crit { display: grid; grid-template-columns: 1.4fr 1fr 70px 70px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.res-crit:last-child { border-bottom: 0; }
.res-crit.h { background: var(--bg-head); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); font-weight: 600; padding: 9px 16px; }
.res-crit-name { font-weight: 600; }
.res-scalebar { position: relative; height: 8px; border-radius: 5px; background: var(--bg-deep); }
.res-scalebar .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; background: var(--poll-peers); }
.res-scalebar .selfmark { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--poll-self); }
.res-dyn { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
.res-dyn.up { color: var(--green); } .res-dyn.down { color: var(--red); } .res-dyn.flat { color: var(--text-muted); }

/* k-анонимность: скрытый сегмент eNPS. */
.res-seg-row.suppressed .res-seg-lab { color: var(--text-muted); }
.res-seg-track.suppressed { background: transparent; display: flex; align-items: center; }
.res-seg-suppressed { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.res-seg-suppressed svg { width: 11px; height: 11px; }
.res-anon-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-top: 10px; }
.res-anon-note svg { width: 12px; height: 12px; }

/* #3 «точка внимания»: аномально низкий сегмент/компетенция. */
.res-attn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10.5px; font-weight: 600;
  color: var(--amber); background: rgba(192, 125, 10, 0.12); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.res-attn svg { width: 11px; height: 11px; }
.res-crit.attn { background: rgba(192, 125, 10, 0.05); }

/* ============================================================
   Обучение → Курсы (список, превью, конструктор, редактор, статистика)
   ============================================================ */
.lrn-page { max-width: 1080px; }
.lrn-pagehead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.lrn-h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 3px; }
.lrn-sub { color: var(--text-secondary); font-size: 13px; margin: 0; }
.lrn-flex { flex: 1; }
.lrn-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lrn-tabs { display: inline-flex; gap: 2px; background: var(--bg-deep); border-radius: 10px; padding: 3px; }
.lrn-tabs button { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border: 0; background: transparent; border-radius: 8px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lrn-tabs button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(28, 27, 26, 0.06); }
.lrn-tabs .cbadge { font-size: 10.5px; background: var(--bg-deep); color: var(--text-muted); border-radius: 999px; padding: 0 6px; font-weight: 600; }
.lrn-tabs button.on .cbadge { background: var(--accent); color: var(--bg); }
.lrn-search { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-deep); border-radius: 10px; padding: 0 12px; }
.lrn-search svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.lrn-search input { border: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text); padding: 8px 0; width: 210px; outline: none; }
.lrn-toolbar .fchip-select { display: inline-flex; align-items: center; gap: 6px; }
.lrn-toolbar .fchip-select .lbl { color: var(--text-muted); }
.lrn-toolbar .fchip-select svg { width: 13px; height: 13px; color: var(--text-muted); }

.lrn-listsec { margin-top: 18px; }
.lrn-listsec:first-child { margin-top: 0; }
.lrn-listsec-h { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 2px 9px; }
.lrn-listsec-h .n { font-size: 11px; background: var(--bg-deep); color: var(--text-muted); border-radius: 999px; padding: 1px 8px; }
.lrn-sec-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-new { background: var(--accent-link); } .dot-prog { background: var(--amber); } .dot-done { background: var(--green); }

.prog-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; box-shadow: var(--shadow-xs); }
.prog-row { display: grid; grid-template-columns: 1.7fr 150px 108px 118px 150px; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.prog-row:last-child { border-bottom: 0; }
.prog-row:hover { background: var(--bg-soft); }
.prog-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prog-cover { flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); overflow: hidden; background: linear-gradient(135deg, #c9d5e8, #e4ccdd); }
.prog-cover svg { width: 20px; height: 20px; opacity: 0.9; }
.prog-cover.sm { width: 46px; height: 46px; }
.prog-cover.md { width: 44px; height: 44px; }
.prog-meta { min-width: 0; }
.prog-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-sub { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prog-collab { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.prog-curator { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.prog-curator .avatar-chip { width: 22px; height: 22px; font-size: 9px; }
.prog-dur { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.prog-dur svg { width: 13px; height: 13px; color: var(--text-muted); }
.prog-deadline { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.prog-deadline svg { width: 12px; height: 12px; }
.prog-deadline.soon { color: var(--amber); font-weight: 600; }
.prog-deadline.over { color: var(--red); font-weight: 600; }
.prog-pwrap { display: flex; flex-direction: column; gap: 5px; }
.prog-pbar { height: 9px; border-radius: 6px; background: var(--bg-deep); overflow: hidden; }
.prog-pbar i { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.prog-pbar.mid i { background: var(--amber); } .prog-pbar.lo i { background: var(--accent-link); }
.prog-pbar.hero { height: 12px; }
.prog-pline { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.prog-pc { font-variant-numeric: tabular-nums; font-weight: 600; }
.prog-minichain { display: inline-flex; align-items: center; gap: 2px; }
.prog-minichain b { width: 14px; height: 6px; border-radius: 3px; background: var(--border-strong); }
.prog-minichain b.done { background: var(--green); } .prog-minichain b.active { background: var(--accent-link); }

.topic-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-deep); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.topic-chip.access-free { color: var(--green); background: rgba(46, 158, 91, 0.12); }
.topic-chip.access-assigned { color: var(--accent-link); background: rgba(37, 99, 184, 0.12); }
.topic-chip svg { width: 11px; height: 11px; }
.topic-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.chip.st-new { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.chip.st-prog { background: rgba(192, 125, 10, 0.15); color: var(--amber); }
.chip.st-done { background: rgba(46, 158, 91, 0.15); color: var(--green); }
.chip.st-paused { background: var(--bg-deep); color: var(--text-muted); }
.chip.draft { background: var(--bg-deep); color: var(--text-muted); }
.chip.st-new svg, .chip.st-prog svg, .chip.st-done svg, .chip.st-paused svg { width: 12px; height: 12px; }

/* Превью курса */
.prog-intro { border: 1px solid var(--border); border-radius: 18px; background: var(--bg); overflow: hidden; }
.prog-intro-top { display: grid; grid-template-columns: 1.6fr 1fr; }
.prog-intro-main { padding: 22px 24px; }
.prog-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
.prog-eyebrow svg { width: 14px; height: 14px; }
.prog-intro-title { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.prog-intro-desc { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 16px; max-width: 520px; }
.prog-facts { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.prog-fact { display: flex; align-items: center; gap: 9px; }
.prog-fact svg { width: 16px; height: 16px; color: var(--text-muted); }
.prog-fact .fl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.prog-fact .fv { font-size: 13px; font-weight: 600; }
.prog-intro-side { background: var(--bg-soft); border-left: 1px solid var(--border); padding: 20px; }
.prog-previmgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prog-previmgs .pimg { aspect-ratio: 16 / 10; border-radius: 9px; background: var(--bg-deep); background-size: cover; background-position: center; border: 1px solid var(--border); }
.prog-prevcap { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; }
.prog-progress-hero { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-soft); }
.prog-progress-hero .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prog-progress-hero .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.prog-progress-hero .big { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prog-chain { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 18px 8px 8px; }
.prog-step { flex: 1 0 138px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 4px; }
.prog-step::before { content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 3px; background: var(--border-strong); z-index: 0; border-radius: 3px; }
.prog-step:first-child::before { display: none; }
.prog-step.reached::before { background: var(--green); }
.prog-step.clk { cursor: pointer; }
.prog-step-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; color: var(--text-muted); }
.prog-step-ic svg { width: 19px; height: 19px; }
.prog-step.done .prog-step-ic { background: var(--green); border-color: var(--green); color: #fff; }
.prog-step.current .prog-step-ic, .prog-step.progress .prog-step-ic { background: var(--bg); border-color: var(--accent-link); color: var(--accent-link); box-shadow: 0 0 0 4px rgba(37, 99, 184, 0.14); }
.prog-step-kind { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 9px; }
.prog-step-t { font-size: 12px; font-weight: 600; margin-top: 2px; max-width: 132px; line-height: 1.3; }
.prog-step-st { font-size: 10.5px; margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; }
.prog-step-st svg { width: 11px; height: 11px; }
.prog-step-st.s-done { background: rgba(46, 158, 91, 0.15); color: var(--green); }
.prog-step-st.s-prog { background: rgba(192, 125, 10, 0.15); color: var(--amber); }
.prog-step-st.s-current { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.prog-step-st.s-locked { background: var(--bg-deep); color: var(--text-muted); }
.prog-intro-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }

.prog-article { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 26px 30px; max-width: 820px; }
.prog-article-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.prog-article-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; max-width: 820px; }

/* Конструктор курса */
.prog-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 6px 0 8px; }
.prog-ed-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; padding: 9px 0; }
.prog-ed-row.full { grid-column: 1 / -1; align-items: start; }
.prog-ed-key { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.prog-ed-key svg { width: 15px; height: 15px; }
.prog-ed-cover { display: flex; align-items: center; gap: 11px; }
.prog-autoval { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prog-auto-tag { font-size: 10.5px; font-weight: 600; color: var(--green); background: rgba(46, 158, 91, 0.14); border-radius: 999px; padding: 1px 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.prog-builder { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--bg-soft); margin-bottom: 4px; }
.prog-builder .bstep { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-bottom: 1px solid var(--hair); background: var(--bg); }
.prog-builder .bstep:last-of-type { border-bottom: 0; }
.prog-builder .bgrip { color: var(--text-muted); cursor: grab; display: flex; flex: none; }
.prog-builder .bgrip:active { cursor: grabbing; }
.prog-builder .bgrip svg { width: 16px; height: 16px; }
.prog-builder .bstep.dragging { opacity: 0.45; }
.prog-builder .bstep.drop-before { box-shadow: inset 0 2px 0 var(--accent-link); }
.prog-builder .bstep.drop-after { box-shadow: inset 0 -2px 0 var(--accent-link); }
.prog-builder .bnum { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-deep); color: var(--text-secondary); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.prog-builder .bic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.prog-builder .bic svg { width: 16px; height: 16px; }
.prog-builder .bic.article { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.prog-builder .bic.test { background: rgba(192, 125, 10, 0.14); color: var(--amber); }
.prog-builder .binfo { flex: 1; min-width: 0; }
.prog-builder .bt { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-builder .bs { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.prog-builder .browacts { display: inline-flex; gap: 2px; }
.prog-builder .browacts .task-action-btn[data-up] svg { transform: rotate(-90deg); }
.prog-builder .browacts .task-action-btn[data-down] svg { transform: rotate(90deg); }
.prog-builder .badd { display: flex; gap: 8px; padding: 11px 12px; background: var(--bg-soft); }
.prog-builder .badd .btn { flex: 1; justify-content: center; border-style: dashed; }
.prog-cover-pop { width: 288px; padding: 6px; }
.prog-cover-pop .combo-pop-sep { border-top: 1px solid var(--hair); margin: 5px 4px; }
.prog-cover-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 4px 8px; }
.prog-cover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 8px 8px; }
.prog-gsw { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border); cursor: pointer; }
.prog-gsw.sel { outline: 2px solid var(--accent-link); outline-offset: 2px; }

/* Редактор курсов (управление) */
.erow { display: grid; grid-template-columns: 1.9fr 130px 150px 96px 118px 132px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.erow:last-child { border-bottom: 0; }
.erow:hover { background: var(--bg-soft); }
.erow .prog-cover.sm { width: 40px; height: 40px; }
.erow .browacts { display: inline-flex; gap: 4px; align-items: center; }

/* Модалка назначения */
.tmodal-title-static { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 5px 0 4px; }
.selpill.wide { width: 100%; justify-content: space-between; }
.prog-date { font-family: inherit; font-size: 13px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; }
.radio-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.radio-opt { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; cursor: pointer; background: var(--bg-soft); }
.radio-opt.on { border-color: var(--accent-link); background: rgba(37, 99, 184, 0.05); }
.radio-opt .rd { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; margin-top: 1px; position: relative; }
.radio-opt.on .rd { border-color: var(--accent-link); }
.radio-opt.on .rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-link); }
.radio-opt .rt { font-size: 12.5px; font-weight: 600; }
.radio-opt .rs { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.radio-opt .rs.warn { color: var(--red); }

/* Статистика курсов */
.lrn-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.lrn-kpi { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 14px 16px; }
.lrn-kpi .k { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.lrn-kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lrn-kpi .v.good { color: var(--green); }
.lrn-kpi .dsub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.prog-stat-head { display: grid; grid-template-columns: 1.6fr 130px 130px 160px 90px; padding: 9px 16px; background: var(--bg-head); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.prog-stat-row { display: grid; grid-template-columns: 1.6fr 130px 130px 160px 90px; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--hair); font-size: 13px; cursor: pointer; }
.prog-stat-row:hover { background: var(--bg-soft); }
.prog-stat-row .nm { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.prog-stat-row .caret { width: 14px; height: 14px; color: var(--text-muted); transition: transform 0.15s; }
.prog-stat-row .caret.open { transform: rotate(90deg); }
.prog-stat-sub { background: var(--bg-soft); border-bottom: 1px solid var(--hair); }
.prog-stat-subrow { display: grid; grid-template-columns: 1fr 130px 90px; padding: 10px 16px 10px 40px; align-items: center; font-size: 12.5px; border-bottom: 1px solid var(--hair); }
.prog-stat-subrow:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .prog-row { grid-template-columns: 1.6fr 110px 120px; }
  .prog-row > div:nth-child(2), .prog-row > div:nth-child(3) { display: none; }
  .prog-intro-top { grid-template-columns: 1fr; }
  .prog-intro-side { border-left: 0; border-top: 1px solid var(--border); }
  .erow { grid-template-columns: 1.6fr 120px 132px; }
  .erow > div:nth-child(2), .erow > div:nth-child(3), .erow > div:nth-child(4) { display: none; }
  .prog-ed-grid { grid-template-columns: 1fr; }
}

/* Курсы — доработки (обложка в превью, зелёный бар, перепрохождение, success, кроп) */
.prog-pbar.done i { background: var(--green); }
.prog-step-st.s-retake { background: rgba(192, 125, 10, 0.15); color: var(--amber); }
.prog-step.done.clk .prog-step-ic { cursor: pointer; }
.prog-done-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--green); }
.prog-done-note svg { width: 15px; height: 15px; }
.prog-cover-big { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, #c9d5e8, #e4ccdd); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; }
.prog-cover-big svg { width: 30px; height: 30px; opacity: 0.85; }

/* Success-экран завершения курса */
.prog-success { max-width: 560px; margin: 40px auto; text-align: center; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); padding: 40px 32px; box-shadow: 0 1px 2px rgba(28,27,26,0.05), 0 10px 28px -14px rgba(28,27,26,0.12); }
.prog-success-badge { width: 68px; height: 68px; border-radius: 50%; background: rgba(46, 158, 91, 0.15); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.prog-success-badge svg { width: 38px; height: 38px; }
.prog-success-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.prog-success-sub { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; }
.prog-success-stats { display: inline-flex; gap: 32px; margin-bottom: 16px; }
.prog-success-stats .ss-stat .v { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.prog-success-stats .ss-stat .v.good { color: var(--green); } .prog-success-stats .ss-stat .v.mid { color: var(--amber); } .prog-success-stats .ss-stat .v.bad { color: var(--red); }
.prog-success-stats .ss-stat .k { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.prog-success-hint { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 20px; }
.prog-success-actions { display: flex; gap: 10px; justify-content: center; }

/* Кроп обложки курса */
.cover-crop-modal { width: min(440px, 100%); }
.cover-crop-viewport { width: 384px; max-width: 100%; height: 240px; margin: 0 auto; border-radius: 12px; overflow: hidden; position: relative; background: var(--bg-deep); cursor: grab; touch-action: none; }
.cover-crop-viewport:active { cursor: grabbing; }
.cover-crop-img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }
.cover-crop-zoomrow { display: flex; align-items: center; gap: 10px; margin: 14px auto 4px; max-width: 384px; }
.cover-crop-zoomrow svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.cover-crop-zoom { flex: 1; accent-color: var(--accent-link); }

/* Компетенция-метка в редакторе утверждений 360/self */
.poll-qmeta { display: flex; align-items: center; gap: 10px; padding: 2px 0 8px 30px; flex-wrap: wrap; }
.poll-comp-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.poll-comp-btn:hover { border-color: var(--border-strong); color: var(--text); }
.poll-comp-btn svg { width: 13px; height: 13px; color: var(--text-muted); }
.poll-comp-btn.need { border-color: var(--red); color: var(--red); }
.poll-comp-btn.need svg { color: var(--red); }

/* ================= План развития (назначаемые планы) ================= */
/* Реюз: .chip (База), .pct (Обучение), .dp-bar/.dp-goal-* (личные цели),
   .task-action-btn, .btn, .fchip-select. Ниже — только новое. */

/* Табы внутри контента (по мотивам .tasks-view-tab) */
.ctabs { display: flex; gap: 5px; }
.ctab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 12px;
  font-weight: 600; font-family: inherit; cursor: pointer; }
.ctab:hover { background: var(--accent-soft); color: var(--text); }
.ctab.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Чип-статусы этапов/планов (база .chip уже есть) */
.chip.st-done { background: rgba(46, 158, 91, 0.14); color: var(--green); }
.chip.st-prog { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.chip.st-wait { background: var(--bg-deep); color: var(--text-secondary); }
.chip.st-over { background: rgba(193, 74, 52, 0.13); color: var(--red); }
.chip.st-skip { background: var(--bg-deep); color: var(--text-muted); }
.chip.type-onb { background: rgba(37, 99, 184, 0.12); color: var(--accent-link); }
.chip.type-prob { background: rgba(192, 125, 10, 0.14); color: var(--amber); }
.chip.type-idp { background: rgba(112, 124, 63, 0.16); color: var(--brand-flow); }
.chip.type-custom { background: var(--bg-deep); color: var(--text-secondary); }
:root[data-theme="dark"] .chip.type-prob { color: var(--amber); }

/* Аватар-инициалы плана */
.dp-av { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-flow); color: #fff;
  font-size: 9px; font-weight: 600; display: inline-grid; place-items: center; flex: 0 0 auto;
  background-size: cover; background-position: center; vertical-align: middle; }
.dp-av.sm { width: 18px; height: 18px; font-size: 8px; }
.dp-av.lg { width: 26px; height: 26px; font-size: 10px; }

.dp-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  font-weight: 600; margin: 18px 0 10px; }
.dp-sec-label:first-child { margin-top: 0; }
.dp-pct { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Карточки «Мои планы» */
.dp-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.dp-pcard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; cursor: pointer; }
.dp-pcard:hover { background: var(--accent-soft); }
.dp-pcard-top { height: 4px; }
.dp-pcard-body { padding: 15px 16px; }
.dp-pcard-row1 { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.dp-pcard-title { font-size: 15px; font-weight: 600; }
.dp-pcard-cur { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); margin: 11px 0; }
.dp-pcard-prog { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.dp-pcard-prog .dp-bar { flex: 1; max-width: none; margin-top: 0; }
.dp-pcard-prog .dp-pct { min-width: 34px; text-align: right; }
.dp-pcard-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text-secondary); margin-top: 12px; }
.dp-pcard-meta b { color: var(--text); font-weight: 600; }
.dp-bar.g i { background: var(--green); }

/* Маршрут плана (CJM) */
/* Маршрут плана — на всю ширину (как остальные экраны раздела). */
.dp-detail { max-width: none; }
.dp-backbtn { margin-bottom: 14px; }
.dp-backbtn svg { transform: rotate(180deg); }
.dp-hero { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 15px 18px;
  margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dp-hero-main { flex: 1; min-width: 220px; }
.dp-hero-title { font-size: 19px; font-weight: 600; margin-top: 4px; }
.dp-hero-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dp-hero-day { font-size: 12px; color: var(--text-muted); }
.dp-hero-right { display: flex; align-items: center; gap: 14px; }
.dp-ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent-link) calc(var(--p) * 1%), var(--bg-deep) 0); }
.dp-ring i { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); display: grid; place-items: center;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; font-style: normal; }
.dp-ring-lbl { font-size: 12px; color: var(--text-muted); }
.dp-ring-num { font-size: 20px; font-weight: 600; }
.dp-ring-num span { color: var(--text-muted); font-size: 14px; }

/* Метрики */
.dp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dp-metric { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 13px 15px; }
.dp-metric.dp-metric-click:hover { background: var(--accent-soft); }
.dp-metric-name { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dp-metric-track { position: relative; height: 6px; border-radius: 999px; background: var(--bg-deep); margin: 0 0 8px; }
.dp-metric-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-link); }
.dp-node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); }
.dp-node.base { background: var(--gray); }
.dp-node.cur { background: var(--accent-link); width: 13px; height: 13px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-link) 22%, transparent); }
.dp-node.tgt { background: var(--green); }
.dp-flag { position: absolute; top: -19px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-flag.base { transform: none; color: var(--gray); }
.dp-flag.tgt { transform: translateX(-100%); color: var(--green); }
.dp-metric-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); }

/* Лента этапов */
.dp-tl { position: relative; }
.dp-phase-band { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; padding-left: 44px; }
.dp-phase-band:first-child { margin-top: 0; }
.dp-phase-lbl { font-size: 13px; font-weight: 600; }
.dp-phase-range { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dp-phase-line { flex: 1; height: 1px; background: var(--border); }
.dp-phase-goal-view { font-size: 12px; color: var(--text-secondary); margin: -6px 0 12px 44px; }
.dp-tl-node { position: relative; display: flex; gap: 14px; padding: 0 0 12px 0; }
.dp-spine { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.dp-tl-node:last-child .dp-spine { bottom: 20px; }
.dp-dot { position: relative; z-index: 1; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 2px solid var(--border); color: var(--text-muted); }
.dp-dot svg { width: 15px; height: 15px; }
.dp-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.dp-dot.prog { background: var(--bg); border-color: var(--accent-link); color: var(--accent-link);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-link) 14%, transparent); }
.dp-dot.over { border-color: var(--red); color: var(--red); }
.dp-stage { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.dp-stage.prog { border-color: color-mix(in srgb, var(--accent-link) 40%, var(--border)); }
.dp-stage-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; }
.dp-stage-main { flex: 1; min-width: 0; }
.dp-stage-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.dp-stage-title { font-size: 14px; font-weight: 600; margin: 3px 0; }
.dp-stage-when { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dp-stage-when svg { width: 13px; height: 13px; }
.dp-stage-when.over { color: var(--red); }
.dp-ba { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.dp-ba-col { padding: 11px 15px; background: var(--bg-soft); }
.dp-ba-col + .dp-ba-col { border-left: 1px solid var(--hair); }
.dp-ba-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.dp-ba-col p { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.dp-stage-body { border-top: 1px solid var(--hair); padding: 11px 15px; background: var(--bg-soft); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.dp-stage-cta { display: flex; gap: 8px; padding: 11px 15px; border-top: 1px solid var(--hair); align-items: center; flex-wrap: wrap; }
.dp-stage-cta .grow { flex: 1; }
.dp-stage-cta .lnk { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 680px) { .dp-ba { grid-template-columns: 1fr; } .dp-ba-col + .dp-ba-col { border-left: 0; border-top: 1px solid var(--hair); } }

/* Список шаблонов */
.dp-tpl-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.dp-tpl-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--hair); }
.dp-tpl-row:first-child { border-top: 0; }
.dp-tpl-row:hover { background: var(--accent-soft); }
.dp-tpl-color { width: 8px; height: 34px; border-radius: 5px; flex: 0 0 auto; }
.dp-tpl-main { flex: 1; min-width: 0; }
.dp-tpl-title { font-size: 14px; font-weight: 600; }
.dp-tpl-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.dp-tpl-acts { display: flex; gap: 6px; align-items: center; }

/* Конструктор шаблона */
.dp-builder { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 820px) { .dp-builder { grid-template-columns: 1fr; } }
.dp-builder .panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.dp-panel-h { padding: 11px 15px; border-bottom: 1px solid var(--hair); background: var(--bg-head); font-weight: 600; font-size: 12.5px;
  display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dp-panel-b { padding: 14px 15px; }
.dp-field { margin-bottom: 12px; }
.dp-field > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.dp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inp { width: 100%; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 9px; padding: 8px 11px;
  font-family: inherit; font-size: 13px; color: var(--text); }
.inp.small { padding: 6px 9px; font-size: 12px; border-radius: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--bg); }
.seg span { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.seg span.on { background: var(--accent); color: var(--bg); }
.dp-phase-edit { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--bg-soft); }
.dp-phase-row1 { display: flex; gap: 6px; align-items: center; }
.dp-phase-row1 .inp { flex: 1; }
.dp-phase-goal { width: 100%; margin-top: 6px; }
.dp-phase-days { display: flex; gap: 6px; align-items: center; margin-top: 7px; font-size: 11.5px; color: var(--text-muted); }
.dp-phase-days .inp { background: var(--bg); }
.dp-phase-hint { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.dp-daycol { width: 58px; text-align: center; }
.dp-empty-mini { font-size: 12.5px; color: var(--text-muted); padding: 8px 2px; }

.dp-step { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; background: var(--bg); margin-bottom: 8px; }
.dp-step.dragging { opacity: 0.5; }
.dp-step.drop-into { border-color: var(--accent-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-link) 12%, transparent); }
.dp-step-grip { color: var(--text-muted); cursor: grab; display: grid; place-items: center; flex: 0 0 auto; }
.dp-step-grip:active { cursor: grabbing; }
.dp-step-grip svg { width: 15px; height: 15px; }
.dp-step-note { font-size: 11px; color: var(--text-muted); font-style: italic; }
.dp-step-ref.need { border-color: var(--amber); color: var(--amber); }
/* Числовые поля без нативных стрелок-спиннеров */
.dp-off-inp::-webkit-outer-spin-button, .dp-off-inp::-webkit-inner-spin-button,
.dp-daycol::-webkit-outer-spin-button, .dp-daycol::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-off-inp, .dp-daycol { -moz-appearance: textfield; }
.dp-step-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.dp-step-ico svg { width: 15px; height: 15px; }
.dp-step-main { flex: 1; min-width: 0; }
.dp-step-title { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); width: 100%; padding: 0; }
.dp-step-title:focus { outline: none; }
.dp-step-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.dp-step-kind { font-size: 11.5px; color: var(--text-muted); }
.dp-step-ref, .dp-step-phase { border: 1px solid var(--border); background: var(--bg-soft); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-family: inherit; color: var(--text-secondary); cursor: pointer; }
.dp-step-off { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.dp-off-inp { width: 44px; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 6px; padding: 2px 5px; font-family: inherit; font-size: 11.5px; text-align: right; }
.dp-step-move { display: flex; gap: 2px; align-items: center; flex: 0 0 auto; }
.dp-step-move [data-up] svg { transform: rotate(180deg); }
.dp-add-step { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dp-as { border: 1px dashed var(--border-strong); background: var(--bg-soft); border-radius: 999px; padding: 6px 11px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dp-as svg { width: 13px; height: 13px; }
.dp-as:hover { background: var(--accent-soft); }
.dp-as-phase { border-style: solid; border-color: var(--border); color: var(--text); }
/* Описание этапа (в конструкторе) */
.dp-step-desc { width: 100%; margin-top: 6px; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 8px;
  padding: 6px 9px; font-family: inherit; font-size: 12px; color: var(--text); resize: vertical; min-height: 30px; }
.dp-step-desc:focus { outline: none; border-color: var(--accent-link); }
/* Чек-лист события (конструктор) */
.dp-step-checklist { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dp-cl-item { display: flex; align-items: center; gap: 7px; }
.dp-cl-box { color: var(--text-muted); display: grid; place-items: center; flex: 0 0 auto; }
.dp-cl-box svg { width: 14px; height: 14px; }
.dp-cl-text { flex: 1; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 7px; padding: 5px 8px; font-family: inherit; font-size: 12px; color: var(--text); }
.dp-cl-text:focus { outline: none; border-color: var(--accent-link); }
.dp-cl-add { align-self: flex-start; border: 1px dashed var(--border-strong); background: var(--bg-soft); border-radius: 999px;
  padding: 4px 10px; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dp-cl-add svg { width: 12px; height: 12px; }
/* Чек-лист события (маршрут плана) */
.dp-stage-checklist { border-top: 1px solid var(--hair); padding: 10px 15px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-soft); }
.dp-clv { display: flex; align-items: center; gap: 8px; border: none; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text);
  text-align: left; cursor: pointer; padding: 2px 0; }
.dp-clv.ro { cursor: default; }
.dp-clv-box { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: 0 0 auto; }
.dp-clv-box svg { width: 12px; height: 12px; }
.dp-clv.done .dp-clv-box { background: var(--green); border-color: var(--green); color: #fff; }
.dp-clv.done span:last-child { color: var(--text-muted); text-decoration: line-through; }

.dp-metric-edit { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; }
.dp-me-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dp-me-row { display: flex; gap: 8px; }
.dp-me-row .inp { flex: 1; }
.dp-pop-lbl { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 4px; }

/* Дашборд «Планы команды» */
.dp-team-tbl { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.dp-thead, .dp-trow { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.4fr 1.1fr 0.6fr; gap: 10px; align-items: center; padding: 11px 15px; }
.dp-thead { background: var(--bg-head); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 600; }
.dp-trow { border-top: 1px solid var(--hair); font-size: 12.5px; cursor: pointer; }
.dp-trow:hover { background: var(--accent-soft); }
.dp-who { display: flex; align-items: center; gap: 9px; }
.dp-who .dp-nm { font-weight: 600; }
.dp-progcell { display: flex; align-items: center; gap: 8px; }
.dp-progcell .dp-bar { flex: 1; max-width: none; margin-top: 0; }
.dp-progcell .dp-pct { min-width: 32px; font-size: 12px; }
.dp-next b { font-weight: 600; }
.dp-red { color: var(--red); }
.dp-muted { color: var(--text-muted); }
@media (max-width: 820px) { .dp-thead { display: none; } .dp-trow { grid-template-columns: 1fr 1fr; gap: 6px 10px; } }

.tmodal-access-hint {
  margin: -4px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--hair);
  border-radius: 10px;
}

/* Каскадный выбор аудитории (Тесты/Опросы/Курсы) */
.aud-cascade { width: 328px; }
.aud-list { max-height: 360px; }
.aud-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 8px 3px 10px;
  border-radius: 8px;
  cursor: default;
}
.aud-row:hover { background: var(--bg-soft); }
.aud-caret {
  flex: none;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.aud-caret svg { width: 13px; height: 13px; }
.aud-caret-sp { flex: none; width: 16px; height: 16px; }
.aud-cb { flex: none; display: inline-flex; align-items: center; cursor: pointer; }
.aud-cb input { width: 15px; height: 15px; accent-color: var(--accent-link); cursor: pointer; margin: 0; }
.aud-cb input:disabled { cursor: default; opacity: .6; }
.aud-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.aud-name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-dept-name { font-weight: 600; }
.aud-user .aud-name { color: var(--text-muted); }

/* ---------------- Главная → Календарь (личные события) ---------------- */

/* Вкладки Сводка/Календарь — Главная не имеет сайдбара, .tasks-view-tabs
   переиспользуется прямо в контенте, но компактно (не растянута на всю
   ширину, как в сайдбаре Задач/Команды). */
.home-view-tabs-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.home-view-tabs.tasks-view-tabs { border-bottom: none; padding: 0; margin-bottom: 0; width: auto; }
.home-view-tabs .tasks-view-tab { flex: none; width: 34px; height: 30px; padding: 0; }

/* Тултипы для icon-only табов (Сводка/Календарь, Месяц/Неделя/Список и т.п.).
   Правило проекта: любой icon-only таб должен иметь подсказку. */
.tasks-view-tab[data-tip] { position: relative; }
.tasks-view-tab[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--accent);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
  z-index: 40;
  box-shadow: var(--shadow-card);
}
.tasks-view-tab[data-tip]:hover::after,
.tasks-view-tab[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-toolbar-left, .cal-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* hev-chip — своя визуальная база для событий/задач на Главной (в отличие от
   Задачи → Календарь, где .cal-chip красится только через .task-status-badge
   по встроенным статусам, тут цвет — произвольный, из словаря категорий). */
.hev-chip {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 16px; border-radius: 6px; padding: 2px 6px; margin-bottom: 2px;
}
.hev-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.hev-chip.task { border: 1.3px solid var(--border); background: transparent !important; color: var(--text-secondary) !important; }
.hev-chip-check { width: 11px; height: 11px; border-radius: 4px; border: 1.3px solid var(--text-muted); flex: none; }
.hev-chip.task.done .hev-chip-check { background: #2e9e5b; border-color: #2e9e5b; }
.hev-chip.task.done .cal-chip-title { text-decoration: line-through; opacity: .6; }

/* Модалка события — поле «Когда»: кнопка даты + две кнопки времени + свитч
   «Весь день», все в одну строку с переносом. */
.hev-when-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .tmodal-input по умолчанию width:auto (узкие поля вроде селекта периода) —
   для однострочных текстовых полей на всю ширину строки (Место/ссылка и
   подобные) нужен явный оверрайд; живёт здесь, т.к. позже в каскаде базового
   .tmodal .tmodal-input правила. */
.tmodal input.tmodal-input.wide { width: 100%; }
/* scrollbar-gutter резервирует место под скролл заранее — иначе полоса
   прокрутки ложится поверх текста/подсветки активного пункта (особенно
   заметно на узком 110px попапе времени). */
.hev-time-list { max-height: 220px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding-right: 2px; }
.hev-time-list button {
  display: block; width: 100%; box-sizing: border-box; border: none; background: none; border-radius: 7px;
  padding: 5px 8px; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--text); text-align: left; cursor: pointer;
}
.hev-time-list button:hover { background: var(--bg-soft); }
.hev-time-list button.active { background: var(--accent); color: var(--bg); font-weight: 600; }

/* Попап выбора области правки повторяющегося события (только это / это и
   далее / все) — три кнопки в столбик поверх модалки события. */
.hev-scope-opts { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.hev-scope-opts .btn { justify-content: flex-start; }

/* Просмотр события (клик по чипу/блоку) — read-only перед редактированием,
   тот же принцип, что и у задач (openTaskModal(..., 'view')). */
.hev-view-cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.hev-view-desc { white-space: pre-wrap; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

/* Переключатель Месяц/Неделя/Список — тот же icon-only .tasks-view-tabs
   паттерн, что и вкладки Сводка/Календарь выше, только компактно внутри
   cal-toolbar-left (не в отдельной прижатой вправо строке). */
.cal-subview-tabs.tasks-view-tabs { border-bottom: none; padding: 0; margin-bottom: 0; width: auto; }
.cal-subview-tabs .tasks-view-tab { flex: none; width: 34px; height: 30px; padding: 0; }

/* ---- Неделя (time-grid) ---- */
.week-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.week-head { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.week-head-cell { padding: 10px 6px; text-align: center; border-left: 1px solid var(--hair); }
.week-head-cell:first-child { border-left: 0; }
/* Угловая кнопка — переключатель «показывать нерабочее время» (по
   умолчанию свёрнуто, см. решение Сергея); бейдж — число событий вне
   видимого диапазона, чтобы ничего не терялось молча. */
.week-hours-toggle {
  border: 0; background: none; font: inherit; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; width: 100%; position: relative;
}
.week-hours-toggle:hover { color: var(--text); background: var(--bg-soft); }
.week-hours-toggle .icon { width: 15px; height: 15px; }
.week-hours-toggle-badge {
  position: absolute; top: 4px; right: 6px; min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 8.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.week-head-dow { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .03em; }
.week-head-num { font-size: 15px; font-weight: 600; margin-top: 2px; }
.week-head-cell.today .week-head-num { color: var(--accent-link); }
.week-allday { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-bottom: 1px solid var(--border); background: var(--bg-soft); min-height: 30px; }
.week-allday-label { font-size: 8.5px; line-height: 1.2; padding: 0 2px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; }
.week-allday-cell { border-left: 1px solid var(--hair); padding: 3px; }
.week-body { display: grid; grid-template-columns: 52px 1fr; max-height: 560px; overflow-y: auto; position: relative; }
.week-hours { display: flex; flex-direction: column; }
.week-hour-label { height: 52px; font-size: 10px; color: var(--text-muted); text-align: right; padding-right: 6px; transform: translateY(-6px); }
/* Первая строка часов рисуется сразу под .week-allday — сдвиг -6px у неё
   визуально «наезжал» на подпись «Весь день» над ней (см. отчёт Сергея),
   остальным часам сдвиг оставляем как есть (подгонка под линию сетки). */
.week-hours .week-hour-label:first-child { transform: none; }
.week-cols { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.week-col { border-left: 1px solid var(--hair); position: relative; cursor: pointer; }
.week-hour-line { height: 52px; border-bottom: 1px solid var(--hair); }
.week-hour-line.work-hour { background: var(--bg-soft); }
.week-event {
  position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 4px 6px; font-size: 10.5px; line-height: 1.25;
  color: #fff; overflow: hidden; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); user-select: none;
}
.week-event b { display: block; font-size: 11px; }
/* Внешнее ICS-событие — read-only справочный слой под своими блоками
   (ниже z-index, приглушённая заливка, пунктирная рамка), не участвует в
   колоночной раскладке пересечений (см. homeCalWeekExtBlockHtml). */
.week-event-ext { left: 2px; right: 2px; z-index: 1; opacity: .6; cursor: pointer; border: 1px dashed rgba(255, 255, 255, .55); }
.week-event:not(.week-event-ext) { z-index: 2; }
/* Ручка ресайза — нижняя полоска блока, отдельный mousedown (stopPropagation
   в attachHomeCalWeekEventResize), курсор показывает, что тянуть можно только
   по вертикали (меняется длительность, не день). */
.week-event-resize-handle { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
/* Полупрозрачный «призрак» диапазона при создании протяжкой по сетке часов —
   не кликабелен и не участвует в drag других блоков. */
.week-event-ghost { background: var(--accent-link); opacity: .5; pointer-events: none; box-shadow: none; }
/* Fixed-позиционированный призрак переноса события (Неделя) — снэпается к
   реальной сетке (граница колонки + 15-мин шаг), пунктирный контур отличает
   его от уже сохранённого блока. */
.week-event.dragging-preview { opacity: .92; outline: 2px dashed rgba(255, 255, 255, .75); outline-offset: -2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
/* Целевая ячейка дня при переносе события в Месяце — видно, куда встанет. */
.cal-day-drop-target { background: var(--bg-soft); outline: 2px dashed var(--accent-link); outline-offset: -2px; }
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 3; pointer-events: none; }
.now-line::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---- Список / повестка ---- */
.agenda-day { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--bg); }
.agenda-day-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; background: var(--bg-head); }
.agenda-day-head b { font-size: 13px; }
.agenda-day-head span { font-size: 11.5px; color: var(--text-soft); }
.agenda-empty { padding: 10px 14px; color: var(--text-muted); font-size: 12px; font-style: italic; cursor: pointer; }
.agenda-empty:hover { background: var(--bg-soft); }
.agenda-row { display: grid; grid-template-columns: 92px 1fr; border-top: 1px solid var(--hair); }
.agenda-time { padding: 9px 10px; font-size: 11px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda-items { padding: 6px 12px 6px 0; display: flex; flex-direction: column; gap: 4px; }
.agenda-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: var(--bg-deep); font-size: 12px; cursor: pointer; }
.agenda-item .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.agenda-item.task .cal-dot { background: transparent !important; border: 1.4px solid var(--text-muted); }
.agenda-item.task.done { opacity: .6; }
.agenda-item.task.done s { text-decoration: line-through; }
.agenda-tail { text-align: center; padding: 12px; }
.agenda-tail-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.agenda-holiday-tag { color: var(--red) !important; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 10px !important; }
.agenda-offday-tag { color: var(--red); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }

/* ---- v2: отпуска/больничные команды + праздники РФ (наложение) ---- */
/* Пилюли — компактная сводка по типу отсутствия (не по человеку, иначе
   день «сезона отпусков» захламляется) — палитра 1:1 из Команды → График
   (.gantt-day-square.sched-*), чтобы не вводить новый цветовой смысл. */
.hcal-abs-row { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 2px; }
.hcal-abs-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500;
  border-radius: 6px; padding: 1px 5px; line-height: 14px; color: var(--text-secondary);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default;
}
.hcal-abs-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.hcal-abs-pill.vacation { background: #ccdcf3; }
.hcal-abs-pill.vacation .hcal-abs-dot { background: var(--blue); }
.hcal-abs-pill.sick { background: #f2cfc6; }
.hcal-abs-pill.sick .hcal-abs-dot { background: var(--red); }
.hcal-abs-pill.dayoff { background: #f0e0bd; }
.hcal-abs-pill.dayoff .hcal-abs-dot { background: var(--amber); }
:root[data-theme='dark'] .hcal-abs-pill.vacation { background: #2a3d5c; }
:root[data-theme='dark'] .hcal-abs-pill.sick { background: #4e2a22; }
:root[data-theme='dark'] .hcal-abs-pill.dayoff { background: #4d3d1e; }

/* Праздники РФ — фиксированные даты, без переносов выходных (упрощение,
   см. ROADMAP «Главная»), тонкий тёплый фон + красный номер дня/подпись. */
.cal-day.holiday { background: #fbf1ee; }
.cal-day.holiday:not(.today) .cal-day-num { color: var(--red); }
:root[data-theme='dark'] .cal-day.holiday { background: #2e211e; }
.week-head-cell.holiday .week-head-num { color: var(--red); }
/* Выходной по факт. графику пользователя (w52/shift22/custom) — только
   красный номер дня, без фона (это не «нерабочий день компании», как
   праздник, а личный выходной; праздник уже красный, off-day на него не
   накладывается — см. isOff = !isHoliday && ... в рендере). */
.cal-day.off-day:not(.today) .cal-day-num { color: var(--red); }
.week-head-cell.off-day .week-head-num { color: var(--red); }
.cal-day-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-day-holiday-tag, .week-head-holiday-tag { color: var(--red); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; }
/* Полное название в title (см. рендер) — в узкой ячейке Месяца обрезается
   многоточием, а не переносится/раздувает строку заголовка дня. */
.cal-day-holiday-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: default; }
.week-head-holiday-tag { margin-top: 1px; white-space: normal; line-height: 1.25; }