/* AI-Methodist admin UI v3 — design tokens + базовые компоненты.
   Источник: outputs/product/mockup_ui_v3.html — копи-паста CSS-variables 1:1
   из мокапа. Не менять цвета без обновления мокапа (правило фазы А).
*/

:root {
  /* ЭТАП 2.1 (Кирилл 02.06.2026): UI-шрифт Inter,
     бренд-шрифт Cormorant Garamond (для логотипа/hero/премиум-штрихов). */
  --font:        "Inter", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-brand:  "Cormorant Garamond", Georgia, "Iowan Old Style", serif;
  --mono:        ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  /* Шкала типографики. h1~22 / h2~18 / h3~16 / body 14-15, веса 400/500. */
  --fs-h1:     22px;
  --fs-h2:     18px;
  --fs-h3:     16px;
  --fs-body:   14px;
  --fs-small:  13px;
  --fw-normal: 400;
  --fw-medium: 500;
  --lh-body:   1.65;
  --lh-tight:  1.35;

  /* Бренд-акцент Avior — тёплое золото. Используется ТОЧЕЧНО: логотип,
     hero, премиум-штрихи. НЕ заливать UI — UI остаётся на индиго. */
  --avior-gold:    #F6CF7E;
  --avior-gold-2:  #E8B964;

  color-scheme: light dark;
}

/* === LIGHT THEME (default) — выровнено под эталон ui_polish_master === */
html[data-theme="light"] {
  --bg:        #FAFAF9;       /* тёплый off-white */
  --surface:   #FFFFFF;
  --surface-2: #F4F2F8;       /* эталон: чуть индиговый off-white */
  --surface-3: #E7E7E4;
  --border:    #E6E3EF;       /* эталон hairline */
  --border-2:  #D6D6DC;
  --text:      #1A1A21;       /* тёплый почти-чёрный */
  --text-2:    #55525F;       /* эталон */
  --text-3:    #8E8B99;       /* эталон */
  --text-4:    #A6A6AE;
  --text-dim:  #8E8B99;
  --text-mute: #A6A6AE;

  /* Два индиго (эталон): бренд #1B1440 (лого/заголовки) + интерактивный
     #4F46E5 (кнопки/активное). Крупные заливки берут светлый. */
  --indigo-btn:       #4F46E5;
  --indigo-btn-hover: #4338CA;
  --acent:     var(--indigo-btn);
  --acent-2:   #6D66EA;
  --acent-bg:  #EEEDFE;
  --acent-fg:  #312E81;

  --ok:        #1D9E75;
  --ok-bg:     #E1F5EE;
  --ok-fg:     #0F5A43;
  --warn:      #BA7517;
  --warn-bg:   #FAEEDA;
  --warn-fg:   #6B440D;
  --err:       #DC2626;
  --err-bg:    #FEE2E2;
  --err-fg:    #7F1D1D;

  --info:      var(--indigo-btn);
  --info-bg:   #EEEDFE;
  --info-fg:   #312E81;

  --gold:      #EF9F27;       /* эталон: акцент/CTA-подсветка/кредиты */
  --gold-soft: #FDF2DD;

  --shadow:    0 1px 2px rgba(27,20,64,0.04), 0 6px 22px rgba(27,20,64,0.08);
}

/* === DARK THEME === */
html[data-theme="dark"] {
  --bg:        #0B0B10;       /* теплее, чем чистый #09090B */
  --surface:   #16161D;
  --surface-2: #24242C;
  --surface-3: #3A3A44;
  --border:    #24242A;
  --border-2:  #3A3A44;
  --text:      #F5F5F7;
  --text-2:    #D4D4D8;
  --text-3:    #A0A0AA;
  --text-4:    #6F6F78;
  --text-dim:  #A0A0AA;
  --text-mute: #6F6F78;

  /* Индиго softer на тёмном — чтобы не слепить контрастом. Те же роли,
     что в эталоне (интерактивный индиго + золото-акцент). */
  --indigo-btn:       #8B83E8;
  --indigo-btn-hover: #A29CEC;
  --acent:     var(--indigo-btn);
  --acent-2:   #A29CEC;
  --acent-bg:  rgba(139,131,232,0.14);
  --acent-fg:  #C7C2F2;

  --ok:        #4ADE80;
  --ok-bg:     rgba(74,222,128,0.12);
  --ok-fg:     #BBF7D0;
  --warn:      #FBBF24;
  --warn-bg:   rgba(251,191,36,0.14);
  --warn-fg:   #FDE68A;
  --err:       #F87171;
  --err-bg:    rgba(248,113,113,0.14);
  --err-fg:    #FECACA;

  --info:      #8B83E8;
  --info-bg:   rgba(139,131,232,0.14);
  --info-fg:   #C7C2F2;

  --gold:      #EF9F27;
  --gold-soft: rgba(239,159,39,0.16);

  --shadow:    none;
}

/* === BACKWARD COMPAT ALIASES ===
   Старые render-функции в app.js используют переменные --bg-card, --primary,
   --rule, --text-muted, --radius и т.д. Чтобы не переписывать сейчас все
   экраны (это кирпичи 7-12), сохраняем алиасы на новые токены.
   Удалим эти алиасы когда все экраны переедут на новые имена.
*/
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bg-card:    var(--surface);
  --bg-input:   var(--surface);
  --text-muted: var(--text-3);
  --primary:    var(--acent);
  --primary-dark: var(--acent-2);
  --rule:       var(--border);
  /* Радиусы по эталону: карточки lg=14, кнопки/чипы/инпуты md=10. */
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius:     10px;       /* дефолт-алиас = md */
  --success:    var(--ok);
  --warning:    var(--warn);
  --danger:     var(--err);
  /* Бренд-индиго Avior (вордмарк/заголовки/глубокие акценты) — вне тем. */
  --indigo:     #1B1440;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === TOPBAR === */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 16px 32px;
}
/* ЭТАП 2.3.b (Кирилл, поправка 02.06): бренд Avior в шапке.
   Лок-ап avior_header_light/dark.svg по теме — сам SVG содержит плитку,
   вордмарк «AVIOR» и тег «AI-METHODIST». Прозрачный фон. Высота 40px
   (Кирилл: «36-44px, не маленький бейдж»). Переключение через
   html[data-theme="..."] селектор — без JS. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}
/* Иконка-плитка (звезда в скруглённом квадрате со своим фоном) —
   квадратная, видна в любой теме без переключений. */
.brand__tile {
  height: 46px;
  width: 46px;
  display: block;
  border-radius: 11px;
  flex-shrink: 0;
}
/* Текст бренда двумя строками: AVIOR (сериф, крупно) + Методист (читаемо). */
.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.brand__name {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  line-height: 1;
}
.brand__sub {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-mute);
  line-height: 1;
}

.brand .ver {
  font-size: 10px;
  color: var(--text-mute);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  text-transform: lowercase;
  margin-left: 4px;
}
/* Backward-compat: старый .brand .logo (кружок) остаётся как есть для
   случаев где он мог быть встроен в текст или legacy-шаблонах. */
.brand .logo {
  width: 22px;
  height: 22px;
  background: var(--text);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
}

/* === ЭТАП 2.3: Точечный бренд-стиль Avior для hero и премиум-штрихов === */
.brand-hero {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--avior-gold);
  line-height: 1.2;
}
.brand-hero--lg {
  font-size: 42px;
}
.brand-stripe {
  border-left: 4px solid var(--avior-gold);
  padding-left: 16px;
}
.topright {
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.theme-btn:hover {
  color: var(--text);
  border-color: var(--border-2);
}
/* ui_polish_master Этап 2: чип кредитов «⚡ тариф · остаток/квота» (эталон).
   Золотой чип — виден в обеих темах; ⚡ золотая, текст читаемый. */
.quota.credits-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gold-soft);
  border: 1px solid #F0D9A6;
  border-radius: var(--radius-md);
  font-weight: 500;
}
.quota.credits-chip .ti-bolt { color: var(--gold); font-size: 16px; }
.quota-text {
  font-size: 12.5px;
  color: var(--text-2);
}
.quota-text b {
  color: var(--text);
  font-weight: 600;
}
.quota.credits-chip .help-dot { background: transparent; border-color: #F0D9A6; }

/* === НАВИГАЦИЯ (табы под шапкой) === */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
  /* Блок C: нав-табы прибиты под sticky-шапкой (.topbar = padding 16+16 +
     плитка 46 ≈ 78px). z-index ниже topbar(10), выше контента. Фон var(--bg)
     непрозрачен в обеих темах — контент не просвечивает. */
  position: sticky;
  top: 78px;
  z-index: 9;
}
.tab {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  display: inline-block;
}
.tab:hover {
  color: var(--text);
  background: var(--surface-2);
}
.tab.active {
  color: var(--text);
  background: var(--surface-2);
}

/* === LEGACY header/nav (backward-compat для старых страниц) ===
   Поэтапно переедут в .topbar+.tabs.
*/
header {
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg);
}
nav a {
  color: var(--text-3);
  text-decoration: none;
  margin-right: 18px;
  font-size: 14px;
}
nav a:hover,
nav a.active {
  color: var(--text);
}

/* === MAIN === */
main {
  max-width: 1400px;
  margin: 32px auto;
  padding: 0 32px;
}

h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
}
h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}
.subtitle {
  color: var(--text-3);
  margin: 0 0 32px;
  font-size: 14px;
}

/* === CARDS === */
/* ЭТАП 2.2 (Кирилл 02.06.2026): карточки — единый вид.
   border 1px (визуально hairline за счёт светлого --border), radius 12px,
   padding 16px (Кирилл: «паддинг ~14-16»), мягкая shadow. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card .meta {
  color: var(--text-dim);
  font-size: var(--fs-small);
}

/* === GRID === */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* === FORMS === */
label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input::placeholder, textarea::placeholder {
  color: var(--text-4);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acent);
  box-shadow: 0 0 0 3px var(--acent-bg);
}
textarea {
  min-height: 80px;
  resize: vertical;
}

/* === BUTTONS === */
button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--acent);
  color: #FFFFFF;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button:hover, .btn:hover {
  background: var(--acent-2);
}
html[data-theme="dark"] button,
html[data-theme="dark"] .btn {
  color: #0B1220;
  font-weight: 600;
}
/* Баг dark-темы: blanket-правило выше красило ВСЕ кнопки тёмным текстом —
   у прозрачной theme-btn (surface-фон) текст сливался. Возвращаем токен-цвет.
   Контурные кнопки чиним ниже, после их базовых правил. */
html[data-theme="dark"] .theme-btn {
  color: var(--text-2);
}
button:disabled {
  background: var(--surface-2);
  color: var(--text-4);
  cursor: not-allowed;
}

/* ЭТАП 2.2 (Кирилл): единый стиль кнопок.
   primary — акцентная заливка, secondary — КОНТУРНАЯ акцентная,
   ghost — текст-акцент без рамки. Иконка слева через gap. */
.btn-primary {
  background: var(--acent);
  color: #FFFFFF;
  border-color: var(--acent);
}
.btn-primary:hover {
  background: var(--acent-2);
  border-color: var(--acent-2);
}
/* Опасное/необратимое действие (удаление, сброс) — заливка danger-цветом.
   Используется кнопкой подтверждения в _confirmDialog при danger:true. */
.btn-danger {
  background: var(--danger);
  color: #FFFFFF;
  border-color: var(--danger);
}
.btn-danger:hover {
  filter: brightness(0.92);
}
.btn-secondary, button.secondary {
  background: transparent;
  color: var(--acent);
  border-color: var(--acent);
}
.btn-secondary:hover, button.secondary:hover {
  background: var(--acent-bg);
  color: var(--acent);
  border-color: var(--acent);
}
.btn-ghost {
  background: transparent;
  color: var(--acent);
}
.btn-ghost:hover {
  background: var(--acent-bg);
  color: var(--acent);
}
/* Баг dark-темы: blanket-правило выше красит кнопки тёмным текстом — у
   контурных (.btn-ghost/.btn-secondary, прозрачный фон) текст сливался.
   Возвращаем акцент-цвет (после базовых правил, специфичность выше blanket). */
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .btn-ghost--inline {
  color: var(--acent);
}
/* Tabler-иконка слева внутри кнопки. Размер согласован с font-size. */
.btn .ti, button .ti {
  font-size: 16px;
  line-height: 1;
}
.btn-disabled, .btn.disabled, a.btn.disabled {
  background: var(--surface-2);
  color: var(--text-4);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

/* === BADGES === */
/* ui_polish_master Этап 2: бейджи по эталону — не-капс, мягкий радиус. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--radius-md);
}
.badge--type {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 400;
}

/* ui_polish_master Этап 4: моно layout-бейдж (эталон .lb). Спец-примитивы v8
   (compare/table/stat/diagram/callout) — акцентный индиго. */
.lb {
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.lb--accent {
  color: var(--acent);
  border-color: var(--acent);
  background: var(--acent-bg);
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.badge .dot.pulse {
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* ЭТАП 2.2 (Кирилл): семантические варианты — готово/пусто/в процессе/лимит. */
.badge.built       { background: var(--ok-bg);    color: var(--ok-fg); }
.badge.draft       { background: var(--warn-bg);  color: var(--warn-fg); }
.badge.in-progress { background: var(--acent-bg); color: var(--acent-fg); }
.badge.failed      { background: var(--err-bg);   color: var(--err-fg); }
.badge.warn        { background: var(--warn-bg);  color: var(--warn-fg); }
.badge.ok          { background: var(--ok-bg);    color: var(--ok-fg); }
.badge.info        { background: var(--info-bg);  color: var(--info-fg); }
.badge.neutral     { background: var(--surface-2);color: var(--text-dim); }
.badge.danger      { background: var(--err-bg);   color: var(--err-fg); }

/* Legacy badges (старый код использовал critical/medium/minor) */
.badge.critical { background: var(--err-bg);   color: var(--err-fg); }
.badge.medium   { background: var(--warn-bg);  color: var(--warn-fg); }
.badge.minor    { background: var(--acent-bg); color: var(--acent-fg); }

/* === CHIPS === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.chip:hover {
  color: var(--text);
  border-color: var(--border-2);
}
.chip.active {
  background: var(--surface-2);
  color: var(--text);
}

/* === TOAST === */
.toast {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 20px;
}
.toast.ok {
  border-color: rgba(74, 222, 128, 0.4);
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.toast.warn {
  border-color: rgba(251, 191, 36, 0.4);
  background: var(--warn-bg);
  color: var(--warn-fg);
}

/* === DISCLAIMER (нейтральный, не оранжевый) === */
.disclaimer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface-2);
  border-left: 3px solid var(--text-4);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 16px 0;
}
.disclaimer .icon {
  color: var(--text-3);
  font-weight: 700;
  flex-shrink: 0;
}

/* === LEGACY FLASH (старые render-функции) === */
.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}
.flash.success { background: var(--ok-bg);  color: var(--ok-fg); }
.flash.error   { background: var(--err-bg); color: var(--err-fg); }
.flash.info    { background: var(--acent-bg); color: var(--acent-fg); }

/* === PRE / CODE === */
pre {
  background: var(--surface-2);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--border);
  max-height: 400px;
  color: var(--text-2);
}
code {
  font-family: var(--mono);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
}

/* === LEGACY slide-tile (project detail) === */
.slide-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}
.slide-tile:hover {
  border-color: var(--acent);
}
.slide-tile .layout-name {
  font-weight: 600;
  margin-bottom: 4px;
}
.slide-tile .variant {
  color: var(--text-3);
  font-size: 12px;
}
.preview-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* === HINT === */
.hint {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 4px;
}

/* === FOOTER === */
footer {
  margin: 40px 32px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* === SCREEN-READER-ONLY === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Экран Проекты (UI v3 К7) === */

.projects-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 24px 32px 12px;
  flex-wrap: wrap;
}
.projects-header h1 {
  margin: 0 0 4px 0;
}
.projects-header__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.projects-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 32px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
}
.projects-toolbar__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.projects-toolbar .input,
.projects-toolbar .select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  min-width: 180px;
}
.projects-toolbar .input:focus,
.projects-toolbar .select:focus {
  outline: none;
  border-color: var(--acent);
  box-shadow: 0 0 0 3px var(--acent-translucent, rgba(30, 64, 175, 0.18));
}

/* Tabs внутри toolbar — другой стиль чем top-level tabs */
.projects-toolbar .tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  border-bottom: none;
}
.projects-toolbar .tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.projects-toolbar .tab[aria-selected="true"] {
  background: var(--acent);
  color: #fff;
}
.projects-toolbar .tab .chip {
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.projects-toolbar .tab[aria-selected="true"] .chip {
  background: rgba(255, 255, 255, 0.22);
}

/* === Сетка карточек === */

/* ui_polish_master Этап 4: список проектов по эталону projects_list_polish. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 32px 32px;
}

.project-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.project-card:hover {
  box-shadow: 0 6px 22px rgba(27, 20, 64, 0.12);
  transform: translateY(-1px);
}

.project-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Обложка: превью slide-01 / индиго-плитка со звездой / спиннер генерации */
.card-cover {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--indigo);
  overflow: hidden;
}
.card-cover--img { background: var(--surface-2); }
.card-cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-cover--placeholder .ti { color: var(--gold); font-size: 34px; opacity: 0.92; }
.card-cover--gen { background: var(--surface-2); flex-direction: column; gap: 6px; }
.card-cover--gen .ti { font-size: 24px; color: var(--acent); }
.card-cover__cap { font-size: 11px; color: var(--text-2); }

.project-card__body {
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-card__title {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.project-card__meta {
  font-size: 12px;
  color: var(--text-3);
}
.project-card__action {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton для loading-состояния */
.project-card--skeleton {
  min-height: 220px;
  background: linear-gradient(
    90deg, var(--surface) 0%, var(--bg) 50%, var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border: 1px solid var(--border);
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Пустое состояние / ошибка */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--text-3);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  font-size: 14px;
}
/* ui_polish_master Этап 4: ошибка — понятная плашка (не сырой текст на фоне). */
.empty-state--error {
  color: var(--err-fg);
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-style: solid;
}

/* ui_polish_master Этап 4: скелетон загрузки — мягкий шиммер на токенах. */
.skeleton {
  background: linear-gradient(
    90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
}

/* === Мастер «Создать курс» (UI v3 К8) === */

.wizard-container {
  max-width: 880px;
  margin: 24px auto 32px;
  padding: 0 24px;
}

.wizard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.wizard-header h1 {
  margin: 0;
}

/* Stepper сверху */
.wizard-stepper-container {
  margin-bottom: 16px;
}
.wizard-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.wizard-stepper__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-3);
  position: relative;
  border-right: 1px solid var(--border);
}
.wizard-stepper__item:last-child {
  border-right: none;
}
.wizard-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-3);
}
.wizard-stepper__item--current {
  color: var(--text);
  background: linear-gradient(180deg, transparent, var(--bg) 100%);
}
.wizard-stepper__item--current .wizard-stepper__num {
  background: var(--acent);
  color: #fff;
  border-color: var(--acent);
}
.wizard-stepper__item--done {
  color: var(--text-2);
}
.wizard-stepper__item--done .wizard-stepper__num {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.wizard-stepper__label {
  font-weight: 500;
}

/* Тело шага */
.wizard-body {
  padding: 32px;
  border-radius: 12px;
}
.wizard-step-title {
  margin: 0 0 4px 0;
  font-size: 22px;
}
.wizard-step-title + .subtitle {
  margin: 0 0 24px 0;
}

.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wizard-form h3 {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--text-2);
  font-weight: 600;
}
.wizard-form .optional {
  font-weight: 400;
  color: var(--text-3);
  font-size: 13px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.field .req {
  color: var(--err);
}
.field input,
.field select,
.field textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acent);
  box-shadow: 0 0 0 3px var(--acent-translucent, rgba(30, 64, 175, 0.18));
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  /* Сброс наследия от глобального `label` (text-transform: uppercase,
     letter-spacing, color: text-3, font-weight: 600, margin: 12px 0 6px).
     Без этого <label class="checkbox"> рендерит текст КАПСОМ — что заметнее
     всего в дисклеймере на /project/{id} (фикс от 28.05). */
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  color: var(--text);
  margin: 0;
}
.checkbox span {
  /* span внутри checkbox — основной носитель текста, тоже сбрасываем
     наследие. И <strong> внутри остаётся жирным благодаря normal+strong. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  color: inherit;
}
.checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Actions footer */
.wizard-actions-container {
  margin-top: 20px;
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* === Шаг 2: ОКПДТР autocomplete === */

.prof-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acent);
  color: #fff;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}
.prof-chip__clear {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.prof-chip__clear:hover {
  background: rgba(255, 255, 255, 0.45);
}

.autocomplete-results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover {
  background: var(--bg);
}
.autocomplete-item strong {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  min-width: 60px;
}
.autocomplete-item--empty {
  color: var(--text-3);
  cursor: default;
  justify-content: center;
}

/* === BUG-23 (QA v9 доп): chip-autocomplete для НПА === */

.npa-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 4px;
}
.npa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.npa-chip__remove {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.npa-chip__remove:hover {
  background: rgba(255, 255, 255, 0.45);
}

/* === BUG-21/24/27 (QA v9 доп): inline-ошибки полей === */

.field-error {
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}
.field--error label {
  color: #dc2626;
}
.input--error,
input.input--error,
.field input.input--error,
.field--error input,
.field--error select {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04);
}
.field--error input:focus,
.field--error select:focus {
  outline: 2px solid rgba(220, 38, 38, 0.25);
  outline-offset: -1px;
}
.preset-grid--error {
  outline: 2px dashed #dc2626;
  outline-offset: 6px;
  border-radius: 8px;
}
.project-disclaimer--error {
  border-left-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}

/* === Шаг 3: пресеты === */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.preset-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.preset-card:hover {
  border-color: var(--acent);
}
.preset-card--selected {
  border-color: var(--acent);
  background: var(--bg);
}
.preset-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.preset-card__name {
  font-size: 14px;
  color: var(--text);
}
.preset-card__swatches {
  display: flex;
  gap: 4px;
}
.preset-card__swatch {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.preset-card__desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.empty-state-inline {
  color: var(--text-3);
  font-size: 13px;
  margin-left: 10px;
}

/* BUG-10 (QA v9): мягкий CTA-блок «загрузите файлы через rebuild» на шаге 2 */
.upload-hint--soft {
  padding: 14px 16px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  margin: 12px 0;
}
.upload-hint--soft strong {
  display: block;
  margin-bottom: 4px;
}
.upload-hint--soft p {
  margin: 4px 0 10px 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* BUG-12 fix (QA v9): мини-превью «карточки слайда» в стиле пресета.
   16:9 фоновый прямоугольник + цветной accent-stripe + типографика-имитация. */
.preset-card__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.preset-card__preview-accent {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
}
.preset-card__preview-card {
  position: absolute;
  top: 22%;
  left: 12%;
  right: 12%;
  bottom: 18%;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.preset-card__preview-bar {
  width: 35%;
  height: 6px;
  border-radius: 3px;
}
.preset-card__preview-text {
  width: 80%;
  height: 4px;
  border-radius: 2px;
  opacity: 0.85;
}
.preset-card__preview-text--short {
  width: 55%;
  opacity: 0.6;
}

/* === Шаг 4: сводка + дисклеймер === */

.summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.summary__row:last-child {
  border-bottom: none;
}
.summary__label {
  color: var(--text-3);
  font-weight: 500;
}
.summary__value {
  color: var(--text);
}
.summary__value i {
  color: var(--text-3);
  font-style: italic;
}

/* ui_polish_master Этап 4: единая дисклеймер-плашка на токенах. */
.disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--warn-fg);
}
.disclaimer .ti { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.disclaimer .checkbox {
  padding: 0;
}
.disclaimer strong {
  color: var(--warn);
}

/* На узких экранах — стек */
@media (max-width: 720px) {
  .field-row,
  .field-row--3 {
    grid-template-columns: 1fr;
  }
  .wizard-stepper__label {
    display: none;
  }
  .summary__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* === Экран Загрузка (UI v3 К9) === */

.rebuild-intro {
  text-align: center;
  padding: 40px 32px;
}
.rebuild-intro h2 {
  margin-top: 0;
}
.rebuild-features {
  list-style: none;
  padding: 0;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  text-align: left;
}
.rebuild-features li {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

/* Dropzone — большая зона для drag-drop */
/* ui_polish_master Этап 4: крупная понятная зона загрузки (эталон-язык). */
.dropzone {
  position: relative;
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--acent);
  background: var(--surface-2);
  outline: none;
}
.dropzone--active {
  border-color: var(--acent);
  background: var(--acent-bg);
  border-style: solid;
}
.dropzone__icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--acent);
}
.dropzone__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.dropzone__subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.dropzone__browse-link {
  background: none;
  border: none;
  color: var(--acent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 0;
}
.dropzone__hint {
  font-size: 12px;
  color: var(--text-3);
}
.dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Очередь загрузок с прогрессом */
.upload-queue {
  margin-bottom: 16px;
}
.upload-queue h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.upload-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 14px;
}
.upload-row:last-child {
  border-bottom: none;
}
.upload-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.upload-row__name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-row__size {
  font-size: 12px;
  color: var(--text-3);
}
.upload-row__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upload-row__bar {
  width: 100%;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.upload-row__bar-fill {
  height: 100%;
  background: var(--acent);
  transition: width 0.15s ease;
}
.upload-row__status {
  font-size: 12px;
  color: var(--text-3);
}
.upload-row--done .upload-row__bar-fill {
  background: var(--ok);
}
.upload-row--done .upload-row__status {
  color: var(--ok);
}
.upload-row--error .upload-row__bar-fill {
  background: var(--err);
  width: 100% !important;
}
.upload-row--error .upload-row__status {
  color: var(--err);
}

/* Таблица загруженных файлов */
.assets-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.assets-list__header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.assets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.assets-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.assets-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.assets-table tbody tr:last-child td {
  border-bottom: none;
}
.assets-table tbody tr:hover {
  background: var(--bg);
}
.assets-table__name {
  font-weight: 500;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assets-table__size {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.assets-table__actions {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .upload-row {
    grid-template-columns: 1fr;
  }
  .dropzone {
    padding: 32px 16px;
  }
  .dropzone__icon {
    font-size: 36px;
  }
}

/* === Экран Compliance-аудит (UI v3 К10) === */

/* Прогресс-карточка пока аудит идёт */
.audit-progress {
  text-align: center;
  padding: 32px 16px;
}
.audit-progress__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--acent);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.audit-progress__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.audit-progress__subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 20px;
}
.audit-progress__bar {
  max-width: 320px;
  margin: 0 auto 20px;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.audit-progress__fill {
  height: 100%;
  background: var(--acent);
  transition: width 0.3s ease;
}

/* Сводка по статусам */
.audit-summary {
  margin-bottom: 16px;
}
.audit-summary__counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.audit-counter {
  text-align: center;
  padding: 14px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-counter__num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.audit-counter__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.audit-counter--err .audit-counter__num { color: var(--err); }
.audit-counter--warn .audit-counter__num { color: var(--warn); }
.audit-counter--ok .audit-counter__num { color: var(--ok); }

/* ui_polish_master Этап 4: дисклеймер-плашка аудита на токенах. */
.audit-summary__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--warn-fg);
}
.audit-summary__disclaimer .ti { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.audit-summary__disclaimer strong { color: var(--warn-fg); }

/* Бар действий (sticky сверху) */
.audit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: sticky;
  top: 16px;
  z-index: 5;
  flex-wrap: wrap;
}
.audit-selection-info {
  font-size: 14px;
  color: var(--text-2);
}
.btn-ghost--inline {
  display: inline;
  padding: 2px 8px;
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--acent);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.btn-ghost--inline:hover {
  color: var(--text);
}

/* Карточка одной находки */
.findings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-3);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}
.finding-card:hover {
  border-color: var(--acent);
}
.finding-card--err {
  border-left-color: var(--err);
}
.finding-card--warn {
  border-left-color: var(--warn);
}
.finding-card--ok {
  border-left-color: var(--ok);
}

.finding-card__checkbox-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  align-items: flex-start;
}
.finding-card__checkbox-label > input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--acent);
}
.finding-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finding-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.finding-card__title {
  font-size: 15px;
  color: var(--text);
  flex: 1;
  min-width: 200px;
}
.finding-card__desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.finding-card__quote {
  margin: 0;
  padding: 8px 12px;
  background: var(--bg);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  font-style: italic;
  font-size: 13px;
  color: var(--text-2);
}
.finding-card__rec {
  font-size: 13px;
  color: var(--text-2);
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  line-height: 1.5;
}
.finding-card__npa {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--text-3);
}
.finding-card__npa-label {
  font-weight: 600;
}
.finding-card__npa code.chip {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
}

@media (max-width: 720px) {
  .audit-summary__counters {
    grid-template-columns: repeat(2, 1fr);
  }
  .audit-actions {
    flex-direction: column;
    align-items: stretch;
    position: static;
  }
  .audit-selection-info {
    text-align: center;
  }
}

/* === Экран «Проект готов» (UI v3 К11) === */

.project-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.project-page__loading {
  padding: 48px;
  text-align: center;
  color: var(--text-3);
}

.project-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.project-page__header h1 {
  margin: 8px 0 4px;
}
.project-page__header .subtitle {
  margin: 0;
}
.project-page__status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.project-page__status-badge .badge {
  font-size: 13px;
  padding: 6px 12px;
}

/* Блок действий */
.project-actions {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-actions__group h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.project-actions__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.download-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
}
.download-link.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* BUG-20 fix (QA v9): дисклеймер — серый, мелкий, с левой полосой.
   Раньше был с жёлтым фоном/каёмкой + капс — визуально давил. */
.project-disclaimer {
  padding: 10px 14px;
  background: var(--surface);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.project-disclaimer strong {
  color: var(--text-1);
}
.project-disclaimer .checkbox {
  padding: 0;
}
/* «Soft»-вариант для result-страницы rebuild (без чекбокса) */
.project-disclaimer--soft {
  font-size: 12px;
  margin-top: 12px;
}

/* Сетка слайдов */
.slides-section {
  margin-top: 8px;
}
.slides-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.slides-section__header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.slides-section__hint {
  font-size: 13px;
  color: var(--text-3);
}

.slides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.slide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.slide-card:hover {
  border-color: var(--acent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.slide-card__preview {
  position: relative;
  display: block;
  background: var(--bg);
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.slide-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slide-card__img--missing {
  display: none;
}
.slide-card__num {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}

.slide-card__meta {
  padding: 10px 12px 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.slide-card__layout {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-card__variant {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
}
.slide-card__actions {
  padding: 0 12px 12px;
  display: flex;
  gap: 6px;
}
.slide-card__regen {
  width: 100%;
  font-size: 13px;
}

/* === Модальное окно подробного просмотра слайда === */

.slide-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.slide-modal[hidden] {
  display: none;
}
.slide-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.slide-modal__dialog {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  overflow: hidden;
}
.slide-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.slide-modal__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.slide-modal__body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slide-modal__preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  /* Тело модалки — flex-column с ограниченной высотой (max-height 90vh).
     Без этого на низком окне flex сжимает контейнер превью ниже высоты
     картинки, низ слайда обрезается, а тело НЕ переполняется → не
     скроллится. flex-shrink:0 держит превью в натуральную высоту →
     переполнение уходит в .slide-modal__body (overflow-y:auto) → скролл. */
  flex-shrink: 0;
}
.slide-modal__preview img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* AL1 (overnight-5): навигация по слайдам в модалке + полный размер по клику */
.slide-modal__preview a {
  display: block;
  cursor: zoom-in;
}
.slide-modal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slide-modal__counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.slide-modal__no-preview {
  padding: 24px 16px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
.slide-modal__fields summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  padding: 8px 0;
  user-select: none;
}
.slide-modal__fields pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
}
.slide-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .project-page {
    padding: 16px;
  }
  .project-page__header {
    flex-direction: column;
  }
  .slide-modal {
    padding: 8px;
  }
  .slide-modal__header h3 {
    font-size: 13px;
  }
  .slide-modal__actions {
    flex-direction: column-reverse;
  }
  .slide-modal__actions button {
    width: 100%;
  }
}

/* === Экран Генерации (UI v3 К12) === */

.generation-card {
  padding: 32px 24px;
}

/* RUNNING состояние */
.generation-running {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.generation-running__spinner {
  width: 56px;
  height: 56px;
  border: 5px solid var(--border);
  border-top-color: var(--acent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 8px;
}
/* FIX-BUG09 (wave1 порция 3): универсальный inline-спиннер для кнопок.
   Используется в start-generate-btn пока пользователя редиректит на К12. */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
  opacity: 0.85;
}
.generation-running__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}
.generation-running__subtitle {
  font-size: 13px;
  color: var(--text-3);
  max-width: 480px;
  line-height: 1.5;
}
.generation-running__progress {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.generation-running__bar {
  flex: 1;
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.generation-running__bar-fill {
  height: 100%;
  background: var(--acent);
  transition: width 0.4s ease;
}
.generation-running__percent {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

.generation-running__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}
.generation-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.generation-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.generation-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.generation-running__actions {
  margin-top: 8px;
}
.generation-running__hint {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  max-width: 520px;
  line-height: 1.45;
}

/* DONE состояние */
.generation-done {
  text-align: center;
  padding: 24px;
}
.generation-done__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: var(--ok);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop-in 0.4s ease;
}
@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.generation-done__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.generation-done__subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
/* UX billing v1 (2.4): честная строка про фактический расход */
.generation-done__billing {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
}
/* UX billing v1 (2.3): прогноз кредитов в визарде */
.hint--forecast {
  color: var(--text-2);
  font-weight: 600;
}
.generation-done__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* PENDING состояние */
.generation-pending {
  text-align: center;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.generation-pending__title {
  font-size: 20px;
  font-weight: 600;
}
.generation-pending__subtitle {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .generation-card {
    padding: 24px 16px;
  }
  .generation-running__stats {
    grid-template-columns: 1fr;
  }
}

/* === Экран «Учебный план» (Content Brain Сессия 2) === */

.plan-container {
  max-width: 1100px;
}
.plan-bootstrap {
  text-align: center;
  padding: 32px;
}
.plan-bootstrap h2 {
  margin-top: 0;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.plan-header h2 {
  margin: 0 0 8px;
}
.plan-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-coverage {
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-coverage__main {
  font-weight: 500;
}
.plan-coverage__uncovered {
  font-size: 12px;
  color: var(--text-3);
}
.plan-coverage__uncovered code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.plan-coverage__warn {
  font-size: 12px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
  padding: 4px 8px;
  border-radius: 4px;
}
.plan-warnings {
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.plan-warnings ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.plan-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-module {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.plan-module__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.plan-module__title {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
}
.plan-module__title:hover,
.plan-module__title:focus {
  border-color: var(--border);
  background: var(--surface);
  outline: none;
}
.plan-module__count {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.plan-module__slides {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-module__add {
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.plan-module__add:hover {
  border-color: var(--acent);
  color: var(--acent);
}

.plan-slide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  position: relative;
  transition: border-color 0.15s ease;
}
.plan-slide:hover {
  border-color: var(--acent);
}
.plan-slide--dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.plan-slide__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.plan-slide__order {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
}
.plan-slide__purpose {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
}
.plan-slide__purpose:hover,
.plan-slide__purpose:focus {
  border-color: var(--border);
  background: var(--bg);
  outline: none;
}
.plan-slide__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.plan-slide__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: start;
}
.plan-slide__row label {
  color: var(--text-3);
  font-size: 12px;
  padding-top: 4px;
}
.plan-slide__layout,
.plan-slide__brief {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}
.plan-slide__brief {
  resize: vertical;
  min-height: 40px;
}
.plan-slide__facts,
.plan-slide__npa {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Панч-лист E: блок кнопок карточки — в потоке (был position:absolute и
   наезжал на бейдж источника). margin-left:auto прижимает вправо в шапке. */
.plan-slide__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Панч-лист E: галерейный мульти-выбор + панель масс-действий */
.plan-slide__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, #4f8cff);
}
.plan-slide.is-selected {
  border-color: var(--accent, #4f8cff);
  box-shadow: 0 0 0 1px var(--accent, #4f8cff);
}
.plan-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 10px;
  background: var(--surface-2, #16161a);
  font-size: 13px;
}
.plan-bulkbar__count {
  font-weight: 600;
}
.plan-bulkbar__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text-muted, #888);
}
.plan-bulkbar__select {
  padding: 4px 8px;
  font-size: 12px;
}

/* Brain integration v14 порция 1: drag-handle + source-dot + expandable.
   Замена на color-dots и UX-полировка карточки слайда. */
.plan-slide__drag {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
  cursor: grab;
  user-select: none;
  padding: 0 4px;
}
.plan-slide__drag:active {
  cursor: grabbing;
}
.plan-slide__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.plan-slide__source--ok { color: #16a34a; border-color: rgba(22, 163, 74, 0.3); }
.plan-slide__source--warn { color: #d97706; border-color: rgba(245, 158, 11, 0.3); }
.plan-slide__source--err { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); }

.plan-slide__layout-row {
  align-items: center;
}
.plan-slide__variant-badge {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.plan-slide__details {
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.plan-slide__details summary {
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.plan-slide__details summary:hover {
  color: var(--text-2);
}
.plan-slide__details-body {
  margin-top: 6px;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .plan-slide__row {
    grid-template-columns: 1fr;
  }
  .plan-actions {
    flex-direction: column;
  }
  .plan-actions button {
    width: 100%;
  }
}


/* ====================================================================== */
/* Quality Gate — экран «Качество» на странице проекта (Content Brain S3) */
/* ====================================================================== */

.quality-section {
  margin-top: 24px;
}

.quality-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.quality-section__header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-section__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.quality-section__actions .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  color: var(--text-muted);
  cursor: pointer;
}

/* Сводка вверху */
.quality-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.quality-summary__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--bg);
  min-width: 120px;
}

.quality-summary__big {
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
}

.quality-summary__caption {
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.quality-summary__counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quality-count {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
  border: 1px solid var(--border);
}

.quality-count strong {
  display: block;
  font-size: 1.6em;
  line-height: 1.2;
}

.quality-count span {
  font-size: 0.85em;
  color: var(--text-muted);
}

.quality-count--pass strong { color: #16a34a; }
.quality-count--warn strong { color: #d97706; }
.quality-count--fail strong { color: #dc2626; }

.quality-score--good { color: #16a34a; }
.quality-score--warn { color: #d97706; }
.quality-score--fail { color: #dc2626; }

/* Brain v14 порция 4: кнопка batch-фикса проблемных слайдов */
.quality-fix-row {
  margin: 12px 0;
  display: flex;
  justify-content: flex-end;
}

/* Список слайдов */
.quality-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* НПА v7 Блок E: панель опоры на НПА (grounding) */
.npa-grounding {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.npa-grounding h3 {
  margin: 0 0 12px;
  font-size: 15px;
}
.npa-grounding .muted {
  font-weight: 400;
  color: var(--muted, #888);
  font-size: 13px;
}
.npa-grounding__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.npa-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.npa-badge--ok { background: #e6f6ec; color: #1a7f43; }
.npa-badge--unverified { background: #fff5e0; color: #9a6b00; }
.npa-badge--cancelled { background: #fde7e7; color: #b02020; }
.npa-grounding__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.npa-grounding__table th,
.npa-grounding__table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.npa-row--cancelled td { color: #b02020; }
.npa-row--unverified td { color: #9a6b00; }
.npa-row--ok td { color: var(--text, #222); }

/* НПА v7 Блок G: кнопка скачивания паспорта соответствия */
.npa-grounding__actions { margin-top: 12px; }
.npa-passport-btn {
  display: inline-block;
  text-decoration: none;
}

.quality-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-left: 4px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
}

.quality-item--pass { border-left-color: #16a34a; }
.quality-item--warn { border-left-color: #d97706; background: #fffbeb; }
.quality-item--fail { border-left-color: #dc2626; background: #fef2f2; }

.quality-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-item__badge {
  font-size: 1.2em;
  font-weight: 700;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
}

.quality-item--pass .quality-item__badge { color: #16a34a; }
.quality-item--warn .quality-item__badge { color: #d97706; }
.quality-item--fail .quality-item__badge { color: #dc2626; }

.quality-item__index {
  font-weight: 600;
  color: var(--text-muted);
}

.quality-item__title {
  flex: 1;
  font-weight: 500;
}

.quality-checks {
  list-style: none;
  margin: 0;
  padding: 0 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quality-check {
  display: flex;
  gap: 8px;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--bg);
}

.quality-check--warn { color: #92400e; }
.quality-check--error { color: #991b1b; }

.quality-check__type {
  font-family: monospace;
  font-size: 0.85em;
  white-space: nowrap;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .quality-summary {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .quality-summary__counts {
    grid-template-columns: repeat(3, 1fr);
  }
  .quality-section__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === workspace-03: экран рабочего пространства (просмотр слоёв) === */

/* plan_editor v2: рабочее пространство использует ширину экрана (не cap 880px
   от .wizard-container — иначе редактор узкий и свёрнутые карточки не
   расходятся по ширине). minmax(0,1fr) даёт колонке-редактору реально расти. */
.wizard-container.workspace-container { max-width: 1500px; }
.workspace-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.workspace-layers__title {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
}

.workspace-layers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ui_polish_master Этап 4: слой-рейл по эталону project_workspace_polish. */
.workspace-layer {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.workspace-layer[data-open]:hover { background: var(--surface-2); }
.workspace-layer.is-active {
  border: 2px solid var(--acent);
  padding: 10px 12px;  /* компенсируем +1px бордюра */
}
.workspace-layer.is-empty { cursor: default; }
.workspace-layer__ic {
  color: var(--text-2);
  font-size: 19px;
  width: 20px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.workspace-layer.is-active .workspace-layer__ic { color: var(--acent); }
.workspace-layer__name { font-size: 13px; flex: 1; }
.workspace-layer.is-active .workspace-layer__name { font-weight: 500; }
.workspace-layer__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
}
.workspace-layer__muted { font-size: 11px; color: var(--text-3); }
.workspace-layer__gen { color: var(--acent); font-size: 14px; display: flex; }

.btn-sm {
  font-size: 13px;
  padding: 4px 10px;
}

.badge--ok {
  background: rgba(27, 160, 77, 0.15);
  color: #1ba04d;
}

.badge--warn {
  background: rgba(242, 196, 28, 0.18);
  color: #c79400;
}

.badge--muted {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-muted, #888);
}

.workspace-viewer {
  min-height: 320px;
}

.workspace-viewer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #2a2a2e);
}

.workspace-viewer__head h3 {
  margin: 0;
}

.workspace-viewer__code {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface-2, #16161a);
  border-radius: 8px;
  padding: 14px;
  overflow-x: auto;
}

.workspace-viewer__md {
  line-height: 1.6;
}

.workspace-viewer__md h2 { font-size: 20px; margin: 18px 0 8px; }
.workspace-viewer__md h3 { font-size: 16px; margin: 14px 0 6px; }
.workspace-viewer__md h4 { font-size: 14px; margin: 10px 0 4px; }
.workspace-viewer__md ul { margin: 6px 0 6px 20px; }
.workspace-viewer__md blockquote {
  border-left: 3px solid var(--border, #2a2a2e);
  margin: 8px 0;
  padding: 2px 12px;
  color: var(--text-muted, #888);
}
.workspace-viewer__md hr {
  border: none;
  border-top: 1px solid var(--border, #2a2a2e);
  margin: 16px 0;
}
/* Блок A2: сворачиваемый «Исходный текст» (как цитата). */
.workspace-viewer__md details.ws-source {
  border-left: 3px solid var(--border, #2a2a2e);
  background: var(--surface-2, #16161a);
  border-radius: var(--radius-md, 8px);
  margin: 10px 0;
  padding: 6px 12px;
}
.workspace-viewer__md details.ws-source > summary {
  cursor: pointer;
  color: var(--text-2, #aaa);
  font-size: 13px;
  user-select: none;
}
.workspace-viewer__md details.ws-source[open] > summary {
  margin-bottom: 6px;
}
.workspace-viewer__md details.ws-source p {
  color: var(--text-muted, #888);
  margin: 4px 0;
}

/* workspace-04a: редактор слоя */
.ws-edit-textarea {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  /* E2.3: контентные поля — читаемый sans (Inter). Моно осталось только у
     технического сырого редактора слоя (#ws-edit-area, JSON/MD-просмотр). */
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface-2, #16161a);
  color: var(--text, #e8e8ea);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  padding: 14px;
  box-sizing: border-box;
}
/* E2.3: сырой редактор слоя (структура.md/JSON) — техничный, оставляем моно. */
#ws-edit-area {
  font-family: var(--mono, ui-monospace, monospace);
}
/* E2.2/E2.3: дружелюбные поля слайда — по размеру содержимого, не 420px. */
.ws-slide-field {
  min-height: 64px;
}
.ws-field-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

.ws-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ws-edit-hint {
  font-size: 12px;
  color: var(--text-muted, #888);
}

.ws-edit-error {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(208, 33, 33, 0.12);
  color: #d02121;
  border-left: 3px solid #d02121;
  font-size: 13px;
  white-space: pre-wrap;
}

/* workspace-04b: перегенерация слоя/слайда + чекпоинт */
.ws-viewer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-regen-status {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2, #16161a);
  border: 1px solid var(--border, #2a2a2e);
  font-size: 13px;
  color: var(--text, #e8e8ea);
}

.ws-regen-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 2px solid var(--border, #2a2a2e);
  border-top-color: var(--accent, #4f8cff);
  border-radius: 50%;
  animation: ws-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes ws-spin {
  to { transform: rotate(360deg); }
}

.ws-slide-regen {
  margin-top: 16px;
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-2, #16161a);
}

.ws-slide-regen > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}

.ws-slide-regen__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ws-slide-num {
  width: 90px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a2e);
  background: var(--surface, #0f0f12);
  color: var(--text, #e8e8ea);
}

.ws-slide-instr {
  min-height: 80px;
}

.ws-checkpoint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #2a2a2e);
}

/* Фаза 5: панель слоя «Картинки» */
.ws-img-statusline {
  margin: 8px 0 14px;
  font-size: 13px;
  color: var(--text, #e8e8ea);
}

.ws-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.ws-img-card {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2, #16161a);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Блок B: чекбокс выбора картинки для скачивания. */
.ws-img-sel {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: var(--surface, #0f0f12); border-radius: 6px;
  padding: 3px 5px; line-height: 0; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ws-img-sel input { cursor: pointer; margin: 0; }

.ws-img-card__img,
.ws-img-card__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface, #0f0f12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted, #888);
}

.ws-img-card__meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-img-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}
/* Панч-лист C: метка осиротевшей картинки (PNG без промпта). */
.ws-img-orphan {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--warning, #d97706);
}

.ws-img-card__prompt {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #888);
  max-height: 54px;
  overflow: hidden;
}

.ws-img-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

/* Порция 3: единая панель по слайду */
.ws-slides-entry {
  width: 100%;
  margin: 4px 0 2px;
}
.ws-slides-entry__hint {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin: 0 0 12px;
}
.ws-slide-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-slide-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
  margin: 6px 0 14px;
}
.ws-slide-sec {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface-2, #16161a);
}
.ws-slide-sec > h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text, #e8e8ea);
}
/* P1: PNG-превью слайда в Порции 3 */
.ws-slide-preview {
  background: var(--bg, #0f0f12);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.ws-slide-preview a {
  display: block;
  cursor: zoom-in;
}
.ws-slide-preview img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}
.ws-slide-preview__fallback {
  padding: 24px 16px;
  color: var(--text-muted, #888);
  font-size: 13px;
  line-height: 1.5;
}
.ws-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ws-slide-imgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-slide-img {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ws-slide-img__pic,
.ws-slide-img__ph {
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface, #0f0f12);
  border: 1px solid var(--border, #2a2a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted, #888);
}
.ws-slide-img__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-slide-img__head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}
.ws-slide-img__prompt {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #888);
  white-space: pre-wrap;
}
.ws-stale-banner {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 35%, transparent);
}

/* Экран «Тариф и расход» — прозрачный учёт токенов */
.usage-card { margin-bottom: 18px; }
.usage-card > h3 { margin: 0 0 12px; font-size: 15px; }
.usage-list { margin: 0; padding-left: 18px; line-height: 1.9; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usage-table th,
.usage-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #2a2a2e);
}
.usage-table th { color: var(--text-muted, #888); font-weight: 600; }
.usage-table th:nth-child(n+2),
.usage-table td:nth-child(n+2) { text-align: right; }
.usage-table .usage-total td { border-top: 2px solid var(--border, #2a2a2e); }
.usage-table .usage-saved td { color: var(--success, #16a34a); }
.usage-formula {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #888);
}

/* Фаза 6: панель «Стиль» */
.ws-style-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}

.ws-style-current__label {
  font-size: 13px;
  color: var(--text-muted, #888);
}

.ws-style-status {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2, #16161a);
  border: 1px solid var(--border, #2a2a2e);
  font-size: 13px;
}

.ws-style-h4 {
  margin: 14px 0 8px;
  font-size: 14px;
}

.ws-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.ws-style-card {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-2, #16161a);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-style-card.is-active {
  border-color: var(--accent, #4f8cff);
  box-shadow: 0 0 0 1px var(--accent, #4f8cff);
}

.ws-style-swatches {
  display: inline-flex;
  gap: 4px;
}

.ws-style-sw {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-block;
}

.ws-style-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}

.ws-style-src {
  font-size: 11px;
  color: var(--text-muted, #888);
}

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

/* === Monetization P1+P2: модалка-prompt и busy-overlay === */

.prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.prompt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.prompt-modal__dialog {
  position: relative;
  background: var(--surface, #16161a);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 12px;
  padding: 20px 22px;
  width: min(600px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.prompt-modal__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}
.prompt-modal__hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted, #888);
  line-height: 1.5;
}
.prompt-modal__input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--bg, #0f0f12);
  color: var(--text, #e8e8ea);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.prompt-modal__input:focus {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 1px;
}
.prompt-modal__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.busy-overlay__card {
  background: var(--surface, #16161a);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.busy-overlay__card .spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.busy-overlay__msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8e8ea);
}
.busy-overlay__hint {
  font-size: 12px;
  color: var(--text-muted, #888);
}

/* M2: блок «Оплатить тариф» + список своих заявок */
.usage-pay-row,
.usage-topup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.usage-my-requests {
  margin-top: 4px;
}
.usage-req-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.usage-req-list li {
  padding: 8px 12px;
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 6px;
  background: var(--bg, #0f0f12);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* === M1.QC Шаг 1.3: дружелюбный баннер возврата за брак === */

/* Строка в /usage — мягко-зелёный фон, не давит. */
.usage-list .usage-refund {
  color: #6ab47f;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(106, 180, 127, 0.07);
  border-left: 3px solid #6ab47f;
  border-radius: 4px;
  list-style: none;
}

/* Модалка после генерации курса (один раз на проект). */
.refund-banner-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: refundFadeIn 0.25s ease-out;
}
@keyframes refundFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.refund-banner {
  background: var(--surface, #16161a);
  border: 1px solid var(--border, #2a2a2e);
  border-left: 4px solid #6ab47f;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 480px;
  min-width: 320px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: refundPopUp 0.3s ease-out;
}
@keyframes refundPopUp {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.refund-banner__icon {
  font-size: 32px;
  color: #6ab47f;
  margin-bottom: 8px;
}
.refund-banner__title {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.35;
  color: var(--text, #e8e8ea);
}
.refund-banner__msg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim, #b0b0b4);
  margin-bottom: 24px;
}
.refund-banner__sub {
  color: #6ab47f;
  font-style: italic;
}
.refund-banner__ok {
  min-width: 120px;
}

/* Баг 2 (UI punch-list): image-lightbox для просмотра картинки в полный размер. */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 18, 0.86);
  cursor: zoom-out;
}
.img-lightbox__img {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.img-lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #EF9F27;
  color: #1a1205;
  font-size: 22px;
  cursor: pointer;
}

/* P1.7: экран «Промпты картинок» — карточки по слайдам (русский-first). */
.ip-summary {
  font-weight: 600; font-size: 14px; margin: 4px 0 12px;
  color: var(--text-2);
}
.ip-wrap { display: flex; gap: 16px; align-items: flex-start; }
.ip-nav {
  flex: 0 0 230px; position: sticky; top: 8px; max-height: 70vh;
  overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px;
}
.ip-nav__search {
  width: 100%; margin-bottom: 8px; padding: 6px 8px; font-size: 13px;
}
.ip-nav__item {
  display: block; padding: 6px 8px; border-radius: 6px; font-size: 13px;
  color: var(--text-2); text-decoration: none;
}
.ip-nav__item:hover { background: var(--surface-2); color: var(--text); }
.ip-nav__count { color: var(--text-3); font-size: 12px; }
.ip-sections { flex: 1 1 auto; min-width: 0; }
.ip-section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.ip-section__head {
  cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 14px;
}
.ip-section__cards { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ip-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.ip-card__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ip-card__intent {
  font-size: 12px; font-weight: 600; background: var(--acent-bg); color: var(--acent);
  padding: 1px 8px; border-radius: 999px;
}
.ip-card__aspect { font-size: 12px; color: var(--text-3); }
.ip-card__label { font-size: 14px; color: var(--text); }
.ip-card__border { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ip-card__border--red { background: #fde2e2; color: #c02121; }
.ip-card__border--green { background: #e2f6e9; color: #1ba04d; }
.ip-card__prompt { margin-top: 6px; }
.ip-card__prompt summary { cursor: pointer; font-size: 12px; color: var(--text-3); }
.ip-card__prompt-text {
  margin-top: 6px; font-size: 12px; color: var(--text-2); white-space: pre-wrap;
  background: var(--surface-2); border-radius: 6px; padding: 8px;
}
@media (max-width: 720px) {
  .ip-wrap { flex-direction: column; }
  .ip-nav { position: static; flex-basis: auto; width: 100%; max-height: none; }
}

/* === UX billing v1 Часть 1: контекстные подсказки «?» + поповер === */
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface, #f3f4f6);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.help-dot:hover { background: var(--primary-soft, #eef); color: var(--text); }

.help-popover {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.45;
}
.help-popover__title { font-weight: 700; margin-bottom: 6px; color: var(--text); }
.help-popover__body { color: var(--text-2); margin-bottom: 8px; }
.help-popover__more { font-size: 12px; text-decoration: none; }

.help-guide__item { margin-bottom: 12px; }
.help-guide__item h3 { margin: 0 0 6px; }
.help-guide__item p { margin: 0; color: var(--text-2); line-height: 1.5; }

/* UX help v1 (1.2): направляющее пустое состояние с CTA */
.empty-state--cta {
  text-align: center;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.empty-state__title { font-size: 18px; font-weight: 700; color: var(--text); }
.empty-state__hint { color: var(--text-2); max-width: 460px; line-height: 1.5; }
.empty-state__actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.empty-state__more { margin-top: 4px; font-size: 13px; text-decoration: none; }

/* UX help v1 (1.3): онбординг-оверлей первого входа */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.onboarding__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.onboarding__card {
  position: relative;
  max-width: 540px; width: calc(100% - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.onboarding__head { font-size: 20px; font-weight: 800; color: var(--text); }
.onboarding__sub { color: var(--text-2); margin: 4px 0 16px; }
.onboarding__step { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.onboarding__num {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary, #2b6cb0); color: #fff;
  font-weight: 700; font-size: 13px;
}
.onboarding__step-title { font-weight: 700; color: var(--text); }
.onboarding__step-body { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.onboarding__actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.onboarding__more { font-size: 13px; text-decoration: none; }

/* Мини-аудит v1: интро-экран аудита + оффер триала */
.audit-intro { margin-top: 8px; }
.audit-intro .rebuild-features { margin-bottom: 16px; }
.audit-trial-offer { text-align: center; padding: 28px 24px; }
.audit-trial-offer__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.audit-trial-offer p { color: var(--text-2); max-width: 460px; margin: 0 auto 16px; line-height: 1.5; }
.audit-trial-offer__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Мини-аудит v1 (Блок C): отчёт как лид-магнит */
.audit-headline { font-size: 17px; font-weight: 700; margin: 8px 0 14px; color: var(--text); }
.audit-ok { line-height: 1.5; }
.audit-lead-cta {
  margin-top: 18px; text-align: center; padding: 26px 24px;
  border: 1px solid var(--primary, #2b6cb0);
}
.audit-lead-cta__title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.audit-lead-cta p { color: var(--text-2); max-width: 520px; margin: 0 auto 16px; line-height: 1.5; }

/* ui_polish_master Этап 4: авторизация — единая карточка-форма (как витрина). */
.auth-wrap {
  max-width: 420px;
  margin: 56px auto;
  padding: 0 16px;
}
.auth-wrap h1 {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 4px;
}
.auth-wrap .subtitle { margin-bottom: 18px; }
.auth-wrap form.card {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-wrap form.card label { margin-top: 8px; }
/* бренд-штрих над формой — индиго-плитка с золотой звездой Avior */
.auth-brand {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.auth-brand .ti { color: var(--gold); font-size: 22px; }

/* ui_polish_master Этап 4: «Тариф и расход» — баланс крупно. */
.usage-balance {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.usage-balance__main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.usage-balance__num {
  font-family: var(--font-brand);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: var(--indigo);
}
html[data-theme="dark"] .usage-balance__num { color: var(--acent); }
.usage-balance__cap { font-size: 14px; color: var(--text-2); }
.usage-balance__bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.usage-balance__fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.4s;
}
.usage-balance__sub { font-size: 12px; color: var(--text-3); }

/* ui_polish_master Этап 4: профиль — статус почты на токенах, разделители. */
.profile-mail { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.profile-mail--ok { color: var(--ok); }
.profile-mail--warn { color: var(--warn); }
.profile-sep { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* plan_editor v2 Слой 1: карточный редактор «Структура курса». */
.struct-meta { padding: 14px 16px; margin-bottom: 14px; }
/* .struct-list — сетка по ширине (определена ниже, в UX-блоке аккордеона). */
.struct-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.struct-card__top { display: flex; align-items: center; margin-bottom: 8px; }
.struct-card__num { font-size: 12px; color: var(--text-3); }
.struct-card__ops { margin-left: auto; display: flex; gap: 4px; }
.struct-card__row { display: flex; gap: 12px; flex-wrap: wrap; }
.struct-card__row > div { flex: 1; min-width: 140px; }
.struct-card__src { margin-top: 8px; }
.struct-card__src summary { cursor: pointer; color: var(--acent); font-size: 13px; }

/* plan_editor v2 Слой 2: редактор «Учебный план» (модули → слайды). */
.cur-list { display: flex; flex-direction: column; gap: 12px; }
.cur-module {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.cur-module__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cur-module__num { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cur-module__title { flex: 1; font-weight: 500; }
.cur-module__ops, .cur-slide__ops { display: flex; gap: 2px; flex-shrink: 0; }
.cur-slides { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cur-slide {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
.cur-slide__n { font-size: 12px; color: var(--text-3); width: 18px; text-align: right; }
.cur-slide__purpose { flex: 1; }
.cur-slide__lb { flex-shrink: 0; }

/* plan_editor v2 Слой 3: «План презентаций» — список-аккордеон карточек-слайдов. */
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-card2 { padding: 12px 14px; }
.sp-card2.is-filtered-out { display: none; }          /* поиск прячет несовпавшие */
.sp-card2__head { display: flex; align-items: center; gap: 8px; }
.sp-card2__num { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sp-card2__title { flex: 1; min-width: 120px; }
.sp-card2__type {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.sp-card2__type .ti { color: var(--acent); font-size: 16px; }
.sp-card2__ops { display: flex; gap: 2px; flex-shrink: 0; }
.sp-card2__body { margin-top: 12px; }
/* Блок A: бейдж статуса картинки на карточке слайда. */
.sp-img-badge {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--radius-md);
}
.sp-img-badge .ti { font-size: 14px; }
.sp-img--have { background: var(--ok-bg); color: var(--ok-fg); }
.sp-img--gen { background: var(--acent-bg); color: var(--acent); }
.sp-img--need { background: var(--warn-bg); color: var(--warn-fg); }
.sp-card2.is-collapsed .sp-card2__body { display: none; }
.sp-card2__chev .ti { transition: transform 0.15s; }
.sp-card2.is-collapsed .sp-card2__chev .ti { transform: rotate(-90deg); }
.sp-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sp-item { display: flex; gap: 6px; align-items: center; }
.sp-item__in { flex: 1; }
.sp-lbl--red { color: var(--err); }
.sp-lbl--green { color: var(--ok); }
.sp-hint-split {
  margin-top: 10px; font-size: 12px; color: var(--text-2);
  background: var(--acent-bg); border-radius: var(--radius-md); padding: 8px 10px;
  display: flex; gap: 6px; align-items: flex-start;
}
.sp-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sp-trow { display: flex; gap: 6px; align-items: center; }
.sp-trow--head { margin-bottom: 6px; }
.sp-th { flex: 1; font-weight: 600; }
.sp-td { flex: 1; }

/* plan_editor v2 UX: аккордеон + использование ширины (Слои 1–2). */
.accordion-bar { display: flex; gap: 8px; margin-bottom: 10px; }

/* Структура: сетка по ширине; свёрнутая карточка — в ячейке, развёрнутая —
   на всю строку (видно поля). «Свернул → только заголовок». */
/* flex-wrap, а НЕ grid: grid-column:1/-1 не работает с auto-fill (отрицательные
   линии), даёт одну колонку. Flex-basis надёжно пакует свёрнутые карточки. */
.struct-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.struct-card { flex: 1 1 100%; }                 /* развёрнутая — во всю строку */
.struct-card.is-collapsed { flex: 1 1 300px; max-width: 440px; } /* свёрнутая — пакуется по ширине */
.struct-card.is-collapsed .struct-card__body { display: none; }
.struct-card__head { display: flex; align-items: center; gap: 8px; }
.struct-card__title { flex: 1; font-weight: 500; }
.struct-card__body { margin-top: 10px; }
.struct-card__chev .ti { transition: transform 0.15s; }
.struct-card.is-collapsed .struct-card__chev .ti { transform: rotate(-90deg); }

/* Учебный план: модуль-аккордеон. Свёрнут → видно заголовок + счётчик. */
.cur-module__count { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cur-module.is-collapsed .cur-module__body { display: none; }
.cur-module__chev .ti { transition: transform 0.15s; }
.cur-module.is-collapsed .cur-module__chev .ti { transform: rotate(-90deg); }

/* plan_editor v2 Слой 4: редактор «Промпты картинок». */
.pe-list { display: flex; flex-direction: column; gap: 16px; }
.pe-group__head { font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }
.pe-prompt { padding: 12px 14px; margin-bottom: 10px; }
.pe-prompt__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pe-prompt__row > div { flex: 1; min-width: 120px; }
.pe-prompt__border {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-md);
}
.pe-border--red { background: var(--err-bg); color: var(--err-fg); }
.pe-border--green { background: var(--ok-bg); color: var(--ok-fg); }
.pe-prompt__en { margin-top: 10px; }
.pe-prompt__en summary { cursor: pointer; color: var(--acent); font-size: 13px; }

/* plan_editor v2: поиск в аккордеон-баре + подсветка попаданий (Учебный план). */
.acc-search {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px 10px; color: var(--text-3); min-width: 240px;
}
.acc-search input {
  border: none; background: transparent; outline: none; flex: 1;
  color: var(--text); font-size: 13px;
}
.cur-slide.is-search-hit { outline: 2px solid var(--gold); }

/* === E3b/E3c: кокпит картинок (обзор слайдов + галочки + массовые действия) === */
.cockpit-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 14px;
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); padding: 8px 0;
}
.cockpit-filter { padding: 6px 10px; border-radius: var(--radius-md); }
.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cockpit-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2); overflow: hidden;
}
.cockpit-card__sel {
  position: absolute; top: 6px; left: 6px; z-index: 2; line-height: 0;
  background: var(--surface); border-radius: 6px; padding: 3px 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); cursor: pointer;
}
.cockpit-card__preview { aspect-ratio: 16 / 9; background: var(--surface); }
.cockpit-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cockpit-card__ph {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 28px;
}
.cockpit-card__body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.cockpit-card__head { display: flex; align-items: center; gap: 6px; }
.cockpit-card__num { font-size: 11px; color: var(--text-3); }
.cockpit-card__title {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-card__row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cockpit-card__row button { margin-left: auto; }
.cockpit-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-md);
}
.cockpit-status--ok { background: var(--ok-bg); color: var(--ok-fg); }
.cockpit-status--warn { background: var(--warn-bg); color: var(--warn-fg); }
.cockpit-status--err { background: var(--err-bg); color: var(--err-fg); }
.cockpit-status--gen { background: var(--acent-bg); color: var(--acent); }
.cockpit-status--muted { background: var(--surface); color: var(--text-3); }

/* ============================================================
   Онбординг v1 — гайд-тур первого входа + страница «Инструкция».
   Только онбординг-контент; логику цен/НПА/СИЗ/генерации не трогаем.
   ============================================================ */

/* --- Гайд-тур (оверлей с подсветкой data-tour-якорей) --- */
.tour-overlay { position: fixed; inset: 0; z-index: 1000; }
.tour__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 13, 35, 0.55);
  backdrop-filter: blur(1px);
}
.tour__card {
  position: fixed;
  max-width: 360px; width: calc(100% - 32px);
  box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), 0 12px 40px rgba(15, 13, 35, 0.28);
  padding: 18px 18px 16px;
  z-index: 1002;
}
.tour__progress {
  font-size: 12px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.tour__body {
  font-size: 15px; line-height: 1.5;
  color: var(--text);
  margin: 0 0 16px;
}
.tour__actions {
  display: flex; align-items: center; gap: 12px;
}
.tour__actions .btn,
.tour__actions a.btn { margin: 0; }
.tour__spacer { flex: 1 1 auto; }
.tour__skip {
  background: none; border: none;
  color: var(--text-3); cursor: pointer;
  font-size: 13px; padding: 4px 2px;
  font-family: inherit;
}
.tour__skip:hover { color: var(--text); text-decoration: underline; }
/* Подсветка целевого элемента: поднимаем над затемнением + кольцо. */
.tour-highlight {
  position: relative; z-index: 1001;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--primary), 0 0 0 9px rgba(79, 70, 229, 0.25);
  transition: box-shadow 0.2s ease;
}

/* --- Страница «Инструкция» (#/guide) --- */
.instruction__num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 600;
  margin-right: 10px;
}
.instruction__legal {
  margin-top: 20px;
  border-left: 3px solid var(--warn);
  background: var(--warn-bg); color: var(--warn-fg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
}
.instruction__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 20px;
}