/* Рабочка — стиль клиентского кабинета и админки */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Цвета — текст */
  --c-text: #0f1419;
  --c-text-muted: #5b6470;
  --c-text-soft: #6b7280;   /* было #8b95a3, не проходило WCAG AA на #F9F9F9 (3.6:1) → теперь 5.6:1 */
  /* Цвета — поверхности */
  --c-bg: #ffffff;
  --c-bg-app: #f5f6f8;             /* фон страницы (iOS-like серебристый) */
  --c-bg-stand: #fdf0f4;           /* фон тестового кабинета — светло-розовый */
  --c-surface: #f7f8fa;
  --c-surface-2: #eef0f3;
  --c-border: #e8eaee;
  --c-border-strong: #d0d4dc;
  --c-border-hover: #0f1419;
  /* Цвета — акценты (бренд PEREPLAN) */
  --c-accent: #126AEE;
  --c-accent-soft: #E5EFFE;
  --c-accent-strong: #1B3388;
  --c-success: #16a34a;
  --c-success-soft: #dcfce7;
  --c-success-strong: #166534;
  --c-success-mid: #1f8a3a;
  --c-warning: #d97706;
  --c-warning-soft: #fef3c7;
  --c-warning-strong: #92400e;
  --c-danger: #dc2626;
  --c-danger-soft: #fee2e2;
  --c-danger-strong: #991b1b;
  --c-danger-bg: #fdeaea;
  --c-danger-border: #e8c5c5;
  --c-grey: #80868b;
  --c-grey-soft: #f1f3f4;
  /* Мягкие фоны для карточек-сообщений */
  --c-primary-light: #e8f0fe;
  --c-bg-soft: #f5f5f5;
  /* Цвета — синие info (отдельно от --c-accent, который чуть голубее) */
  --c-info: #2563eb;
  --c-info-soft: #dbeafe;
  --c-info-pale: #f0f7ff;
  --c-info-strong: #1e3a8a;
  /* Пастели — самый светлый фон семантики */
  --c-success-pale: #f0fdf4;
  --c-warning-pale: #fffbeb;
  /* Доп. оттенки danger / success / surface */
  --c-danger-deep: #a30015;
  --c-surface-tint: #f1f3f9;
  /* Чисто белый — для контрастных кнопок/иконок */
  --c-white: #ffffff;
  /* Полупрозрачные overlay'и (sticky-bar, modal-backdrop) */
  --c-overlay-light: rgba(255, 255, 255, .94);
  --c-shadow-blob: rgba(0, 0, 0, .15);
  --c-shadow-blob-strong: rgba(0, 0, 0, .22);
  /* Градиенты */
  --g-project-card: linear-gradient(180deg, #fafbfc 0%, #f7f8fa 100%);
  --g-ai: linear-gradient(135deg, var(--c-accent), var(--c-success-mid));
  /* Скругления — iOS-шкала. Используем эти, не пишем px прямо в правилах */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;
  /* Spacing — кратные 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  /* Тени — мягкие, iOS-like */
  --sh-xs: 0 1px 2px rgba(15, 20, 25, .04);
  --sh-sm: 0 2px 6px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);
  --sh-md: 0 6px 16px rgba(15, 20, 25, .08), 0 2px 4px rgba(15, 20, 25, .04);
  --sh-lg: 0 14px 32px rgba(15, 20, 25, .10), 0 4px 8px rgba(15, 20, 25, .04);
  --sh-xl: 0 24px 48px rgba(15, 20, 25, .14), 0 8px 16px rgba(15, 20, 25, .06);
  /* Анимации — iOS spring/ease-out */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-xs: 120ms;
  --dur-sm: 180ms;
  --dur-md: 240ms;
  --dur-lg: 320ms;
}

@media (prefers-color-scheme: dark) {
  /* Подготовка для будущего тёмного режима — пока выключено по выбору Димы */
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}
@media (max-width: 767px) {
  body { background: var(--c-bg-app); }
}

/* ===== Sticky bottom action bar — для mobile, главное действие всегда под пальцем ===== */
.bottom-action {
  display: none;
}
@media (max-width: 767px) {
  body.has-bottom-action { padding-bottom: 96px; }
  .bottom-action {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--c-overlay-light);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 24px rgba(15, 20, 25, .04);
  }
  .bottom-action .btn { width: 100%; padding: 16px 20px; font-size: 15px; }
}

a { color: inherit; }

.page { max-width: 680px; margin: 0 auto; padding: 0 20px 120px; }
.page--admin { max-width: 1180px; }
.page--marketing { max-width: 920px; }

/* ── HERO / шапка проекта ── */
.hero { padding: 32px 0 24px; }
.hero__crumb { color: var(--c-text-soft); font-size: 13px; margin-bottom: 12px; }
.hero__crumb a { color: var(--c-accent); text-decoration: none; }
.hero__name { font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.hero__sub { color: var(--c-text-muted); font-size: 14px; margin-top: 4px; }

/* стол-стол шапка — большая карточка проекта на главном экране */
.project-card {
  margin-top: 24px;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-bg-app) 0%, var(--c-surface) 100%);
  border: 1px solid var(--c-border);
}
.project-card__row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.project-card__label { color: var(--c-text-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; min-width: 100px; }
.project-card__value { font-size: 14px; color: var(--c-text); font-weight: 500; }
.project-card__progress {
  margin-top: 6px;
  height: 6px;
  background: var(--c-grey-soft);
  border-radius: 999px;
  overflow: hidden;
}
.project-card__progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-success) 100%);
  border-radius: 999px;
  transition: width .3s;
}
.project-card__pct { font-size: 12px; color: var(--c-text-soft); margin-top: 6px; }

/* ── секции на главном (Дизайн-проект / Чек-лист / ТЗ) ── */
.block { margin-top: 48px; }
.block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.block__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--c-accent-soft); color: var(--c-accent);
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.block__step.done { background: var(--c-success-soft); color: var(--c-success); }
.block__title { font-size: 19px; font-weight: 600; letter-spacing: -.2px; flex: 1; }
.block__desc { color: var(--c-text-muted); font-size: 14px; margin-top: 0; margin-bottom: 16px; padding-left: 42px; }
.block__sub-title { font-size: 15px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; }

/* ── upload зона ── */
.upload-zone {
  border: 1.5px dashed var(--c-border);
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer; transition: all .2s;
  background: var(--c-surface);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
/* Подсветка при перетаскивании для карточек-зон ТУ (choice-card) */
.choice-card.js-dropzone.dragover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.upload-zone svg { color: var(--c-text-soft); margin-bottom: 10px; }
.upload-zone p { color: var(--c-text-muted); font-size: 14px; }
.upload-zone--small { padding: 14px; margin-top: 10px; font-size: 13px; color: var(--c-text-soft); }

/* ── загруженный файл ── */
.file-done {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--c-success-soft);
  border: 1px solid rgba(22, 163, 74, .22);
  border-radius: var(--r-md); margin-bottom: 10px;
  box-shadow: var(--sh-xs);
}
.file-done__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-success); color: var(--c-white); border-radius: var(--r-sm);
}
.file-done__main { flex: 1; min-width: 0; }
.file-done__name { font-size: 14px; font-weight: 500; word-break: break-all; }
.file-done__meta { font-size: 12px; color: var(--c-text-soft); margin-top: 2px; }
.file-done__change {
  font-size: 13px; color: var(--c-text-muted); cursor: pointer;
  border: none; background: none; padding: 10px 12px; border-radius: 6px;
  min-width: 44px; min-height: 44px;
}
.file-done__change:hover { color: var(--c-text); background: var(--c-bg); }
.file-done--question { background: var(--c-warning-soft); border-color: rgba(249, 171, 0, .35); }
.file-done--question .file-done__icon { background: var(--c-warning); }

/* ── карточки разделов чек-листа ── */
.section-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  margin-bottom: 10px; cursor: pointer;
  text-decoration: none; color: var(--c-text);
  transition: transform var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out),
              background var(--dur-sm) var(--ease-out);
  background: var(--c-bg);
  box-shadow: var(--sh-xs);
}
.section-card:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-md); transform: translateY(-1px); }
.section-card:active { transform: scale(.99); box-shadow: var(--sh-sm); }
.section-card__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); color: var(--c-text-muted);
  border-radius: 10px; flex-shrink: 0; font-size: 18px;
}
.section-card__main { flex: 1; min-width: 0; }
.section-card__title { font-size: 15px; font-weight: 500; }
.section-card__hint { font-size: 13px; color: var(--c-text-soft); margin-top: 2px; }
.section-card__badge {
  font-size: 12px; color: var(--c-text-soft);
  padding: 4px 10px; border-radius: 999px; background: var(--c-grey-soft);
  font-weight: 500; white-space: nowrap;
}
.section-card__badge--done { background: var(--c-success-soft); color: var(--c-success); }
.section-card__badge--partial { background: var(--c-warning-soft); color: var(--c-warning); }
.section-card__chevron { width: 18px; height: 18px; color: var(--c-text-soft); flex-shrink: 0; }

/* ── итоговое ТЗ (Шаг 3) — превью карточки ── */
.tz-preview { display: flex; flex-direction: column; gap: 10px; }
.tz-preview__item {
  display: flex; gap: 12px;
  padding: 14px 16px;
  background: var(--c-surface); border-radius: 10px;
  font-size: 14px; line-height: 1.45;
}
.tz-preview__section {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-accent); flex-shrink: 0; min-width: 50px;
}
.tz-preview__text { color: var(--c-text); flex: 1; }
.tz-preview__more {
  text-align: center; padding: 12px; color: var(--c-text-soft);
  font-size: 13px; font-style: italic;
}

/* пустое состояние ТЗ */
.empty {
  padding: 36px 20px; text-align: center;
  color: var(--c-text-soft); font-size: 14px;
  background: var(--c-surface); border-radius: 14px;
}
.empty svg { color: var(--c-grey); margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto; }
.empty strong { color: var(--c-text); font-weight: 500; display: block; margin-bottom: 4px; }
.empty .btn { margin-top: var(--sp-4); }

/* ── экран раздела ── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-text-soft); font-size: 13px; text-decoration: none;
  padding: 8px 0; margin-bottom: 4px;
}
.back-link:hover { color: var(--c-text); }

.question {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-border);
}
.question:last-child { border-bottom: none; }
.question__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.question__label { font-size: 17px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; line-height: 1.4; flex: 1; }

/* ── Helper-кнопка «?» ── */
.helper-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg); color: var(--c-text-muted);
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; padding: 0;
  transition: all .15s;
}
.helper-btn:hover, .helper-btn:focus {
  border-color: var(--c-accent); color: var(--c-accent);
  background: var(--c-accent-soft); outline: none;
}

/* ── Helper-panel (боттом-шит на мобиле, попап в центре на десктопе) ── */
.helper-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 25, .35);
  z-index: 200; display: none;
}
.helper-overlay.open { display: block; }
.helper-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--c-bg);
  border-radius: 20px 20px 0 0;
  z-index: 201;
  max-height: 80vh; overflow-y: auto;
  padding: 24px 24px 32px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.helper-sheet.open { transform: translateY(0); }
.helper-sheet__grip {
  width: 36px; height: 4px; margin: 0 auto 18px;
  border-radius: 999px; background: var(--c-border);
}
.helper-sheet__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.helper-sheet__sub { font-size: 14px; color: var(--c-text-muted); margin-bottom: 18px; }
.helper-block {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-surface);
}
.helper-block__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--c-accent-soft); color: var(--c-accent);
  font-size: 14px; margin-bottom: 8px;
}
.helper-block__icon--what { background: var(--c-accent-soft); color: var(--c-accent); }
.helper-block__icon--why { background: var(--c-success-soft); color: var(--c-success-strong); }
.helper-block__icon--impact { background: var(--c-danger-soft); color: var(--c-danger-strong); }
.helper-block__icon--unsure { background: var(--c-warning-soft); color: var(--c-warning); }
.helper-block__icon--example { background: var(--c-info-soft); color: var(--c-info-strong); }
.helper-block__icon--warning { background: var(--c-danger-soft); color: var(--c-danger); }
.helper-block__title {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--c-text-muted); margin-bottom: 6px;
}
.helper-block__text { font-size: 14px; line-height: 1.5; color: var(--c-text); }
.helper-sheet__close {
  width: 100%; padding: 14px; margin-top: 16px;
  border: none; border-radius: 12px;
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: 500; font-size: 14px;
  cursor: pointer;
}
.helper-sheet__close:hover { background: var(--c-grey-soft); }

@media (min-width: 720px) {
  /* На десктопе — центрированный модал, не bottom-sheet */
  .helper-sheet {
    left: 50%; right: auto;
    bottom: 50%; top: auto;
    transform: translate(-50%, 50%) scale(.95);
    width: 480px; max-width: calc(100vw - 40px);
    border-radius: 20px;
    max-height: 75vh;
    opacity: 0;
  }
  .helper-sheet.open {
    transform: translate(-50%, 50%) scale(1);
    opacity: 1;
  }
}

.why-details, .answered-history {
  margin-top: 14px;
  border-top: 1px solid var(--c-border); padding-top: 14px;
}
.why-details summary, .answered-history summary {
  font-size: 13px; color: var(--c-text-muted); cursor: pointer;
  user-select: none;
}
.why-details summary:hover { color: var(--c-accent); }
.why-text { font-size: 14px; color: var(--c-text-muted); margin-top: 8px; line-height: 1.5; }
.answered-history__item { padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.answered-history__item:last-child { border-bottom: none; }
.answered-history__q { color: var(--c-text-soft); margin-bottom: 4px; }
.answered-history__a { color: var(--c-text); font-weight: 500; }
.question__hint {
  font-size: 14px; color: var(--c-text-muted); margin-bottom: 16px; line-height: 1.5;
  padding: 12px 14px; background: var(--c-surface); border-radius: 10px;
}
.question__inputs { display: flex; flex-direction: column; gap: 8px; }

.btn-choice {
  display: block; width: 100%; padding: 14px 18px;
  font: inherit; font-size: 15px; font-weight: 500;
  border: 1.5px solid var(--c-border); background: var(--c-bg); color: var(--c-text);
  border-radius: 12px; cursor: pointer;
  text-align: left; transition: all .15s;
}
.btn-choice:hover { border-color: var(--c-text); background: var(--c-surface); }
.btn-choice:focus { outline: none; border-color: var(--c-accent); }
.btn-choice--selected {
  border-color: var(--c-success);
  background: var(--c-success-soft);
  color: var(--c-success);
}
.btn-choice--rich { padding: 14px 18px; line-height: 1.35; }
.btn-choice__label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.btn-choice__hint { display: block; font-size: 13px; font-weight: 400; color: var(--c-text-soft); }

.btn-help {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px;
  font: inherit; font-size: 14px; font-weight: 500;
  border: 1.5px dashed var(--c-border); background: transparent; color: var(--c-text-muted);
  border-radius: 12px; cursor: pointer; margin-top: 6px;
  text-align: center;
}
.btn-help:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.btn-help--danger { color: var(--c-danger-deep); border-color: var(--c-danger-deep); }

.question__text-input { display: flex; gap: 8px; }
.question__text-input input {
  flex: 1; padding: 13px 16px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--c-border); border-radius: 12px;
  color: var(--c-text);
}
.question__text-input input:focus { outline: none; border-color: var(--c-accent); }

.question__answered {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--c-success-soft); border-radius: 12px;
  border: 1px solid rgba(52, 168, 83, .25);
}
.question__answered svg { color: var(--c-success); flex-shrink: 0; }
.question__answered-text { font-size: 14px; color: var(--c-text); }
.question__answered-edit { margin-left: auto; font-size: 13px; color: var(--c-text-soft); cursor: pointer; background: none; border: none; }

.question__help-pending {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--c-warning-soft); border-radius: 12px;
}

/* ── маркетинговая главная ── */
.mk-hero {
  padding: 80px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}
.mk-hero__title {
  font-size: 44px; font-weight: 700;
  letter-spacing: -1px; line-height: 1.1;
  margin-bottom: 20px;
}
.mk-hero__sub {
  font-size: 18px; color: var(--c-text-muted);
  max-width: 540px; margin: 0 auto;
  line-height: 1.5;
}
.mk-badge {
  display: inline-block;
  padding: 6px 14px; margin-bottom: 24px;
  background: var(--c-accent-soft); color: var(--c-accent);
  border-radius: 999px; font-size: 13px; font-weight: 500;
}
.mk-section { padding: 60px 0; }
.mk-section__title { font-size: 28px; font-weight: 700; margin-bottom: 32px; letter-spacing: -.3px; text-align: center; }
.mk-grid { display: grid; gap: 20px; }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-card {
  padding: 28px;
  background: var(--c-surface);
  border-radius: 16px;
  border: 1px solid var(--c-border);
}
.mk-card__icon {
  width: 44px; height: 44px;
  background: var(--c-accent-soft); color: var(--c-accent);
  border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.mk-card__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.mk-card__text { font-size: 14px; color: var(--c-text-muted); line-height: 1.5; }

.mk-cta {
  background: var(--c-accent);
  color: var(--c-white);
  padding: 16px 32px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 16px;
  text-decoration: none;
  transition: all .2s;
}
.mk-cta:hover { background: var(--c-accent-strong); }

.mk-demo-block {
  margin-top: 32px;
  padding: 24px;
  background: var(--c-warning-soft);
  border-radius: 16px;
  border: 1px solid rgba(249, 171, 0, .35);
}
.mk-demo-block__title { font-weight: 600; margin-bottom: 8px; }
.mk-demo-block__list { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mk-demo-link {
  flex: 1; min-width: 240px;
  padding: 14px 16px; background: var(--c-white); border-radius: 10px;
  text-decoration: none; color: var(--c-text);
  border: 1px solid var(--c-border);
}
.mk-demo-link:hover { border-color: var(--c-text); }
.mk-demo-link__title { font-weight: 600; font-size: 14px; }
.mk-demo-link__desc { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }

/* ── админка ── */
.admin-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px 0 22px; border-bottom: 1px solid var(--c-border); margin-bottom: 28px;
}
.admin-header h1 { font-size: 22px; font-weight: 700; flex: 1; }
.admin__label { font-size: 12px; color: var(--c-text-soft); }

.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th, .adm-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.adm-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--c-text-soft); font-weight: 500; }
.adm-table tr:hover td { background: var(--c-surface); }
.adm-table--narrow th, .adm-table--narrow td { padding: 8px 10px; font-size: 13px; }
.adm-table__empty { text-align: center; color: var(--c-text-soft); padding: 24px; }

/* На телефоне широкая таблица не должна вылезать за экран: кнопки в правой
   колонке становились недоступны для нажатия (тикет 47). Таблица скроллится
   внутри себя, страница остаётся шириной с экран. */
@media (max-width: 767px) {
  .adm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Таблица-список с кнопками действий: на телефоне строка разворачивается в
   карточку, чтобы кнопки были на экране без горизонтальной прокрутки. */
@media (max-width: 767px) {
  .adm-table--stack { display: block; overflow-x: visible; }
  .adm-table--stack thead { display: none; }
  .adm-table--stack tbody,
  .adm-table--stack tr,
  .adm-table--stack td { display: block; width: 100%; }
  .adm-table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
  .adm-table--stack td { border-bottom: 0; padding: 2px 0; }
  .adm-table--stack td:first-child { font-weight: 600; font-size: 15px; }
  .adm-table--stack .adm-actions { margin-top: 10px; }
  .adm-table--stack .adm-actions .btn { flex: 1 1 auto; }
}

/* Переключатель настройки: состояние + кнопка + пояснение.
   Общий — используется на страницах настроек уведомлений и правок документов. */
.toggle-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toggle-badge {
  font-size: 13px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; letter-spacing: .02em;
}
.toggle-badge--on { background: var(--c-success-soft); color: var(--c-success-strong); }
.toggle-badge--off { background: var(--c-danger-soft); color: var(--c-danger-strong); }
.toggle-hint { color: var(--c-text-muted); font-size: 14px; margin-top: 8px; }

/* Строка правки документов на странице раскатки. */
.doc-change { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.doc-change:last-child { border-bottom: 0; }
.doc-change__title { font-size: 15px; }

/* Двухколоночная форма админки (добавить инженера / менеджера / раздел).
   Общая — раньше одно и то же было продублировано в трёх шаблонах, и везде
   на телефоне поля вылезали за экран. */
.adm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.adm-form-grid > div { min-width: 0; }
.adm-form-grid input, .adm-form-grid select, .adm-form-grid textarea { max-width: 100%; }
.adm-form-grid__full { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .adm-form-grid { grid-template-columns: 1fr; }
}

/* ===== Админский дашборд (центр управления проектами) ===== */
.dash-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.dash-header__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.3px; }
.dash-help { margin: 12px 0; color: var(--c-text-soft); font-size: 13px; }

.pilot-panel {
  padding: 16px 18px; background: var(--c-warning-soft);
  border: 1px solid rgba(217, 119, 6, .25); border-radius: var(--r-lg);
  margin-bottom: 16px; box-shadow: var(--sh-xs);
}
.pilot-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.pilot-panel__title { font-weight: 600; font-size: 15px; }
.pilot-panel__sub { font-size: 13px; color: var(--c-text-muted); margin-top: 2px; }
.pilot-panel__stats { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.pilot-panel__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.pilot-stat { text-align: center; min-width: 70px; }
.pilot-stat__num { font-size: 22px; font-weight: 600; }
.pilot-stat__lbl { font-size: 11px; color: var(--c-text-soft); }
.pilot-stat--danger  .pilot-stat__num { color: var(--c-danger); }
.pilot-stat--success .pilot-stat__num { color: var(--c-success); }
.pilot-stat--warn    .pilot-stat__num { color: var(--c-warning); }
.pilot-stat--ready   .pilot-stat__num { color: var(--c-warning-strong); }
.pilot-stat--muted   .pilot-stat__num { color: var(--c-text-soft); }

.dash-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.dash-card {
  padding: 14px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  text-align: center; box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-md) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}
.dash-card:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); }
.dash-card__num { font-size: 28px; font-weight: 600; }
.dash-card__lbl { font-size: 12px; color: var(--c-text-soft); margin-top: 2px; }
.dash-card--blue   { border-color: rgba(37, 99, 235, .35); }
.dash-card--blue   .dash-card__num { color: var(--c-info-strong); }
.dash-card--green  { border-color: rgba(22, 163, 74, .35); }
.dash-card--green  .dash-card__num { color: var(--c-success-strong); }
.dash-card--orange { border-color: rgba(217, 119, 6, .35); }
.dash-card--orange .dash-card__num { color: var(--c-warning-strong); }
.dash-card--red    { border-color: rgba(220, 38, 38, .35); }
.dash-card--red    .dash-card__num { color: var(--c-danger); }
.dash-card--ready  { border-color: rgba(245, 158, 11, .5); background: var(--c-warning-pale); }
.dash-card--ready  .dash-card__num { color: var(--c-warning-strong); }

.proj-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-border);
  border-radius: var(--r-md); margin-bottom: 8px;
  text-decoration: none; color: inherit;
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out);
}
.proj-row:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.proj-row:active { transform: scale(.998); }
.proj-row--ok        { border-left-color: var(--c-success); }
.proj-row--attention { border-left-color: var(--c-accent); }
.proj-row--alert     { border-left-color: var(--c-warning); background: var(--c-warning-pale); }
.proj-row--ready     { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
.proj-row__left { flex: 1; min-width: 0; }
.proj-row__title { font-weight: 600; font-size: 15px; }
.proj-row__chip {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--c-success-soft); color: var(--c-success-strong);
  border-radius: var(--r-xs); font-size: 12px; font-weight: 400;
}
.proj-row__sub { font-size: 12px; color: var(--c-text-soft); margin-top: 2px; }
.proj-row__triggers { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.proj-row__trigger {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-xs);
  font-size: 12px; background: var(--c-surface); color: var(--c-text-muted);
}
.proj-row__trigger--critical { background: var(--c-warning-soft); color: var(--c-warning-strong); font-weight: 500; }
.proj-row__trigger--high     { background: var(--c-danger-soft); color: var(--c-danger-strong); }
.proj-row__trigger--normal   { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.proj-row__right { text-align: right; flex-shrink: 0; min-width: 140px; }
.proj-row__readiness { font-size: 24px; font-weight: 600; color: var(--c-text); }
.proj-row__next { font-size: 12px; color: var(--c-text); margin-top: 2px; }
.proj-row__next--muted { color: var(--c-text-soft); }
.proj-row__markers { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.row--conflict { background: rgba(217, 48, 37, .05); }

.adm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px; background: var(--c-surface); border-radius: 14px; }
.adm-form input, .adm-form select {
  padding: 12px 14px; font: inherit; font-size: 14px;
  border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg);
}
.adm-form input:focus { outline: none; border-color: var(--c-accent); }
.adm-form button { grid-column: 1 / -1; }

.adm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.code-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--c-surface); border-radius: 10px;
}
.code-link code { flex: 1; font-size: 13px; color: var(--c-text-muted); word-break: break-all; font-family: ui-monospace, monospace; }
.code-link--muted { opacity: 0.65; }

/* кнопки общие */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 22px; border-radius: var(--r-md);
  font-family: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text);
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-xs) var(--ease-out),
              background var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out);
}
.btn:hover { border-color: var(--c-text); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--c-accent); color: var(--c-white); border-color: var(--c-accent); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--c-accent-strong); border-color: var(--c-accent-strong); box-shadow: var(--sh-md); }
.btn--dark { background: var(--c-text); color: var(--c-white); border-color: var(--c-text); box-shadow: var(--sh-sm); }
.btn--dark:hover { box-shadow: var(--sh-md); }
.btn--sm { padding: 10px 14px; font-size: 13px; min-height: 44px; }
.btn--wide { width: 100%; margin-top: 12px; }
.btn--success { background: var(--c-success-mid); border-color: var(--c-success-mid); color: var(--c-white); box-shadow: var(--sh-sm); }
.btn--success:hover { background: var(--c-success-strong); border-color: var(--c-success-strong); }
.btn--danger { color: var(--c-danger-strong); border-color: var(--c-danger-border); background: var(--c-bg); }
.btn--danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger-border); }
.btn--ghost { color: var(--c-text-soft); background: var(--c-surface); }
.btn--ghost:hover { color: var(--c-text); }

/* DP-check (внутр.) */
.dp-rows-help {
  font-size: 13px; color: var(--c-text-soft); padding: 10px 12px;
  background: var(--c-surface); border-radius: 8px; margin: 8px 0 4px;
}
.dp-row { padding: 16px 0; border-bottom: 1px solid var(--c-border); transition: background 200ms; border-radius: 8px; padding-left: 12px; padding-right: 12px; }
.dp-row--saved { background: var(--c-success-pale); }
.dp-row__check { display: none; color: var(--c-success); font-weight: 700; margin-right: 6px; }
.dp-row--saved .dp-row__check { display: inline; }
.dp-row__title { font-size: 15px; font-weight: 500; }
.dp-row__desc { font-size: 13px; color: var(--c-text-soft); margin-top: 4px; }
.dp-row__hint { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; font-style: italic; }
.dp-row__current { font-size: 12px; color: var(--c-text-soft); margin-top: 8px; font-family: ui-monospace, monospace; }
.dp-row__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dp-row__inputs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dp-row__inputs select, .dp-row__inputs input {
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 14px; background: var(--c-white);
}
.dp-row__status { font-size: 12px; color: var(--c-text-soft); margin-left: 4px; min-width: 110px; }
.dp-row__status--saving { color: var(--c-text-muted); }
.dp-row__status--saved  { color: var(--c-success); }
.dp-row__status--error  { color: var(--c-danger-deep); }
.dp-row__form select, .dp-row__form input {
  padding: 8px 12px; font: inherit; font-size: 13px;
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg);
}
.dp-row__ai { color: var(--c-text); background: rgba(63, 119, 237, .12); padding: 1px 6px; border-radius: 4px; }

.dp-aibar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px; margin: 12px 0 16px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px;
}
.dp-aibar form { display: flex; gap: 8px; align-items: center; }
.dp-aibar__file { font-size: 13px; color: var(--c-text-soft); display: inline-flex; gap: 8px; align-items: center; }
.dp-aibar__last { font-size: 12px; color: var(--c-text-muted); margin-left: auto; }
.dp-aibar__err { color: var(--c-danger); font-size: 12px; margin-top: 4px; }
.dp-aibar__notice { width: 100%; margin: 0 0 var(--sp-3); }
.dp-aibar__file-line { margin-top: var(--sp-1); }
@media (max-width: 640px) {
  .dp-aibar { flex-direction: column; align-items: stretch; }
  .dp-aibar form { flex-wrap: wrap; }
  .dp-aibar__file { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .dp-aibar__file input[type="file"] { max-width: 100%; }
  .dp-aibar__last { margin-left: 0; }
}

/* «Что нужно сделать сейчас» — главный wizard-блок */
.bigstep {
  margin: 20px 0 28px;
  padding: 22px 22px 24px;
  background: var(--c-bg);
  border-radius: var(--r-2xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  transition: box-shadow var(--dur-md) var(--ease-out);
}
.bigstep:hover { box-shadow: var(--sh-lg); }
.bigstep__lead { display: inline-block; padding: 5px 10px; background: var(--c-bg);
                 border-radius: 6px; font-size: 12px; color: var(--c-text-soft);
                 letter-spacing: .02em; }
.bigstep__title { font-size: 22px; font-weight: 600; margin: 14px 0 12px; line-height: 1.25; }
.bigstep__list { list-style: none; padding: 0; margin: 0 0 12px; }
.bigstep__list li {
  position: relative; padding: 10px 12px 10px 38px;
  font-size: 15px; line-height: 1.4;
  border-bottom: 1px solid var(--c-border);
}
.bigstep__list li:last-child { border-bottom: 0; }
.bigstep__list li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute; left: 8px; top: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-bg); color: var(--c-text-soft);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.bigstep__list { counter-reset: li; }
.bigstep__list li.active { font-weight: 500; color: var(--c-text); }
.bigstep__list li.active::before {
  background: var(--c-text); color: var(--c-white);
}
.bigstep__note { font-size: 13px; color: var(--c-text-soft); margin: 0 0 18px; line-height: 1.45; }
.bigstep--done { background: var(--c-success-soft); border-color: var(--c-success-soft); }
.bigstep--done .bigstep__title { color: var(--c-success-mid); }
.btn--big { width: 100%; padding: 16px 22px; font-size: 16px; font-weight: 600; }

.hero__saved { color: var(--c-text-muted); font-size: 12px; margin-top: 6px; }

/* свёрнутые «детали» под главным блоком */
.folded { margin: 8px 0; }
.folded > summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px; background: var(--c-bg); border-radius: 12px;
  font-size: 13px; color: var(--c-text-soft);
  display: flex; gap: 8px; align-items: center;
}
.folded > summary::before {
  content: "▸"; font-size: 10px; transition: transform .15s;
}
.folded[open] > summary::before { transform: rotate(90deg); }

/* большие карточки-выборы */
.choice-card {
  display: block; width: 100%; text-align: left;
  padding: 18px 20px; margin: 12px 0;
  background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  color: var(--c-text); text-decoration: none; cursor: pointer;
  font: inherit;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out);
}
.choice-card:hover { border-color: var(--c-border-strong); transform: translateY(-2px); box-shadow: var(--sh-md); }
.choice-card:active { transform: scale(.99); box-shadow: var(--sh-sm); }
.choice-card__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.choice-card__sub { font-size: 13px; color: var(--c-text-soft); line-height: 1.4; }
.choice-card--soft { background: var(--c-bg); }
.step-desc { color: var(--c-text-soft); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

.done-actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 32px; }

/* утилиты, разрешённые в шаблонах вместо inline style */
.center-row { text-align: center; margin-top: 20px; }
.center-row--lg { margin-top: 24px; }
.block__sub-title--spaced { margin-top: 32px; }
.project-card__progress--spaced { margin-top: 14px; }
.question__answered-q { font-size: 13px; color: var(--c-text-soft); margin-bottom: 2px; }
.question__answered + .question__answered { margin-top: 10px; }
.mk-section--center { text-align: center; }
.mk-lede { color: var(--c-text-muted); font-size: 14px; max-width: 580px; margin: 0 auto 24px; }

/* блок ТУ у клиента */
.tu-block { margin-top: 10px; }
.tu-block summary { cursor: pointer; padding: 12px 14px; background: var(--c-bg); border-radius: 10px; font-size: 14px; }
.tu-block summary::marker { color: var(--c-text-muted); }
.tu-block > .tu-form { margin-top: 14px; }

/* Страница загрузки менеджера + ТУ-форма */
.upload-form {
  display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center;
}
.upload-form input[type="file"] {
  flex: 1; min-width: 200px;
  padding: 10px 12px; border: 1px dashed var(--c-border); border-radius: 10px;
  background: var(--c-bg); font: inherit; font-size: 13px;
}
.tu-form { display: flex; flex-direction: column; gap: 14px; }
.tu-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.tu-row__title { font-weight: 500; font-size: 14px; }
.tu-row__desc { font-size: 12px; color: var(--c-text-soft); }
.tu-row__hint { font-size: 12px; color: var(--c-text-muted); font-style: italic; }
.tu-row select {
  padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg);
  max-width: 380px;
}

/* AI-индикатор обработки */
.ai-running__bar {
  margin-top: 10px; height: 6px; background: var(--c-bg);
  border-radius: 3px; overflow: hidden;
}
.ai-running__bar > div {
  height: 100%; width: 35%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-success-mid), var(--c-accent));
  background-size: 200% 100%;
  animation: ai-bar 1.4s linear infinite;
}
@keyframes ai-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* шаг (счётчик + прогресс) */
.step-header {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0 8px;
}
.step-header__counter { margin-left: auto; font-size: 13px; color: var(--c-text-soft); font-weight: 500; }
.step-header__saved { font-size: 12px; color: var(--c-text-muted); }
.step-progress { height: 4px; background: var(--c-bg); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.step-progress > div { height: 100%; background: var(--c-text); transition: width .3s; }
.step-title { font-size: 20px; font-weight: 600; margin: 0 0 18px; line-height: 1.3; }

.ai-card--big { padding: 22px; }
.ai-card--big .ai-card__title { font-size: 19px; }
.ai-card__btns--three { flex-direction: column; gap: 10px; }
.ai-card__btns--three .btn { width: 100%; justify-content: flex-start; }

/* AI-fab на главной клиента */
.ai-fab {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-top: 12px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-success-mid) 100%);
  border-radius: 14px; color: var(--c-white); text-decoration: none;
  font-weight: 500; font-size: 15px;
  box-shadow: 0 4px 14px rgba(63, 119, 237, .25);
  transition: transform .15s;
}
.ai-fab:hover { transform: translateY(-1px); }
.ai-fab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 36px; padding: 0 10px;
  background: rgba(255,255,255,.2); border-radius: 8px;
  font-weight: 600; font-size: 15px;
}
.ai-fab__text { flex: 1; }
.ai-fab svg { opacity: .9; }

/* AI-подтверждения клиентом */
.ai-review-header { padding: 24px 0 16px; }
.ai-review-header h1 { font-size: 22px; margin: 8px 0 8px; }
.ai-review-header__sub { color: var(--c-text-soft); font-size: 14px; line-height: 1.5; }
.ai-cards { display: flex; flex-direction: column; gap: 14px; padding: 0 0 16px; }
.ai-card {
  background: var(--c-surface); border-radius: 16px; padding: 18px;
  border: 1px solid var(--c-border);
  transition: opacity .25s, transform .25s;
}
.ai-card--done { opacity: .35; transform: scale(.98); }
.ai-card__title { font-size: 16px; font-weight: 600; }
.ai-card__sub { font-size: 13px; color: var(--c-text-soft); margin-top: 4px; }
.ai-card__finding {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; margin-top: 12px;
  background: rgba(63, 119, 237, .08); border-radius: 10px;
  font-size: 14px;
}
.ai-card__icon { font-size: 18px; }
.ai-card__quote {
  margin-top: 10px; padding: 10px 14px;
  font-size: 13px; line-height: 1.4; color: var(--c-text-soft);
  background: var(--c-bg); border-left: 3px solid var(--c-border);
  border-radius: 4px;
}
.ai-card__quote-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; opacity: .6; margin-bottom: 4px; }
.ai-card__btns { display: flex; gap: 10px; margin-top: 14px; }
.ai-card__btns .btn { flex: 1; }
.ai-review-foot { padding: 8px 0 32px; }

@media (max-width: 640px) {
  .ai-card__btns { flex-direction: column; }
}

/* документы */
.docs-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.docs-actions form { display: inline-flex; }

.docs-list { list-style: none; padding: 0; margin: 0; }
.docs-list li {
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.docs-list a { color: var(--c-text); font-weight: 500; }
.docs-list__meta { color: var(--c-text-soft); font-size: 12px; }
.docs__meta { color: var(--c-text-soft); font-size: 12px; margin-left: auto; }

.doc-body { background: var(--c-surface); padding: 24px 28px; line-height: 1.55; }
.doc-body h1 { margin: 0 0 12px; font-size: 22px; }
.doc-body h2 { margin: 18px 0 8px; font-size: 17px; }
.doc-body h3 { margin: 14px 0 6px; font-size: 15px; }
.doc-body ul { padding-left: 22px; }
.doc-body li { margin: 4px 0; }
.doc-body p { margin: 8px 0; }
.doc-body hr { margin: 16px 0; border: 0; border-top: 1px dashed var(--c-border); }
.doc-md {
  background: var(--c-bg); padding: 12px; border-radius: 8px;
  font-size: 12px; color: var(--c-text-soft); overflow-x: auto;
  font-family: ui-monospace, monospace; white-space: pre-wrap;
}

/* trace */
.trace-block {
  padding: 18px; margin-bottom: 14px;
  background: var(--c-surface); border-radius: 12px; border: 1px solid var(--c-border);
}
.trace-block--conflict { background: var(--c-danger-soft); border-color: rgba(217, 48, 37, .25); }
.trace__title { font-size: 15px; margin-bottom: 8px; }
.trace__title code { font-size: 12px; color: var(--c-text-soft); }
.trace__source { color: var(--c-text-soft); font-size: 13px; }
.trace__conflict { color: var(--c-danger); margin-left: 8px; font-size: 12px; }
.trace__sources { font-size: 13px; color: var(--c-text-muted); margin-bottom: 8px; }
.trace__src { display: inline-block; margin-right: 10px; padding: 3px 9px; background: var(--c-bg); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
.trace__tasks, .trace__questions { font-size: 13px; margin-top: 8px; }
.trace__tasks ul, .trace__questions ul { padding-left: 20px; margin-top: 4px; }
.trace__tasks li, .trace__questions li { margin-top: 4px; }
.trace__tasks li.archived, .trace__questions li.archived { opacity: .5; }
.trace__tasks li.answered, .trace__questions li.answered { color: var(--c-success); }
.trace__tasks small, .trace__questions small { color: var(--c-text-soft); }

/* status pills */
.status {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c-grey-soft); color: var(--c-text-muted);
  white-space: nowrap;
}
.status--created, .status--awaiting_client { background: var(--c-grey-soft); }
.status--client_started, .status--client_partial { background: var(--c-warning-soft); color: var(--c-warning); }
.status--needs_help { background: var(--c-danger-soft); color: var(--c-danger); }
.status--needs_review, .status--ready_for_call { background: var(--c-accent-soft); color: var(--c-accent); }
.status--ready_to_launch, .status--client_confirmed { background: var(--c-success-soft); color: var(--c-success); }

/* feedback widget */
.fb-fab {
  position: fixed; right: 20px; bottom: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-text); color: var(--c-white); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-md); z-index: 100;
  transition: transform var(--dur-sm) var(--ease-spring), box-shadow var(--dur-md) var(--ease-out);
}
.fb-fab:hover { box-shadow: var(--sh-lg); }
.fb-fab:active { transform: scale(.92); }
/* Когда есть sticky bottom-action — поднимаем виджет чтобы не перекрывался */
@media (max-width: 767px) {
  body.has-bottom-action .fb-fab { bottom: 96px; }
}
/* При focus на любом текстовом поле — сдвигаем FAB, чтобы не перекрывал ввод.
   Класс ставится JS-обработчиком в app.js (focusin/focusout). */
body.is-input-focus .fb-fab {
  transform: translateY(80px); opacity: 0; pointer-events: none;
}
body.is-input-focus .fb-panel { display: none; }
/* (старое .fb-fab:hover background:#000 — заменено блоком выше) */
.fb-panel {
  position: fixed; right: 20px; bottom: 84px;
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--c-white); border-radius: 14px;
  padding: 18px; box-shadow: 0 12px 40px var(--c-shadow-blob);
  border: 1px solid var(--c-border); z-index: 99;
}
.fb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fb-header button { border: none; background: none; font-size: 24px; cursor: pointer; color: var(--c-text-soft); }
.fb-panel textarea {
  width: 100%; min-height: 90px; padding: 10px;
  font: inherit; font-size: 13px;
  border: 1px solid var(--c-border); border-radius: 10px; resize: vertical;
  margin-bottom: 8px;
}
.fb-panel input[type=file] { font-size: 12px; margin-bottom: 10px; display: block; }
.hidden { display: none !important; }

.success-banner {
  background: var(--c-success-soft); color: var(--c-success);
  padding: 12px 16px; border-radius: 12px; margin-top: 20px;
  font-size: 14px;
  border: 1px solid rgba(52, 168, 83, .25);
}

/* responsive */
@media (max-width: 720px) {
  .page { padding: 0 16px 100px; }
  .hero { padding: 24px 0 18px; }
  .hero__name { font-size: 22px; }
  .mk-hero { padding: 60px 0 40px; }
  .mk-hero__title { font-size: 30px; }
  .mk-hero__sub { font-size: 16px; }
  .mk-grid--3, .mk-grid--2 { grid-template-columns: 1fr; }
  .adm-form { grid-template-columns: 1fr; }
  .project-card__label { min-width: 80px; font-size: 11px; }
  .block__title { font-size: 17px; }
  .block__desc { padding-left: 0; margin-top: 8px; }
  .section-card { padding: 14px 16px; }
  .section-card__icon { width: 36px; height: 36px; }
}

/* ===== Переключатель «По одному / Списком» ===== */
.mode-switch {
  display: flex;
  gap: 4px;
  background: var(--c-surface);
  padding: 4px;
  border-radius: 12px;
  margin: 12px 0 16px;
}
.mode-switch__btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted, var(--c-text-muted));
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}
.mode-switch__btn:hover { color: var(--c-text, var(--c-text)); }
.mode-switch__btn:active { transform: scale(0.97); }
.mode-switch__btn.is-active {
  background: var(--c-white);
  color: var(--c-text, var(--c-text));
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ===== Карточки списка (режим «Списком») ===== */
.question--list {
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: q-list-in 320ms ease forwards;
}
.question--list.is-answered {
  opacity: 0.55;
  transition: opacity 320ms ease;
}
@keyframes q-list-in {
  to { opacity: 1; transform: none; }
}
.question__num {
  display: inline-block;
  background: var(--c-surface);
  color: var(--c-text-muted, var(--c-text-muted));
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* ===== Ободрение + дополнительные комментарии ===== */
.encourage {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--c-warning-pale);
  border-radius: 8px;
  font-size: 14px;
  color: var(--c-warning-strong);
  animation: encourage-pop 350ms ease;
}
@keyframes encourage-pop {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: none; opacity: 1; }
}
.encourage-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.45;
}
.extra-comment {
  margin-top: 12px;
  border-top: 1px dashed var(--c-border);
  padding-top: 8px;
}
.extra-comment summary {
  cursor: pointer;
  color: var(--c-text-muted);
  font-size: 13px;
  padding: 4px 0;
  list-style: none;
}
.extra-comment summary::-webkit-details-marker { display: none; }
.extra-comment summary:hover { color: var(--c-text); }
.extra-comment__input {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
/* Алиас .btn--small → .btn--sm (исторический дубль). Тот же таргет 44px. */
.btn--small { padding: 10px 14px; font-size: 13px; min-height: 44px; }

.section-comment {
  margin-top: 24px;
  padding: 16px;
  background: var(--c-surface);
  border-radius: 12px;
}
.section-comment__head { font-weight: 600; margin-bottom: 4px; }
.section-comment__sub { font-size: 13px; color: var(--c-text-muted); margin-bottom: 10px; }
.section-next { margin-top: 20px; }
.section-next__hint { font-size: 13px; color: var(--c-text-muted); text-align: center; margin-top: 6px; }
.section-comment__input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 10px;
  box-sizing: border-box;
  background: var(--c-white);
}
.question__answered-mark {
  padding: 10px 12px;
  background: var(--c-success-soft);
  color: var(--c-success-strong);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* ===== Общая история ответов ===== */
.answer-row {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--c-white);
  text-decoration: none;
  color: inherit;
}
.answer-row--editable:hover { background: var(--c-surface); border-color: var(--c-border-strong); }
.answer-row__head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.answer-row__title { font-weight: 500; font-size: 14px; }
.answer-row__source {
  font-size: 11px; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  background: var(--c-surface-tint); color: var(--c-text-muted);
}
.answer-row__source--ai { background: var(--c-info-pale); color: var(--c-info); }
.answer-row__source--client { background: var(--c-success-soft); color: var(--c-success-strong); }
.answer-row__source--manager { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.answer-row__source--answered { background: var(--c-success-soft); color: var(--c-success-strong); }
.answer-row__source--pending { background: var(--c-danger-soft); color: var(--c-danger-deep); }
.answer-row__source--help_requested { background: var(--c-warning-pale); color: var(--c-warning-strong); }
.answer-row__value { margin-top: 4px; color: var(--c-text); font-weight: 500; }
.answer-row__hint { margin-top: 4px; font-size: 12px; color: var(--c-text-muted); }
.answer-row__comment { margin-top: 6px; font-size: 13px; color: var(--c-text-muted); font-style: italic; }

/* ===== Маленький значок источника параметра (везде где показывается значение) =====
   🤖     — AI распознал (ещё не подтверждено клиентом)
   🤖✓   — AI распознал + клиент подтвердил
   (нет) — задано вручную (менеджер или клиент сам, без AI)            */
.src-badge {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}
.src-badge--ai          { background: var(--c-info-pale); color: var(--c-info); }
.src-badge--confirmed   { background: var(--c-success-soft); color: var(--c-success-strong); }

/* ===== Алерт «срочное» (например клиент просит помощь) — крупно, заметно ===== */
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px; border-radius: 12px; margin: 12px 0;
  border: 1px solid transparent;
}
.alert--urgent {
  background: var(--c-danger-soft); border-color: var(--c-danger-soft); color: var(--c-warning-strong);
  box-shadow: 0 2px 6px rgba(220, 60, 30, .12);
}
.alert__icon { font-size: 30px; line-height: 1; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-size: 17px; font-weight: 600; color: var(--c-danger-strong); }
.alert__list { margin: 8px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--c-danger-strong); }
.alert__hint { font-size: 12px; color: var(--c-warning-strong); margin-top: 8px; opacity: .85; }

/* ===== Тост «Сохранено» (нативный отклик на любое сохранение) ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(80px);
  background: var(--c-text);
  color: var(--c-white);
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--c-shadow-blob-strong);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 240ms cubic-bezier(.2,.7,.3,1);
  z-index: 1000;
  max-width: 92vw;
  white-space: nowrap;
}
.toast.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--success { background: var(--c-success-strong); }
.toast--error   { background: var(--c-danger-deep); }

/* Кнопка во время отправки формы — заблокирована и со «спиннером»  */
.btn[data-saving="1"], button[data-saving="1"] {
  opacity: .65;
  cursor: wait;
  pointer-events: none;
}

/* ===== Финальный экран «Готовые проекты» ===== */
.deliv-card {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--c-white);
  transition: border-color 200ms ease;
}
.deliv-card--in_progress { background: var(--c-surface); }
.deliv-card--submitted { border-color: var(--c-info); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.deliv-card--corrections { border-color: var(--c-warning); background: var(--c-warning-pale); }
.deliv-card--approved { border-color: var(--c-success); background: var(--c-success-pale); }
.deliv-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.deliv-card__title { font-size: 18px; font-weight: 600; }
.deliv-card__sub { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.deliv-card__body { color: var(--c-text); font-size: 14px; line-height: 1.5; margin: 8px 0; }
.deliv-card__note {
  margin-top: 8px; padding: 10px;
  background: rgba(0,0,0,0.04); border-radius: 8px; font-size: 13px;
}
.deliv-status {
  display: inline-block; padding: 6px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
}
.deliv-status--in_progress { background: var(--c-surface-tint); color: var(--c-text-muted); }
.deliv-status--submitted { background: var(--c-info-soft); color: var(--c-info-strong); }
.deliv-status--corrections { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.deliv-status--approved { background: var(--c-success-soft); color: var(--c-success-strong); }
.deliv-actions { margin-top: 10px; }
.deliv-approve-form { flex: 1; }
.deliv-corr-form { margin-top: 10px; }
.deliv-corr-form__send { margin-top: 8px; }
.deliv-approved-link { margin-top: 8px; }

/* ===== Универсальный прогресс загрузки больших файлов ===== */
.upload-progress { margin-top: 10px; display: grid; gap: 8px; }
.up-item {
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-white); font-size: 13px;
}
.up-item--done { border-color: var(--c-success); background: var(--c-success-pale); }
.up-item--error { border-color: var(--c-danger-deep); background: var(--c-danger-soft); }
.up-item__name { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.up-item__pct { font-weight: 500; color: var(--c-info); flex-shrink: 0; }
.up-item--done .up-item__pct { color: var(--c-success); }
.up-item--error .up-item__pct { color: var(--c-danger-deep); }
.up-item__bar { height: 4px; background: var(--c-border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.up-item__bar > div { height: 100%; background: var(--c-info); transition: width 200ms; }
.up-item--done .up-item__bar > div { background: var(--c-success); }

/* ===== Универсальные заголовки страниц и подзаголовки (всех админ-экранов) ===== */
.page__title { margin: var(--sp-2) 0 var(--sp-3); font-size: 24px; font-weight: 600; color: var(--c-text); }
.page__lead { color: var(--c-text-muted); margin-bottom: var(--sp-4); font-size: 14px; line-height: 1.5; }

/* ===== Универсальные формы (использовать в админке вместо inline style="display:grid; gap:8px") ===== */
/* min-width:0 — иначе элемент grid растягивается под самый длинный вариант
   в <select> и распирает страницу на телефоне (было 905px при экране 390). */
.form-stack { display: grid; gap: var(--sp-2); }
.form-stack > * { min-width: 0; }
.form-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.form-row--spaced { margin-bottom: var(--sp-4); }
.form-row > .form-row__grow { flex: 1; min-width: 160px; }
.form-row > .form-row__grow-2 { flex: 2; min-width: 200px; }
.input-soft, .select-soft, .textarea-soft {
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  font: inherit;
  background: var(--c-white);
  color: var(--c-text);
  min-height: 44px;     /* iOS Apple HIG — палец */
  box-sizing: border-box;
  max-width: 100%;      /* select с длинными вариантами распирал страницу на телефоне */
}
.textarea-soft { font-family: inherit; resize: vertical; min-height: 88px; }
/* Поля переписки (вопрос менеджеру, ответ инженеру, комментарии к заданию):
   инженер не видел свой текст целиком (msg 1308). Просторные + авто-рост в app.js. */
.textarea-soft--msg { min-height: 160px; line-height: 1.5; width: 100%; max-width: 720px; }
.input-soft:focus, .select-soft:focus, .textarea-soft:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
  border-color: var(--c-accent);
}

/* ===== Универсальная карточка-блок с приоритетом-полосой (decisions, meetings) ===== */
.block--priority-critical { border-left: 4px solid var(--c-danger-deep); }
.block--priority-high     { border-left: 4px solid var(--c-warning); }
.block--priority-normal   { border-left: 4px solid var(--c-info); }
.block--priority-low      { border-left: 4px solid var(--c-text-muted); }
.card__head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.card__title { font-size: 15px; font-weight: 600; color: var(--c-text); }
.card__body  { color: var(--c-text); margin-top: var(--sp-1); font-size: 14px; line-height: 1.5; }
.card__meta  { margin-top: var(--sp-1); font-size: 12px; color: var(--c-text-muted); }
.card__quote {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--c-text);
}
.card__actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-3); flex-wrap: wrap; }
.form-inline { margin: 0; display: inline; }

/* ===== Универсальные badge'и (статусы, источники, теги) ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 500;
  background: var(--c-surface-tint);
  color: var(--c-text-muted);
  white-space: nowrap;
  max-width: 100%;
}
/* badge с длинным текстом (например, «менеджер предложил: ...») должен переноситься,
   иначе ломает раскладку на мобиле */
.badge--wrap {
  white-space: normal;
  word-break: break-word;
  align-items: flex-start;
  line-height: 1.35;
}
.badge--success { background: var(--c-success-soft); color: var(--c-success-strong); }
.badge--warn    { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.badge--danger  { background: var(--c-danger-soft); color: var(--c-danger-deep); }
.badge--info    { background: var(--c-info-soft); color: var(--c-info-strong); }
.badge--neutral { background: var(--c-surface-tint); color: var(--c-text-muted); }
.badge--pill    { border-radius: var(--r-pill); }
.badge--off     { background: #3a3a3c; color: var(--c-white); }
.badge--ml      { margin-left: 8px; }

/* ===== form-group helpers ===== */
.form-group { margin-top: 0; }
.form-group--mt { margin-top: 12px; }
.form__label { display: block; font-size: 13px; color: var(--c-text-soft); margin-bottom: 6px; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio { display: flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; }
.radio input[type="radio"] { cursor: pointer; }

/* ===== Универсальные плашки-уведомления (notice) — везде где нужен цветной блок-подсказка ===== */
.notice {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border-left: 4px solid var(--c-border-strong);
  background: var(--c-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
}
.notice--warn    { background: var(--c-warning-pale); border-left-color: var(--c-warning); }
.notice--success { background: var(--c-success-pale); border-left-color: var(--c-success); }
.notice--info    { background: var(--c-info-pale); border-left-color: var(--c-info); }
.notice--danger  { background: var(--c-danger-soft); border-left-color: var(--c-danger); }
.notice__title { font-weight: 600; margin-bottom: var(--sp-1); }
.notice__sub   { font-size: 13px; color: var(--c-text-muted); margin-top: 2px; }

/* ===== Readiness-балл (без inline-style в JS-builder) ===== */
.readiness-score {
  font-size: 36px;
  font-weight: 600;
}
.readiness-score--ok   { color: var(--c-success); }
.readiness-score--warn { color: var(--c-warning); }
.readiness-score--bad  { color: var(--c-danger); }
.readiness-row {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

/* ===== Мелкий метаданный текст (12px серый) — для multiple use-cases ===== */
.text-meta { font-size: 12px; color: var(--c-text-muted); }

/* ===== client_home — todo-cards (JS-injected плашки уведомлений) ===== */
.client-todos { margin: var(--sp-3) 0; }
.todo-card {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
  background: var(--c-warning-pale);
  border-left: 4px solid var(--c-warning);
  transition: transform var(--dur-sm) var(--ease-out);
}
.todo-card:hover { transform: translateY(-1px); }
.todo-card--warn { background: var(--c-warning-pale); border-left-color: var(--c-warning); }
.todo-card--info { background: var(--c-info-pale); border-left-color: var(--c-info); }

/* ===== bigstep — мелкий hint под текстом ===== */
.bigstep__hint { font-size: 14px; color: var(--c-text-muted); margin-top: var(--sp-2); }

/* ===== Подсказки секций с прогрессом — цветные tone-варианты ===== */
.section-card__hint--done    { color: var(--c-success-strong); }
.section-card__hint--partial { color: var(--c-info); }

/* ===== Ряд кнопок-карточек (часто на главной клиента) ===== */
.btn-row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.btn-row__item { flex: 1; min-width: 180px; }

/* ===== Кнопка с warning-tone фоном (для подсказки "корректировки") ===== */
.btn--warn-tint {
  background: var(--c-warning-pale);
  border-color: var(--c-warning-pale);
  color: var(--c-warning-strong);
}
.btn--warn-tint:hover { background: var(--c-warning-soft); border-color: var(--c-warning-soft); }

/* ===== Notice + кнопка-CTA внутри ===== */
.notice__cta { margin-top: var(--sp-3); }

/* ===== Готовность проекта (admin_project.html) — без JS-конкатенации стилей ===== */
.readiness-data            { color: var(--c-text); }
.readiness-data--loading   { color: var(--c-text-muted); font-size: 14px; }
.readiness-breakdown       { font-size: 13px; color: var(--c-text-muted); }
.readiness-group           { margin-top: var(--sp-2); }
.readiness-group__title    { font-weight: 600; }
.readiness-group__title--bad  { color: var(--c-danger-deep); }
.readiness-group__title--warn { color: var(--c-warning-strong); }
.readiness-list            { margin: var(--sp-1) 0; padding-left: 22px; }
.readiness-list__hint      { color: var(--c-text-muted); font-style: italic; }

/* ===== admin_project — мелкие классы для замены inline-стилей ===== */
.link-ready { font-size: 12px; color: var(--c-success); margin-top: var(--sp-1); }
.notice-list { margin: var(--sp-1) 0 0; padding-left: 22px; }
.link-override { margin-top: var(--sp-2); }
.link-override__summary { font-size: 12px; color: var(--c-text-muted); cursor: pointer; }
.link-override__link { margin-top: var(--sp-1); opacity: 0.7; }
/* 0008: блок ручного подтверждения «Я всё проверила сама» */
.link-override-divider { text-align: center; color: var(--c-text-soft);
                          font-size: 12px; margin: var(--sp-3) 0 var(--sp-2);
                          letter-spacing: 0.05em; }
.form-mt-2 { margin-top: var(--sp-2); }
.page__nav { margin-bottom: var(--sp-2); }
.btn--self-start { justify-self: start; }

/* ===== Универсальные form-grid (2 и 3 колонки) ===== */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }

/* ===== Универсальная карточка-строка события (timeline / events / history) ===== */
.event-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-border-strong);
  background: var(--c-bg);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-xs);
  border: 1px solid var(--c-border);
  border-left-width: 3px;
}
.event-row--bordered { border: 1px solid var(--c-border); border-left-width: 3px; }
.event-row__time { flex-shrink: 0; width: 130px; font-size: 12px; color: var(--c-text-muted); }
.event-row__body { flex: 1; min-width: 0; }
.event-row__title { font-weight: 500; }
.event-row__desc { font-size: 13px; color: var(--c-text); margin-top: 2px; }
.event-row__meta { font-size: 11px; color: var(--c-text-muted); margin-top: var(--sp-1); }

.event-row--important-critical { border-left-color: var(--c-danger-deep); background: var(--c-danger-soft); }
.event-row--important-high     { border-left-color: var(--c-warning);    background: var(--c-warning-pale); }
.event-row--important-normal   { border-left-color: var(--c-info);       background: var(--c-surface); }
.event-row--important-low      { border-left-color: var(--c-border-strong); background: var(--c-surface); }
.event-row--source-client      { border-left-color: var(--c-success); }
.event-row--source-ai          { border-left-color: #7c3aed; }
.event-row--source-manager     { border-left-color: var(--c-info); }

/* ===== Stats-bar (admin_rules_draft, etc) ===== */
.stats-bar {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.stats-bar__item--keep { color: var(--c-success-strong); }
.stats-bar__item--edit { color: var(--c-warning-strong); }
.stats-bar__item--drop { color: var(--c-danger-deep); }

/* ===== Утилитарные text-color ===== */
.text-success { color: var(--c-success-strong); }
.text-warn    { color: var(--c-warning-strong); }
.text-danger  { color: var(--c-danger-deep); }
.text-info    { color: var(--c-info-strong); }
.text-muted   { color: var(--c-text-muted); }
.text-center  { text-align: center; }

/* ===== Cell-color (для td в адм-таблицах статусов) ===== */
.cell-status--ok      { color: var(--c-success); }
.cell-status--warn    { color: var(--c-warning); }
.cell-status--danger  { color: var(--c-danger-deep); }

/* ===== Список с табами компактный (ul) ===== */
.list-tight { margin: var(--sp-1) 0; padding-left: 22px; }
.list-tight-sm { margin: 2px 0; padding-left: 22px; }

/* ===== Полная ширина (для кнопки в форме) ===== */
.w-100 { width: 100%; }

/* ===== Группа inline-чекбоксов (label-checkbox) ===== */
.checkbox-row {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) 0;
  font-size: 13px;
}

/* ===== Inline-код стиля «pill» (вместо inline-style на code) ===== */
.code-pill {
  background: var(--c-surface);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-xs);
  font-size: 13px;
  font-family: monospace;
}
.code-tag {
  background: var(--c-surface-tint);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

/* ===== Notice-action-box (большая плашка с CTA внутри, для admin_rules_draft "Применить") ===== */
.action-box {
  margin: var(--sp-6) 0;
  padding: var(--sp-4);
  background: var(--c-warning-pale);
  border: 1px solid var(--c-warning);
  border-radius: var(--r-sm);
}
.action-box__cta { margin-top: var(--sp-3); }

/* ===== Карточка участника (admin_participants) — единый paddings/border ===== */
.entity-card {
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  background: var(--c-bg);
}
.entity-card--archived { background: var(--c-surface); opacity: 0.6; }

/* ===== Универсальная rule-карточка (admin_rules) ===== */
.rule-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--c-bg);
}
.rule-card--off { background: var(--c-surface); opacity: 0.65; }
.rule-card__row { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.rule-card__main { flex: 1; min-width: 280px; }
.rule-card__side { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 140px; }
.rule-card__tags { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-1); flex-wrap: wrap; }
.rule-card__id { font-family: monospace; font-size: 12px; color: var(--c-text-muted); }
.rule-card__trigger { font-weight: 500; margin-bottom: var(--sp-1); }
.rule-card__cond { font-size: 12px; color: var(--c-text-muted); font-family: monospace; margin-bottom: var(--sp-2); }
.rule-card__block { margin-top: var(--sp-2); }
.rule-card__block strong { font-size: 13px; }
.rule-card__block-sub { margin-top: 2px; }
.rule-card__edit { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.rule-card__edit-stack { display: grid; gap: var(--sp-2); }
.rule-card__edit-actions { display: flex; gap: var(--sp-2); }

/* ===== Notice ack inside .block (replicate "approval log row" из admin_participants) ===== */
.approval-row {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-success);
  background: var(--c-success-pale);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-xs);
}
.notif-row {
  padding: var(--sp-1) var(--sp-3);
  border-left: 3px solid var(--c-success);
  background: var(--c-bg);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-xs);
  font-size: 13px;
}
.notif-row--sent    { border-left-color: var(--c-success); }
.notif-row--skipped { border-left-color: var(--c-warning); }
.notif-row--error   { border-left-color: var(--c-danger-deep); }

/* ===== Sub-heading (h3) внутри блока ===== */
.sub-h3 { font-size: 14px; margin: 0 0 var(--sp-2); font-weight: 600; }
.sub-h3--spaced { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }

/* ===== AI-summary block (фон + текст внутри встречи) ===== */
.ai-summary {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-xs);
}
.ai-summary--pre {
  white-space: pre-wrap;
  line-height: 1.5;
  margin-top: 4px;
}

/* ===== Доп блоки (decisions/tasks/questions) внутри карточки встречи ===== */
.meet-block { margin-top: var(--sp-2); }
.meet-block ul { margin: 4px 0; padding-left: 22px; }

/* ===== Confirm-row под содержимым (подтверждено NN-NN-NN) ===== */
.confirm-row {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-success-soft);
  border-radius: var(--r-xs);
  color: var(--c-success-strong);
}

/* ===== Форма-подтверждение (после .confirm-row или внутри блока) ===== */
.confirm-form { margin-top: var(--sp-3); }

/* ===== Two-button row (Согласен / Не согласен) внутри карточки ===== */
.confirm-actions { display: flex; gap: var(--sp-2); }
.confirm-actions > .btn { flex: 1; }
.btn--accept { background: var(--c-success-mid); border-color: var(--c-success-mid); color: var(--c-white); }
.btn--reject { color: var(--c-danger-deep); border-color: var(--c-danger-deep); }

/* ===== Section-note (общий комментарий к разделу — bg yellow) ===== */
.section-note {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-warning-pale);
  border-radius: var(--r-xs);
}
.section-note__head { font-size: 13px; font-weight: 600; }
.section-note__body { margin-top: var(--sp-1); white-space: pre-wrap; }

/* ===== Empty/center в таблице ===== */
.tbl-empty { text-align: center; color: var(--c-text-muted); }

/* ===== Заголовки-группы в client_all_answers ===== */
.answers-group-head { margin-bottom: var(--sp-3); }
.answers-group-head--spaced { margin: var(--sp-4) 0 var(--sp-3); }
.all-answers-actions { margin-top: var(--sp-5); flex-wrap: wrap; gap: var(--sp-2); }

/* ===== extras-actions / center-row (общая) ===== */
.center-row--wrap { flex-wrap: wrap; gap: var(--sp-2); }

/* ===== adm-form: полная ширина (заменяет style="grid-column: 1/-1") ===== */
.adm-form__full { grid-column: 1 / -1; }
.adm-form__section-head { padding: var(--sp-2) 0 var(--sp-1); color: var(--c-text); font-weight: 600; }

/* ===== Hint под формой загрузки ===== */
.upload-form__hint { margin-top: var(--sp-1); }

/* ===== Чипы выбора секций (admin_list — какие разделы заказали) ===== */
.section-chip-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.section-chip {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-xs);
  cursor: pointer;
}


/* ===== admin_rules_draft — карточки черновика правил Светофора (перенесено из template <style>) ===== */
.draft-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--c-white);
  transition: border-color var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out);
}
.draft-card--keep { border-color: var(--c-success); background: var(--c-success-pale); }
.draft-card--edit { border-color: var(--c-warning); background: var(--c-warning-pale); }
.draft-card--drop { border-color: var(--c-border-strong); background: var(--c-surface); opacity: 0.55; }
.draft-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.draft-card__num { font-family: monospace; font-size: 12px; color: var(--c-text-muted); }
.draft-card__chip {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  font-size: 12px;
  background: var(--c-success-soft);
  color: var(--c-success-strong);
}
.draft-card__chip--blocker { background: var(--c-danger-soft); color: var(--c-danger-deep); }
.draft-card__chip--warning { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.draft-card__decision { font-weight: 500; font-size: 14px; }
.draft-card__body { font-size: 14px; line-height: 1.5; }
.draft-card__body code {
  background: var(--c-surface-tint);
  padding: 2px var(--sp-1);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}
.draft-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.btn-decision {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  border: 1px solid var(--c-border-strong);
  background: var(--c-white);
  cursor: pointer;
  font-size: 14px;
}
.btn-decision:hover { background: var(--c-surface); }
.btn-decision--keep:hover { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success-strong); }
.btn-decision--edit:hover { background: var(--c-warning-soft); border-color: var(--c-warning); color: var(--c-warning-strong); }
.btn-decision--drop:hover { background: var(--c-danger-soft); border-color: var(--c-danger-deep); color: var(--c-danger-strong); }
.draft-card__edit { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); }
.draft-card__edit-save { margin-top: var(--sp-2); }
.btn--apply-decisions { font-size: 15px; }
.link-reset-filter { margin-left: var(--sp-2); }

/* ===== client_confirm_tz — экран подтверждения ТЗ (перенесено из template <style>) ===== */
.warn-box {
  padding: var(--sp-5) var(--sp-5);
  background: var(--c-warning-pale);
  border: 1px solid var(--c-warning);
  border-radius: var(--r-sm);
  line-height: 1.55;
}
.warn-box__head { margin: 0 0 var(--sp-3); color: var(--c-warning-strong); }
.warn-box__sep { border: none; border-top: 1px solid var(--c-warning-soft); margin: var(--sp-4) 0; }
.warn-box p { margin: 0 0 var(--sp-3); }
.warn-box ul { margin: 0 0 var(--sp-3); padding-left: 22px; }
.warn-box li { margin-bottom: var(--sp-1); }
.confirm-form { margin-top: var(--sp-5); }
.confirm-btn { margin-top: var(--sp-4); font-size: 16px; padding: 14px; }
.confirm-cancel { margin-top: var(--sp-2); }
.confirm-cancel__link { color: var(--c-text-muted); font-size: 13px; }
.confirm-check {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: 14px var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 1.5;
}
.confirm-check input[type=checkbox] {
  margin-top: 3px;
  width: 18px; height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.btn--primary[disabled] {
  background: var(--c-border-strong);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== client_corrections — карточки ревизий (перенесено из template <style>) ===== */
.label-strong { font-weight: 500; margin-bottom: var(--sp-1); }
.voice-btn { margin-top: var(--sp-2); }
.voice-status { margin-left: var(--sp-2); color: var(--c-text-muted); font-size: 13px; }
.rev-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 14px;
  margin-bottom: var(--sp-2);
  background: var(--c-white);
}
.rev-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rev-card__name { font-weight: 500; }
.rev-card__date { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.rev-card__pages { margin-top: var(--sp-1); font-size: 13px; color: var(--c-text-muted); }
.rev-card__pct { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-xs); font-weight: 600; font-size: 14px; }
.rev-card__pct--big   { background: var(--c-danger-soft);  color: var(--c-danger-deep); }
.rev-card__pct--mid   { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.rev-card__pct--small { background: var(--c-success-soft); color: var(--c-success-strong); }
.rev-card__body { font-size: 14px; line-height: 1.5; }
.rev-card__comment {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--c-text);
}

/* ===== client_extras — экстра-файлы (перенесено из template <style>, использует общий .upload-zone) ===== */
.extras-actions { margin-top: var(--sp-5); flex-wrap: wrap; gap: var(--sp-2); }
.upload-zone__icon { font-size: 36px; margin-bottom: var(--sp-2); }
.upload-zone__text { font-size: 14px; color: var(--c-text); line-height: 1.5; }
.upload-zone.is-dragover { background: var(--c-info-pale); border-color: var(--c-info); }

.upload-queue { margin-top: var(--sp-3); }
.queue-item {
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  margin-bottom: 6px;
  background: var(--c-white);
  font-size: 13px;
}
.queue-item--uploading { border-color: var(--c-info); background: var(--c-info-pale); }
.queue-item--done      { border-color: var(--c-success); background: var(--c-success-pale); }
.queue-item--error     { border-color: var(--c-danger-deep); background: var(--c-danger-soft); }
.queue-item__name { font-weight: 500; }
.queue-item__status { color: var(--c-text-muted); font-size: 12px; margin-top: 2px; }
.queue-item__bar { height: 4px; background: var(--c-border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.queue-item__bar > div { height: 100%; background: var(--c-info); transition: width var(--dur-md); }

.extra-file {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--c-white);
}
.extra-file__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.extra-file__name { font-weight: 500; font-size: 15px; word-break: break-word; }
.extra-file__comment-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}
.extra-file__save-mark {
  display: inline-block;
  font-size: 12px;
  color: var(--c-success);
  margin-top: var(--sp-1);
  min-height: 16px;
}

/* ===== admin_dp_check — секции разделов ДП (Общее/Электрика/ВК/ОВ/ВиК) ===== */
.dp-section { margin-top: var(--sp-6); }
.dp-section:first-of-type { margin-top: var(--sp-4); }
.dp-section__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-tint);
  border-radius: var(--r-xs);
  border-left: 4px solid var(--c-accent);
}

/* ===== admin_tz — составление ТЗ менеджером ===== */
.tz-counters {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.tz-row {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--c-white);
  border-left: 4px solid var(--c-border-strong);
}
.tz-row--match        { border-left-color: var(--c-success); }
.tz-row--manager_only { border-left-color: var(--c-warning); }
.tz-row--client_only  { border-left-color: var(--c-info); }
.tz-row--conflict     { border-left-color: var(--c-danger-deep); background: var(--c-danger-soft); }
.tz-row--empty        { border-left-color: var(--c-border-strong); }
.tz-row__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.tz-row__title  { font-weight: 600; font-size: 15px; }
.tz-row__answers {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (max-width: 640px) {
  .tz-row__answers { grid-template-columns: 1fr; gap: var(--sp-3); }
}
.tz-row__cell-label { font-size: 12px; color: var(--c-text-muted); margin-bottom: var(--sp-1); font-weight: 500; }
.tz-row__readonly   { font-size: 14px; padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border-radius: var(--r-xs); min-height: 38px; }
.tz-row__hint       { margin-top: var(--sp-3); font-size: 13px; color: var(--c-text-muted); padding: var(--sp-2) var(--sp-3); background: var(--c-warning-pale); border-radius: var(--r-xs); }
.tz-custom { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--c-surface); border-radius: var(--r-xs); }
.tz-custom > summary { cursor: pointer; font-size: 14px; color: var(--c-text-muted); padding: var(--sp-1) 0; }
.tz-custom[open] > summary { margin-bottom: var(--sp-3); color: var(--c-text); font-weight: 500; }

/* ===== client_tz — клиентский экран ТЗ ===== */
.tz-progress { font-size: 14px; color: var(--c-text-muted); }
.ctz-row {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--c-white);
}
.ctz-row--answered { border-left: 4px solid var(--c-success); }
.ctz-row__title { font-weight: 600; font-size: 15px; margin-bottom: var(--sp-2); }
.ctz-row__hint  { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-warning-pale); border-radius: var(--r-xs); }
.ctz-row__manager { font-size: 13px; color: var(--c-info-strong); padding: var(--sp-2) var(--sp-3); background: var(--c-info-pale); border-radius: var(--r-xs); margin-bottom: var(--sp-2); }
.ctz-row__manager--differ { color: var(--c-danger-deep); background: var(--c-danger-soft); }
.ctz-row__hint-small { font-size: 12px; color: var(--c-text-muted); margin-left: var(--sp-1); }

/* ===== admin_catalogs — справочник ДП/ТЗ ===== */
.cat-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--c-white);
}
.cat-item[open] { background: var(--c-surface); }
.cat-item > summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; gap: var(--sp-3);
  font-size: 14px;
}
.cat-item[open] > summary { margin-bottom: var(--sp-3); }
.cat-item__title { font-weight: 500; }
.cat-item__form { margin-top: var(--sp-2); }
.cat-item__label { display: block; font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-2); }
.cat-item__label > .input-soft, .cat-item__label > .textarea-soft { display: block; margin-top: var(--sp-1); width: 100%; }
.cat-item__meta { margin-top: var(--sp-2); font-size: 12px; color: var(--c-text-soft); }
.cat-item__delete { margin-top: var(--sp-2); }

/* ===== ТЗ: переданные клиенту вопросы — выделение ===== */
.tz-row--transferred { background: var(--c-warning-pale); border-left-color: var(--c-warning); }
.tz-row__actions { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); }
.ctz-row--asked {
  border-left: 4px solid var(--c-warning);
  background: var(--c-warning-pale);
}
.ctz-row__asked {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--c-warning);
  color: var(--c-white);
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 500;
}

/* ===== ТЗ: маркер AJAX-сохранения ===== */
.tz-row__save-mark, .ctz-row__save-mark {
  display: inline-block;
  font-size: 12px;
  margin-left: var(--sp-2);
  color: var(--c-text-muted);
  min-height: 14px;
}
.tz-row__save-mark.saved, .ctz-row__save-mark.saved { color: var(--c-success); }
.tz-row__save-mark.error, .ctz-row__save-mark.error { color: var(--c-danger); }

/* ===== client_tz mobile fix: длинные option не выходят за рамку карточки ===== */
.ctz-row .js-tz-save { display: block; width: 100%; min-width: 0; }
.ctz-row .select-soft, .ctz-row .input-soft {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* предотвращаем горизонтальное расползание из-за длинных option */
  text-overflow: ellipsis;
}
.ctz-row__title { word-wrap: break-word; overflow-wrap: anywhere; }
.ctz-row { min-width: 0; overflow: hidden; }
/* и на админской ТЗ тоже */
.tz-row .js-tz-save, .tz-row .select-soft, .tz-row .input-soft {
  width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
}
.tz-row__cell { min-width: 0; }
.tz-row__title { word-wrap: break-word; overflow-wrap: anywhere; min-width: 0; }

/* ===== /tz: sticky-прогресс + аккордеон по разделам (B3) ===== */
.tz-sticky {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-bg);
  padding: var(--sp-3) 0;
  margin: 0 calc(-1 * var(--sp-4)) var(--sp-3);
  padding-left: var(--sp-4); padding-right: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  pointer-events: none;
}
.tz-sticky > * {
  pointer-events: auto;
}
.tz-progress-bar {
  margin-top: var(--sp-2);
  height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden;
}
.tz-progress-bar > div {
  height: 100%; background: var(--c-accent);
  transition: width .2s ease;
}
.tz-section { padding: 0; overflow: hidden; }
.tz-section[open] .tz-section__summary { border-bottom: 1px solid var(--c-border); }
.tz-section__summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 16px;
}
.tz-section__summary::-webkit-details-marker { display: none; }
.tz-section__summary::before {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%23222' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.tz-section[open] .tz-section__summary::before { transform: rotate(0deg); }
.tz-section__title { flex: 1; }
.tz-section__count {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 500;
  color: var(--c-text-muted);
  background: var(--c-surface);
  padding: 4px 10px; border-radius: var(--r-pill, 999px);
}
.tz-section__count.is-full {
  color: var(--c-success-strong); background: var(--c-success-soft);
}
.tz-section .ctz-row { padding: var(--sp-4); border-top: 1px solid var(--c-border); }

/* ===== Кастомный file picker (вместо native «Choose File») ===== */
.file-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0.1px; height: 0.1px; }
.file-picker {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 56px;
  color: var(--c-text-muted);
  font-size: 15px;
  transition: border-color .12s, background .12s, color .12s;
}
.file-picker:hover { border-color: var(--c-accent); color: var(--c-accent); }
.file-picker--picked {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  border-style: solid;
  color: var(--c-accent-strong);
}
.file-picker__text { word-break: break-word; min-width: 0; }

/* ===== client_tz: чек-боксы вместо select (правка Pavel 2026-06-01) ===== */
.ctz-options {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}
.ctz-opt {
  display: flex; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  min-height: 44px;
  user-select: none;
}
.ctz-opt:hover { background: var(--c-bg-hover, #f3f4f6); }
.ctz-opt input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.ctz-opt__mark {
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 2px solid var(--c-border-strong, #c0c4cc);
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: border-color .12s, background .12s;
}
.ctz-opt__mark::after {
  content: ""; position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .12s;
}
.ctz-opt--checked {
  background: var(--c-success-pale, #e9f7ef);
  border-color: var(--c-success);
}
.ctz-opt--checked .ctz-opt__mark {
  background: var(--c-success);
  border-color: var(--c-success);
}
.ctz-opt--checked .ctz-opt__mark::after { opacity: 1; }
.ctz-opt__label {
  flex: 1 1 auto;
  font-size: 15px; line-height: 1.35;
  word-break: break-word; overflow-wrap: anywhere;
  color: var(--c-text);
}

/* ===== Нижняя навигация на длинных страницах ТЗ ===== */
.page-foot-nav {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  margin: var(--sp-6) 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-sm);
}
.page-foot-nav .btn { flex: 1; min-width: 180px; max-width: 320px; text-align: center; }

/* hover для warn-tint кнопки (отмена передачи) — раньше был блёклым */
.btn--warn-tint:hover {
  background: var(--c-warning-soft);
  border-color: var(--c-warning);
  color: var(--c-warning-strong);
}

/* Класс is-hidden — приоритет выше любого display:flex/inline-flex */
.is-hidden { display: none !important; }

/* ===== client_done — итоговое ТЗ по новой модели ===== */
.done-row {
  display: flex; gap: var(--sp-3); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
  align-items: flex-start;
}
.done-row:last-child { border-bottom: none; }
.done-row__q { flex: 1; font-weight: 500; color: var(--c-text); min-width: 0; word-wrap: break-word; }
.done-row__a { flex: 1; min-width: 0; word-wrap: break-word; }
.done-row__empty { color: var(--c-text-muted); }
@media (max-width: 640px) {
  .done-row { flex-direction: column; gap: var(--sp-1); }
  .done-row__q { font-size: 13px; color: var(--c-text-muted); }
}

/* ===== пункт 5 клиента — сводка файлов ===== */
.files-summary { margin: var(--sp-3) 0 var(--sp-4); }
.files-summary__row {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-white);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.files-summary__row--final { background: var(--c-success-pale); border-color: var(--c-success); }
.files-summary__kind { font-size: 13px; color: var(--c-text-muted); font-weight: 500; min-width: 120px; }
.files-summary__name { font-weight: 500; flex: 1; min-width: 0; word-wrap: break-word; }
.files-summary__meta { font-size: 12px; color: var(--c-text-muted); }
.files-summary__empty { color: var(--c-text-muted); padding: var(--sp-3); text-align: center; }
@media (max-width: 640px) {
  .files-summary__row { flex-direction: column; gap: 2px; }
  .files-summary__kind { min-width: 0; }
}

/* ===== admin_files_list: таблица всех файлов ===== */
.files-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); }
.files-table th, .files-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); text-align: left; }
.files-table th { font-size: 12px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; }
.files-table__row--current { background: var(--c-success-pale); }
.files-table__name { font-weight: 500; word-wrap: break-word; max-width: 320px; }
@media (max-width: 640px) {
  .files-table thead { display: none; }
  .files-table tr { display: block; border: 1px solid var(--c-border); border-radius: var(--r-sm); margin-bottom: var(--sp-2); padding: var(--sp-2); }
  .files-table td { display: block; border-bottom: none; padding: 2px var(--sp-2); }
}

/* ===== dp-check: круглый маркер красный/жёлтый/зелёный ===== */
.dp-row { position: relative; }
.dp-row__marker {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.dp-row__marker--red    { background: #ef4444; }
.dp-row__marker--yellow { background: #f59e0b; }
.dp-row__marker--green  { background: #16a34a; }
.dp-row__marker--empty { background: transparent; border: 2px dashed var(--c-border-strong); box-shadow: none; }

/* ===== Повестка встречи ===== */
.agenda-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  font-size: 0.85em;
  color: var(--c-text-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  user-select: none;
}
.agenda-pick:hover { color: var(--c-text); background: var(--c-accent-soft); border-color: var(--c-accent); }
.agenda-pick input[type="checkbox"] { margin: 0; }
.agenda-pick--selected { color: var(--c-accent); background: var(--c-accent-soft); border-color: var(--c-accent); }
.agenda-pick--row { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-1) 0; padding: var(--sp-1) var(--sp-2); }

.tu-agenda-list { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--c-border); }
.tu-agenda-list__title { font-weight: 500; margin-bottom: var(--sp-2); color: var(--c-text-soft); }

.agenda-bar {
  position: fixed;
  left: 50%; bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  max-width: calc(100vw - 2*var(--sp-4));
}
.agenda-bar__count { color: var(--c-text); font-size: 0.95em; }
.agenda-bar[hidden] { display: none !important; }

.agenda-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.agenda-head__status { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.agenda-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.agenda-list { display: flex; flex-direction: column; gap: var(--sp-4); list-style: decimal inside; padding: 0; margin: var(--sp-4) 0; }

.agenda-row {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.agenda-row__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.agenda-row__title { font-weight: 500; color: var(--c-text); display: inline; }
.agenda-row__current { color: var(--c-text-soft); font-size: 0.9em; }
.agenda-row__field { display: flex; flex-direction: column; gap: var(--sp-1); }
.agenda-row__label { font-size: 0.85em; color: var(--c-text-soft); }
.agenda-row__apply { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.agenda-row__applied { color: var(--c-success-strong); font-size: 0.9em; }
.agenda-row__applied[hidden] { display: none !important; }

@media (max-width: 640px) {
  .agenda-bar { width: calc(100vw - 2*var(--sp-3)); justify-content: center; flex-wrap: wrap; }
}

/* ── Real-time индикаторы и расширенные подсказки (2026-06-01) ────────────── */

/* Расширенные подсказки клиента под вопросом ТЗ */
.ctz-hint {
  margin-top: var(--sp-2);
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: 0.92em;
  color: var(--c-text);
  transition: background 350ms var(--ease-out);
}
.ctz-hint > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--c-accent-strong);
  user-select: none;
}
.ctz-hint > summary::-webkit-details-marker { display: none; }
.ctz-hint__icon { margin-right: var(--sp-1); }
.ctz-hint__body {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ctz-hint__main {
  margin: 0;
  color: var(--c-text);
  line-height: 1.5;
}
.ctz-hint__block {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border-radius: var(--r-xs);
  line-height: 1.45;
}
.ctz-hint__block strong { color: var(--c-accent-strong); }
.ctz-hint__block--warn {
  background: var(--c-warning-soft);
  border-left: 2px solid var(--c-warning);
}
.ctz-hint__block--warn strong { color: var(--c-warning-strong); }
.ctz-hint--flash {
  animation: rt-flash 1500ms var(--ease-out);
}
@keyframes rt-flash {
  0%   { background: var(--c-success-soft); }
  100% { background: var(--c-accent-soft); }
}

/* Бейдж "N новых" — красный кружок на карточке проекта в админке */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-danger);
  color: var(--c-white);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1;
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.notif-badge[hidden] { display: none !important; }

/* Точка-пульсация на разделах внутри карточки проекта */
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border-strong);
  margin-left: var(--sp-2);
  vertical-align: middle;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.notif-dot--active {
  background: var(--c-accent);
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(18, 106, 238, 0.65);
  animation: rt-pulse 1.6s ease-out infinite;
}
@keyframes rt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18, 106, 238, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(18, 106, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 106, 238, 0); }
}

/* Toast-уведомления в правом нижнем углу */
.toast-container {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 9999;
  pointer-events: none;
  max-width: min(360px, calc(100vw - var(--sp-6)));
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-text);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: 0.95em;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events: auto;
}
.toast--show {
  opacity: 1;
  transform: translateX(0);
}
.toast__link {
  color: var(--c-accent-soft);
  text-decoration: underline;
  white-space: nowrap;
}
.toast__close {
  background: transparent;
  border: 0;
  color: var(--c-white);
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--sp-1);
}

/* Расширенные подсказки в админ-каталоге — лёгкий details */
.cat-item__more {
  margin-top: var(--sp-1);
  background: var(--c-surface);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.cat-item__more > summary {
  cursor: pointer;
  color: var(--c-text-soft);
  font-size: 0.92em;
}

/* =====================================================================
   Подписание ТЗ — /c/{token}/confirm-tz
   Mobile-first 390px + desktop max-width 720px.
   ===================================================================== */
.page--sign { max-width: 720px; margin: 0 auto; padding: var(--sp-4); }
.sign-hero { margin: var(--sp-3) 0 var(--sp-4); }
.sign-hero__crumb {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500;
}
.sign-hero__name {
  font-size: 22px; font-weight: 700; color: var(--c-text);
  margin-top: var(--sp-1);
}
.sign-hero__sub { font-size: 13px; color: var(--c-text-muted); margin-top: var(--sp-1); }

.sign-step {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--sp-4);
  margin: var(--sp-3) 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sign-step__title {
  font-size: 15px; color: var(--c-accent-strong); margin: 0 0 var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2); font-weight: 600;
}
.sign-step__hint { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.sign-step__actions { margin-top: var(--sp-3); }

.tz-preview {
  max-height: 280px; overflow-y: auto;
  padding: var(--sp-3); background: var(--c-surface);
  border-radius: var(--r-sm); border: 1px solid var(--c-border);
  font-size: 13px; line-height: 1.5;
}
.tz-preview h1, .tz-preview h2, .tz-preview h3 { color: var(--c-accent); margin: var(--sp-3) 0 var(--sp-2); }
.tz-preview h1 { font-size: 17px; }
.tz-preview h2 { font-size: 15px; }
.tz-preview h3 { font-size: 14px; }
.tz-preview p { margin: var(--sp-2) 0; }
.tz-preview ul { margin: var(--sp-2) 0 var(--sp-2) var(--sp-4); }
.tz-preview--empty { color: var(--c-text-soft); font-style: italic; }

.agreement-check {
  display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  padding: var(--sp-2) 0;
}
.agreement-check input {
  margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px;
  accent-color: var(--c-accent);
}
.agreement-check span { font-size: 14px; line-height: 1.5; color: var(--c-text); }

.sign-canvas-wrap {
  position: relative; background: var(--c-bg);
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.04);
}
.sign-canvas {
  display: block; width: 100%; height: 200px;
  touch-action: none; cursor: crosshair;
}
.sign-canvas__hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  color: var(--c-text-soft); font-size: 14px;
  transition: opacity .2s;
}
.sign-canvas__actions {
  margin-top: var(--sp-2); display: flex; justify-content: flex-end;
}

.sign-actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-4); align-items: center;
}
.sign-actions .btn--primary { width: 100%; transition: transform .15s, box-shadow .15s; }
.sign-actions .btn--primary.btn--ready { animation: sign-pulse-ready 1.5s infinite; }
@keyframes sign-pulse-ready {
  0%, 100% { box-shadow: 0 4px 14px rgba(18,106,238,.28); }
  50%      { box-shadow: 0 6px 22px rgba(18,106,238,.48); }
}
.sign-actions__law { font-size: 12px; color: var(--c-text-soft); text-align: center; }
.sign-actions__back {
  font-size: 13px; color: var(--c-text-muted); text-decoration: none;
  padding: var(--sp-2);
}
.sign-actions__back:hover { color: var(--c-accent); }

.signed-card, .success-card {
  text-align: center; padding: var(--sp-5);
  background: var(--c-success-soft);
  border: 1px solid var(--c-success);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.signed-card__icon, .success-card__icon { font-size: 48px; line-height: 1; }
.signed-card__title, .success-card__title {
  font-size: 18px; font-weight: 600; color: var(--c-success-strong);
}
.signed-card__meta, .success-card__meta {
  font-size: 13px; color: var(--c-text-muted);
}
.signed-card__actions {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-3); width: 100%;
}
.success-card .btn { margin-top: var(--sp-3); }

.sign-feedback { margin-top: var(--sp-4); }

.sign-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sp-3);
  backdrop-filter: blur(2px);
  animation: sign-modal-fade .18s ease-out;
}
@keyframes sign-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sign-modal[hidden] { display: none !important; }
.sign-modal__sheet {
  background: var(--c-card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-4);
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: 0 -12px 40px rgba(0,0,0,.18);
  animation: sign-sheet-up .22s ease-out;
}
@keyframes sign-sheet-up {
  from { transform: translateY(40px); opacity: .6; }
  to   { transform: translateY(0); opacity: 1; }
}
.sign-modal__title {
  font-size: 20px; font-weight: 600; color: var(--c-text);
  text-align: center;
}
.sign-modal__actions {
  display: flex; justify-content: space-between; gap: var(--sp-2);
}
.sign-canvas-wrap--modal {
  border-style: solid; border-color: var(--c-border-strong);
}
body.no-scroll { overflow: hidden; }

.sign-link-card {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.sign-link-input {
  flex: 1 1 280px; min-width: 0;
  padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sign-link-input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.sign-link-feedback {
  margin-top: var(--sp-2); font-size: 13px;
  color: var(--c-success-strong); font-weight: 500;
}

.pdf-preview-pages {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.pdf-preview-img {
  display: block;
  width: 100%; max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  background: #fff;
  height: auto;
}

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; }
.badge--muted { background: var(--c-bg); color: var(--c-text-muted);
  border: 1px solid var(--c-border); }

@media (min-width: 600px) {
  .sign-modal { align-items: center; }
  .sign-modal__sheet { border-radius: var(--r-lg); }
}

@media (max-width: 600px) {
  .page--sign { padding: var(--sp-3); }
  .sign-step { padding: var(--sp-3); }
  .sign-hero__name { font-size: 19px; }
  .sign-canvas { height: 180px; }
  .signed-card, .success-card { padding: var(--sp-4); }
  .sign-modal__sheet { padding: var(--sp-3); }
}

/* Инженерский ЛК — задания Светофора */
.eng-task-list { padding-left: 20px; margin-bottom: 16px; }
.eng-task-item { margin-bottom: 6px; font-size: 14px; }
.eng-done-form { margin-top: 12px; }

/* Каталог: инлайн-формы кнопок-действий */
.cat-item__actions form { display: inline; }

/* Замечания клиента на странице deliverables */
.deliv-feedback-list { margin-top: 12px; padding: 12px; background: var(--c-bg-soft); border-radius: 8px; }
.deliv-feedback-list__title { font-weight: 600; margin-bottom: 8px; font-size: 14px; }
.deliv-feedback { padding: 8px 0; border-top: 1px solid var(--c-border); }
.deliv-feedback:first-of-type { border-top: none; }
.deliv-feedback__date { font-size: 12px; color: var(--c-text-soft); margin-bottom: 4px; }
.deliv-feedback__text { font-size: 14px; white-space: pre-wrap; }
.deliv-feedback__files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Замечания клиента в менеджерском кабинете */
.client-feedback-item { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--c-border); }
.client-feedback-item:first-of-type { border-top: none; }
.client-feedback-text { font-size: 14px; white-space: pre-wrap; margin-top: 2px; }
.client-feedback-files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Статусы проектов в карточках инженерского ЛК (#230) */
.eng-card-status { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.eng-card-sections { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.eng-status-badge { font-size: 12px; padding: 3px 8px; border-radius: 12px; font-weight: 500; white-space: nowrap; }
.eng-status-badge--danger { background: var(--c-danger-soft); color: var(--c-danger-strong); }
.eng-status-badge--warn { background: var(--c-warning-soft); color: var(--c-warning-strong); }
.eng-status-badge--info { background: var(--c-info-soft); color: var(--c-info-strong); }
.eng-status-badge--done { background: var(--c-success-soft); color: var(--c-success-strong); }
.eng-status-badge--neutral { background: var(--c-surface-2); color: var(--c-text-muted); }

/* Передать клиенту: summary-лейбл меняется по состоянию details (свёрнуто — приглашает, развёрнуто — Назад к сворачиванию) */
.delivery-summary--send .ds-label-open { display: none; }
.delivery-action-details[open] > .delivery-summary--send .ds-label-closed { display: none; }
.delivery-action-details[open] > .delivery-summary--send .ds-label-open { display: inline; }

/* client_deliverables — версии файлов (вынос inline-стилей, тикет BUG-D8-02) */
.dv-row-head { width:100%; margin-bottom:6px; }
.dv-prev-head { width:100%; margin-bottom:4px; font-size:13px; }
.dv-ml6 { margin-left:6px; }
.dv-ml4 { margin-left:4px; }
.dv-mt6 { margin-top:6px; }
.dv-prev-toggle { cursor:pointer; font-size:13px; color:var(--c-text-muted); user-select:none; }
.dv-prev-row { opacity:0.6; margin-top:6px; }
.tz-locked-banner { margin-bottom:16px; }

/* ===== FAB clearance — последний контент не перекрывается плавающей кнопкой ===== */
/* На мобиле FAB bottom:20px + h52 = 72px → нижний отступ страницы минимум 88px.
   .page уже имеет padding-bottom 120px на десктопе и 100px на мобиле (≥ 88px), поэтому
   добавляем страховочный отступ только когда FAB виден и нет sticky-bar (has-bottom-action
   уже поднимает FAB на 96px и сам добавляет padding-bottom 96px). */
@media (max-width: 767px) {
  body:not(.has-bottom-action) .page { padding-bottom: 96px; }
}

/* ===== Нейтральный компонент загрузки (без AI-ассоциации, без процентов) ===== */
/* Использование в шаблоне:
   <div class="loading-neutral">
     <span class="loading-neutral__spinner"></span>
     <span class="loading-neutral__label">Обрабатываем…</span>
   </div>
   Класс .hidden / .is-hidden скрывает до нужного момента. */
.loading-neutral {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: 14px;
}
.loading-neutral__spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--c-border-strong);
  border-top-color: var(--c-text-muted);
  border-radius: 50%;
  animation: loading-neutral-spin 0.75s linear infinite;
}
@keyframes loading-neutral-spin {
  to { transform: rotate(360deg); }
}
.loading-neutral__label {
  flex: 1;
  min-width: 0;
}

/* ===== Хештеги вопросов каталога (ТЗ Паши 2026-08-07) ===== */
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tag-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 44px;              /* палец на телефоне */
}
.tag-filter__title { color: var(--c-text-muted); font-size: 13px; }
.tag-filter__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-muted);
  font-size: 13px;
}

/* Подвопрос — вложен в карточку головного, поэтому со сдвигом и полосой слева */
.cat-item--sub {
  margin-left: var(--sp-3);
  border-left: 2px solid var(--c-border-strong);
}
.cat-item__sub-mark {
  color: var(--c-text-soft);
  font-size: 12px;
  margin-right: 6px;
}

/* Карточка вопроса: в шапке теперь ещё и хештеги — на телефоне их пачка выходила
   за экран (410px при 390). Переносим по строкам и не даём длинным кодам распирать. */
.cat-item > summary {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* Все метки (варианты, уточнения, хештеги) — одной группой у правого края, между
   ними ровный зазор. Раньше flex растаскивал их по всей ширине строки. */
.cat-item__marks {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.cat-item code,
.cat-item__label code {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.cat-item__section-hint { overflow-wrap: anywhere; }

/* Условие на вариант ответа: строка «вариант — скрыть, если …» + кнопка убрать */
.opt-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.opt-rule__text { flex: 1; font-size: 13px; overflow-wrap: anywhere; }

/* «Изменить» у отвеченного вопроса: ответ слева, кнопка прижата вправо и не
   наезжает на длинный текст (min-width:0 — иначе flex не даёт тексту переноситься) */
.question__answered { align-items: flex-start; }
.question__answered-text { flex: 1; min-width: 0; }
.question__answered form { flex-shrink: 0; margin-left: auto; }
.question__answered .btn--sm { white-space: nowrap; }
.answered-history__item { display: flex; align-items: flex-start; gap: var(--sp-2); }
.answered-history__item > div { flex: 1; min-width: 0; }
.answered-history__item form { flex-shrink: 0; margin-left: auto; }
.answered-history__item .btn--sm { white-space: nowrap; }

/* «Смотрит специалист»: вопрос отдан менеджеру, но клиент может ответить сам */
.question__help-pending { align-items: flex-start; gap: var(--sp-2); }
.question__help-pending .question__answered-text { flex: 1; min-width: 0; }
.question__help-pending form { flex-shrink: 0; margin-left: auto; }
.question__help-pending .btn--sm { white-space: nowrap; }
.question__help-pending + .question__help-pending { margin-top: 10px; }


/* Тестовый кабинет красим в светло-розовый: боевой и стенд держат открытыми рядом,
   и по одному взгляду должно быть понятно, где ты (просьба Паши 2026-08-12). */
body.is-stand { background: var(--c-bg-stand); }
body.is-stand .hero,
body.is-stand .page--admin { background: transparent; }